Cursor에서 Claude Code 통합하기: 두 AI 도구의 장점을 모두 활용하기
Kevin Kern
구독자 723명
요약
이 영상은 Cursor(Visual Studio Code 포크)와 Claude Code를 결합해 최고의 AI 코딩 환경을 구축하는 방법을 소개합니다. Claude Code의 Opus 4와 Sonnet 4 모델을 네이티브로 사용해 뛰어난 코드 생성 성능을 경험하고, Cursor의 편리한 에디터 툴과 통합해 실시간 컨텍스트 기반 작업 흐름을 강화합니다. 설치·연결부터 간단한 AI 채팅 예제, 파일 참조 기반 코드 생성, 스트리밍 응답, 그리고 자동 실행 모드와 허용·금지 도구 설정 같은 안전 가드까지 단계별로 살펴봅니다. 비용과 요금제(Claude Max Plan vs Fast Requests) 주의사항도 함께 안내합니다.
주요 키워드
Claude Code
Cursor
Opus 4
Sonnet 4
Diff Viewer
File References
CLI
Streaming
Yolo Mode
Max Plan
하이라이트
- 🔑 Claude Code가 Visual Studio Code, Cursor, Windsor, JetBrains IDE에 공식 지원돼 개발자가 직접 API를 거치지 않고도 Opus 4와 Sonnet 4 성능을 활용할 수 있습니다.
- ⚡️ Claude Code는 대규모 코드 리팩터링에 최적화된 모델로, 자체 에코시스템에서 더 나은 코드 생성 결과를 제공해 줍니다.
- 🌟 Cursor와 Claude Code를 결합하면 Diff 뷰어, 빠른 모델 전환, CMDK 단축키 기반 컨텍스트 선택 같은 강력한 편집 기능을 함께 누릴 수 있습니다.
- 📌 비용 절감을 위해 OpenAI O3는 Cursor 외부에서, Claude Code는 Max Plan으로 무제한 사용해 예산 범위 내에서 flat pricing을 유지할 수 있습니다.
- 🚀 설치는 entropic.com에서 Claude Code CLI를 설치하고 Cursor에서 확장 연결만으로 몇 분 내에 완료할 수 있습니다.
- 🛠 파일 참조 기능을 통해 lib 폴더나 특정 파일을 지정해 단계별로 AI에게 코딩·수정 작업을 지시할 수 있습니다.
- 🔒 자동 실행 모드(Yolo Mode)와 허용/금지 도구 설정으로 Claude Code와 Cursor가 의도치 않은 명령 수행을 방지할 수 있습니다.
- 💡 스트리밍 응답을 지원해 토큰 단위로 결과를 즉시 확인하고 UX를 개선할 수 있습니다.
- 🔄 Sonnet 4(일상 작업)와 Opus 4(고급 코딩) 모델을 상황에 맞춰 전환해 리소스와 성능을 최적화합니다.
- 🎯 대규모 코드베이스 작업, 프로덕션 애플리케이션 개발, 속도가 중요한 팀 프로젝트에서 특히 효과적인 워크플로우를 제공합니다.
용어 설명
Claude Code
Entropic에서 제공하는 AI 코딩 CLI 및 IDE 확장 도구로, Opus 4와 Sonnet 4 모델을 네이티브로 지원합니다.
Cursor
Visual Studio Code를 기반으로 하는 AI 코드 에디터로, 빠른 완성, CMDK 컨텍스트 선택, Diff 뷰어 등을 갖추고 있습니다.
Windsor
Cursor와 유사하게 VS Code 포크로 개발된 코드 에디터이며 Claude Code 통합을 지원합니다.
Opus 4
Claude Code의 고급 코딩 모델로, 대규모 리팩터링 등에 최적화된 최고 성능을 제공합니다.
Sonnet 4
Claude Code의 일상적인 코드 생성에 적합한 모델로, Opus 4 대비 사용량이 적어 비용 관리를 수월하게 합니다.
CLI
명령줄 인터페이스(Command Line Interface)를 뜻하며, Claude Code 설치 및 설정 시 사용하는 방식입니다.
Diff Viewer
코드 변경 사항을 시각적으로 비교·확인할 수 있는 도구로, Cursor와 Claude Code 양쪽에서 지원됩니다.
파일 참조(file references)
AI에게 특정 파일이나 폴더를 지시해 해당 범위에서만 작업하도록 하는 기능입니다.
Streaming
토큰 단위로 생성된 AI 응답을 실시간으로 받아 사용자 경험을 개선하는 기능입니다.
Yolo Mode
Cursor의 자동 실행 모드로, 허용된 도구에 한해 AI가 사용자 확인 없이 명령을 실행하도록 설정할 수 있습니다.
도구 통합 소개
Claude Code가 Visual Studio Code, Cursor, Windsor, JetBrains IDE에서 지원되기 시작한 소식을 알리고, 영상에서 다룰 통합 설치와 활용 예제를 간략히 소개합니다.
Claude Code가 이제 Visual Studio Code, JetBrains, Cursor, Windsor 등 다양한 코드 에디터에 통합 가능해졌음을 소개합니다. Anthropic에서 큰 발표 없이 조용히 출시한 이 기능에 대해 설명합니다.
Claude Code와 Cursor를 결합하는 이유를 설명합니다. 두 세계의 최고를 얻을 수 있으며, 빠른 실행, diff 뷰어, 컨텍스트 선택 등의 기능을 제공합니다.
Claude Code와 Cursor 결합 이유
최신 Opus 4·Sonnet 4 모델을 네이티브로 사용해 더 나은 코드 생성 성능을 얻고, Cursor의 편집 툴(Diff 뷰어, CMDK 컨텍스트 선택 등)을 결합해 최적의 워크플로우를 구축하는 장점을 설명합니다.
Claude Code의 새로운 모델인 Opus 4와 Sonnet 4의 네이티브 최첨단 성능을 강조합니다. API를 통하지 않고 직접 사용할 수 있어 더 나은 결과와 코드 생성이 가능합니다.
OpenAI O3를 Cursor 밖에서 사용하는 이유를 설명합니다. 더 나은 결과를 얻고 비용을 절약할 수 있으며, $100 프로 플랜 내에서 무제한 사용이 가능합니다.
Opus 4의 성능을 설명합니다. 7시간 동안 지속 가능한 성능으로 리팩토링 작업을 실행할 수 있으며, 큰 프로젝트에서 비할 데 없는 성능을 보입니다. 코드베이스에 대한 컨텍스트를 항상 사용할 수 있는 것이 큰 장점입니다.
비용 및 요금제 비교
OpenAI O3와 Claude Code Max Plan을 조합해 flat pricing을 유지하는 방법을 안내하고, API 사용 시 발생할 수 있는 예기치 않은 비용 과다 청구 위험을 언급합니다.
Claude Code와 Cursor의 조합이 제공하는 장점들을 설명하며, 최고 모델의 성능과 빠른 자동완성, diff viewer 등의 기능을 소개합니다.
Cursor가 Visual Studio 포크로서 디버깅, 확장 프로그램, 통합 환경의 장점을 제공하면서도 Claude Code의 순수한 성능을 활용할 수 있다고 강조합니다.
사용 시기 및 활용 조건
비용 대비 시간 절감이 중요한 대규모 코드베이스 작업, 프로덕션 애플리케이션 개발, 팀 프로젝트 등에 이 통합이 특히 유용한 이유를 제시합니다.
Claude Code와 Cursor를 함께 사용할 때의 비용 문제를 경고하며, API 사용 시 세션당 20-30달러의 높은 비용이 발생할 수 있다고 설명합니다.
Claude Max 플랜(월 100-200달러)을 소개하며, 고정 요금제의 장점과 팀 환경에서의 활용 가치를 설명합니다.
현재 사용 중인 플랜 구성을 공유하며 - Cursor 20달러 플랜(무제한 자동완성 + 500 빠른 요청)과 OpenAI 프로 플랜의 조합으로 적절한 경계 내에서 작업한다고 설명합니다.
언제 이런 도구 조합을 사용해야 하는지에 대한 기준을 제시합니다 - 시간이 돈보다 중요할 때, 대규모 코드베이스 작업 시, 운영용 애플리케이션 개발 시가 적절하다고 조언합니다.
Claude Code의 뛰어난 컨텍스트 처리 능력과 Cursor의 특정 컨텍스트 선택 기능을 결합하여 최고의 코딩 환경을 만들 수 있다고 결론짓습니다.
Visual Studio Code와 Windsurf 같은 코드 에디터들이 Claude Code를 지원한다고 설명하며, 설명 부분을 마치고 실제 Cursor에서 Claude 설치 과정으로 넘어간다고 안내합니다.
Cursor에 Claude Code 설치하기
entropic.com에서 Claude Code CLI를 글로벌 설치하고, Cursor 터미널에 연결해 확장 아이콘이 표시되는 과정을 단계별로 설명합니다.
애플리케이션 개발 시 처음부터 시작하지 말고 스타터 프로젝트를 사용하라고 조언합니다. LLM이 오래된 라이브러리를 설치하는 문제와 일관성 유지의 어려움을 이유로 들며, 공식 웹사이트에서 프레임워크를 설치할 것을 권장합니다.
T3 Stack Start를 사용하는 이유를 설명합니다. ShadCN과 Tailwind CSS4가 포함된 수정된 버전을 만들어 사용하고 있으며, instructor 레포지토리에서 클론할 수 있다고 안내합니다.
프로젝트 레포지토리 구조와 접근 방법을 설명하며, AI chat example과 관련된 유용한 레포지토리들을 찾을 수 있는 위치를 안내합니다.
T3 Stack Start를 선택한 이유를 상세히 설명합니다. Vite 번들러의 빠른 개발 경험, Nuxt.js에 대한 개인적 선호, 그리고 React가 LLM 훈련에 더 적합해 코드 생성이 정확하다는 점을 언급합니다.
팀 작업이나 취업 시장에서 React의 중요성을 강조하며, 다른 언어나 프레임워크를 사용하더라도 Claude 설치 과정은 동일하다고 안내합니다. Windsurf나 Visual Studio Code에서도 절차가 같다고 확인해줍니다.
Claude 설치를 시작하며, anthropic.com의 claude-code 페이지에서 설치 명령어를 복사하는 방법을 안내합니다. Cursor에서 채팅창 대신 터미널을 사용해서 설치하는 것을 권장합니다.
Cursor에서 터미널을 열어 Claude Code를 설치하는 방법을 설명합니다. Ctrl+J로 터미널을 열고 npm install 명령어로 설치할 수 있습니다.
Claude Code 설치 후 Claude 계정이나 Pro 플랜, API 키를 연결해야 한다고 설명합니다. 초기 설정의 핵심 단계입니다.
Claude를 실행하면 Cursor 확장 프로그램이 설치되고, 상단에 Claude Code 아이콘이 나타납니다. 한 번에 하나의 활성 터미널만 사용할 수 있다는 제한사항을 언급합니다.
IDE 연결이 끊어졌을 때 슬래시(/) 명령어로 다시 연결하는 방법을 설명합니다. /ide 명령어로 현재 작업 중인 코드 에디터를 선택할 수 있습니다.
실습: 파일 선택 및 기본 사용법
파일 또는 특정 코드 블록을 CMDK로 선택해 Claude에게 지시하는 방법을 시연하고, 슬래시 명령어로 IDE를 재연결해 컨텍스트를 올바르게 인덱싱하는 과정을 다룹니다.
파일을 열 때 Claude가 해당 파일의 컨텍스트를 자동으로 인식해야 하지만, 때로는 다시 시작해야 할 수도 있습니다. quit 명령어로 재시작하면 파일 인덱싱이 다시 진행됩니다.
실시간 코드 선택 기능을 시연합니다. 코드를 선택하면 Claude가 선택된 줄 수를 표시하고, 선택된 코드에 대해 질문하거나 설명을 요청할 수 있습니다.
Pro 플랜 사용자는 빠른 요청을 소모하지 않고 Claude Code의 사용량 한도 내에서 작업할 수 있다고 설명합니다.
코드 변경 요청을 통해 Claude가 어떻게 코드를 수정하는지 보여줍니다. 'Welcome'을 'Hello from Claude Code'로 변경하라고 요청하면 자동으로 해당 코드를 생성합니다.
Cursor 내에서 Claude Code의 Diff 에디터 기능을 소개합니다. 변경사항을 시각적으로 확인할 수 있고, 녹색은 추가, 빨간색은 삭제를 의미하며 변경사항을 수락하거나 거부할 수 있습니다.
변경 사항 수락/거부 옵션을 설명하며, 터미널에서도 선택할 수 있고 세션 전체에 대해 설정할 수 있다고 안내합니다.
개발 서버를 시작하는 방법을 설명하며, 초보자는 채팅으로 간단히 요청할 수 있고, 직접 터미널을 사용할 수도 있다고 안내합니다.
pnpm run dev 명령어를 설명하며, package.json 파일에 정의된 dev, build, start, test 스크립트의 용도를 각각 설명합니다.
개발 서버를 실행하여 localhost:3001에서 미리보기를 확인하고, 프로젝트 탐색기와 채팅 인터페이스를 조작하는 방법을 보여줍니다.
개발 서버 실행 및 결과 확인
pnpm run dev로 개발 서버를 실행해 변경된 코드(H3 헤딩 변경)를 실시간 미리보기로 확인하며, Cursor 채팅 명령어로 서버 시작도 가능함을 알려줍니다.
파일 참조 기능을 시연하며, AI 채팅 UI와 API를 만드는 구체적인 프롬프트 예시를 제시합니다. lib 폴더를 참조하고 스트리밍 기능을 포함한 채팅 기능 구현 방법을 설명합니다.
파일 참조 활용한 AI 채팅 UI 생성
lib 및 API 폴더에 채팅 기능을 모킹(mocking) 형태로 생성하는 예제를 보여주고, Claude Code가 단계별 파일 참조를 통해 코드를 자동 완성하도록 시연합니다.
Claude에서도 동일한 파일 참조 방식이 작동한다고 설명하며, 아직 인덱싱되지 않은 폴더도 참조할 수 있다고 안내한 후 코드 생성을 시작합니다.
자동 실행 모드 설정에 대해 설명하며, 변경사항을 수동으로 승인하지 않고 에이전트가 자율적으로 실행되도록 할 수 있다고 소개합니다. 하지만 RM이나 git 같은 위험한 명령을 승인할 경우 파일 삭제나 원치 않는 커밋이 발생할 수 있어 주의가 필요하다고 경고합니다.
Cursor의 Yolo 모드를 소개하며, 자동 실행 모드에서는 허용 목록과 거부 목록을 설정할 수 있다고 설명합니다. 본인은 git과 RM을 거부 목록에 추가하여 파일 삭제나 git 작업 시 확인을 받도록 설정했다고 공유합니다.
Claude가 코드 생성을 완료한 후 브라우저에서 테스트해보니 채팅 창에서 오류가 발생했습니다. Claude에게 API 모의 데이터 사용 시 발생하는 오류의 원인을 찾아 수정해달라고 요청하여 디버깅을 진행합니다.
Claude가 문제를 수정했다고 알려주어 테스트해보니 채팅 기능이 정상 작동합니다. 모의 데이터를 사용하는 테스트 환경이지만 스트리밍 기능도 지원하여 답변이 실시간으로 생성되는 것을 확인할 수 있었습니다.
Claude 코드의 파일 참조 기능 사용법을 정리하며, 특정 변경사항을 위해 파일을 선택적으로 추가하는 방법을 추천합니다. 특히 코드베이스가 커지고 복잡해질수록 컨텍스트에 포함할 파일을 신중하게 선택해야 한다고 강조합니다.
안전 가드: 자동 실행 모드와 허용/금지 설정
Cursor의 Yolo Mode와 Claude Code의 allowed tools/deny tools 명령어를 이용해 불필요한 파일 삭제나 git 커밋을 막는 안전 가드를 설정하는 방법을 소개합니다.
안전장치 설정에 대해 소개하며, Claude 코드에서도 Cursor처럼 허용/거부 목록을 설정할 수 있다고 설명합니다. 슬래시 명령을 통해 접근할 수 있는 'allowed tools' 명령을 사용하여 특정 도구의 사용을 제한할 수 있습니다.
실제 예시로 'bash rm:*' 명령을 거부 목록에 추가하여 Claude가 파일을 삭제하지 못하도록 제한하는 방법을 보여줍니다. 이러한 설정은 로컬 프로젝트, 글로벌 프로젝트, 또는 사용자 설정에 저장할 수 있으며, 팀 간 공유도 가능합니다.
Claude 설정을 통해 의도하지 않은 변경을 방지하고 프로젝트 설정에서 허용/거부 권한을 관리하는 방법을 설명합니다.
모델 전환 및 최적화 옵션
일상 작업에 적합한 Sonnet 4와 고급 코딩에 강력한 Opus 4 모델을 상황에 맞춰 전환하는 slash model 명령어 사용법을 설명합니다.
허용 도구에 대한 자세한 정보는 instructor.ai 블로그에서 확인할 수 있으며, bash, git 등의 명령어 제한 설정 방법을 안내합니다.
대화 기록 지우기, 컨텍스트 해제, compact 모드 등 유용한 명령어들을 소개하며 Cursor의 유사한 기능과 비교 설명합니다.
비용 모니터링과 모델 선택에 대해 설명하며, 일상적 사용을 위한 Sonnet 4와 최고 성능의 Opus 4 모델 간 전환 방법을 안내합니다.
Claude Code와 Cursor 통합의 장단점을 정리하며, 취미 프로젝트나 초보자에게는 Cursor를, 고급 사용자에게는 Claude Code를 권장합니다.
마무리 및 권장 사항
Cursor 전용 사용자와 초보자는 Cursor만 단독으로 사용해도 충분하며, Claude Code CLI만 선호하는 개발자는 별도 에디터 없이 CLI로 활용할 수 있음을 권장하며 영상을 마무리합니다.
타임라인 정보가 없습니다.
안녕하세요, 이 영상에 오신 것을 환영합니다. 이제 Claude Code를
코드 에디터에 통합할 수 있게 되었습니다. 즉, Visual Studio Code와
JetBrains를 지원한다는 뜻입니다.
그리고 Cursor와 Windsor는 Visual Studio Code의
포크이기 때문에 이들도 지원됩니다. 즉,
이 영상에서 Cursor 내에서 Claude Code를
설치하는 방법과 사용법을 보여드리겠습니다.
AI 챗봇을 이용한 간단한 예제도 해보고,
몇 가지 예시와 함께 어떻게 작동하는지
보여드리겠습니다. 이를 진행하기 전에,
왜 이 둘을 결합하는 것이 의미가 있는지
설명해드리겠습니다. 최고의 AI 도구들의
장점을 모두 활용하기 위해서입니다. 많은 사람들이
이에 대해 이야기하지 않는 이유는 Claude와
Claude Code의 제작사인 Anthropic에서
이 업데이트에 대해 큰 발표를 하지 않았기 때문입니다.
저는 이 X 포스트를 발견했습니다. 그런데 이제
좋아하는 IDE에서 Claude Code를 사용할 수 있습니다.
제 생각에는 이게 큰 발표인데 한 줄로 끝이네요.
여기서 IDE 통합에 대한 링크를 찾을 수 있습니다.
네, 여기서 Visual Studio Code에서 사용할 수
있다고 나와 있습니다. 여기에는 Cursor와 Windsor도
포함되며, JetBrains IDE도 지원합니다. 여기서
빠른 실행, diff 뷰어, 컨텍스트 선택과 같은
멋진 기능들을 얻을 수 있습니다. 잠시 후에
살펴보겠습니다. 하지만 이 둘을 결합하는 것이
왜 의미가 있는지 살펴보기 전에,
Obsidian을 열어보겠습니다. Claude Code와
Cursor를 이렇게 결합하는 것이 의미가 있는
이유는 두 세계의 최고를 얻을 수 있기 때문입니다.
Claude Code의 새로운 모델인 Opus 4와
Sonnet 4로부터 네이티브 최첨단 성능을 얻을 수 있습니다.
즉, API를 통해 사용할 필요가 없습니다. 제 경험상,
자체 생태계 내에서 더 나은 결과와
더 나은 코드 생성을 얻을 수 있습니다.
즉, Anthropic 모델은 Claude Code에 최적화되어 있고
OpenAI 모델은 ChatGPT 모델에 최적화되어 있습니다.
이것이 바로 제가 Cursor 밖에서 OpenAI O3를
사용하는 것에 대해 많이 이야기한 이유입니다.
첫 번째는 더 나은 결과를 얻기 때문입니다.
에이전트가 거기서 훨씬 더 잘 작동합니다.
두 번째 이유는 비용을 절약하기 위해서입니다.
무제한으로 사용할 수 있어서 $100 프로 플랜
내에서 유지할 수 있습니다. 그리고 O3를
원하는 만큼 사용할 수 있습니다. 외부 API
비용에 대해 걱정할 필요가 없습니다. 물론,
우리는 사용 가능한 최고의 코딩 모델을 사용하고
싶고, 사용 가능한 최고의 도구로 실행하고 싶습니다.
이것이 바로 Claude Code가 우리에게 제공하는 것입니다.
기억하기로는 Sonnet 4와 Opus 4의
발표 포스트 어디선가 읽었는데, 지속 가능한
성능으로 약 7시간 동안 리팩토링 작업을
실행했다고 합니다. 그래서 Opus 4는 큰 프로젝트에
있어서도 비할 데 없는 성능을 보입니다. 그리고
코드베이스에 대한 컨텍스트를 항상 사용할 수 있습니다.
이것은 큰 장점입니다. Claude Code가 제공하는
이 두 가지 장점만으로도 Cursor에서 사용할
이유가 충분합니다. 하지만 Claude Code는 CLI입니다.
CLI는 항상 매트릭스에 있는 것처럼 보여서
꽤 멋지긴 하지만 초보자들을 겁먹게 합니다. 그래서
저는 비주얼 에디터를 고수하고 있습니다. 그리고 이것은
최고 모델과 빠른 자동완성을 위한 CMDK를 제공하는데,
특히 Cursor에서 더욱 효과적이죠. 우리는 diff viewer를 얻었고,
이제 Claude Code와 함께 사용할 수 있는 diff viewer도 있습니다
Cursor와 결합해서 말이죠. 그리고 저는 언제든지
모델을 바꾸고 규칙으로 출력을 제어할 수 있어요. Cursor
규칙으로 말이죠. 마지막으로 Cursor는
Visual Studio 포크라는 것입니다. 즉, 모든 도구를 얻을 수 있어요
디버깅, 확장 프로그램 설치, 그리고
하나의 에디터 내에서 명령 팔레트 사용까지. 이건
제가 놓치고 싶지 않은 부분이에요. 하지만
Claude Code의 파워를 정말 원해요.
Claude Code의 순수하고 원시적인 성능을
Cursor 안에서 사용하고 싶어요. 그래서 이들을 결합하는 것이
의미가 있고 팀으로 구성하는 거죠. 하지만 확실한 건
Claude Code와 Cursor를 함께 사용하면 비용이 크게 오를 거예요
Claude Code를 사용하든 Cursor를 사용하든
API로 Claude Code를 사용하는 건 추천하지 않아요
항상 비용을 추적해야 하고
예를 들어 큰 기능 하나에 얼마나 썼는지 모니터링해야 해요
20달러에서 30달러 정도요. 한 세션에
이 정도 비용이 들 수 있어요. 저는 이런 방식을
좋아하지 않아요. 고정 요금을 원하고
무제한으로 사용하고 싶어요. Claude Max 플랜으로
최근에 Max 플랜을 도입했는데,
월 100달러부터 시작할 수 있어요
많이 들리죠. 하지만 얻는 것과 비교하면
거의 가치가 있어요. 심지어 200달러 플랜도
아마 가치가 있을 거예요. 팀이 있다면
모든 팀원에게 플랜을 제공하고
Claude Max로 장비를 갖춰주어서 훨씬 빠르고
훨씬 효율적으로 만들고, 사용법만
배우면 돼요. 저는 지금 월 100달러
플랜을 사용하고 있어요. Cursor 플랜이 있어서 충분해요
여기 20달러 플랜인데
무제한 자동완성과 500번의 빠른 요청을 제공하고
이 한계 내에서 작업할 수 있어요. 그리고
OpenAI 프로 플랜도 있어요. 이 경계 내에서
고정 가격 정책을 갖고 있는 거죠. 이건 괜찮아요
제가 실제 운영용 애플리케이션을 만들고 있고
커서에 사용하고 있거든요. 그래서 이 모든 플랜을
갖는 것이 의미가 있어요. 이것이 언제 사용해야 하는지에 대한 요점인데
이 모든 도구를 갖는 것은 멋지지만
이들을 모두 쌓아 올리면
월말에 정말 높은 청구서를 받게 될 거예요
시간이 돈보다 더 중요할 때 사용하길 제안해요
이것이 저에게 가장 중요한 부분이에요
제가 더 빠를 때, 제품을 클라이언트에게 더 빠르게 전달할 수 있을 때
제 팀이 빠르고 효율적일 때
그것이 돈보다 더 중요해요. 대규모 코드베이스로 작업할 때
왜냐하면? 이 컨텍스트에 대해 이야기했는데
Claude Code는 컨텍스트 처리에 매우 좋아요
특정 컨텍스트를 위해 Cursor도 사용할 수 있고
CMDK를 사용해서 일부 블록을 선택하는 것처럼요
Claude Code와도 함께 사용할 수 있어요. 운영용
애플리케이션 구축은 시간이 돈보다
더 중요하다는 것과 맞아떨어져요
아니면 그냥 최고의 것을 원하고
도구들을 시도해보고 싶다면, 왜 안 될까요? 완전히
말이 돼요. 최고의 코딩 모델을 얻고
최고의 출력과 최고의 코드 에디터 중 하나를
사용하는 거예요. 다시 말하지만, Visual을 사용할 수 있어요
Visual Studio Code나 Windsurf를 사용할 수 있습니다. Windsurf도 Visual Studio Code의 포크 버전이에요.
이것도 지원됩니다. 좋네요.
설명은 이미 끝났으니까
이제 Cursor로 넘어가서 Claude를 설치해보겠습니다.
저는 이미 스타터 프로젝트를 열어놨어요. 저는
애플리케이션을 개발할 때 절대 처음부터 시작하지 않습니다. 여러분도
이렇게 하시길 강력히 추천합니다. 왜냐하면
LLM들은 종종 오래된 라이브러리들을 설치하는 경향이 있거든요.
그리고 새로운 애플리케이션을 생성할 때마다
스택이 조금씩 바뀌어서 일관성을 유지할 수 없어요.
항상 사용하고자 하는 프레임워크의 공식 웹사이트로 가세요.
NextJS의 경우 NextJS.org로 가세요.
NextJS를 사용하고 싶다면
공식 문서로 가서 거기서 설치하세요.
아니면 제가 지금 사용하고 있는 건 T3 Stack
Start인데, T3 Stack의 수정된 버전을 사용하고 있어요.
왜냐하면 기본으로 ShadCN과
Tailwind CSS4가 포함되어 있지 않아서 제가 직접 스타터를 만들었거든요.
ShadCN과 Tailwind CSS를 추가한 최소한의 스타터입니다.
instructor 레포지토리에서 클론할 수 있어요.
설명란에 링크를 올려두겠습니다.
여기서 code로 가서 로컬에 클론하면 됩니다.
그다음 Cursor에서 열면
제가 가진 것과 기본적으로 동일한 프로젝트를 Cursor에서 사용할 수 있어요.
이 레포지토리도 동일한 instructor 조직에
AI chat example이라는 이름으로 푸시할 예정입니다.
여기 repositories에서 AI chat example 하위에서 찾을 수 있을 거예요.
스타터는 여기서 찾을 수 있고,
더 많은 유용한 레포지토리들도 찾을 수 있어요.
왜 T3 Stack Start를 사용하냐면, 정말 정말
Vite 번들러와 전체 Vite 생태계를 좋아해서
정말 빠른 개발 경험을 제공해주거든요.
그리고 저는 Nuxt.js를 정말 좋아하고 Nuxt.js를 많이 사용하는데
이런 경험을 놓치고 싶지 않아요.
하지만 T3 Stack이 제 관심을 끈 이유는 React를 사용하기 때문이에요.
그리고 React는 LLM들이 매우 잘 훈련되어 있어서
코드 생성이 Vue나 Nuxt보다 훨씬 더 정확해요.
안타깝게도 말이죠. 팀에서 일하거나 구직 중이라면
대부분의 회사들이 React 개발자를 찾고 있어요.
그래서 React 세계에서 작업하는 것을 더 쉽게 만들고 싶어요.
하지만 T3 Stack을 사용하고 싶은 이유는
정말 빠르기 때문이에요. 아니면
자신의 레포지토리나 프로젝트에서 작업하고 싶다면
Python이나 다른 언어를 사용하더라도
걱정하지 마세요.
설치 과정은 모든 프로젝트에서 동일합니다. 한 번만 설치하면 되고
Claude가 프로젝트에 설치되면
모든 게 정상적으로 작동합니다.
다시 말하지만, Windsurf나 Visual Studio Code를 사용하더라도
절차는 정확히 동일합니다.
시작해보겠습니다. 먼저
Claude를 설치해야 합니다. anthropic.com의
claude-code로 가서 여기 있는 명령어를
복사 붙여넣기 하면 됩니다.
문서에서도 찾을 수 있어요. 네, 이 명령어입니다.
그다음 Cursor로 전환하세요. 설치하는 방법이 두 가지 있어요.
첫 번째는 여기 채팅창에 넣을 수 있지만
빠른 요청을 사용하게 되므로 추천하지 않아요.
그냥 터미널을 열겠습니다. Command+J 또는
Windows에서는 Control+J로 통합 터미널을 열면 됩니다.
윈도우에서 Ctrl+J를 누르면 됩니다. 그러면 여기
창이 열리고 여기에 npm install -g @anthropic-ai/claude-code를
붙여넣겠습니다.
그다음 엔터를 누르면 Claude Code가 설치됩니다.
저는 이미 Claude Code를 설치했기 때문에
Claude 계정을 연결하거나
Pro 플랜이나 API 키를 연결하기만 하면 됩니다. 그것이
초기 설정 단계에서 유일한 차이점입니다.
말씀드린 대로 Pro 플랜을 선택하거나, 만약
모든 것을 시도해보고 싶다면 API 키로
시작할 수도 있습니다. 그러면 여기에 도달하게 되고
그 다음에 여기에 Claude라고 입력하면 Claude가
확장 프로그램을 설치합니다. 즉, Cursor 확장 프로그램을
설치하는데, 여기 Claude Code 아래에서도 찾을 수 있습니다.
이제 확장 프로그램이 설치된 것을 볼 수 있습니다. 이것은
여기 위에 이 작은 아이콘을 제공합니다. 이 아이콘으로
언제나 Claude Code를 실행할 수 있지만
활성 터미널은 하나만 가질 수 있습니다. 즉, 여기서 사용하면
아래 터미널과의 연결이 끊어집니다. 자, 이것을
다시 닫고 종료하겠습니다. 그리고 여기도
닫겠습니다. IDE 연결이 끊어지면
Claude가 Cursor와 연결되지 않은 상태입니다.
이것은 매우 중요합니다. 만약 이
연결이 끊어지면, 슬래시(/)로 다시 연결할 수 있습니다.
슬래시를 입력하면 Claude Code에서 사용 가능한
모든 명령어를 볼 수 있어서 정말 멋집니다. 여기에
IDE라고 입력하고 엔터를 누른 다음 현재
작업 중인 코드 에디터를 선택합니다. 이것은 Cursor이고 엔터를 누릅니다.
이제 IDE가 연결되었고
여기 녹색 원으로 확인할 수 있습니다. 이제
Cmd+P로 파일을 열어보거나 여기
프로젝트 탐색기에서 바로 열 수도 있습니다. 보통
Claude는 여기 index.tsx 파일로 전환해야 하는데
컨텍스트에 있는 파일입니다. 지금은
그렇지 않은 상황입니다. 슬래시 quit을 입력하겠습니다.
Claude를 종료하고 다시 Claude라고 입력하면
파일을 다시 인덱싱하고 이제
index.tsx 파일에 대한 컨텍스트를 가지게 됩니다. 이렇게 하면 문제가 해결됩니다.
이제 여기서 Home 함수를 선택하겠습니다
그러면 Claude가 '7줄 선택됨'으로 전환하는 것을 볼 수 있습니다
Cursor로부터 컨텍스트를 받고 있습니다. 심지어
여기서 모든 줄을 선택할 수도 있고, 이것은 실시간 컨텍스트입니다
즉, 여기서 '간단한 단어로 설명해줘
Home이 왜 존재하고 어떻게 사용할 수 있는지'라고 입력할 수 있습니다.
지금은 Cursor를 사용하는 것이 아니라
Claude를 사용하고 있습니다. Pro 플랜을 사용 중이라면
빠른 요청을 소모하지 않습니다.
Claude Code의 사용량 한도 내에서 사용하게 됩니다. Claude Code가
이제 이 Welcome 함수가 무엇을 하는지 설명하고 있지만
이것은 별로 흥미롭지 않습니다. 아마 우리는
변경을 원할 것입니다. Welcome을 'Hello from Claude Code'로
변경하면, 해당 줄을 찾아서 이제
새로운 H3 헤딩을 위한 코드를 생성합니다. 그리고
지금 볼 수 있는 것은 새로운 Diff 에디터입니다
Claude Code와 함께하는 Cursor 내의 Diff 에디터입니다. 여기
위를 봐야 합니다. 먼저 제안된 변경사항을 수락할 수 있습니다
즉, 녹색은 추가되고 빨간색은
제거됩니다. 또는 제안된 변경사항을 거부할 수 있습니다
즉, Welcome을 유지하고 싶지만
이전 변경 사항과 함께 유지할 수도 있습니다. 터미널에서도 선택할 수 있어요.
예, 예 이렇게 말이죠. 그리고 이 세션에서는 다시 묻지 않기를 선택할 수 있고
아니오를 선택하면 변경 사항을 되돌립니다. 우리는 변경 사항을
수락하겠습니다. 그러면 여기에 Claude Code에서 안녕하세요가 나타납니다.
이제 개발 서버를 시작해서 어떻게 보이는지 보여드리겠습니다.
초보자라면 여기에 개발 서버 시작이라고 쓰기만 하면
Cursor가 시작하는 방법을 알아서 파악해줄 거예요.
아니면 여기서 새 터미널을 열 수도 있습니다.
터미널을 열고 터미널 간에 전환할 수 있고
그런 다음 명령어를 입력할 수 있습니다.
pnpm run dev라고 입력하세요. 왜 dev인가요?
명령어들이 package.json 안에 정의되어 있기 때문입니다.
package.json 안에서 dev 명령어를 찾을 수 있는데
이것이 개발 서버를 시작합니다. build는
프로덕션용 빌드를 위한 것이고, start는
프로덕션 모드에서 애플리케이션을 시작하는 것이고
test는 테스트를 위한 것입니다. 우리는 dev 서버를 시작하고 싶어요.
그래서 pnpm run dev를 실행하거나 채팅으로도 할 수 있습니다.
이제 엔터를 눌러서 dev 서버를 시작하겠습니다.
localhost 3001에서 사용할 수 있습니다.
클릭해서 열어보겠습니다. 왼쪽에서 localhost 3001의 미리보기를 볼 수 있어요.
cmd+b로 프로젝트 탐색기를 닫고
cmd+i로 Cursor 채팅을 열고
Claude로 다시 돌아가겠습니다.
그리고 index.tsx를 다시 열어보면
여기서 Claude Code에서 안녕하세요가 보입니다.
Tailwind CSS와 shadcn이 이 프로젝트에 설치되어 있어서
색상 간에 쉽게 전환할 수 있습니다.
이제 파일 참조 기능을 보여드리겠습니다.
예를 들어, 간단한 AI 채팅을 만들고 싶다면
채팅 API처럼 말이죠. 여기에
index.tsx에 간단한 채팅 UI 만들기라고 쓰면 됩니다.
이것이 바로 이 파일입니다. 그리고 채팅 AI의 프론트엔드를 위해
홈 라우트를 사용하고 싶고
사용자가 메시지를 보낼 수 있는 채팅 API를 만들고 싶습니다.
이 API는 단순히 목 더미 응답을 반환해야 합니다.
목과 더미는 미리 정의된 결과를 받는다는 뜻이고
실제 API에 연결하지 않는다는 의미입니다.
이것을 저장할 건데... 폴더가 있는지 봅시다.
네, lib 폴더를 만들고
여기서 이 폴더를 참조하겠습니다.
폴더를 드래그 앤 드롭할 수도 있어요.
채팅 기능을 위해 lib 안에 스트리밍 같은 기능을 넣겠습니다.
토큰별로 응답을 받고 싶다면
ChatGPT에서 이미 본 것처럼 입력하면
즉시 응답을 받을 수 있습니다.
토큰별로 말이죠. 그리고 API는
API/chat.ts 안에 배치될 것입니다. 이것은 매우 구체적인 프롬프트로
애플리케이션을 단계별로 구축하는 것입니다. 반복적으로 말이죠.
그리고 우리는 이 파일 참조를 사용해서 LLM이
이 파일들을 어디에 배치할지 알 수 있도록 합니다.
같은 방식으로 작동합니다. 빠르게 열어보겠습니다.
Claude에서도 같은 방식으로 작동합니다. 이것을 여기에 복사 붙여넣기하면
index.ts에 간단한 채팅 만들기라고 쓸 수 있습니다.
여기서 lib 폴더를 참조하겠습니다.
lib 폴더를 찾을 수 없다고 나옵니다. 여기서 볼 수 있듯이
아직 인덱싱되지 않았지만 여기에 그냥 두면
어차피 찾을 수 있을 것입니다. 좋아요, 시작을 누르고
코드 생성이 완료될 때까지 기다려보겠습니다.
그리고 제가 할 수 있는 건 변경사항을 수동으로
항상 승인할 필요가 없다는 것입니다. 'yes'를 클릭하고
'세션 동안 다시 묻지 않기'를 선택할 수 있습니다. 이것은
에이전트가 자율적으로 실행된다는 의미입니다. 제가
항상 수동으로 승인할 필요가 없다는 거죠. 하지만 주의하세요.
예를 들어, 삭제를 위한 RM 명령이나 git 명령을 승인하면
Claude가 모든 파일을 삭제하거나 승인하지 않은
파일들을 커밋할 수 있습니다. 이것은 Cursor의
욜로 모드와 같습니다. 여기 기능에서 찾을 수 있어요.
어디에 있지? 아, 여기 욜로 모드가 있네요.
자동 실행 모드를 활성화하면 에이전트가
확인을 요청하지 않고 도구를 실행할 수 있습니다.
명령 실행이나 파일 쓰기 같은 작업을 말이죠. 그리고
Cursor에서는 허용 목록이 있고 여기에는
거부 목록이 있습니다. 예를 들어 저는 git과 RM을 추가했어요.
Cursor가 파일을 삭제하거나 git에 무언가를
보내려고 할 때 저에게 물어보길 원하기 때문입니다. Claude는
코드 생성을 완료했습니다. 브라우저를 확인해보죠.
좋아요, 여기 채팅 창이 있네요. 죄송합니다.
오류가 발생했네요. 다시 시도해주세요. 좋아요. 예를 들어
이제 Claude에게 왜 이런 오류가 발생하는지 물어볼 수 있습니다.
API에서 모의 데이터를 사용하고 있으니, 문제를 찾아서
수정해주세요. 이제 디버깅을 할 것이고 무엇을 할 수 있는지
보게 될 것이며, 아마 더 많은 파일을 인덱싱할 것입니다.
문제를 찾을 수 있도록 말이죠. Claude가 문제가
수정되었다고 알려주네요. 테스트해보죠. 뭔가 시도해보겠습니다.
오 좋네요, 완벽합니다. 채팅에 무엇이든 입력할 수 있고
응답을 받을 수 있습니다. 모의 데이터입니다. 즉, 테스트용이지만
시도해보기에는 충분합니다. 스트리밍도 지원하는 것을
볼 수 있습니다. 답변을 조각으로 나누어 받는다는 뜻이고
이것은 UX에 더 좋습니다. 답변을 생성하는 동안
미리 읽을 수 있기 때문이죠. 이제 Claude 코드를
파일 참조와 함께 사용하는 방법을 보셨습니다.
파일을 추가하고 선택하는 것은 특정 변경사항을
만들고 싶을 때 매우 유용합니다. 저는 강력히
이것을 사용하기를 추천하며, Cursor에서도 사용하기를
추천합니다. 코드베이스가 커지고 크고
복잡해질수록, 컨텍스트에 무엇을 추가할지
매우 신중해야 할 것입니다. 마지막으로 보여드리고 싶은 것은
몇 가지 안전 장치입니다. 앞서 보여드린 대로
Cursor에서 자동 실행 모드를 실행하고 일부 도구를
허용 목록과 거부 목록에 추가할 수 있고
Claude 코드에서도 같은 작업을 할 수 있습니다.
이를 위해 슬래시를 누르면 모든 유용한 명령을
여기서 찾을 수 있고, 허용된 도구라고 불리는
명령이 있습니다. 그러면 화살표 키로 무엇을
허용할지 아니면 무엇을 거부할지
결정할 수 있습니다. 그렇게 규칙을 만들 수 있습니다.
예를 들어 거부를 선택하고
여기에 bash rm:*를 입력하고 엔터를 누르면
제가 한 것은 Claude가 어떤 파일도 삭제하지 못하도록 거부한 것입니다.
이제 이것을 로컬 프로젝트에 저장할지 아니면
글로벌 프로젝트 설정이나 사용자 설정에
추가할지 물어볼 것입니다. Claude 설정은
매우 강력합니다. 같은 가이드라인과 같은 규칙을
공유하고 싶다면 이 Claude 설정을 공유하면
되고 그렇게 할 수 있습니다.
이 Claude 설정을 공유할 수 있습니다.
Claude가 의도하지 않은 변경을 하는 것을 방지할 수 있습니다. 이것을
프로젝트 설정에 추가하겠습니다. 설정은
Claude 폴더 안의 settings.local.json에서
찾을 수 있습니다. 여기서 보시면
허용과 거부 권한이 있는 간단한 JSON 파일이
생성되었습니다. 여기에 예를 들어
bash git을 추가할 수 있습니다. Claude가
git 명령어를 실행하는 것을 원하지 않고, 이
허용 도구에 대해 더 알고 싶다면 instructor.ai에
블로그 포스트를 작성했습니다. 블로그 섹션의
최신 코딩 포스트에서 찾을 수 있습니다. 여기서
Claude Code에서 허용 도구를 사용하는 방법을 찾을 수 있고
허용 및 거부 목록에 사용할 수 있는
몇 가지 예시가 나열되어 있습니다. CLI가 아닌
JSON만 사용하고 싶다면 JSON 파일도 포함되어 있습니다. 그다음
몇 가지 유용한 명령어를 보여드리겠습니다. 대화 기록 지우기와
컨텍스트 해제하기입니다. 뭔가 엉망이 되어서
Claude가 느려진다면 완전한
대화 기록을 지우고 컨텍스트를
해제할 수 있습니다. compact 명령어도 같은 역할을 하지만
완전한 대화 기록을 요약해서 새로운
채팅에 넣어줍니다. 이는 Cursor에서와 같습니다.
Cursor에서는 slash reset context로 컨텍스트를 지울 수 있고
compact 모드 같은 것을 원한다면
여기에서 추가로 가서 past chats를 선택하면
이전 채팅을 참조할 수 있습니다. 이전
채팅이 요약되어 해당 채팅으로
계속할 수 있습니다. 그다음 비용에 대해 말씀드리면, 우리는
맥스 모드를 사용하고 있어서 비용이 없지만
API 버전을 사용한다면 여기서 비용을
모니터링할 수 있습니다. 보여드리고 싶은 한 가지는
slash model입니다. 여기서 일상적인 사용을 위한 Sonnet 4와
더 많은 사용량 제한이 있지만 현재 사용 가능한
최고의 코딩 모델인 Opus 4 사이를
전환할 수 있습니다. 이것이 기본 설정이지만
많은 작은 변경 작업을 하고 그렇게
복잡하지 않은 변경을 한다면 Sonnet으로
전환하는 것을 고려해보세요. 더 많은 사용량을 사용할 수 있지만
최고의 성능을 원하기 때문에
Opus 4를 사용하는 것이 권장됩니다. 여기까지 오셨다면
시청해주셔서 감사합니다. 왜 Cursor나
다른 코드 에디터에서 Claude Code를 사용하는 것이
유용한지 이해를 도울 수 있었기를 바랍니다.
이는 Anthropic 생태계 내에서 더 강력한 도구를
제공하고 이를 우리 코드 에디터로
가져다줍니다. 다시 말해 최고의 성능이지만
비용이 상승한다는 단점이 있습니다. 즉
효과적으로 사용하려면 맥스 플랜을 구독해야 할
가능성이 높습니다. 취미 프로젝트와
초보자에게는 Cursor를 사용하는 것을 권장합니다. Cursor는
충분히 강력하고 빠른 요청은 매우 잘
제어됩니다. 즉 20개를 사용하면 항상
더 많은 빠른 요청을 쌓을 수 있고
한 달에 20달러나 40달러, 60달러 정도 사용할 수 있으며
모든 것을 모니터링할 수 있습니다. 반드시 이
통합이 필요한 것은 아닙니다. 반면에 CLI로만
Claude Code를 사용하고 Visual Studio
Code 에디터를 선호하지 않는다면 Claude Code를 계속 사용하세요. 좋은
제품입니다. 더 많은 테스트를 해보고
다음 몇 주 동안 이 조합으로 실제
애플리케이션 작업을 할 예정이며 X에서
소식을 전해드리겠습니다. 영상이 마음에 드셨다면 좋아요를 누르고
구독을 클릭해주세요. 모든 정보는
아래 설명란에 넣어두겠습니다. 시청해주셔서 감사하고
다음 영상에서 뵙겠습니다. 안녕히 계세요