태리의 바이브코딩 로드맵 (Terry's Vibe Coding Roadmap)

기획 (Planning)

AI 에이전트를 통제할 단일 진실 공급원(SSoT)과 명세(Spec) 구축

▼

핵심 원칙: "코드를 짜기 전 AI의 행동 반경을 명세서(Spec)와 데이터 스키마로 완전히 가둔다."

Step 1.1

콘셉트 (Concept)

• 해결하려는 핵심 문제, 경영·사업적 타깃 및 핵심 사용자 여정 정의
• 만들 기능(Goals)과 **절대 만들지 말아야 할 것(Non-goals)**을 사전 명시하여 오버스펙 방지

💡 산출물: 1페이지 PRD (제품 요구사항 정의서)

Step 1.2

이미지 (Design & UI)

• 화면 와이어프레임 및 주요 사용자 흐름(Flow) 설계
• v0, 21st.dev 등을 활용해 버튼, 모달, 인풋 등 공통 디자인 시스템 컴포넌트 선제 확보

💡 디자인 시스템을 먼저 고정해야 AI의 무분별한 UI 생성을 막음

Step 1.3

테크닉 (Tech Stack & AI Constitution)

• **기술 스택:** AI 학습 밀도가 높은 Next.js + Tailwind CSS + Supabase/PostgreSQL 조합 채택
• **시스템 헌법(`CLAUDE.md`, `.cursorrules`):** 코딩 표준, 아키텍처 규칙, 금지된 코딩 패턴 선언

⚠️ AI가 매 세션 시작 시 가장 먼저 읽는 절대 헌법으로 작동

Step 1.4

스펙 작성 (Contract & Spec)

• 데이터베이스 스키마(DDL) 및 API 입출력 규격(OpenAPI/JSON Schema) 선행 확정
• 기능별 비즈니스 로직과 예외 처리 기준을 담은 `spec.md` 작성

💡 계약 우선(Contract-First)으로 프론트/백엔드 인터페이스 불일치 차단

Step 1.5

개발 순서 정하기 (Task Breakdown)

• 시방서를 3~5단계의 마이크로 태스크 단위로 잘게 분해 (`tasks.md`)
• 모듈 간 의존 관계(선행-후행 작업) 및 원자적 커밋 순서 결정

💡 하나의 프롬프트에 한 번에 하나의 마이크로 태스크만 전달

개발 (Development Loop)

단일 지시 → IDE 생성 → 자동 검증 → 세션 초기화의 무한 멸균 루프

▼

실행 루프: 지시서(프라이밍) ➔ IDE 생성(TDD) ➔ 기계적 검증(Type/Lint/Test) ➔ 원자적 Git 커밋 & 세션 초기화(/clear) ➔ 다음 지시서

Loop 2.1

개발 지시서 (Context Priming)

• 전체 코드가 아닌 해당 태스크와 직접 연관된 파일과 스키마만 선별하여 AI에 주입
• 구체적인 제약 조건, 입출력 포맷, 실패 시 반환할 에러 코드 명시

💡 컨텍스트 프라이밍 시 코드 중복 40~60% 감소

Loop 2.2

IDE 코드 생성 (Cursor / Windsurf)

• Cursor, Windsurf 등의 도구로 해당 단위 기능 구현
• **TDD 적용:** 구현 코드 작성 전 실패하는 테스트 코드를 먼저 작성하도록 지시

💡 '해피 패스(정상 케이스만 대충 짜는 현상)' 방지의 핵심

Loop 2.3

다차원 검증 (Verification Gate)

• 눈으로만 확인하지 않고 `Typecheck`, `Lint`, `단위 테스트`를 터미널에서 자동 실행
• Claude Code 등 상위 추론 모델을 활용해 아키텍처 결함 및 레이스 컨디션 교차 검토

⚠️ 에러가 발생하면 설득하지 말고 에러 로그 원문을 주입하거나 롤백

Loop 2.4

체크포인트 & 세션 초기화 (★ 필수)

• 검증 통과 즉시 명확한 메시지로 원자적 `Git Commit` 수행
• 대화창에 코드가 쌓이지 않도록 `/clear`로 세션을 리셋하여 컨텍스트 오염 차단

💡 둠 루프(Doom Loop) 탈출: 꼬이면 즉시 이전 커밋으로 롤백

Loop 2.5

다음 개발 지시서로 순환

• 초기화된 새 창에서 `tasks.md`의 다음 순서 작업을 프라이밍하여 2.1부터 다시 반복
• 이전 대화 기록이 없어도 `CLAUDE.md`와 커밋된 코드가 일관성을 유지함

💡 독립적이고 안전한 모듈 단위 빌드 지속

배포 및 피드백 (Deployment & Ops)

기술적 릴리스 안전망 가동 및 고객·런타임 데이터의 시방서 환류

▼

피드백 순환: 런타임 에러 & 고객 행동 분석 ➔ 코드가 아닌 '시방서(Spec)' 수정 ➔ 다음 스프린트 개발 루프 진입

Step 3.1

기술적 릴리스 & 롤백 안전망

• CI/CD 파이프라인 연동 (빌드 및 보안 검사 통과 시 자동 배포)
• DB 스키마 마이그레이션 다운타임 방지 및 즉각 롤백 가능한 마이그레이션 스크립트 확보

💡 Vercel, Supabase 등을 통한 무중단 프로덕션 배포

Step 3.2

영업 콘셉트 & 홍보 (GTM)

• 타깃 고객군 맞춤형 랜딩 페이지 릴리스 및 메시징 최적화
• 초기 고객 획득 채널 가동 및 가치 제안 검증

💡 1단계 콘셉트(문제-해결)와 정합된 마케팅 메시지 전파

Step 3.3

관측성 & 고객 유입 관리

• **에러 추적:** Sentry를 통해 실제 사용 환경의 런타임 에러 스택 트레이스 실시간 수집
• **행동 분석:** PostHog 등을 연동해 고객 유입 경로, 클릭 패턴, 이탈 지점 정량 측정

💡 문제를 감각이 아닌 데이터와 에러 로그로 포착

Step 3.4

시방서(Spec) 환류 (차기 사이클)

• 버그나 기능 추가 요구 시 IDE에서 코드를 즉흥적으로 덧대지 않음
• 1단계의 `spec.md`를 먼저 수정한 후, 2단계 개발 루프로 코드를 재생성(Regeneration)

⚠️ "코드를 직접 고치지 말고, 명세를 고쳐서 다시 생성하라"