Claude Code 사용 실수 그만! (늘 성공하는 워크플로우)

Leon van Zyl 구독자 59,400명

요약

이 영상은 Claude Code를 활용해 개발 워크플로우를 안정적으로 구축하는 법을 알려준다. Next.js 프로젝트 구조 설정부터 SQLite와 Drizzle ORM 연결, dev 서버 자동 재시작, claude.md 활용한 메모 규칙, 커스텀 커맨드·훅 설정, PRD 기반 계획 작성 등 핵심 팁을 단계별로 다룬다. YOLO 모드 사용 경고와 변경 승인 모드 전환, 커밋·체크포인트 생성과 롤백 방법을 통해 실수를 방지하는 전략을 공유한다. 간단한 예산 관리 앱을 실제로 구현하며 이미지 컬러 추출이나 오디오 알림 등 고급 기능까지 경험시킨다.

주요 키워드

Claude Code Next.js SQLite Drizzle ORM claude.md Memory 커스텀 커맨드 Hooks PRD 체크포인트

하이라이트

🔑 YOLO 모드는 권한 확인 없이 명령을 즉시 실행하지만 위험하니 반드시 신중히 사용해야 한다.
⚡️ Shift+Enter 키 바인딩을 추가해 터미널에서 안전하게 새 줄을 입력할 수 있다.
🌱 claude.md 파일로 프로젝트·유저 레벨 메모를 설정해 일관된 규칙을 모든 대화에 적용할 수 있다.
📌 커밋·체크포인트를 생성하고 필요할 때 손쉽게 이전 버전으로 롤백해 개발 안전성을 높인다.
🚀 /commands 폴더에 템플릿 프롬프트를 저장해 반복 작업을 자동화하는 커스텀 커맨드를 만들 수 있다.
🎶 Hooks 기능을 활용해 변경 완료 시 사운드 알림을 재생하는 등 커스텀 스크립트를 실행한다.
🖼️ Shift+드래그로 이미지 파일을 업로드해 앱 테마에 맞게 색상 팔레트를 자동으로 적용할 수 있다.

용어 설명

YOLO 모드

권한 확인 절차를 통과하지 않고 모든 명령을 바로 실행하도록 설정하는 모드

Shift+Enter 키 바인딩

터미널에서 여러 줄 명령을 입력하기 위해 Shift+Enter 조합으로 줄 바꿈을 지원하는 기능

claude.md

프로젝트 루트에 생성해 Claude Code에 따라야 할 규칙과 메모를 저장하는 파일

메모(Memory)

클라우드 코드가 모든 후속 요청에 적용할 규칙이나 정보를 계속 기억하게 하는 기능

커스텀 커맨드

/commands 폴더에 정의해 프롬프트를 템플릿처럼 실행할 수 있는 사용자 명령

훅(Hooks)

Claude Code 작업 흐름 중 특정 이벤트(예: 변경 완료)에 쉘 명령 등을 연결해 자동화하는 기능

Next.js

React 기반 풀스택 애플리케이션 개발을 위한 인기 프레임워크

SQLite

가볍고 설정이 간편한 파일 기반 관계형 데이터베이스 엔진

Drizzle ORM

Next.js 등 JS 환경에서 데이터베이스를 객체 지향 방식으로 연결·조작해주는 라이브러리

PRD

Product Requirements Document(제품 요구사항 문서), 기능과 목표를 정의한 기획 문서

체크포인트(Commit)

현재 애플리케이션 상태를 저장해 두고 언제든 이전 상태로 롤백할 수 있는 버전 관리 지점

영상 시작과 함께 Claude Code 기본 실행법을 설명하고, 위험할 수 있는 YOLO 모드 옵션(권한 건너뛰기)과 일반 실행 모드의 차이를 알려준다.

[00:00] Claude Code를 처음 시작할 때 알아야 할 중요한 팁들을 소개합니다. 바로 프로젝트를 시작하기보다는 효과적인 워크플로우를 먼저 익히는 것이 중요합니다.

[00:20] Claude Code 실행 방법과 권한 모드에 대해 설명합니다. YOLO 모드(dangerously skip permissions)는 권한 요청을 건너뛰지만 권장하지 않으며, 일반 모드에서 Claude의 작업을 확인하며 진행하는 것이 좋습니다.

터미널을 분할해 작업 공간을 넓히고 탭 이름을 변경하는 팁을 제시한다. Slash 명령어로 Shift+Enter 바인딩을 설치해 다중 줄 입력을 편리하게 처리한다.

[01:06] 터미널 설정과 작업 공간 최적화 방법을 다룹니다. 터미널을 상단으로 이동하여 더 넓은 작업 공간을 확보하고, 슬래시(/) 명령어로 terminal setup을 검색하여 Shift+Enter 키 바인딩을 설정합니다.

[02:05] 프로젝트 구조 설정에 대한 접근 방식을 설명합니다. Claude가 기술 스택을 자동으로 선택하게 하기보다는 명확한 기술 스택을 지정하는 것이 좋으며, 이 튜토리얼에서는 Next.js를 사용합니다.

[02:49] Next.js 프로젝트를 설정하기 위해 현재 디렉토리에 최신 버전을 설치하고, yes 플래그를 사용해 모든 기본값을 수락하도록 지시합니다. 현재 디렉토리를 명시하는 이유는 Claude Code가 새 폴더를 만들어 하위 폴더에 설치하는 것을 방지하기 위함입니다.

최신 Next.js 버전을 현 디렉토리에 설정하는 명령을 작성하고, yes 플래그로 모든 기본 옵션을 자동 수락해 토큰 사용량을 절약하는 방법을 다룬다.

[03:14] 애플리케이션에서 데이터를 추가하고 검색하며, 서버 재시작 시 데이터 손실을 방지하기 위해 SQLite 데이터베이스를 설정합니다. Next.js가 데이터베이스와 통신할 수 있도록 Drizzle ORM도 함께 설정합니다.

SQLite 데이터베이스를 추가해 데이터 영속성을 확보하고, Drizzle ORM을 설치해 Next.js와 DB를 연결하는 설정 과정을 소개한다.

[04:14] Claude Code는 복잡한 작업에 대해 할 일 목록을 생성하여 현재 진행 단계를 명확히 표시합니다. YOLO 모드가 아니므로 특정 명령 실행 전 권한을 요청하며, 사용자는 개별 승인이나 전체 승인을 선택할 수 있습니다.

[05:03] 설치가 완료된 후 개발 서버를 실행하여 설정이 올바른지 확인합니다. npm run dev를 통해 기본 Next.js 프로젝트를 브라우저에서 확인할 수 있지만, 직접 실행하는 대신 Claude Code가 주요 변경사항마다 자동으로 실행하도록 설정하려고 합니다.

[05:37] Claude Code의 메모리 기능을 활용하여 새 대화를 시작하더라도 지속적으로 따라야 할 지침을 설정할 수 있습니다. 메모리를 추가하려면 프로젝트 루트에 새 파일을 생성하면 됩니다.

프로젝트 루트에 claude.md 파일을 생성해 ‘dev 서버 자동 재시작’ 같은 규칙을 메모로 저장하는 방법과, 해시태그 또는 init 명령으로 파일을 자동 생성하는 방법을 설명한다.

[05:52] claude.md 파일을 만들어 프로젝트에 맞춤형 규칙을 추가하는 방법을 설명합니다. 해적처럼 응답하는 재미있는 예시로 시작하여 실제 프로젝트에서 사용할 구체적인 규칙 추가 방법을 보여줍니다.

[06:23] 프로젝트별 구체적인 규칙을 설정하는 실용적인 방법을 소개합니다. 변경 후 지시사항 섹션을 만들고 개발 서버 자동 시작 규칙을 추가하는 과정을 설명합니다.

[06:49] 채팅에서 해시태그를 사용해 실시간으로 메모리를 추가하는 방법을 설명합니다. 포트 3000에서 개발 서버를 시작하고 충돌 시 npx kill을 사용하는 규칙을 예시로 보여줍니다.

[07:14] 프로젝트 레벨과 사용자 레벨 메모리의 차이점을 설명합니다. 프로젝트 레벨은 현재 프로젝트에만, 사용자 레벨은 모든 프로젝트에 적용되는 특징을 비교합니다.

[07:32] 개발 워크플로우를 개선하기 위한 추가 규칙들을 설정합니다. 개발 서버 실행 전 빌드 명령으로 구문 오류를 확인하고, 데이터베이스 변경사항도 자동으로 처리하도록 규칙을 확장합니다.

[08:13] /init 명령을 사용해 Claude.md 파일을 자동으로 생성하는 대안적 방법을 소개합니다. 클로드가 프로젝트를 스캔하여 파일을 생성하고 기존 규칙과 병합하는 과정을 설명합니다.

[08:53] 자동 생성된 Claude.md 파일의 내용을 확인합니다. 스크립트, 데이터베이스 마이그레이션 방법, 프로젝트 아키텍처 등이 포함된 상세한 파일이 생성되었음을 확인합니다.

[09:07] Claude Code의 커스텀 규칙을 확인하고 예산 추적 애플리케이션 구축을 시작합니다. 실제 데이터베이스 데이터를 사용하도록 요청합니다.

예산 관리 애플리케이션의 CRUD 기본 기능을 Claude Code에게 명령해 구현하고, 데이터 시드 삽입을 방지하기 위해 Escape로 작업을 중간에 차단하고 재요청하는 과정을 다룬다.

[09:30] 데이터베이스 생성과 마이그레이션 과정에서 시드 데이터 주입을 발견하고 escape로 프로세스를 중지합니다. YOLO 모드보다는 단계별 승인 모드의 중요성을 강조합니다.

[10:22] 시드 데이터 없이 진행하도록 수정하고 Claude Code가 빌드 명령을 실행하여 구문 오류를 발견하고 수정합니다. claude.md 파일의 지시사항이 적용되는 것을 확인합니다.

[11:08] 포트 3000에서 개발 서버를 시작하고 기존 세션을 종료한 후 새로 시작합니다. Next.js에서 개발 서버 재시작이 필요한 이유를 설명합니다.

[11:43] 완성된 예산 추적 애플리케이션을 확인하고 트랜잭션 추가 기능을 테스트합니다. 텍스트 가독성 문제를 발견하지만 일단 기본 기능을 테스트해봅니다.

[12:08] 개발자가 예산 추적 앱에서 거래 추가 기능을 테스트하며, 음식 지출 항목을 입력하고 데이터베이스 연동이 제대로 작동하는지 확인합니다.

[12:27] 앱의 UI 문제점을 발견하고 클로드 코드를 통해 수정을 요청합니다. 밝은 배경에서 텍스트가 읽기 어려운 문제와 Next.js 오류를 해결하는 과정을 보여줍니다.

입력 폼 텍스트 명암을 개선해 가독성을 높이는 변경을 적용하고, Nex.js 오류 로그를 Claude Code에 전달해 자동으로 수정·dev 서버 재시작까지 수행한다.

[13:40] 기본 기능이 완성된 시점에서 버전 관리의 중요성을 설명하며, 클로드 코드를 사용해 커밋을 생성하는 방법을 시연합니다.

[14:30] 실제 롤백 시나리오를 보여주기 위해 테마와 브랜드명을 변경한 후, 이전 커밋으로 되돌리는 방법을 실습합니다.

‘변경 사항 커밋’ 명령으로 체크포인트를 생성하고 이후 실수 시 ‘이전 커밋으로 롤백’ 명령을 통해 안전하게 복구하는 워크플로우를 소개한다.

[15:14] 커밋 승인과 개발 서버 재시작에 대한 설명. 클라우드 파일의 프롬프트를 조정하여 개발 서버를 항상 시작하도록 설정할 수 있지만, 이런 일은 때때로 발생한다고 언급.

[15:37] 대화가 길어질 때의 문제점과 해결책 설명. 작은 컨텍스트 윈도우 사용을 권장하며, 대화가 길어질수록 응답 품질이 떨어진다고 설명.

[15:50] /clear와 /compact 명령어의 차이점과 사용법. /clear는 대화 기록을 완전히 지우고, /compact는 요약을 생성한 후 새 대화를 시작한다고 설명.

/clear와 /compact 명령어로 대화 기록을 초기화하거나 요약 후 새 대화를 시작해 토큰 사용량과 응답 품질을 최적화하는 전략을 설명한다.

[16:55] /exit와 /resume 명령어 소개. 클라우드 코드 종료와 이전 대화 재개 방법을 설명하며, 기능 완료 후 새 대화 시작을 권장.

[17:24] 커스텀 슬래시 명령어 개념 소개. 기본 명령어 외에 사용자가 직접 만들 수 있는 명령어에 대해 설명하며, 프로젝트 설정 자동화의 필요성을 언급.

/commands 폴더에 MD 파일을 생성해 템플릿 프롬프트를 손쉽게 실행하는 사용자 명령을 추가하고, Hooks를 통해 작업 완료 시 오디오 알림을 재생하도록 자동화하는 법을 다룬다.

[17:51] 커스텀 명령어 생성 방법 설명. claude 폴더 내에 commands 하위 폴더를 만들고, 각 명령어를 위한 마크다운 파일을 생성하는 과정을 상세히 설명.

[18:18] Claude Code에서 커스텀 명령어를 만드는 방법을 설명합니다. 해시태그와 명령어 이름, 설명을 추가하고 실행할 프롬프트를 작성하는 과정을 안내합니다.

[19:11] 커스텀 명령어를 테스트하기 위해 Claude Code를 재시작하고, 슬래시 명령어로 커스텀 명령어에 접근하는 방법을 보여줍니다.

[19:43] Claude Code의 다양한 모드를 설명합니다. Shift+Tab으로 권한 요청 모드, 자동 승인 모드, 계획 모드 간 전환이 가능하며, 각 모드의 특징과 용도를 설명합니다.

[20:32] Claude Code의 토큰 사용량 제한에 대해 경고하고, 계획 수립에는 ChatGPT나 Claude를 사용할 것을 권장합니다.

[20:45] 간단한 예산 추적 앱을 위한 PRD(제품 요구사항 문서) 작성을 요청하는 예시를 보여줍니다. 단일 사용자용이므로 인증 기능이 불필요함을 명시합니다.

[21:03] PRD 작성이 Claude Code의 출력 품질을 향상시키는 이유를 설명합니다. 명확한 계획 없이는 Claude가 자체 판단으로 기능을 결정하지만, 사전 계획을 통해 더 나은 결과를 얻을 수 있다고 강조합니다.

[21:38] PRD 문서를 프로젝트에 복사하고 docs 폴더를 생성하여 제품 요구사항 문서를 저장합니다. PRD는 기술적 정보가 없어 AI 도구 사용에 적합합니다.

[22:01] 프로젝트에 PRD가 있으니 기술 스택을 고려한 기술적 구현 계획을 수립할 수 있고, 이는 Claude Code의 플래닝 에이전트가 완벽하게 수행할 수 있는 작업입니다.

[22:29] Claude Code 사용 팁으로 'think deeply'나 'think hard' 같은 키워드를 추가하면 에이전트가 추론 모드로 들어가 더 신중하고 정확한 계획을 세울 수 있습니다.

[23:04] Claude Code가 구현 계획을 완성했고, 변경사항 적용 여부를 묻습니다. 옵션 3을 선택해 계획을 docs 폴더에 저장하여 팀원들이 공유할 수 있도록 합니다.

[23:43] 컨텍스트 윈도우를 비우기 위해 새로운 대화를 시작하고, @ 기호를 사용해 기술 구현 계획 파일을 직접 참조하여 토큰 사용량을 절약합니다.

[24:27] 할 일 목록을 검토하면서 의존성 설치와 데이터베이스 스키마 업데이트 계획을 확인합니다. 카테고리 시드는 허용하지만 트랜잭션 주입은 원하지 않습니다.

[24:45] 빌드가 완료된 후 클로드 코드의 빌드 명령어가 어떻게 구문 오류를 자동으로 감지하고 수정하는지 설명합니다. 새로운 기능들이 추가된 앱의 변화된 모습을 확인합니다.

[25:20] 변경사항 완료에 시간이 오래 걸려서 완료 알림을 위한 오디오 신호의 필요성을 언급하며, 커서 에디터의 사운드 옵션과 비교합니다.

[25:41] 변경사항을 커밋하여 체크포인트를 생성한 후, 클로드 코드의 훅 시스템에 대해 설명합니다. 훅은 클로드 코드 내의 다양한 이벤트에 커스텀 프로세스를 연결할 수 있는 강력한 도구입니다.

[26:20] 여러 훅 이벤트 중에서 'stop' 이벤트를 선택하여 클로드 코드가 응답을 완료한 후 사운드를 재생하도록 설정합니다. 사운드 파일을 다운로드하고 클로드를 이용해 재생 스크립트를 생성하는 과정을 설명합니다.

[27:48] Windows에서 미디어 플레이어 없이 음성 파일을 재생하는 쉘 명령어를 생성하고 테스트하는 방법을 설명합니다. 운영체제에 따라 명령어가 다를 수 있으므로 파일 경로와 OS만 수정하면 됩니다.

[28:16] Claude Code에서 명령어를 복사해서 붙여넣고 프로젝트 레벨로 설정한 후 테스트를 진행합니다. Claude Code가 변경사항을 완료할 때마다 오디오 신호가 재생되어 작업 완료를 알려줍니다.

Shift+드래그로 이미지 파일을 업로드한 뒤, 해당 스냅샷의 색상 테마를 추출해 애플리케이션 디자인에 반영하는 과정을 시연한다.

[28:46] Claude Code에서 이미지 처리 기능을 시연합니다. 웹사이트 스크린샷을 찍어 저장한 후, Shift 키를 누른 상태에서 이미지를 채팅창에 드래그 앤 드롭하여 업로드합니다.

[29:15] 업로드한 스크린샷의 색상 구성을 앱에 적용해달라고 요청합니다. Mac과 Linux에서는 Command+V나 Ctrl+V로 파일을 붙여넣을 수 있지만 Windows에서는 작동하지 않습니다.

[00:00] Claude Code 설정이 완료되면

[00:01] 첫 번째 프로젝트를 바로 시작하고 싶을 수 있습니다.

[00:03] 하지만 잠깐, Claude Code를 최대한 활용하기 위해

[00:06] 알아야 할 중요한 팁과 요령들이 있습니다.

[00:08] Claude Code 경험을 향상시키는 방법들 말이죠.

[00:09] 이 영상에서는 간단한 프로젝트를 만들어보면서

[00:11] 매번 효과적인 작업 플로우를 배우고

[00:13] 그 과정에서 정말 유용한 기능들을 알아보겠습니다.

[00:16] 많은 흥미로운 내용들을 만나게 될 거예요.

[00:18] 먼저 Claude Code를 시작하려면

[00:20] claude 명령어를 실행해야 합니다.

[00:22] 하지만 Claude를 다른 방식으로도

[00:24] 시작할 수 있다는 걸 알고 계셨나요?

[00:26] 예를 들어, YOLO 모드로 실행할 수 있습니다.

[00:28] dangerously skip permissions 플래그를 사용해서 말이죠.

[00:31] 기본적으로 Claude는 특정 명령어를 실행하기 전에

[00:33] 권한을 요청합니다.

[00:35] 하지만 이 플래그를 사용하면

[00:38] 권한을 전혀 묻지 않습니다.

[00:40] 저는 이 방법을 권장하지 않습니다.

[00:42] 이 명령어를 실행하면 Claude가

[00:44] 실제로 경고 메시지를 표시합니다.

[00:45] Claude가 권한 우회 모드로 실행 중이라고

[00:47] 알려주죠. Claude Code가

[00:49] 잠재적으로 위험한 명령어를 실행하기 전에

[00:51] 승인을 요청하지 않을 것이라고 말입니다.

[00:54] 자신이 무엇을 하는지 정확히 안다면

[00:56] 괜찮을 수도 있지만, 저는

[00:58] Claude Code가 어떤 작업을 하는지 보고

[01:00] 잘못된 방향으로 가면

[01:02] 중단시키는 것을 선호합니다.

[01:04] 그래서 Claude를 일반 모드로 실행하겠습니다.

[01:06] 여기 또 다른 팁이 있습니다.

[01:08] 현재 터미널에서 Claude Code를 실행하고 있는데

[01:11] 더 넓은 작업 공간을 확보하기 위해

[01:13] 이 터미널을 잡아서 상단 섹션에 추가할 수 있습니다.

[01:15] 이제 훨씬 넓은 공간을 확보했습니다.

[01:18] 물론 필요할 때

[01:20] 터미널을 다시 불러올 수도 있죠.

[01:22] 이 탭의 이름도 Claude Code로 바꾸겠습니다.

[01:25] 좋습니다. 이제 '다음 내용을 설정해 주세요'와 같이

[01:28] 입력하고 싶다고 가정해봅시다.

[01:32] 이때 엔터나 Shift+엔터 또는

[01:34] Ctrl+엔터를 눌러 새 줄을 추가하고 싶을 수 있습니다.

[01:37] 하지만 어떤 키를 눌러도

[01:39] 이 명령어는 Claude에게 전송되어 버립니다.

[01:41] 이는 바람직하지 않죠.

[01:43] 슬래시(/)를 눌러서 새 줄을 추가할 수 있습니다.

[01:46] 그러면 Claude Code에서 사용 가능한 모든 명령어가 나타납니다.

[01:49] 여기서 terminal setup을

[01:50] 검색해보겠습니다.

[01:53] 이것은 Shift+엔터 키 바인딩을 설치합니다.

[01:55] 이제 Shift를 누르고 엔터를 누르면

[01:58] 원하는 만큼 새 줄을 추가할 수 있습니다.

[02:01] 이제 기본 프로젝트 구조 설정을

[02:03] 살펴보겠습니다.

[02:05] 이 시점에서 Claude에게 애플리케이션을

[02:07] 구축해달라고 요청하고 싶을 수 있습니다.

[02:09] 그러면 Claude가 기술 스택을

[02:12] 대신 결정해 줄 것입니다.

[02:14] 개인적으로 저는 그런 접근 방식을

[02:16] 선호하지 않습니다.

[02:18] 사용할 기술 스택을 명확히 지정해주는 것이

[02:21] 더 좋다고 생각합니다. 이 튜토리얼에서는

[02:24] Next.js를 사용할 예정입니다.

[02:26] 풀스택 애플리케이션을 구축하는 데

[02:28] 매우 인기 있는 프레임워크죠.

[02:30] Next.js가 무엇인지 몰라도 괜찮습니다.

[02:32] Claude가 우리 애플리케이션을 구축할 때

[02:34] 사용할 기본 프레임워크라고 생각하면 됩니다.

[02:37] Python이나 다른 언어를 사용한다면

[02:39] Django나 다른 프레임워크를

[02:41] 사용하고 싶을 수도 있겠죠.

[02:43] Claude에게 Next.js 프로젝트를

[02:46] 설정해달라고 요청하겠습니다.

[02:49] 다음과 같이 입력하겠습니다. Shift와

[02:52] Enter를 눌러서 새 줄을 추가하고,

[02:55] 최신 버전의 Next.js를 현재 디렉토리에 설치해달라고 하겠습니다.

[02:59] yes 플래그를 사용해서 모든 기본값을 수락하도록 하겠습니다.

[03:03] 여기서 무슨 일이 일어나고 있는지 설명드리면,

[03:06] 현재 디렉토리를 사용하라고 지시하고 있는데,

[03:08] 때때로 Claude Code가 단순히

[03:10] 새 폴더를 만들고 나서

[03:12] 그 하위 폴더에 Next.js를 설치하는 경우가 있기 때문입니다.

[03:14] 그래서 현재 작업 디렉토리를 사용하라고

[03:17] 명시적으로 알려주고 있습니다.

[03:19] 또한 Next.js 설치 과정에서

[03:21] Next.js가 여러 질문들을 던질 텐데,

[03:24] Claude Code에게 그냥

[03:26] 모든 질문에 대해 기본값을 사용하라고

[03:28] 알려주고 있습니다. 이걸 꼭 명시할 필요는 없어요.

[03:31] Claude Code가 알아서 파악할 수 있지만,

[03:33] 이렇게 하면 토큰 사용량을 절약할 수 있다는 걸

[03:35] 발견했습니다. 그리고

[03:37] 데이터베이스를 추가해보겠습니다.

[03:40] SQLite 데이터베이스를 설정해달라고 하겠습니다.

[03:44] 데이터베이스를 추가하는 이유는

[03:46] 일반적으로 애플리케이션에서

[03:48] 데이터를 추가하고 검색하고 싶어하고,

[03:50] 서버를 재시작할 때마다

[03:52] 모든 데이터를 잃고 싶지 않기 때문입니다.

[03:55] 그래서 데이터베이스를 사용해서

[03:57] 데이터를 영구적으로 저장할 수 있습니다.

[03:59] Next.js가 데이터베이스와 통신하려면

[04:02] ORM을 추가해야 합니다. 그래서

[04:07] Next.js를 데이터베이스에 연결하기 위한

[04:11] Drizzle ORM을 설정해달라고 하겠습니다.

[04:14] 이제 Enter를 눌러서 이 명령을 전송하겠습니다.

[04:16] 이것이 Claude Code의 또 다른 핵심 기능입니다.

[04:19] 복잡한 작업의 경우, 할 일 목록을 만들어줍니다.

[04:21] 그리고 현재 어떤 단계에 있는지

[04:23] 정확히 볼 수 있습니다. 그리고

[04:25] Claude Code를 YOLO 모드로 실행하지 않기 때문에,

[04:28] 특정 명령을 실행하기 전에

[04:30] 권한을 요청하며 멈춥니다.

[04:32] 이제 yes라고 해서 이 명령을 승인하거나

[04:35] yes라고 해서 앞으로 유사한 명령들을

[04:38] 모두 승인하거나, 프로세스를 중단하고

[04:40] 코드에게 다르게 작업하라고 알려줄 수 있습니다.

[04:42] 저는 그냥 yes라고 하겠습니다.

[04:45] 그리고 이 모든 명령들에 대해

[04:47] 계속 yes를 선택하겠습니다.

[04:49] 그리고 Cursor가 이 파일을 편집할 권한을 요청하고 있습니다.

[04:52] 그래서 yes라고 하겠습니다. 사실

[04:54] 두 번째 옵션을 선택하겠습니다.

[04:56] 그리고 두 번째 옵션을 선택함으로써

[04:58] 모드가 자동 수락으로 변경되었습니다.

[05:00] 하지만 잠시 후에 모드들을 살펴보겠습니다.

[05:03] 좋네요. 모든 것이

[05:04] 실제로 설치된 것 같습니다.

[05:06] 이제 모든 것이 올바르게 설정되었는지

[05:08] 확인하기 위해 개발 서버를 실행하고 싶습니다.

[05:10] 물론 터미널을 열어서

[05:12] 직접 실행할 수도 있습니다. 예를 들어

[05:14] npm run dev를 호출하면

[05:17] 이 URL을 얻을 수 있습니다. 그리고 브라우저에서 열면

[05:20] 이 기본 Next.js 프로젝트를 볼 수 있습니다.

[05:22] 하지만 저는 개발 서버를 직접 실행하고 싶지 않습니다.

[05:24] 실제로 Claude Code가

[05:26] 주요 변경을 할 때마다 실행하기를 원합니다.

[05:29] 그럼 Claude Code가

[05:31] 모든 변경사항에 대해 이 규칙을 기억하도록

[05:34] 어떻게 할 수 있을까요? 새로운 대화를 시작하더라도 말이죠.

[05:37] 이제 Claude Code의 메모리에 대해

[05:39] 이야기해보겠습니다. 메모리를 사용해서

[05:42] Claude Code가 모든 향후 요청에 대해

[05:44] 따라야 할 지침을 제공할 수 있습니다.

[05:47] 메모리를 추가하려면 프로젝트 루트에

[05:50] 새 파일을 만들 수 있습니다.

[05:52] claude.md라는 파일을 만들어야 합니다. 이 파일에서

[05:56] 원하는 규칙들을 추가할 수 있습니다. 예를 들어

[05:58] 재미있는 예시로 항상 해적처럼 답변하라고

[06:01] 해봅시다. 이를 저장하고 클로드 코드로 돌아가서

[06:05] 변경사항을 적용하려면

[06:08] 새로운 대화를 시작해야 합니다

[06:10] /clear를 입력하여 새로 시작할 수 있습니다

[06:13] 이제 'hello'라고 보내면 클로드 코드가

[06:16] 해적처럼 응답할 것입니다. 물론 현실적으로는

[06:19] 이런 용도로 사용하지는 않을 것입니다

[06:22] 대신 프로젝트와 관련된

[06:23] 구체적인 규칙들을 추가해야 합니다

[06:26] 새로운 섹션을 추가하고

[06:29] 변경 후 지시사항이라고

[06:31] 이름을 지어봅시다

[06:33] 그리고 새 줄을 추가해서

[06:36] 변경 완료 후 항상 개발 서버를 시작하라고

[06:40] 규칙을 만들어봅시다. 원한다면 수동으로

[06:45] 더 많은 규칙을 추가할 수 있지만

[06:47] 채팅에서 직접 규칙을 추가할 수도 있습니다

[06:49] 해시태그를 입력하고 메모리를 추가할 수 있습니다

[06:53] 예를 들어 항상 개발 서버를

[06:55] 포트 3000에서 시작하라고 하고

[06:59] 포트가 이미 사용 중이면 npx kill을 사용하라고 해봅시다

[07:05] 엔터를 누르면 이 지시사항을

[07:09] 프로젝트 레벨에 추가할지

[07:11] 사용자 레벨에 추가할지 물어봅니다

[07:14] 프로젝트 레벨에서는 이 규칙이

[07:17] 현재 프로젝트에만 적용됩니다

[07:19] 사용자 레벨에서는 그 규칙이

[07:22] 모든 프로젝트에 적용됩니다

[07:24] 프로젝트 메모리를 선택하겠습니다

[07:27] 파일로 돌아가보면 실제로

[07:29] 그 규칙이 추가된 것을 볼 수 있습니다

[07:32] 이 파일에 몇 가지 규칙을 더 추가하겠습니다

[07:34] 개발 서버를 실행하기 전에

[07:36] 클로드 코드가 빌드 명령을 실행해서

[07:38] 구문 오류를 확인하기를 원합니다

[07:41] 변경사항을 만든 후 항상 Next.js 빌드 명령을 실행하라고

[07:46] 하겠습니다. 사실 한 단계 더 나아가서

[07:48] db generate migrate와

[07:50] Next.js 빌드 명령을 변경사항을 만든 후

[07:55] 항상 실행하라고 하겠습니다. 이렇게 하면

[07:59] 데이터베이스 변경사항이 있는 경우도

[08:01] 대응할 수 있습니다

[08:03] 좋습니다. 이제 새로운 대화를 시작해서

[08:05] 변경사항이 적용되도록 하겠습니다

[08:08] 안녕하세요, 미래의 리온입니다

[08:10] 편집하는 동안 제가

[08:13] 완전히 잊어버린 것이 있습니다

[08:15] Claude.md 파일을 만드는

[08:17] 또 다른 방법이 있습니다

[08:19] 물론 파일을 수동으로 만들고

[08:21] 해시태그를 사용해서 메모리를 추가할 수 있지만

[08:24] 클로드 코드가 파일을

[08:26] 자동으로 생성하게 할 수도 있습니다

[08:27] 앞에 슬래시를 붙이고 init을 입력하면

[08:29] 클로드 코드가 자동으로 프로젝트를 스캔하고

[08:33] MD 파일을 생성해줍니다

[08:35] 이미 자신만의 규칙을 설정한 경우

[08:37] 클로드가 하는 일은

[08:39] 코드베이스를 분석하고

[08:41] 클로드 MD 파일을 생성한 다음

[08:44] 기존 규칙들을 새 규칙에 병합합니다

[08:47] 따라서 변경사항을 잃지 않을 것입니다

[08:49] 이제 클로드가 완료되었으니

[08:51] 클로드 MD 파일로 돌아가봅시다

[08:53] 클로드가 모든 스크립트들과

[08:55] 데이터베이스 변경사항을 마이그레이션하는 방법

[08:57] 프로젝트 아키텍처 등을 포함한

[09:00] 매우 상세한 파일을 만든 것을 볼 수 있습니다

[09:02] 하지만 파일 하단에는

[09:05] 훨씬 더 많은 내용이 있습니다

[09:07] 우리만의 커스텀 규칙들도 확인할 수 있습니다.

[09:10] 다시 영상으로 돌아가서, 실제로

[09:13] 예산 추적 애플리케이션을

[09:15] 만들어보겠습니다. 말해보죠.

[09:18] 매우 간단한 예산 추적 애플리케이션을 만들어주세요.

[09:22] 그리고 데이터베이스의 실제 데이터를 사용하도록 해주세요.

[09:27] 이걸 보내겠습니다. 좋습니다.

[09:30] 데이터베이스 생성을

[09:32] 실행하라고 요청하고 있습니다. 실행해보겠습니다.

[09:35] 이제 마이그레이션 단계를 실행하려고 합니다.

[09:37] 그것도 실행해보겠습니다. 그리고

[09:39] 이 프로세스를 중지하기 위해

[09:41] escape를 누르겠습니다. Escape는

[09:44] Claude Code를 사용할 때

[09:46] 가장 좋은 친구입니다. 만약

[09:48] 무엇을 하고 있는지 이해하지 못한다면

[09:50] 차라리 escape를 눌러주세요. 그러면

[09:52] 변경사항에 대해 확신이 든다면

[09:54] 언제든지 프로세스를 계속할 수 있습니다.

[09:56] 제가 escape를 누른 이유는

[09:58] 이 댓글을 봤기 때문입니다. 데이터베이스에

[10:01] 시드 데이터를 생성할 것이라고 하고

[10:03] 샘플 카테고리와 트랜잭션으로 채우는

[10:07] 간단한 스크립트를 만들 것이라고 합니다.

[10:09] 저는 Claude Code가 제 데이터베이스에

[10:12] 쓸데없는 데이터를 주입하는 것을 원하지 않습니다.

[10:14] 그래서 프로세스를 중지하기 위해 escape를 눌렀고

[10:18] 이제 수정할 수 있습니다. 샘플 데이터로

[10:22] 데이터베이스를 시드하지 말아주세요.

[10:24] 실행해보겠습니다. 이제 Claude Code가

[10:26] 수정할 것입니다. 알겠다고 하면서

[10:29] 데이터베이스 시딩을 건너뛰고

[10:31] 예산 추적 앱 구축에 집중하겠다고 합니다.

[10:33] 바로 제가 원했던 것입니다. 그리고 이제

[10:35] 시드 데이터 파일을 제거할

[10:38] 권한을 요청하고 있습니다. 두 번째

[10:40] 옵션을 선택하겠습니다. 이것이 바로

[10:42] 제가 YOLO 모드를 좋아하지 않는 이유입니다.

[10:44] Claude Code가 무엇을 하고 있는지

[10:46] 정말 주의 깊게 봐야 합니다. 그래야

[10:48] 중지하고 변경할 수 있습니다.

[10:50] 여기서 Claude Code가 빌드

[10:52] 명령을 실행하고 있는 것을 볼 수 있습니다.

[10:55] 이는 claude.md 파일에서

[10:57] 그 지시사항을 받았기 때문입니다.

[10:59] 다행히 그렇게 요청했습니다. 왜냐하면

[11:02] 실제로 구문 오류를 발견했고 지금

[11:04] 그 수정을 하고 있기 때문입니다. 이제

[11:07] 빌드 명령을 다시 실행하고 있습니다.

[11:08] 이번에는 모든 것이 잘 작동하고 있습니다. 그리고

[11:11] 포트 3000에서 개발 서버를

[11:13] 시작하려고 하지만, 이 포트가

[11:16] 이미 사용 중이라는 것을 깨달았습니다.

[11:18] 그래서 기존 세션을 종료하고

[11:20] 개발 서버를 시작할 것입니다. 그렇게 했습니다.

[11:23] 왜 매번 개발 서버를

[11:25] 시작하는지 궁금할 수 있습니다. 네, 변경사항을

[11:28] 만들면 Next.js가 자동으로

[11:30] 변경사항을 감지하고

[11:32] 프론트엔드에 표시되어야 합니다. 하지만

[11:34] Next.js로 작업해본 적이 있다면

[11:36] 때때로 주요 변경사항이

[11:38] 개발 서버를 종료시키고 수동으로

[11:41] 다시 시작해야 한다는 것을 알 것입니다.

[11:43] 어쨌든, 그렇다면 앱을

[11:45] 새로고침해보겠습니다. 그리고 이제

[11:47] 예산 추적 앱이 있습니다.

[11:50] 트랜잭션을 추가해보겠습니다. 이 텍스트를

[11:52] 읽기가 매우 어렵습니다. 잠시 후에

[11:56] 그것을 수정하겠습니다. 하지만 일단

[11:58] 급여 같은 제목을 입력하겠습니다.

[12:01] 금액에는 뭔가를 입력하겠습니다.

[12:04] 타입은 수입을 선택하겠습니다.

[12:06] 그게 전부입니다. 이 트랜잭션을 추가해보겠습니다.

[12:08] 음식이라고 입력해보겠습니다. 금액을 입력해보죠.

[12:11] 유형은 지출로 그대로 두겠습니다.

[12:14] 이 거래를 추가해보겠습니다.

[12:16] 좋네요. 수입과

[12:18] 지출이 이 목록에 표시됩니다. 한번

[12:20] 데이터베이스가 작동하는지 확인해보죠.

[12:22] 앱을 새로고침해보겠습니다.

[12:25] 이 값들이 여전히 남아있네요.

[12:27] 좋습니다. 이제 이 앱의 문제점들을 수정해보겠습니다.

[12:29] 이 입력 폼에서 텍스트를 읽기가 매우 어렵습니다.

[12:31] 클로드 코드로 돌아가서

[12:35] 다음 문제 해결을 도와달라고 말해보겠습니다.

[12:39] 폼 텍스트가 매우 읽기 어렵습니다

[12:44] 밝은 배경에 텍스트 색상이 너무 연하기 때문입니다.

[12:48] 이걸 전송해보겠습니다.

[12:50] 좋습니다. 몇 가지 변경사항을 만들었네요.

[12:52] 앱으로 돌아가보면 훨씬 나아 보입니다.

[12:55] 또한 하단에 오류가 있는 것을 발견했습니다.

[12:58] 이걸 열어보면 Next.js에서

[13:00] 경고나 오류를 표시하고 있습니다.

[13:03] 이를 수정하려면 이 로그를 복사한 다음

[13:05] 클로드 코드에 붙여넣기만 하면 됩니다.

[13:08] 이 필드에 우클릭해서

[13:10] 붙여넣을 수 있습니다.

[13:12] 전송해보겠습니다. 좋습니다.

[13:15] 몇 가지 변경사항을 만들었습니다. 앱을 새로고침하면

[13:17] 이제 이 오류 메시지가 나타납니다.

[13:20] 그래서 저는 가끔씩 개발 서버를 새로고침하는 것을 선호합니다.

[13:22] 그리고 이 작은 변경사항에 대해서는

[13:24] 클로드 코드가 개발 서버를 다시 시작하지 않기로 결정한 것 같습니다.

[13:26] 개발 서버를 다시 시작해달라고 말해보겠습니다.

[13:29] 좋습니다. 기존 서버를 종료하고

[13:30] 이제 개발 서버를 시작했습니다.

[13:33] 새로고침해보겠습니다.

[13:36] 잘 되네요. 더 이상

[13:38] 오류 메시지도 없습니다.

[13:40] 이제 이 앱을 꽤 많이 개선할 예정입니다.

[13:43] 하지만 기본 기능이 이제 작동하고 있으니

[13:45] 커밋이나 체크포인트를 생성하기에 매우 좋은 시점입니다.

[13:47] 체크포인트는

[13:50] 단순히 이 애플리케이션의 현재 상태를 저장할 수 있다는 의미입니다.

[13:52] 앞으로 실수를 하더라도

[13:55] 항상 이 현재 체크포인트로

[13:57] 롤백할 수 있습니다.

[13:59] 다행히도 클로드 코드가 이를

[14:01] 대신 해줄 수 있습니다.

[14:04] 우리가 해야 할 일은

[14:07] 이러한 변경사항에 대한 커밋을 생성해달라고 말하는 것뿐입니다.

[14:11] 이걸 전송해보겠습니다. 그리고

[14:13] 이러한 변경사항들을 계속 승인하겠습니다.

[14:16] 좋습니다. 이제 완료되었습니다.

[14:18] 버전 제어 옵션으로 가면 모든 체크포인트를 볼 수 있고

[14:21] 하단에서 클로드 코드가

[14:24] 방금 만든 커밋을 볼 수 있습니다

[14:26] 수행된 작업에 대한

[14:28] 많은 세부 정보와 함께 말이죠.

[14:30] 좋습니다. 실제로

[14:32] 뭔가를 망치게 되었을 때 롤백하는 방법을 보여드리겠습니다.

[14:36] 아주 간단한 예시로 테마를 빨간색으로 바꿔보겠습니다.

[14:39] 테마를 파란색에서

[14:41] 빨간색으로 바꾸겠다고 하네요.

[14:44] 사실 색상 변경은

[14:46] 너무 미묘할 수 있습니다. 그냥

[14:51] 브랜드를 나의 추적 앱으로 바꿔달라고 해보겠습니다.

[14:54] 좋습니다. 이 변경사항을 만들었네요.

[14:55] 앱이 이제 나의 추적 앱이라고 불리고

[14:57] 일부 요소들이 빨간색으로 바뀌었습니다.

[14:59] 그런데 이제 실제로

[15:01] 이러한 변경사항을 롤백하고 싶다면 어떻게 해야 할까요?

[15:03] 체크포인트를 생성했으니

[15:06] 우리가 해야 할 일은

[15:09] 이전 커밋으로 되돌려달라고 말하는 것뿐입니다.

[15:12] 이전 커밋으로 리셋할 수 있는지 권한을 요청하고 있습니다

[15:14] 커밋으로 돌아가요. 그럼 이것을 승인해보겠습니다.

[15:17] 그리고 물론, 개발 서버를 시작하는 것을 깜빡했다면

[15:18] 개발 서버를 다시 시작해 주세요.

[15:23] 우리는 언제든지 클라우드 파일의 프롬프트를 조정해서

[15:24] 개발 서버를 항상 시작하도록 엄격하게 만들 수 있지만

[15:27] 이런 일은 때때로 발생할 것입니다.

[15:29] 좋습니다. 이걸 새로고침해보겠습니다.

[15:30] 그리고 됐습니다.

[15:33] 모든 것이 원래대로 돌아왔습니다.

[15:35] 좋습니다. 이 대화가

[15:37] 매우 길어지기 시작했네요.

[15:40] 저는 작은 컨텍스트 윈도우 사용을 강력히 권장합니다.

[15:43] 대화가 길어질수록

[15:45] 더 혼란스러워지고, 응답의 품질도

[15:48] 떨어지기 시작할 것입니다.

[15:50] 새 대화를 시작하기 위해서는

[15:53] /clear 명령어를 사용할 수 있습니다.

[15:56] 이렇게 하면 대화 기록이 지워지고

[15:58] 컨텍스트가 해제됩니다. 이제 알겠지만

[16:00] 때로는 그것이 원하는 것이 아닐 수도 있습니다.

[16:03] 매우 복잡한 문제의 한가운데 있을 수 있고

[16:05] 이 컨텍스트를 잃을 수 없을 수도 있습니다.

[16:08] 그럴 때는 /compact를 실행하면 됩니다.

[16:11] 이렇게 하면 먼저 대화 기록의 요약을 생성하고

[16:13] 새 대화를 시작해서

[16:15] 일부 컨텍스트를 해제합니다.

[16:18] 만약 대화 기록이 매우 복잡하고

[16:20] 특정 정보만

[16:22] 기억되기를 원한다면

[16:24] 선택적으로 추가 지침을 추가할 수 있습니다.

[16:26] 예를 들어 브랜드 변경에 관한

[16:30] 내용만 요약하라고 하는 것처럼요.

[16:34] 이를 실행하면 클라우드 코드가

[16:36] 이제 대화 기록을 요약하고

[16:38] 새 대화를 시작할 것입니다.

[16:41] 만약 생성된 요약을 보고 싶다면

[16:43] Ctrl+R을 누르면 됩니다.

[16:45] 이제 완전한 요약을 볼 수 있고

[16:48] 또는 Ctrl+R을 눌러서

[16:51] 다시 그 뷰를 숨길 수도 있습니다.

[16:53] 이제 몇 가지 더 유용한 명령어들을 살펴보겠습니다.

[16:55] /exit를 눌러서

[16:58] 클라우드 코드를 종료할 수 있습니다. 또는 대화를 재개하고 싶다면

[17:01] /resume을 간단히 입력하면 됩니다.

[17:04] 이를 누르면

[17:07] 모든 이전 대화들을 볼 수 있습니다.

[17:10] 그럼 우리가 만든 마지막 것을 선택해보겠습니다.

[17:13] 이 요약이 포함된

[17:14] 대화였습니다. 하지만 다시 말하지만

[17:17] 기능을 완료한 후에는

[17:19] 깨끗한 컨텍스트로 새 대화를 시작하는 것을 권장합니다.

[17:22] 그리고 명령어에 대해 논의하는 동안

[17:24] 커스텀 슬래시 명령어의 개념을

[17:27] 소개하고 싶습니다.

[17:28] 클라우드 코드에서 슬래시를 누르면

[17:30] 이 모든 기본 명령어들에 접근할 수 있지만

[17:32] 자신만의 것도 만들 수 있습니다.

[17:35] 예를 들어, 프로젝트 시작 시

[17:37] 클라우드 코드에게 Next.js와

[17:40] 우리 데이터베이스 같은 것들을 설정해달라고 요청합니다.

[17:41] 이제 새 프로젝트를 시작할 때마다

[17:44] 이런 것들을 수동으로 입력하고 싶지 않을 수도 있습니다.

[17:46] 즉시 새 프로젝트를 시작해주는

[17:48] 명령어가 있다면 이상적일 것입니다.

[17:51] 그럼 이런 커스텀 슬래시 명령어들을 만들기 위해서는

[17:53] claude 폴더 안에

[17:55] commands라는 새 하위 폴더를 만들어야 합니다.

[17:57] 그리고 이 폴더 안에서

[18:00] 추가하고 싶은 각 새 명령어에 대한

[18:02] 파일을 만들 수 있습니다.

[18:05] new-nextjs-project.md라는

[18:08] 파일을 추가해보겠습니다.

[18:10] 그리고 첫 번째 줄에는

[18:13] 해시태그와 이 명령어의 이름을 입력합니다. Next.js 프로젝트 시작하기 같은 것으로요.

[18:18] 첫 번째 줄에 해시와 함께

[18:21] 이 명령어의 이름을 입력해주세요. 예를 들어 'Next.js 프로젝트 시작하기' 이런 식으로요.

[18:25] 그리고 그 아래에는

[18:27] 이 명령어에 대한 간단한 설명을 제공할 수 있습니다.

[18:30] 새로운 Next.js 프로젝트를 SQLite 데이터베이스와

[18:35] Drizzle ORM과 함께 시작하기 같은 식으로요.

[18:39] 그리고 이제 '순서대로 실행할 명령어들' 같은

[18:42] 항목을 추가할 수 있습니다. 솔직히

[18:45] 이 파일에는 무엇이든 추가할 수 있어요.

[18:47] 이건 단순히 해당 명령어를 선택했을 때

[18:49] 실행될 프롬프트일 뿐입니다.

[18:51] 그래서 '현재 폴더에 Next.js 설정하기'라든지

[18:56] 그리고 'SQLite 데이터베이스 설정하기', 그리고

[19:02] Next.js와 데이터베이스 간의 Drizzle ORM 연결 설정하기

[19:07] 이런 식으로 할 수 있습니다.

[19:11] Claude Code로 다시 돌아가서

[19:13] 이걸 지우고요. 사실

[19:15] Claude Code를 종료해야 할 것 같네요.

[19:17] 그리고 다시 Claude를 실행해주세요.

[19:19] 이제 슬래시(/)를 누르면

[19:22] 목록에서 우리의 커스텀 명령어를 볼 수 있습니다.

[19:26] 이걸 실행하면 해당 프롬프트가

[19:28] Claude Code에 주입됩니다.

[19:30] 하지만 이미 프로젝트를 설정했으니

[19:32] 멈추겠습니다. 다만

[19:34] 계속 재사용하는 프롬프트가 있다면

[19:36] 그 템플릿을 이런 명령어 파일 중 하나에 저장하고

[19:39] 슬래시 명령어를 통해 사용할 수 있다는 걸

[19:41] 기억해두세요.

[19:43] 좋습니다. 프로젝트를 계속 진행해봅시다.

[19:45] Claude Code에서는 Shift+Tab을 눌러서

[19:48] 현재 모드를 변경할 수 있습니다. 기본적으로 이 모드는

[19:52] 모든 명령어를 실행하기 전에 권한을 요청합니다.

[19:54] 변경사항을 자동으로 활성화하고 싶다면

[19:57] Shift+Tab을 누르면 자동 승인 모드로

[20:00] 전환됩니다. 이는 Claude Code가

[20:03] 먼저 권한을 요청하지 않고

[20:05] 파일을 변경한다는 의미입니다.

[20:08] 하지만 또 다른 방법으로는 Shift+Tab을

[20:10] 다시 눌러서 계획 모드로 들어가는 것입니다.

[20:13] 계획 모드에서는 Claude Code가

[20:15] 프로젝트에 아무런 변경을 가하지 않습니다.

[20:17] 이는 변경사항을 미리 계획하기에 이상적입니다.

[20:19] 프로젝트에 실제로 구현하기 전에 말이죠.

[20:22] 예를 들어, 추가 변경사항을 만들기 전에

[20:24] 제품 요구사항 문서를 만들고 싶다고 해봅시다.

[20:27] 변경사항을 만들기 전에 말이죠.

[20:29] 이제 작은 팁을 하나 드리자면

[20:32] Claude Code는 현재 매우 엄격한

[20:35] 사용 제한이 있습니다. 그래서

[20:37] 토큰을 이런 것에 낭비하고 싶지 않을 겁니다.

[20:39] 대신 ChatGPT나 Claude 같은 걸 사용해서

[20:42] 이런 계획을 세우세요.

[20:45] 그래서 '매우 간단한 예산 추적 앱을 위한 PRD를 만들어주세요.

[20:51] 한 명의 사용자만 사용할 것이므로

[20:54] 이 단계에서는 인증이 필요하지 않습니다'라고 말할 수 있겠네요.

[21:00] 그리고 이걸 보내봅시다.

[21:03] 제품 요구사항 문서를 만드는 것은

[21:05] Claude Code의 결과물을 크게 향상시킬 수 있습니다.

[21:08] 왜냐하면 단순히 Claude Code에게

[21:10] 앱을 만들어달라고 요청하면

[21:12] 나름대로 판단해서

[21:14] 앱에 어떤 기능이 있어야 하는지

[21:16] 알아낼 것이기 때문입니다. 하지만 때로는

[21:18] 이런 작은 계획만으로도

[21:20] 엄청난 차이를 만들 수 있습니다.

[21:22] 물론 Claude Code가 만든 결과물을 살펴보고

[21:25] 이 애플리케이션을 다듬기 위해 대화를 나눌 수 있습니다.

[21:27] 타겟 시장, 성공 요인,

[21:29] 핵심 기능과 사용자 스토리 등을

[21:33] 제공해주고 있네요.

[21:37] 좋습니다. 이걸 복사하겠습니다.

[21:38] 문서를 복사해서 프로젝트로 돌아가서

[21:41] 새로운 폴더를 만들어봅시다

[21:43] docs라고 이름 짓고, docs 폴더 안에

[21:46] prd.md 파일을 만들어서 우리 제품 요구사항 문서를 붙여넣겠습니다

[21:51] 좋네요. PRD에는

[21:53] 기술적인 정보가 포함되어 있지 않기 때문에

[21:55] Claude나 ChatGPT를 사용하기에

[21:57] 완벽한 후보였습니다

[21:59] 하지만 이제 PRD가 우리 프로젝트에 있으니

[22:01] PRD와 현재 기술 스택을 살펴보고

[22:04] 기술적 구현 계획을 세울 수 있습니다

[22:06] 이 부분은 Claude Code의 플래닝 에이전트가

[22:09] 완벽한 역할을 하는 부분입니다

[22:11] 그래서 플래닝 모드에서

[22:13] Claude Code 플래닝 에이전트가

[22:15] 완벽한 도구입니다. 플래닝 모드에서

[22:17] docs 폴더에 있는 PRD를 기반으로

[22:20] 기술적 구현 계획을 도와달라고 말해봅시다

[22:24] 그리고 여기 Claude Code 사용에 대한 정말 유용한 팁이 있습니다

[22:29] 계획 수립 시에는 실제로

[22:32] 에이전트의 추론 능력을 향상시켜

[22:33] 이 계획에 대해 정말로

[22:35] 신중하게 생각하도록 할 수 있습니다

[22:37] 사고 모드로 들어가게 하려면

[22:39] 'think deeply'나 'think hard' 또는

[22:42] 'harder' 같은 키워드를 추가할 수 있습니다

[22:46] 그래서 'think deeply on this solution'

[22:49] 이런 식으로 해봅시다. 이걸 보내면

[22:52] 추론 모드를 트리거했다는 걸

[22:54] 여기 이 thinking 단계를 보면 알 수 있습니다

[22:56] thinking은 시간이 조금 더 걸리고

[22:59] 토큰도 더 많이 소비하지만

[23:01] 더 나은 응답을 제공합니다

[23:04] 좋네요. Claude Code가

[23:06] 이 구현 계획을 만들었고

[23:08] 이제 변경사항을 적용할지

[23:10] 아니면 계속 계획을 세워볼지 묻고 있습니다

[23:12] 아직 변경사항을 적용하고 싶지 않으니

[23:14] 옵션 3을 선택하겠습니다

[23:16] 그리고 Shift+Tab을 사용해서

[23:18] 다시 auto accept 모드로 바꾸고

[23:22] 이 계획을 docs 폴더에 저장하라고

[23:25] 말하겠습니다. 이렇게 하면 다른 팀원들도

[23:29] 구현 계획을 볼 수 있고

[23:31] 물론 빌드하는 동안 언제든지

[23:33] Claude Code가 그 구현 계획을

[23:35] 다시 참조할 수 있습니다

[23:38] 좋습니다. 이제 기술 구현 계획 파일이

[23:40] 생겼습니다. 앞서 언급했듯이

[23:43] 항상 새로운 대화를 시작해서

[23:45] 컨텍스트 윈도우를 비우는 게

[23:47] 좋은 아이디어입니다

[23:50] 이제 기술 구현 계획 문서의

[23:53] 변경사항을 구현해서

[23:56] 앱을 개선해달라고 말해봅시다

[24:00] @ 기호를 입력해서

[24:03] 파일을 직접 참조할 수도 있습니다

[24:06] docs로 가서 docs 폴더 안에 있는

[24:09] 기술 구현 계획을 선택해봅시다

[24:12] Claude Code가 그 파일을 스스로

[24:15] 찾을 수 있겠지만, 파일에 직접

[24:17] 접근하게 해주면 토큰 사용량을

[24:20] 많이 절약할 수 있습니다

[24:22] 잠깐 escape를 누르고

[24:24] 이 할 일 목록을 살펴보겠습니다

[24:27] 몇 가지 의존성을 설치하고

[24:29] 모든 새로운 테이블로

[24:31] 데이터베이스 스키마를 업데이트하려고 합니다

[24:33] 그리고 다시, 미리 정의된 카테고리로

[24:36] 데이터베이스를 시드하려고 하는데

[24:38] 카테고리의 경우는 괜찮다고 생각합니다

[24:40] 하지만 트랜잭션을 주입하는 건

[24:42] 원하지 않습니다

[24:45] 일단 계속 진행하겠습니다. 좋습니다.

[24:47] 빌드가 완료되었는데 몇 가지 말씀드리고 싶은 것이 있습니다.

[24:50] 빌드 명령어는 정말 게임 체인저였습니다.

[24:52] 클로드 코드가 변경사항을 만들면,

[24:55] 빌드 명령어를 실행해서 구문 오류를 확인하고

[24:58] 문제를 미리 감지해서 수정해줍니다.

[25:00] 어쨌든 이제 앱으로 돌아가보면

[25:02] 이전보다 훨씬 기능이 완성된 모습입니다.

[25:05] 이제 그래프들이 생겼고

[25:07] 물론 최근 거래 내역도 볼 수 있고

[25:09] 예산이나 분석 같은 다른 기능들도 있습니다.

[25:11] 예산을 클릭해보면 예산을 추가할 수 있고

[25:14] 분석에서는 이런 그래프들을 볼 수 있습니다.

[25:15] 이 모든 것이 우리가 만든 PRD와

[25:17] 클로드 코드가 제시한 구현 계획 덕분입니다.

[25:20] 이런 변경사항들을 완료하는 데 정말 오래 걸렸습니다.

[25:22] 그래서 이상적으로는 변경사항이 완료되었다는

[25:25] 오디오 신호가 있으면 좋겠습니다.

[25:27] 예를 들어 커서를 사용해본 적이 있다면

[25:30] 커서 설정에서 변경사항이 완료될 때마다

[25:32] 소리를 재생하는 옵션이 있습니다.

[25:35] 클로드 코드에서도 훅을 사용해서

[25:37] 비슷한 것을 할 수 있습니다.

[25:40] 훅을 살펴보기 전에 먼저

[25:41] 커밋을 생성해보겠습니다.

[25:44] 이 변경사항들을 위한 커밋을 만들어주세요.

[25:47] 좋습니다. 이제 뭔가 문제가 생겼을 때

[25:49] 되돌릴 수 있는 새로운 체크포인트가 생겼습니다.

[25:51] 이제 훅에 대해 얘기해보겠습니다.

[25:55] 클로드 코드에 커스텀 훅을 추가할 수 있습니다.

[25:56] 슬래시를 입력하고 훅으로 가서 훅을 관리할 수 있습니다.

[26:01] 훅은 기본적으로 클로드 코드 내에서 발생하는 이벤트입니다.

[26:05] 예를 들어 클로드 코드가 변경사항을 완료한 후에

[26:07] 그 완료 이벤트에 커스텀 프로세스를 연결할 수 있습니다.

[26:09] 훅은 매우 강력한 도구로

[26:11] 복잡한 작업들을 할 수 있게 해줍니다.

[26:14] 하지만 제가 원하는 것은 단순히

[26:17] 변경사항이 완료되면 소리를 재생하는 것입니다.

[26:20] 이 훅 이벤트 목록에는

[26:22] 도구 실행 전, 도구 실행 후,

[26:25] 알림이 전송되는 시점 등의 이벤트가 있습니다.

[26:27] 제가 원하는 것은 이 stop 이벤트입니다.

[26:30] 이것은 클로드 코드가 응답을 완료하기 직전에,

[26:32] 즉 변경사항을 완료한 후에 트리거됩니다.

[26:34] 이 이벤트를 선택하고 새 훅을 추가해보겠습니다.

[26:37] 이제 이 이벤트가 트리거될 때마다

[26:39] 실행될 셸 명령어를 제공해야 합니다.

[26:42] 먼저 사운드 이펙트를 다운로드해보겠습니다.

[26:45] 이 페이지 링크는 영상 설명에 넣어두겠습니다.

[26:47] 클로드 코드가 완료될 때마다 이 소리가 나도록 해보겠습니다.

[26:51] 이 파일을 다운로드해서

[26:53] 제 컴퓨터의 어떤 폴더에 추가할 것입니다.

[26:55] 이 파일 이름을 bell 같은 걸로 바꾸겠습니다.

[26:58] 그게 다입니다. 이제 해야 할 일은

[27:00] 이 소리를 재생할 셸 명령어를 만드는 것입니다.

[27:03] 솔직히 말하면 저는 클로드를 사용해서

[27:05] 스크립트를 생성해달라고 했습니다.

[27:07] 그냥 제 컴퓨터에서 사운드 파일을 재생할

[27:10] 셸 명령어가 필요하다고 말하면 됩니다.

[27:12] 그리고 이 페이지 링크를 영상 설명에

[27:13] 넣어두겠다고 했습니다.

[27:16] 클로드 코드가 완료될 때마다

[27:18] 이 소리가 재생되기를 원합니다.

[27:20] 이 파일을 다운로드해서

[27:22] 제 컴퓨터의 어떤 폴더에 추가할 것입니다.

[27:25] 이 파일 이름을 bell 같은 걸로 바꾸겠습니다.

[27:27] 그게 다입니다. 이제 이 소리를 재생할

[27:30] 셸 명령어를 만들기만 하면 됩니다.

[27:32] 솔직히 저는 클로드를 사용해서

[27:35] 스크립트를 생성해달라고 했습니다.

[27:37] 그냥 제 컴퓨터에서 사운드 파일을 재생할

[27:39] 셸 명령어가 필요하다고 말하면 됩니다.

[27:43] 제 컴퓨터에서 사운드 파일을 재생할 셸 명령어가 필요합니다.

[27:48] 미디어 플레이어를 열지 않고

[27:53] 음성 파일을 찾을 수 있습니다. C:\codebell.wave 경로에 있습니다.

[27:58] 제가 Windows OS를 사용하고 있습니다.

[28:02] 이 명령어는 운영체제에 따라

[28:04] 다를 수 있습니다. 이와 비슷한

[28:06] 프롬프트를 사용할 수 있습니다. 파일 위치와

[28:08] 사용 중인 운영체제만

[28:10] 변경하면 됩니다.

[28:12] 실행해보겠습니다. 이 명령어를 복사해보죠.

[28:16] Claude Code로 돌아가서 붙여넣기 하겠습니다.

[28:18] 엔터를 누르겠습니다. 프로젝트 레벨로 설정하겠습니다.

[28:21] 완료되었습니다. 원한다면

[28:24] 더 많은 훅을 추가할 수 있지만

[28:26] 지금은 이 정도면 충분할 것 같습니다.

[28:28] ESC를 눌러서 돌아가서

[28:31] 테스트해보겠습니다. 그냥 안녕이라고 말해보고

[28:33] 소리가 나는지 확인해보겠습니다.

[28:36] 녹화에서 들렸는지는 확실하지 않지만

[28:37] 저는 확실히 그 소리를 들었습니다.

[28:39] Claude Code가

[28:41] 변경 사항을 완료할 때마다

[28:43] 들을 수 있는 오디오 신호가 생겼습니다.

[28:46] 마지막으로

[28:48] Claude Code에서 이미지 처리하는 방법도 살펴보겠습니다.

[28:50] 새로운 대화를 시작하겠습니다.

[28:52] 우리 앱이 이 웹사이트와

[28:54] 같은 모양과 느낌을 갖기를 원한다고 가정해봅시다.

[28:57] 이 페이지의 스크린샷을 찍어서

[29:00] 제 컴퓨터 어딘가에 저장하겠습니다.

[29:02] Claude Code로 돌아가서

[29:05] 이 이미지를 채팅 창에

[29:07] 드래그 앤 드롭하겠습니다. Shift 키를 누른 상태에서

[29:09] 마우스 버튼을 놓겠습니다.

[29:13] 이렇게 하면 Claude Code에 이미지가 추가됩니다.

[29:15] 이제 '우리 앱이 이 스크린샷의 테마와

[29:22] 같은 색상 구성을 사용했으면 좋겠습니다.

[29:25] 이러한 변경사항을 적용해 주실 수 있을까요?'라고

[29:29] 말해보겠습니다. 전송하겠습니다.

[29:31] 이미지 파일에 대한 접근을 승인하겠습니다.

[29:33] Mac과 Linux에서는

[29:36] Command+V나 Ctrl+V로 파일을 붙여넣을 수도 있다고 생각하지만

[29:39] 안타깝게도 Windows에서는

[29:41] 작동하지 않는 것 같습니다.

[29:43] 좋습니다. Claude가 변경사항을 적용한 것 같네요.

[29:46] 보세요! 우리 웹사이트가 이제

[29:48] 그 템플릿의 테마와 일치합니다.

[29:50] 뭔가 배우셨나요? 그렇다면

[29:52] 좋아요 버튼을 누르고

[29:54] 더 많은 Claude Code 콘텐츠를 위해

[29:56] 제 채널을 구독해주세요.

[29:58] 또한 제가 놓친 여러분의 즐겨 사용하는 팁이나

[30:00] 비법이 있다면 댓글로 알려주세요.

[30:03] 지금 화면에 있는 카드를 클릭해서

[30:05] 제 다른 콘텐츠도 확인해보세요.

[30:07] 다음 영상에서 뵙겠습니다. 안녕히계세요.