이 8가지 해킹을 배우기 전까지 Claude Code를 잘못 사용했습니다 (특히 6번과 7번은 반드시 활용하세요!)

AI Oriented Dev 구독자 2,140명

요약

이 영상은 깨진 투두 앱 예제를 활용해 Claude Code의 8가지 핵심 워크플로우 해킹 기법을 단계별로 알려줍니다. 프로젝트 초기화부터 메모리 활용, 이미지 프롬프트, 파일 단위 범위 지정, 플랜 모드, 확장 사고, To-Do 도구 동기화, To-Do 기반 개발 완성까지 효율적인 사용법을 다룹니다. 덕분에 시간과 토큰을 절약하고 복잡한 문제를 빠르게 해결하며 매끄러운 개발 흐름을 만들 수 있습니다.

주요 키워드

Claude Code claude init claude.md 메모리 기능 Plan Mode Extended Thinking To-Do 툴 커스텀 커맨드

하이라이트

🔑 항상 `claude init`으로 프로젝트를 초기화해 claude.md에 전체 구조와 기술 스택을 자동으로 요약합니다.
⚡️ 메모리 기능(`# add to memory`)을 활용해 TypeScript 모범 사례 규칙을 프로젝트에 주입하고 일관된 코딩 스타일을 유지합니다.
🌟 CLI에도 스크린샷을 드래그 앤 드롭해 디자인 예시를 바로 반영하고 테마 토글 버튼을 멋지게 개선합니다.
📌 `@filename`을 이용해 특정 파일만 범위 지정하여 토큰 비용을 줄이고 불필요한 수정 실수를 방지합니다.
🚀 Shift+Tab으로 플랜 모드에 진입해 다중 파일 변경 전 전체 아키텍처 검토와 실행 계획을 사전 수립합니다.
🤔 ‘think harder’ 같은 키워드로 Extended Thinking을 적용해 Claude가 더 깊이 생각하게끔 유도해 복잡한 오류를 해결합니다.
📝 To-Do 도구와 커스텀 커맨드를 통해 진행 중인 작업 목록을 로컬 파일에 동기화해 실시간으로 기록을 유지합니다.
🔄 최종 해킹은 To-Do 기반 개발로, 남은 구현 작업을 자동화해 완전한 투두 앱을 단번에 완성합니다.

용어 설명

Claude Code

Anthropic이 제공하는 AI 기반 CLI 코드 어시스턴트로, 터미널에서 자연어로 코드 수정 및 생성 작업을 수행합니다.

claude init

프로젝트 폴더를 분석해 claude.md 파일을 생성하는 초기화 명령어로, 전체 구조와 주요 컴포넌트를 요약합니다.

claude.md

claude init 실행 후 만들어지는 마크다운 파일로, 프로젝트 개요, 기술 스택, 폴더 구조, 개발 노트를 담고 있습니다.

메모리(Memory)

# add to memory 명령으로 프로젝트나 사용자별 규칙, 설명 등을 저장해 Claude에 일관된 정보를 제공하는 기능입니다.

Plan Mode

Shift+Tab으로 활성화되는 모드로, 실제 코드를 수정하기 전에 전체 변경 계획을 설계하고 검토할 수 있게 합니다.

Extended Thinking

‘think harder’, ‘ultra think’ 등의 키워드로 Claude가 더 깊이 사고하도록 유도해 복잡한 문제 해결 성능을 높이는 기법입니다.

To-Do 툴

Claude Code 내부에서 작업 목록을 생성·관리하는 기능으로, 각 단계별 할 일을 체계적으로 확인할 수 있습니다.

커스텀 커맨드(Custom Command)

.claude/commands 폴더에 정의해 Claude Code에 새로운 명령어를 추가하고 기능을 확장하는 사용자 정의 스크립트입니다.

튜토리얼 목표를 설명하고, 작동하지 않는 간단한 Todo 리스트 앱을 시연합니다. 버튼, 할 일 추가, 테마 토글 기능이 모두 깨진 상태이며, 이를 Claude Code 해킹으로 해결할 예정입니다.

[00:00] Claude Code 사용법 튜토리얼 소개. 8가지 워크플로우 해킹을 실제 프로젝트를 통해 보여줄 예정이며, 이전에 이런 팁들을 알았다면 시간과 고생을 많이 줄일 수 있었을 것이라고 언급.

[00:33] 오늘 작업할 할 일 목록 앱 소개. 버튼이 작동하지 않고 새 작업 추가도 안 되는 등 여러 문제가 있는 상태에서 완전히 작동하는 버전으로 만들어가는 과정을 보여줄 예정.

[01:27] AI 중심 인사이더 클럽 홍보. 무료로 가입할 수 있으며 프로젝트 전체 소스 코드, 레슨 플랜, 비하인드 스토리 자료, 커스텀 명령들 등을 제공. 영상 공개 전 미리보기도 가능.

`claude init` 명령으로 코드베이스를 분석하고 claude.md 파일을 생성하는 과정을 살펴봅니다. 이를 통해 프로젝트 개요, 기술 스택, 폴더 구조를 자동으로 문서화할 수 있습니다.

[02:20] 프로젝트 설정 시작. npm run dev를 실행하여 누군가로부터 받은 프로젝트가 어떻게 작동하는지 확인해보는 단계. 첫 눈에는 괜찮아 보이지만 실제로는 문제가 있음.

[02:39] 할 일 관리 앱의 문제점을 소개하며, 체크박스, 할 일 추가, 테마 설정 등이 제대로 작동하지 않는 상황을 설명합니다.

[02:57] Claude Code를 사용하여 앱을 수정하는 방법과 8가지 핵심 해킹을 보여주겠다고 안내합니다.

[03:10] 첫 번째 해킹 - 초기화 명령어(/init)를 사용하여 Claude Code를 시작하고 기존 코드베이스를 분석하는 방법을 설명합니다.

[03:32] init 명령어가 claude.md 파일을 생성하여 프로젝트의 모든 발견사항을 요약하고 컨텍스트를 제공하는 과정을 상세히 설명합니다.

[04:09] 생성된 claude.md 파일의 내용을 검토하고 마크다운 미리보기를 통해 더 읽기 쉽게 만드는 방법을 보여줍니다.

# add to memory 명령을 사용해 TypeScript Best Practices(CURSOR Rules)를 프로젝트 메모리에 저장합니다. 공유 가능한 프로젝트 메모리를 통해 일관된 코딩 규칙을 유지할 수 있습니다.

[04:50] 두 번째 해킹 - 메모리 규칙 기능을 소개하며, 기존 프로젝트의 TypeScript 모범 사례 커서 규칙을 Claude Code에 알려주는 방법을 설명합니다.

[05:20] 타입스크립트 베스트 프랙티스 가이드라인을 따라야 하며, 프로젝트 메모리에 저장하는 방법을 설명합니다. 프로젝트 메모리 방식을 사용하면 다른 사람과 프로젝트를 공유할 때 동일한 메모리와 베스트 프랙티스를 전달할 수 있습니다.

[06:00] Claude.md 파일에 메모리 내용이 자동으로 추가되는 과정을 보여줍니다. 해시 기호(#)를 사용하여 메모리 기능을 활용하는 방법을 설명하며, 이것이 해킹 2번임을 언급합니다.

CLI에 디자인 샘플 스크린샷을 드래그 앤 드롭해 테마 토글 버튼 스타일을 개선합니다. 이미지 기반 프롬프트로 UI 변경을 즉각 반영하는 방법을 배웁니다.

[06:25] 해킹 3번으로 이미지 삽입 기능을 소개합니다. 많은 Claude Code 초보자들이 커맨드 라인 환경에서 스크린샷을 사용하는 방법을 몰라서 어려워한다고 설명합니다. 테마 설정 버튼을 개선하는 실제 예시를 준비합니다.

[07:00] 실제로 이미지를 커맨드 라인에 드래그하여 삽입하는 방법을 시연합니다. 테마 토글 버튼을 이미지처럼 보이도록 수정하라고 Claude에게 요청하며, 많은 사람들이 Cursor를 그리워하는 이유를 설명합니다.

[07:30] Claude Code가 스크린샷을 기반으로 테마 토글을 성공적으로 업데이트한 결과를 보여줍니다. 이미지를 통한 UI 개선이 매우 강력한 해킹임을 강조하며, Claude가 이미지를 읽고 구현하는 능력이 뛰어남을 설명합니다.

[07:47] 이전 방식의 한계점을 설명합니다. 큰 코드베이스에서 파일을 찾기 위해 전체 베이스를 검색해야 하는 문제점을 지적하며, 더 효율적인 방법이 필요함을 암시합니다.

`@filename` 옵션을 통해 특정 파일만 대상으로 수정 요청을 보냅니다. 전체 코드베이스를 스캔하는 대신 필요한 파일만 편집해 토큰 비용을 절감하고 오작동 리스크를 줄입니다.

[08:00] AI 코딩 시 구체적인 맥락 제공의 중요성을 강조하며, 특정 파일을 지정하여 수정할 수 있다는 점을 설명합니다.

[08:12] TODO 폼의 작동 문제를 예시로 들어 의도적인 버그를 수정해야 한다고 설명합니다.

[08:29] 해킹 4번으로 Claude Code에 범위 맥락을 제공하는 방법을 소개하며, 이것이 토큰 수를 줄이고 더 목표 지향적인 작업을 가능하게 한다고 설명합니다.

[08:54] @ 기호를 사용하여 특정 파일을 선택하는 실제 사용법을 시연하고, 이를 통해 정확한 파일을 타겟팅하는 방법을 보여줍니다.

[09:17] 파일 특정 기능의 장점을 설명하며, 비용 최적화와 실수 방지에 도움이 된다고 강조합니다.

[09:33] AI가 수정할 위치를 식별하고 app todo 컴포넌트를 수정하는 과정을 설명하며, Claude Code의 상세한 설명 기능을 언급합니다.

[09:53] 실제 테스트를 통해 기능이 제대로 작동하는지 확인하고, 한 줄의 코드와 하나의 파일로 전체 기능을 수정할 수 있었음을 보여줍니다.

[10:14] 지금까지의 간단한 수정 작업들을 요약하고, 복잡한 작업에서는 단일 프롬프트보다 플랜 모드를 사용하는 것이 더 좋다고 설명합니다.

Shift+Tab으로 Plan Mode를 활성화해, 실제 코드를 실행하기 전 전체 변경 계획을 수립하고 검토합니다. 복잡한 멀티 파일 작업을 안전하게 진행할 수 있습니다.

[10:44] 테마 토글 기능을 구현하기 위해 Claude Code의 Plan Mode를 사용하는 방법을 설명합니다. 여러 파일 수정과 CSS 스타일링이 필요한 복잡한 작업이므로 실행 전에 계획을 세우는 것이 중요합니다.

[11:05] Plan Mode 사용법을 시연합니다. Shift+Tab으로 플랜 모드를 켜고 끌 수 있으며, 이 모드에서는 실제 편집 없이 전체 코드베이스를 분석하고 구현 계획을 세웁니다.

[11:53] Claude가 제공한 완전한 테마 시스템 구현 계획을 검토합니다. Tailwind 설정, 테마 컨텍스트 생성, 프로바이더 통합, 수정할 파일 목록 등 상세한 계획을 제시합니다.

[12:25] 실제 구현 과정에서 발생한 오류를 해결하는 과정을 보여줍니다. Escape로 중단하고 오류를 복사하여 Claude에게 문제 해결을 요청합니다.

[13:06] Claude가 문제 해결에 어려움을 겪을 때 사용할 수 있는 6번째 핵심 요령인 '확장 사고(Extended Thinking)'를 소개합니다. Anthropic의 공식 문서를 참조하여 '생각해', '열심히 생각해' 같은 프롬프트로 Claude의 성능을 향상시킬 수 있다고 설명합니다.

`think harder`, `ultra think` 등의 키워드를 활용해 Claude가 더 심층적으로 문제를 분석하도록 유도합니다. 여러 번 수정해도 해결되지 않는 오류를 빠르게 해결할 수 있습니다.

[13:25] ultra think 기능을 사용하면 Claude가 문제 해결을 위해 더 깊이 사고하도록 유도할 수 있습니다. 기존 수정사항들로 해결되지 않은 오류에 대해 'think harder'라고 요청하여 더 나은 해결책을 찾을 수 있습니다.

[13:56] Extended thinking을 활용하면 무작정 코드를 수정하는 악순환에서 벗어날 수 있습니다. Claude가 문제의 근본 원인을 추론하여 다크모드와 라이트모드 전환 오류를 성공적으로 해결했습니다.

[14:36] 7번째 핵심 기법은 Claude Code의 to-do 리스트 관리 기능을 활용하는 것입니다. Claude는 작업 목록을 자동으로 관리하고 완료된 항목에 취소선을 그어주지만, 터미널을 닫으면 이 정보가 사라지는 문제가 있습니다.

Claude Code의 To-Do 툴과 사용자 정의 커맨드를 결합해, 작업 목록을 로컬 파일에 자동으로 기록하고 세션 간에도 지속적으로 동기화합니다.

[15:25] Claude가 사용할 수 있는 도구들을 파악하는 것이 중요합니다. 메타 질문을 통해 새로운 기능이나 능력을 발견할 수 있으며, 특히 'to do' 도구를 사용해 작업 목록을 생성하고 관리할 수 있습니다.

[15:58] 두 기법을 결합하여 Claude에게 모든 to-do 리스트를 파일로 동기화하는 커스텀 명령을 만들 수 있습니다. 이를 통해 Taskmaster와 같은 도구의 기능을 Claude Code에서 복제할 수 있습니다.

동기화된 To-Do 목록을 기반으로 남은 구현 작업을 Claude에게 자동화해 마무리합니다. 다크 모드, 할 일 추가·취소 기능 등 최종 기능을 완전하게 완성합니다.

[16:08] 커스텀 슬래시 명령어를 사용하여 할 일 목록을 로컬 파일 시스템에 동기화하는 방법을 설명합니다. .claude 폴더 안에 commands 하위 폴더를 만들고 Sync Todos MD 파일을 생성하여 구현합니다.

[16:28] sync to do 커스텀 명령어를 실행하면 현재 할 일 목록을 외부 파일과 동기화하고, 세션 간에 지속적인 기록을 유지합니다. 파일이 없으면 자동으로 생성하여 전체 상태를 저장합니다.

[16:55] 동기화된 할 일 목록은 진행 중인 것과 대기 중인 것을 명확히 보여줍니다. 이 방법은 Claude 내의 할 일 목록 기능을 파일로 내보내는 강력한 방법을 제공합니다.

[17:20] 이 sync to-do 커스텀 명령어는 매우 유용하며 무료로 제공됩니다. 설명란의 링크를 클릭하여 AI 지향 인사이더 클럽에 가입하면 전체 저장소와 커스텀 명령어에 접근할 수 있습니다.

[17:34] 애플리케이션의 나머지 구현을 완료합니다. 다크 모드를 컴포넌트에 추가하고 할 일 추가 섹션에도 적용하여 전체 페이지에 다크/라이트 모드 전환 기능을 완성합니다.

[18:00] 애플리케이션이 완전히 기능적으로 완성되었습니다. 다크 모드와 라이트 모드 전환, 할 일 추가 및 체크 표시 기능이 모두 예상대로 작동합니다.

[18:17] 8가지 Claude Code 해킹의 실제 작동 예시를 성공적으로 완료했습니다. 시청자들에게 새로운 내용이 있었는지 묻고, 다른 프로 해킹이 있다면 댓글로 공유해 달라고 요청합니다.

8가지 해킹 기법을 정리하고 시청자에게 새로운 팁이나 궁금한 점을 댓글로 남기도록 요청합니다. 이전 튜토리얼 안내와 구독·알림 설정을 권장하며 영상을 마무리합니다.

타임라인 정보가 없습니다.

[00:00] 안녕하세요 여러분.

[00:00] Claude Code 사용법에 대한 또 다른 튜토리얼에 오신 것을 환영합니다.

[00:03] 이번 영상에서는

[00:04] 모든 Claude Code 사용자가 반드시 알아야 할 8가지 워크플로우 해킹을 보여드리겠습니다.

[00:08] 저는 Claude Code를 꽤 오랫동안 사용해왔는데

[00:10] 시작하기 전에 누군가가 이런 팁들을 알려줬다면

[00:13] 정말 많은 시간과 골치 아픈 일들을 줄일 수 있었을 텐데요.

[00:17] 문제들을 훨씬 빠르게 해결할 수 있었을 거예요.

[00:20] 단순히 이 해킹들이 무엇인지 말씀드리는 대신,

[00:22] 실제 작동하는 프로젝트를 통해 이 8가지를 어떻게 사용하는지 보여드리겠습니다.

[00:26] 여러분이 이것들을 워크플로우에 어떻게 통합할 수 있는지 확인할 수 있도록 말이죠.

[00:31] 오늘 작업할 앱이 바로 이것입니다.

[00:33] 아주 간단한 할 일 목록 앱입니다.

[00:35] 하지만 보시다시피 몇 가지 문제가 있어요.

[00:38] 예를 들어, 이 버튼들이 전혀 작동하지 않습니다.

[00:40] 그리고 새로운 작업을 추가하려고 할 때

[00:42] 장보기 같은 작업을 추가하고 이걸 클릭하면

[00:46] 보시다시피

[00:48] 이것도 작동하지 않습니다. 콘솔에 로그만 출력할 뿐이죠.

[00:51] 테마 토글 버튼이 작동할 거라는 희망이라도 있을까요?

[00:54] 누군가가 이 코드베이스를 여러분에게 넘겨주었고

[00:57] 아무것도 작동하지 않는데 마감일이 있어서

[01:00] 이걸 고쳐야 한다고 상상해보세요.

[01:02] 오늘 튜토리얼에서는 이 망가진 앱 상태에서

[01:06] 이 작동하는 버전으로 어떻게 변환할 수 있는지 보여드리겠습니다.

[01:09] 보시다시피, 이제 장보기를 입력하면 실제로 작동합니다.

[01:11] 작업 목록이 올바르게 업데이트되고, 테마 토글 버튼도 작동할 뿐만 아니라

[01:15] 멋져 보이기까지 합니다.

[01:19] Claude Code와 이 8가지 해킹을 사용해서

[01:20] 망가진 상태에서 완전히 작동하는 상태로 만들어보겠습니다.

[01:23] 마지막 해킹은 아마 여러분이 몰랐던 것일 테니까 끝까지 시청해주세요.

[01:27] 이 프로젝트를 직접 받아보고 싶으시다면

[01:29] 전체 소스 코드와 레슨 플랜을 포함해서 말이죠.

[01:31] 제 AI 중심 인사이더 클럽을 확인해보세요. 완전 무료로 가입할 수 있고

[01:35] 여기 링크나 아래 설명란의 링크를 통해 가입할 수 있습니다.

[01:38] 거기서 이 Claude Code 시리즈와 관련된 비하인드 스토리 자료와 리소스를

[01:42] 에이전트 개발 키트 시리즈를 포함한 제 모든 영상들과 함께 받아보실 수 있습니다.

[01:45] 여기서 보시다시피

[01:47] 영상이 공개되기 전에 전체 레슨 플랜의 미리보기를 게시하니까

[01:50] 여러분 같은 인사이더들은 영상이 완전히 공개되기 전에

[01:54] 앞으로 나올 내용들을 미리 볼 수 있습니다.

[01:56] 오늘 에피소드와 관련된 것처럼 제 비공개 저장소에

[01:59] 프로젝트의 전체 소스 코드를 포함해서 액세스할 수 있습니다.

[02:03] 모든 프롬프트와 이 튜토리얼에서 사용할 커스텀 명령들도 포함되어 있어요.

[02:07] 이 모든 것을 받아보는 데 관심이 있으시다면

[02:10] 아래 설명란의 링크를 통해 인사이더 클럽에 가입해보세요.

[02:14] 완전 무료이고 안에서 뵙겠습니다.

[02:17] 그럼 더 이상 지체하지 말고 오늘 튜토리얼을 시작해보겠습니다.

[02:20] 우선 첫 번째로 할 일은 오늘 작업할 프로젝트를 살펴보는 것입니다.

[02:23] npm run dev를 실행해보겠습니다.

[02:25] 누군가로부터 이 프로젝트를 받았다고 상상해보세요.

[02:32] 어떻게 작동하는지 살펴보겠습니다.

[02:34] 첫 눈에는 꽤 괜찮아 보입니다.

[02:39] 할 일 관리 앱으로, 새로운 할 일을 추가할 수 있습니다.

[02:42] 기존 할 일 목록도 있고 다크 모드도 있어요. 하지만,

[02:46] 이 프로젝트에는 몇 가지 문제가 있습니다. 체크박스가 실제로

[02:50] 작동하지 않고, 식료품 구매 같은 새로운 할 일을 추가하려고 해도 작동하지 않습니다. 그리고

[02:55] 테마 설정도 작동하지 않습니다.

[02:57] 네, 이것이 우리가 시작하는 지점입니다. 하지만 걱정하지 마세요.

[03:00] 오늘 Claude Code로 이 앱을 수정하는 방법을 보여드리겠습니다.

[03:02] 그리고 그 과정에서 Claude Code로 프로젝트를 작업할 때

[03:06] 반드시 알아야 할 8가지 핵심 해킹을 보여드리겠습니다.

[03:10] 새로운 프로젝트를 시작할 때 항상 맨 먼저 해야 할 일은

[03:13] Claude Code 자체를 시작하는 것입니다.

[03:15] Claude를 입력하면 초기화되고 대부분의 경우

[03:17] 폴더 내에서 실행하기 위한 권한이 필요하다고 표시됩니다.

[03:21] 이미 전에 했기 때문에 이 단계를 건너뛸 수 있었습니다.

[03:23] 항상 가장 먼저 해야 할 일은 초기화 명령어를 실행하는 것입니다.

[03:28] 즉, init 명령어를 실행하는 것이죠. 이 단계에서 Claude Code는

[03:32] 기존 코드베이스를 분석하게 됩니다.

[03:34] 그리고 claude markdown 파일이라는 것을 생성하여

[03:39] 모든 발견사항을 요약하고 이 프로젝트에 대한 많은 컨텍스트를 제공합니다.

[03:44] 현재 상태로 구성되어 있습니다. 이것은 정말 중요합니다. 이제

[03:48] 이 프로젝트에서 Claude Code를 사용하는 누구든지

[03:54] claude.md 파일을 보고 즉시 이해할 수 있는 상태가 됩니다.

[03:58] 프로젝트가 무엇인지, 채택된 기술 선택이 무엇인지,

[04:01] 모든 파일이 어디에 있는지, 모든 폴더가 어디에 있는지를 말이죠. 이것은

[04:05] Claude Code로 작업할 때 항상 첫 번째 시작점입니다.

[04:09] 완료되었습니다. Claude Code가 항상 변경사항을 적용하도록 허용하겠습니다.

[04:12] Claude md에 대해 완료되면,

[04:14] 한 번 살펴보는 것이 좋습니다.

[04:16] 실제로 프로젝트 개요를 만들었습니다.

[04:18] 모든 명령어를 살펴보고, 채택된 아키텍처를 이해하고

[04:21] 모든 핵심 구성 요소를 파악했습니다. 이 앱이 무엇을 위한 것인지도 알고 있죠.

[04:25] 8가지 Claude Code 워크플로우를 보여주기 위한 것이라고 말이죠.

[04:28] 개발 노트도 많이 있습니다.

[04:30] 마크다운 파일로 작업할 때 제가 항상 하는 것은

[04:34] 조금 더 보기 좋게 미리보기하는 것입니다.

[04:35] Control Shift P를 누르고 명령 팔레트를 열어서

[04:39] markdown을 입력하고 미리보기를 열면 됩니다.

[04:41] 그러면 마크다운 파일의 렌더링된 버전을 볼 수 있어서

[04:44] 읽기가 훨씬 쉬워집니다.

[04:46] 이 파일은 프로젝트를 시작할 때 항상 가장 중요한 것입니다.

[04:50] 이제 두 번째 해킹은 메모리와 규칙이라고 불리는 것입니다.

[04:53] 이 프로젝트 파일을 보면 TypeScript 모범 사례 커서 규칙이 있는 것을

[04:57] 볼 수 있습니다.

[05:00] 이것을 작업한 사람은 Cursor를 사용했고 이미

[05:04] 프로젝트 내에서 사용할 모든 TypeScript 모범 사례를 정리했습니다.

[05:07] 따라서 Claude Code가 이것이 존재한다는 것을 알지 못한다면 알려주는 것이 좋습니다.

[05:12] 가장 좋은 방법은 메모리 규칙이라고 불리는 것을 사용하는 것입니다.

[05:14] 메모리 규칙 말이죠.

[05:15] 해시 명령어를 사용해서 Claude에게 메모리를 부여하는 방법이 있습니다.

[05:18] 그러면 메모리에 추가하라고 표시됩니다.

[05:20] 이 경우, 커서 규칙 타입스크립트 베스트 프랙티스나 모든 타입스크립트 가이드라인을 따라야 합니다.

[05:27] 베스트 프랙티스를 따라야 해요.

[05:31] 좋습니다.

[05:32] 이것이 무엇을 하는 걸까요?

[05:33] 어디에 저장할지 선택하라고 프롬프트가 나타납니다.

[05:36] 저는 프로젝트 메모리에 저장하는 것을 선호하는데, 이렇게 하면 이 프로젝트를

[05:40] 다른 사람에게 넘겨줄 때 그들이 즉시 제가 가지고 있던 것과 같은

[05:43] 프로젝트 관련 메모리를 갖게 됩니다.

[05:46] 그리고 타입스크립트 베스트 프랙티스를 사용해야 한다는 것도 알게 되죠.

[05:48] 로컬로 할 수도 있는데, 이 경우에는 실제로 본인만을 위한 것이어서

[05:51] 다른 사람과 공유할 필요가 없는 것을 기억하고 싶을 때 사용합니다.

[05:54] 다른 사람과 공유할 필요가 없는 경우에 말이죠.

[05:55] 그리고 사용자 메모리는 보통 모든 프로젝트에 걸쳐서

[05:58] 무언가를 원할 때 사용합니다.

[06:00] 이 경우, 이 프로젝트에서는 프로젝트 메모리를 사용하겠습니다. 그러면

[06:03] Claude.md 파일 안에 실제로 그것이 타입스크립트 가이드라인 중 하나로 하단에 추가되는 것을 볼 수 있습니다.

[06:07] 이것이 여기서의 베스트 프랙티스입니다.

[06:09] 항상 Claude.md 파일을 업데이트해야 합니다.

[06:10] 그리고 그렇게 할 수 있는 한 가지 방법은

[06:14] 바로 Claude Code 내의 메모리 기능을 사용하는 것입니다.

[06:15] 기억하세요, 하는 방법은 해시 기호를 누르고 그냥 작성하면

[06:18] Claude.md에 자동으로 추가됩니다.

[06:21] 훌륭합니다. 이것이 해킹 2번입니다.

[06:25] 이제 해킹 3번을 알아보겠습니다.

[06:26] 이것은 제가 많이 보는 것입니다.

[06:27] Claude Code를 처음 사용하는 사람들이 있을 때마다

[06:29] 그들은 '잠깐, 모든 것이 커맨드 라인인데

[06:30] 뭔가의 스크린샷을 찍고 AI에게 구현하라고 어떻게 말하지?'라고 합니다.

[06:33] 지금 바로 보여드리겠습니다.

[06:38] 우리의 테마 설정 버튼이 어떻게 보이는지 보면, 정말 못생겼습니다.

[06:39] 저는 실제로 이렇게 멋지게 생긴 테마 스위처를 찾았습니다.

[06:43] 그리고 지금 제가 할 일은 이것의 사진을 찍어서 Claude Code 커맨드 라인에

[06:47] 삽입할 수 있도록 하는 것입니다.

[06:51] 이 테마 스위처가 어떻게 보이는지 이미 사진을 찍었습니다.

[06:52] 그리고 실제로 할 수 있는 것은 커맨드 라인에

[06:56] 바로 드래그해서 넣을 수 있습니다.

[07:00] 그리고 이제 '테마 토글 버튼을 이미지처럼 보이도록 수정해서 더 아름답게 만들어줘'라고 말할 수 있습니다.

[07:07] 한번 해보겠습니다. 그러면 여러분은 많은 사람들이 때때로 불평하는 것을 보게 될 것입니다.

[07:13] '음, 모든 것이 커맨드 라인에 있네요.

[07:15] Cursor가 그리워요. 왜냐하면 실제로 Cursor에 직접

[07:19] 이미지를 추가할 수 있거든요.'

[07:21] 음, Claude Code로도 같은 일을 할 수 있습니다. 왜냐하면

[07:23] 뭔가의 스크린샷을 찍고 Claude Code가 수정하게 하는 것이 매우 유용하기 때문입니다.

[07:26] 지금 보시는 것처럼 테마 토글 스타일링을 그것과 일치하도록 수정할 것입니다.

[07:30] 우리 프로젝트로 다시 돌아가보겠습니다.

[07:32] 꽤 좋네요, 그렇지 않나요?

[07:34] 이것 좀 보세요.

[07:34] 이미 우리의 테마 토글이 스크린샷과 훨씬 더 비슷하게 보이도록 업데이트했습니다.

[07:38] 이것은 실제로 매우 강력한 해킹입니다.

[07:40] 실제로 그냥 스크린샷을 찍으면 Claude가 그 이미지들을 읽을 수 있고

[07:43] 실제로 그것을 구현하는 데 꽤 좋다는 것을 보게 될 것입니다.

[07:45] 이제 이전에 테마 토글을 업데이트하라고 했을 때

[07:47] 어떤 파일을 관리할지 식별할 수 있었습니다.

[07:50] 그런 식으로 하는 것의 문제점은 때때로 더 큰 코드베이스에서

[07:52] 실제로 전체 베이스를 살펴봐야 하고

[07:55] 그것이 어디에 있는지 찾아내려고 해야 한다는 것입니다.

[07:58] 어디에 있는지 찾아내려고 해야 한다는 것입니다.

[08:00] 여러분이 집중해야 할 것 중 하나는 가능한 한 구체적이고

[08:04] 많은 맥락을 제공하려고 노력하는 것입니다.

[08:07] 실제로 AI가 수정하길 원하는 파일에 대해서

[08:10] 매우 구체적으로 지정할 수 있다는 것을 알아야 합니다.

[08:12] 이 경우를 보면 TODO 폼이 제대로 작동하지 않는 것을 알 수 있죠?

[08:15] 뭔가를 추가할 때마다 실제로는 제가 말했듯이

[08:19] 콘솔에 무언가를 기록할 뿐입니다.

[08:20] 실제로는 작동하지 않아요.

[08:21] 여기에 실제로 add to do 컴포넌트가 있고

[08:26] 이것이 의도적인 버그라는 것을 보여줍니다.

[08:28] 이것을 작동하게 만들어야 합니다.

[08:29] 해킹 4번은 Claude Code에 범위 맥락을 제공할 수 있다는 것을 보여주는데

[08:34] 이것이 전송하는 토큰 수를 줄이는 데 도움이 됩니다.

[08:38] 전체 폴더 구조를 읽을 필요가 없기 때문입니다.

[08:40] 또한 작업을 훨씬 더 목표 지향적으로 만들어 줍니다.

[08:43] 제가 할 일은 여기서 'app to do form이 작동하지 않습니다.

[08:49] 타겟팅으로 수정하세요'라고 말하고, 그다음에

[08:54] to do list by라고 하고 @를 누르면

[08:59] 선택할 수 있는 파일 목록을 제공합니다.

[09:01] 하지만 계속 타이핑하면 실제로 그것을 업데이트할 수 있습니다.

[09:04] 편집할 올바른 파일을 선택한 것을 볼 수 있습니다.

[09:07] 그리고 탭을 누르기만 하면 됩니다.

[09:09] 그다음 엔터를 누르세요.

[09:10] 그러면 선택할 수 있고 엔터를 다시 누르면

[09:15] 살펴볼 특정 맥락으로 이것을 제출할 것입니다.

[09:17] 실제로 훨씬 더 직접적이 될 것입니다.

[09:20] 이것은 비용을 최적화하는 데도 도움이 됩니다.

[09:22] 또한 AI가 여러분이 건드리고 싶지 않았던

[09:27] 코드 베이스의 다른 부분을 수정하지 않기 때문에

[09:31] 실수를 줄이는 데 도움이 됩니다.

[09:33] 수정이 필요한 위치를 식별했습니다.

[09:36] 내용을 살펴보면 'app todo 컴포넌트를 수정하겠습니다'라고 하고

[09:41] 새로운 함수로 코드를 업데이트해야 한다고 합니다.

[09:43] 전체 to-do 리스트 구현을 계속하고

[09:45] 작동하도록 나머지 기능을 계속 구현할 것입니다.

[09:47] Claude Code의 좋은 점은 작동하게 만들기 위해

[09:49] 수행한 작업에 대해 매우 자세히 설명한다는 것입니다.

[09:51] 가장 좋은 것은 실제로 테스트하는 것입니다.

[09:53] 지금 해보겠습니다.

[09:54] 오늘 식료품 구매하기.

[09:55] to do를 추가하면 이제 식료품 구매 목록에 들어가는 것을 볼 수 있습니다.

[10:00] 실제로 체크하면 지금은 취소됩니다.

[10:02] 체크를 해제하면 또한 수정됩니다.

[10:04] 단 한 줄의 코드와 하나의 특정 파일로

[10:09] to do 리스트와 관련된 모든 기능을 수정할 수 있었습니다.

[10:11] 이것이 Claude Code의 훌륭한 점이고 해킹 4번을 요약합니다.

[10:14] 지금까지 우리는 매우 간단한 수정을 해왔습니다.

[10:18] 테마 토글의 이미지를 변경했습니다.

[10:20] todo 리스트를 수정했습니다.

[10:22] 하지만 알아야 할 것 중 하나는

[10:25] Claude Code가 단일 프롬프트를 기반으로 변경하도록 하지 않는 것이 종종 최선이라는 것입니다.

[10:30] 그 이유는 조금 더 복잡한 작업을 할 때

[10:32] Claude가 자신이 하는 일에 대해 신중하게 생각하고

[10:35] 실제로 '네, 계속하세요'라고 말하기 전에

[10:39] 행동을 계획하기를 원하기 때문입니다.

[10:41] 계속하세요.

[10:42] 이것을 플랜 모드라고 부릅니다.

[10:44] 재미있는 건 이걸 어떻게 토글하는지가 그리 명확하지 않다는 점이에요. 정확히 어떻게 하는지 보여드릴게요.

[10:48] 테마 토글이 실제로 작동하도록 만들어 보겠습니다.

[10:51] 실제로 작동하게 하려면 조금 더 복잡한데요,

[10:53] 여러 파일을 수정해야 하기 때문입니다. CSS로 스타일링도 해야 하고요.

[10:57] 그래서 가장 좋은 방법은 Claude에게 실행하기 전에 계획을 세우도록 요청하는 것입니다.

[11:01] 플랜 모드를 사용하는 방법은 Claude Code로 가서

[11:05] Shift+Tab을 누르면 플랜 모드가 켜졌다고 표시됩니다.

[11:09] Shift+Tab을 다시 누르면 플랜 모드와 일반 에이전트 모드를 전환할 수 있어요.

[11:14] 이제 다시 플랜 모드로 전환해 보겠습니다.

[11:18] 테마 토글을 기능적으로 만들어서 앱에 추가하는 방법을 계획해 주세요.

[11:20] 이렇게 하면 플랜 모드에서는 실제로 편집을 하지 않고

[11:27] 전체 코드베이스를 살펴보게 됩니다.

[11:29] 현재 구현이 어떻게 작동하는지 조사하고,

[11:33] 이걸 제대로 작동시키는 적절한 아키텍처를 계획합니다.

[11:35] 기존 컴포넌트들을 분석해서 통합하는 방법을 알아내고,

[11:37] 누락된 요소들을 설계할 것입니다. 화면을 좀 더 크게 만들어볼게요.

[11:45] 이제 계획 모드가 끝났고 준비가 되었다고 표시됩니다.

[11:53] 완전한 테마 시스템 구현 계획을 제공해주네요.

[11:57] Tailwind 설정으로 무엇을 해야 하는지 알려주고,

[12:00] 꽤 괜찮아 보이는 구현 전략을 제시합니다.

[12:03] 테마 컨텍스트와 프로바이더를 생성하고,

[12:06] 프로바이더를 통합하고, 다른 컴포넌트들을 만들기 전에

[12:08] 토글 컴포넌트를 업데이트할 것입니다.

[12:12] 어떤 파일들을 수정할지, 무엇이 예상되는지까지 알려줍니다.

[12:14] 뭔가 마음에 들지 않거나 다른 것을 고려하고 싶다면 계속 계획하라고 말할 수도 있고,

[12:18] 아니면 현재 계획으로 진행하라고 말할 수도 있습니다.

[12:19] 여기서는 예라고 하겠습니다. 진행되면서 테마 토글을 추가하기 시작하는 것을 볼 수 있고,

[12:22] 가능한 다양한 테마들을 변경하기 시작하고, 제공된 컨텍스트를 사용하도록 테마 토글을 업데이트합니다.

[12:24] 좋아요. 이제 새로고침해보겠습니다.

[12:25] 여기에 오류가 있는 것을 볼 수 있습니다. Escape를 눌러서 중단하고,

[12:29] 문제를 복사해서 붙여넣고 먼저 이것을 고치라고 말하는 게 좋겠습니다.

[12:32] 복사한 텍스트를 Claude Code에 붙여넣고 실행합니다.

[12:36] 여기에 나타난 오류를 가져와서 명령줄에 팝업으로 띄우는 것을 볼 수 있습니다.

[12:37] 컴포넌트 타입들 간의 불일치 때문에 문제를 식별했고 수정한 것 같습니다. 새로고침해보겠습니다.

[12:38] 좋아요. 여기서 Claude가 이것을 제대로 작동시키는 데 약간 어려움을 겪고 있는 것을 볼 수 있습니다.

[12:40] 이제 6번째 핵심 요령을 보여드릴 좋은 시간입니다. 이는 확장 사고(Extended Thinking)라고 불립니다.

[12:44] 이것을 설명하는 가장 좋은 방법은 Anthropic 자체의 이 글입니다.

[12:47] 아래로 스크롤하면, 여기서 취해야 할 주요 내용은 이 섹션인데,

[12:51] '생각해' 또는 '열심히 생각해' 또는 '더 열심히 생각해' 같은 단어를 사용하면

[12:51] Claude가 실제로 문제를 해결하는 방법을 찾기 위해 더 열심히 작업하도록 프롬프트된다는 것입니다.

[12:55] 좋아요, 여기서 바로 시도해보겠습니다.

[12:58] 컴포넌트 타입들 간의 불일치로 인해 문제를 식별했고 수정을 완료한 것 같습니다. 새로고침해보겠습니다.

[13:00] 좋아요.

[13:06] 여기서 Claude가 이것을 제대로 작동시키는 데 약간 어려움을 겪고 있는 것을 볼 수 있습니다.

[13:06] 이제 6번째 핵심 요령을 보여드릴 좋은 시간입니다.

[13:08] 이는 확장 사고라고 불립니다.

[13:10] 이것을 설명하는 가장 좋은 방법은 Anthropic 자체의 이 글입니다.

[13:12] 아래로 스크롤하면, 여기서 취해야 할 주요 내용은 이 섹션인데,

[13:14] '생각해' 또는 '열심히 생각해' 또는 '더 열심히 생각해' 같은 단어를 사용하면

[13:18] Claude가 실제로 문제를 해결하는 방법을 찾기 위해 더 열심히 작업하도록 프롬프트된다는 것입니다.

[13:21] 좋아요, 여기서 바로 시도해보겠습니다.

[13:25] ultra think을 사용하면 실제로 Claude가 문제를 해결하기 위해 더 열심히 노력하도록 유도합니다

[13:29] 문제를 해결하는 방법을 알아내려고 말이죠.

[13:32] 좋아요, 그럼 바로 여기서 시도해보겠습니다.

[13:33] 이 오류를 다시 복사해서

[13:35] 붙여넣기 하겠습니다.

[13:36] 이전 수정사항들로도 해결되지 않았는데 왜 이 오류가 계속 발생하는지 더 깊이 생각해보라고 말하겠습니다.

[13:42] 이전 변경사항들에도 불구하고 말이죠.

[13:44] 문제를 해결하지 못했으니까요.

[13:46] 네, 이제 시작해보겠습니다.

[13:47] Claude가 왜 계속 이런 오류를 내는지 생각해보도록 할 것입니다.

[13:52] 몇 번 수정을 했지만 해결되지 않았거든요.

[13:55] 문제를 해결하지 못하고 있어요.

[13:56] 이것은 정말 주목해야 할 핵심 기법입니다.

[13:59] Claude Code가 왜 무언가가 작동하지 않는지에 대해 좀 더 깊이 생각하고 작업하도록 만들 수 있거든요.

[14:03] 뭔가 작동하지 않는 이유에 대해서 말이죠.

[14:05] 좋아요, 이제 우리가 다크 모드와 라이트 모드 사이를 문제없이 전환할 수 있는 것을 볼 수 있습니다.

[14:08] 오류가 나타나지 않고

[14:10] 추가적인 사고 과정 덕분에 - 여기서 볼 수 있듯이 -

[14:13] 여러 번의 수정에도 불구하고 문제가 계속 발생하는 이유를 추론할 수 있게 되었습니다.

[14:18] 수많은 수정에도 불구하고 말이죠.

[14:20] 이것은 정말로 주목해야 할 핵심 기법입니다.

[14:23] 만약 그냥 무작정 코드를 작성하며 문제를 해결하려고 한다면, 계속 같은 순환에 빠질 수 있습니다.

[14:27] 그리고 그 순환에서 벗어나지 못하죠.

[14:29] 하지만 extended thinking부터 ultra think까지 사용하면 훨씬 빠르게 문제를 해결할 수 있습니다.

[14:33] 문제를 훨씬 더 빠르게 해결하는 데 도움이 됩니다.

[14:36] 좋아요, 이제 이 문제가 해결되었고, 저는 의도적으로 이전 계획의 실행을 중단했습니다.

[14:39] 7번째 핵심 기법을 보여드리고 싶었거든요.

[14:44] 이것은 많은 사람들이 어떻게 하는지 깨닫지 못하는 기법인데

[14:46] 매우 유용하기도 합니다.

[14:48] Claude Code의 훌륭한 기능 중 하나는 실제로 해야 할 일의 to-do 리스트를 관리한다는 것입니다.

[14:51] 해야 할 일들을 완료해 나가면서 말이죠.

[14:53] 그리고 무언가를 완료할 때마다

[14:55] 취소선을 그어줍니다.

[14:56] 실제로 이 원래 to-do 리스트를 보면, 이 모든 것들을 완료했고

[14:59] 다양한 컴포넌트들의 다크 테마 작업을 하려고 했습니다.

[15:03] 터미널 안에서 실행되는 것의 문제점은 터미널을 닫으면 이것을 참조할 방법이 없다는 것입니다.

[15:07] 터미널을 닫으면 말이죠.

[15:08] 이것이 실제로 파일로 작성되면 좋지 않을까요?

[15:12] 진행되면서 실시간으로 to-do 리스트 업데이트를 볼 수 있도록 말이죠.

[15:16] 실제로 Taskmaster와 같은 다른 도구들이 비슷한 기능을 제공하는데

[15:20] 이 간단한 기법을 사용해서 Claude Code 내에서 Taskmaster가 하는 일을 복제할 수 있습니다.

[15:25] 여기서의 핵심은 Claude가 사용할 수 있는 도구들이 무엇인지 파악하는 것입니다.

[15:28] 실제로 이런 식으로 해보면, 사용할 수 있는 도구들이 어떤 것들이 있는지 물어볼 수 있습니다.

[15:34] 이것은 실제로 정말 유용한 메타 기법입니다.

[15:37] 새로운 기능이나 능력이 있는지 알아보기 위해서 말이죠.

[15:41] Claude Code에 있을 수 있는 기능들을 잘 모르고 있을 수도 있으니까요.

[15:44] Claude는 다음과 같은 도구 목록을 가지고 있습니다.

[15:46] 파일을 읽고 쓸 수 있고, 파일을 편집할 수 있고, 다중 편집도 할 수 있습니다.

[15:48] 그리고 다른 모든 기능들 말이죠.

[15:50] 하지만 가장 중요한 것은 to do라는 기능이 있다는 것입니다.

[15:53] 작업 목록을 만들고 관리하는 기능이죠.

[15:55] 바로 여기서 볼 수 있는 이 to-do 리스트를 관리하고 업데이트하는 방법입니다.

[15:58] 좋아요, 이제 두 개의 기법을 하나로 결합해보겠습니다.

[16:01] Claude에게 모든 to-do 리스트를 동기화하라고 하는 커스텀 명령을 만들어보겠습니다.

[16:08] 로컬 파일 시스템에 동시에 저장하는 방법입니다.

[16:10] 방법은 이렇습니다. .claude 폴더 안에

[16:13] commands라는 하위 폴더가 있고, 여기에 실제로

[16:17] Sync Todos MD라는 파일을 만들어 놓았습니다.

[16:19] 이 Sync Todos 파일은 Claude Code가 모든 할 일을 추적하고

[16:24] 세션 간에 파일에 지속적인 기록을 유지하도록 합니다.

[16:28] 이 sync to do를 사용하면 슬래시 명령어로

[16:31] 여기서 정의한 커스텀 명령어 파일에 해당하는 새로운 명령어가 생성됩니다.

[16:35] 이 커스텀 슬래시 명령어를 실행하면

[16:38] 현재 할 일 목록을 외부 할 일 목록 파일과 동기화합니다.

[16:42] 먼저 할 일 목록 상태를 추적하고

[16:44] 파일이 존재하지 않는다고 알려줍니다.

[16:46] 그래서 파일 시스템에 해당 파일을 작성해야 합니다.

[16:50] 이제 파일을 열어보면 이전에 계획된 할 일 목록의 전체 상태가

[16:54] 동기화된 것을 볼 수 있습니다.

[16:56] 현재 진행 중인 것과 대기 중인 것을 보여줍니다.

[16:59] 이것은 정확히 일치합니다. 왜냐하면

[17:02] 이 세션에서 완료한 모든 것을 볼 수 있기 때문입니다.

[17:03] 다음에 집중하고 있는 것과 남은 할 일을 확인할 수 있습니다.

[17:07] 이것은 할 일 목록 기능을 노출하는 매우 강력한 방법입니다.

[17:10] Claude 내에서 파일로 내보내는 것은 실제로 훨씬 쉬운 방법을 제공합니다.

[17:15] 작업이 어떻게 진행되는지 보는 방법 말입니다.

[17:16] 이 sync to-do 커스텀 명령어는 매우 유용하며

[17:20] 무료로 제공합니다. 설명란의 링크를 클릭하고

[17:23] AI 지향 인사이더 클럽에 가입하기만 하면 됩니다.

[17:27] 완전히 무료이므로 링크를 클릭하고 구독하세요.

[17:30] 전체 저장소와 이 커스텀 명령어에 대한 완전한 액세스를 받을 수 있습니다.

[17:34] 이제 이 애플리케이션을 마무리해 보겠습니다.

[17:36] 할 일 목록을 기반으로 구현을 완료하겠습니다.

[17:40] 지금 앱의 나머지 구현을

[17:42] 완료할 것입니다.

[17:44] 이제 작동하는 할 일 앱을 갖게 되기를 바랍니다.

[17:47] 여기 컴포넌트에 다크 모드를 추가하기 시작하는 것을 볼 수 있습니다.

[17:51] 목록 자체에 말입니다.

[17:52] 그다음 할 일 추가 섹션에도

[17:56] 적용되도록 하고, 이제 페이지의 나머지 부분에도 적용했습니다.

[18:00] 이제 완료되었습니다.

[18:00] 완전히 기능적이며 다크 모드와 라이트 모드를

[18:03] 전환할 수 있고, 여기에 정말 멋진 버튼이 있습니다.

[18:07] 그리고 '장보기'라고 입력할 수 있습니다.

[18:11] 이번에는 버튼이 작동합니다.

[18:13] 할 일 목록 체크 표시가 이제 예상대로 작동합니다.

[18:17] 자, 여러분 이제 완성되었습니다.

[18:18] 이 8가지 정말 유용한 해킹과 함께 Claude Code를 사용하는

[18:22] 실제 작동 예시를 보여드렸습니다.

[18:23] 이 중에서 새로운 것이 있었나요? 아니면 이미 모든 것을 알고 계셨나요?

[18:27] 댓글로 알려주시고, 제가 다루지 않은 다른 것이 있다면

[18:29] 프로 해킹으로 간주될 만한 것이 있다면

[18:33] 댓글로 알려주세요.

[18:35] 이 튜토리얼을 즐겁게 보셨길 바랍니다.

[18:36] Claude Code로 컨텍스트 엔지니어링을 올바르게 하는 방법에 대한

[18:40] 이전 튜토리얼을 아직 확인하지 않으셨다면 반드시

[18:43] 여기 이 영상을 확인해 보세요.

[18:46] 이 튜토리얼을 즐겁게 보셨다면 좋아요를 누르고 구독하는 것을 잊지 마세요.

[18:49] 그리고 알림 벨을 켜서 이런 튜토리얼이 올라올 때

[18:53] 가장 먼저 알 수 있도록 해주세요.

[18:55] 그럼 다음에 또 뵙겠습니다.