이 장에서는 1·2장에서 익힌 개념과 환경을 바탕으로, 실제 프로젝트에서 아이디어 → 프로토타입 → 검증까지 이어지는 바이브 코딩 워크플로우를 단계별로 실습해 봅니다. 15분 만에
MVP
를 완성하고, 테스트·리팩터링·배포까지 자동 루프를 구성하는 과정을 따라 해 보세요.
3.1 아이디어를 자연어 프롬프트로 전환
먼저 구현하려는 기능을 역할(Role)‧목표(Goal)‧세부 요구사항(Requirements) 3단계로 정리합니다. 아래 예시는 메모 공유 웹앱을 15분 안에 만드는 프롬프트 템플릿입니다.
# 역할: 시니어 풀스택 개발자
# 목표: Next.js + Prisma 기반 메모 공유 웹앱(Markdown 지원) 15분 내 구현
# 요구사항:
# 1. 소셜 로그인(Google, GitHub)
# 2. 메모 CRUD 및 공개/비공개 토글
# 3. Tailwind + shadcn/ui 컴포넌트로 UI
# 4. 유닛 테스트(vitest) 3개 이상 포함
프롬프트는 짧고 명확할수록 좋으며, UI 라이브러리·인증 방식·테스트 기준처럼 선택지가 많은 항목을 구체적으로 지정하면 AI가 우왕좌왕하지 않습니다.
3.2 Accept‑All 전략과 빠른 프로토타이핑
바이브 코딩에서는 첫 응답을 80 % 이상 즉시 수용(
Accept All
)해 실행 가능 아티팩트를 확보하는 것이 핵심입니다. IDE가 제안한 변경 사항을 검토한 뒤, 크리티컬 오류만 체크하고 바로 러너나 브라우저에서 실행해 보세요.
- 시간 예산 – 초안 생성·실행까지 5분, UI 다듬기 5분, 테스트 작성·리팩터링 5분으로 시간 박스를 설정합니다.
- 실행 우선 – 빌드가 통과하면 즉시 결과를 확인하고, 직관적으로 개선할 부분만 다시 프롬프트합니다.
- 버전 스냅샷 –
git switch -c feat/ai‑prototype‑2
로 단계마다 브랜치를 나눠 추적합니다.
3.3 테스트 & 리팩터링 루프
AI가 생성한 코드는 예상치 못한 부작용이 있을 수 있으므로 테스트 주도(TDD)와 리팩터링을 짧은 주기로 반복해야 합니다.
단계 | 작업 | 프롬프트 예시 |
유닛 테스트 작성 | API·유틸 함수 수준 검증 | "Vitest 기반 유닛 테스트 3개 생성하고 실패하게 유지" |
리팩터링 | 중복 제거, 네이밍 개선 | "SRP 위반 함수 분리, 파일별 최대 200라인 유지" |
E2E 테스트 | 사용자 플로우 검증 | "Playwright 스크립트로 로그인→메모 작성→공유 플로우 작성" |
자동 반복 프롬프트
"모든 vitest 케이스가 통과하도록 수정하고, Playwright E2E도 성공해야 합니다. 코드 품질 경고(Sonarlint) 0건을 목표로 리팩터링하세요."
3.4 오류 디버깅 & 빠른 피드백
예상치 못한 에러가 발생하면 에러 메시지·스택트레이스를 그대로 LLM에게 전달합니다.
"다음 NextAuth 오류를 해결해줘. 오류와 코드 전문은 다음과 같아:\n{error_log}"
- 가능하면 전체 파일을 붙여넣어 컨텍스트 부족 문제를 최소화합니다.
- 무한 루프에 빠지면 에러 위치 + 핵심 함수만 추려서 재요청합니다.
- VS Code
Inline Chat
모드에서는 에러 라인에 바로 프롬프트를 입력해 수정 패치를 받을 수 있습니다.
3.5 실습: 15분 메모 공유 웹앱 챌린지
- 타이머 시작 – 15분 카운트다운을 설정합니다.
- 프롬프트 입력 – 3.1 템플릿을 IDE에 입력 후 Enter.
- 첫 제안 Accept‑All – 생성된 코드 전부 적용 후
npm i && npm run dev
. - UI 미세 조정 – 색상·아이콘·레이아웃을 5분 내 조정.
- 테스트 작성 및 통과 – vitest / playwright 스크립트 실행.
- GitHub Pages 배포 –
vercel --prod
또는gh-pages
액션.
제한된 시간 안에 동작하는 링크를 공유하는 것이 목표입니다. 버그·누락 기능은 4장에서 리팩터링 과제로 활용할 예정입니다.
3.6 정리 & 다음 단계
바이브 코딩 워크플로우는 프롬프트 → Accept‑All → 실행 → 테스트·리팩터링을 초단위로 반복해 아이디어를 빠르게 검증합니다. 완성도보다 학습 속도가 중요한 초기 단계에서 특히 강력하게 빛나지만, 뒤따를 보안·품질 보강 절차도 필수입니다. 4장에서는 프로젝트 유형별로 이 워크플로우를 어떻게 확장·응용할 수 있는지 살펴봅니다.
'08.개발&프로그래밍 > 2.바이브코딩' 카테고리의 다른 글
6장, 실전 데모 & 코드 리뷰 (0) | 2025.07.25 |
---|---|
5장, 보안·품질·윤리 체크리스트 (0) | 2025.07.25 |
4장. 프로젝트 유형별 적용 전략 (0) | 2025.07.19 |
2장. 필수 도구 & 환경 세팅 (0) | 2025.07.19 |
1장. 바이브 코딩 개념 이해 (0) | 2025.07.19 |