VS Code에 Claude Code 통합하는 법 — 단축키까지 한 번에

TL;DR

VS Code에 Claude Code 확장을 깔고 Ctrl+Esc(맥은 Cmd+Esc)로 호출하면 끝입니다. 설치부터 단축키 커스터마이징까지 약 15분이면 충분하고, 사전 준비물은 Node.js 18 이상과 Claude 계정뿐입니다.

VS Code에서 Claude Code를 바로 띄울 수 있다는 걸 알고 나서, 솔직히 작업 방식이 꽤 바뀌었습니다. 터미널 창을 따로 열고, 디렉토리 옮기고, 다시 코드 파일로 돌아오는 그 동선이 사라지거든요. 이 글은 VS Code와 Claude Code를 통합하는 가장 깔끔한 방법과, 자주 쓰는 단축키를 내 손에 맞게 바꾸는 방법까지 정리한 가이드입니다. 개발 경험이 적어도 따라올 수 있게 약어와 도구 이름은 그때그때 풀어 적었으니 너무 긴장하지 않으셔도 됩니다.

Claude Code가 뭐야?

Claude Code는 Anthropic이 공식으로 내놓은 AI 코딩 도구입니다. ChatGPT처럼 웹 브라우저에서 쓰는 챗봇이 아니라, 내 컴퓨터 안에 직접 들어와서 파일을 읽고 수정하고 명령어까지 실행해주는 보조 개발자에 가깝습니다.

비유하자면, ChatGPT가 "옆에서 조언해주는 친구"라면 Claude Code는 "내 책상에 앉아 직접 코드를 만지는 인턴"입니다. "이 폴더의 README 파일 한국어로 번역해줘"라고 말하면, 알아서 파일을 찾아 열고 수정한 뒤 저장까지 해줍니다.

원래는 터미널(검은 화면에 명령어를 입력하는 프로그램)에서만 쓰는 도구였는데, 2024년 후반부터 VS Code 확장도 공식 지원되면서 코드 편집기 안에서 바로 호출할 수 있게 됐습니다. 글 작성 시점 기준 VS Code Marketplace에 정식 등록돼 있습니다.

도구	형태	특징
ChatGPT 웹	브라우저	복붙해서 질문, 파일 직접 수정 ❌
GitHub Copilot	VS Code 확장	줄 단위 자동완성 중심
Claude Code	터미널 + VS Code	폴더 전체 이해, 파일 수정·명령 실행

설치 전에 뭘 준비해야 하나요?

Node.js 18 이상과 Claude 계정 두 가지면 됩니다. Node.js는 자바스크립트(웹페이지 동작을 만드는 언어)를 컴퓨터에서 실행시켜주는 엔진인데, Claude Code가 이 위에서 돌아갑니다.

준비물 체크리스트:

• [ ] VS Code 설치 (code.visualstudio.com에서 무료)
• [ ] Node.js 18 이상 (nodejs.org → LTS 버전 다운로드)
• [ ] Claude 계정 (claude.ai에서 가입, 무료 계정도 가능)
• [ ] 결제 수단 또는 Pro 구독 (사용량에 따라 과금)

Node.js가 잘 깔렸는지 확인하려면 VS Code 안에서 터미널을 엽니다. 메뉴에서 터미널 > 새 터미널을 누르면 화면 아래쪽에 검은 영역이 뜹니다. 거기에 이걸 입력합니다.

node --version

이 명령은 "Node.js 버전 알려줘"라는 뜻입니다. v18.x.x 또는 그 이상이 나오면 합격입니다. command not found가 뜨면 Node.js가 안 깔렸거나 설치 후 컴퓨터 재시작이 안 된 상태이니, 한 번 재부팅해보세요.

💡 윈도우 사용자라면 WSL(윈도우 안에서 리눅스를 돌리는 기능) 환경에서 작업하는 걸 권장합니다. Claude Code 공식 문서도 WSL을 1순위로 안내합니다.

VS Code에 Claude Code는 어떻게 설치하나요?

VS Code 확장 마켓플레이스에서 "Claude Code"를 검색해 설치한 뒤, 한 번만 로그인하면 됩니다. 절차 자체는 5분도 안 걸립니다.

순서를 그림으로 그리면 이렇습니다.

[1] VS Code 좌측 확장 아이콘 클릭 (블록 4개 모양)
        ↓
[2] 검색창에 "Claude Code" 입력
        ↓
[3] Anthropic 공식 확장 → Install 클릭
        ↓
[4] 우측 하단에 "Sign in" 버튼 → 브라우저 열림
        ↓
[5] Claude 계정 로그인 → VS Code로 자동 복귀
        ↓
[6] 설치 완료. 사이드바에 Claude 아이콘 등장

여기서 한 가지 주의할 점이 있는데, 확장 이름이 비슷한 게 여러 개 보일 수 있습니다. 게시자(Publisher)가 Anthropic으로 돼 있는 것만 공식입니다. 다른 건 비공식 래퍼(공식 도구를 감싸 만든 개인 프로젝트)일 가능성이 높습니다.

설치가 끝나면 좌측 사이드바에 Claude Code 아이콘이 새로 생깁니다. 이걸 누르면 채팅창이 옆에 뜨는데, 거기에 평소 ChatGPT에 하듯이 한국어로 말을 걸면 됩니다. "현재 열려 있는 파일 요약해줘" 정도부터 시작해보세요.

단축키는 어떻게 설정하나요?

기본 단축키는 윈도우/리눅스 Ctrl+Esc, 맥 Cmd+Esc이고, 키 바인딩 설정에서 자유롭게 바꿀 수 있습니다. Claude Code 패널을 빠르게 열고 닫는 데 쓰입니다.

기본으로 제공되는 주요 단축키를 정리하면 이렇습니다.

동작	윈도우/리눅스	맥
Claude 패널 열기/닫기	Ctrl+Esc	Cmd+Esc
선택한 코드 Claude에 보내기	Ctrl+Alt+K	Cmd+Opt+K
새 대화 시작	명령 팔레트에서 호출	동일

Ctrl+Esc가 손에 안 맞을 수 있습니다. 저는 처음에 Esc 키 위치 때문에 자꾸 헛손질을 했거든요. 이럴 땐 직접 바꿉니다.

1. Ctrl+Shift+P(맥은 Cmd+Shift+P)를 눌러 명령 팔레트(VS Code의 만능 검색창)를 엽니다.
2. "Keyboard Shortcuts"를 입력하고 Preferences: Open Keyboard Shortcuts를 선택합니다.
3. 검색창에 claude를 입력하면 관련 명령이 쭉 뜹니다.
4. 바꾸고 싶은 항목 왼쪽 연필 아이콘을 누르고, 원하는 키 조합을 직접 누릅니다.

저는 패널 열기를 Ctrl+;(세미콜론)으로 바꿨습니다. 새끼손가락 한 번이면 되니까 훨씬 편합니다. 다만 이미 다른 기능에 할당된 키를 고르면 충돌 경고가 뜨니, 안 쓰는 조합으로 잡는 게 좋습니다.

💡 단축키 설정 파일은 keybindings.json에 저장됩니다. 다른 컴퓨터로 옮길 때 이 파일만 복사하면 그대로 쓸 수 있어서 편합니다.

실제로 어떻게 쓰면 좋나요?

파일을 열어둔 채로 단축키를 누르고, 자연어로 작업을 지시하는 흐름이 가장 편합니다. 터미널과 코드 편집기를 왔다갔다 할 필요가 없어집니다.

블로그 글을 쓰는 직장인 시나리오로 예를 들어보겠습니다. 마크다운 파일에 초고를 써뒀는데 제목이 마음에 안 든다고 칩시다.

1. VS Code에서 초고.md 파일을 엽니다.
2. Ctrl+Esc로 Claude Code 패널을 띄웁니다.
3. "이 글의 제목을 5개 더 추천해줘. SEO 친화적으로." 입력
4. Claude가 파일 내용을 읽고 답변을 줍니다.
5. 마음에 드는 제목이 있으면 "그걸로 파일 첫 줄 바꿔줘"
6. 파일이 자동 수정됩니다.

복붙도 없고, 화면 전환도 없습니다. 이게 흔히 말하는 "바이브 코딩"의 감각인데, 코드뿐 아니라 문서 작업에도 똑같이 적용됩니다.

자주 쓰는 활용 패턴 몇 가지:

• 코드 리뷰: "이 함수에서 버그 가능성이 있는 부분 짚어줘"
• 문서화: "이 폴더 구조 보고 README 한국어로 써줘"
• 번역: "선택한 영어 주석 한국어로 바꿔줘"
• 리팩터링: "이 함수 더 읽기 쉽게 정리해줘"

처음엔 작은 작업부터 시켜보면서 Claude가 어디까지 알아듣는지 감을 잡는 걸 추천합니다. 큰 작업을 한 번에 맡기면 엉뚱한 파일을 건드릴 때도 있어서, 변경 사항은 항상 한 번씩 검토하는 습관을 들이는 게 좋습니다.

자주 묻는 질문 (FAQ)

Q. 무료로 쓸 수 있나요? Claude Code 자체는 무료 확장이지만, 사용량에 따라 토큰 비용이 듭니다. Claude Pro 구독($20/월) 또는 API 종량제 결제 중 하나가 필요합니다.

Q. GitHub Copilot이랑 같이 써도 되나요? 네, 충돌 없이 공존합니다. Copilot은 줄 단위 자동완성, Claude Code는 폴더 전체 이해와 파일 수정에 강하므로 역할을 나눠 쓰면 효율적입니다.

Q. 한국어로 지시해도 잘 알아듣나요? 네, Claude는 한국어 이해도가 높은 편입니다. 다만 변수명이나 함수명은 영어로 답하는 경우가 많습니다.

Q. 회사 코드를 올려도 안전한가요? Anthropic 공식 정책상 API 입력 데이터는 기본적으로 모델 학습에 쓰이지 않지만, 사내 보안 정책은 별도 확인이 필요합니다. 민감 정보는 사전에 마스킹하는 게 안전합니다.

Q. 설치 후 사이드바에 아이콘이 안 보입니다. VS Code를 완전히 종료한 뒤 다시 켜보세요. 그래도 없으면 확장 탭에서 Claude Code를 찾아 Reload 또는 한 번 비활성화 후 재활성화하면 대부분 해결됩니다.

Q. 단축키가 다른 확장과 충돌해요. 키보드 단축키 설정 화면에서 같은 조합을 검색하면 어떤 명령이 차지하고 있는지 보입니다. 둘 중 하나를 다른 키로 옮기거나 비활성화하면 됩니다.

Q. 터미널 버전 Claude Code랑 차이가 큰가요? 핵심 기능은 동일합니다. VS Code 통합판은 시각적인 변경 사항 미리보기와 단축키 호출이 강점이고, 터미널 버전은 가벼움과 스크립트 자동화에 유리합니다.

마무리

VS Code에 Claude Code를 붙이는 작업은 생각보다 단순합니다. Node.js 깔고, 확장 설치하고, 로그인 한 번. 여기에 손에 맞는 단축키 하나만 잡아두면 작업 흐름이 눈에 띄게 매끄러워집니다.

처음엔 "내가 이걸 어디까지 시켜도 되나" 싶어 망설이게 되는데, 일단 작은 파일 하나로 가볍게 굴려보는 게 가장 빠른 적응법입니다. 파일 요약, 주석 번역, 변수명 다듬기 같은 작업부터 시작해서 점차 영역을 넓히면, 어느 순간 터미널을 거의 안 쓰는 자신을 발견하게 됩니다. 오늘 저녁 30분만 투자해보세요.