🎹바이브 코딩 마스터
Chapter 08

🚀첫 바이브 코딩

맛보기

Codex CLI로 간단한 자기소개 페이지를 직접 만들어보며 바이브 코딩을 체험합니다.

30

첫 바이브 코딩 — 맛보기

지금까지 바이브 코딩의 개념, 도구, 안전장치, Git을 배웠습니다. 이제 드디어 직접 해볼 시간입니다.

이 장에서는 AI에게 말을 걸어서 간단한 웹페이지를 만들어보겠습니다. 코드를 한 줄도 직접 쓰지 않고, 오직 한국어 대화만으로 완성합니다.

🎼 첫 DAW 체험으로 비유하면

처음 Ableton Live를 열었을 때를 기억하시나요?

아무것도 모르는 상태에서 드럼 랙을 끌어다 놓고, 패드를 클릭해서 비트를 찍고, 재생 버튼을 눌렀을 때 "우와, 내가 비트를 만들었다!" 하는 감동.

이 장에서 그 감동을 코딩으로 다시 느끼게 될 것입니다. 여러분이 만드는 것은 비트가 아니라 웹페이지이고, 드럼 패드 대신 한국어 문장으로 만듭니다.


준비: 프로젝트 폴더와 Git 설정

지난 장에서 배운 Git을 바로 활용합니다.

프로젝트 폴더 만들기

터미널을 열고 새 프로젝트 폴더를 만듭니다.

프로젝트 폴더 생성
$ mkdir my-music-profile && cd my-music-profile

Git 초기화

방금 배운 Git으로 프로젝트를 관리할 준비를 합니다.

Git 저장소 초기화
$ git init
Initialized empty Git repository in /home/user/my-music-profile/.git/

AI 코딩 도구 실행

이제 AI를 불러옵니다. Codex CLI, Claude Code, 또는 Gemini CLI 중 하나를 실행합니다.

Claude Code 실행
$ claude

첫 번째 요청: "나의 음악 프로필 페이지를 만들어줘"

자, 이제 AI에게 첫 번째 요청을 보내봅시다.

ℹ️ 왜 음악 프로필 페이지인가?

프로그래밍 교재에서 "Hello World"를 만드는 것처럼, 바이브 코딩의 첫 프로젝트로 자기소개 웹페이지를 만듭니다.

음악을 공부하는 여러분에게 가장 친숙한 주제인 "나의 음악 프로필"을 만들어보겠습니다.

프롬프트 보내기

아래와 같이 AI에게 말합니다:

AI에게 보내는 프롬프트text
🎼 음악으로 비유하면

이것은 마치 프로듀서에게 곡의 방향을 설명하는 것과 같습니다:

"BPM 120, 마이너 키, 앰비언트 느낌으로, 신스 패드를 메인으로, 드럼은 최소화하고, 리버브 많이 써줘"

이렇게 원하는 것을 구체적으로 설명하면, 프로듀서(AI)가 그에 맞는 결과물을 만들어냅니다.

AI가 코드를 생성하는 과정

AI는 여러분의 요청을 받고, 다음과 같은 과정을 거칩니다:

요청 분석

AI가 프롬프트를 분석합니다: "HTML 프로필 페이지, 다크 테마, 음악 관련 디자인"

코드 생성

AI가 HTML + CSS 코드를 작성합니다.

파일 생성 승인 요청

기본 모드에서는 "index.html 파일을 생성하겠습니다. 허용하시겠습니까?"라고 묻습니다.

파일 저장

승인하면 index.html 파일이 생성됩니다.

AI가 코드를 생성하고 승인 요청
$ 프롬프트 전송 후 AI 응답

y를 입력하면 파일이 생성됩니다.


결과 확인: 브라우저에서 열기

AI가 만든 파일을 브라우저에서 확인해봅시다.

브라우저에서 열기 (macOS)
$ open index.html # macOS
브라우저에서 열기 (Linux)
$ xdg-open index.html # Linux
브라우저에서 열기 (Windows)
$ start index.html # Windows
💡 다른 방법

터미널 명령이 안 되면, 파일 탐색기에서 index.html 파일을 찾아 더블클릭하면 됩니다. 웹 브라우저가 자동으로 열립니다.

브라우저에 여러분의 음악 프로필 페이지가 나타납니다! 코드를 한 줄도 직접 쓰지 않았는데, 웹페이지가 완성된 것입니다.

🎼 음악으로 비유하면

이것은 마치 MIDI 시퀀서에 음표를 찍고 재생 버튼을 누른 순간과 같습니다. "내가 지시한 대로 소리가 나온다!" — 바로 그 순간입니다.

물론 첫 결과물이 완벽하지는 않을 겁니다. 첫 데모 녹음이 완벽하지 않은 것처럼요. 하지만 중요한 것은 시작했다는 것입니다.


Git으로 첫 번째 상태 저장

결과가 만족스럽든 아니든, 현재 상태를 Git으로 저장합시다. 이것이 습관이 되어야 합니다.

첫 번째 커밋
$ git add index.html && git commit -m "첫 번째 버전 — AI가 생성한 음악 프로필 페이지"

반복 수정: 대화하듯 다듬어가기

첫 결과물은 시작점일 뿐입니다. 이제부터 대화를 통해 수정해나갑니다. 이것이 바이브 코딩의 핵심입니다.

수정 요청 1: 색상 변경

수정 요청 1text

AI는 CSS의 background 값과 제목의 background: linear-gradient(...) 속성을 수정합니다.

💡 수정 전에 git commit!

수정을 요청하기 전에 현재 상태를 커밋했는지 확인하세요. 아까 커밋했으니 괜찮습니다. 만약 AI의 수정이 마음에 안 들면 git checkout -- index.html로 이전 상태로 되돌릴 수 있습니다.

수정 요청 2: 레이아웃 변경

수정 요청 2text

수정 요청 3: 애니메이션 추가

수정 요청 3text

수정 요청 4: 반응형 디자인

수정 요청 4text
🎼 음악으로 비유하면

이 과정은 믹싱 과정과 정확히 같습니다.

  • "보컬 볼륨 좀 올려줘" → 색상 변경
  • "기타를 왼쪽으로 패닝해줘" → 레이아웃 변경
  • "인트로에 페이드인 넣어줘" → 애니메이션 추가
  • "이어폰으로 들었을 때도 괜찮게 해줘" → 반응형 디자인

프로듀서에게 한마디씩 지시하며 곡을 다듬어가는 것처럼, AI에게 한마디씩 지시하며 웹페이지를 다듬어갑니다.

이것이 바이브 코딩입니다.

매 수정 후에 결과가 마음에 들면 커밋하는 것을 잊지 마세요:

수정 후 커밋
$ git add . && git commit -m "카드 레이아웃 적용 + 애니메이션 추가"

프롬프트 작성 팁: 구체적이고 명확하게

바이브 코딩에서 프롬프트의 품질 = 결과물의 품질입니다.

나쁜 프롬프트 vs 좋은 프롬프트

나쁜 프롬프트:

나쁜 프롬프트text
좋은 웹페이지 만들어줘

이것은 마치 프로듀서에게 "좋은 곡 만들어줘"라고 하는 것과 같습니다. 장르는? 분위기는? 악기는? 템포는? 아무것도 알 수 없습니다.

좋은 프롬프트:

좋은 프롬프트text
🎼 프로듀서에게 곡 의뢰할 때와 같습니다

나쁜 의뢰: "좋은 곡 만들어주세요" 좋은 의뢰: "BPM 85, Dm 키, Lo-fi hip hop 스타일, 로즈 피아노 메인, 사이드체인 킥, 비닐 크래클 텍스처, 2분 길이, 인트로 8마디 후 멜로디 진입"

구체적일수록 원하는 결과에 가까운 결과물을 받을 수 있습니다.

프롬프트 작성의 5가지 원칙

💡 프롬프트 작성 5원칙

1. 역할을 먼저 정해주기 "너는 웹 디자이너야" 또는 "프론트엔드 개발자로서..." → 음악: "현악 편곡자로서 이 멜로디에 스트링 파트를 붙여줘"

2. 구체적인 요구사항 나열하기 무엇이 필요한지 목록으로 정리합니다. → 음악: "바이올린 1, 바이올린 2, 비올라, 첼로 4성부로"

3. 제약 조건 명시하기 "JavaScript는 사용하지 마" 또는 "HTML 한 파일로만" → 음악: "전자 악기는 쓰지 말고 어쿠스틱으로만"

4. 예시 또는 참고 제공하기 "Apple 홈페이지 같은 미니멀한 디자인으로" → 음악: "Nils Frahm의 'Says' 같은 분위기로"

5. 결과 형식 지정하기 "코드와 함께 각 부분이 무엇을 하는지 주석으로 설명해줘" → 음악: "악보와 함께 각 파트의 역할을 주석으로 적어줘"


시연 비교: 같은 요청, 다른 AI 도구

같은 프롬프트를 세 가지 도구에 보내면 어떤 차이가 있을까요?

프롬프트

공통 프롬프트text

각 도구의 반응 차이

🎼 세 도구를 음악가로 비유하면

Codex CLI = 세션 뮤지션: 빠르고 실용적입니다. "이렇게 하면 되죠?" 하고 최소한의 소통으로 곧바로 연주합니다. 결과물은 깔끔하지만 화려하지는 않습니다.

Claude Code = 오케스트레이터: 시간이 좀 더 걸리지만, 각 파트가 왜 그렇게 배치되었는지 설명해주고, 악보에 상세한 주석을 달아줍니다. 초보자에게 특히 좋습니다.

Gemini CLI = 데모 프로듀서: 빠르게 데모를 뽑아내고, "이 방향으로 갈까요?" 하고 확인합니다. 속도와 품질의 균형이 좋습니다.

🔥 어떤 도구를 쓸까?

처음에는 Claude Code를 추천합니다. 이유는:

  1. 한국어 이해도가 높음
  2. 코드에 대한 설명이 상세함 — 배우면서 코딩할 수 있음
  3. MCP 지원이 가장 성숙함
  4. 안전장치가 세밀함

익숙해진 후에 Codex CLI나 Gemini CLI도 시도해보세요. 각 도구의 장단점을 체감으로 이해할 수 있습니다.


바이브 코딩의 핵심: 대화하듯 자연스럽게

바이브 코딩에서 가장 중요한 것은 완벽한 프롬프트를 작성하는 것이 아닙니다. 가장 중요한 것은 대화를 계속하는 것입니다.

대충 시작하기

완벽하지 않아도 됩니다. "음악 프로필 페이지 만들어줘"로 시작하세요. 첫 데모는 항상 거칩니다.

결과 확인하기

AI가 만든 것을 브라우저에서 확인합니다. "이 부분은 좋고, 저 부분은 아쉽네."

구체적으로 수정 요청

아쉬운 부분을 구체적으로 지적합니다. "제목 폰트가 너무 작아. 2배로 키워줘."

반복

만족할 때까지 2-3번을 반복합니다. 매번 커밋하는 것을 잊지 마세요.

완성

"이 정도면 됐다!" — 최종 커밋.

🎼 곡 작업 과정과 똑같습니다
  1. 피아노로 대충 멜로디를 잡는다 (대충 시작)
  2. 들어본다 (결과 확인)
  3. "여기 음이 좀 어색한데..." 수정한다 (수정 요청)
  4. 다시 듣고, 다시 수정한다 (반복)
  5. "오, 이거 좋다!" 완성 (최종 커밋)

바이브 코딩은 작곡 과정 그 자체입니다. 도구가 피아노에서 AI로 바뀌었을 뿐, "만들고 → 듣고(보고) → 고치고 → 반복"하는 과정은 완전히 동일합니다.


실전 과제: 직접 해보기

이 장을 마치기 전에, 아래 과제를 직접 수행해보세요.

🔥 실전 과제

과제 1: 기본 프로필 만들기 자신의 실제 정보로 음악 프로필 페이지를 만들어보세요. (이름, 전공, 관심 분야, 사용 도구)

과제 2: 3번 이상 수정하기 처음 결과물을 그대로 두지 말고, 최소 3번 이상 수정을 요청하세요. 색상, 레이아웃, 폰트 등 무엇이든 좋습니다.

과제 3: Git으로 기록 남기기 각 수정 단계마다 git commit을 해서, 나중에 git log로 변경 과정을 확인할 수 있도록 하세요.

과제 4: 되돌리기 연습 일부러 이상한 수정을 요청한 후 ("배경을 빨간색으로 바꿔줘"), git checkout으로 이전 상태로 되돌려보세요.

보너스 과제: 다른 도구로 비교 같은 프롬프트를 Claude Code와 Codex CLI(또는 Gemini CLI) 양쪽에 보내서, 결과물이 어떻게 다른지 비교해보세요.


정리: 이 장에서 배운 것

ℹ️ Chapter 8 핵심 정리
  1. 바이브 코딩은 대화입니다 — 코드를 쓰는 것이 아니라, AI와 대화합니다
  2. 구체적인 프롬프트가 좋은 결과를 만듭니다 — "좋은 곡"이 아닌 "BPM 120, Dm 키"
  3. 반복 수정이 핵심입니다 — 한 번에 완벽한 결과는 나오지 않습니다
  4. Git은 안전망입니다 — AI의 수정이 마음에 안 들면 되돌릴 수 있습니다
  5. 도구마다 특성이 다릅니다 — 상황에 맞는 도구를 선택하세요

가장 중요한 것: 완벽한 프롬프트를 쓰려고 고민하지 말고, 일단 시작하세요. 첫 테이크가 완벽할 필요는 없습니다. 대화를 통해 다듬어가면 됩니다.

다음 장에서는 이 기초를 바탕으로 더 복잡한 프로젝트를 만들어보겠습니다. MediaPipe를 활용한 인터랙티브 프로젝트가 기다리고 있습니다!