VS Code에서 Claude Code 사용하기

최근 업무에서도 AI를 사용하는 분들이 많다고 생각합니다.

점점 발전하는 AI의 활용 방식에 익숙해져야 한다고 느껴서, Anthropic의 Claude Code를 VS Code에서 사용할 수 있도록 하는 절차를 남기고자 합니다.

이 글을 다 읽으면, Claude Code를 설치하고 VS Code의 사이드 패널에서 Claude로 코드를 작성할 수 있는 상태가 됩니다. (약 10~15분 소요)

대상은 Claude Code를 처음 접하는 분이나 터미널 조작에 약간 익숙한 분입니다.

Windows를 중심으로 설명하며, macOS/Linux에서의 차이점은 그때그때 보충하겠습니다.

본 기사의 VS Code는 PC에 설치하여 사용하는 데스크톱 앱 버전을 전제로 합니다. 브라우저에서 작동하는 VS Code for the Web (vscode.dev)은 대상에서 제외됩니다.

• Claude Code CLI의 설치 방법 (Windows / macOS / Linux)
• 최초 로그인 및 동작 확인 방법
• VS Code 확장 기능 도입 및 기본 조작법
• 막히기 쉬운 포인트와 대처법

권장되는 네이티브 인스톨러를 사용하는 경우, Node.js는 필요하지 않습니다.

아직 설치되어 있지 않다면 공식 사이트에서 OS에 맞는 인스톨러를 다운로드하여 실행합니다. Windows에서는 'User Installer'를 선택하면 관리자 권한 없이 설치할 수 있습니다.

이미 설치되어 있다면, '도움말 → 버전 정보'에서 1.94.0 이상인지 확인해 두는 것이 좋습니다.

공식 권장 방식은 '네이티브 인스톨러'입니다. 명령어 한 줄로 진입하며, 그 이후에는 백그라운드에서 자동 업데이트됩니다. 관리자 권한은 필요하지 않습니다.

시작 메뉴에서 PowerShell을 열고 다음을 실행합니다. 프롬프트가 PS C:\으로 시작하면 PowerShell입니다.

irm https://claude.ai/install.ps1 | iex

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

curl -fsSL https://claude.ai/install.sh | bash

인스톨러는 다운로드하는 동안 진행 상황을 표시하지 않습니다. 멈춘 것처럼 보여도 잠시 기다려야 합니다.

• WinGet:
  winget install Anthropic.ClaudeCode

(자동 업데이트되지 않으므로 winget upgrade Anthropic.ClaudeCode로 업데이트)

• Homebrew:
  brew install --cask claude-code

(업데이트는 brew upgrade claude-code)

• npm:
  npm install -g @anthropic-ai/claude-code

(Node.js 22 이상. sudo는 붙이지 않습니다.)

설치가 완료되면, 터미널을 다시 열고 버전 확인을 합니다.

claude --version

2.1.xxx (Claude Code)와 같이 버전이 표시되면 성공입니다.

작업하려는 프로젝트 폴더에서 claude를 실행하고 브라우저로 로그인하면 사용할 수 있는 상태가 됩니다.

• 프로젝트 폴더로 이동합니다(예: cd C:\[사용자명]\[프로젝트명])
• claude

다음과 입력하여 실행합니다. 처음 사용 시에는 테마 선택 등의 설정에 이어 로그인 방법을 묻습니다. Claude의 구독(subscription) 또는 Console 계정을 선택합니다.

• 브라우저가 열리므로, 인가를 완료하고 터미널로 돌아옵니다.
• '이 폴더를 신뢰하겠습니까?'라는 질문을 받으면, 자신의 프로젝트라면 허용합니다.

작동 확인으로, 예를 들어 이 폴더의 내용을 설명해 라고 보내봅시다. 종료할 때는 /exit 입니다.

설치나 설정에 불안함이 있다면, 다음 명령어로 진단할 수 있습니다. 세션을 시작하지 않고, 문제와 대처법을 보여줍니다.

claude doctor

데스크톱 앱 버전의 VS Code에 공식 확장 기능인 'Claude Code'(발행사: Anthropic)를 설치하면, VS Code 내부에 채팅 패널이 추가됩니다.

• VS Code에서 Ctrl+Shift+X (Mac은 Cmd+Shift+X)를 눌러 확장 프로그램 뷰를 엽니다. - 'Claude Code'로 검색하고, 발행사가 Anthropic인 것을 선택한 후 Install을 클릭합니다(Marketplace에서 설치해도 무방). - 표시되지 않을 때는, 명령 팔레트(Ctrl+Shift+P)에서 Developer: Reload Window를 실행합니다.

확장 프로그램은 전용 CLI(Command Line Interface)를 내장하고 있기 때문에, 채팅 패널만이라면 Step 1이 없어도 작동할 수 있습니다. 다만, 통합 터미널에서 claude 명령어를 사용하려면 Step 1의 설치가 필요합니다. 둘 다 넣어두는 것을 추천합니다.

스파크 아이콘(✳ 같은 마크)이 Claude Code의 진입점입니다. 다음 중 어느 곳에서 열 수 있습니다.

• 에디터 오른쪽 상단 툴바 (파일을 열고 있을 때만 표시)
• 왼쪽 끝 활동 바 (세션 목록이 열림)
• 오른쪽 하단의 상태 표시줄 ✻ Claude Code - 명령 팔레트에서 'Claude Code: Open in New Tab'

처음 열면 로그인 화면이 나옵니다. Sign in을 클릭하고, 브라우저로 인가하면 완료입니다.

패널의 입력란에 한국어로 요청을 작성하면, Claude가 코드를 읽고 편집을 제안해 줍니다. 일단 다음 기능만 숙지해도 충분합니다.

에디터에서 선택한 범위는 자동으로 Claude에게 전달됩니다. Alt+K (Mac은 Option+K)로 @app.ts#5-10와 같은 참조를 입력란에 삽입할 수 있습니다. 입력란에서 @를 치면, 파일명을 검색하여 지정할 수 있습니다.

입력란 아래의 권한 모드에서는, 편집할 때마다 확인 여부를 전환합니다.

처음이라면, 명령 팔레트의 Claude Code: Open Walkthrough에서 기본 조작 투어를 보는 것도 추천합니다.

헷갈리기 쉬운 것은 PATH와, 명령을 실행하는 셸(shell)을 혼동하는 것입니다.

⚠️ [IMG:N] 형식 토큰은 이미지 placeholder 입니다. 번역하지 말고 원래 위치에 그대로 유지하세요.

Git Bash 경로는 예를 들어 다음과 같이 설정합니다.

{
"env": {
"CLAUDE_CODE_GIT_BASH_PATH": "C:\Program Files\Git\bin\bash.exe"
...
}

원인을 알 수 없을 때는 먼저 claude doctor의 출력을 확인하세요.

절차는 CLI를 명령어 한 줄로 입력하고, claude로 로그인한 다음, VS Code에 확장 기능을 추가하는 것만으로 끝납니다. 처음에는 Manual 모드에서 차이점을 확인하며 사용하다가, 익숙해지면 Auto나 Plan 모드를 시도해 보세요.