# Plan-Code-Verify 워크플로 (/ko/docs/verdent-for-vscode/core-features/plan-code-verify-loop)

> Plan-Code-Verify 워크플로는 여러 입력 방식을 통해 요구사항, 구현, 검증을 정밀하게 제어할 수 있게 해줍니다.



### 배우게 될 내용 [#배우게-될-내용]

* Plan-Code-Verify 워크플로란 무엇인가
* 멀티모달 명세 방식(자연어, 시각 자료, 인터랙티브)

***

## **Plan-Code-Verify** 워크플로 [#plan-code-verify-워크플로]

Verdent 워크플로의 세 단계를 모두 통합합니다.

**Plan:** 명확하고 시각적인 로직 다이어그램과 플랜 규칙으로 요구사항을 구체화하고 솔루션을 설계합니다. 자연어, UI 목업, 인터랙티브 데모로 명세를 표현합니다.

**Code**:코드를 쉽게 리뷰하고, 리팩터링하고, 개선하며, 매번 명확한 결과를 제공합니다. 멀티모달 입력을 통해 구현이 정확한 요구사항과 일치하도록 합니다.

**Verify:** 검증 서브에이전트와 브라우저 도구로 문제를 조기에 발견해 신뢰할 수 있는 결과를 얻습니다.

**Plan-Code-Verify 워크플로 작동 방식:**

<Steps>
  <Step title="플랜 규칙">
    * 기본 제공 역할 템플릿(Frontend, Test, Product Manager)을 선택합니다
    * 사고 방식과 업무 습관에 맞는 사용자 지정 플랜 규칙을 만듭니다
  </Step>

  <Step title="플랜 미리보기">
    * 플랜 리뷰를 통해 플랜의 구조와 내용을 명확히 합니다
    * 플랜 리뷰에서 AI와 방향을 맞춘 뒤 ‘Generate Plan’을 선택해 상세 플랜 내용을 생성합니다
  </Step>

  <Step title="플랜 설계">
    다음을 포함한 상세 명세입니다.

    * 시스템 아키텍처 다이어그램
    * 컴포넌트 구조와 관계
    * 데이터 모델과 API 계약
    * 시각적 목업을 포함한 UI/UX 명세
    * 기술 스택 선정 근거
  </Step>

  <Step title="작업 분해">
    구현 워크플로를 구성하기 위한 의존성과 우선순위가 포함된 계층형 목록입니다

    * 작업의 실시간 진행 상황을 표시합니다
    * 완료 후 완료 상태를 요약합니다
  </Step>

  <Step title="Diff 요약">
    코드 변경 사항과 코드 리뷰어 서브에이전트를 검토합니다

    * 변경 위치 파악 - 코드 변경 사항과 함께 수정된 모든 파일을 나열합니다
    * 로직 요약 - 무엇이 왜 변경되었는지 자연어로 설명합니다
    * 영향 분석 - 문서, APIs, 의존 코드에 미치는 후속 영향을 강조합니다
  </Step>

  <Step title="더 이른 검증">
    * 설정 가능한 자동 검증
    * 서브에이전트와 브라우저 도구로 검증합니다
  </Step>
</Steps>

## 멀티모달 명세 [#멀티모달-명세]

요구사항을 표현하는 여러 방식을 지원합니다.

<Tabs>
  <Tab title="자연어">
    요구사항, 제약 조건, 수락 기준을 자연어로 표현합니다.

    * 기술 요구사항과 비즈니스 요구사항의 풍부한 컨텍스트 이해
    * 복잡하고 다층적인 명세 지원
    * 요구사항 정의를 위한 자연스러운 대화 흐름
  </Tab>

  <Tab title="시각적 요구사항">
    UI 목업, 디자인 스크린샷, 참고 구현을 업로드합니다.

    * 시각적 명세를 바탕으로 픽셀 단위까지 정확하게 재현
    * 디자인 커뮤니케이션을 위한 여러 이미지 형식 지원
    * UI/UX 구현을 위한 시각적 컨텍스트
  </Tab>

  <Tab title="인터랙티브 데모">
    작동하는 예시나 프로토타입을 공유합니다.

    * 동작과 사용자 경험에 대한 기대사항 전달
    * 복잡한 상호작용과 워크플로 시연
    * 더 명확한 요구사항 전달을 위한 라이브 예시
  </Tab>
</Tabs>

이 멀티모달 접근 방식은 복잡한 요구사항, 특히 UI/UX 명세를 모호함 없이 정확하게 포착하도록 보장합니다.

***

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

<CardGroup cols="3">
  <Card title="Professional Plan" icon="diagram-project" href="/docs/verdent-for-vscode/core-features/professional-plan">
    아이디어를 구현 플랜으로 전환합니다
  </Card>

  <Card title="Code Diff" icon="code-compare" href="/docs/verdent-for-vscode/core-features/code-diff">
    엔터프라이즈급 코드 리뷰 워크플로
  </Card>
</CardGroup>