바이브코딩 가이드

프롤로그

저는 인문계를 졸업하고 기자로 일을 하다가 뒤늦게 개발자로 커리어를 바꿨습니다. 인생에서 정말 잘한 일이라고 생각합니다. 필요한 게 있으면 직접 만들고, 아이디어가 있으면 세상에 내놓을 수 있게 됐으니까요. 무한한 가능성이 열렸습니다.

그런데 이제는 굳이 개발자가 되지 않아도 그럴 수 있는 세상이 됐습니다. AI 덕분에요. 저도 요즘엔 코드를 직접 쓰지 않습니다. 대신 AI와 대화하면서 소프트웨어를 만듭니다.

바이브코딩으로 모바일 앱을 출시하고, B2B SaaS를 만들면서 배운 것들을 이 가이드에 담았습니다. 무료로 공개합니다. 한국어로 된 양질의 자료는 대부분 유료인데, 영어권에는 좋은 자료가 무료로 넘쳐납니다. 그 격차가 아깝다고 생각했습니다.

이 가이드는 코딩을 배우는 책이 아닙니다. 만들고 싶은 게 있는데 코딩을 모른다는 이유로 포기했거나, 외주를 맡기기엔 너무 초기 단계라 묻어뒀던 것들을 꺼내도록 돕는 책입니다. 끝까지 따라오시면 여러분의 아이디어를 세상에 내놓을 수 있습니다.

업무를 자동화하고 싶은 분도, 다음 유니콘을 꿈꾸는 분도 환영합니다.

그럼, 시작합니다.

P.S. 이 가이드만으로 충분히 시작할 수 있습니다. 더 깊고 체계적으로, 글로 다루기 힘든 부분까지 배우고 싶다면 오프라인 강의에서 직접 도와드립니다.

1장: 코딩의 규칙이 바뀌었다Andrej Karpathy가 '바이브코딩'이라는 말을 꺼낸 순간부터, 전통적 코딩과 무엇이 갈라지는지, 그리고 실제로 어디까지 만들 수 있는지 짚습니다.
2장: 도구와 환경 설정AI 모델과 하네스가 어떻게 다른지 짚고, 클로드코드(Claude Code) 데스크탑 앱을 설치해 첫 세션을 엽니다. 터미널 기본 명령어와 자기소개 페이지 실습까지.
3장: 프롬프트같은 걸 시켜도 프롬프트에 따라 결과가 갈립니다. 나쁜 프롬프트와 좋은 프롬프트를 나란히 놓고 비교하고, 바로 쓸 수 있는 5가지 패턴으로 정리했습니다.
4장: AI와 대화 전략한 번에 다 시킬지 나눠 시킬지, Plan 모드와 권한 모드를 언제 쓸지, AI가 틀렸을 때와 컨텍스트가 찼을 때 무엇을 하는지 다룹니다.
5장: CLAUDE.md클로드코드(Claude Code)는 새 대화마다 아무것도 모릅니다. /init으로 CLAUDE.md를 만들고 기술 스택·명령어·코딩 규칙을 적어두면 매번 설명하지 않아도 됩니다.

6장: 아이디어를 설계로 바꾸는 방법"이런 거 만들고 싶어" 한 문장에서 MVP 범위와 기술 스택까지 좁혀갑니다. 프론트엔드·서버·데이터베이스가 각각 무슨 일을 하는지도 함께 짚습니다.
7장: 프로젝트 초기화와 Git빈 폴더에서 프로젝트를 초기화하고, 린트를 걸고, 첫 페이지를 띄운 뒤 GitHub에 올립니다. .gitignore로 올리면 안 되는 파일도 걸러냅니다.
8장: 핵심 기능 구현Supabase를 붙여 데이터를 저장하고, RLS로 남의 데이터 접근을 막고, 로그인과 CRUD를 만듭니다. 계획 → 구현 → 확인 → 수정 순서로 갑니다.
9장: API 활용하기직접 만들 수 없는 기능은 API로 가져옵니다. 요청과 응답, API 키 관리, 문서 읽는 법, 서버와 클라이언트 중 어디서 불러야 하는지까지.

10장: 에러와 친해지기에러는 정상입니다. AI에게 무엇을 보여줘야 고쳐지는지, 자주 만나는 에러 5가지, AI가 같은 실수를 반복할 때 그 고리를 끊는 방법을 다룹니다.
11장: UI·UX 다듬기기능이 돌아가면 화면 차례입니다. AI에게 디자인을 시키는 법, 모바일 대응, 사용자 흐름 점검, 로딩과 에러 상태 처리를 순서대로 다듬습니다.
12장: 보안 점검바이브코더는 보안 교육 없이 바로 서비스를 만듭니다. API 키 노출 사고, .env 다루는 법, AI가 쓴 코드에서 확인할 항목을 배포 전에 점검합니다.
13장: 배포하기localhost는 내 컴퓨터에서만 열립니다. Vercel로 배포해 누구나 들어올 수 있는 주소를 만들고, 도메인을 연결하고, 이후 수정분을 다시 올립니다.
14장: SEO와 링크 미리보기배포해도 검색에 안 나오는 이유부터 짚습니다. 타이틀과 메타 디스크립션, URL 구조, 오픈그래프 링크 미리보기, robots.txt와 sitemap.xml, 서치 콘솔 등록까지.
15장: 분석과 모니터링사람들이 들어오는지, 어디서 막히는지, 에러가 나는지 모르면 고칠 수 없습니다. Vercel Analytics와 Speed Insights를 붙이고 에러 모니터링을 겁니다.

16장: MCP와 CLIMCP는 AI에게 도구를 연결하는 방법입니다. Supabase와 Playwright를 붙여보고, 컨텍스트를 먹는 함정과 CLI 쪽이 나은 경우를 비교합니다.
17장: 스킬매번 같은 지시를 반복하는 대신 SKILL.md에 적어두면 /code-review처럼 한 번에 실행됩니다. 좋은 스킬의 조건과 팀에서 함께 쓰는 방법을 다룹니다.
18장: 고급 활용서브에이전트로 작업을 나눠 시키고, 훅으로 특정 이벤트에 자동 반응하게 만듭니다. 작업이 끝나면 알림을 띄우는 훅을 직접 만들어봅니다.

에필로그첫 프로젝트를 배포하고 나면 "이게 맞나" 하는 감정이 듭니다. 코딩을 할 줄 아는 것과 만들 줄 아는 것은 다릅니다.
부록 1: 슬래시 커맨드클로드코드(Claude Code) 대화 중 언제든 쓸 수 있는 슬래시 커맨드를 기본 명령어, 대화 관리, 작업 제어, 플러그인으로 나눠 정리했습니다.
부록 2: 용어사전 (개발)Git, 커밋, 브랜치, 배포, 프레임워크, 환경변수. 바이브코딩을 하다 만나는 개발 용어를 비개발자 기준으로 풀어 씁니다.
부록 3: 용어사전 (UI)프론트엔드, 컴포넌트, 레이아웃, 반응형, 브레이크포인트. 화면을 다듬을 때 나오는 UI 용어를 짧게 정리했습니다.

전체를 한 파일로 읽고 싶다면 PDF로 받아볼 수 있습니다.

목차