라핀의 Claude Code 설치 완벽 가이드 | VS Code + GitHub 연동 필수 세팅
Claude Code로 개발을 시작하려면 VS Code 설치와 GitHub 연동이 필수입니다. 이 두 가지를 처음부터 제대로 세팅하지 않으면 작업물 백업이 안 되고 나중에 낭패를 봅니다. 라핀이 처음 시작하는 분들을 위해 VS Code 설치부터 Claude Code 연동, GitHub 백업 설정까지 전 과정을 정리합니다.
VS Code란 무엇인가?
**VS Code(Visual Studio Code)**는 Microsoft가 만든 무료 코드 편집기입니다. Claude Code, Cursor, Antigravity 등 대부분의 AI 코딩 도구가 VS Code 위에서 작동합니다. 폴더 단위로 하나의 프로젝트를 관리하는 방식입니다.
VS Code 설치 방법
- 구글에서 "VS Code" 검색 → 공식 사이트 접속
- Windows: 메인 화면 다운로드 버튼 클릭
- Mac/Linux: 우측 상단 Download → 해당 OS 선택
- 설치 파일 실행 → "동의합니다" 선택 → 다음 → 설치 완료
필수 익스텐션 4가지 설치
좌측 Extensions 아이콘 클릭 후 아래 4가지를 순서대로 설치합니다.
| 익스텐션 이름 | 용도 |
|---|---|
| Claude Code 4 VS Code | AI 코딩 에이전트 (핵심) |
| Better Comments | 주석을 색상으로 구분해 코드 가독성 향상 |
| Indent Rainbow | 들여쓰기를 색상으로 구분해 코드 구조 파악 용이 |
| VS Code Icons | 파일 종류별 아이콘 표시로 구별 편리 |
Claude Code 로그인 방법
- 우측 상단의 Claude Code 로고(별 모양 아이콘) 클릭
- 첫 번째 "Claude AI Subscription" 선택 (반드시 첫 번째)
- 두 번째는 API 키 방식 → 별도 결제 필요, 선택 금지
- 브라우저에서 Claude 로그인 후 승인
로그인 후 오류가 뜨는 경우:
- 우측 상단 오류 메시지의 주소(URL) 복사
- 브라우저 주소창에 붙여넣기
- 운영체제에 맞는 파일 다운로드 후 설치
- 설치 시 "Run on Launch with Bash" 선택 → Finish
- VS Code 종료 후 재실행
- 우측 상단 오류 사라짐 확인
GitHub 연동 방법 (백업 필수)
GitHub는 코드를 클라우드에 저장하는 서비스입니다. Claude Code가 파일을 통째로 바꿀 때 이전 버전으로 되돌릴 수 있는 유일한 안전망입니다.
Step 1: GitHub 가입
- github.com 접속 → Sign Up 클릭
- Google 계정으로 가입 (가장 빠름)
- 이름 입력 → Create 버튼 완료
Step 2: Repository 생성
- 우측 상단 "+" → New Repository
- 이름 설정 (영문 권장)
- Visibility: Private 선택 (코드 비공개 목적이면 반드시 Private)
- Create Repository 클릭
- 생성된 Repository URL 복사
Step 3: VS Code에서 연동
- VS Code에서 작업할 폴더 열기 (File → Open Folder)
- Claude Code 창에서 요청: "GitHub 연동해줘. 레포 주소: [복사한 URL], 이메일: [가입 이메일]"
- Claude가 연동 완료 후 커밋·푸시 승인 요청 시 승인 클릭
- GitHub 로그인 팝업 → Sign in with your Browser → Authorize
연동 확인:
- 좌측 소스컨트롤 버튼에 숫자 표시 → 변경 파일 개수
- GitHub Repository 새로고침 →
.claude폴더 생성 확인
앞으로의 저장 방법
기존: Ctrl+S로 로컬 저장
앞으로: Claude Code에 "커밋하고 푸시해줘" 요청
- 변경사항이 GitHub에 클라우드 백업
- 언제든 이전 버전으로 롤백 가능
- 다른 컴퓨터에서도 동일한 코드 접근 가능
새 프로젝트를 시작할 때마다 GitHub Repository를 새로 만들고 연동하는 것을 습관화하세요.
자주 묻는 질문 (FAQ)
Q. Claude Code 로그인 시 왜 첫 번째 옵션(Claude AI Subscription)을 선택해야 하나요?
A. 두 번째 옵션은 Anthropic API 키를 직접 입력하는 방식으로, Claude Pro 구독과 별개의 API 요금이 청구됩니다. Claude Pro 구독자는 반드시 첫 번째 옵션을 선택해야 구독 혜택이 적용됩니다.
Q. GitHub Repository를 Public으로 설정하면 어떻게 되나요?
A. 내 코드가 인터넷에 공개됩니다. API 키, 비밀번호, 개인정보가 포함된 경우 절대 Public으로 설정하면 안 됩니다. 특별한 이유가 없다면 항상 Private을 선택하세요.
Q. GitHub 연동 없이 그냥 사용하면 안 되나요?
A. 가능하지만 위험합니다. AI가 파일을 통째로 수정하거나 실수로 삭제할 경우 복구할 방법이 없습니다. 처음부터 GitHub를 연동해두면 언제든 이전 버전으로 되돌릴 수 있습니다.
Q. Better Comments, Indent Rainbow는 꼭 설치해야 하나요?
A. 필수는 아니지만 강력 추천합니다. 코드를 직접 볼 일이 거의 없더라도 문제가 생겼을 때 코드를 읽어야 하는 경우가 있는데, 이 익스텐션들이 가독성을 크게 높여줍니다.
정리
Claude Code 시작 세팅 체크리스트:
- VS Code 설치
- Claude Code 4 VS Code 익스텐션 설치
- Better Comments, Indent Rainbow, VS Code Icons 설치
- Claude Code 로그인 (첫 번째 옵션 선택)
- GitHub 가입 + Repository 생성 (Private)
- VS Code ↔ GitHub 연동 완료
- 저장 방법 변경: Ctrl+S → "커밋하고 푸시해줘"
라핀의 다음 시리즈에서는 이렇게 설정된 환경에서 결제까지 되는 쇼핑몰을 Claude Code로 바이브코딩으로 만들어갑니다. Antigravity로 따라하셔도 동일하게 진행 가능합니다.
