내가 Claude Code를 사용하는 방법과 최고의 팁

Steve (Builder.io) 구독자 124,000명

요약

이 영상에서는 VS Code 등 IDE에 간단히 설치해 터미널 UI로 동작하는 Claude Code 에이전트를 활용하는 방법과 다양한 팁을 제시합니다. 모델 전환(Opus, Sonnet), 이력 관리(clear), 권한 프롬프트 건너뛰기, GitHub 자동 코드 리뷰 연동부터 대규모 코드베이스 처리와 비용 효율적인 Max 모드 활용까지 폭넓게 다룹니다. 또한 큐잉 기능, 커스텀 훅·슬래시 명령어, 시각적 UI 대안까지 경험을 통해 얻은 핵심 가이드를 제공합니다.

주요 키워드

Claude Code Anthropic terminal UI slash commands Opus queue GitHub App hooks Sonnet Max 모드

하이라이트

🌟 IDE 확장 설치로 Cloud Code 에이전트를 VS Code, Cursor 등에서 바로 실행하고 다중 패널로 병렬 작업을 수행할 수 있습니다.
🔑 slash 명령어로 Opus와 Sonnet 모델을 상황에 맞게 전환하고, 파일 태그·포함 설정을 유연하게 조절할 수 있습니다.
⚡️ clear 명령으로 매 작업마다 이전 대화 이력을 제거해 토큰 소모를 줄이고, up arrow로 과거 세션 대화를 빠르게 조회할 수 있습니다.
🚀 `--dangerously-skip-permissions` 플래그를 사용해 매번 권한 확인 없이 에이전트를 신속히 실행할 수 있습니다.
📌 GitHub 앱을 연동하면 PR 생성 시 자동으로 코드 리뷰가 실행되어 버그·보안 취약점 중심의 간결한 피드백을 제공합니다.
⚙️ 터미널 UI 팁: shift+enter로 줄바꿈, shift+드래그로 파일 참조, control+v로 이미지 붙여넣기, escape로 실행 중지 등을 활용하세요.
🔍 18,000줄짜리 대형 React 파일도 문제없이 패치하며 Cursor 대비 대규모 코드베이스에서 안정적이고 정확하게 작업합니다.
💰 Anthropic이 직접 개발한 Opus 모델 기반으로 Cursor보다 비용을 절감하면서 최대 성능을 누릴 수 있습니다.
🕒 큐잉 기능으로 여러 프롬프트를 대기열에 등록해 사용자의 개입이 필요한 시점에만 실행하도록 최적화할 수 있습니다.
🛠️ 커스텀 훅·슬래시 명령어 생성과 프로젝트별 메모리 설정으로 반복 작업을 자동화하고 에이전트의 사전 지식을 관리할 수 있습니다
🎨 builder.io VS Code 확장으로 터미널 로직을 그대로 유지하며 시각적 UI/디자인 모드(Figma 스타일)에서 정밀 편집이 가능합니다.

용어 설명

terminal UI

명령줄 환경에서 작동하는 텍스트 기반 사용자 인터페이스

slash commands(슬래시 명령어)

‘/’로 시작해 에이전트에 특정 작업을 지시하는 명령어

agent(에이전트)

코드베이스에서 자동으로 작업을 수행하는 AI 프로그램

Opus

Anthropic이 제공하는 고성능 코딩 모델로 빠르고 정확한 코드 생성 지원

Sonnet

Anthropic의 비용 효율형 코딩 모델로 Opus 대비 저렴하게 사용할 수 있음

pull request (PR)

GitHub에서 코드 변경 사항을 검토·병합하기 위한 요청

queue(큐잉)

여러 작업을 순차적으로 처리하기 위해 대기열에 등록하는 기능

hooks(후크)

코드 편집 전·후에 자동으로 실행될 스크립트나 명령 설정

몇 주간 Cursor 에이전트 대신 CLAUDE CODE를 선택한 이유와 설치 방법을 소개합니다. VS Code, Cursor, Windsurf 등 IDE에 빠르게 통합 가능한 확장 설치만으로 Cloud Code를 실행할 수 있습니다.

[00:00] 지난 몇 주 동안 Cursor 에이전트에서 Claude Code로 완전히 전환했으며, 이제 Claude Code 사용법과 최고의 팁들을 소개합니다.

[00:07] 먼저 VS Code, Cursor, Windsurf 등과 호환되는 확장 프로그램을 설치하여 IDE에서 Claude Code를 쉽게 실행할 수 있도록 합니다.

[00:16] 여전히 Cursor를 기본으로 사용하지만 Claude Code를 여러 패널에서 동시에 열어 병렬 작업을 수행하며, 열린 파일은 자동으로 컨텍스트에 포함됩니다.

Cloud Code는 터미널 UI로 작동하며, 열린 파일을 자동 컨텍스트로 가져옵니다. 다중 패널에서 병렬 작업이 가능하고, slash 명령어로 파일 태그·포함 여부를 직관적으로 설정할 수 있습니다.

[00:41] Claude의 터미널 UI는 처음에 망설였지만 실제로는 잘 만들어졌으며, 파일 태그와 슬래시 명령어 기능이 훌륭합니다.

`/model` 명령어로 Opus와 Sonnet 사이를 전환하며, 기본 설정은 Opus가 사용량 50%까지 실행 후 Sonnet으로 자동 전환됩니다. 두 모델 모두 우수하지만 Opus가 소폭 더 정밀합니다.

[00:52] model 명령어를 자주 사용하며 보통 Opus를 선택하지만, 많은 사람들은 기본 설정을 사용하면 됩니다. 사용량 50%까지는 Opus를, 그 이후에는 Sonnet을 사용합니다.

`clear` 명령으로 대화 이력을 초기화해 매번 불필요한 토큰 소모를 줄입니다. up arrow로 이전 세션 채팅을 불러올 수 있으며, `--dangerously-skip-permissions` 옵션으로 권한 프롬프트를 생략해 에이전트를 빠르게 실행합니다.

[01:14] clear 명령어를 자주 사용하여 새로운 작업마다 채팅 기록을 지웁니다. 모든 채팅 기록을 토큰에 포함시키거나 Claude가 압축하도록 할 필요가 없기 때문입니다.

[01:33] 위쪽 화살표로 이전 세션의 채팅을 포함한 과거 채팅으로 돌아갈 수 있어서, Claude를 닫고 다시 열어도 이전 세션에 접근할 수 있습니다.

[01:46] Claude의 가장 짜증나는 점은 프롬프트 입력 후 작업을 시작하면, 다른 일을 하고 돌아왔을 때 파일 편집이나 bash 명령어 실행 권한을 계속 요청한다는 것입니다.

[02:15] 이러한 권한 요청 문제를 해결하기 위해 Claude Code를 열 때마다 빠르게 Command C를 누르는 방법을 사용합니다.

[02:20] Claude Code를 실행할 때 dangerously skip permissions 명령을 사용하는 방법을 설명합니다. 이는 Cursor의 YOLO 모드와 유사하며, 약간의 위험성이 있지만 실제로는 안전하게 사용할 수 있다고 조언합니다.

GitHub App 설치 후 PR 생성 시 Claude Code가 자동으로 코드 리뷰를 수행합니다. 버그·보안 취약점 위주로 간결한 피드백을 제공해 AI 리뷰를 워크플로우에 자연스럽게 통합할 수 있습니다.

[02:42] GitHub 앱 설치를 통한 자동 코드 리뷰 기능을 소개합니다. AI가 인간보다 버그를 더 잘 찾아내는 경우가 있으며, 실제 버그를 발견하는 사례들을 공유합니다.

[03:16] 코드 리뷰 설정 시 프롬프트를 수정하는 방법을 설명합니다. 너무 장황한 리뷰 대신 버그와 보안 문제에만 집중하도록 설정하는 것이 중요하다고 강조합니다.

shift+enter로 줄바꿈 추가, shift+드래그로 파일 참조, control+v로 이미지 붙여넣기, escape로 실행 중지, double escape로 이전 메시지 목록 표시 등이 가능한 숨은 단축키를 설명합니다.

[03:48] 터미널 인터페이스 사용 시 유용한 팁들을 제공합니다. Shift Enter로 새 줄 추가하기, 파일 드래그 앤 드롭 기능, 그리고 이미지 붙여넣기 시 Control+V 사용법을 안내합니다.

[04:32] Claude 작업 중지 방법에 대한 중요한 팁을 제공합니다. 일반적인 C 키가 아닌 다른 방법을 사용해야 하며, Control C를 두 번 누르면 완전히 종료된다고 설명합니다.

[04:40] Claude Code의 기본 단축키 사용법을 설명합니다. Claude를 중단하려면 Escape 키를 사용하고, 이전 메시지로 이동하려면 Escape를 두 번 누르면 됩니다.

[04:55] Claude Code가 뛰어난 이유를 설명하기 시작합니다. Builder에서 18,000줄의 거대한 React 컴포넌트를 다루는 경험을 바탕으로 Claude Code의 장점을 소개합니다.

18,000줄짜리 대형 React 파일도 Claude Code는 문제없이 업데이트합니다. Cursor 대비 파일 패치 안정성이 높고, 대규모 코드베이스에서 에이전트를 거의 방치해도 작업이 잘 진행됩니다.

[05:07] Cursor와 비교했을 때 Claude Code의 우수성을 강조합니다. Cursor는 패치 해결과 대용량 파일 처리에서 어려움을 겪는 반면, Claude Code는 이런 문제가 전혀 없다고 설명합니다.

[05:40] Claude Code가 대규모 코드베이스 탐색, 패턴 찾기, 코드 간의 관계 파악에서 뛰어난 성능을 보인다고 설명합니다.

[05:52] Cursor와 Anthropic의 근본적인 차이점을 분석합니다. Cursor는 범용 에이전트로 여러 모델을 지원해야 하지만, Anthropic은 자체 모델에만 집중할 수 있는 구조적 장점을 가지고 있습니다.

Anthropic이 자체 개발한 Opus·Sonnet 모델을 최적화해 Cloud Code에 바로 적용합니다. 모델 작동 원리와 학습 과정을 모두 알기 때문에 장애 발생 시 모델을 개선해 높은 일관성과 품질을 유지합니다.

[06:11] Anthropic이 최고의 코딩 모델을 만들고 Claude Code를 최적화하는 방식을 설명합니다. 문제가 생기면 모델 자체를 개선하는 접근법을 취한다고 강조합니다.

[06:31] 비용과 가치 측면에서 Anthropic의 경쟁력을 설명합니다. 중간 업체 없이 직접 서비스를 제공하기 때문에 더 저렴한 가격으로 더 나은 성능을 제공할 수 있다고 결론짓습니다.

[06:59] Claude Code의 전문가 팀이 최저 가격으로 최고 성능을 제공하며 모델과 제품을 지속적으로 개선하고 있어 현재 시간과 돈을 투자하고 있다고 설명합니다.

Cloud Code가 표준 요금제를 지원하며, Max 모드는 247 시간 동안 최고 성능을 제공하면서도 월 100달러로 책정되어 인간 개발자 시간 대비 압도적 비용 효율을 자랑합니다.

[07:10] 맥스 모드 요금제에 대해 설명하며, 월 100달러로 24시간 지능형 코더를 사용하는 것이 실제 엔지니어 인건비와 비교해 매우 저렴하다고 강조합니다.

[07:36] 개인이나 회사에서 비용을 정당화하기 어렵다면, 수동 인간 작업 대비 얻는 이익을 고려해야 한다고 조언합니다.

[07:44] Claude Code의 큐잉 기능을 소개하며, 이전에는 메모장에 프롬프트를 작성하고 일일이 붙여넣는 비효율적인 방식을 사용했다고 설명합니다.

[08:16] Claude의 메시지 큐잉 기능을 통해 여러 작업을 미리 설정하고, Claude가 적절한 시점에 자동으로 처리하는 똑똑한 시스템을 활용할 수 있다고 소개합니다.

여러 프롬프트를 큐에 등록해 순차 실행하도록 설정할 수 있습니다. 에이전트가 사용자 입력을 필요로 할 때만 일시 중지하며, 백그라운드에서 연속 작업을 자동으로 처리합니다.

[08:48] Claude의 커스텀 훅과 슬래시 커맨드 기능을 설명하며, Claude가 이러한 기능들을 직접 만들어주고 설정 파일과 프로젝트 개요를 제공해 효율성을 높인다고 설명합니다.

[09:16] 코드 편집이 승인되기 전에 실행될 코드와 후크를 설정하는 방법을 설명합니다. prettier 실행이나 타입 체크와 같은 코드 품질 검증 도구들을 자동으로 실행하도록 구성할 수 있습니다.

프로젝트별 설정 파일에 커스텀 훅과 slash 명령어를 작성해 반복 작업을 자동화합니다. 기억해야 할 사항을 Markdown 파일에 저장하면 에이전트가 우선적으로 참조해 빠르게 대응합니다.

[09:29] 커스텀 슬래시 명령 추가 방법을 소개합니다. acloud/commands 폴더에 .md 파일을 만들어 자연어로 명령을 작성하면, 슬래시 명령으로 쉽게 실행할 수 있습니다.

[09:48] 하위 폴더 구조를 활용한 명령 조직화와 파운드 기호를 사용한 빠른 메모리 추가 기능을 설명합니다. MUI 컴포넌트 사용 같은 규칙을 자동으로 저장하고 적용할 수 있습니다.

[10:09] Claude.md 파일의 계층적 구조와 메모리 시스템을 설명합니다. 프로젝트 레벨과 중첩 디렉터리에 각각 파일을 둘 수 있으며, 전역 사용자 메모리와 로컬 프로젝트 메모리로 구분할 수 있습니다.

[10:28] Claude Code의 터미널 기반 인터페이스의 제약사항을 지적합니다. 긴 응답 입력과 이스케이프 키 사용의 불편함, 직관적인 클릭 편집의 부재 등이 주요 문제점입니다.

builder.io VS Code 확장으로 터미널 로직을 그대로 유지하며, 시각적 채팅 인터페이스와 Figma 스타일 디자인 모드를 이용해 정밀 편집 및 실시간 미리보기를 지원합니다.

[10:45] UI 선호 사용자를 위한 해결책으로 builder.io VS Code cursor windsurf 확장을 소개합니다. IDE 사이드바에서 시각적 인터페이스로 전환할 수 있으며, 채팅 다이나믹과 라이브 프리뷰 기능을 제공합니다.

[11:03] 이 도구가 Claude Code와 거의 동일한 에이전트와 접근 방식을 사용하며, 가장 작은 세부사항까지 리버스 엔지니어링했다고 설명합니다. 변경사항을 빠르게 미리 볼 수 있는 장점이 있습니다.

[11:24] 디자인 모드로 전환하여 Figma 스타일의 인터페이스를 사용할 수 있음을 보여줍니다. 시각적 편집과 코드의 세계를 연결하여 UI 패턴을 빠르게 탐색하고 정밀한 편집을 할 수 있습니다.

터미널과 시각적 UI를 모두 활용해 Claude Code 에이전트를 효과적으로 사용하는 팁을 공유했습니다. 설치부터 고급 기능, 워크플로우 통합까지 적용해 생산성을 극대화해보세요.

[11:43] 브라우저 인터페이스에서도 모든 기능을 사용할 수 있으며, 팀원들이 디자인 시스템과 애플리케이션으로 프로토타입을 만들 수 있다고 설명합니다.

[11:52] 풀 리퀘스트 워크플로우를 설명합니다. 변경사항에 만족하면 PR을 생성하고, 어디든 코멘트를 남겨 빌드 봇과 소통할 수 있습니다. 에이전트가 피드백을 반영한 커밋을 자동으로 푸시합니다.

[00:00] 지난 몇 주 동안 저는

[00:01] Cursor의 에이전트에서 Claude Code로

[00:03] 완전히 갈아탔고 전혀 뒤돌아보지 않고 있습니다.

[00:05] Claude Code를 어떻게 사용하는지와 최고의 팁들을 알려드리겠습니다.

[00:07] 먼저 확장 프로그램을 설치하는데,

[00:09] 이것은 VS Code와 Cursor,

[00:11] 그리고 Windsurf 같은 다른 포크들과도 호환됩니다.

[00:13] 많은 기능을 제공하지는 않지만

[00:15] IDE에서 Claude Code를 바로 실행하기

[00:16] 매우 쉽게 만들어줍니다. 저는 여전히

[00:18] Cursor를 기본으로 사용하는데, 가끔씩

[00:20] Command K와 탭 완성 기능을 사용하기

[00:22] 좋기 때문입니다. 하지만 에이전트 사이드바를

[00:24] 건드린 유일한 경우는 Claude가

[00:25] 다운되었을 때뿐입니다. 이 확장 프로그램이

[00:27] 하는 일은 Claude Code를 여는 것을

[00:29] 정말 쉽게 만들어주는 것입니다. 저는 종종

[00:31] 여러 패널에서 동시에 열어둡니다. 그래서

[00:33] 코드베이스의 다른 부분과

[00:34] 다른 파일들을 작업하는 한

[00:36] 병렬로 작업할 수 있습니다. 그리고 파일이

[00:37] 열려있으면 자동으로 그것을 컨텍스트에

[00:39] 가져옵니다. 이제 Claude는 터미널

[00:41] UI를 사용하는데, 처음에는 매우

[00:43] 망설였지만 실제로는 정말

[00:45] 잘 만들어졌습니다. 파일을 쉽게

[00:47] 태그하고 포함할 내용을

[00:48] 선택할 수 있습니다. 훌륭한 슬래시 명령어들도

[00:50] 있습니다. 그런데 말하자면, 저는

[00:52] model 명령어를 많이 사용하고 보통

[00:54] Opus를 사용합니다. Opus에 문제가 있을 때는

[00:56] Sonnet으로 바꾸는데, 가끔 그런 일이 있습니다.

[00:58] 많은 사람들은 아마

[00:59] 기본 설정을 사용하면 될 것입니다. 사용량의

[01:01] 50%에 도달할 때까지 Opus를 사용하고

[01:03] 그 다음에는 더 비용 효율적인

[01:04] Sonnet으로 바뀝니다. 저는 Opus가

[01:07] 예전 3.5처럼 Sonnet 대비 느리지 않다는 것을

[01:09] 발견했습니다. 적어도 눈에 띄게는 아닙니다.

[01:11] 두 모델 모두 매우 좋지만 Opus가

[01:12] 조금 더 낫습니다. 제가 많이 사용하는

[01:14] 다른 명령어들 중에서 clear를 정말 많이 사용합니다.

[01:16] 제 생각에는 새로운 작업을 할 때마다 clear를 사용해야 합니다.

[01:18] 매번 모든 채팅 기록을 토큰에 포함시킬 필요가 없습니다.

[01:20] 그리고 Claude가 항상 그것을

[01:22] 압축하려고 시도할 필요도 없습니다.

[01:23] 압축은 기본적으로 또 다른 LLM 호출을 실행해서

[01:25] 많은 토큰을 출력하는데, 대화 기록을

[01:28] 요약하는 데 시간이 걸립니다.

[01:30] 그냥 clear를 사용하세요. 새로운 작업을

[01:32] 할 때마다 clear를 사용하세요.

[01:33] 위쪽 화살표 키는 이전 세션의

[01:35] 채팅을 포함한 과거 채팅으로 돌아갑니다.

[01:37] Claude를 닫고 다시 열어도, 예를 들어

[01:40] 다른 날에 말이죠, 여전히 이전

[01:42] 세션으로 돌아갈 수 있습니다.

[01:44] Claude를 열 때 말하자면, 정말

[01:46] 짜증나는 일이 하나 있는데,

[01:47] 프롬프트를 입력하면 바로 작업을 시작합니다.

[01:50] 에이전트는 시간이 걸리니까 저는

[01:51] 다른 일을 하러 갑니다. Slack을 확인하고

[01:53] 이메일을 확인하죠. 수동으로

[01:54] 코딩도 할 수 있습니다. 하지만 문제는

[01:56] 돌아와서 보면 이 파일을 편집할 수

[01:59] 있냐고 물어보고 있다는 겁니다. 정말 짜증납니다.

[02:01] 네, 파일을 편집할 수 있습니다. 그게

[02:03] 에이전트의 역할이니까요. 파일을 편집하세요.

[02:04] 그리고 전역적으로 그냥 파일을

[02:06] 편집하라고 말할 방법을 찾지 못했습니다. 괜찮다고요.

[02:09] 그러면 다시 일을 하러 가서

[02:10] 돌아와 보면 기본적인 bash 명령어를

[02:12] 실행할 수 있냐고 물어보고 있습니다. lint를 실행할 수 있냐고요. 네.

[02:15] 오 맙소사. 네. 그래서 제가

[02:16] 실제로 하는 일은 Claude Code를

[02:18] 열 때마다 빠르게 Command C를 누르는 것입니다.

[02:20] 그리고 나서 claude dangerously skip permissions 명령을 실행하고 엔터를 누릅니다.

[02:23] 소리만큼 위험하지는 않습니다.

[02:25] 이전에 Cursor가 YOLO 모드라고 불렀던 것과 유사합니다.

[02:27] 그리고 악의적인 에이전트가 예상치 못한 파괴적인 명령을 실행할 수 있는 약간의 위험이 있긴 하지만,

[02:29] 제 인생에서 그런 일이 일어나는 것을 본 적이 없습니다.

[02:31] 그래서 위험을 감수할지는 여러분 선택입니다.

[02:32] 저는 몇 주 동안 사용해왔고

[02:34] 전혀 문제가 없었습니다.

[02:35] 지금까지 몇 주 동안 사용했는데

[02:37] 아무런 문제를 겪지 않았습니다.

[02:39] 이제 슬래시 명령어에 대해 말하자면,

[02:40] Claude에는 많은 명령어가 있습니다.

[02:42] 정말 멋진 기능 중 하나는 GitHub 앱을 설치하는 것입니다.

[02:44] 이렇게 하면 PR을 제출할 때

[02:46] Claude가 자동으로 코드 리뷰를 해줍니다.

[02:48] 이것은 정말 멋진 기능입니다.

[02:49] 왜냐하면 AI 도구를 더 많이 사용하면서

[02:51] 풀 리퀘스트의 양이 늘어날 수 있기 때문입니다.

[02:53] 그리고 특정 경우에는 AI 모델이

[02:55] 인간보다 버그를 더 잘 찾는다는 것을 발견했습니다.

[02:56] 솔직히 어떤 면에서는 더 많은 노력을 기울이기 때문입니다.

[02:59] 인간들이 일반적으로 nitpick하는 것을 보았는데,

[03:00] 어떤 면에서는 더 많은 노력을 기울이기 때문입니다.

[03:02] 인간들이 일반적으로 nitpick하는 것을 보았는데,

[03:04] 오, 이것은 다르게 명명될 수 있다는 식으로 말입니다.

[03:05] 그런 것들 말이죠. 하지만 Claude가

[03:07] 실제로 인간이 놓친 진짜 버그를 찾는 것을 봤습니다.

[03:09] 상당한 경우에 말입니다.

[03:11] 이것에 대한 주요 팁은 Claude가

[03:13] claude code review.yaml을 추가할 것입니다.

[03:16] 이미 프롬프트가 들어있을 것입니다.

[03:17] 제가 사용하는 프롬프트는 다음과 같습니다.

[03:20] 이 도구와 함께 발견한 원래 문제는

[03:21] 너무 장황했다는 것입니다.

[03:23] 모든 종류의 미묘하고 중요하지 않은 것들에 대해 댓글을 달고

[03:26] 모든 PR에 대해 전체 에세이를 작성했습니다.

[03:28] AI가 리뷰해주기를 가장 원하는 것은

[03:29] 버그와 잠재적인 취약점입니다.

[03:31] 그래서 우리는 버그와 보안 문제만 찾고

[03:33] 버그와 잠재적인 취약점에 대해서만 보고하고

[03:35] 간결하게 하라고 말합니다.

[03:37] 멋진 부분은 이 명령을 실행하고 그 한 줄을 편집하면

[03:39] 워크플로우에 꽤 멋진 새로운 기능이 추가됩니다.

[03:42] 다른 정말 멋진 기능들도 많이 있습니다.

[03:43] 풀 리퀘스트에서 댓글을 가져와서

[03:45] 처리하고, 풀 리퀘스트를 리뷰하고

[03:46] 터미널 설정 같은 것들을 할 수 있습니다.

[03:48] 왜냐하면 기본적으로 shift enter는

[03:50] 새 줄 추가에 작동하지 않기 때문입니다.

[03:52] 하지만 우리는 그냥 엔터를 누르고

[03:54] 대신 해달라고 말할 수 있습니다.

[03:56] 그러면 완성됩니다.

[03:58] Shift enter가 새 줄을 추가합니다. 아름답죠.

[04:00] 터미널 인터페이스를 사용하는 것의 특이한 점에 대해 말하자면

[04:01] 클라우드 코드에서 놀랍게도

[04:03] 실제로 파일을 드래그할 수 있습니다.

[04:05] Cursor나 아마도 VS Code 같은 도구에서는

[04:07] 새 탭에서 열립니다.

[04:08] 하지만 shift를 누르고 드래그하면

[04:11] 실제로 팝업되어 필요한 것처럼 참조됩니다.

[04:13] 이제 작동하지 않는 한 가지는

[04:14] 클립보드에서 이미지를 붙여넣는 것입니다.

[04:16] 그래서 Mac에서

[04:18] 이것의 스크린샷을 찍고

[04:20] command V를 누르면 아무것도 일어나지 않습니다.

[04:21] 이것에 대한 특별한 트릭은

[04:24] control + v가 실제로 작동한다는 것입니다.

[04:26] 이미지가 붙여넣어졌습니다.

[04:27] 그것을 알아내는 데 오랜 시간이 걸렸습니다.

[04:29] 알아내는 데 너무 오래 걸린 또 다른 것은

[04:30] 이것이 일반적인 UI 인터페이스가 아니기 때문에

[04:32] 클라우드가 작업 중일 때입니다.

[04:34] 저는 항상 C를 눌러서 멈추라고 말하려고 했습니다.

[04:35] 그것은 작동하지 않습니다.

[04:38] Control C를 두 번 누르면 그냥 완전히 종료됩니다.

[04:40] 완전히 종료해 버립니다. 앗. 실제로 Claude를 중단하려면

[04:42] Escape 키를 눌러야 합니다. 그리고 이전 메시지로

[04:43] 이동하고 싶다면

[04:45] Escape를 두 번 눌러서 이전 메시지 목록을 보고

[04:47] 원하는 메시지로 다시 돌아갈 수 있습니다.

[04:49] Claude Code에는 이런 숨겨진 기능들이 많습니다.

[04:50] 만약 당신이 하드코어 사용자라면

[04:52] Claude에는 Vim 모드도 있지만,

[04:54] 저는 Vim 사용자가 아니어서 사용하지 않습니다.

[04:55] 이제 Claude Code가 왜 그렇게 좋은지에 대해

[04:57] 좀 더 이야기해 봅시다. Builder에서

[05:00] 저희는 하나의 React 컴포넌트를 가지고 있는데

[05:02] 너무 커서 맨 아래까지 스크롤하기도 어려울 정도입니다.

[05:05] 18,000줄의 코드입니다.

[05:07] 이 파일을 안정적으로 업데이트하고 Claude Code에

[05:09] 알려줄 수 있는 AI 에이전트는 지금까지 없었습니다.

[05:11] Cursor를 사용할 때도

[05:13] 여전히 많은 작은 문제들을 발견했습니다. 패치를 해결하는 데

[05:15] 어려움을 겪고 종종 파일을 다시 작성해야 합니다.

[05:17] 극도로 큰 파일을 업데이트하는 데 정말 어려움을 겪습니다.

[05:19] Claude Code는 이 파일을 업데이트하는 데

[05:21] 전혀 문제가 없습니다. 정말 전혀요.

[05:24] Claude Code는 대규모 코드베이스와

[05:26] 복잡한 작업에서 훌륭하게 작동합니다.

[05:28] 그리고 멈춰버리는 일이 정말 드뭅니다.

[05:31] 그런 일을 겪었는지 확신할 수 없을 정도입니다.

[05:33] 반면 Cursor의 경우

[05:35] 더 많이 관리해야 하는 느낌이고, 멈췄을 때

[05:37] 중단하고 아마도 이것은 좋지 않은

[05:39] 요청이었구나 깨닫게 됩니다.

[05:40] Claude는 또한 대규모 코드베이스를 탐색하는 데

[05:42] 뛰어납니다. 패턴을 찾고

[05:45] 코드의 다른 부분들 간의 관계를 이해하고

[05:46] 컴포넌트, 공유 상태와

[05:48] 같은 것들을 파악합니다. 솔직히 놀라울 정도입니다.

[05:50] 생각해보면

[05:52] Cursor는 다양한 모델을 지원하기 위한

[05:53] 범용 에이전트로 제품을 구축했습니다.

[05:55] 이를 위해서는

[05:57] 별도의 팀이 필요하고

[05:59] 그들은 커스텀 모델도 훈련시켰으며

[06:00] 더 많은 레이어와 요구사항들이 존재합니다.

[06:03] 또한 여기서 일어나는 것들뿐만 아니라

[06:04] Cursor는 핵심 AI를 담당하는

[06:06] 핵심 모델을 구축하거나 제어하지 않습니다.

[06:09] 이를 Anthropic과 비교해보면

[06:11] 그들은 확실히 최고의 코딩 모델을 만들고

[06:13] 따라서 Claude Code가 모델을 가장 잘 사용하도록 만듭니다.

[06:15] 그리고 Claude Code에서 문제에 부딪히면

[06:16] 모델을 개선하러 갑니다.

[06:18] 그들은 자신들의 모델을 지원하는 것에만 관심이 있습니다.

[06:19] 모델이 어떻게 작동하는지, 어떻게 훈련되는지,

[06:22] 그리고 어떻게 깊이 있게 사용하는지 모든 것을 알고 있습니다.

[06:24] 그리고 Claude Code에 필요한 것과 잘 작동하도록

[06:25] 모델을 계속 훈련시킵니다.

[06:27] 이것은 또한 Anthropic이 가능한 한 최소 비용으로

[06:29] 최대한의 가치를 제공할 수 있다는 의미입니다.

[06:31] 왜냐하면 그들에게만 돈을 지불하면 되기 때문입니다.

[06:33] 따라서 그들은 Cursor가 가진 상황과 같은

[06:35] 제약 없이 Opus와 같은 모델에 대한

[06:36] 최대 접근권을 제공하는 것으로 경쟁할 수 있습니다.

[06:38] Cursor도 돈을 벌어야 하는 상황 말이죠.

[06:40] 따라서 Cursor는 마진을 남겨야 하고

[06:43] Anthropic에서 이익을 얻어야 하는데, 이는 근본적으로

[06:45] Cursor를 사용할 때 어느 정도 더 많은 돈을 지불해야 한다는

[06:46] 의미이거나 그들이 더 많은 돈을 잃어야 한다는 의미인데

[06:48] 이는 지속 가능하지 않습니다.

[06:50] 따라서 저는 Anthropic 팀이 Claude Code로

[06:53] 이렇게 좋은 도구를 만든 것에 대해 칭찬합니다.

[06:55] 왜냐하면 그들은 최저 가격으로 최고의 성능을

[06:57] 제공할 수 있기 때문입니다.

[06:59] 전문가들로부터 최저 가격으로 직접 최고의 성능을 얻을 수 있습니다

[07:01] 그리고 그들의 모델과 제품을

[07:03] 전반적으로 더 나아지게 만들죠. 정말 똑똑하고

[07:05] 저는 현재 여기에 시간과

[07:07] 돈을 투자하고 있습니다

[07:09] 놀라운 결과를 보고 있기 때문이죠.

[07:10] 가격에 대해 말씀드리면, 저는 맥스 모드를 사용합니다.

[07:12] 이전에 Claude Code가 API

[07:14] 요금제를 기반으로 했던 것에 익숙하시다면,

[07:16] Claude Code는 이제 표준 요금제를 지원합니다.

[07:18] 제 생각에 맥스 모드는 완전히 훔치는 거예요.

[07:20] 만약 당신이 충격적으로 똑똑한 코더가

[07:23] 24시간 7일 내내 일하는 게 월 100달러의

[07:25] 가치가 없다고 생각한다면, 엔지니어링의

[07:27] 시간당 인건비가 얼마나 드는지

[07:29] 세계 어디를 봐도 진지하게 생각해보세요.

[07:32] 그보다 훨씬 더 비쌉니다.

[07:33] 몇 배는 더 말이죠.

[07:35] 만약 개인적으로나

[07:36] 회사에서 정당화하기 어렵다면,

[07:38] 이것이 실제 수동 인간 작업과 비교해

[07:40] 얼마나 큰 이익을 주었는지

[07:42] 항상 기억하세요. Claude Code의

[07:44] 또 다른 기능 중 제가 정말 맹세하는 것은

[07:46] 큐잉입니다. 메시지를 입력할 수 있어요.

[07:48] 더 많은 주석을 추가하라고 말이죠.

[07:50] 이것은 코드에 주석을 추가하는 스레드입니다.

[07:51] 그리고 종종 다음에 할 일을 생각하죠.

[07:53] 예전에는 메모장을 만들고

[07:55] 하고 싶은 다른 프롬프트들을

[07:57] 초안으로 작성하기 시작했습니다. 그리고

[07:59] 하나가 완료되면 가서 다음 것을 붙여넣고

[08:01] 엔터를 누르죠. 그게 Cursor로

[08:02] 했던 방식인데 정말 짜증났어요.

[08:03] 왜냐하면 저는 보통 일상을 보내면서

[08:05] Slack 메시지에 답하고, 이메일에 답하고,

[08:07] 다른 일을 하고 돌아와서

[08:09] 에이전트가 얼마나 오랫동안

[08:11] 놀고 있었는지 보게 되죠.

[08:13] 다음 프롬프트를 입력하고 떠나죠.

[08:14] 시간 효율적이지 않았어요.

[08:16] 하지만 이제 Claude로는 더 많은

[08:18] 메시지를 큐에 넣을 수 있습니다. 만약 다른 것을 생각나면,

[08:21] 실제로 JSX의 주요 덩어리에도 주석을 추가하라고 큐에 넣을 수 있고

[08:25] 계산된 값들에도 넣을 수 있어요.

[08:26] 그리고 훌륭한 점은 Claude가

[08:28] 언제 실제로 실행해야 하는지

[08:30] 정말 똑똑하게 알고 있다는 것입니다.

[08:32] 당신의 피드백이 필요하다면,

[08:33] 큐에 있는 메시지를 자동으로 실행하지 않아요.

[08:35] 꽤 똑똑한 시스템이지만,

[08:36] 뭔가 마무리되면 적절한 시점에

[08:39] 처리하기 시작합니다. 많은 것들을 큐에 넣고,

[08:40] 하루를 보내고, 많은 경우에

[08:42] 돌아와서 엄청난 양의 작업이

[08:44] 좋고 똑똑한 방식으로 완료된 것을 볼 수 있어요.

[08:46] 하지만 가끔씩 확인해보세요.

[08:47] 입력이 필요할 수 있거든요.

[08:48] Claude로 할 수 있는 몇 가지

[08:50] 다른 멋진 파워 기능들은 커스텀 훅과

[08:52] 커스텀 슬래시 커맨드를 추가하는 것입니다.

[08:54] 그리고 가장 멋진 점은 Claude가

[08:55] 그것들을 만들어줄 수 있다는 것입니다.

[08:57] 이 경우, 저는 Claude에게 몇 가지 기본

[08:58] 훅, 커맨드, 설정을 추가하라고 요청했고

[09:00] 쉽게 편집할 수 있는 설정 파일을

[09:01] 만들었습니다. 프로젝트 개요와

[09:04] 알아야 할 몇 가지 주요 명령어들을

[09:06] 제공하는 Claude MD를 추가했습니다.

[09:07] 이것은 매번 그것을 파악하고

[09:09] 코드베이스를 스캔해서 빌드 명령이나

[09:10] 린트 명령이 있는지 확인할 필요가 없게 해줍니다.

[09:12] 항상 그것을 인식하고 있죠.

[09:14] 그리고 몇 가지 훅을 추가했습니다

[09:16] 편집이 승인되기 전에 실행되어야 하는 코드,

[09:17] 특정 파일에 prettier를 실행하거나

[09:19] 편집 후 특정 파일에 타입 체크를 실행하는 것처럼

[09:22] 올바른 파일만 승인되도록 하는

[09:24] 좋은 파일들만 받아들이게 합니다.

[09:26] 또 다른 정말 멋진 기능은

[09:27] 커스텀 슬래시 명령을 추가하는 것입니다.

[09:29] 테스트를 출력하고 싶다면

[09:31] 제 테스트를 설명할 수 있습니다. 명령을 추가하려면

[09:33] acloud/commands 폴더를 추가하기만 하면 됩니다.

[09:36] 이름을 추가하고 .md를 붙입니다.

[09:38] 자연어로 작성하기만 하면 되고

[09:40] 이 arguments 문자열을 사용해서

[09:42] 인수를 프롬프트에 넣을 수 있습니다.

[09:44] Claude는 슬래시와 명령어를 입력하는 것만으로

[09:46] 정확히 요청한 작업을 수행합니다.

[09:48] 하위 폴더도 가질 수 있고

[09:50] builder:plugin처럼 접근할 수 있습니다.

[09:52] 이것은 builder 폴더의 plugin.md와 일치하며

[09:54] 새로운 builder 플러그인을

[09:56] 매우 쉽게 만들 수 있는 방법입니다.

[09:57] 또 다른 멋진 기능은 파운드 기호를 사용해서

[09:59] 메모리를 매우 빠르게 추가할 수 있다는 것입니다.

[10:01] 새로운 것들에는 항상 MUI 컴포넌트를 사용하라고 하면

[10:05] 자동으로 가장 관련성이 높은 파일인

[10:07] Claude.md에 저장됩니다.

[10:09] Claude.md 파일은 계층적일 수 있습니다.

[10:11] 프로젝트 레벨에 하나를 가질 수 있고

[10:12] 중첩된 디렉터리에도 하나를 가질 수 있습니다.

[10:14] 모든 것을 보고 관련성이 있을 때

[10:16] 가장 구체적이고 가장 중첩된 것에 우선순위를 줍니다.

[10:18] 모든 곳에 적용하고 싶은 전역 사용자

[10:20] 메모리 환경설정이나

[10:21] 당신에게 특정한 로컬 프로젝트 메모리에

[10:23] 저장할 수도 있습니다.

[10:25] 이 파일들 중 하나에 추가하면

[10:26] 자동으로 작성해 줍니다.

[10:28] 제가 가끔 느끼는 주요 문제이자

[10:30] 사람들이 가장 많이 지적하는 것은

[10:32] 때로는 정말 일반적인 UI를 원한다는 것입니다.

[10:34] 긴 응답을 입력하는 것이 좀 성가신데

[10:35] 이상한 이스케이프 키들이 있습니다.

[10:37] 편집하고 싶은 것을 클릭하고 강조하고 편집할 수가 없습니다.

[10:39] 여전히 터미널에서 작업하고 있다는 것이 명확하고

[10:41] 이에 따른 몇 가지

[10:42] 본질적인 제약사항이 따릅니다.

[10:44] UI를 원하거나 UI 인터페이스를 선호하지만

[10:45] 여전히 Claude Code의 메카니즘을 원하는

[10:47] 경우를 위한 한 가지 트릭은

[10:49] builder.io VS Code cursor windsurf 확장을

[10:51] 사용하는 것입니다. 언제든지

[10:53] IDE 사이드바에서 비주얼 UI로

[10:55] 전환할 수 있습니다.

[10:57] 익숙한 일반적인 채팅 다이나믹과

[11:00] 라이브 프리뷰가 있는 훨씬 더 시각적인 인터페이스를 얻습니다.

[11:02] 그리고 내부적으로 우리는

[11:03] Claude Code가 작동하는 방식과

[11:05] 거의 정확히 일치하도록 시스템을 구축했습니다.

[11:07] 이 도구는 가장 작은 세부사항까지

[11:09] 효과적으로 Claude Code와 동일한

[11:11] 에이전트와 접근 방식을 사용합니다.

[11:13] 인간적으로 가능한 한 가깝게

[11:15] 리버스 엔지니어링했습니다.

[11:16] 그리고 변경사항을 빠르게 미리 볼 수 있습니다.

[11:18] 실제로 방금 항목들을

[11:19] 여기서 바로 여기로 이동했습니다. 완벽하네요.

[11:22] 멋진 점은 언제든지

[11:24] 디자인 모드로 전환할 수 있고

[11:26] Figma 스타일의 인터페이스를 얻어서

[11:28] 원하는 스타일링을 변경하고

[11:30] 디자인 도구처럼 편집할 수 있다는 것입니다.

[11:32] 시각적 편집과 코드의 세계를 연결하는

[11:34] 멋진 방법이고 동시에 둘 다의

[11:36] 장점을 조금씩 얻을 수 있습니다.

[11:38] 다양한 UI 패턴을 빠르게 탐색하고

[11:39] 정밀한 편집을 할 수 있으며

[11:41] 그 다음 코드에 변경사항을 적용하기만 하면 됩니다.

[11:43] 브라우저 인터페이스에서도

[11:45] 이 모든 것을 할 수 있어서

[11:47] 팀 사람들이 디자인 시스템과

[11:48] 애플리케이션으로 바로

[11:50] 프로토타입을 만들 수 있어서 정말 멋집니다.

[11:52] 변경사항에 만족하고

[11:54] 준비가 되면

[11:55] 풀 리퀘스트를 보내기만 하면 됩니다.

[11:57] 제목과 설명이 있는 PR이 있습니다.

[11:59] 어떤 파일이 변경되었는지 볼 수 있습니다.

[12:00] 희망대로 디자인 시스템을

[12:02] 올바르게 사용하고 있는 것 같습니다.

[12:04] 어디든 코멘트를 남길 수 있고

[12:06] "빌드 봇, 이것을 새 파일의 자체 컴포넌트로 이동시켜"라고 말할 수 있습니다.

[12:09] 이 세계에서 우리는 효과적으로

[12:11] Claude Code와 소통하고 있지만

[12:12] PR을 통해 직접 소통합니다.

[12:14] 에이전트가 답변하고

[12:16] 피드백을 반영한 커밋을 푸시합니다.

[12:17] 여기 있습니다. 빌더 봇이 피드백을 반영하고

[12:20] 변경사항을 설명합니다.

[12:21] 이제 customers 테이블이

[12:23] 자체 파일에 있는 것 같습니다.

[12:25] 그리고 원본에서 예상대로 사용하고 있어서

[12:27] 머지할 수 있습니다.

[12:29] Claude Code를 시각적 방식으로 사용하든

[12:30] 터미널에서 사용하든

[12:32] 이 팁들이 지금까지와는 다른

[12:34] 멋진 것들을 만드는 데 도움이 되었기를 바랍니다.

[12:36] builder.io 블로그에서

[12:38] 제 전체 팁 목록을 확인하세요.

[12:39] Claude Code의 시각적 인터페이스를 사용해보고 싶다면 fusion.builder.io로 가세요.