VS Code에서 Claude Code 사용하기

VS Code용 Claude Code 확장 프로그램을 설치하고 구성하세요.

인라인 Diff, @-멘션, 계획 검토 및 키보드 단축키를 통해 AI 코딩 지원을 받을 수 있습니다.

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

확장 프로그램을 사용하면 Claude의 계획을 수락하기 전에 검토 및 편집하고, 수정 사항이 작성되는 대로 자동 수락하며, 선택한 특정 줄 범위의 파일에 @-멘션을 하고, 대화 기록에 액세스하며, 여러 대화를 별도의 탭이나 창에서 열 수 있습니다.

1. 사전 준비 및 설치 #

사전 준비 #

설치하기 전에 다음 사항을 확인하세요:

• VS Code 1.98.0 이상 버전
• Anthropic 계정 (확장 프로그램을 처음 열 때 로그인해야 합니다). Amazon Bedrock이나 Google Vertex AI와 같은 타사 제공업체를 사용하는 경우, 대신 ‘타사 제공업체 사용’ 섹션을 참조하세요.

이 확장 프로그램에는 CLI(명령줄 인터페이스)가 포함되어 있으며, 고급 기능을 위해 VS Code의 내장 터미널에서 액세스할 수 있습니다.

확장 프로그램 설치 #

VS Code에서 Cmd+Shift+X (Mac) 또는 Ctrl+Shift+X (Windows/Linux)를 눌러 확장(Extensions) 뷰를 열고 “Claude Code”를 검색한 다음 설치(Install)를 클릭합니다.

확장 프로그램이 설치 후 나타나지 않으면 VS Code를 다시 시작하거나 명령 팔레트(Command Palette)에서 “Developer: Reload Window”를 실행하세요.

2. 시작하기 #

설치가 완료되면 VS Code 인터페이스를 통해 Claude Code 사용을 시작할 수 있습니다.

1단계: Claude Code 패널 열기

VS Code 전역에서 Spark 아이콘은 Claude Code를 나타냅니다.

다른 방법으로도 열 수 있습니다.

우상단에 secondary sidebar 버튼을 클릭하면 AI 채팅 기능에 claude가 포함되어 있는 것을 볼 수 있습니다.

전 터미널하고 코드 파일과 claude code를 모두 볼 수 있는 이 방법을 더 선호 합니다 ㅎㅎ

그 밖에 여러 방법이 있습니다.

• 액티비티 바(Activity Bar): 왼쪽 사이드바의 Spark 아이콘을 클릭하여 세션 목록을 엽니다. 세션을 클릭하여 전체 편집기 탭으로 열거나 새 세션을 시작할 수 있으며, 이 아이콘은 액티비티 바에 항상 표시됩니다.
• 명령 팔레트(Command Palette): Cmd+Shift+P (Mac) 또는 Ctrl+Shift+P (Windows/Linux)를 누르고 “Claude Code”를 입력한 후 “새 탭에서 열기(Open in New Tab)”와 같은 옵션을 선택합니다.
• 상태 표시줄(Status Bar): 창의 우측 하단에 있는 ✱ Claude Code를 클릭하면 파일이 열려 있지 않을 때도 작동합니다.

2단계: 프롬프트 보내기

작동 방식 설명, 문제 디버깅, 변경 사항 작성 등 코드나 파일에 대한 도움을 Claude에게 요청하세요.

Claude는 사용자가 선택한 텍스트를 자동으로 볼 수 있습니다.

Option+K (Mac) 또는 Alt+K (Windows/Linux)를 눌러 프롬프트에 특정 줄에 대한 @-멘션 참조(예: @file.ts#5-10)를 삽입할 수도 있습니다.

3단계: 변경 사항 검토

Claude가 파일을 편집하고자 할 때 원본과 제안된 변경 사항을 나란히 비교하여 보여준 후 권한을 요청합니다.

사용자는 이를 수락하거나 거부할 수 있으며, 다른 작업을 수행하도록 지시할 수도 있습니다.

명령 팔레트에서 “Claude Code: Open Walkthrough”를 실행하면 기본 기능에 대한 안내 투어를 볼 수 있습니다.

3. 핵심 기능 사용법 #

프롬프트 상자 사용하기 #

프롬프트 상자는 다음 기능들을 지원합니다:

• 권한 모드(Permission modes): 하단의 모드 표시기를 클릭해 전환합니다.
  • 일반 모드: 각 작업 전에 권한을 묻습니다.Plan 모드: 할 일을 설명하고 변경 전 승인을 기다리며, VS Code는 계획을 전체 마크다운 문서로 열어 시작 전 인라인 주석으로 피드백을 줄 수 있게 합니다.자동 수락(Auto-accept) 모드: 묻지 않고 수정합니다. 기본값은 설정의 claudeCode.initialPermissionMode에서 변경 가능합니다.

• 명령 메뉴(Command menu): /를 입력하여 명령 메뉴를 열어 파일 첨부, 모델 변경, 심층 사고 전환, 계획 사용량 보기(/usage) 등을 할 수 있습니다. MCP 서버, 훅, 플러그인 등에도 접근할 수 있으며, 터미널 아이콘이 있는 항목은 내장 터미널에서 열립니다.
• 컨텍스트 표시기(Context indicator): Claude의 컨텍스트 창 사용량을 표시하며, 필요시 자동 압축하거나 /compact를 수동으로 실행할 수 있습니다.
• 심층 사고(Extended thinking): Effort를 조절하여 사고 정도를 조절할 수 있습니다. 복잡한 문제에 더 많은 시간 추론을 사용하게 합니다.
• 여러 줄 입력(Multi-line input): 전송 없이 새 줄을 추가하려면 Shift+Enter를 누릅니다.

파일 및 폴더 참조 #

@-멘션을 사용하여 특정 파일이나 폴더에 대한 컨텍스트를 제공하세요. @ 뒤에 이름을 입력하면 Claude가 내용을 읽고 관련 작업을 할 수 있으며, 퍼지 매칭(Fuzzy matching)을 지원해 부분 이름만 쳐도 찾을 수 있습니다.

대형 PDF는 특정 페이지나 범위를 읽도록 요청할 수 있습니다.

편집기 텍스트 선택 시 하단에 선택된 줄 수가 표시되며, Option+K / Alt+K로 파일 경로와 줄 번호가 포함된 참조를 삽입할 수 있습니다.

눈금 표시 아이콘을 클릭하여 Claude가 내 선택 영역을 볼 수 있는지 여부를 전환할 수 있습니다.

Shift를 누른 채 프롬프트 창으로 파일을 드래그하여 첨부하거나 X를 눌러 제거할 수 있습니다.

과거 대화 이어가기 #

패널 상단의 드롭다운을 클릭해 대화 기록에 접근하고, 키워드나 시간별(오늘, 어제 등)로 검색할 수 있습니다.

대화를 클릭해 다시 시작하거나, 세션 위로 마우스를 가져가 이름 변경 또는 제거 작업을 할 수 있습니다.

Claude.ai에서 원격 세션 이어가기 #

웹에서 사용한 세션을 VS Code에서 이어서 할 수 있습니다 (단, Anthropic Console이 아닌 Claude.ai Subscription으로 로그인 필요).

1. 상단의 Past Conversations 드롭다운 클릭
2. Web 탭 선택
3. 원격 세션을 검색 후 클릭해 로컬로 다운로드 및 이어가기. (참고: GitHub 저장소로 시작된 웹 세션만 나타나며, 변경 사항은 claude.ai로 다시 동기화되지 않습니다.)

4. 플러그인 및 브라우저 자동화 #

플러그인 관리

/Manage plugins를 입력해 그래픽 관리 인터페이스를 엽니다.

• Plugins 탭: 설치된 플러그인을 켜고 끄거나, 마켓플레이스에서 사용 가능한 플러그인을 검색해 Install을 클릭할 수 있습니다. 설치 시 사용자 범위, 프로젝트 범위, 로컬 범위 중 선택합니다.
• Marketplaces 탭: GitHub 리포지토리, URL, 로컬 경로를 입력해 마켓플레이스를 추가/제거/새로고침하며, 변경 후 확장을 재시작해야 적용됩니다.

Chrome으로 브라우저 작업 자동화

Claude를 Chrome에 연결하여 웹 앱 테스트, 콘솔 로그 디버깅, 브라우저 워크플로 자동화를 수행할 수 있습니다.

프롬프트에 @browser를 입력해 명령하며, 첨부 메뉴를 통해 새 탭 열기, 페이지 콘텐츠 읽기 등의 도구를 선택할 수 있습니다.