Claude Code VS Code 연동 완전정리: IDE 안에서 AI와 코딩하는 법

Claude Code VS Code 연동 완전정리: IDE 안에서 AI와 코딩하는 법

터미널을 오가며 Claude Code를 쓰는 건 이제 옛날 방식입니다. VS Code 확장 프로그램을 설치하면 에디터 옆에 Claude 패널이 열리고, 코드를 선택해서 바로 질문하고, 변경사항을 Diff 뷰로 검토하고, @멘션으로 파일을 참조합니다. 이 글에서는 VS Code 확장의 설치부터 실전 활용까지 완전 정리합니다.

Claude Code VS Code 연동 완전정리

---

1. VS Code 확장이란?

CLI의 그래픽 버전

Claude Code VS Code 확장은 CLI와 같은 엔진을 사용하면서, IDE에 네이티브로 통합된 그래픽 인터페이스를 제공합니다. 대화 기록도 공유되어 CLI와 확장을 오가며 사용할 수 있습니다.

[VS Code]
    ├── Claude 채팅 패널 (사이드바)
    │   ├── @멘션으로 파일 참조
    │   ├── 코드 선택 → 바로 질문
    │   └── / 커맨드 메뉴
    │
    ├── Diff 뷰 (변경사항 검토)
    │   ├── 원본 vs 수정본 비교
    │   └── 수락/거부/피드백
    │
    └── 통합 터미널 (CLI도 가능)
        └── claude --resume 으로 대화 재개

CLI vs VS Code 확장

항목	CLI	VS Code 확장
인터페이스	터미널 텍스트	그래픽 패널
Diff 뷰	있음	더 직관적
모든 커맨드	전부 사용 가능	주요 커맨드 (/로 확인)
탭 완성	지원	미지원
Bash ! 단축키	지원	미지원
IDE 통합	외부	네이티브
대화 기록	공유	공유

대부분의 워크플로우에서는 VS Code 확장이 편리하고, 고급 기능이나 자동화에는 CLI가 적합합니다.

 

VS Code 확장이란?

---

2. 설치와 초기 설정

요구사항

항목	요구사항
VS Code	1.98.0 이상
계정	Anthropic 계정 또는 제3자 제공자

설치 방법

방법 1: VS Code 확장 마켓플레이스
  → Ctrl+Shift+X → "Claude Code" 검색 → 설치

방법 2: 커맨드 팔레트
  → Ctrl+Shift+P → "Install Extension" → "Claude Code"

설치 후 VS Code를 재시작하거나 Developer: Reload Window를 실행합니다.

첫 실행

설치하면 "Learn Claude Code" 체크리스트가 나타납니다. "Show me"를 클릭하면 가이드 투어가 시작됩니다. 나중에 설정에서 다시 활성화할 수 있습니다.

Claude 패널 열기 (4가지 방법)

방법	설명
에디터 툴바	파일 열린 상태에서 우측 상단 Spark(✱) 아이콘
액티비티 바	좌측 사이드바의 Spark 아이콘 (세션 목록)
상태 표시줄	하단 우측 "✱ Claude Code" 클릭
커맨드 팔레트	Ctrl+Shift+P → "Claude Code"

패널 위치 설정

패널 타이틀 바를 드래그해서 원하는 위치로 이동:

• 보조 사이드바 (오른쪽) — 코딩과 나란히 보기 (권장)
• 주 사이드바 (왼쪽) — 탐색기와 함께
• 에디터 탭 — 파일처럼 탭으로 열기

설치와 초기 설정

---

3. @멘션 시스템

파일과 컨텍스트를 참조하는 강력한 방법

@멘션은 Claude에게 정확히 어떤 파일/폴더/터미널을 참조할지 알려주는 시스템입니다.

@멘션	설명	예시
@파일명	전체 파일	@auth.ts
@폴더명/	전체 폴더 (슬래시 필수)	@src/components/
@파일#줄번호	특정 줄	@auth.ts#42
@파일#시작-끝	줄 범위	@auth.ts#10-25
@파일#시작-	줄부터 끝까지	@auth.ts#50-
@browser	Chrome 브라우저	@browser localhost:3000
@terminal:이름	터미널 출력	@terminal:dev-server

퍼지 매칭

정확한 파일명을 몰라도 일부만 입력하면 자동으로 매칭됩니다.

@auth → auth.js, AuthService.ts, authentication.py 등 후보 표시
@comp → src/components/ 폴더 매칭

@멘션 삽입 단축키

Alt+K (Windows/Linux) / Option+K (Mac)
→ 현재 열린 파일 + 선택 영역을 자동으로 @멘션에 삽입

파일 첨부

프롬프트 박스에 Shift를 누르고 파일을 드래그&드롭하면 첨부됩니다.

선택 영역 숨기기

코드를 선택하면 자동으로 Claude에게 전달됩니다. 눈 아이콘(eye-slash)을 클릭하면 선택 영역을 숨길 수 있습니다.

@멘션 시스템

---

4. Diff 뷰와 변경 승인

변경사항을 시각적으로 검토

Claude가 파일을 수정하면 Diff 뷰가 자동으로 열립니다.

┌─────────────────────┬─────────────────────┐
│   원본 코드 (좌)     │   수정된 코드 (우)    │
│                     │                     │
│ - const name = "";  │ + const name = "";  │
│ - // TODO: validate │ + if (!name) {      │
│                     │ +   throw Error()   │
│                     │ + }                 │
│                     │                     │
│   삭제 (빨간색)       │   추가 (초록색)       │
└─────────────────────┴─────────────────────┘

       [수락]    [거부]    [피드백 제공]

승인 옵션

옵션	설명
수락	변경사항 적용
거부	변경사항 폐기
피드백	Claude에게 수정 방향 제시

자동 수락 모드

매번 승인하기 번거롭다면 자동 수락 모드를 설정할 수 있습니다.

// settings.json
{
  "claudeCode.initialPermissionMode": "acceptEdits"
}

다중 파일 편집

Claude가 여러 파일을 한 번에 수정하면:

• 각 파일의 Diff가 순차적으로 표시됩니다
• 파일마다 개별적으로 수락/거부할 수 있습니다
• VS Code가 자동으로 파일을 저장합니다 (설정 가능)

Diff 뷰와 변경 승인

---

5. 키보드 단축키

효율적인 작업을 위한 단축키

단축키	기능
Ctrl+Esc	에디터 ↔ Claude 패널 토글
Ctrl+N	새 대화 시작 (Claude 포커스 시)
Ctrl+Shift+Esc	추가 대화를 새 탭으로 열기
Alt+K	@멘션 삽입 (현재 파일+선택)
Shift+Enter	줄바꿈 (전송하지 않음)
Ctrl+Shift+P	커맨드 팔레트
Ctrl+`	통합 터미널 토글
Ctrl+,	설정 열기

Mac에서는 Ctrl 대신 Cmd, Alt 대신 Option을 사용합니다.

실전 단축키 워크플로우

1. 코드 영역 선택 (마우스/키보드)
   ↓
2. Alt+K → Claude에 파일+선택 자동 삽입
   ↓
3. 질문 입력 → Enter로 전송
   ↓
4. Diff 뷰에서 검토 → 수락
   ↓
5. Ctrl+Esc → 에디터로 복귀

키보드 단축키

 

---

6. / 커맨드와 도구

프롬프트 박스에서 / 입력

Claude 채팅 패널에서 /를 입력하면 사용 가능한 커맨드 목록이 표시됩니다.

커맨드	기능
/model	AI 모델 전환
/thinking	확장 사고 모드 토글
/compact	컨텍스트 수동 압축
/usage	토큰 사용량/비용 확인
/memory	자동 메모리 확인/편집
/permissions	권한 모드 변경
/hooks	훅 설정
/mcp	MCP 서버 관리
/browser	브라우저 자동화
/terminal	터미널 출력 참조
/file	파일 첨부
/folder	폴더 첨부

상태 표시줄 정보

VS Code 하단 우측에 표시되는 정보:

표시	의미
✱ Claude Code	클릭하면 패널 열기
컨텍스트 %	현재 컨텍스트 사용량
파란 점	권한 요청 대기 중
주황 점	탭 숨김 중 작업 완료
모델 이름	현재 모델 (클릭하면 변경)

/ 커맨드와 도구

---

7. 터미널 통합

VS Code 터미널에서 CLI 사용

VS Code 확장과 CLI를 함께 사용할 수 있습니다.

통합 터미널에서 CLI 실행

# VS Code 터미널에서
claude

# 또는 확장의 대화를 터미널에서 이어가기
claude --resume

claude --resume을 입력하면 대화 목록이 나타나고, 원하는 세션을 선택해서 이어갈 수 있습니다.

터미널 출력 참조

@terminal:dev-server

특정 터미널의 출력을 Claude에게 전달합니다. 에러 로그를 복사할 필요 없이 바로 참조할 수 있습니다.

외부 터미널에서 VS Code 연결

# 외부 터미널에서 Claude Code 실행 후
/ide

외부 터미널의 Claude Code를 VS Code에 연결해서 Diff 뷰 등 IDE 기능을 사용합니다.

터미널 통합

---

8. 설정과 커스터마이징

확장 설정

Ctrl+, → Extensions → Claude Code

설정	기본값	설명
selectedModel	default	새 대화의 기본 모델
initialPermissionMode	default	권한 모드 (default/plan/acceptEdits)
useTerminal	false	그래픽 대신 터미널 모드 사용
preferredLocation	panel	패널 위치 (sidebar/panel)
autosave	true	Claude 읽기/쓰기 전 자동 저장
useCtrlEnterToSend	false	Enter 대신 Ctrl+Enter로 전송
respectGitIgnore	true	.gitignore 패턴 제외
hideOnboarding	false	온보딩 체크리스트 숨기기

공유 설정

CLI와 확장이 공유하는 설정:

~/.claude/settings.json

MCP 서버, 훅, 환경 변수, 권한 규칙 등을 여기서 설정하면 CLI와 확장 모두에 적용됩니다.

{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "permissions": {
    "defaultMode": "default"
  }
}

$schema를 추가하면 VS Code에서 자동 완성이 됩니다.

설정과 커스터마이징

---

9. 실전 활용 팁

워크플로우 최적화

팁	설명
보조 사이드바에 고정	코딩과 나란히 보면서 대화
Alt+K 적극 활용	파일+선택을 한 키로 멘션
Plan 모드 활용	복잡한 변경은 계획부터
여러 탭 열기	Ctrl+Shift+Esc로 병렬 대화
대화 재개	드롭다운에서 이전 세션 선택
터미널 참조	@terminal로 에러 로그 직접 참조
확장 사고	/thinking으로 복잡한 문제 해결
체크포인트	메시지에 hover하면 되돌리기 가능

효과적인 @멘션 사용

비효율적: "auth.ts 파일을 수정해줘"
효율적:   "@auth.ts#30-50 이 함수의 유효성 검사를 추가해줘"

비효율적: "프로젝트 구조를 분석해줘"
효율적:   "@src/components/ 이 폴더의 컴포넌트 구조를 분석해줘"

보안 주의사항

항목	권장 사항
신뢰하지 않는 코드	수동 승인 모드 사용
Restricted Mode	신뢰하지 않는 워크스페이스에 활성화
설정 파일 변경	settings.json 등 수정 시 꼼꼼히 검토
bypassPermissions	신뢰하지 않는 환경에서 사용 금지

실전 활용 팁

---

10. 자주 묻는 질문 (FAQ)

Q: Spark 아이콘이 안 보여요.
A: 파일이 열려 있어야 에디터 툴바에 나타납니다. 하단 상태 표시줄의 "✱ Claude Code"를 클릭하거나, Ctrl+Shift+P로 열 수 있습니다.

Q: CLI와 VS Code 확장의 대화 기록이 공유되나요?
A: 네. 같은 대화 기록을 공유합니다. VS Code에서 시작한 대화를 claude --resume으로 터미널에서 이어갈 수 있습니다.

Q: MCP 서버는 어떻게 추가하나요?
A: CLI에서 먼저 설정한 뒤, VS Code 확장에서 /mcp로 관리합니다. 또는 ~/.claude/settings.json에서 직접 설정합니다.

Q: 여러 파일을 한 번에 수정할 수 있나요?
A: 네. Claude가 여러 파일을 동시에 수정하면 각 파일의 Diff를 순차적으로 검토하고 개별 수락/거부할 수 있습니다.

Q: Enter 대신 Ctrl+Enter로 전송하고 싶어요.
A: 설정에서 claudeCode.useCtrlEnterToSend를 true로 변경하세요. 그러면 Enter는 줄바꿈, Ctrl+Enter가 전송이 됩니다.

Q: 컨텍스트가 부족하다고 나올 때는?
A: /compact로 수동 압축하거나, @멘션을 더 구체적으로 사용하세요. 전체 폴더 대신 특정 파일과 줄 범위를 지정하면 효율적입니다.

Q: Cursor에서도 사용할 수 있나요?
A: 네. Claude Code 확장은 Cursor에서도 설치할 수 있습니다.

---

 

면책 조항: 이 글은 정보 제공 목적으로 작성되었습니다. Claude Code의 기능과 요금은 Anthropic의 정책에 따라 변경될 수 있으며, 최신 정보는 공식 문서를 확인해 주세요.