topic★★★★★난이도 · 약 15분

의도 정의와 설계 — PRD 작성, Plan 모드 활용

PRD로 요구사항을 명문화하고, Plan 모드로 구현 계획을 세운 뒤 코드에 착수한다.

#PRD#Plan 모드#설계#의도 정의

왜 배우는가

코드부터 쓰면 방향을 잃는다. 5분만 투자해서 의도를 명확히 적으면, AI가 정확한 코드를 한 번에 생성할 확률이 훨씬 높아진다.

PRD(Product Requirements Document)는 '무엇을 왜 만드는지'를 정리한 문서다. 거창한 형식이 필요 없다. 핵심 요구사항 3~5줄이면 충분하다.

프롬프트 해부 — PRD의 목적·기능·제약이 그대로 지시 프롬프트의 뼈대가 된다

markdown

## PRD 예시: 사용자 프로필 페이지

### 목적
사용자가 자신의 학습 진행 상황을 한눈에 볼 수 있는 페이지.

### 핵심 기능
1. 프로필 사진 + 닉네임 표시
2. 최근 7일 학습 시간 차트
3. 완료한 레슨 목록 (최신순)
4. 연속 학습 일수 배지

### 제약 조건
- 모바일 반응형 필수
- Tailwind CSS v4 사용
- 다크 모드 없음 (밝은 배경만)

이 정도 PRD만 있어도 AI가 정확한 방향으로 코드를 생성한다. 목적, 핵심 기능, 제약 조건만 명확히 적으면 된다.

Plan 모드 — Claude Code에서 `/plan` 또는 `Shift+Tab`으로 진입한다. Plan 모드에서 AI는 코드를 쓰지 않고 구현 계획만 제시한다. 어떤 파일을 만들지, 어떤 순서로 작업할지, 어떤 라이브러리를 쓸지 미리 확인할 수 있다.

bash

# Plan 모드 진입
# 방법 1: 슬래시 커맨드
/plan 사용자 프로필 페이지를 만들어줘

# 방법 2: 단축키
# Shift+Tab → 입력 모드가 "Plan"으로 변경

# AI 응답 예시:
# 1. src/app/profile/page.tsx 생성
# 2. src/components/ProfileCard.tsx 생성
# 3. src/components/LearningChart.tsx 생성
# 4. lib/user-progress.ts 유틸 작성
# → 이 계획이 맞으면 "좋아, 진행해줘"
# → 수정이 필요하면 "차트는 빼고 진행해줘"

Plan 모드로 먼저 계획을 검토하면 잘못된 방향으로 코드가 생성되는 것을 방지할 수 있다. '설계 먼저, 코드는 나중에'가 핵심이다.

설계 먼저, 코드는 나중에 — 이것이 바이브코딩의 황금 규칙이다. AI에게 바로 "코드 짜줘"라고 하면 의도와 다른 결과가 나올 확률이 높다. PRD를 3분 적고, Plan 모드로 2분 검토한 뒤 구현에 들어가면 전체 시간이 오히려 줄어든다.