VS Code에서 Claude Code 사용하는 완벽 가이드: CLI vs 확장 프로그램 차이점 총정리

안녕하세요

오늘은 우리가 자주 쓰는 IDE인 VS Code에서 Claude Code(클로드 코드)를 실행시켜서 바이브 코딩을 하는 방법에 대해서 알아보도록 하겠습니다.

＊ 실습에 앞서, VS Code에서 Claude Code를 수행하기 위해서는 Claude Code Pro 이상 요금제 이상 사용하셔야 합니다. 

 

이 글의 진행 순서는 다음과 같습니다.

1. VS Code에 Claude Code 설치 및 실행
2. VS Code에서 실행하는 Claude Code Extension 와 Claude Code CLI 차이점
3. 실제 사용 케이스(Claude Code CLI vs VS Code)

 

 

 

---

1. VS Code에 Claude Code 설치 및 실행

1) Claude Code Extension 설치 및 계정 연동

1-1) VS Code 실행 후 Extensions 실행(단축키 : Ctrl + Shift + X)하여 "Claude Code For VS Code" 를 설치합니다.

 

 

 

1-2) New Text File로 File Editor 창을 열면 상단에 Claude Code Open 아이콘이 나옵니다. 해당 아이콘을 클릭합니다.

 

 

 

1-3) 그러면 다음과 같이 Claude Code Tab 이 Open되면서 Claude Code 인증이 필요하다고 나옵니다. "Claude.ai Subscription" 버튼을 클릭해줍니다.

 

 

 

1-4) Subscription 버튼을 클릭해주면 웹 브라우저에서 Claude Code 연동 창이 오픈됩니다. Claude Code 계정과 연동을 "승인" 해줍니다(이때 Claude Code Pro 이상 계정 구독 중이어야 합니다). 그러면 VS Code의 Claude Code가 정상적으로 실행됩니다. 

 

 

2) 연동 에러 발생 시

2-1) 만약에 다음과 같은 에러가 발생한다면, Claude Code Extension을 삭제하고 재설치 후 VS Code를 재실행 해보고, 그래도 안되면 Claude Code Extension 삭제 & Claude Code 인증정보를 삭제 후 재 인증을 해보면 됩니다

 

에러 내용(Claude Code 채팅 창) : 

SyntaxError: Unexpected token 'C', "Claude con"... is not valid JSON
View output logs Trobuleshooting resources

 

★ 인증정보 삭제 방법 : 2025.12.23 - [IT/AI] - Claude Code(클로드 코드) 인증 정보 삭제하기(초기화하기

 

 

3) Claude Code 정상 실행 시

3-1) Claude Code가 정상 실행되면 질의를 통해 프로젝트를 생성합니다. 다음과 같이 명령을 해보겠습니다 (질의는 한글로 작성하셔도 됩니다)

create vue-project with vue3 in test directory

 

 

 

3-2) 그러면 우측의 Claude Code 프로세스를 통해서 좌측에 프로젝트가 생성됩니다.

프로젝트 명을 vue-project로 하려고 했는데 test로 생성되었네요;;

 

 

 

3-3) 프로젝트 명을 변경해주겠습니다. 다음과 같이 명령을 해 보겠습니다

rename project name test to vue-project

 

 

 

3-4) Claude Code가 프로젝트 이름이 정상적으로 변경하는 걸 확인할 수 있습니다.

 

 

 

3-5) Claude Code에 나온대로 명령어를 실행해 보겠습니다. Git bash 등 WSL를 통해 해당 디렉토리에서 명령어를 실행합니다.

$ npm run dev

 

 

 

3-6) 실행이 완료되면 Claude Code 창에 있는 URL(http://localhost:5173) 을 클릭하면 vue3-project 실행 결과가 브라우저로 오픈됩니다.

 

 

 

---

 

2. VS Code에서 실행하는 Claude Code Extension 와 Claude Code CLI 차이점

그럼 VS Code에서 실행하는 Claude Code와 CLI로 수행하는 Claude Code는 다른 걸까요? 두개의 차이점을 간략히 정리해 보았습니다.

2-1) 간략 차이점 정리(표)

특징	VS Code Extension	CLI (npm)
설치	VS Code 마켓플레이스	npm install -g
실행 위치	VS Code 내부	터미널
인터페이스	그래픽 기반	텍스트 기반
리소스 사용	상대적으로 무거움	매우 가벼움
학습 곡선	쉬움 (GUI)	중간 (명령어 익혀야 함)
diff 뷰	IDE 내 시각화	터미널
파일 참조	@-mention	경로 입력
독립 실행	VS Code 필요	가능
고급 기능	일부 제한	모두 지원
rewind 기능	개발 중	완전 지원

 

2-2) 기능 차이 (2025년 기준)

CLI에만 있는 기능 :

• /rewind (완전한 rewind)
• /undo
• /retry
• 백그라운드 작업 완벽 제어
• Checkpoint 완전 지원

VS Code Extension 장점 :

• 실시간 diff 패널
• @-mention 파일 참조
• 드래그 앤 드롭
• 여러 대화 탭 동시 실행
• Plan 미리보기 및 수정

공통 기능:

• 동일한 AI 모델 (Sonnet 4.5, Opus 4)
• MCP 서버 연동
• CLAUDE.md 사용
• Slash 명령어 대부분

 

 

---

3. 실제 사용 케이스(Claude Code CLI vs VS Code)

Claude Code CLI를 사용할 지, VS Code의 Claude Code(Extension)를 사용할지는 상황에 맞게 선택하시면 됩니다.

• CLI 선택해야 하는 경우 : 
  • 터미널 작업에 익숙함, 원격 서버에서 개발, VS Code 없이 작업, 가벼운 환경 선호, 컨텍스트 완벽 제어 필요, 키보드만으로 작업
•  VS Code의 Claude Code(Extension) 선택해야 하는 경우 :
  • VS Code를 주로 사용, 시각적 피드백 선호, GUI가 편함, 초보자, 실시간 diff를 IDE에서 보고 싶음, 마우스 사용 편함

 

 

---

 

4. 마치며

지금까지 VS Code에서 클로드 코드를 사용하는 방법에 대해 알아보았습니다. 

 

개발자는 이제 코드를 직접 한 줄 한 줄 작성하는 '저자(Author)'에서, AI가 작성한 코드를 검토하고 방향을 지시하는 '감독(Director)'으로 역할이 변화하고 있습니다. 그 변화의 물결에 가장 앞서 있는 도구가 바로 클로드 코드입니다.

 

월 20달러의 투자로 여러분의 옆자리에 24시간 지치지 않는 천재적인 동료 개발자를 앉혀두는 셈입니다. 망설이지 말고 지금 바로 설치해서 경험해 보세요. 여러분의 퇴근 시간이 빨라지고, 코드의 퀄리티가 달라질 것입니다.

 

 

 

참고

https://code.claude.com/docs/en/vs-code

Use Claude Code in VS Code - Claude Code Docs