📐 IN THIS BLUEPRINT
"클로드한테 일단 시켜보고 안 되면 고치면 되잖아요?" — 가장 흔한 함정입니다. PLAN 없이 시작하면 토큰 3배, 시간 5배, 결과물은 누더기. 이 글은 30분의 PLAN으로 3시간을 살리는 법을 가르칩니다.
안녕하세요, 봄내AI해적단 선장 이장환입니다. 시리즈 열 번째 글이에요.
지난 9편의 글에서 우리는 도구와 방법을 익혔습니다. 그런데 멘티들과 대화하다 보면, 거의 모든 막힘의 공통 원인이 하나 있어요.
바이브 코딩의 진짜 적은 클로드의 한계도, 본인의 코딩 실력 부족도 아닙니다. "일단 해보고 안 되면 고치면 되겠지" 라는 마음가짐이에요. 이게 1시간짜리 작업을 한나절짜리 디버깅 지옥으로 바꿉니다.
건축가는 도면 없이 집을 짓지 않습니다. 항해사는 항해도 없이 바다로 나가지 않아요. 본인이 클로드 코드의 선장이라면, PLAN은 본인의 항해도입니다.
⊙ 청사진 구성
9개 챕터. 1~3장은 왜 PLAN이 필요한가, 4~7장은 PLAN 세우는 법, 8~9장은 함정과 실전입니다.
PLAN이란 — Vibe Coding 시대의 정의.
"PLAN"이라는 말, 들으면 떠오르는 게 있죠. 거대한 워터폴 방식의 100페이지 명세서, 한 달짜리 PRD 작성, 슬라이드 50장의 디자인 문서... 그건 옛날 방식입니다.
바이브 코딩 시대의 PLAN은 완전히 달라요. 단순합니다.
📐 정의
"Vibe Coding 시대의 PLAN = 클로드에게 줄 컨텍스트의 사전 정리. 본인의 머릿속 의도를 클로드가 이해할 수 있는 형태로 미리 옮겨두는 작업."
옛날 PLAN vs 바이브 코딩 PLAN
📜 워터폴 PLAN
- 분량: 50~100페이지
- 기간: 며칠~몇 주
- 변경: 매우 어려움
- 목적: 위에 보고용
- 대상: 사람 (스펙 작성)
📐 컨텍스트 PLAN
- 분량: 1~2페이지
- 기간: 30분 이내
- 변경: 매번 자유롭게
- 목적: 클로드 컨텍스트
- 대상: AI (CLAUDE.md)
💡 핵심 통찰 · PLAN은 본인을 위한 게 아닙니다. "클로드가 본인 머릿속을 들여다보게 만드는 도구"입니다. 클로드가 본인 의도를 모르면, 본인이 모르는 코드가 나옵니다. PLAN의 목적은 단 하나 — 의도를 클로드 머리에 옮기는 것.
PLAN 없을 때 5가지 재앙.
"PLAN 안 세우고 그냥 시작하면 무슨 일이 일어나나" — 봄내AI해적단 멘토로 1년간 관찰한 5가지 재앙.
💰 토큰 폭증 — 비용 3배
방향성 없이 클로드와 대화하면 같은 의도를 5번 설명하게 됩니다. 매 메시지마다 토큰 소비. Pro 플랜으로 충분했을 작업이 Max 플랜이 필요해져요.
🌀 클로드의 환각 폭증
컨텍스트가 부족하면 클로드가 "그럴듯한 추측"을 합니다. 존재하지 않는 함수, 잘못된 라이브러리 버전, 본인 의도와 다른 디자인. 시리즈 №7의 디버깅 사건들 절반이 여기서 시작.
🐛 디버깅 시간 5배
PLAN 없이 만든 코드는 일관성이 없습니다. A 컴포넌트는 useState, B 컴포넌트는 zustand, C 컴포넌트는 context API — 모두 한 프로젝트에. 디버깅할 때 "이 상태가 어디서 관리되지?"부터 추적해야 함.
🎨 결과물 일관성 부재
디자인 톤이 페이지마다 다름. 폰트가 섞임. 색상 팔레트가 일정하지 않음. 본인이 만든 게 아니라 5명의 디자이너가 만든 것처럼 보입니다.
🤯 본인이 뭐 만드는지 잊음
가장 무서운 재앙. 3시간 작업 후 "내가 왜 이걸 만들고 있었지?" 멘티들이 가장 자주 겪는 함정. PLAN이 없으면 클로드가 제시하는 매혹적인 옆길로 새기 쉬워요.
30분 PLAN의 ROI 비교
좋은 PLAN의 5가지 요소.
건축가가 도면에 반드시 표시하는 5가지가 있듯이, 바이브 코딩 PLAN에도 5가지 핵심 요소가 있습니다. W·W·W·H·D로 외우세요.
무엇을 만드는가
한 줄로 끝나야 합니다. 5초 안에 다른 사람에게 설명 가능해야 함.
누가 쓰는가 (페르소나)
막연히 "사람들"이 아니라 구체적인 한 명을 떠올리세요. 그 사람의 직업, 나이, 상황까지.
왜 필요한가 (Problem)
기존 도구로 안 되는 이유. "왜 그냥 네이버 지도를 안 쓰지?"에 답할 수 있어야 함.
어떻게 만드는가 (스택 + 구조)
기술 스택, 핵심 컴포넌트 구조, 데이터 흐름. "이렇게 빨리 결정"이 중요. 너무 디테일은 NO.
완료의 정의 (Definition of Done)
"이러면 끝이다"의 명확한 기준. 가장 자주 빠뜨리는 항목. 이게 없으면 영원히 끝나지 않음.
📌 외우는 법 · "WHAT-WHO-WHY를 먼저 정하고, HOW로 옮긴 다음, DONE으로 끝낸다". 이 순서를 절대 바꾸지 마세요. HOW부터 시작하는 게 가장 흔한 함정 — "Next.js 써야지" 하면서 시작하면 정작 WHY가 흐려집니다.
30분 PLAN 프로세스 — 3단계.
이 장이 글의 메인입니다. 5요소를 어떻게 30분 안에 정리하느냐. 발산 → 정리 → 구조화의 3단계. 각 단계 10분씩.
CLAUDE.md — PLAN의 거처.
PLAN을 정리하는 가장 좋은 장소는 CLAUDE.md 파일입니다. 클로드 코드가 매 세션마다 자동으로 읽어주는 메모리예요.
좋은 CLAUDE.md의 10가지 섹션
그대로 복붙해서 본인 프로젝트에 쓸 수 있는 템플릿입니다.
## 1. 한 줄 정의 (WHAT)
"춘천 노트북 작업 카페 추천 웹앱"
## 2. 타겟 사용자 (WHO)
- 30대 프리랜서 디자이너
- 매일 카페 옮겨가며 일함
- 와이파이/콘센트가 중요
## 3. 해결할 문제 (WHY)
- 기존 지도 앱엔 와이파이/콘센트 정보 없음
- 후기를 일일이 확인해야 함
## 4. 기술 스택 (HOW)
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- 데이터: v1은 JSON, v2부터 Supabase
- 배포: Vercel
## 5. 핵심 기능 (3개만)
1. 카페 목록 표시 (이름, 주소, 와이파이/콘센트 아이콘)
2. 평점 정렬
3. 와이파이/콘센트 필터
## 6. v1 완료 기준 (DONE)
- [ ] 5개 카페 데이터 표시
- [ ] 평점 정렬 동작
- [ ] 와이파이 필터 동작
- [ ] 모바일 뷰 OK
- [ ] Vercel 라이브 URL 발급
## 7. 디자인 톤
- 따뜻한 베이지 + 짙은 갈색 액센트
- 세리프 헤드라인 (카페 분위기)
- Inter, Roboto 폰트 금지
## 8. 코드 컨벤션
- 컴포넌트는 한 파일에 한 개
- 변수/함수: camelCase
- UI 텍스트는 한국어
## 9. 절대 하지 않을 것
- 로그인 기능 (v1에 불필요)
- 결제 기능
- 알림 기능
## 10. 함정 노트 (작업하며 배운 것)
- Supabase fetch 시 useState 초기값은 빈 배열로
- 'use client'는 useEffect 쓰는 컴포넌트마다 명시
💡 가장 중요한 섹션은? · 9번 "절대 하지 않을 것"이 의외로 핵심입니다. 클로드는 친절해서 "이것도 추가하면 좋을까요?"라며 옆길로 새는 제안을 자주 해요. 이 섹션에 박아두면 그런 제안 줄어듭니다. 제약이 명확할수록 결과물이 명확합니다.
CLAUDE.md 작성 단축키
클로드한테 시키면 한 번에 만들 수 있어요:
Plan Mode — 클로드의 사고 모드.
Claude Code에는 Plan Mode라는 특수 모드가 있습니다. 코드를 바로 짜지 않고, "무엇을 할지 계획만 먼저 보여주는" 모드예요. 큰 작업 전에 켜면 유용합니다.
Plan Mode란?
🔨 즉시 실행
요청받으면 바로 파일 만들고 수정. 빠르지만 큰 작업은 위험.
📋 계획 먼저
실행 전에 "이렇게 할게요" 계획만 보여줌. 본인이 OK 하면 그때 실행.
Plan Mode 켜는 법
Shift + Tab # 모드 전환 토글
# 화면 우측 상단에 표시
⏵ plan mode on
한 번 더 Shift+Tab 누르면 일반 모드로 복귀.
언제 Plan Mode를 쓰면 좋은가
- 처음 보는 코드베이스에 큰 변경
- 여러 파일 동시 수정 작업
- 리팩토링
- 아키텍처 결정 (DB 스키마 등)
- 복잡한 버그 디버깅
- 한 줄 수정
- 간단한 텍스트 변경
- 이미 명확한 단순 작업
- 빠른 반복 작업
- 본인이 정확히 아는 것 요청
💡 사용 패턴 · 새 기능 시작할 때 Plan Mode 켜기 → 계획 보고 OK → Plan Mode 끄고 실행. "이렇게 할 거니까 확인해주세요" 하는 인턴 같은 느낌이에요. 큰 사고를 미연에 방지합니다.
기능 단위 PLAN 템플릿 — 5분.
프로젝트 전체 PLAN이 끝났어도, "한 기능을 만들기 전"에도 미니 PLAN이 필요합니다. 5분이면 충분.
다음 6요소만 적으면 됩니다:
📋 기능 PLAN 6요소
실제 예시 — 검색 기능
🔍 카페 추천 앱의 "와이파이 필터" 기능 PLAN
📥 입력: 상단의 "📶 와이파이 있음" 체크박스 클릭
📤 출력: 카드 목록이 와이파이 있는 곳만 표시 (애니메이션 부드럽게)
🎨 UI: 헤더 우측의 토글 버튼. 활성화 시 짙은 갈색
💾 데이터: 기존 카페 JSON의 wifi 필드(boolean) 활용. 추가 데이터 X
✓ 검증: ① 클릭하면 와이파이 없는 카페 사라짐 ② 다시 클릭하면 다 보임 ③ URL에 ?wifi=true 같은 쿼리 파라미터 안 남아도 됨 (v1)
💡 검증 항목이 핵심 · "이러면 끝"의 기준이 명확해야 무한 수정의 늪에서 빠져나옵니다. 검증 항목 3가지가 다 OK면 그 기능은 완료. 다음 기능으로.
초보자 PLAN 함정 5가지.
PLAN을 세우려고 하다가 빠지는 또 다른 함정들. 미리 알고 피하세요.
😵 오버엔지니어링 — PLAN이 너무 디테일
증상: 모든 클래스, 함수, 변수명까지 PLAN에 다 적음. PLAN 짜는 데 3시간.
해법: PLAN은 "의도와 구조"까지만. 함수명은 클로드가 알아서 짭니다. PLAN은 30분 이내가 원칙.
🏃 PLAN 없이 그냥 시작
증상: "일단 시작하고 보지 뭐". 2시간 후 본인이 뭐 만들고 있었는지 잊음.
해법: 30분은 무조건 PLAN. 이 30분이 3시간을 살립니다. 아무리 작은 프로젝트도 5요소(WWWHD)는 적어두세요.
📝 PLAN이 코드의 동의어가 됨
증상: PLAN에 의사 코드(pseudocode)를 잔뜩 적음. "function getCafes() { ... }" 같은.
해법: PLAN은 "무엇을"이고, 코드는 "어떻게"입니다. PLAN에 코드가 들어가면 그건 이미 PLAN이 아니에요.
🔒 PLAN을 안 업데이트
증상: 처음 만든 CLAUDE.md를 한 번도 안 고치고 한 달 사용. 프로젝트가 바뀌어도 그대로.
해법: PLAN은 살아있는 문서. 큰 결정마다 업데이트. 특히 "10. 함정 노트" 섹션은 디버깅하며 배운 걸 매번 추가. 1주에 한 번 점검 시간 갖기.
🤞 "이 정도면 알아서 하겠지" 마법
증상: 큰 그림만 적고 "디테일은 클로드가 알아서". 결과: 본인이 원한 것과 완전히 다른 것이 나옴.
해법: 클로드는 독심술사가 아닙니다. 모호한 부분은 모호한 결과를 낳아요. 특히 디자인 톤, UI 텍스트, 동작 흐름은 명시.
30분 PLAN 시뮬레이션 — 할일 앱.
위 4장의 3단계 프로세스를 실제로 굴려본 시뮬레이션. 토요일 오전, "할일 관리 앱"을 만들기 전 30분 PLAN.
⏱️ 30분 PLAN 완료 효과 · 시리즈 №5의 6단계 워크플로우 Stage 4(구현 사이클)를 시작할 때, 클로드가 본인 의도를 정확히 알고 있어서 첫 번째 시도부터 만족스러운 결과가 나옵니다. "이 PLAN대로 추가/완료 기능부터 만들어줘"만 해도 됨.
"건축가는 도면 없이 집을 짓지 않는다."
바이브 코딩은 매혹적입니다. 30초 만에 컴포넌트가 나오고, 5분 만에 페이지가 만들어져요. 그래서 PLAN의 가치를 잊기 쉽습니다. "지금 시작하면 1시간 안에 뭐라도 나올 텐데"라는 유혹.
그런데 PLAN 없는 그 1시간은 5시간이 됩니다. PLAN 30분이 있는 그 1시간은 진짜 1시간이에요. 30분의 멈춤이 5시간의 질주를 만듭니다. 건축가의 도면처럼, 항해사의 항해도처럼.
🏴☠️ 봄내AI해적단 멘티들에게
이번 주 미션 — 본인이 다음에 만들 프로젝트(또는 현재 진행 중인 것)의 CLAUDE.md를 30분 안에 작성해보세요. 4장의 3단계 그대로.
완성된 CLAUDE.md를 단톡방에 공유해주세요. 같은 톤으로 만들어진 CLAUDE.md들이 모이면, 멘토링이 훨씬 효율적이 됩니다. "본인 프로젝트의 CLAUDE.md를 봐주세요"가 가장 빠른 코드 리뷰 요청.
이 글은 시리즈의 10번째 글입니다. №1~9까지의 모든 기술을 굴리는 데 가장 먼저 필요한 게 PLAN이에요. 시리즈 첫 번째에 와도 됐을 글이지만, 처음부터 강조하면 잔소리로 들렸을 거예요. 도구를 다 익히고 나서 이 글을 만나면, 진짜 가치를 알게 됩니다.
— 바이브 코딩 시리즈 전체 인덱스
→ 다음 회차 예고
MCP (Model Context Protocol) 입문 · Claude Code를 본인의 Notion, Slack, GitHub, Supabase 등과 직접 연결. 시리즈 №10에서 PLAN을 잘 세우게 됐으니, 이제 외부 데이터까지 끌어와 진짜 자동화로 가는 단계.
Issue №10 · Architect's Blueprint · Plan Before Build
이장환 · 봄내AI해적단 선장 · 춘천 · 2026
"건축가는 도면 없이 집을 짓지 않는다."
