Part 1 · 개념
🤖
Introduction

바이브 코딩이란?

코드를 한 줄도 몰라도, 아이디어만 있으면 앱이 만들어지는 새로운 개발 패러다임

💬

자연어로 지시

한국어나 영어로 원하는 기능을 설명하면 AI가 코드를 생성합니다.

⚡

즉시 결과 확인

생성된 코드를 바로 실행하고, 결과를 보면서 대화식으로 개선합니다.

🔄

반복 개선

"이 버튼 색을 파란색으로", "에러가 났어" 한 마디로 수정이 됩니다.

💡
안드레이 카르파티(Andrej Karpathy)가 2025년 2월 처음 언급한 개념입니다. "가장 인기 있는 새로운 프로그래밍 언어는 영어다"라는 말로 요약됩니다. 느낌(Vibe)과 의도를 전달하면 AI가 기술적 구현을 담당합니다.
0줄
코드 직접 작성
∞
만들 수 있는 것
AI
나의 개발 파트너
Comparison

기존 코딩 vs 바이브 코딩

무엇이 달라졌는지 한눈에 비교해보세요

❌ 기존 방식
  • 문법을 외워야 함 (Python, JS, etc.)
  • 에러 메시지를 혼자 해석
  • Stack Overflow에서 답 검색
  • 라이브러리 문서를 직접 읽음
  • 학습 곡선이 수개월~수년
  • 막히면 혼자 디버깅
✅ 바이브 코딩
  • 말로 설명하면 됨
  • 에러를 복붙하면 AI가 분석
  • AI가 즉시 솔루션 제안
  • 필요한 라이브러리를 AI가 선택
  • 당일부터 결과물 생성 가능
  • AI와 함께 쌍 프로그래밍
⚠️
오해 주의: 바이브 코딩은 "코딩을 안 해도 된다"가 아니라 "AI와 협업하는 방식으로 코딩한다"입니다. 논리적 사고와 요구사항 정의 능력은 여전히 중요합니다.
🎯
가장 적합한 경우: 아이디어를 빠르게 프로토타입으로 만들기, 반복적인 boilerplate 코드 생성, 개인 프로젝트·사이드 프로젝트 개발
Tools

어떤 도구를 쓸까?

목적에 맞는 도구를 고르세요. 처음이라면 Claude.ai부터 시작하세요.

🧠
Claude.ai
브라우저에서 바로
대화식 코딩
무료 시작
⌨️
Claude Code
터미널 기반
파일 직접 수정
Pro 필요
🖥️
Cursor
VS Code 기반
IDE 내 AI 통합
무료 시작
⚡
Bolt.new
브라우저 내
풀스택 앱 생성
무료 시작
💖
Lovable
UI 디자인 중심
완전한 앱 생성
유료
🔄
Replit
클라우드 IDE
즉시 배포 가능
무료 시작
📌
추천 조합: 처음엔 Claude.ai (무료)로 시작 → 파일 단위 작업이 필요하면 Cursor 추가 → 본격적으로 하려면 Claude Code로 이동
Setup

환경 설정 단계

Claude Code 기준으로 설명합니다. 설치부터 첫 실행까지 5단계

1

Claude Pro 계정 준비

claude.ai에서 Pro 플랜 구독 (월 $20). Claude Code 실행에 필요합니다. 처음엔 무료 플랜으로도 claude.ai에서 연습 가능합니다.

2

Node.js 설치

# Node.js 공식 사이트에서 LTS 버전 설치 node --version # v18 이상 확인
3

Claude Code 설치

npm install -g @anthropic-ai/claude-code
4

프로젝트 폴더 생성 후 실행

mkdir my-project && cd my-project claude # Claude Code 실행
5

첫 번째 요청 전달

"간단한 할 일 목록 웹앱을 만들어줘. React로, 추가/삭제 기능 포함."
Prompt Engineering

좋은 프롬프트 작성법

프롬프트 품질이 결과물 품질을 결정합니다. 이것만 지켜도 80%는 성공합니다.

❌
나쁜 프롬프트
"웹사이트 만들어줘"
✅
좋은 프롬프트
"React + Tailwind CSS로 투두 리스트 웹앱을 만들어줘. 기능: 항목 추가, 완료 체크, 삭제. 디자인은 다크 테마."

📝 프롬프트 체크리스트

  • ✓ 기술 스택 명시 (React, Python, etc.)
  • ✓ 원하는 기능 목록 나열
  • ✓ 디자인 스타일 언급
  • ✓ 대상 사용자 설명
  • ✗ 한번에 너무 많이 요청
  • ✗ 모호한 형용사만 사용 ("예쁘게")

프롬프트 템플릿

기능 요청 템플릿
[기술 스택]으로 [목적]을 하는 [종류]를 만들어줘. 기능은 [기능1], [기능2], [기능3]이야. 디자인은 [스타일]로 해줘.
에러 해결 템플릿
아래 에러가 발생했어. 원인과 해결 방법을 알려줘:
[에러 메시지 전체 복붙]
개선 요청 템플릿
현재 [기능명]이 [문제점]이야. [원하는 동작]이 되도록 수정해줘.
Workflow

반복 개선 흐름

바이브 코딩의 핵심은 대화식 반복입니다. 한번에 완벽하려 하지 마세요.

📋

1단계: 큰 그림 요청

전체 구조와 뼈대를 먼저 만들게 합니다. 세부 사항은 나중에 추가합니다.

"먼저 전체 폴더 구조와 기본 파일들만 만들어줘. 기능 구현은 아직 하지 않아도 됨."
🔧

2단계: 기능 하나씩 추가

한 번에 하나의 기능만 요청합니다. 각 기능이 작동하는 것을 확인한 후 다음으로 넘어갑니다.

"이제 로그인 기능만 추가해줘. 이메일/비밀번호 입력, 유효성 검사 포함."
✅

3단계: 테스트 & 확인

생성된 결과를 직접 실행하여 확인합니다. 잘 되면 다음 기능으로, 안 되면 에러를 그대로 붙여넣기.

🔁

4단계: 에러 → 다시 요청

에러가 나면 당황하지 말고 에러 메시지를 그대로 Claude에 붙여넣고 "이 에러 고쳐줘"라고 하면 됩니다.

💡
에러는 실패가 아닙니다. 바이브 코딩에서 에러는 AI와의 대화를 이어나가는 다음 단계입니다.
🚀

5단계: 완성 & 배포

기능이 완성되면 Vercel, Netlify 등으로 배포를 요청할 수도 있습니다.

"이 프로젝트를 Vercel에 배포하는 방법을 단계별로 알려줘."
Claude 기법

Claude 핵심 활용 기법

Claude Code를 제대로 활용하는 8가지 핵심 기법

📋

Plan 모드

파일을 수정하기 전에 먼저 계획만 보여달라고 하는 모드. 방향이 맞는지 확인 후 실행합니다.

"먼저 계획만 세워줘, 수정은 내가 ok한 후에 해줘"
📝

CLAUDE.md 파일

프로젝트 루트에 규칙을 작성해두면 매번 설명 없이도 일관된 방식으로 코드를 생성합니다.

# CLAUDE.md - 항상 TypeScript 사용 - 컴포넌트는 함수형으로
🔢

작은 단위 멀티턴

한 번의 대화에 하나의 기능만. 너무 많이 한번에 요청하면 AI의 집중력이 분산됩니다.

✅

Todo 명시적 관리

"수정이 필요한 파일 목록을 Todo로 만들어줘"라고 요청하면 빠짐없이 처리됩니다.

🧹

Compact (컨텍스트 정리)

대화가 10턴 이상 길어지면 "/compact"로 요약해 불필요한 내용을 제거합니다.

🧠

Extended Thinking

복잡한 아키텍처 결정이나 디버깅에 사용. "깊게 생각해서 최선의 방법을 알려줘"라고 요청.

Troubleshooting

자주 막히는 상황들

초보자가 가장 많이 걸리는 4가지 상황과 돌파법

🚫 막히는 상황 1
AI가 내가 원하는 걸 계속 잘못 이해해
✅ 해결법
요청을 더 작게 쪼개세요. 예: "전체 앱 만들어줘" → "먼저 헤더 컴포넌트만" → "헤더에 네비게이션 링크 추가". 그리고 "내가 원하는 건 이거야: [구체적 설명]"으로 다시 시작하세요.
🚫 막히는 상황 2
대화가 길어질수록 AI가 앞 내용을 잊어버려
✅ 해결법
CLAUDE.md에 핵심 규칙을 저장해두고, 10턴마다 /compact 실행. 또는 "지금까지 만든 기능을 요약해줘"라고 먼저 확인한 후 이어가세요.
🚫 막히는 상황 3
같은 에러가 계속 반복돼서 해결이 안 됨
✅ 해결법
새 대화를 시작하고 "이 에러가 계속 나는데, 근본 원인부터 분석해줘"라고 합니다. 이전 대화의 잘못된 맥락을 초기화하는 것이 빠를 수 있습니다.
🚫 막히는 상황 4
코드가 잘 됐다가 갑자기 다른 기능이 망가짐
✅ 해결법
Git을 활용하세요. 기능이 작동할 때마다 commit합니다. "git으로 버전 관리하는 방법도 같이 알려줘"라고 요청하면 Claude가 설명해줍니다.
Error Handling

오류 처리 전략

에러를 두려워하지 마세요. 에러는 AI와의 대화를 이어가는 단서입니다.

에러 대응 순서도

1

에러 메시지 전체 복사

스크롤해서 에러 전체를 복사. 첫 줄만 복사하면 안 됩니다.

2

상황 설명 추가

"[기능명]을 실행했을 때 이 에러가 남"

3

Claude에 붙여넣고 요청

"이 에러를 고쳐줘. 원인도 설명해줘."

에러 타입별 대처법

🔴 Module not found

"이 패키지를 설치하는 명령어 알려줘"

🟡 TypeError / Undefined

"이 변수가 undefined인 이유와 해결법 알려줘"

🟠 CORS 에러

"CORS 에러 발생. 백엔드와 프론트엔드 설정을 어떻게 해야 해?"

🔵 Build 실패

"빌드 로그 전체"를 복붙 후 "빌드가 실패했어. 원인 찾아줘"

Pro Tips

고급 팁 모음

이걸 알면 바이브 코딩 실력이 한 단계 업그레이드됩니다

📁

CLAUDE.md 활용

프로젝트 루트에 CLAUDE.md를 만들고 기술 스택, 코딩 컨벤션, 하지 말아야 할 것들을 써두면 매번 설명 없이 일관된 코드가 나옵니다.

컨벤션 유지 시간 절약
🌿

Git 필수 활용

기능 구현 전: git commit. 새 기능 추가 전: git branch. 잘못됐으면: git reset. 바이브 코딩에서 Git은 안전망입니다.

안전망 롤백 가능
🔒

보안 주의사항

API 키는 절대 코드에 직접 쓰지 말고 .env 파일 사용. "환경 변수로 API 키 관리하는 방법 알려줘"라고 요청하세요.

.env 파일 .gitignore
🎨

디자인 프롬프트 팁

원하는 디자인 참고 사이트를 언급하거나, "Apple 스타일로", "Material Design으로", "Tailwind CSS 사용해서"처럼 구체적으로 지정하세요.

레퍼런스 제공 스타일 명시
🤖

서브에이전트 활용

Claude Code에서 복잡한 작업은 "프론트엔드와 백엔드를 병렬로 처리해줘"처럼 역할을 분리하면 더 집중된 결과가 나옵니다.

역할 분리 병렬 처리
📊

리뷰 요청 습관

기능 완성 후 "이 코드의 문제점과 개선할 수 있는 부분을 리뷰해줘"라고 하면 코드 품질이 올라갑니다.

코드 품질 베스트 프랙티스
Summary

핵심 원칙 총정리

이 원칙만 기억하면 바이브 코딩에서 막히지 않습니다

🎯
"작게 나누고, 자주 확인하고, 막히면 새 대화로"
🎯

구체적으로

모호한 요청 대신 기술 스택, 기능, 디자인을 명확하게 명시합니다.

🔢

하나씩

한 번에 하나의 기능만 요청합니다. 완성 확인 후 다음으로 넘어갑니다.

🌿

저장하면서

작동하는 상태에서 Git commit. 에러는 새 대화 또는 에러 복붙.

✅ 바이브 코딩 시작 체크리스트

  • ✓ Claude.ai 계정 생성 (무료)
  • ✓ 만들고 싶은 것 한 문장으로 정의
  • ✓ 기술 스택 결정 (모르면 AI에게 추천 요청)
  • ✓ 작은 기능부터 하나씩 구현
  • ✓ Git으로 버전 관리
  • ✓ 에러는 복붙해서 해결 요청

🚀 다음 단계

초급 → 중급

Claude Code 설치, CLAUDE.md 작성 습관화, Git 연동

중급 → 고급

서브에이전트 활용, 자동화 스크립트, CI/CD 연동

📺 원본 영상

기술노트 with 알렉 · "바이브코딩 막힘 없이 뻥 뚫어 드립니다"