Claude로 바이브 코딩 시작하기 - 가입부터 VSCode 연동까지 완벽 가이드

2025년 11월 24일 learning by Seven Fingers Studio 25분

Claude바이브코딩AI코딩VSCodeClaudeCodeAnthropic

“코드 한 줄 안 짜고 앱 만들었어요.” 요즘 개발자 커뮤니티에서 이런 말 자주 들리죠? 바로 바이브 코딩(Vibe Coding) 덕분입니다. AI한테 “이런 거 만들어줘”라고 말하면 코드가 뚝딱 나오는 시대가 됐어요.

저도 처음엔 반신반의했는데, 실제로 써보니까 진짜 세상이 바뀌었구나 싶더라고요. 오늘은 제가 매일 쓰는 Claude를 기준으로, 가입부터 VSCode 연동까지 처음부터 끝까지 정리해볼게요.

바이브 코딩이 뭔가요?

바이브 코딩은 OpenAI 공동 창립자 Andrej Karpathy가 2025년 2월에 처음 쓴 용어예요. 핵심은 간단합니다. 코드를 직접 안 짜고, AI한테 자연어로 설명해서 코드를 만든다는 거죠.

기존 개발 방식:

뭘 만들지 설계한다
코드를 직접 작성한다
에러 나면 디버깅한다
반복…

바이브 코딩:

AI한테 “이런 거 만들어줘” 한다
AI가 코드를 만든다
안 되면 “이 부분 고쳐줘” 한다
끝

Y Combinator에 따르면 2025년 겨울 배치 스타트업의 25%가 코드베이스의 95%를 AI로 생성했대요. 농담이 아니라 진짜 트렌드입니다.

Claude 가입하기

바이브 코딩 도구는 여러 개 있는데 (Cursor, GitHub Copilot, Replit 등), 저는 Claude를 추천합니다. 코드 이해력이 좋고, 한국어도 잘 알아듣거든요.

1단계: 회원가입

claude.ai 접속
“Sign up” 클릭
이메일 또는 Google 계정으로 가입
이메일 인증 완료

가입 자체는 무료입니다. 무료 플랜으로도 하루 약 100개 메시지까지 사용 가능해요.

2단계: 요금제 선택

Claude 요금제는 크게 3가지입니다:

플랜	가격	사용량
Free	무료	하루 ~100 메시지
Pro	월 $20	5시간당 45+ 메시지
Max	월 $100~$200	Pro 대비 5~20배

Pro 플랜 혜택:

무료 대비 5배 이상 사용량
피크 시간대 우선 접속
새 기능 조기 액세스
프로젝트 및 지식 베이스 기능

개인 개발자라면 Pro 플랜이면 충분합니다. 연간 결제하면 월 $17로 할인돼요.

3단계: 결제하기

claude.ai 로그인
좌측 하단 프로필 클릭
“Upgrade to Pro” 선택
신용카드 정보 입력
결제 완료

해외 결제가 가능한 카드면 됩니다. Visa, Mastercard 다 돼요.

Claude Code CLI 설치하기

웹에서 Claude 쓰는 것도 좋지만, 터미널에서 바로 쓰면 진짜 바이브 코딩이 됩니다. Claude Code CLI를 설치해볼게요.

사전 준비

Node.js 18 이상 설치
npm 사용 가능

Node.js 설치 확인:

node --version
# v18.0.0 이상이면 OK

CLI 설치

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

Windows PowerShell 오류 시:

# 관리자 권한으로 실행
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

그다음 다시 설치 명령어 실행하면 됩니다.

첫 실행

claude

처음 실행하면 API 키 입력하라고 나와요. claude.ai에서 API 키 발급받아서 입력하면 됩니다.

기본 사용법

# 프로젝트 폴더에서 실행
cd my-project
claude

# 직접 질문
claude "이 프로젝트 구조 설명해줘"

# 파일 수정 요청
claude "App.js에서 버튼 색상 파란색으로 바꿔줘"

VSCode에서 Claude Code 사용하기

VSCode 연동하면 더 편합니다. 코드 보면서 바로 Claude한테 물어볼 수 있거든요.

방법 1: 자동 설치

VSCode 터미널에서 claude 실행하면 확장 프로그램이 자동으로 감지되고 설치할지 물어봐요.

방법 2: 마켓플레이스에서 설치

VSCode 실행
Extensions (Ctrl+Shift+X) 열기
“Claude Code” 검색
Install 클릭

VSCode 설정 확인

VSCode 버전 1.85.0 이상이어야 합니다.

code 명령어가 터미널에서 안 되면:

Cmd+Shift+P (Mac) 또는 Ctrl+Shift+P (Windows)
“Shell Command: Install ‘code’ command in PATH” 검색
실행

단축키

단축키	기능
Cmd+Esc (Mac) / Ctrl+Esc (Windows)	Claude Code 열기
Alt+Cmd+K (Mac) / Alt+Ctrl+K (Windows)	빠른 실행
Shift+Tab	작업 모드 변경

작업 모드

Claude Code에는 3가지 모드가 있어요:

1. Normal (기본)

모든 작업에 승인 필요
안전하지만 좀 느림

2. Plan (계획 모드)

Claude가 먼저 계획을 설명
승인하면 실행
큰 작업에 추천

3. Auto Accept (자동 수락)

Claude 제안을 자동으로 수락
빠르지만 주의 필요

Shift+Tab으로 모드 변경할 수 있어요.

실전 바이브 코딩 예시

예시 1: React 컴포넌트 만들기

터미널에서:

claude "사용자 프로필 카드 컴포넌트 만들어줘.
이름, 이메일, 프로필 사진 표시하고
Tailwind CSS로 스타일링해줘"

Claude가 코드를 생성하고 파일까지 만들어줍니다.

예시 2: 버그 수정

claude "이 에러 해결해줘:
TypeError: Cannot read property 'map' of undefined"

현재 열린 파일 컨텍스트를 자동으로 읽어서 해결책을 제시해요.

예시 3: 리팩토링

claude "이 함수 너무 길어.
작은 함수들로 분리해줘"

CLAUDE.md 파일 활용하기

프로젝트 루트에 CLAUDE.md 파일을 만들어두면 Claude가 프로젝트 컨텍스트를 더 잘 이해합니다.

# 프로젝트 정보

## 기술 스택
- React 18
- TypeScript
- Tailwind CSS
- Supabase

## 코딩 컨벤션
- 함수형 컴포넌트 사용
- camelCase 변수명
- 한국어 주석

## 폴더 구조
- src/components: 재사용 컴포넌트
- src/pages: 페이지 컴포넌트
- src/hooks: 커스텀 훅

이 파일 있으면 Claude가 프로젝트 스타일에 맞게 코드를 생성해줘요.

바이브 코딩 팁

1. 명확하게 요청하기

나쁜 예:

버튼 만들어줘

좋은 예:

파란색 배경에 흰색 텍스트인 "저장" 버튼 만들어줘.
클릭하면 handleSave 함수 실행하고,
hover시 배경색 진해지게 해줘.
Tailwind CSS 사용해.

2. 단계별로 진행하기

한 번에 “앱 전체 만들어줘” 하지 마세요. 안 됩니다.

“프로젝트 구조 잡아줘”
“로그인 페이지 만들어줘”
“API 연동해줘”
이런 식으로 단계별로.

3. 컨텍스트 관리하기

대화가 길어지면 Claude가 앞에서 뭘 했는지 까먹어요.

/clear

이 명령어로 초기화하고, 중요한 내용은 파일로 저장해두세요.

4. 코드 리뷰는 필수

AI가 만든 코드 그대로 쓰면 안 됩니다. 꼭 검토하세요.

보안 취약점 없나?
성능 이슈 없나?
내 의도와 맞나?

바이브 코딩의 한계

솔직히 말하면 바이브 코딩도 만능은 아니에요.

주의할 점:

복잡한 로직은 AI도 실수함
보안 관련 코드는 꼭 전문가 검토
프로덕션에 바로 배포하면 위험

데이터브릭스 AI 레드팀 책임자는 “AI 도구가 만든 코드는 반드시 숙련된 개발자가 검증해야 한다”고 경고했어요. 프로토타입이나 개인 프로젝트엔 좋지만, 실서비스에는 주의가 필요합니다.

정리

바이브 코딩은 단순한 유행이 아닙니다. 2025년 3월에 Merriam-Webster 사전에 등록될 정도로 이미 새로운 개발 문화가 됐어요.

시작하려면:

claude.ai 가입 (무료 or Pro)
Claude Code CLI 설치
VSCode 확장 프로그램 설치
CLAUDE.md 작성
코딩 시작!

개발자의 역할이 “코드 작성자”에서 “AI 지휘자”로 바뀌고 있어요. 코드를 잘 짜는 것도 중요하지만, AI한테 내 의도를 명확하게 전달하는 능력이 점점 더 중요해질 겁니다.

아직 안 해보셨으면 오늘 당장 시작해보세요. 생각보다 쉽고, 생각보다 강력합니다!

← 블로그 목록으로