준비물
이 튜토리얼을 따라하려면 아래 항목이 필요합니다. 하나씩 확인하고 준비가 끝나면 다음 단계로 넘어갑니다.
준비물 확인
0/4 완료
Claude Code는 무료 계정으로는 사용할 수 없습니다. claude.ai에서 Pro($20/월) 이상 플랜에 가입해야 합니다. Node.js는 Claude Code 실행뿐 아니라 MCP 서버, npm 패키지 설치 등 생태계 전반에 필요하기 때문에 반드시 먼저 설치합니다.
Step 1: Node.js 설치
Node.js는 JavaScript를 실행하는 환경입니다. Claude Code는 내부적으로 Node.js를 사용하며, 나중에 MCP 서버를 추가하거나 npm 패키지를 설치할 때도 필요합니다. 한 번만 설치하면 됩니다.
Node.js 설치 방법
Node.js 다운로드
nodejs.org에 접속합니다. 화면에 두 가지 버전이 표시되는데, 왼쪽의 LTS(Long Term Support) 버전을 선택합니다. [Download Node.js (LTS)] 버튼을 클릭하면 설치 파일이 다운로드됩니다.
설치 실행
다운로드된 node-v...-x64.msi 파일을 실행합니다. 설치 마법사에서 [Next]를 계속 누릅니다. 'Tools for Native Modules' 체크박스가 나오면 체크하는 것을 권장합니다. C++이나 Python으로 만들어진 라이브러리를 컴파일할 때 필요하기 때문입니다.
설치 확인
설치가 끝나면 명령 프롬프트(cmd)나 PowerShell을 열고 아래 명령어를 입력합니다.
node --version npm --version
Node.js 공식 사이트
LTS 버전을 다운로드합니다.
nodejs.org
두 명령어 모두 버전 번호가 출력되면 정상입니다. node는 v18 이상, npm은 v9 이상이어야 합니다.
Step 2: VS Code 설치
VS Code(Visual Studio Code)는 마이크로소프트가 만든 무료 코드 편집기입니다. Claude Code는 이 편집기 안에서 동작하기 때문에 가장 먼저 설치해야 합니다. 이미 설치되어 있다면 버전만 확인하고 다음 단계로 넘어갑니다.
VS Code 설치 방법
VS Code 다운로드
code.visualstudio.com에 접속합니다. 화면 중앙의 [Download for Windows] 버튼을 클릭하면 설치 파일이 다운로드됩니다.
설치 실행
다운로드된 VSCodeUserSetup-x64.exe 파일을 실행합니다. 설치 마법사가 나타나면 [다음]을 계속 누릅니다. '바탕 화면에 아이콘 추가'와 'PATH에 추가' 옵션을 체크하는 것을 권장합니다.
설치 완료 확인
설치가 끝나면 VS Code를 실행합니다. 왼쪽에 파일 탐색기, 가운데에 시작 화면이 보이면 정상입니다.
Visual Studio Code 공식 사이트
Windows용 최신 버전을 다운로드합니다.
code.visualstudio.com
이미 VS Code가 설치되어 있다면 [Help] > [About]에서 버전을 확인합니다. 1.98.0 이상이어야 Claude Code 익스텐션을 설치할 수 있습니다.
Step 3: Claude Code 익스텐션 설치
VS Code가 준비되었으면 Claude Code 익스텐션을 설치합니다. 익스텐션은 VS Code에 기능을 추가하는 플러그인입니다. 검색해서 설치 버튼 하나만 누르면 끝납니다.
익스텐션 설치 방법
익스텐션 마켓플레이스 열기
VS Code 왼쪽 사이드바에서 네모 블록 아이콘을 클릭하거나, 키보드에서 Ctrl+Shift+X를 누릅니다.
Claude Code 검색
검색창에 'Claude Code'를 입력합니다. 검색 결과에서 퍼블리셔가 'Anthropic'인 공식 익스텐션을 찾습니다. 설치 수가 200만 이상인 것이 공식 익스텐션입니다.
설치
[Install] 버튼을 클릭합니다. 설치가 완료되면 VS Code 왼쪽 사이드바에 Claude 아이콘이 나타납니다.
'Claude Code'로 검색하면 비공식 익스텐션도 함께 나올 수 있습니다. 반드시 퍼블리셔가 Anthropic인지 확인합니다.
퍼블리셔: 개인 개발자 설치 수: 수천 ~ 수만 이름에 'AI Assistant', 'Helper' 등이 포함
퍼블리셔: Anthropic 설치 수: 200만+ 이름: Claude Code
설치 후 Claude 아이콘이 보이지 않으면 VS Code를 완전히 종료했다가 다시 실행합니다.
Step 4: Claude 계정으로 로그인
익스텐션 설치가 끝났으면 Claude 계정으로 로그인합니다. API 키가 아니라 claude.ai에서 사용하는 구독 계정으로 로그인합니다.
로그인 방법
Claude Code 패널 열기
VS Code에서 아무 파일이나 하나 열고, 에디터 오른쪽 상단의 Claude 아이콘을 클릭합니다. 또는 화면 하단 상태 바의 'Claude Code'를 클릭해도 됩니다.
로그인 시작
Claude Code 패널이 열리면 로그인 화면이 나타납니다. [Sign in with Claude.ai] 버튼을 클릭합니다.
브라우저에서 인증
브라우저가 자동으로 열리고 Claude 로그인 페이지가 나타납니다. 구독 중인 Claude 계정으로 로그인합니다. 인증이 완료되면 'You can close this tab' 메시지가 표시됩니다.
VS Code로 돌아가기
VS Code로 돌아오면 Claude Code 패널에 프롬프트 입력창이 표시됩니다. 이제 사용할 준비가 끝났습니다.
API 키가 아니라 Claude 구독 계정(Pro/Max)으로 로그인하는 것입니다. API 키를 사용하려면 별도 설정이 필요합니다.
Step 5: 첫 대화 시작하기
로그인이 완료되었으면 Claude와 첫 대화를 시작합니다. 간단한 질문을 던져서 모든 것이 정상 동작하는지 확인합니다. 파일을 열고 Claude에게 설명을 요청하는 것부터 시작하면 됩니다.
첫 대화 시작하기
파일 열기
VS Code에서 [File] > [Open Folder]를 선택하고 아무 프로젝트 폴더를 엽니다. 프로젝트가 없다면 빈 폴더를 하나 만들어도 됩니다.
Claude Code 패널 열기
에디터 오른쪽 상단의 Claude 아이콘을 클릭합니다. 또는 Ctrl+Shift+P를 누르고 'Claude Code'를 검색해서 열 수도 있습니다.
첫 프롬프트 입력
프롬프트 입력창에 '안녕, 이 프로젝트 폴더에 뭐가 있는지 알려줘'라고 입력하고 Enter를 누릅니다.
응답 확인
Claude가 프로젝트의 파일 구조를 분석하고 설명해줍니다. 응답이 나오면 설치가 정상적으로 완료된 것입니다.
Claude Code는 현재 열려 있는 파일의 내용을 자동으로 인식합니다. 코드 파일을 열어두고 질문하면 해당 코드에 대해 바로 답변합니다.
알아두면 좋은 것들
기본 설치가 끝났으면 몇 가지 유용한 기능을 알아두면 좋습니다. 패널 위치를 원하는 곳으로 옮기거나, 단축키로 빠르게 Claude를 호출하거나, 권한 모드를 바꾸는 것만 알아도 작업 효율이 크게 달라집니다.
패널 위치 변경
Claude Code 패널은 드래그해서 원하는 위치로 옮길 수 있습니다.
패널 상단의 탭을 잡고 드래그하면 오른쪽 사이드바, 왼쪽 사이드바, 에디터 영역 어디든 배치할 수 있습니다. 코드를 보면서 Claude와 대화하려면 오른쪽 사이드바에 두는 것을 권장합니다.
핵심 단축키
| 단축키 | 설명 |
|---|---|
| Ctrl+Esc | 에디터 ↔ Claude 패널 포커스 전환 |
| Ctrl+Shift+Esc | 새 대화를 새 탭으로 열기 |
| Ctrl+N | 새 대화 시작 (Claude 패널에 포커스가 있을 때) |
| Alt+K | 현재 선택한 코드를 @멘션으로 참조 |
| Ctrl+Shift+P | 명령 팔레트 열기 |
권한 모드
Claude가 파일을 수정하거나 명령어를 실행할 때 매번 허가를 요청합니다. 프롬프트 입력창 하단의 모드 표시를 클릭하면 세 가지 모드를 선택할 수 있습니다.
| 모드 | 동작 |
|---|---|
| Default | 모든 작업마다 허가 요청 |
| Plan | 계획서를 먼저 보여주고 승인 후 실행 |
| Auto-accept | 파일 수정을 자동 승인 (주의해서 사용) |
설치가 안 될 때
설치 중 문제가 생기는 경우가 가끔 있습니다. 아래는 초보자들이 가장 자주 겪는 문제와 해결 방법입니다.
다음 단계
VS Code에서 Claude Code를 사용할 준비가 끝났습니다. 이제 실제 프로젝트에서 코드를 작성하고, 디버깅하고, 리팩토링하는 방법을 익히면 됩니다. 아래 가이드에서 Claude Code의 모든 명령어와 기능을 확인할 수 있습니다.
Claude Code 완벽 가이드
CLI 명령어, 단축키, 설정, MCP 서버, 서브에이전트까지 모든 기능을 정리한 레퍼런스 문서입니다.
successwiki.io
AI 개발 도구 소식을 놓치지 마세요
매주 최신 AI 도구 업데이트, 튜토리얼, 프롬프트 팁을 보내드립니다.