Claude Code ×
VS Code
완전 초보자 가이드
코딩을 몰라도 괜찮아요!
AI에게 말로 설명하면 코드가 뚝딱 완성되는
바이브코딩 환경 구축부터 GitHub 배포까지
Claude Code가 뭔가요?
Claude Code는 Anthropic(앤트로픽)이 만든 AI 코딩 어시스턴트입니다.
쉽게 말하면, VS Code 안에서 AI 개발 파트너와 함께 코딩하는 것이에요.
“로그인 버튼 만들어줘”, “에러 고쳐줘”라고 한국어로 말하면 Claude가 직접 파일을 열고, 코드를 수정하고, 결과를 보여줍니다.
코드를 직접 작성하는 대신, AI에게 원하는 것을 자연어(말)로 설명해서 코드를 만드는 새로운 개발 방식입니다. 2025년부터 전 세계 개발자들 사이에서 급속도로 퍼지고 있어요.
일반 AI 챗봇과 Claude Code의 차이점:
일반 AI 챗봇
코드를 채팅창에 보여주기만 합니다. 직접 복사해서 파일에 붙여넣어야 해요.
Claude Code
파일을 직접 열고, 수정하고, 저장합니다. 내 프로젝트 전체를 이해하고 작업해요!
요금제 & 준비물 확인
무료 계정으로는 사용할 수 없어요. 아래 요금제를 확인하세요.
✅ 설치 전 준비물 체크리스트:
Claude 계정 (Pro 이상)
claude.ai에서 가입 후 Pro 플랜으로 업그레이드하세요. 7일 무료 체험 가능!
Node.js 설치
nodejs.org에서 무료 다운로드. LTS 버전을 선택하세요. Claude Code CLI가 Node.js 위에서 작동합니다.
# 설치 확인 명령어
node --version
# v20.0.0 이상이면 OK!VS Code 설치 (버전 1.98.0 이상)
code.visualstudio.com에서 무료 다운로드. 이미 있다면 최신 버전으로 업데이트하세요.
Git 설치 (GitHub 저장 시 필요)
git-scm.com에서 무료 다운로드. GitHub에 코드를 저장하고 싶다면 필수!
설치 & VS Code 연동
총 3가지 설치 과정이 있어요. 순서대로 따라 하면 10분이면 완료!
🖥️ Claude Code CLI 전역 설치
터미널(Windows: 명령 프롬프트 또는 PowerShell)을 열고 아래 명령어를 입력하세요.
npm install -g @anthropic-ai/claude-code
# 설치 확인
claude --version🔐 Claude 계정 로그인
설치 후 처음 실행하면 브라우저가 자동으로 열리며 로그인 페이지로 이동합니다.
claude
# 처음 실행하면 자동으로 브라우저가 열리며
# claude.ai 로그인 페이지로 이동합니다.
# Pro 계정으로 로그인하면 OK!🧩 VS Code 확장 프로그램 설치
VS Code에서 확장 탭을 열고 “Claude Code”를 검색 후 Anthropic이 만든 공식 버전을 설치하세요.
VS Code 확장 탭 여는 단축키:
Windows: Ctrl + Shift + X
Mac: Cmd + Shift + X
# 검색창에 입력:
Claude Code
# ⚠️ 발행자가 'Anthropic'인지 꼭 확인!설치 완료 후 VS Code 왼쪽 사이드바에 ⚡ 아이콘(스파크)이 나타납니다. 클릭하면 Claude Code 패널이 열립니다!
claude 입력 → “Hi” 타이핑 → Claude가 응답하면 완벽하게 설치된 거예요!주요 기능 총정리
코드 작성 & 수정
한국어로 원하는 기능을 설명하면 Claude가 직접 파일을 열어 코드를 작성·수정합니다.
인라인 Diff 뷰
변경 전/후 코드를 나란히 비교해서 보여줍니다. 승인(Accept)하거나 거절(Reject) 가능!
자동 디버깅
“에러 고쳐줘”라고 하면 오류를 분석하고 수정합니다. 오류 메시지를 그대로 붙여넣어도 OK!
프로젝트 전체 이해
CLAUDE.md 파일 자동 생성으로 프로젝트 구조를 파악하고 일관된 코딩 스타일을 유지합니다.
체크포인트 & 되돌리기
매 작업마다 자동 저장됩니다. 실수해도 Esc 2번 누르거나 /rewind로 이전 상태로 복구!
파일 @ 멘션
@파일명을 입력하면 해당 파일을 Claude에게 바로 전달. 특정 코드를 드래그해서 질문도 가능!
터미널 명령 실행
“npm install 실행해줘” 같은 명령도 Claude가 대신 실행해 줍니다. 서버 시작도 가능!
자동 문서화
코드에 주석 달기, README 파일 작성, 기술 문서 생성을 자동으로 해줍니다.
바이브코딩 실제 사용법
실제로 웹사이트를 만들어보는 시나리오로 배워봐요!
📁 프로젝트 폴더 열기
VS Code에서 File → Open Folder로 작업할 폴더를 엽니다. 또는 터미널에서:
mkdir my-website
cd my-website
claude💬 한국어로 요청하기
Claude Code 채팅창이나 터미널에 원하는 것을 자연스럽게 설명하세요.
"간단한 포트폴리오 웹사이트 만들어줘.
메인 페이지에 내 소개, 프로젝트 목록,
연락처 섹션 포함. 색상은 파란색 계열로.""버튼 클릭하면 팝업 뜨게 해줘"
"반응형으로 만들어줘 (모바일 지원)"
"네비게이션 메뉴 스크롤 고정시켜줘"
"이 에러 메시지 고쳐줘: [에러 붙여넣기]"🔍 Diff 보고 승인하기
Claude가 코드를 수정하면 VS Code에서 변경 전/후를 비교해서 보여줍니다. 괜찮으면 Accept, 마음에 안 들면 거절!
🔄 반복 수정 (이터레이션)
한 번에 완벽한 결과를 기대하지 마세요! 계속 대화하면서 다듬어 가는 게 바이브코딩의 핵심입니다.
"글씨 크기 좀 더 크게 해줘"
"여기 여백이 너무 좁아 보여. 늘려줘"
"배경색 흰색에서 연한 회색으로 바꿔줘"
"@index.html 파일에서 제목만 수정해줘"GitHub에 코드 저장하기
GitHub는 코드를 저장하는 클라우드 서비스예요. 백업 + 버전 관리 + 배포 연동까지 가능합니다!
코드 작성
저장 (백업)
인터넷 공개
GitHub 계정 & 저장소(Repository) 생성
github.com에서 무료 가입 후 New repository 클릭 → 이름 입력 → Create repository
VS Code 터미널에서 Git 연결
# 처음 한 번만 설정 (이름, 이메일)
git config --global user.name "홍길동"
git config --global user.email "test@email.com"
git init
git remote add origin https://github.com/아이디/저장소명.git코드 저장 (Push) — Claude에게 부탁해도 OK!
git add .
git commit -m "첫 번째 포트폴리오 페이지 완성"
git push origin main인터넷에 배포하기 (Vercel / Netlify)
GitHub에 올린 코드를 인터넷에서 누구나 볼 수 있게 공개하는 과정입니다. 무료!
Vercel 배포 (React 추천)
vercel.com → GitHub 로그인 → Import Repository → Deploy 클릭!
끝! 몇 분 후 프로젝트명.vercel.app 주소로 접근 가능.
Netlify 배포 (HTML 추천)
netlify.com → Add new site → Import from Git → GitHub 연결 → Deploy
끝! 프로젝트명.netlify.app 주소 생성.
🚀 자동 배포의 마법
Vercel/Netlify와 GitHub를 연결하면, 앞으로 코드를 수정하고 GitHub에 push할 때마다 자동으로 웹사이트가 업데이트됩니다!
Claude Code → 코드 수정 → git push → 🎉 웹사이트 자동 업데이트
단축키 & 유용한 명령어
VS Code에서 Claude Code를 더 빠르게 쓰는 방법!
🧙 Claude Code 특수 명령어
/rewind # 이전 상태로 되돌리기 (체크포인트)
/model # 사용 중인 AI 모델 확인 & 변경
/help # 도움말 보기
/clear # 대화 초기화
# 파일 멘션 방법
@index.html 파일에서 제목 부분 수정해줘
@src/App.jsx 코드 설명해줘🎯 초보자를 위한 황금 프롬프트 패턴
# ❌ 너무 막연한 요청
"웹사이트 만들어줘"
# ✅ 구체적인 요청
"HTML과 CSS만 사용해서 AI닷 회사 소개 1페이지 웹사이트 만들어줘.
헤더에 로고와 메뉴, 중앙에 타이틀과 설명글, 하단에 연락처.
색상은 파란색+흰색, 폰트는 깔끔하게."
# ✅ 에러 해결 요청
"이 에러가 뜨는데 고쳐줘:
TypeError: Cannot read property 'map' of undefined"
# ✅ 기능 추가 요청
"현재 @App.jsx 파일에서 버튼 클릭 시
'저장되었습니다' 알림창 뜨게 해줘"