바이브 코딩이란 무엇인가
바이브 코딩(Vibe Coding)은 2025년 초 AI 연구자 안드레이 카르파시(Andrej Karpathy)가 처음 제시한 개념으로, 코드의 세부 문법을 외우는 대신 AI에게 원하는 것을 말로 설명하고 AI가 생성한 코드를 검토하며 제품을 만들어 나가는 개발 방식을 말합니다. 전통적인 개발이 “도구를 배우고, 도구로 만드는” 순서였다면, 바이브 코딩은 “만들고 싶은 것을 먼저 정하고, AI와 함께 만들어 나가는” 순서로 진행됩니다.
핵심은 의도(Intent)와 검증(Verification)입니다. 개발자는 무엇을 만들 것인지 명확히 정의하고, AI가 생성한 결과물이 의도에 맞는지 판단합니다. 문법 오류를 직접 고치는 것보다 “이 부분이 왜 틀렸는지” AI에게 물어보는 것이 훨씬 빠릅니다.
비전공자에게 바이브 코딩이 혁명적인 이유는 단순합니다. 과거에는 파이썬을 6개월 배우고 HTML/CSS를 익히고 자바스크립트를 공부해야 비로소 간단한 웹앱을 만들 수 있었습니다. 지금은 Claude Code를 열고 “로그인 기능이 있는 할 일 관리 앱 만들어줘”라고 입력하면 수 분 내에 실행 가능한 코드가 나옵니다.
Claude Code 설치 및 환경 준비
Node.js 설치 확인
Claude Code는 Node.js 환경에서 실행됩니다. 터미널(macOS: Terminal, Windows: PowerShell)을 열고 아래 명령어로 설치 여부를 확인합니다.
node --version
npm --version버전이 출력되지 않는다면 nodejs.org에서 LTS 버전을 설치합니다. 설치 후 터미널을 재시작하면 됩니다.
Claude Code 전역 설치
npm install -g @anthropic-ai/claude-code설치가 완료되면 아래 명령어로 버전을 확인합니다.
claude --versionAPI 키 설정
Claude Code를 사용하려면 Anthropic API 키가 필요합니다. console.anthropic.com에서 계정을 생성하고 API 키를 발급받습니다. 발급받은 키는 환경 변수로 등록합니다.
macOS / Linux의 경우:
export ANTHROPIC_API_KEY=sk-ant-여기에_키_입력
echo 'export ANTHROPIC_API_KEY=sk-ant-여기에_키_입력' >> ~/.zshrcWindows PowerShell의 경우:
$env:ANTHROPIC_API_KEY = "sk-ant-여기에_키_입력"작업 디렉토리 생성
mkdir my-first-vibe-app
cd my-first-vibe-app
claude위 명령어를 실행하면 Claude Code 인터랙티브 세션이 시작됩니다. 이제 자연어로 개발 지시를 내릴 수 있습니다.
첫 번째 프로젝트: 간단한 할 일 관리 웹앱 만들기
프로젝트 시작 명령
Claude Code 세션이 열린 상태에서 다음과 같이 입력합니다.
할 일을 추가하고 완료 표시하고 삭제할 수 있는 간단한 웹앱을 만들어줘.
HTML, CSS, 자바스크립트 하나의 파일로 만들고, 브라우저에서 바로 열 수 있게 해줘.
디자인은 깔끔하게, 할 일 항목에는 완료 체크박스와 삭제 버튼을 넣어줘.Claude Code는 요청을 분석하고 파일을 직접 생성합니다. 생성된 index.html 파일을 브라우저로 열면 즉시 동작하는 앱을 확인할 수 있습니다.
기능 추가 요청
기본 앱이 마음에 들었다면 추가 기능을 요청합니다.
할 일 항목에 우선순위(높음/중간/낮음)를 선택할 수 있는 드롭다운을 추가해줘.
우선순위에 따라 항목 색상이 다르게 표시되면 좋겠어.Claude Code는 기존 코드를 읽고 변경사항을 최소화하면서 기능을 추가합니다. 코드를 직접 수정할 필요가 없습니다.
로컬 서버 실행
단일 HTML 파일로는 한계가 있습니다. 데이터를 저장하고 불러오는 기능이 필요하다면 서버가 필요합니다. Claude Code에게 서버 포함 버전을 요청합니다.
이 앱을 Node.js Express 서버 기반으로 바꿔줘.
할 일 데이터를 JSON 파일에 저장해서 브라우저를 닫아도 데이터가 유지되도록 해줘.Claude Code가 server.js, package.json, public/index.html 구조를 생성하면 다음 명령으로 서버를 실행합니다.
npm install
node server.js브라우저에서 http://localhost:3000에 접속하면 데이터가 유지되는 웹앱을 사용할 수 있습니다.
코드를 이해하지 못해도 되는가 – 비전공자의 현실적 접근법
바이브 코딩을 처음 접하는 비전공자들이 가장 많이 하는 질문입니다. 결론부터 말하면: 코드를 완전히 이해하지 못해도 만들 수 있지만, 최소한의 이해는 필요합니다.
이해하지 않아도 되는 것들
프로그래밍 문법, 변수 선언 방식, 함수 작성법, 클래스 구조, 비동기 처리 메커니즘… 이런 세부 사항은 AI가 처리합니다. 여러분이 직접 작성할 필요가 없습니다.
반드시 이해해야 하는 것들
- 파일 구조: 어떤 파일이 어떤 역할을 하는지 (HTML은 구조, CSS는 디자인, JS는 동작)
- 에러 메시지 읽기: 에러가 발생했을 때 그 내용을 Claude Code에 그대로 붙여넣는 방법
- 터미널 기본 명령:
cd(폴더 이동),ls(파일 목록),npm install(패키지 설치) 정도 - 브라우저 개발자 도구: F12를 눌러 Console 탭에서 에러를 확인하는 방법
에러가 났을 때 대처법
터미널에 빨간 에러 메시지가 나타나면 당황하지 말고 그 내용 전체를 복사해서 Claude Code에 붙여넣습니다.
이런 에러가 났어:
[에러 메시지 전체 붙여넣기]
어떻게 고치면 돼?Claude Code는 에러 원인을 분석하고 수정 방법을 제시합니다. 대부분의 경우 수정된 코드를 직접 파일에 적용해줍니다.
AntiGravity와의 연계
AntiGravity는 Claude Code를 GUI 기반으로 사용할 수 있게 해주는 도구입니다. 터미널이 낯선 비전공자에게 특히 유용합니다. 시각적인 인터페이스에서 파일 트리를 보면서 Claude Code와 대화하듯 개발할 수 있어 진입 장벽이 크게 낮아집니다.
# AntiGravity 설치 (npm 기반)
npm install -g antigravity-cli
# 프로젝트 폴더에서 실행
antigravity init
antigravity startAntiGravity가 실행되면 브라우저에서 시각적 인터페이스가 열립니다. 파일 목록을 보면서 어떤 파일을 수정할지 선택하고 Claude Code에게 지시를 내릴 수 있습니다.
실전 Q&A: 비전공자가 자주 마주치는 문제들
Q1. Claude Code가 생성한 코드가 작동하지 않을 때는?
A. 가장 먼저 할 일은 터미널과 브라우저 개발자 도구(F12 – Console 탭)의 에러 메시지를 확인하는 것입니다. 에러 내용을 그대로 Claude Code에 붙여넣으면 대부분 해결됩니다. 반복해서 같은 에러가 난다면 다음과 같이 맥락을 추가합니다.
세 번 시도했는데 같은 에러가 계속 나.
지금까지 시도한 방법과 결과를 설명해줄게. [내용 입력]
처음부터 다른 방식으로 접근해줘.Q2. 만든 앱을 인터넷에 공개하고 싶다면?
A. 가장 쉬운 방법은 Vercel이나 Netlify를 활용하는 것입니다. 둘 다 무료로 사용할 수 있고 GitHub과 연동하면 코드를 push할 때마다 자동으로 배포됩니다. Claude Code에게 배포 방법을 물어보면 단계별 안내를 받을 수 있습니다.
이 프로젝트를 Vercel에 배포하고 싶어.
GitHub 저장소에 올리는 방법부터 Vercel 연동까지 단계별로 알려줘.Q3. API 요금이 걱정된다면?
A. Anthropic API는 사용량 기반 과금입니다. 개인 학습 용도라면 월 5달러 이하로 충분히 사용할 수 있습니다. 다만 Claude Code는 파일을 읽고 쓸 때마다 토큰을 소비하므로 큰 프로젝트에서는 주의가 필요합니다. 프리셋 설정에서 최대 토큰 소비량을 지정할 수 있습니다.
# 세션당 최대 비용 제한 설정
claude --max-turns 20Q4. 팀원과 함께 바이브 코딩으로 협업하려면?
A. GitHub을 활용합니다. 각자 브랜치에서 작업하고 Pull Request로 합칩니다. Claude Code는 git 명령어도 실행할 수 있습니다.
현재 변경사항을 "할 일 우선순위 기능 추가" 메시지로 커밋하고 GitHub에 push해줘.Q5. 바이브 코딩으로 만든 코드는 실제 서비스에 쓸 수 있나?
A. 개인 프로젝트나 소규모 서비스에는 충분합니다. 다만 금융, 의료 등 보안이 중요한 서비스는 반드시 전문 개발자의 코드 리뷰가 필요합니다. AI가 생성한 코드에는 보안 취약점이 포함될 수 있으므로, 민감한 데이터를 다루는 앱은 Claude Code에게 보안 리뷰를 명시적으로 요청합니다.
이 코드에 보안 취약점이 있는지 검토해줘.
특히 SQL 인젝션, XSS, 인증 관련 문제를 중점적으로 봐줘.오늘 5분 실습
아래 순서대로 따라하면 5분 안에 실제로 동작하는 웹앱을 만들 수 있습니다.
- 터미널을 열고 다음 명령을 실행합니다.
mkdir vibe-test && cd vibe-test && claude - Claude Code 세션이 열리면 다음을 입력합니다.
오늘 날짜와 시간을 크게 표시하고 5초마다 자동 갱신되는 디지털 시계 웹페이지를 index.html 파일로 만들어줘. 배경은 어두운 색, 글자는 밝은 색으로 해줘. - 생성된
index.html파일을 브라우저에서 엽니다. macOS라면:open index.htmlWindows라면:
start index.html - 마음에 들지 않는 부분이 있다면 Claude Code에게 추가로 요청합니다.
글꼴을 더 세련되게 바꿔줘. 그리고 현재 요일도 표시해줘.
이것이 바이브 코딩의 전부입니다. 원하는 것을 말하고, 결과를 보고, 마음에 들 때까지 다시 요청하는 반복입니다.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
마무리
바이브 코딩은 비전공자에게 개발의 문을 여는 열쇠입니다. 문법을 외우는 것보다 무엇을 만들지 명확히 생각하는 능력이 더 중요한 시대가 왔습니다. Claude Code는 도구입니다. 도구를 잘 쓰려면 무엇을 만들 것인지가 먼저입니다.
처음에는 작은 것부터 시작하세요. 디지털 시계, 간단한 할 일 관리 앱, 계산기… 이런 작은 성공 경험이 쌓이면 점점 더 복잡한 것에 도전할 수 있습니다. 중요한 것은 완벽한 코드를 처음부터 쓰려 하지 않는 것입니다. AI와 함께 반복하며 개선해 나가는 과정 자체가 바이브 코딩입니다.
