# 이미지로 작업하기 (/ko/docs/verdent-for-vscode/common-workflows/images)

> Verdent에서 이미지를 업로드하고 활용하기



Verdent for VS Code에는 강력한 멀티모달 기능이 포함되어 있어 이미지를 업로드하고 시각적 분석, 목업 기반 코드 생성, 스크린샷을 활용한 디버깅 등을 할 수 있습니다. 이 가이드는 개발 과정에서 이미지 이해 기능을 활용하는 실용적인 워크플로를 보여줍니다.

***

## Verdent에 이미지 업로드하기 [#verdent에-이미지-업로드하기]

분석이나 참고용으로 Verdent에 이미지를 공유하고 싶다고 가정해 보겠습니다.

<Tabs>
  <Tab title="복사 및 붙여넣기">
    빠른 클립보드 방식:

    1. 이미지를 클립보드에 복사합니다(스크린샷, 브라우저에서 복사한 이미지 등).
    2. Verdent 입력 필드를 선택합니다.
    3. **Ctrl+V**(Windows/Linux)로 붙여넣습니다.

    **중요:** macOS에서는 이미지를 붙여넣을 때 **Cmd+V**가 아니라 **Ctrl+V**를 사용합니다.

    이미지가 대화에 표시됩니다.
  </Tab>

  <Tab title="파일 경로 참조">
    경로로 이미지를 참조합니다:

    ```
    Analyze this screenshot: /path/to/screenshot.png
    ```

    Verdent이 지정된 경로에서 이미지를 읽습니다.

    <CodeGroup>
      ```bash "Absolute Path"
      /home/user/screenshots/error.png
      /Users/john/Desktop/mockups/design.png
      ```

      ```bash "Relative Path (Project Root)"
      ./screenshots/error.png
      ./mockups/design.png
      ```

      ```bash "Relative Path (Current Directory)"
      ../images/diagram.png
      ../../assets/logo.png
      ```
    </CodeGroup>

    일반적인 형식: PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="여러 이미지">
    여러 이미지로 작업합니다:

    1. 클립보드에서 여러 이미지를 순서대로 붙여넣습니다.
    2. 또는 여러 경로를 참조합니다:

    ```
    Compare these three mockups: design-v1.png, design-v2.png, design-v3.png
    ```

    모든 이미지가 대화에 표시되며 함께 참조할 수 있습니다.
  </Tab>
</Tabs>

<Tip>
  **팁:**

  * 지원 형식: PNG, JPG, JPEG, WebP, GIF, BMP
  * 이미지는 여러 차례 이어지는 대화에서도 대화 컨텍스트에 남아 있습니다.
  * 후속 질문에서 업로드한 이미지를 참조할 수 있습니다.
  * 이미지 품질이 선명할수록 더 나은 분석 결과를 얻을 수 있습니다.
</Tip>

***

## 디자인 목업에서 코드 생성하기 [#디자인-목업에서-코드-생성하기]

디자인 목업이 있고 Verdent이 구현 코드를 생성하길 원한다고 가정해 보겠습니다.

<Steps>
  <Step title="디자인 목업 업로드">
    목업 이미지를 복사하거나(Figma 내보내기, 디자인 도구, 손그림 스케치 등) 파일 경로로 참조합니다.
  </Step>

  <Step title="코드 생성 요청">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent이 시각적 구조를 분석합니다.
  </Step>

  <Step title="Verdent이 컴포넌트 구조 생성">
    Verdent이 시각 요소를 식별하고 다음을 생성합니다:

    ```tsx
    // DashboardLayout.tsx
    import React from 'react';
    import { StatCard } from './StatCard';
    import { RecentActivity } from './RecentActivity';
    import { UserChart } from './UserChart';

    export function DashboardLayout() {
      return (
        <div className="dashboard-container">
          <div className="stats-grid">
            <StatCard title="Total Users" value="1,234" trend="+12%" />
            <StatCard title="Revenue" value="$45.6K" trend="+8%" />
            <StatCard title="Active Sessions" value="89" trend="-3%" />
          </div>
          <div className="charts-section">
            <UserChart />
          </div>
          <div className="activity-section">
            <RecentActivity />
          </div>
        </div>
      );
    }
    ```

    컴포넌트는 목업 구조와 일치합니다.
  </Step>

  <Step title="해당 CSS 생성">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent이 시각 디자인을 기반으로 스타일을 추가합니다:

    ```tsx
    <div className="grid grid-cols-3 gap-6 p-6">
      <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
    </div>
    ```
  </Step>

  <Step title="세부 사항 다듬기">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent이 디자인에 더 정확히 맞도록 조정합니다.
  </Step>
</Steps>

<Tip>
  **팁:**

  * 해상도가 높은 목업일수록 더 정확한 코드를 생성합니다.
  * 사용할 프레임워크를 명시하세요: React, Vue, Angular, vanilla HTML/CSS
  * 스타일링 방식을 언급하세요: Tailwind, CSS Modules, Styled Components
  * 정확도를 높이려면 색상 코드나 디자인 시스템 세부 정보를 제공하세요.
  * 빠른 프로토타입에는 손그림 스케치도 사용할 수 있습니다.
</Tip>

***

## 스크린샷으로 오류 디버깅하기 [#스크린샷으로-오류-디버깅하기]

오류 메시지가 나타났고 그 의미를 이해하는 데 도움이 필요하다고 가정해 보겠습니다.

<Tabs>
  <Tab title="브라우저 콘솔 오류">
    오류가 표시된 브라우저 콘솔 스크린샷을 붙여넣습니다:

    ```
    Here's the error I'm getting in the console. What's causing it?
    ```

    Verdent이 다음을 읽습니다:

    * 오류 메시지 텍스트
    * 스택 트레이스 정보
    * 파일 이름과 줄 번호
    * 관련 콘솔 경고

    Verdent이 진단을 제공합니다:

    ```
    This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.
    ```

    Verdent이 수정 방법을 제안합니다.
  </Tab>

  <Tab title="터미널 오류">
    터미널 컴파일 오류 스크린샷을 붙여넣습니다:

    ```
    My TypeScript build is failing with these errors
    ```

    Verdent이 다음을 분석합니다:

    * 타입 오류
    * 파일 경로
    * 오류 코드
    * 컴파일 컨텍스트

    Verdent이 설명합니다:

    ```
    You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).
    ```
  </Tab>

  <Tab title="런타임 예외">
    애플리케이션 로그의 스택 트레이스 스크린샷을 붙여넣습니다:

    ```
    The application crashed with this exception
    ```

    Verdent이 다음을 검토합니다:

    * 예외 타입
    * 스택 트레이스
    * 메서드 이름과 줄 번호
    * 컨텍스트가 포함된 로그 메시지

    근본 원인을 식별하고 수정 방법을 제안합니다.
  </Tab>

  <Tab title="네트워크 오류">
    Browser DevTools Network 탭의 스크린샷을 붙여넣습니다:

    ```
    This API request is failing, here's the network tab
    ```

    Verdent이 다음을 분석합니다:

    * HTTP 상태 코드
    * 요청/응답 헤더
    * 요청 페이로드
    * 응답 본문

    API 문제를 진단합니다.
  </Tab>
</Tabs>

<Tip>
  **팁:**

  * 전체 오류 메시지를 포함하세요. 중요한 세부 정보를 잘라내지 마세요.
  * 가능하면 스택 트레이스를 끝까지 보여주세요.
  * 주변 컨텍스트를 포함하세요. 다른 콘솔 메시지나 네트워크 요청 등이 도움이 됩니다.
  * 오류를 텍스트로만 설명하지 말고 실제 오류 화면을 캡처하세요.
</Tip>

***

## 자주 묻는 질문 [#자주-묻는-질문]

<Accordion title="이미지 파일 크기 제한은 어떻게 되나요?">
  **최대 파일 크기:** 5MB(초과 시 자동 압축되며, 압축 후에도 5MB를 넘으면 오류가 발생합니다)

  **최대 해상도:** 2000×2000픽셀

  **지원 형식:** PNG, JPG, JPEG, GIF, BMP, WebP

  **권장 방식:** 최적의 성능과 정확한 분석을 위해 3MB 미만, 최대 2000×2000 해상도의 이미지를 사용하세요.
</Accordion>

<Accordion title="Verdent이 하나의 대화에서 여러 이미지를 분석할 수 있나요?">
  예. 여러 이미지를 순서대로 붙여넣거나 하나의 프롬프트에서 여러 파일 경로를 참조할 수 있습니다. Verdent은 비교와 분석을 위해 모든 이미지의 컨텍스트를 유지합니다. 예: "이 세 개의 목업을 비교하고 차이점을 찾아줘."
</Accordion>

<Accordion title="Verdent이 제 이미지를 외부 서버에 업로드하나요?">
  클립보드로 붙여넣거나 파일 경로로 참조한 이미지는 대화 세션 안에서 처리됩니다. 이미지는 영구 저장되지 않으며 새 대화를 시작하면 지워집니다. 파일 경로 참조는 이미지를 업로드하지 않고 로컬에서 읽습니다.
</Accordion>

<Accordion title="Verdent이 목업에서 프로덕션 준비가 된 코드를 생성할 수 있나요?">
  Verdent은 목업의 시각적 구조, 레이아웃, 스타일링을 구현하는 동작 가능한 시작 코드를 생성합니다. 일반적으로 비즈니스 로직, 데이터 연동, 접근성 기능, 오류 처리, 프로덕션 최적화를 추가해 다듬어야 합니다.
</Accordion>

<Accordion title="Verdent이 제 디자인 목업을 잘못 해석하면 어떻게 하나요?">
  반복적으로 수정 피드백을 제공하세요. "헤더는 회색이 아니라 파란색이어야 해" 또는 "이 카드들은 4열이 아니라 3열 그리드여야 해"라고 말할 수 있습니다. Verdent은 수정 사항을 바탕으로 구현을 조정합니다. 여러 번 다듬는 과정은 일반적입니다.
</Accordion>

***

## 함께 보기 [#함께-보기]

<CardGroup cols="2">
  <Card title="새 코드 작성" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Verdent으로 새 기능과 컴포넌트 만들기
  </Card>

  <Card title="코드 이해하기" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    코드 이해와 탐색 워크플로
  </Card>
</CardGroup>