1편에서 도구를 골랐다면, 오늘은 실제로 대화창만으로 작은 앱을 만들고 배포까지 가 봅니다.
핵심 한 줄: 바이브 코딩은 “코드를 안 보고 목표만 말하는” 실험용 루프입니다. 빠르지만, 프로덕션·비밀·보안이 걸린 순간에는 코드를 다시 봐야 합니다.
이 글은 PapaCoder Labs 시리즈 「코딩은 대화다」 의 2편입니다. 1편(첫 선택은 모델이 아니다)에서 고른 Cursor·Claude Code·Codex·Copilot 중, 여기서는 Cursor Agent를 기준으로 실습합니다. 다른 도구도 같은 루프(말하기 → 실행 → 에러 붙여넣기)로 따라 할 수 있습니다.
바이브 코딩이란?
2025년 2월 Andrej Karpathy가 말한 “vibe coding”은 대략 이런 태도입니다. LLM(예: Cursor Composer)에 완전히 맡기고, 코드가 존재한다는 사실조차 잊은 채 Accept All 하고, 에러가 나면 설명 없이 붙여 넣고, “보고·말하고·돌리고·붙여넣기”로 웹앱을 만든다 — 주말용 throwaway에는 괜찮다는 취지였습니다. (Martin Fowler의 정리·인용)
Martin Fowler는 정의를 더 날카롭게 잡습니다.
바이브 코딩 = LLM에게 무엇을 만들지 말하고 → 써 보고 → 다시 말하되, 생성된 코드를 보지 않는 방식.
유지보수·정확성·보안 문제가 자주 생기므로 일회용·좁은 청중에 맞다.
그리고 중요한 구분입니다. LLM이 코드를 쓰더라도 사람이 diff와 구조를 리뷰하면, Fowler는 그걸 바이브가 아니라 Agentic Programming에 가깝다고 봅니다. 업계에서는 두 말을 섞어 쓰지만, 이 시리즈에서는 이렇게 나눕니다.
| 바이브 코딩 | 에이전틱(리뷰하는) 개발 | |
|---|---|---|
| 코드 | 거의 안 봄 / Accept All | 읽고, 구조·보안 확인 |
| 목적 | 프로토타입, 개인 도구 | 팀이 유지할 제품 |
| 다음 단계 | 이 글 | 3편 에이전트 엔지니어링 |
1편에서 말한 에이전트 모드(에디터보다 대화창이 중심)는 바이브의 인터페이스입니다. 바이브는 그 인터페이스 위에서 코드를 잊는 정도를 고르는 선택입니다.
루프: 보고 → 말하고 → 돌리고 → 붙여넣기
Rendering diagram…
처음에는 이 루프만으로도 “내가 AI로 개발한다”는 감각이 옵니다. 막히는 지점은 대개 프롬프트가 모호하거나, 검증(실행)을 안 하는 경우입니다.
실습 준비 (Cursor 기준)
- Cursor에서 빈 폴더를 열고 Agent 채팅을 켭니다.
- 프로젝트 루트에
AGENTS.md를 둡니다. Cursor는 plain markdownAGENTS.md를 에이전트 지침으로 읽습니다 (Rules 문서). - Node.js 18+ 와 계정(Vercel)을 준비합니다.
복사해서 쓰기 — AGENTS.md 스타터
# Today Focus Board
## Goal
Single-page web app. One input, a list of focus items for today, localStorage only. No auth. No backend.
## Stack
- Next.js App Router + TypeScript
- Minimal CSS (no design system rabbit hole)
## Non-negotiables
- Do not add a database, auth, or paid APIs
- Keep the UI readable on mobile
- After each change, tell me the exact command to run locally
- Prefer small diffs; do not rewrite the whole app unless asked
## Definition of done
- `pnpm dev` (or npm) shows a working page
- Refresh keeps items (localStorage)
- README with run + deploy steps
더 세밀한 규칙은 .cursor/rules/*.mdc로 나눌 수 있습니다. 입문 실습은 AGENTS.md 하나로 충분합니다.
워크드 예제: Today Focus Board
목표 앱은 단순합니다. 오늘 할 일 한 줄 입력 → 목록 → 완료 체크 → 새로고침해도 유지(localStorage). 백엔드 없음.
아래 프롬프트를 순서대로 Agent에 붙여 넣으세요. (한 번에 전부 말고, 각 단계 후 dev 서버로 확인.)
프롬프트 1 — 스캐폴드
이 폴더에 Next.js(App Router) + TypeScript로 "Today Focus Board"를 만들어줘.
요구사항:
- 페이지 하나: 제목, 입력창, 추가 버튼, 목록
- 항목은 localStorage에 저장 (키: focus-today)
- 완료 토글 가능
- 외부 UI 라이브러리 금지
- README에 실행 방법 적어줘
끝나면 로컬 실행 커맨드를 알려줘.
프롬프트 2 — 동작 확인 후 다듬기
방금 앱을 켜 봤어. 모바일에서 입력창이 너무 작아.
터치하기 쉽게 패딩을 키우고, 빈 목록일 때 "오늘 집중할 일 한 줄을 적어보세요" 플레이스홀더/빈 상태를 넣어줘.
코드 전체를 다시 쓰지 말고 필요한 파일만 수정해.
프롬프트 3 — 에러 루프 (막히면)
터미널/브라우저 에러를 그대로 붙입니다.
이 에러가 났어. 설명 말고 먼저 고쳐줘.
<여기에 에러 로그 전체를 붙여넣기>
처음에는 “왜 실패했는지”를 길게 쓰게 시키기보다, 고치고 → 다시 실행이 바이브의 리듬입니다. (나중에 리뷰 단계로 넘어가면 이유를 묻습니다.)
프롬프트 4 — 검증 체크리스트
이 체크리스트를 직접 확인하고, 실패 항목만 수정해.
1) 항목 추가 후 새로고침해도 남는가
2) 완료 토글이 저장되는가
3) 빈 문자열은 추가되지 않는가
4) README의 실행 커맨드가 실제와 일치하는가
결과를 체크리스트 형식으로 보고해.
프롬프트 5 — 배포 준비
Vercel에 배포할 수 있게 정리해줘.
- 빌드 커맨드/출력은 Next 기본 가정
- 환경변수는 필요 없다고 README에 명시
- `vercel` / `vercel --prod`로 배포하는 짧은 절을 README에 추가
비밀키나 .env 예시는 만들지 마.
처음 Agent에게 “예쁜 랜딩 + 인증 + DB”를 한 프롬프트에 몰아넣으면, 바이브가 아니라 미완 스펙 폭발이 됩니다. 한 화면·한 저장소(localStorage)로 범위를 고정하는 게 입문 성공률을 가릅니다.
한 번은 Accept All을 연타하다가 localStorage 키를 에이전트가 맘대로 바꿔 두어, “저장된다”고 보고했는데 새로고침하니 목록이 전부 사라졌습니다. 그다음부터는 프롬프트 4 체크리스트를 실행 결과로 받기 전에 넘어가지 않습니다.
로컬 실행 → Vercel 배포
Vercel 공식 Getting Started(문서 갱신 2026-06-16 기준)는 대략 다음 순서입니다 (Getting started with Vercel):
# 프로젝트에서 (패키지 매니저는 취향대로)
npm i vercel
# 또는 pnpm / yarn / bun
vercel login
vercel # Preview 배포
vercel --prod # Production
GitHub를 연결해 대시보드에서 Deploy해도 됩니다. Cursor/Claude Code를 쓴다면 Vercel Plugin(npx plugins add vercel/vercel-plugin)으로 에이전트에 배포 스킬을 넣을 수 있다고 문서에 안내되어 있습니다.
배포 URL이 열리면, 그제야 “내가 대화로 만든 게 인터넷에 있다”는 감각이 완성됩니다. 그게 이 편의 목표입니다.
언제 바이브를 멈춰야 하나
Fowler가 강조하는 리스크를 실무 언어로 옮기면 이렇습니다.
| 신호 | 할 일 |
|---|---|
| API 키·토큰·개인정보가 생김 | 코드/설정을 반드시 눈으로 확인. 바이브 종료 |
| “일단 되게” 고침이 세 번 이상 같은 버그를 만듦 | diff를 읽고, 재현 테스트를 요구 |
| 다른 사람이 쓸 제품이 됨 | 리뷰·테스트·권한 모델 — 3편 이후 영역 |
| 의존성·라이선스를 모름 | package.json을 읽고 범위를 좁히기 |
바이브는 바닥(floor) 입니다. 제품을 키울수록 에이전트 엔지니어링(역할·검증·하네스) 이 천장(ceiling)이 됩니다. 그게 시리즈 3편 이후입니다.
Cursor에서 오늘 당장
- 빈 레포 +
AGENTS.md - Agent에 프롬프트 1→5
vercel로 URL 받기- 스크린샷을 남겨 두고, 다음 실험에서만 코드를 열어보기
PapaCoder Labs처럼 규칙·스펙이 많은 레포는 이미 “바이브만”으로 굴러가지 않습니다. 그래도 작은 일회용 도구를 바이브로 먼저 감을 익히는 건, 에이전트 모드 근육을 키우는 가장 빠른 방법입니다.
다음 편 — 「코딩은 대화다」
- 첫 선택은 모델이 아니다 (도구·요금)
- 지금 글 — 바이브 코딩 → 배포
- 에이전트 엔지니어링 (멀티에이전트)
- 하네스 엔지니어링
- 루프 엔지니어링
- 그래프 엔지니어링
- PapaCoder 실전 사례
FAQ
Q. 바이브 코딩이 곧 Cursor Agent인가요?
A. 아니요. Agent는 대화로 개발하는 UI이고, 바이브는 그 안에서 코드를 얼마나 잊을지에 대한 태도입니다.
Q. Accept All을 항상 해야 하나요?
A. 학습용 throwaway에서는 Karpathy식 실험이 가능합니다. 비밀·권한이 있는 순간부터는 Accept 전에 파일을 여세요.
Q. Claude Code / Codex로도 되나요?
A. 됩니다. 같은 프롬프트 순서와 AGENTS.md(또는 해당 도구의 규칙 파일)를 쓰면 됩니다. 배포는 여전히 Vercel CLI/Git이 흔합니다.
Q. 왜 Next.js인가요?
A. Vercel 배포 경로가 짧아서입니다. 원하면 Vite+React로 같은 연습을 하세요. 범위만 지키면 됩니다.
참고 출처
- Martin Fowler — Vibe Coding (Karpathy 원문 인용 포함)
- Cursor Docs — Rules / AGENTS.md
- Vercel — Getting started
- Sarkar & Drosos — Vibe coding (PPIG 2025)
마무리
바이브 코딩의 가치는 “코드를 영원히 안 보는 것”이 아니라, 목표를 말로 쪼개고 실행으로 검증하는 리듬을 몸에 붙이는 데 있습니다. 오늘 Focus Board URL 하나면 충분합니다.
앞으로는 “Accept All”보다 언제 코드를 다시 펼칠지가 실력을 가릅니다. 3편에서는 그 경계를 에이전트 역할과 핸드오프로 설계하는 법을 다룹니다.