[Claude] Claude Code VS Code 연동 - 개발환경 세팅 가이드

터미널에서만 사용하던 Claude Code, 이제 VS Code에서도 직접 사용할 수 있습니다.

에디터 안에서 코드 작성, 리팩토링, 디버깅을 AI와 협업하세요.

이번 가이드에서는 Claude Code VS Code 확장 설치부터 실전 활용까지,

완벽한 개발환경 세팅 방법을 소개합니다.

Claude Code VS Code 확장이란?

Claude Code VS Code 확장은 Visual Studio Code에서 Claude AI를 네이티브로 사용할 수 있게 해주는 공식 확장 프로그램입니다.

주요 특징

1. VS Code 네이티브 통합

에디터 내에서 Claude와 직접 대화
사이드바 또는 패널에서 작동
기존 워크플로우를 방해하지 않음

2. 비주얼 인터페이스

코드 변경사항 Diff 뷰 제공
인라인 코드 제안
실시간 시각적 피드백

3. 컨텍스트 자동 공유

선택한 코드 자동 인식
파일 참조 (@파일명)
터미널 출력 참조 가능

4. Git 통합

커밋 메시지 자동 생성
PR 설명 자동 작성
브랜치 관리

CLI vs VS Code 확장 비교

기능	CLI	VS Code 확장
사용성	터미널 전문가용	초보자도 쉽게 사용
인터페이스	텍스트 기반	비주얼 GUI
Diff 뷰	터미널 텍스트	네이티브 VS Code 뷰어
리소스	가벼움	조금 더 무거움
명령어 지원	모든 명령어	주요 명령어 (`/`)
탭 완성	지원	미지원
대화 이력	공유	공유

추천 사용 방법:

초보자 또는 비주얼 피드백 선호 → VS Code 확장
터미널 워크플로우 선호 → CLI
둘 다 함께 사용 → 최고의 생산성 (대화 이력 공유)

VS Code 확장 설치

시스템 요구사항

항목	요구사항
VS Code	버전 1.98.0 이상
계정	Claude Pro/Max/Teams/Enterprise 또는 API 키
OS	macOS 13.0+ / Windows 10+ / Linux
네트워크	인터넷 연결 필수

설치 방법

방법 1: VS Code 마켓플레이스 (권장)

VS Code 열기
Extensions 뷰 열기:
- Mac: Cmd + Shift + X
- Windows/Linux: Ctrl + Shift + X
검색창에 "Claude Code" 입력
Anthropic 개발사의 "Claude Code" 확장 선택
Install 버튼 클릭

방법 2: CLI 자동 설치

터미널에서 Claude Code CLI를 실행하면 자동으로 VS Code 확장도 설치됩니다:

claude

처음 실행 시 VS Code 확장이 자동으로 설치됩니다.

방법 3: 마켓플레이스 웹사이트

VS Code Marketplace에서 직접 다운로드할 수도 있습니다.

설치 확인

설치 후 VS Code를 재시작하거나 Command Palette에서:

Developer: Reload Window

실행하여 확장을 활성화합니다.

확장 확인:

VS Code 왼쪽 사이드바에 Claude 아이콘이 표시되어야 합니다
또는 Command Palette (Cmd/Ctrl + Shift + P)에서 "Claude"로 시작하는 명령어가 보여야 합니다

인증 및 로그인

첫 로그인

VS Code 왼쪽 사이드바에서 Claude 아이콘 클릭
"Sign In" 버튼 클릭
브라우저가 자동으로 열리며 로그인 화면 표시
다음 중 하나로 로그인:
- Claude Pro/Max/Teams/Enterprise (권장)
- Claude Console (API 크레딧)
- Amazon Bedrock / Google Vertex AI

로그인 완료 후 자격 증명이 저장되어 다시 로그인할 필요 없습니다.

API 키 사용 (대안)

환경 변수 또는 설정 파일로 API 키를 직접 설정할 수도 있습니다:

환경 변수:

export ANTHROPIC_API_KEY="sk-ant-..."

설정 파일 (~/.claude/config.json):

{
  "apiKey": "sk-ant-..."
}

우선 순위:
환경 변수 API 키 > 구독 계정 인증

로그인 상태 확인

Claude 패널에서 다음 명령어 입력:

/status

현재 사용 중인 인증 방법과 모델 정보를 확인할 수 있습니다.

기본 설정 (Settings)

설정 열기

방법 1: VS Code 설정

Cmd + , (Mac) 또는 Ctrl + , (Windows/Linux)
Extensions → Claude Code 선택

방법 2: Claude 명령어
Claude 패널에서 다음 입력:

/config

인터랙티브 설정 인터페이스가 열립니다.

주요 설정 항목

1. 모델 선택 (`selectedModel`)

{
  "selectedModel": "default"
}

옵션:

default - 최신 Sonnet (균형잡힌 성능)
opus - 최고 성능 (복잡한 작업)
sonnet - 빠른 응답 (일반 작업)
haiku - 초고속 (간단한 작업)

2. 권한 모드 (`initialPermissionMode`)

{
  "initialPermissionMode": "default"
}

옵션:

default - 변경 전 승인 요청 (권장)
acceptEdits - 파일 수정 자동 승인
plan - 계획만 수립, 실행하지 않음
bypassPermissions - 모든 승인 건너뛰기 (주의!)

3. 화면 위치 (`preferredLocation`)

{
  "preferredLocation": "sidebar"
}

옵션:

sidebar - 사이드바 (기본값)
panel - 하단 패널
editor - 에디터 탭

4. 자동 저장 (`autosave`)

{
  "autosave": true
}

파일을 읽거나 쓰기 전에 자동으로 저장합니다.

5. 메시지 전송 단축키 (`useCtrlEnterToSend`)

{
  "useCtrlEnterToSend": false
}

false - Enter로 전송, Shift+Enter로 줄바꿈
true - Ctrl/Cmd+Enter로 전송, Enter로 줄바꿈

6. .gitignore 존중 (`respectGitIgnore`)

{
  "respectGitIgnore": true
}

.gitignore에 포함된 파일을 컨텍스트에서 제외합니다.

프로젝트별 설정 (.claude/settings.json)

프로젝트 루트에 .claude/settings.json 생성:

mkdir -p .claude
touch .claude/settings.json

예시 설정:

{
  "permissions": {
    "defaultMode": "acceptEdits",
    "allow": [
      "Bash(npm run *)",
      "Read(.env)",
      "Edit(./src/**)"
    ],
    "deny": [
      "Bash(curl *)",
      "Edit(.env.production)"
    ]
  },
  "selectedModel": "opus"
}

설정 우선순위 (높음 → 낮음):

시스템 레벨 (Managed)
명령줄 인자
로컬 설정 (.claude/*.local.*)
프로젝트 설정 (.claude/settings.json)
유저 설정 (~/.claude/settings.json)

주요 기능 및 사용법

1. 채팅 패널

패널 열기:

사이드바의 Claude 아이콘 클릭
또는 Command Palette에서 "Claude: Open"

새 대화 시작:

Cmd + N (Mac) / Ctrl + N (Windows)
또는 패널 상단의 "+" 버튼

명령어 메뉴:
패널에서 /를 입력하면 사용 가능한 명령어 목록이 나타납니다:

/config - 설정 열기
/status - 로그인 상태 확인
/model - 모델 변경
/usage - 토큰 사용량 확인
/compact - 대화 압축
/plugins - 플러그인 관리

2. 파일 참조 (@-멘션)

코드 선택 시 자동 인식:
에디터에서 코드를 선택하면 Claude가 자동으로 인식합니다.

파일 직접 참조:

@auth.js 파일의 login 함수를 설명해줘

특정 라인 범위 참조:

@utils.js#10-25 이 코드를 리팩토링해줘

파일 참조 단축키:

Mac: Option + K
Windows/Linux: Alt + K

선택한 코드를 자동으로 @-멘션으로 삽입합니다.

터미널 출력 참조:

@terminal:zsh 이 에러 메시지 분석해줘

퍼지 매칭:
정확한 파일명을 몰라도 됩니다:

@auth  →  @src/utils/auth.js

3. Diff 뷰 (코드 변경 검토)

Claude가 코드를 수정하려고 할 때:

작은 변경:

인라인 스니펫으로 표시
Accept / Reject 버튼 제공

큰 변경:

VS Code 네이티브 Diff 에디터가 자동으로 열림
사이드바이사이드 비교
변경사항을 승인 또는 거부 가능

체크포인트 (Checkpoints):
Claude가 파일을 수정할 때마다 자동 체크포인트 생성:

Fork Conversation - 대화 분기
Rewind Code - 코드만 되돌리기
Fork and Rewind - 대화와 코드 모두 되돌리기

변경사항을 실험하고 되돌릴 수 있습니다!

4. 터미널 통합

VS Code 통합 터미널에서 Claude 사용:

터미널 열기:

Mac: Cmd + `
Windows/Linux: Ctrl + `

터미널에서 Claude 실행:

claude

멀티라인 입력 설정:

Claude 패널에서:

/terminal-setup

실행하면 Shift + Enter로 여러 줄 입력이 가능해집니다.

터미널 컨텍스트 자동 포함:
에디터에서 선택한 코드가 터미널 Claude에도 자동으로 전달됩니다.

5. Git 통합

커밋 메시지 자동 생성:

claude commit

또는 VS Code 패널에서:

변경된 파일들을 커밋해줘

PR 생성:

feature/auth 브랜치로 PR 만들어줘

브랜치 관리:

develop 브랜치에서 새로운 feature/payment 브랜치 만들어줘

키보드 단축키

필수 단축키

단축키 (Mac)	단축키 (Windows/Linux)	기능
`Cmd + Esc`	`Ctrl + Esc`	에디터 ↔ Claude 포커스 전환
`Option + K`	`Alt + K`	선택 코드를 @-멘션으로 삽입
`Cmd + Shift + Esc`	`Ctrl + Shift + Esc`	새 대화를 에디터 탭으로 열기
`Cmd + N`	`Ctrl + N`	새 대화 시작 (Claude 포커스 시)
`Cmd + Shift + P`	`Ctrl + Shift + P`	Command Palette (모든 명령어)
`Cmd + Shift + X`	`Ctrl + Shift + X`	Extensions 뷰 열기
`Cmd + ,`	`Ctrl + ,`	설정 열기
Cmd + `	Ctrl + `	통합 터미널 열기

컨텍스트 인식 단축키

단축키는 포커스 위치에 따라 다르게 작동합니다:

에디터 포커스 시:

Option/Alt + K → @-멘션 삽입
Cmd/Ctrl + N → 새 파일 생성 (VS Code 기본)

Claude 포커스 시:

Option/Alt + K → @-멘션 삽입
Cmd/Ctrl + N → 새 대화 시작

단축키 커스터마이징

keybindings.json 편집:

Command Palette 열기 (Cmd/Ctrl + Shift + P)
"Preferences: Open Keyboard Shortcuts (JSON)" 검색
커스텀 단축키 추가:

[
  {
    "key": "cmd+shift+c",
    "command": "claude.openChat",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+option+k",
    "command": "claude.insertMention",
    "when": "claude.focused"
  }
]

또는:
Command Palette에서 "Claude Code: Customize Keybindings" 실행

변경사항은 자동으로 감지되며 재시작 불필요합니다.

실전 사용 예제

예제 1: 버그 수정

시나리오:
테스트 실행 시 에러 발생

VS Code에서:

에러가 발생한 파일 열기 (src/auth.js)
에러가 나는 함수 선택
Option/Alt + K 눌러서 Claude에 참조 추가
Claude 패널에서 입력:

@auth.js#25-40 이 함수에서 TypeError가 발생해.
에러: "Cannot read property 'name' of undefined"
user 객체가 null일 때의 처리가 필요해.

Claude 응답:

auth.js를 검토했습니다. user 객체가 null일 때 발생하는 문제입니다.

다음과 같이 수정하겠습니다:

user.name → user?.name (Optional chaining 사용)

또는 명시적 null 체크 추가:
if (!user) return null;

수정을 진행할까요?

Diff 뷰 확인 후 "Accept" 클릭 → 코드 자동 적용!

예제 2: 리팩토링

시나리오:
레거시 콜백 코드를 async/await로 변경

VS Code에서:

utils.js 파일 열기
리팩토링할 함수들 선택
Claude 패널에서:

@utils.js 이 파일의 모든 콜백 함수를 async/await로 리팩토링해줘.
에러 핸들링도 try-catch로 개선해줘.

Claude가 자동으로:

파일 전체 분석
콜백 → async/await 변환
에러 핸들링 개선
Diff 뷰로 변경사항 표시

체크포인트 활용:

변경사항이 마음에 들지 않으면 "Rewind Code" 클릭
다른 접근 방식 시도 가능

예제 3: 테스트 생성

시나리오:
새로운 함수에 대한 테스트 작성

VS Code에서:

@calculator.js의 divide 함수에 대한 테스트를 작성해줘.
엣지 케이스도 포함해서:
- 0으로 나누기
- 음수 처리
- 소수점 처리
Jest 프레임워크 사용.

Claude가 자동으로:

기존 테스트 파일 스타일 분석
Jest 문법에 맞춰 테스트 생성
엣지 케이스 커버리지 포함
calculator.test.js 파일 생성 또는 업데이트

예제 4: PR 생성

시나리오:
feature 브랜치 작업 완료 후 PR 생성

VS Code 터미널에서:

claude

Claude와 대화:

feature/user-auth 브랜치의 모든 변경사항을 커밋하고
develop 브랜치로 PR을 만들어줘.

PR 제목: "사용자 인증 기능 추가"
변경사항 요약도 자동으로 작성해줘.

Claude가 자동으로:

변경된 파일 스테이징
적절한 커밋 메시지 생성
커밋 수행
원격 저장소로 푸시
PR 생성 (제목 및 설명 자동 작성)
PR URL 반환

한 번의 명령으로 모든 Git 워크플로우 완료!

예제 5: 비동기 서브에이전트 (Claude Code 2.1+)

시나리오:
시간이 오래 걸리는 작업을 백그라운드에서 실행

VS Code에서:

전체 프로젝트에 대한 테스트 커버리지 리포트를 생성해줘.
모든 테스트를 실행하고 결과를 분석해줘.

Ctrl + B (Mac: Cmd + B) 누르기 → 백그라운드 실행

백그라운드에서 테스트가 실행되는 동안:

다른 작업 계속 가능
메인 대화 이어서 진행
완료되면 결과 자동 알림

비동기 서브에이전트 활용 사례:

복잡한 리팩토링
테스트 실행
문서 자동 생성
전체 코드베이스 분석

고급 기능

브라우저 자동화 (Claude in Chrome 연동)

요구사항:

Claude in Chrome 확장 설치 (버전 1.0.36+)

사용법:

@browser https://example.com 페이지를 열고
로그인 폼에 테스트 계정으로 로그인해줘.

Claude가 브라우저를 자동으로 조작하여 작업을 수행합니다.

MCP 서버 통합

MCP (Model Context Protocol):
외부 도구와 서비스를 Claude에 연결하는 표준 프로토콜

설정:
.claude/.mcp.json 파일 생성:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_..."
      }
    }
  }
}

사용:

@github 내 저장소의 최근 이슈 목록을 가져와줘

MCP 서버 설정은 다음 편 (9편)에서 자세히 다룹니다.

플러그인 관리

플러그인 목록 보기:

/plugins

그래픽 인터페이스로 플러그인 설치 및 관리:

마켓플레이스 탐색
원클릭 설치
설정 관리

CLI와 함께 사용하기

대화 이력 공유

VS Code 확장과 CLI는 동일한 대화 이력을 공유합니다.

VS Code에서 시작한 대화를 CLI에서 이어가기:

claude --resume

최근 VS Code 대화가 터미널에서 계속됩니다.

CLI에서 시작한 대화를 VS Code에서 보기:

VS Code Claude 패널 상단의 드롭다운에서 해당 대화 선택.

상황별 최적 도구 선택

VS Code 확장 사용:

코드 작성 중
비주얼 Diff 확인 필요
파일 탐색하며 작업
초보자 또는 GUI 선호

CLI 사용:

빠른 일회성 작업
파이프라인과 스크립트 통합
키보드 중심 워크플로우
리소스 절약 필요

둘 다 사용 (추천!):

VS Code에서 코드 작성 및 리팩토링
CLI로 빠른 커밋 및 PR 생성
대화 이력 공유로 컨텍스트 유지

자주 묻는 질문 (FAQ)

Q1. VS Code 확장을 사용하려면 CLI도 설치해야 하나요?

A: 아니요, VS Code 확장만 독립적으로 설치해도 사용 가능합니다. 하지만 CLI와 함께 사용하면 대화 이력 공유 등 추가 혜택이 있습니다.

Q2. 확장이 너무 많은 리소스를 사용하는 것 같아요.

A: 다음 방법들을 시도해보세요:

사용하지 않는 대화 탭 닫기
큰 파일 참조 시 특정 라인 범위만 지정 (@file.js#10-20)
.gitignore에 node_modules 등 제외
respectGitIgnore 설정 활성화

Q3. 파일 변경 시마다 승인을 요청하는데, 자동으로 적용할 수 없나요?

A: 네, 권한 모드를 변경하세요:

단축키: Shift + Tab (실시간 토글)
설정: initialPermissionMode를 acceptEdits로 변경
주의: 자동 승인은 실수로 원치 않는 변경이 일어날 수 있으니 주의하세요.

Q4. Diff 뷰가 에디터 탭으로 열리는 것이 불편해요.

A: 작은 변경사항은 인라인으로 표시되고, 큰 변경만 Diff 에디터로 열립니다. 이는 VS Code의 네이티브 기능을 활용한 것으로 변경사항을 정확히 검토하기 위함입니다.

Q5. 오프라인에서도 사용할 수 있나요?

A: 아니요. Claude Code는 Anthropic 서버와 통신하여 AI 모델을 실행하므로 인터넷 연결이 필요합니다.

Q6. 프라이빗 코드베이스도 안전한가요?

A: 네. Anthropic은 엄격한 프라이버시 정책을 따릅니다:

코드는 모델 학습에 사용되지 않음
전송 중 암호화
Enterprise 요금제는 추가 보안 기능 제공 (SSO, Audit logs 등)

Q7. VS Code 외에 다른 IDE도 지원하나요?

A: 네. JetBrains IDE (IntelliJ, PyCharm, WebStorm 등)용 플러그인도 있습니다. Plugin 마켓플레이스에서 "Claude Code"를 검색하세요.

Q8. 대화 이력을 삭제하거나 내보낼 수 있나요?

삭제: /clear 명령어 사용
내보내기: 현재 직접적인 내보내기 기능은 없지만, 대화 내용을 복사하여 저장할 수 있습니다.

다음 단계

더 알아보기

Claude Code VS Code 연동을 마스터했다면 다음 글들을 확인하세요:

9편: Claude Code MCP 서버 설정법 - GitHub, 파일시스템 연동 (예정)
10편: Claude Code로 코드 리팩토링 & 디버깅 실전 예제 (예정)
11편: Claude Code GitHub Actions 자동화 - PR 자동 리뷰 설정 (예정)

결론 - VS Code에서 AI 페어 프로그래밍 시작하기

Claude Code VS Code 확장은 에디터 안에서 AI와 협업하는 가장 자연스러운 방법입니다.

핵심 요약:

VS Code 마켓플레이스에서 원클릭 설치
네이티브 Diff 뷰로 변경사항 시각적 검토
@-멘션으로 파일 및 코드 직접 참조
CLI와 대화 이력 공유로 최고의 유연성
Git 통합으로 커밋 및 PR 자동화

다음 편에서는 MCP 서버 설정법으로 GitHub, 파일시스템 등 외부 도구를 Claude에 연결하는 방법을 다룹니다!

📌 관련 글:

🔗 참고 자료:

Sources:

저작자표시 비영리 변경금지 (새창열림)

'개발&프로그래밍' 카테고리의 다른 글

[Claude] Claude Code로 코드 리팩토링 & 디버깅 실전 예제 (0)	2026.02.12
[Claude] Claude Code MCP 서버 설정법 - GitHub, 파일시스템 연동 (0)	2026.02.12
[Claude] Claude Code 핵심 명령어 & 슬래시 커맨드 총정리 (0)	2026.02.11
[Claude] Claude Code 설치 및 시작하기 (Mac/Windows/Linux) (0)	2026.02.10
[Claude] Claude API Tool Use (Function Calling) 구현하기 (0)	2026.02.10

[Claude] Claude Code VS Code 연동 - 개발환경 세팅 가이드

Claude Code VS Code 확장이란?

주요 특징

CLI vs VS Code 확장 비교

VS Code 확장 설치

시스템 요구사항

설치 방법

설치 확인

인증 및 로그인

첫 로그인

API 키 사용 (대안)

로그인 상태 확인

기본 설정 (Settings)

설정 열기

주요 설정 항목

1. 모델 선택 (selectedModel)

2. 권한 모드 (initialPermissionMode)

3. 화면 위치 (preferredLocation)

4. 자동 저장 (autosave)

5. 메시지 전송 단축키 (useCtrlEnterToSend)

6. .gitignore 존중 (respectGitIgnore)

프로젝트별 설정 (.claude/settings.json)

주요 기능 및 사용법

1. 채팅 패널

2. 파일 참조 (@-멘션)

3. Diff 뷰 (코드 변경 검토)

4. 터미널 통합

5. Git 통합

키보드 단축키

필수 단축키

컨텍스트 인식 단축키

단축키 커스터마이징

실전 사용 예제

예제 1: 버그 수정

예제 2: 리팩토링

예제 3: 테스트 생성

예제 4: PR 생성

예제 5: 비동기 서브에이전트 (Claude Code 2.1+)

고급 기능

브라우저 자동화 (Claude in Chrome 연동)

MCP 서버 통합

플러그인 관리

CLI와 함께 사용하기

대화 이력 공유

상황별 최적 도구 선택

자주 묻는 질문 (FAQ)

Q1. VS Code 확장을 사용하려면 CLI도 설치해야 하나요?

Q2. 확장이 너무 많은 리소스를 사용하는 것 같아요.

Q3. 파일 변경 시마다 승인을 요청하는데, 자동으로 적용할 수 없나요?

Q4. Diff 뷰가 에디터 탭으로 열리는 것이 불편해요.

Q5. 오프라인에서도 사용할 수 있나요?

Q6. 프라이빗 코드베이스도 안전한가요?

Q7. VS Code 외에 다른 IDE도 지원하나요?

Q8. 대화 이력을 삭제하거나 내보낼 수 있나요?

다음 단계

더 알아보기

추천 리소스

결론 - VS Code에서 AI 페어 프로그래밍 시작하기

'개발&프로그래밍' 카테고리의 다른 글

관련글

댓글

티스토리툴바

1. 모델 선택 (`selectedModel`)

2. 권한 모드 (`initialPermissionMode`)

3. 화면 위치 (`preferredLocation`)

4. 자동 저장 (`autosave`)

5. 메시지 전송 단축키 (`useCtrlEnterToSend`)

6. .gitignore 존중 (`respectGitIgnore`)