[바이브코딩] Claude Code를 VS Code, Cursor에 연동하는 간단한 방법

안녕하세요.

저번 포스팅에서 Claude Code 설치 및 간단한 사용방법을 알아보았습니다.

https://wonhwa.tistory.com/83

[바이브코딩] Claude Code 사용법 - 처음 시작하기

https://wonhwa.tistory.com/84

[바이브코딩] Claude Code 간단 사용법

위의 사용법에서 간단하게 자연어로 프롬프트를 입력해 결과물을 얻을 수 있었습니다.

하지만, 터미널 창만 떠 있어서 실제로 폴더가 어떻게 되어있는지는 한눈에 들어오지 않습니다.

때문에 VS code 등의 코드 편집기를 연동해서 프로젝트 폴더가 어떻게 되어있는지도 한눈에 보고 관리할 수 있도록 하려고 합니다.

그럼 지금부터 Claude Code 를 VS code나 Cursor에 연동해서 폴더 관리를 편하게 할 수 있는 방법을 같이 알아보겠습니다.

 

1. VS Code 연동방법 

VS Code 는 연동방법이 두 가지가 있습니다.

확장 파일을 설치해서 사용하는 방법과, 터미널에서 바로 쓰는 방법이 있습니다.

하나씩 알아보도록 하겠습니다.

 

1-1. Extension 설치 방법

가. VSCode에 접속하여 프로젝트 폴더를 열어 줍니다.

나. 왼쪽에 있는 확장기능 마켓플레이스 버튼을 클릭하여 "Claude"를 검색해 줍니다.

VS Code extentions

다. "Claude for VS Code"를 설치해 줍니다.

Claude Code for VS Code extension

저는 이미 설치가 되어 있어서 Install 버튼이 안보이지만, 여러분들은 파란색으로 Install 이라는 버튼이 보일 것입니다.

이 버튼을 클릭해서 설치 해주세요.

라. 에디터 우측 상단의 클로드 코드 아이콘 클릭

설치가 완료되면 폴더 안에 있는 파일을 아무거나 하나 클릭하거나, 아무파일 하나를 만들어 들어가면 우측 상단에 아이콘이 있습니다.

이 클로드 코드 아이콘을 클릭해 주세요.

우측 상단의 클로드 코드 아이콘

마. Claude Code 사용하기

VS Code에서 Claude Code 실행 화면

그러면 위의 사진과 같이 클로드 코드를 쓸 수 있는 창이 오른쪽에 뜹니다.

이후 필요한 작업을 채팅에 쳐서 실행하면 됩니다.

아래 사진처럼 Ask before edits 부분을 눌러 필요한 모드(플랜 모드, 자동 수정 모드 등)를 설정할 수 있습니다.

VS Code Claude Code 모드 설정

 

1-2.  VS Code terminal에서 바로 사용하기

이 방법은 설치 없이 터미널에서 바로 쓰는 방법입니다. 설치하기 귀찮으신 분들은 아래의 방법을 사용하여 접속이 가능합니다.

가. VSCode에 접속하여 프로젝트 폴더를 열어 줍니다.

나. 상단 메뉴바의 Terminal > New Terminal 을 눌러 새 터미널을 열어 줍니다.

VS Code Terminal 열기

참고로 맥북은 control + Shift + ￦ 키로도 열 수 있습니다.

다. Claude 를 입력하여 Claude Code를 실행합니다.

VS Code terminal에서 Claude Code 실행화면

하단에 있는 터미널에 

claude

위의 명령어 입력하면 Claude Code가 실행 됩니다.

더 편하게 보고 싶다면 Terminal을 우측으로 드래그하여 이동하여 사용할 수도 있습니다.

 

2. Cursor에서 연동하는 방법

2-1. Extension 설치 방법

가. Anthropic 공식 문서에서 Install for Cursor을 클릭하여 설치합니다.

아래 웹사이트를 클릭해서,

https://code.claude.com/docs/en/vs-code

Use Claude Code in VS Code - Claude Code Docs

Anthropic 공식 문서

위의 Install for Cursor 클릭하면 됩니다.

그러면 "Cursor로 연결할까요?" 라는 팝업 메세지가 브라우저에 나옵니다.

여기서 '열기'를 클릭하면 cursor가 열리면서 아래와 같이 extension 설치 창이 뜹니다.

나. Extension 설치하기

Cursor Claude Code 설치

Install 버튼을 눌러 확장기능을 설치해 주세요.

다. Cursor의 왼쪽 탐색 창에서 ^ 버튼을 눌러 Claude Code 클릭하기 

Cursor Claude Code 설치 후 실행

라. Claude Code Cursor에서 사용하기

Cursor 내 Claude Code

그럼 위와 같이 왼쪽에 Claude Code 채팅 창이 뜹니다. 여기서 프롬프트 입력하여 사용할 수 있습니다.

 

2-1. Cursor terminal에서 바로 사용하기

VS Code와 마찬가지로 위의 설치가 번거롭다면 terminal을 열어 바로 사용이 가능합니다.

가. Terminal 열기

Cursor Terminal

VS Code 와 마찬가지로 Cursor 내에서 새 터미널을 열어 줍니다.

나. 하단 터미널에 claude를 입력하여 클로드 코드를 실행해 줍니다.

그럼 VSCode와 같이 Cursor에서도 같은 모양으로 Claude Code 사용이 가능합니다.

 

마무리

이번 포스팅에서 VS Code, Cursor에서의 Claude Code 연동 방법을 알아 보았습니다.

여러분들도 위의 정보를 활용해서 편리하게 바이브 코딩을 하시기 바랍니다.