바이브 코딩 완결판 지도 🗺️

AI에게 무작정 코드를 찍어내라고 하기 전에 꼭 알아야 할 기초 공사와 5단계 핵심 원리.
비유를 통해 뼈대를 잡고, (괄호) 안의 기술 용어로 전문가처럼 프롬프트를 지휘하세요.

👀 한눈에 보는 웹 제작 로드맵

0단계. 주방 차리기 & 기초 공사 (IDE · Node.js · npm)

AI 셰프와 함께 요리할 '주방(IDE)'을 차리고, 최신 웹 앱(React 등)을 돌릴 '전기 공사(Node.js)'와 '식자재 트럭(npm)'을 들이는 준비 단계

1. 화면 만들기

뼈대와 디자인 (HTML/CSS/JS)

2. 역할 나누기

홀과 주방의 분리 (Front/Back)

3. 데이터 보관

주머니와 금고 (Storage/DB)

4. 코드 백업

안전한 세이브 (Git/GitHub)

5. 세상에 공개

클라우드 배포 (Local/Deploy)

0. 기초 공사 (전기와 식자재 배달)

요즘 웹 개발은 단순한 문서 작성이 아닙니다. 로컬(내 PC)에 공장을 세워야 합니다.

Node.js (마법의 작업장 / 전기)

원래 브라우저(손님 테이블)에서만 놀던 자바스크립트를 내 컴퓨터 전체에서 쓸 수 있게 해줍니다. React, Vite 같은 최신 프레임워크를 돌리려면 이 기초 전기 공사가 반드시 선행되어야 합니다.

자세히 보기

npm (식자재 도매상 트럭)

Node.js를 깔면 딸려옵니다. 전 세계 개발자들이 만들어둔 수백만 개의 코드 부품(달력, 버튼 등)을 내 프로젝트로 즉시 배달해 주는 패키지 매니저입니다.

자세히 보기
"내 로컬 컴퓨터에 기초 공사인 (Node.js)가 설치되어 있어. 여기서 (npm) 명령어를 사용해서 (Vite 기반의 React 프로젝트)를 새로 생성하고 실행하는 터미널 명령어를 순서대로 알려줘."

0.5. 나의 주방 차리기 (AI 에디터)

전기(Node)를 깔았다면, 이제 셰프와 내가 함께 요리할 '주방(작업 공간)'이 필요합니다. 바로 IDE(코드 에디터)입니다.

기본 주방 설비 (VS Code)

전 세계 개발자가 표준으로 쓰는 무료 주방입니다. 코드 편집·터미널·확장(Extension)이 한곳에 모여 있어, 모든 AI 주방의 뼈대가 됩니다.

자세히 보기

AI 셰프 상주 주방 (래퍼)

VS Code 주방 위에 'AI 셰프'를 상주시킨 도구들입니다. (Cursor)는 에디터 자체에, (Claude Code · Codex)는 터미널에서 AI가 직접 코드를 읽고 고칩니다.

자세히 보기

주방의 주문 창구: 터미널 (Terminal) 자세히

앞서 배운 (npm) 명령은 모두 이 내장 터미널에 입력합니다. 주방의 주문 단말기처럼, 내 컴퓨터에 직접 명령을 내리는 창구죠. (Prettier 같은 포매터) 확장을 더하면 코드도 깔끔하게 자동 플레이팅됩니다.

"AI 셰프가 상주하는 (Cursor / Claude Code) 주방에서, (내장 터미널)을 열어 아까 만든 (Vite 프로젝트)를 실행하고, (Prettier 포매터)로 코드가 저장될 때마다 자동 정리되게 세팅하는 법을 알려줘."

1. 화면 만들기 (건축)

HTML (뼈대)
자세히
CSS (꾸미기)
자세히
JS (동작)
자세히

현대 웹의 마법: 상태 (State) 자세히

과거엔 메뉴 하나가 바뀌면 식당 전체를 새로고침해야 했습니다. 지금은 상태(State)라는 스마트 메모장을 써서 데이터가 바뀌면 화면 깜빡임 없이 즉시 그 부분만 바뀝니다.

"화면을 꾸밀 때 (Tailwind CSS)를 사용하고, 버튼을 클릭하면 새로고침 없이 숫자가 즉시 바뀌도록 (React State 상태관리)를 적용해줘."

2. 역할 분리와 소통 (메뉴판)

프론트 (홀)
자세히
API (메뉴판 양식)
백엔드 (주방)
자세히

프론트엔드가 백엔드에 마음대로 요구할 수 없습니다. 주방장이 정해둔 메뉴판 양식(API)에 맞춰 정확하게 요청해야 합니다.

잠깐, 백엔드가 항상 필요한 건 아니에요!

간단한 음료는 홀에서 바로 내드릴 수 있듯, 많은 서비스는 프론트(홀)만으로도 충분히 만들 수 있어요. '불을 써야 하는 요리'가 생길 때 비로소 주방(백엔드)이 필요해집니다.

프론트만으로 충분해요 (홀에서 해결)

  • 소개·포트폴리오·랜딩 페이지
  • 계산기·단위 변환기 같은 도구
  • 내 기기에만 저장하는 메모·투두 (로컬 스토리지)
  • 공개 API를 직접 부르는 화면 (예: 날씨 조회)
  • 글이 고정된 정적 블로그

이럴 땐 백엔드가 필요해요 (주방이 필요)

  • 회원가입·로그인 (비밀번호 안전 보관·인증)
  • 여러 사용자가 데이터를 공유·동기화 (게시판·댓글·채팅)
  • 결제·주문 처리
  • 숨겨야 하는 비밀 키(API Key)가 필요한 작업
  • 데이터베이스에 영구 저장·검색, 이메일 발송 등

💡 그래서 처음엔 프론트부터 빠르게 만들어 보고, 위 오른쪽 같은 기능이 필요해지는 순간 백엔드를 붙이는 순서를 추천해요.

"손님이 보는 (프론트 UI)와 데이터를 검증하는 (백엔드 로직)을 분리하고, 이 둘이 데이터를 주고받을 수 있게 (RESTful API 엔드포인트)를 만들어줘."

3. 데이터 보관 (주머니 vs 금고)

손님 주머니 (Local Storage)

내 폰에만 저장됩니다. 인터넷 없이도 작동하지만, 브라우저 기록을 지우거나 다른 기기로 접속하면 데이터가 영원히 날아갑니다.

자세히 보기

중앙 금고 (Database)

서버 깊숙한 곳에 보관됩니다. 데이터가 안전하게 보존되며, 로그인 시 어디서나 똑같은 데이터를 불러옵니다.

자세히 보기
"데이터가 유지되게 일단 브라우저 (로컬 스토리지)에 임시 저장되도록 짜줘. 나중에 실제 클라우드 금고 (Cloudflare D1 SQL 데이터베이스)로 교체할 수 있게 해둬."

4. 코드 저장과 백업 (타임머신)

Git (개인 타임머신)

AI가 코드를 망쳐도 어제로 되돌려주는 세이브 포인트(버전 관리)입니다.

자세히 보기

GitHub (클라우드 백업)

Git 기록을 인터넷에 백업하여 전 세계에 앱을 자동 배포(CI/CD)할 수 있게 해줍니다.

자세히 보기
"지금 작동이 잘 돼. 코드가 망가지기 전에 (Git Commit)으로 세이브 포인트를 만들고, (GitHub Repository)에 푸시(Push)하는 방법을 알려줘."

5. 세상에 공개 (정식 오픈)

로컬 (Local) 환경

내 컴퓨터(Localhost)에서만 접속하며 에러를 테스트하는 개발 환경입니다.

자세히 보기

배포 (Deploy) 환경

클라우드 서버에 코드를 올려 누구나 접속할 수 있는 실제 도메인 주소를 부여받습니다.

자세히 보기
"로컬 테스트를 마쳤어. 아까 올려둔 (GitHub)의 코드를 (Cloudflare Pages) 클라우드에 자동 배포(Deploy)하는 가이드를 줘."

✨ AI 셰프와 협업하는 법 (AI 하네스)

AI는 마법 지팡이가 아니라 '새로 온 셰프(요리사)'입니다. 이 셰프가 진짜로 요리하게 해주는 「레시피북 + 조리도구 + 주방 출입증」 묶음이 바로 'AI 하네스'예요.

챗봇처럼 '말로만' 주문받는 것과, 내 주방에서 '직접 칼을 잡고 요리하는' 것의 결정적 차이가 바로 이 하네스에 있습니다.

하우스 레시피 (Rules)

우리 가게의 맛·플레이팅 규칙을 적어두면 매번 설명할 필요가 없습니다. 예: Claude Code의 (CLAUDE.md), Cursor의 (.cursorrules). 셰프에게 건네는 '하우스 레시피'죠.

자세히 보기

조리 도구 (Tools)

AI가 직접 재료를 손질(파일 편집)하고, 식재료를 찾고(검색), (터미널 명령)이라는 불까지 다루는 능력. 단순 챗봇과의 결정적 차이를 만드는 '진짜 칼과 불'입니다.

자세히 보기

식자재 거래처 연결 (MCP)

GitHub·데이터베이스·디자인 도구 등 외부 시스템에 AI를 잇는 표준 납품 라인입니다. (MCP, Model Context Protocol) 덕분에 주방 밖 거래처와도 연결됩니다.

자세히 보기

서빙 전 검수 (Permissions)

재료 폐기·메뉴 출시(배포)처럼 돌이키기 어려운 작업 전에 내 확인을 받게 하는 안전장치입니다. (승인/Approval)로 설익은 요리가 손님에게 나가는 걸 막죠.

자세히 보기
"앞으로 이 주방에선 (설명은 한국어로) 하고 (들여쓰기는 2칸)을 지켜줘. 이 레시피 규칙을 (CLAUDE.md 파일)에 저장해서 매번 기억하게 해줘. 그리고 코드를 (삭제하기 전)엔 꼭 나한테 먼저 물어봐."

🚑 바이브 코딩 생존 원칙

AI를 마법 지팡이처럼 한 번에 휘두르지 마세요.

작게 쪼개기 (Iterative)

  • "로그인 화면 뼈대(HTML) 짜줘."
  • "그 다음 작동 로직(JS/State) 붙여."
  • "잘 됐으니 GitHub에 백업(Git)할게."

에러는 복붙이 생명

빨간 에러창이 뜨면 당황하지 말고 에러 로그를 그대로 복사해서 물어보세요.

npm ERR! code ENOENT...

🪄 "터미널에 이런 에러가 났어. 해결 방법과 수정된 코드 줘."