첫 바이브 코딩 — 자연어로 기능 만들기

🚀 처음 시도가 가장 중요하다

첫 번째 바이브 코딩 세션은 완벽한 결과물을 만드는 것이 목표가 아닙니다. 지시 → 생성 → 실행 → 수정이라는 사이클을 한 번 완전히 돌아보는 것이 목표입니다. 이 경험이 머리에 각인되면, 나머지는 반복과 심화일 뿐입니다.

🎯 오늘의 미션

버튼을 클릭하면 인사말이 나타나는 간단한 웹 페이지를 만듭니다. 코드는 한 줄도 직접 타이핑하지 않습니다.

💬 Step 1 — AI에게 첫 지시 내리기

에디터(Cursor/Windsurf)의 AI 채팅 창을 열거나, Claude Code 터미널을 실행합니다. 그리고 다음 내용을 그대로 입력하세요:

버튼을 클릭하면 화면에 "안녕하세요! 바이브 코딩을 시작했습니다 🎉" 메시지가 나타나는 웹 페이지를 만들어줘. index.html 파일 하나로 완성해줘. HTML, CSS, JavaScript를 모두 포함하고, 버튼과 메시지는 화면 가운데에 예쁘게 배치해줘.

전송하고 잠시 기다리면 AI가 HTML 파일을 생성합니다.

▶️ Step 2 — 결과 실행하기

AI가 index.html을 만들었다면, 파일을 더블클릭해서 브라우저로 엽니다. 또는 VS Code·Cursor에서 Live Server 확장을 설치하면 저장할 때마다 브라우저가 자동으로 새로고침됩니다.

버튼을 클릭했을 때 메시지가 나타나면 성공입니다. 그렇지 않다면 다음 단계로 넘어갑니다.

🔧 Step 3 — 수정 지시 내리기

결과가 마음에 들지 않거나 뭔가 달랐으면 합니다. 예를 들어 배경색이 밋밋하다면:

배경을 부드러운 그라디언트(파란색 → 보라색)로 바꾸고, 버튼에 호버 효과를 추가해줘. 메시지가 나타날 때 아래에서 올라오는 애니메이션도 넣어줘.

AI가 기존 코드를 수정해줍니다. 브라우저를 새로고침하면 변경 사항이 반영됩니다.

🔄 지시→생성→실행→수정 사이클이란

방금 여러분이 한 것이 바로 바이브 코딩의 핵심 사이클입니다:

1. 지시(Prompt): 원하는 것을 자연어로 말합니다.
2. 생성(Generate): AI가 코드를 만듭니다.
3. 실행(Run): 결과를 실제로 열어봅니다.
4. 수정(Revise): 마음에 안 드는 부분을 다시 말합니다.

이 사이클은 기능 하나가 완성될 때까지 반복됩니다. 10번 반복해도 괜찮습니다. 중요한 건 각 사이클이 빠르게 돌아가는 것입니다.

💡 핵심 인사이트: 완벽한 첫 번째 프롬프트를 쓰려고 고민하는 데 5분을 쓰는 것보다, 일단 짧게 시도하고 수정을 3번 하는 게 더 빠릅니다. 바이브 코딩은 대화입니다 — 초안이 틀려도 됩니다.

🧪 추가 도전 — 사이클을 한 번 더

첫 성공 경험을 더 깊게 만들어봅시다. 다음 지시를 시도해보세요:

지금 버튼을 여러 번 클릭하면 메시지가 중복으로 나타나. 버튼을 클릭한 횟수를 세어서 "3번 클릭했습니다"처럼 카운트도 보여주고, 버튼을 5번 이상 클릭하면 "이제 진짜 바이브 코딩을 시작할 준비가 됐어요!"라는 다른 메시지로 바뀌게 해줘.

이제 단순한 버튼에 상태 관리(클릭 횟수)와 조건 분기(5번 이상)가 추가됩니다. 코드를 전혀 몰라도 AI가 이걸 다 처리해줍니다.

✅ 이번 강의에서 배운 것

• 첫 바이브 코딩은 간단한 작업으로 시작해 사이클의 감각을 익히는 것이 목표입니다.
• 지시→생성→실행→수정 4단계 사이클이 바이브 코딩의 기본 리듬입니다.
• 첫 번째 시도가 완벽하지 않아도 됩니다. 대화하듯 수정 지시를 이어가면 됩니다.
• 다음 강의에서는 이 사이클을 더 효율적으로 만드는 좋은 프롬프트의 3원칙을 배웁니다.