클로드 코드로 바이브 코딩하는 3가지 방법 - 뭘 써야 할까?

Claude.ai나 ChatGPT에서 "이 코드 설명해줘", "이 기능 추가해줘", "버그 찾아줘" 해본 적 있을 거예요. 근데 실제로 파일 수정하고, 커밋하고, 푸시까지 하려면? 복붙 지옥이 시작되죠.

그래서 나온 게 Claude Code입니다. 근데 이제 3가지인…

• Claude.ai 웹 + GitHub 연동
• Claude Code CLI (터미널)
• Claude Code VSCode 익스텐션

처음엔 저도 헷갈렸는데요. 다 똑같은 거 아닌가? 싶었는데, 써보니까 완전히 다른 도구였습니다.

결론부터 말하면:

• 웹 = 코드 읽고 리뷰하는 용도
• CLI/VSCode = 실제로 코딩하는 용도

각각 뭐가 다른지, 그리고 제가 실제로 어떻게 조합해서 쓰는지 공유합니다.

3가지 도구, 뭐가 다른가?

1. Claude.ai 웹 + GitHub 연동

브라우저에서 GitHub 레포 연결해서 쓰는 방식이에요.

• 코드 읽기 가능
• PR 생성 가능
• 파일 직접 수정? 불가능
• 커밋/푸시? 불가능

쓸 때: 코드 리뷰 요청, 레포 구조 파악, "이 코드 뭐하는 거야?" 질문

2. Claude Code CLI

터미널에서 claude 명령어로 실행해요.

• 파일 직접 수정 가능
• git commit/push 가능
• 터미널 명령어 실행 가능
• Chrome 브라우저 연동 가능 (-chrome 플래그)

쓸 때: 서버 작업, 브라우저 자동화, VSCode 안 쓸 때

3. Claude Code VSCode 확장

VSCode 안에서 사이드바로 실행해요.

• 파일 직접 수정 가능
• git commit/push 가능
• 코드 선택해서 바로 질문 가능
• 파일 링크 클릭하면 바로 이동

쓸 때: 일반적인 개발 작업 (저는 이걸 제일 많이 써요)

한눈에 비교

제 실제 워크플로우

평소 개발: VSCode 익스텐션

• 코드 보면서 대화하기 편해요
• 파일 링크 클릭하면 바로 점프
• 선택 영역 질문이 진짜 편함

브라우저 테스트 필요할 때: CLI

• 웹앱 만들고 실제로 테스트하라고 시킬 때
• 콘솔 로그 읽어서 디버깅할 때

모바일에서 급하게 볼 때: 웹

• 코드 리뷰만 하면 될 때
• 갑자기 아이디어가 떠올랐을 때
• 어차피 수정은 못 하니까 리뷰/분석용

시작하려면?

1. VSCode 쓰면 → Claude Code 익스텐션 설치 (제일 추천)
2. 터미널 좋아하면 → npm install -g @anthropic-ai/claude-code
3. 일단 가볍게 → claude.ai에서 GitHub 연동

개인적으로는 VSCode 익스텐션으로 시작하는 걸 추천합니다. 진입장벽이 제일 낮고, 바이브 코딩 느낌 바로 체감돼요.

마무리

저는 tudy.club도 VSCode 익스텐션으로 만들었어요. 예전에 Sanity 쓸 때는 스키마 짜느라 몇 주씩 걸렸는데, 클로드 코드랑은 주말 하루면 돌아가는 블로그가 탄생합니다.

도구 자체는 간단해요. 중요한 건 복붙 없이 코딩한다는 경험이에요. 한 번 써보면 예전으로 못 돌아갑니다.