VS Code 통합

읽는 시간: 8분 | 난이도: 초급자

VS Code 확장 프로그램은 IDE에 직접 통합된 Claude Code의 네이티브 그래픽 인터페이스를 제공합니다. 이 방식은 VS Code에서 Claude Code를 사용하는 권장 방법입니다.

확장 프로그램을 통해 변경 사항을 수락하기 전에 Claude의 계획을 검토 및 편집하고, 편집 시 자동 수락 모드를 활성화하고, 선택 영역에서 특정 라인 범위와 함께 @-멘션으로 파일을 참조하고, 대화 기록에 접근하고, 여러 대화를 별도 탭 또는 창에서 열 수 있습니다.

사전 요구 사항

VS Code 1.98.0 이상
Anthropic 계정 (확장 프로그램을 처음 열 때 로그인)

확장 프로그램에는 고급 기능을 위해 VS Code 통합 터미널에서 접근할 수 있는 CLI(커맨드라인 인터페이스)가 포함되어 있습니다.

확장 프로그램 설치

방법 1: 직접 링크로 설치

다음 링크를 클릭하여 직접 설치합니다:

방법 2: Extensions 뷰에서 설치

Cmd+Shift+X (Mac) 또는 Ctrl+Shift+X (Windows/Linux)로 Extensions 뷰 열기
"Claude Code" 검색
Install 클릭

설치 후 확장 프로그램이 나타나지 않으면 VS Code를 재시작하거나 Command Palette에서 "Developer: Reload Window"를 실행합니다.

시작하기

1단계: Claude Code 패널 열기

VS Code 전반에 걸쳐 Spark 아이콘()이 Claude Code를 나타냅니다.

가장 빠른 방법: 편집기 오른쪽 상단의 Editor Toolbar에서 Spark 아이콘 클릭 (파일이 열려 있을 때만 나타남)

다른 방법:

Command Palette: Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux) → "Claude Code" 입력 → "Open in New Tab" 등 옵션 선택
Status Bar: 창 오른쪽 하단의 Claude Code 클릭 (파일이 없어도 작동)

처음 패널을 열면 Learn Claude Code 체크리스트가 나타납니다. Show me를 클릭하거나 X로 닫습니다.

2단계: 프롬프트 보내기

코드나 파일에 대한 도움을 요청합니다 - 작동 방식 설명, 디버깅, 변경 수행 등 다양하게 활용할 수 있습니다.

Claude는 선택한 텍스트를 자동으로 확인합니다. Option+K (Mac) / Alt+K (Windows/Linux)를 눌러 프롬프트에 @-멘션 참조(예: @file.ts#5-10)를 삽입합니다.

3단계: 변경 사항 검토

Claude가 파일을 편집하려 할 때 원본과 제안된 변경 사항의 나란히 비교를 보여준 다음 허가를 요청합니다. 수락, 거부, 또는 Claude에게 다른 방향을 지시할 수 있습니다.

프롬프트 박스 사용하기

프롬프트 박스는 여러 기능을 지원합니다:

권한 모드:

일반 모드: 각 작업 전 Claude가 허가 요청
Plan 모드: Claude가 할 일을 설명하고 변경 전 승인 대기
자동 수락 모드: Claude가 허가 없이 편집

프롬프트 박스 하단의 모드 표시기를 클릭하여 모드를 전환합니다. VS Code 설정의 claudeCode.initialPermissionMode에서 기본값을 설정할 수 있습니다.

명령 메뉴: /를 클릭하거나 입력하여 명령 메뉴를 엽니다. 파일 첨부, 모델 전환, 확장 사고 토글, 플랜 사용량 보기(/usage) 등의 옵션이 있습니다.

다중 라인 입력: Shift+Enter로 전송하지 않고 새 줄 추가

파일 및 폴더 참조하기

@-멘션을 사용하여 특정 파일이나 폴더에 대한 컨텍스트를 Claude에 제공합니다. Claude Code는 퍼지 매칭을 지원합니다:

> @auth의 로직 설명해줘 (auth.js, AuthService.ts 등에 퍼지 매칭)
> @src/components/ 안에 뭐가 있어? (폴더는 후행 슬래시 포함)

편집기에서 텍스트를 선택하면 Claude가 강조된 코드를 자동으로 확인합니다. Option+K (Mac) / Alt+K (Windows/Linux)를 눌러 파일 경로와 라인 번호가 포함된 @-멘션을 삽입합니다(예: @app.ts#5-10).

과거 대화 재개하기

Claude Code 패널 상단의 드롭다운을 클릭하여 대화 기록에 접근합니다. 키워드로 검색하거나 시간대별(오늘, 어제, 지난 7일 등)로 탐색합니다.

워크플로우 사용자 정의

Claude 패널 위치 선택하기

Claude 패널을 끌어서 VS Code 어디에나 재배치할 수 있습니다:

보조 사이드바: 창 오른쪽. 코딩하는 동안 Claude가 보임.
기본 사이드바: 탐색기, 검색 등의 아이콘이 있는 왼쪽 사이드바.
편집기 영역: 파일과 함께 탭으로 열기. 사이드 작업에 유용.

여러 대화 실행하기

Command Palette에서 Open in New Tab 또는 Open in New Window를 사용하여 추가 대화를 시작합니다. 각 대화는 별도의 기록과 컨텍스트를 유지합니다.

탭 사용 시 Spark 아이콘의 작은 색점이 상태를 표시합니다: 파란색은 권한 요청 대기 중, 주황색은 탭이 숨겨진 상태에서 Claude가 완료됨을 의미합니다.

터미널 모드로 전환하기

기본적으로 확장 프로그램은 그래픽 채팅 패널을 엽니다. CLI 스타일 인터페이스를 선호하는 경우 Use Terminal 설정을 열고 체크박스를 선택합니다.

플러그인 관리하기

VS Code 확장 프로그램에는 플러그인을 설치하고 관리하는 그래픽 인터페이스가 포함되어 있습니다. 프롬프트 박스에 /plugins를 입력하여 Manage plugins 인터페이스를 엽니다.

플러그인 설치하기

플러그인 대화상자는 두 개의 탭을 표시합니다: Plugins와 Marketplaces.

Plugins 탭에서:

설치된 플러그인: 활성화/비활성화 토글 스위치와 함께 상단에 표시
사용 가능한 플러그인: 구성된 마켓플레이스에서 아래에 표시
이름 또는 설명으로 플러그인 필터링
사용 가능한 플러그인에서 Install 클릭

플러그인 설치 시 설치 스코프를 선택합니다:

Install for you: 모든 프로젝트에서 사용 가능 (user 스코프)
Install for this project: 프로젝트 협업자와 공유 (project 스코프)
Install locally: 이 저장소에서만 본인만 사용 (local 스코프)

마켓플레이스 관리하기

Marketplaces 탭으로 전환하여 플러그인 소스를 추가하거나 제거합니다:

GitHub 저장소, URL, 로컬 경로를 입력하여 새 마켓플레이스 추가
새로 고침 아이콘을 클릭하여 마켓플레이스 플러그인 목록 업데이트
휴지통 아이콘을 클릭하여 마켓플레이스 제거

변경 후 배너가 업데이트를 적용하기 위해 Claude Code를 재시작하도록 프롬프트합니다.

VS Code 명령어 및 단축키

Command Palette(Cmd+Shift+P on Mac 또는 Ctrl+Shift+P on Windows/Linux)를 열고 "Claude Code"를 입력하면 사용 가능한 모든 명령어를 볼 수 있습니다.

명령어	단축키	설명
Focus Input	`Cmd+Esc` (Mac) / `Ctrl+Esc` (Win/Linux)	편집기와 Claude 간 포커스 전환
Open in Side Bar	-	왼쪽 사이드바에서 Claude 열기
Open in Terminal	-	터미널 모드로 Claude 열기
Open in New Tab	`Cmd+Shift+Esc` (Mac) / `Ctrl+Shift+Esc` (Win/Linux)	편집기 탭으로 새 대화 열기
Open in New Window	-	별도 창에서 새 대화 열기
New Conversation	`Cmd+N` (Mac) / `Ctrl+N` (Win/Linux)	새 대화 시작 (Claude가 포커스된 상태 필요)
Insert @-Mention Reference	`Option+K` (Mac) / `Alt+K` (Win/Linux)	현재 파일 및 선택 영역에 대한 참조 삽입
Show Logs	-	확장 프로그램 디버그 로그 보기
Logout	-	Anthropic 계정 로그아웃

설정 구성하기

확장 프로그램에는 두 가지 유형의 설정이 있습니다:

VS Code의 확장 프로그램 설정: Cmd+, (Mac) 또는 Ctrl+, (Win/Linux)를 누른 다음 Extensions → Claude Code로 이동
~/.claude/settings.json의 Claude Code 설정: 확장 프로그램과 CLI 간에 공유

주요 확장 프로그램 설정

설정	기본값	설명
`selectedModel`	`default`	새 대화의 모델. `/model`로 세션별 변경 가능
`useTerminal`	`false`	그래픽 패널 대신 터미널 모드에서 Claude 시작
`initialPermissionMode`	`default`	승인 프롬프트 제어: `default`, `plan`, `acceptEdits`, `bypassPermissions`
`preferredLocation`	`panel`	Claude가 열리는 위치: `sidebar` (오른쪽) 또는 `panel` (새 탭)
`autosave`	`true`	Claude가 파일을 읽거나 쓰기 전에 자동 저장
`useCtrlEnterToSend`	`false`	Enter 대신 Ctrl/Cmd+Enter를 사용하여 프롬프트 전송
`respectGitIgnore`	`true`	파일 검색에서 .gitignore 패턴 제외

VS Code 확장 프로그램 vs. Claude Code CLI

Claude Code는 VS Code 확장 프로그램(그래픽 패널)과 CLI(터미널의 커맨드라인 인터페이스) 모두로 사용할 수 있습니다.

기능	CLI	VS Code 확장 프로그램
명령어 및 스킬	전체	일부 (사용 가능한 것은 `/`로 확인)
MCP 서버 설정	가능	불가 (CLI로 설정, 확장 프로그램에서 사용)
체크포인트	가능	가능
`!` bash 단축키	가능	불가
탭 완성	가능	불가

체크포인트로 되돌리기

VS Code 확장 프로그램은 체크포인트를 지원하여 Claude의 파일 편집을 추적하고 이전 상태로 되돌릴 수 있습니다. 메시지 위에 마우스를 올려 되돌리기 버튼을 표시한 다음 세 가지 옵션 중 선택합니다:

Fork conversation from here: 모든 코드 변경 사항을 유지하면서 이 메시지부터 새 대화 브랜치 시작
Rewind code to here: 대화 기록을 유지하면서 이 시점으로 파일 변경 사항 되돌리기
Fork conversation and rewind code: 새 대화 브랜치 시작 및 이 시점으로 파일 변경 사항 되돌리기

Chrome과 함께 브라우저 작업 자동화

VS Code를 떠나지 않고 Claude를 Chrome 브라우저에 연결하여 웹 앱을 테스트하고, 콘솔 로그로 디버깅하고, 브라우저 워크플로우를 자동화합니다. 이 기능은 Chrome 확장 프로그램 버전 1.0.36 이상이 필요합니다.

프롬프트 박스에 @browser를 입력한 다음 Claude가 할 작업을 지정합니다:

@browser localhost:3000으로 이동하고 콘솔에서 오류 확인해줘

타사 공급자 사용하기

기본적으로 Claude Code는 Anthropic의 API에 직접 연결됩니다. 조직이 Amazon Bedrock, Google Vertex AI, 또는 Microsoft Foundry를 사용하는 경우 확장 프로그램을 해당 공급자를 사용하도록 설정합니다:

1단계: Disable Login Prompt 설정을 열고 체크박스를 선택합니다.

2단계: 공급자에 대한 설정 가이드를 따릅니다:

일반적인 문제 해결

확장 프로그램이 설치되지 않는 경우

VS Code 버전이 1.98.0 이상인지 확인
VS Code에 확장 프로그램을 설치할 권한이 있는지 확인
VS Code 마켓플레이스에서 직접 설치 시도

Spark 아이콘이 보이지 않는 경우

Spark 아이콘은 파일이 열려 있을 때 Editor Toolbar(편집기 오른쪽 상단)에 나타납니다. 보이지 않는 경우:

파일 열기: 아이콘에는 파일이 열려 있어야 합니다. 폴더만 열어서는 충분하지 않습니다.
VS Code 버전 확인: 1.98.0 이상 필요 (도움말 → 정보)
VS Code 재시작: Command Palette에서 "Developer: Reload Window" 실행
충돌하는 확장 프로그램 비활성화: 다른 AI 확장 프로그램(Cline, Continue 등) 일시적으로 비활성화

대안으로 Status Bar(오른쪽 하단)의 "Claude Code"를 클릭합니다.

Claude Code가 응답하지 않는 경우

인터넷 연결 확인
새 대화 시작해 보기
터미널에서 claude를 실행하여 더 자세한 오류 메시지 확인

확장 프로그램 제거하기

Extensions 뷰 열기 (Cmd+Shift+X on Mac 또는 Ctrl+Shift+X on Windows/Linux)
"Claude Code" 검색
Uninstall 클릭

확장 프로그램 데이터도 완전히 제거하려면:

rm -rf ~/.vscode/globalStorage/anthropic.claude-code

다음 단계

일반 워크플로우 탐색으로 Claude Code를 최대한 활용하기
MCP 서버 설정으로 Claude의 기능을 외부 도구로 확장하기
Claude Code 설정 구성으로 허용된 명령어, 훅 등 사용자 정의하기
플러그인 탐색으로 VS Code 통합을 더욱 확장하기