민지가 웹사이트를 만들어가는 시나리오로 바이브코딩 개념을 설명합니다. 딱딱한 용어 설명보다, 실제 작업 흐름을 먼저 보세요.
프롤로그. 이렇게 요청해서 시작합니다
민지는 AI에게 이렇게 말합니다.
나는 바이브코딩을 처음 배우는 비개발자야.
일상 기록 웹사이트를 처음 만들어가는 시나리오 형식으로
바이브코딩 핵심 개념을 쉽게 설명해줘.이 페이지는 그 요청으로 나온 학습 시나리오라고 보면 됩니다.
Plan — 계획하기
장면 1. 아이디어 잡기
민지:
일상 기록 웹사이트 만들고 싶어.
어떤 방향으로 갈지 나한테 인터뷰 먼저 해줘.AI는 바로 만들지 않고 질문을 던집니다. 민지가 답하면 방향이 조금씩 선명해집니다.
민지:
지금까지 나눈 대화로 회의록 만들어줘.막연하게 시키면 막연한 결과가 나옵니다. AI가 먼저 물어보게 하는 것이 인터뷰 방식입니다. 자세한 요청법은 부록 B. 프롬프트 잘 쓰는 법을 참고하세요.
장면 2. MVP와 PRD 만들기
민지:
일단 간단하게 MVP만 먼저 만들어보고 싶어.
MVP 기준으로 PRD 작성해줘.MVP는 핵심 기능만 담은 첫 번째 버전입니다. PRD는 “무엇을 만들지”를 구체화한 기획서입니다.
민지:
이거 바탕으로 계획서 만들어줘.
바로 작업하지 말고 계획만 먼저 보여줘.AI가 계획을 보여주면 민지는 마음에 안 드는 부분을 고칩니다. 계획을 먼저 보고 고치는 것이 바이브코딩에서 매우 중요합니다.
Do — 실행하기
장면 3. 오픈소스 찾기
달력 기능이 필요한데 처음부터 만들기 어렵습니다.
민지:
이 계획에 맞는 오픈소스 레포 찾아봐줘.AI가 추천한 레포가 실제로 없을 수도 있습니다. 이게 환각입니다. 중요한 건 AI 말을 그대로 믿지 않고 확인하는 것입니다.
민지:
이거 없던데? 인터넷에서 직접 찾아보고 실제로 있는 후보만 알려줘.장면 4. 레포 가져오기
AI가 실제 레포를 찾으면 민지는 내 계정으로 가져옵니다.
이 레포 내 컴퓨터로 가져오고 싶어. 어떻게 해?흐름은 두 단계입니다.
- GitHub에서 Fork — 남의 레포를 내 계정으로 복사
- Clone — 내 컴퓨터로 내려받기
레포 안에는 보통 README.md가 있습니다. README는 레포 설명서이고, 대개 마크다운으로 쓰입니다. 마크다운은 부록 A. 마크다운이란에서 볼 수 있습니다.
장면 5. 커밋하기
작업이 어느 정도 되면 저장 지점을 찍습니다.
지금까지 한 거 "기본 레이아웃 완성"으로 저장해줘.이 저장 지점이 커밋입니다. 나중에 잘못되면 이 지점으로 돌아올 수 있습니다.
Check — 점검하기
장면 6. 로컬에서 확인
로컬 서버 띄워서 확인할 수 있게 해줘.브라우저에서 http://localhost:4321 같은 주소를 열어 결과를 확인합니다. 이때 계획서와 비교해서 빠진 기능이 있는지 봅니다.
계획서 2번 항목이 아직 안 된 것 같아. 맞아?AI에게 “맞아?”라고 물어보는 것도 검수입니다. 단, 최종 판단은 화면을 직접 보고 해야 합니다.
장면 7. 오류와 스크린샷
버튼 색을 바꿨더니 화면이 하얗게 될 수 있습니다. 이때는 오류 메시지와 스크린샷을 같이 줍니다.
화면이 하얗게 됐어.
오류 메시지와 스크린샷을 보고 원인을 찾아줘.
바로 고치기 전에 어떤 파일을 볼 건지 먼저 말해줘.막힐 때는 낙법 5종을 먼저 꺼내 쓰면 됩니다.
장면 8. 안 되면 되돌리기
그냥 아까 커밋한 데로 되돌려줘.
어디서 어디로 돌아가는지 먼저 보여줘.Git은 저장하고 되돌리는 도구입니다. 그래서 겁내지 않고 실험할 수 있습니다. 자세한 설명은 부록 I. Git으로 버전 관리하는 법을 참고하세요.
Act — 마무리하기
장면 9. 배포하기
점검이 끝나면 인터넷에 올립니다.
이제 GitHub에 Push하고 Vercel 배포 상태를 확인해줘.흐름은 이렇습니다.
- 로컬 작업
- 커밋 — 저장 포인트
- Push — 내 컴퓨터에서 GitHub로 올림
- Build — Vercel이 웹사이트 파일로 변환
- Deploy — 인터넷 주소로 공개
장면 10. 작업 마무리 루틴
지금까지 대화한 거 바탕으로 dev log 작성해줘.
결정된 것, 막혔던 것, 다음 할 일을 중심으로 정리해줘.반복되는 작업은 CLAUDE.md나 스킬로 남깁니다. CLAUDE.md는 “AI에게 나는 이렇게 일해달라”고 적어두는 파일입니다.
이번 작업하면서 반복되거나 귀찮았던 게 있으면
CLAUDE.md나 스킬로 만들 수 있는 것 위주로 제안해줘.CLAUDE.md는 부록 C, 스킬은 부록 D에서 볼 수 있습니다.
장면 11. 사례글 쓰기
지금까지 작업한 과정과 배운 것을 사례글로 써줘.
쓰기 전에 나한테 인터뷰 먼저 해줘.사례글은 그냥 후기문이 아닙니다. 내가 어떤 문제를 어떻게 해결했는지 남기는 작업 기록입니다. 이 기록이 다음 작업의 맥락이 됩니다.
이 시나리오에서 나온 개념
| 장면 | 개념 |
|---|---|
| Plan 1 | 인터뷰 방식, 회의록, 프롬프트 |
| Plan 2 | MVP, PRD, 계획 먼저 보기 |
| Do 3 | 환각, 오픈소스, 레포 |
| Do 4 | Fork, Clone, README.md, 마크다운 |
| Do 5 | 커밋, Git |
| Check 6 | 로컬 서버, 계획 대비 점검 |
| Check 7 | 오류 메시지, 스크린샷, 낙법 |
| Check 8 | git log, 롤백, 브랜치 |
| Act 9 | Push, Build, Deploy |
| Act 10 | dev log, CLAUDE.md, 스킬 |
| Act 11 | PDCA, 사례글 |
이 형식으로 다른 개념 페이지 만들기
AI에게 이렇게 요청할 수 있습니다.
이 페이지의 형식과 완성도를 예시로 삼아줘.
나는 [새 주제]를 잘 몰라.
초보자가 실제로 무언가를 만들어가는 시나리오 대화 형식으로
핵심 개념을 배울 수 있는 페이지를 만들어줘.
조건:
- 한 장면은 하나의 행동만 다룰 것
- 한 장면에 새 개념은 최대 2개
- 중간에 막히거나 실수하는 장면을 넣을 것
- 마지막에 장면별 개념 요약표를 넣을 것