클로드 코드 vscode 입문, 준비물 2개부터 확장 설치까지 (2026)

3줄 요약

  • 클로드 코드 vscode 확장은 Extensions 뷰에서 설치하고 사이드바에서 바로 작업한다
  • 준비물은 VS Code 1.94.0 이상과 유료 구독(또는 Console 계정), API 키는 필요 없다
  • 터미널 방식과 달리 확장은 자체 CLI를 내장해 채팅 패널만 쓸 땐 별도 설치가 필요 없다

터미널을 켜본 적 없어도 VS Code 안에서 클로드 코드를 쓸 수 있는지 궁금해질 수 있다. 클로드 코드 vscode 확장은 VS Code 안 Extensions 뷰에서 설치한 뒤 사이드바에서 바로 첫 작업을 시작할 수 있다. Extensions 뷰(Cmd+Shift+X, Windows·Linux는 Ctrl+Shift+X)에서 ‘Claude Code’를 검색해 설치 여부를 확인하면 된다. 이 글은 2026년 9월 11일 기준 공식 문서로 확인했으며, 별도의 클로드 코드 데스크톱 앱과는 다른 이야기다.

설치부터 첫 diff 확인까지 5단계 흐름도

준비물부터 확인한다

이 절에서는 시작 전에 필요한 것 두 가지를 확인한다.

준비물은 2개다. VS Code 자체와 클로드 계정이다.

공식 문서의 준비물(Prerequisites) 안내 화면

볼 곳: Prerequisites

  1. VS Code 1.94.0 이상: 버전이 낮으면 확장 아이콘이 제대로 안 뜬다.
  2. 유료 구독 또는 Console 계정: Pro·Max·Team·Enterprise 중 하나면 된다. API 키는 필요 없다.

‘무료로는 못 쓰나’ 싶을 수 있다. API 키는 필요 없지만, 로그인하려면 유료 구독이나 Console 계정 중 하나는 있어야 한다. 요금제 차이는 클로드 코드 가격·요금제에 정리했다.

확장을 설치한다

설치 경로는 두 가지다.

공식 문서의 확장 설치(Install the extension) 안내 화면

볼 곳: Install the extension

  1. 공식 문서의 설치 링크를 클릭한다. VS Code용 링크를 누르면 VS Code가 바로 열리며 설치 화면으로 넘어간다.
  2. VS Code 안에서 Extensions 뷰(Cmd+Shift+X)를 열고 ‘Claude Code’를 검색해 [Install]을 누른다.

게시자는 anthropic, 확장 식별자는 claude-code다. 마켓플레이스에 표시되는 정확한 이름 문구는 이 글에서 확정하지 않는다.

Cursor 같은 VS Code 포크에도 같은 방식의 설치 링크로 설치할 수 있다. Cursor와 클로드 코드 자체를 비교한 내용은 커서 AI와 클로드 코드 비교에서 다룬다.

사이드바에서 첫 작업을 시작한다

이 절에서는 설치 후 첫 화면부터 실제 지시 하나를 실행하는 순서를 본다.

  1. 파일 하나를 연다. 에디터 우측 상단에 Spark 아이콘이 나타난다. 파일을 하나도 안 열었으면 이 아이콘은 안 보인다.
  2. 왼쪽 액티비티 바의 Spark 아이콘을 눌러도 같은 패널이 열린다.

  3. 처음 열면 로그인 화면이 뜬다. [Sign in]을 누르고 브라우저에서 승인한다.

  4. 로그인하면 ‘Learn Claude Code’ 체크리스트가 나온다.

  5. 화면 아래 프롬프트 박스에 지시를 입력하고 실행한다. 파일을 고치는 지시라면 잠시 후 원본과 제안된 변경을 나란히 비교하는 화면이 뜬다.

여기까지가 설치부터 첫 결과 화면까지다. 이 화면이 왜 뜨는지, 왜 어떤 때는 안 물어보고 넘어가는지는 다음 절에서 다룬다.

권한 모드에 따라 diff 화면이 달라진다

이 절에서는 방금 본 나란히 비교 화면이 나오는 이유를 권한 모드로 설명한다.

Manual 모드에서는 클로드가 파일을 고치려 할 때 원본과 제안된 변경을 나란히 비교하는 화면을 보여주고 승인을 요청한다. 그 자리에서 [Accept], [Reject]를 고르거나 다른 지시를 내릴 수 있다.

‘방금은 왜 안 물어봤지’ 싶을 수 있다. 모드가 다르면 동작도 다르기 때문이다. 나머지 세 모드는 표로 정리한다.

모드 동작
Auto 분류기가 대부분의 행동을 알아서 판단하고 넘어간다
Plan 실행 전에 무엇을 할지 설명하고 승인을 기다린다
Edit automatically 대부분의 파일을 묻지 않고 바로 고친다

이 나란히 비교 화면은 확장이 VS Code 안에 로컬로 띄우는 연결 덕분에 뜬다. 이 연결 이야기는 다음 절에서 이어진다.

터미널로 쓰는 것과 뭐가 다른가

이 절에서는 확장과 터미널의 CLI(명령줄 도구, 터미널에 직접 명령을 치는 방식) 실행 차이를 정리한다.

확장은 채팅 패널용 CLI 사본을 자체적으로 담고 있어서, 패널만 쓸 거라면 별도 설치가 필요 없다. 다만 터미널에서 claude 명령을 직접 치려면 CLI를 따로 설치해야 한다. 확장 설치만으로는 claude가 셸의 PATH(명령어를 찾는 경로 목록)에 잡히지 않는다.

항목 VS Code 확장 터미널 CLI
별도 설치 채팅 패널만 쓸 땐 불필요 claude 명령을 치려면 필요
커맨드·스킬 일부만 지원 전체 지원
! 단축키·Tab 완성 없음 있음

VS Code가 열려 있는 상태로 터미널에서 claude를 실행해도 같은 나란히 비교 화면을 그대로 쓴다. 터미널 쪽 권한 승인 화면이 정확히 어떤 모양인지는 이번 자료로 확인하지 못했다.

터미널 설치가 처음이라면 클로드 코드 맥 설치법을 먼저 보는 편이 낫다.

자주 묻는 질문

이 절에서는 무료 여부, 아이콘이 안 보일 때, Cursor 지원 여부를 정리한다.

무료로 되나? API 키는 필요 없지만 유료 구독이나 Console 계정은 있어야 한다.

Spark 아이콘이 안 보이면? 아래 순서로 확인한다.

  1. 파일을 하나 연다.
  2. VS Code 버전이 1.94.0 이상인지 확인한다.
  3. VS Code를 다시 시작한다.
  4. 충돌하는 다른 확장을 꺼본다.
  5. 작업 영역이 제한된 모드는 아닌지 확인한다.

Cursor에서도 되나? 같은 방식의 설치 링크로 Cursor·Open VSX 기반 에디터에도 설치할 수 있다.

클로드 코드를 앱 형태로 쓰는 방법은 이 확장과 다르다. 데스크톱 앱 이야기는 클로드 코드 데스크톱 앱에서 따로 다룬다.

이 글에 나온 말 정리

용어 뜻
확장(Extension) VS Code 안에 얹어 쓰는 부가 기능
Spark 아이콘 클로드 코드 패널을 여는 아이콘
나란히 비교(diff) 원본과 제안된 변경을 나란히 보여주는 화면
권한 모드 Manual·Auto·Plan·Edit automatically 4종
CLI 터미널에서 claude 명령으로 쓰는 방식

정리

  1. VS Code 1.94.0 이상과 유료 구독(또는 Console 계정)을 확인한다.
  2. Extensions 뷰에서 ‘Claude Code’를 검색해 설치한다.
  3. Spark 아이콘으로 패널을 열고 로그인한다.
  4. 프롬프트를 입력해 첫 diff 화면을 확인한다.
  5. 필요하면 권한 모드를 바꾼다.

검증 기준

직접 만든 실습 자료와 새 도구 소식

AI 도구로 만든 실습 자료, 달라진 기능과 강의 소식을 준비하고 있습니다. 발송을 시작하면 안내해 드려요. 먼저 확인 메일에서 본인 이메일을 확인해 주세요.

신청하기 전에 첫 소식 미리보기에서 내용과 자료를 확인해 보세요.

질문이나 의견을 남겨주세요

이름을 입력하지 않아도 돼요. ‘깜짝 놀란 올빼미’ 같은 별명이 자동으로 붙어요.