전체 튜토리얼: 35분 만에 Claude Code 마스터하기 – 실제 앱 만들기

Peter Yang 구독자 29,800명

요약

이 튜토리얼에서는 Claude Code를 활용해 가족 맞춤형 활동 추천 앱을 35분 내에 완성하면서 AI 협업 워크플로우 20가지를 익힌다. Plan 모드, Spec-ToDo-Code 프로세스, 출력 스타일, 음성 명령, GitHub 통합, 디버깅 전략 등 단계별 팁을 따라 AI 에이전트와 대화하듯 프로젝트를 설계·구현·수정하는 과정을 안내한다. 개발 초기 설정부터 API 연동, 버전 관리, 컨텍스트 최적화까지 비기술자도 실전 앱을 완성할 수 있도록 돕는다.

주요 키워드

Cloud Code plan mode Spec-ToDo-Code 프로세스 output style claw.md voice command GitHub integration web search tool MCP server 디버깅

하이라이트

🔑 코드 작성 전 Plan 모드를 활용해 충분히 설계하면 AI 성공 확률이 크게 높아진다.
⚡️ Spec, ToDo, Code 프로세스를 따르면 요구사항부터 마일스톤까지 일관된 문서화로 AI가 오류 없이 개발을 수행한다.
🌟 output style을 'explanatory'로 설정하면 코드 작성 중 기술 아키텍처 설명을 받아 학습 효과를 극대화할 수 있다.
🚀 Whisper Flow 같은 음성 명령을 사용하면 컨텍스트 전달이 빠르고 풍부해져 AI의 응답 품질이 향상된다.
📌 GitHub 연동으로 마일스톤별 커밋을 자동화하면 AI가 생성한 코드를 안전하게 버전 관리할 수 있다.
🐞 AI가 예상치 못한 동작을 할 때는 Esc 키로 중단하고 방향을 수정하면 정확도를 유지할 수 있다.
🔍 'think ultra hard'와 'why…' 프롬프트를 통해 AI에게 근본 원인 분석을 요청해 디버깅 효율을 높인다.
⚙️ claude 설정 파일로 권한을 자동화하면 반복 작업 시 AI가 자율적으로 Read/Write 명령을 수행하도록 할 수 있다.
🗄️ 'compact' 명령으로 대화 이력을 요약해 컨텍스트 부하를 줄이고 AI 성능을 안정화한다.
🚀 웹 검색 툴 연동으로 최신 이벤트를 실시간으로 가져와 가족 활동 추천의 정확도를 높인다.

용어 설명

Cloud Code

Anthropic의 Claude AI 기반 코드 어시스턴트로, IDE 내에서 AI와 협업해 앱을 설계·작성·디버깅할 수 있는 도구이다.

plan mode

Shift+Tab으로 전환해 코드 작성 전 설계·계획을 AI에게 요청하는 모드로, 충분한 설계 없이 코딩을 바로 시작하지 않도록 돕는다.

spec.md

요구사항, 기술 스택, 디자인 가이드라인, 마일스톤을 정의한 명세 파일로, AI에게 프로젝트 전반 구조를 안내한다.

to-do.md

첫 번째 마일스톤의 세부 작업 목록을 기록한 파일로, AI가 순서대로 개발 단계를 수행하도록 유도한다.

output style

'explanatory', 'learning' 등 AI 출력 방식을 설정해 코드와 함께 설명 박스나 실습 과제를 생성하도록 조정하는 기능이다.

claw.md

코드 베이스를 스캔해 프로젝트 컨텍스트, 주요 패턴, 핵심 파일 정보를 저장하는 메모리 파일로, 이후 대화에서 AI가 참조한다.

web search tool

Cloud Code의 외부 웹 검색 도구로, 실시간 인터넷 검색을 통해 최신 정보나 이벤트를 가져와 AI 추천 결과에 활용할 수 있다.

MCP server

Playwright, Figma 등 전문 기능 플러그인을 Cloud Code에 추가하는 확장 서버로, UI 테스트나 프로토타이핑을 지원한다.

튜토리얼 목적과 전체 흐름을 소개한다. 가족 활동 추천 앱을 실습하며 Claude Code의 20가지 핵심 팁을 익힐 것임을 설명한다.

[00:00] 클로드 코드를 마스터하기 위한 20가지 팁을 실제 앱 제작을 통해 배워보는 튜토리얼을 시작합니다. 가족친화적인 활동 찾기 앱을 만들면서 위치, 일정, 관심사에 맞춘 개인화된 지역 이벤트 추천 기능을 구현해보겠습니다.

[00:47] '패밀리 액티비티 데모'라는 새 프로젝트를 생성하고 클로드 코드를 설치 및 실행하는 과정을 안내합니다. 클로드 코드는 간단한 명령어로 설치할 수 있으며, 터미널에서 'claude'를 입력하면 바로 실행됩니다.

새 프로젝트 'family activity demo'를 생성하고 빈 폴더를 열어 Cloud Code를 설치 및 실행하는 과정을 안내한다.

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

Shift+Tab으로 plan 모드로 전환해 설계 우선 전략을 강조한다. AI에게 코드베이스를 설명하고 정적 DB, 외부 API, 메시지 API 세 가지 솔루션을 탐색하는 방법을 다룬다.

[01:18] 첫 번째 핵심 팁은 코딩 전에 반드시 계획 모드를 사용하는 것입니다. Shift+Tab으로 계획 모드로 전환하고, 클로드가 성급하게 코딩을 시작하려 할 때는 Escape로 취소해야 합니다. 계획에 투자하는 시간이 많을수록 성공 확률이 높아집니다.

[01:52] 두 번째 팁은 클로드와 함께 해결책을 탐색하는 것입니다. 계획 모드에서 코드베이스 설명을 요청하고, 가장 간단한 해결책부터 시작해서 여러 옵션을 함께 검토합니다. 코딩보다는 협업을 통한 계획 수립에 먼저 집중해야 합니다.

[02:11] 가족친화적인 활동 파인더 앱의 구체적인 요구사항을 정의합니다. 부모가 도시, 아이 연령, 가용 시간, 이동 거리, 선호사항을 입력하면 주말 활동 5개를 굵은 제목과 이모지, 2-4문장 설명과 함께 추천하는 기능을 구현하겠습니다.

[02:44] 클로드가 3가지 해결책을 제시했지만 또다시 코딩을 시작하려고 합니다. 성급한 코딩 시도를 거부하고 계속 계획 단계에 머무르며 제안된 해결책들을 검토합니다. 첫 번째 해결책은 클라이언트 사이드 필터링을 사용한 정적 데이터베이스로 활동을 하드코딩하는 방식입니다.

[03:08] Google Places, Eventbrite, Meetup 같은 서드파티 API를 사용하는 두 번째 솔루션을 설명하며, 지역 활동이 분산되어 있어 여러 API 연결 작업이 많다는 문제점을 지적합니다.

[03:26] Claude 메시지 API와 스마트 추천을 사용하는 세 번째 솔루션을 소개하며, Claude Code 데모에 가장 적합한 AI 기반 솔루션으로 웹 검색 도구를 활용해 최근 활동을 찾는 방식이라고 설명합니다.

[03:54] Claude Code 작업 시 핵심인 '스펙-할 일-코드' 프로세스를 강조하며, 솔루션 탐색 후 요구사항과 기술 스택이 포함된 스펙을 만들고, 각 단계에서 Claude의 계획을 검토하고 감사하는 방법을 설명합니다.

spec.md에 요구사항·기술 스택·디자인 가이드라인·마일스톤을 정의하고, ToDo 리스트를 작성해 AI가 계획대로 코딩하도록 유도하는 워크플로우를 설명한다.

[04:30] spec.md 생성을 위한 구체적인 프롬프트를 제시하며, 간단하게 유지하면서 첫 번째 마일스톤에서는 더미 데이터로 UI 설정, 두 번째 마일스톤에서는 Claude API와 웹 검색 도구 연결을 목표로 합니다.

[05:04] Claude의 웹 검색 도구 문서를 참조하며, 프롬프트와 이미지를 함께 Claude에 입력해서 참고점을 제공하고 spec.md 파일을 생성하는 과정을 보여줍니다.

[05:32] Claude가 생성한 '가족 활동 찾기' 스펙을 검토하며, Claude가 요청보다 많이 만들려는 경향이 있어 요구사항을 자세히 검토하고 간소화해야 한다고 강조하며, 5개의 개인화된 추천과 이모지 아이콘 추가 등의 세부사항을 확인합니다.

[06:05] 필수 입력 필드들을 정의하면서 모든 것을 텍스트 입력으로 단순화하기로 결정합니다. 날짜와 시간 선호도, 최대 거리 슬라이더, 그리고 추가 텍스트 입력을 포함한 UI 구조를 설계합니다.

[06:29] 출력 형식을 검토하며 사용자 도시로부터의 거리 계산이 어려울 수 있음을 인정하지만 일단 진행하기로 합니다. 프론트엔드, 백엔드, 개발 도구를 포함한 전체 시스템 아키텍처와 디자인 가이드라인을 확인합니다.

[06:48] 마일스톤 섹션의 중요성을 강조하며, 실제 구축이 시작되는 지점임을 설명합니다. 첫 번째 단계로 더미 데이터를 사용한 UI 생성, 그 다음 Claude API 통합을 계획합니다.

[07:12] 메시지 API와 웹 검색 구현을 위한 참고 프레임워크 문서를 복사하고, 마일스톤 3에 대한 자세한 사양을 검토합니다. Claude가 작성한 스펙이 수작업보다 훨씬 상세함을 인정합니다.

[07:37] Claude 메시지 API를 사용하기 위해 필요한 프롬프트가 빠져있음을 발견합니다. API 호출을 위한 입력값과 추천 결과를 받기 위해서는 적절한 프롬프트가 필요하다고 설명합니다.

[07:57] 마일스톤 2에서 API 호출에 사용할 프롬프트 MD 파일을 Claude에게 생성 요청합니다. Claude가 가족 활동 추천 전문가로서 정확히 5개의 추천을 특정 형식으로 반환하는 프롬프트를 생성했습니다.

[08:25] 생성된 프롬프트가 적절함을 확인하고, 일반적인 관광지 정보가 아닌 시기적절한 이벤트를 반환하도록 개선합니다. 마일스톤 1의 작업들로 할 일 목록을 만들기로 결정합니다.

[08:42] 스펙-할일-코드 프로세스의 중요성을 강조하며, 실제 코딩 전에 이 두 단계가 매우 중요함을 설명합니다. 아직 계획 모드에 있으며 문서 작성 단계임을 명확히 하고, 더 많은 계획이 Claude의 오류 없는 코드 생성 가능성을 높인다고 조언합니다.

[09:11] 기술적으로 숙련되지 않은 사람들에게는 코딩하기 전 계획 단계를 먼저 거치는 것이 매우 중요하다고 설명합니다.

[09:16] Claude가 생성한 할 일 목록을 검토하면서 첫 번째 마일스톤인 더미 데이터를 활용한 UI 제작, 의존성 설치, 클리어 버튼 기능 등이 포함된 것을 확인합니다.

output style을 'explanatory'로 설정해 코드 중 설명 박스를 추가하고, slash init으로 claw.md를 생성해 프로젝트 컨텍스트를 저장하며, 개인 프리퍼런스를 설정하는 방법을 다룬다.

[09:58] 네 번째 팁으로 '/output style explanatory' 명령을 사용해 Claude가 각 선택사항을 설명하는 내부 박스를 추가하도록 하여 빌드하면서 학습할 수 있도록 하는 방법을 소개합니다.

[10:54] 다섯 번째 팁으로 '/init' 명령을 사용해 Claude가 코드베이스를 스캔하고 프로젝트 컨텍스트가 포함된 claude.md 파일을 생성하는 방법을 설명합니다.

[11:41] 여섯 번째 팁으로 claude.md 파일에 개인적인 선호도를 추가하는 방법을 보여주며, 코딩 경험이 제한적인 PM으로서 기술 아키텍처와 변경사항에 대한 설명을 요청하는 예시를 제공합니다.

Whisper Flow 등의 음성 도구로 음성 명령을 사용해 컨텍스트를 빠르게 전달하고, milestone1 UI를 더미 데이터로 빌드해 localhost에서 즉시 결과를 확인하는 과정을 안내한다.

[12:12] 일곱 번째 팁으로 음성을 활용해 Claude에게 더 빠르게 컨텍스트를 제공하는 방법을 언급합니다.

[12:18] 화자가 Kieran 같은 훌륭한 엔지니어들을 인터뷰하며 발견한 점을 설명합니다. 많은 엔지니어들이 더 이상 직접 타이핑하지 않고 Whisper Flow, Monologue 같은 음성 도구를 사용해 Claude에 딕테이션한다고 합니다.

[12:30] 자연스럽게 말하면 Claude에게 더 자세한 지시사항을 전달할 수 있어 더 나은 결과물을 얻을 수 있다고 강조합니다. 8번째 팁으로 가능한 한 빨리 앱을 실행시키는 것의 중요성을 설명합니다.

[12:46] 첫 번째 마일스톤으로 더미 데이터를 사용한 UI 구축을 먼저 하는 이유를 설명합니다. 앱이 실제로 작동하는 것을 빨리 보고, 이후 Claude API 연결 같은 변경사항들을 실시간으로 확인할 수 있기 때문입니다.

[13:05] 투두 파일을 기반으로 몬스터 원을 구축하고 로컬호스트를 실행하는 프롬프트를 소개합니다. 복사-붙여넣기 대신 Whisper Flow를 사용해 Claude에게 음성으로 지시사항을 전달하는 실제 예시를 보여줍니다.

[13:34] 음성 딕테이션 결과가 완벽하지 않아 편집하는 과정을 보여주고, 이미지를 참고자료로 추가합니다. Claude가 마일스톤 1을 코딩하기 시작하며 UI 설정과 더미 데이터 사용에 대한 작업을 진행합니다.

[14:14] 9번째 팁을 소개합니다. Claude가 잘못된 방향으로 가거나 원하지 않는 작업을 할 때 이스케이프 키를 눌러 중단시킬 수 있다고 설명합니다. 이때 컨텍스트는 잃지 않는다는 장점도 함께 설명합니다.

Esc 키로 AI 실행을 중단하고 방향을 수정하는 방법과 'think ultra hard', 'why…' 프롬프트로 근본 원인 분석을 요청해 브라우저 콘솔 로그 등으로 버그를 진단·수정하는 전략을 소개한다.

[14:52] Claude가 투두 리스트 작업을 계속하면서 인사이트를 공유하고 있다고 설명합니다. 출력 스타일을 설명형으로 변경했기 때문에 앱을 구축하면서 동시에 학습할 수 있다고 강조하며, 코딩 초보자들에게 설명형 출력 스타일 사용을 권장합니다.

[15:12] Claude.MD 파일을 업데이트하여 더 상세한 설명을 요청하고, 코딩 완료 후 결과를 확인하기로 합니다. Claude가 작업을 완료했다고 알려주지만 로컬호스트 링크에서는 아무것도 표시되지 않는 문제가 발생합니다.

[15:24] 완벽하지 않은 Claude의 한계를 보여주며, 빈 화면이 나타나는 버그 상황을 설명합니다. 디버깅을 위해 브라우저 개발자 도구를 열어 콘솔 오류를 확인하기로 합니다.

[15:39] 디버깅을 위한 두 가지 핵심 팁을 제시합니다. 첫째는 'think ultra hard'나 '왜 이런 일이 일어났다고 생각하는가'라고 질문하여 Claude가 더 신중하게 분석하도록 하는 것이고, 둘째는 구체적인 피드백과 브라우저 콘솔 로그를 제공하는 것입니다.

[16:11] 콘솔에서 발견한 'uncaught error' 버그를 Claude에게 복사하여 붙여넣고, 빈 화면 문제와 함께 매우 신중히 생각해보라고 요청합니다. 많은 맥락과 토큰을 제공하여 버그 해결을 시도합니다.

[17:05] 디버깅 후 앱이 정상적으로 작동하는 것을 확인합니다. UI가 제대로 표시되고 도시, 나이, 거리, 선호도 등을 입력할 수 있으며, 검색 시 활동 목록이 로드됩니다. 현재는 더미 데이터를 사용하고 있어 마일스톤 1 단계임을 설명합니다.

[17:38] 마일스톤 1의 완료된 작업들을 to-do.md에서 체크하고, 마일스톤 2(Claude API와 웹 검색 도구 연결)를 위한 새로운 할 일들을 추가하도록 Claude에게 요청합니다. 더 많은 마일스톤을 구축하면서 할 일 목록을 최신 상태로 유지하는 것이 중요하다고 강조합니다.

GitHub 리포지토리를 생성하고 프로젝트를 연동하는 방법을 안내한다. AI가 마일스톤별로 커밋해 안정적인 버전 관리 환경을 구축하는 과정을 다룬다.

[18:12] 팁 10번인 버전 관리의 중요성에 대해 언급하기 시작합니다. 지금까지는 단순히 Claude에게 코딩을 요청하는 방식이었지만, 버전 관리를 추가하는 것이 매우 중요하다고 설명합니다.

[18:24] GitHub 연동의 중요성을 설명하며 각 마일스톤 완료 후 변경사항을 GitHub에 저장하는 것을 권장합니다. GitHub은 버전 관리 시스템으로 AI 작업 중 문제가 생겼을 때 이전 버전으로 되돌릴 수 있게 해줍니다.

[18:39] 실제로 GitHub에서 새 저장소를 생성하는 과정을 시연합니다. family-activity-demo라는 이름으로 저장소를 만들고, GitHub 초보자를 위해 계정 생성과 저장소 생성이 간단하다고 설명합니다.

[19:06] Claude 코드에서 GitHub 저장소 연결 과정을 보여줍니다. Git 작동 방식에 대한 통찰을 제공하고 저장소 연결 권한과 초기 커밋을 요청합니다. install-github-app 방법도 있지만 수동 방식을 사용하기로 결정합니다.

[19:34] GitHub에 코드 푸시가 완료되었음을 확인하고, 실제 저장소에서 스펙과 할 일 목록을 포함한 모든 코드가 성공적으로 업로드되었는지 검증합니다. 이제 Claude에게 버전 관리나 새 커밋 추가를 요청할 수 있게 되었습니다.

[19:57] 팁 11번으로 넘어가며 Claude가 지속적으로 권한을 요청하는 문제점을 지적합니다. 이 문제를 해결하기 위해 Claude가 더 자율적으로 작업할 수 있도록 권한 설정 방법을 소개합니다.

[20:18] Claude 설정 파일을 통해 읽기, 쓰기, 저장 명령어에 대한 자동 권한을 부여하는 방법을 설명합니다. dangerously skip permissions 옵션도 있지만 위험성을 경고하며, 파일 삭제 권한은 부여하지 않는 것이 중요하다고 강조합니다.

[20:59] 자동 권한 부여 파일 생성을 완료하고 결과를 확인합니다. 설정 파일이 읽기, 쓰기, git 명령어는 허용하면서도 위험한 제거 명령어들은 거부하도록 올바르게 구성되었음을 검증합니다.

[21:17] 권한 파일 완성 후 전략적 컨텍스트 정리 방법을 설명. clear와 compact 명령어를 사용해 대화 기록을 관리하는 것이 AI 성능 유지에 중요하다고 강조

claude 설정 파일로 권한을 자동 부여해 AI 실행을 자율화하고, 'compact' 명령으로 대화 이력을 요약해 컨텍스트 부하를 줄여 성능을 안정화하는 방법을 설명한다.

[22:06] 마일스톤 구축 시 명세서→할일→코드 순서의 중요성을 재강조하고, 완료된 항목 체크와 새로운 항목 추가를 위해 할일 목록 검토

[22:39] 할일 목록에서 웹 검색 도구 사용과 모델 매개변수 설정의 중요성을 확인. Claude 3.5 sonnet 대신 Claude 4 sonnet 사용 필요성과 prompt.md 활용을 언급

[23:24] 마일스톤 2 구축을 위한 준비 과정. Claude API 키의 필요성을 설명하고 콘솔에서 API 키 설정 방법을 보여줌

Cloud API 키를 설정해 웹 검색 툴과 백엔드를 연동하고, 실시간 이벤트를 로드하는 milestone2 기능을 완성한다. 앱 실행 테스트 후 최종 커밋 과정을 요약한다.

[24:04] API 키 보안의 중요성을 강조. 화면에 API 키를 노출한 것에 대해 경고하며 절대 타인과 공유해서는 안 된다고 주의사항 전달

[24:18] API 키 보안의 중요성을 설명하며, 절대 누구와도 공유하지 말고 비밀로 유지해야 한다고 강조합니다. Anthropic 콘솔에서 새 키를 생성하는 방법을 안내하고, AI 코딩 학습을 위해서는 5달러 정도의 계정 충전이 필요하다고 설명합니다.

[24:57] 클라우드가 백엔드 서버 생성과 API 연결 작업을 진행하는 동안, 코드를 지켜보며 학습하고 잘못된 방향으로 가는 것을 감지할 수 있다는 장점을 언급합니다. 구형 모델인 클라우드 3.5 소네트 대신 클라우드 4를 사용하도록 수정합니다.

[25:51] 마일스톤 2 작업이 완료되었지만, 결과가 너무 일반적이라는 문제점을 발견합니다. 익스플로러토리엄과 같은 일반적인 결과 대신 더 시기적절하고 관련성 있는 지역 이벤트를 원한다고 피드백을 제공합니다.

[26:36] 편집을 수락하지 않고 플랜 모드로 전환하여 문제 해결 방법을 묻습니다. 클라우드가 웹 서치 도구 활성화를 제안하지만, 실제로는 할 일 목록에 있었음에도 불구하고 구현하지 않았다는 점을 지적하며, 성급한 주니어 개발자처럼 행동한다고 비유합니다.

[27:14] 웹 검색 도구의 문서를 직접 붙여넣어서 기능을 추가하는 것이 좋다고 설명합니다. 그렇지 않으면 관련 없는 검색 결과만 나올 수 있기 때문입니다.

[27:45] Claude가 불필요하게 복잡한 위치 및 시간대 감지 기능을 추가하려 했지만, 사용자 입력 데이터를 직접 활용하는 더 간단한 방법을 제안했습니다.

[28:25] 앱 개발 과정에서 Claude API의 속도 제한 문제로 인해 10분간 시행착오를 겪었지만, 결국 브라우저 콘솔 로그를 활용하고 프롬프트를 간결하게 만들어 해결했습니다.

[29:08] 완성된 앱을 테스트해보니 로스앤젤레스와 샌프란시스코의 실시간 이벤트 정보를 성공적으로 가져오는 것을 확인했습니다. 골든 게이트 파크 이벤트나 문화 유산 주말 등 최신 정보를 제공합니다.

[30:01] 완전히 작동하는 앱 완성 후 GitHub 커밋의 중요성을 강조하며, 변경사항을 버전 관리 시스템에 저장하는 모범 사례를 설명합니다.

[30:28] 16번 팁으로 반복 작업을 위한 커스텀 슬래시 명령 생성을 소개하고, 17번 팁으로는 이름, 설명, 프롬프트를 가진 전문화된 서브 에이전트 구축 방법을 설명합니다.

[31:08] 18번 팁으로 특정 동작을 트리거하는 훅 설정을 다루며, Claude 작업 완료 후 Slack 알림 등의 자동화된 후속 작업을 실행할 수 있는 방법을 설명합니다.

[31:39] 19번 팁으로 전문 기능을 위한 MCP 서버 설치를 소개하며, Serena(코드 검색), Playwright(UI 테스트), Figma(프로토타입) 등의 유용한 서버들과 주의사항을 설명합니다.

[32:17] 마지막 20번 팁으로 더 빠른 개발을 위한 다중 Claude 세션 병렬 실행을 설명하고, git worktree를 활용한 고급 개발 기법을 소개합니다.

[32:46] GitHub 커밋이 완료되었음을 확인하고, 지금까지 다룬 모든 팁들을 정리하며 튜토리얼을 마무리하겠다고 언급합니다.

[33:00] Claude Code 마스터를 위한 20가지 팁을 정리하며, 플랜 모드 사용, 명세서-할일-코드 프로세스 준수, 출력 스타일과 Claude.md 활용을 통한 학습형 앱 구축 방법을 제시합니다.

[33:19] 핵심 코딩 워크플로우에서는 음성을 통한 빠른 맥락 전달, 실시간 앱 실행을 통한 변경사항 확인, 원치 않는 Claude의 작업 시 이스케이프를 통한 방향 수정이 중요합니다.

[33:37] GitHub을 통한 버전 관리와 권한 설정으로 작업 효율성을 높이고, 새 기능 구축 시 명세서-할일-코드 프로세스를 일관되게 따라 Claude의 실수를 최소화해야 합니다.

[33:50] 디버깅 시에는 Claude에게 깊이 있는 사고와 반성을 요청하고, 구체적 피드백, 이미지, 브라우저 콘솔 로그 등 풍부한 맥락 정보를 제공하여 효과적인 문제 해결을 도모합니다.

[34:02] 슬래시 명령어, 서브 에이전트, 훅 등의 고급 기능은 초보자에게 부담스러울 수 있지만, Claude와의 대화를 통해 함께 학습해 나가는 것이 가능합니다.

[34:16] 향후 MCP 설정과 병렬 Claude 실행에 관한 고급 튜토리얼을 계획 중이며, 이번 튜토리얼이 Claude Code 마스터를 위한 20가지 팁의 완전한 가이드가 되기를 희망합니다.

[00:00] 안녕하세요 여러분, 새로운

[00:02] 튜토리얼로 돌아왔습니다. 오늘은

[00:05] 실제 앱을 만들면서 클로드 코드를 마스터하는

[00:08] 20가지 팁을 공유하고자 합니다. 저는 부모로서

[00:11] 늘 주변에서 재미있고

[00:14] 가족친화적인 활동을 찾고 있습니다. 그래서 이번

[00:16] 튜토리얼에서는 이런

[00:18] 가족 활동 찾기 앱을 어떻게 만드는지

[00:21] 보여드리겠습니다. 이 앱은 다가오는 지역 이벤트를

[00:25] 여러분의 위치, 일정,

[00:27] 그리고 관심사에 맞춰 개인화해서 보여줍니다. 이걸 만들면서

[00:30] 20가지 팁을 모두 다뤄볼 거니까

[00:32] 여러분도 앱을 계획하고

[00:35] 코딩하고 디버깅하는 데 필요한 모든 클로드 코드의 핵심 기능을 알게 될 겁니다. 저는

[00:38] 클로드 코드와 한 달을 보낸 후에야

[00:42] 이 튜토리얼을 만들기로 결정했습니다.

[00:44] 즐거우셨으면 좋겠습니다.

[00:47] 자, 새로운 프로젝트로 시작해보겠습니다.

[00:51] 패밀리 액티비티 데모라고 부르겠습니다.

[00:52] 커서에서 빈 폴더를 열어놨습니다.

[00:55] 참고로, 클로드 코드는

[00:59] 이 줄을 붙여넣기만 하면 설치할 수 있습니다.

[01:01] 저는 이미 설치되어 있으니까

[01:04] 클라우드만 입력하면

[01:07] 클로드 코드가 열립니다.

[01:09] 좋습니다.

[01:12] 진행하겠습니다. 자, 클로드 코드가

[01:15] 열렸습니다. 첫 번째 팁은

[01:18] 코딩 전에 계획 모드를 사용하는 것입니다.

[01:21] 만약 하나의 팁만 기억한다면

[01:22] 이것을 기억하세요. 계획에 더 많은 시간을

[01:25] 투자할수록 클로드가

[01:27] 성공할 가능성이 높아집니다. 저는 항상 Shift+Tab을 눌러

[01:30] 계획 모드로 전환합니다. 만약

[01:32] 클로드가 어떤 이유로

[01:34] 코딩을 시작하려고 하면 Escape를

[01:37] 눌러 취소합니다. 클로드를

[01:39] 지나치게 열정적인 엔지니어라고 생각하세요.

[01:41] 항상 통제해야 합니다, 맞죠? 자, 여기서

[01:44] Shift+Tab을 누르면

[01:46] 계획 모드가 됩니다. 다음 팁으로

[01:48] 넘어가겠습니다. 클로드에게 해결책을 함께 탐색해달라고 요청하는 것입니다.

[01:52] 계획 모드에서 제가 가장 먼저 하는 일은

[01:54] 클로드에게 코드베이스를 설명해달라고 요청하는 것입니다.

[01:56] 그리고 제가 이 기능을 만들고 싶다고 말하고

[01:58] 가장 간단한 것부터 시작해서

[02:00] 해결책을 탐색해달라고 요청합니다.

[02:02] 전체 아이디어는

[02:04] 코딩하기 전에 클로드와 협업해서

[02:06] 먼저 계획을 세우는 것입니다. 여기 제가 준비한

[02:09] 프롬프트가 있는데, 클로드에게

[02:11] 가족친화적인 액티비티 파인더를 만들고 싶다고

[02:13] 말할 거입니다. 부모들이 자신의 도시,

[02:16] 아이들 연령, 언제 시간이 있는지,

[02:18] 얼마나 멀리 갈 수 있는지,

[02:20] 그리고 다른 선호사항을 입력할 수 있고

[02:23] 앱이 주변의 주말 활동을

[02:24] 검색해서 5개의

[02:26] 추천을 굵은 제목과 함께 반환합니다.

[02:29] 이모지와 2~4문장의 설명도

[02:33] 각각 추가해보겠습니다.

[02:35] 이것을 클로드 코드에 붙여넣어서

[02:38] 어떤 결과가 나오는지 보겠습니다.

[02:40] 아직 계획 모드에 있다는 걸 기억하세요.

[02:44] 클로드가 3가지

[02:45] 다른 해결책을 제시했습니다. 여기서 보시면

[02:47] 다시 코딩을 시작하자고 하고 있습니다.

[02:50] 다시 말하지만, '아니요, 계속

[02:52] 계획하고 싶습니다'를 눌러야 합니다. 정말 너무

[02:54] 성급하게 코딩하려고 합니다.

[02:56] 제시한 내용을 실제로

[02:57] 읽어보겠습니다. 위로 스크롤해보겠습니다.

[03:01] 해결책 1은 클라이언트 사이드 필터링을 사용한

[03:04] 정적 데이터베이스입니다.

[03:06] 액티비티를 하드코딩하는 방식이네요.

[03:08] 두 번째 솔루션은 Google Places, Eventbrite, Meetup 같은

[03:11] 서드파티 API를 사용하는 것입니다.

[03:13] 하지만 이 솔루션의 문제점은

[03:15] 지역 활동들이 매우 분산되어 있다는 것입니다.

[03:17] Eventbrite, Patch와 같은

[03:19] 여러 곳에서 정보가 나올 수 있거든요.

[03:21] 그러면 다양한 API들을

[03:23] 연결해야 하는데

[03:24] 이건 정말 많은 작업량이죠.

[03:26] 그리고 세 번째 솔루션은 Claude 메시지 API를

[03:29] 스마트 추천 기능과 함께 사용하는 것입니다.

[03:31] Claude Code 데모를 만들어보는 것이니까

[03:32] 이 방법이 가장 말이 되는 것 같습니다.

[03:35] 가장 AI 기반의 솔루션이죠.

[03:37] 실제로는 Claude API를 호출하고

[03:40] 웹 검색 도구를 사용해서

[03:42] 최근 활동들을 찾아보는 것입니다.

[03:45] 좋습니다.

[03:47] 이제 세 가지 다른 솔루션이 있고

[03:49] 다시 팁으로 돌아가 봅시다.

[03:53] Claude Code와 함께 작업할 때

[03:54] 매우 중요한 것은

[03:57] 스펙, 할 일, 코드 프로세스를 따라야 한다는 것입니다.

[03:58] Claude와 함께 솔루션을 탐색하고 선택한 후

[04:02] 요구사항, 기술 스택,

[04:03] 디자인 가이드라인과 최대 3개의

[04:05] 실행 마일스톤이 포함된

[04:07] 스펙을 만들어달라고 요청하는 것을 좋아합니다.

[04:09] 그 다음에는 더 나아가서

[04:12] 스펙을 검토하고

[04:15] 올바르고 간소화되었는지 확인한 후

[04:17] Claude에게 첫 번째 마일스톤을 위한

[04:20] 할 일 목록을 만들어달라고 요청합니다.

[04:23] 항상 각 단계에서

[04:25] Claude의 계획을 감사하고 검토하고 있습니다.

[04:28] 이제 Claude에게 스펙을 만들어달라고 요청해봅시다.

[04:30] 여기 프롬프트가 있습니다.

[04:33] 요구사항, 기술 스택, 디자인 가이드라인과

[04:36] 최대 3개 마일스톤이 포함된

[04:37] spec.md를 만들어주세요.

[04:39] 가능한 한 간단하게 유지해주세요.

[04:41] 첫 번째 마일스톤에서는 더미 데이터로 UI를 설정하고

[04:44] 두 번째 마일스톤에서는 Claude API를

[04:45] 웹 검색 도구와 연결해봅시다.

[04:48] 여기에 문서를 링크했습니다.

[04:50] 로드해보겠습니다. Claude에는 인터넷을 검색할 수 있는

[04:53] 웹 검색 도구가 있습니다.

[04:54] 이것에 대해 미리 조사를 해봤지만

[04:56] Claude에게 이런 것들을 구현하는 방법에 대해

[04:58] 물어볼 수도 있고

[05:00] 아마 이런 문서 소스 중

[05:02] 하나를 가리켜줄 겁니다.

[05:04] 그럼 이 프롬프트를

[05:05] Claude에 붙여넣어서

[05:08] 스펙을 만들어봅시다.

[05:12] 한 단계 더 나아가서

[05:15] 이 이미지도 Claude에 복사해봅시다.

[05:19] 참고점이 있도록 말이죠.

[05:20] Ctrl+V를 눌러서 이미지를

[05:23] Claude에 붙여넣으세요.

[05:24] 이제 Claude가

[05:27] spec.md 파일을 작성할 것이고

[05:30] 어떻게 나오는지 봅시다.

[05:32] Claude가 스펙을 만들어 준 것 같습니다.

[05:34] 한번 살펴봅시다.

[05:36] 여기 있습니다. 가족 활동 찾기 앱이네요.

[05:39] 이것의 핵심은

[05:41] 요구사항을 자세히 검토하고

[05:44] 간소화하기 위해 편집하는 것입니다.

[05:45] 왜냐하면 Claude는 당신이 요청한 것보다

[05:47] 더 많이 만들려고 하고

[05:49] 정확하고 실제로 원하는 것인지

[05:50] 확인해야 하거든요.

[05:51] 예를 들어 여기서는 앱이

[05:53] 매력적인 설명과 함께

[05:54] 5개의 개인화된 활동 추천을 반환한다고 하고

[05:57] 관련 이모지 아이콘을 추가해야 한다고 합니다.

[05:59] 그리고 여기는 입력 항목들이네요.

[06:05] 좋아요, 이 모든 필드들이 필수입니다. 그리고

[06:08] 간단하게 만들어봅시다.

[06:09] 모든 것을 텍스트 입력으로 만들어봅시다.

[06:14] 날짜와 시간 선호도를 위한 텍스트 입력이죠.

[06:17] 최대 거리는 슬라이더로

[06:19] 유지할 수 있습니다. 그리고 여기에

[06:22] 다시 텍스트 입력이 있습니다.

[06:24] 좋습니다.

[06:26] 그리고 여기 출력 형식이 있습니다.

[06:29] 네, 맞는 것 같아요.

[06:31] 사용자 도시로부터의 거리는 구현하기

[06:34] 어려울 수 있지만,

[06:36] 어떤 결과가 나올지 봅시다. 그리고 여기 우리의 프론트엔드, 백엔드,

[06:42] 그리고 개발 도구들이 있습니다. 좋아요,

[06:44] 맞는 것 같습니다. 디자인 가이드라인도

[06:46] 맞는 것 같고,

[06:48] 전반적으로 괜찮아 보입니다. 좋아요,

[06:49] 이제 여기 중요한 부분인

[06:50] 마일스톤이 있는데, 실제로

[06:52] 무언가를 구축하기 시작하는 곳입니다.

[06:56] 우리가 요청한 대로,

[06:57] 첫 번째 단계는 더미 데이터로 UI를 만드는 것이고,

[07:00] 대체로 정확해 보입니다.

[07:03] 그리고 그 다음에는

[07:04] Claude API 통합을 연결할 것이죠, 맞나요?

[07:08] 이제 돌아가서

[07:12] 이 문서를 다시 복사해봅시다.

[07:14] 참고용 프레임워크가 있어서

[07:18] 구현에 사용할 수 있습니다.

[07:22] 메시지 API와 웹 검색을 말이죠.

[07:26] 좋습니다. 그리고 여기 아래에

[07:27] 마일스톤 3에 대한 더 자세한 내용이 있습니다.

[07:31] 그리고 네,

[07:32] 꽤 좋은 스펙을 작성했습니다.

[07:33] 아마도 제가 손으로 작성했을 것보다

[07:36] 훨씬 더 자세한 스펙을 작성했을 겁니다.

[07:37] 하지만 여기서 빠진 것이 하나 있는데,

[07:39] 여러분은 뭐라고 생각하시나요?

[07:41] Claude 메시지 API를 사용하고 있기 때문에,

[07:44] 입력값들과 함께 API를 호출할

[07:47] 프롬프트가 필요하고

[07:49] 추천을 받아와야 합니다.

[07:51] 그래서 실제로 Claude에게 물어봅시다,

[07:54] 우리 튜토리얼로 돌아가서

[07:57] Claude에게 우리가

[07:59] 마일스톤 2에서 API를 호출할 때 사용할

[08:02] 프롬프트 MD 파일을 만들어달라고 요청합시다.

[08:04] 좋아요, 그러면 Claude에게

[08:05] 그것을 해달라고 요청해봅시다.

[08:07] 이제 프롬프트를 만들 것이고

[08:09] 어떤 결과가 나올지 봅시다.

[08:11] 좋습니다, 우리가 돌아왔고

[08:13] Claude가 프롬프트 파일을 만들었습니다.

[08:16] 그리고 여기 있습니다. 시스템 프롬프트는

[08:19] 가족 활동 추천 전문가입니다.

[08:21] 여기 나왔네요. 정확히 5개를

[08:23] 다음 형식으로 반환합니다.

[08:25] 네, 맞는 것 같습니다.

[08:26] 최신 정보인지 확인해보고

[08:28] 시기적절하다고 말합시다. 왜냐하면 우리는

[08:31] 일반적인 관광 명소 정보를 반환하고 싶지 않고,

[08:34] 시기적절한 이벤트를 반환하고 싶기 때문입니다.

[08:35] 좋아요, 이제 우리 것으로 다시 돌아갑시다.

[08:38] 그리고 이제 마일스톤 1의

[08:39] 작업들과 함께 할 일 목록을 만들어달라고

[08:42] 요청할 것입니다. 기억하세요,

[08:44] 우리는 여기서 스펙, 할 일,

[08:46] 그리고 코드 프로세스를 따르려고 합니다.

[08:49] 실제로 코드 작업에 들어가기 전에

[08:51] 이 두 단계는 매우 중요합니다.

[08:53] 좋습니다, 그러면 이것을 여기에

[08:56] 붙여넣겠습니다. 또한 스펙이

[08:58] 마일스톤 2의 프롬프트 사용에 대한

[09:00] 세부사항을 포함하는지 확인해봅시다.

[09:02] 좋아요, 우리는 여전히 계획 모드에 있습니다,

[09:05] 문서들을 작성하는 것 같은요.

[09:07] 아직 어떤 코드도 작성하지 않았습니다. 하지만

[09:09] 다시 말하지만, 더 많이 계획할수록

[09:11] 저와 같이 기술적으로 숙련되지 않은 사람들에게는

[09:13] 계획 단계를 먼저 거치는 것이 매우 중요합니다.

[09:16] 그럼 Claude가 실제로

[09:17] 할 일 목록을 완성하면 다시 와보겠습니다. 자, Claude가

[09:21] 할 일 목록을 생성했네요. 한번

[09:22] 살펴보겠습니다. 그리고 여기서 목표는

[09:26] 목록을 검토해서 실제로

[09:27] 타당한지 확인하는 것입니다. 첫 번째 마일스톤에서는

[09:29] 더미 데이터로 UI를 만들 예정입니다.

[09:30] 여기 모든 것이 맞는 것 같네요.

[09:33] 여러 의존성을 설치했군요. 네,

[09:35] 이것들 모두 좋아 보입니다. 네, 클리어 버튼 기능 추가,

[09:39] 결과 추가. 그리고

[09:43] 꽤 긴 목록이지만

[09:46] 전반적으로 좋아 보입니다. 이제

[09:49] Claude로 코딩하기 전에

[09:52] 몇 가지 팁을 더 살펴보겠습니다.

[09:55] 네 번째 팁은

[09:58] 빌드하면서 학습하기 위해 출력 스타일을 사용하는 것입니다.

[10:01] /output style을 입력할 수 있습니다

[10:03] explanatory를 사용하면 Claude가 각각의

[10:06] 선택을 설명하는 내부 박스를 추가해서

[10:09] 코딩을 배우고 기술 아키텍처를

[10:11] 더 잘 이해할 수 있도록 도와줍니다

[10:12] 빌드하면서 말이죠. 또한

[10:15] output style learning을 입력하면 Claude가

[10:19] 실제로 코드 조각을 작성하게 해서

[10:21] 학습하고 실습 경험을

[10:22] 쌓을 수 있습니다. 하지만 우리는

[10:24] 게을러서 그냥 output

[10:26] style explanatory를 입력할 겁니다

[10:28] 제가 직접 코딩하고 싶지 않거든요.

[10:30] 그럼 계속해서 켜보겠습니다.

[10:33] 이제 출력 스타일을

[10:35] explanatory로 설정했습니다. 이는

[10:36] Claude Code 팀이 빌드하면서

[10:40] 학습하고 싶은 사람들을 위해 만든

[10:41] 정말 좋은 옵션입니다. 그리고 이제 Claude가

[10:44] 우리가 요청할 때 내부 박스를

[10:46] 추가해줄 것입니다. 자, 하지만 더 나아가서

[10:49] 5번과 6번 팁도

[10:50] 다뤄보겠습니다. 5번 팁은

[10:54] 이 claude.md 파일을 사용해서 프로젝트 이해를

[10:58] 부트스트랩할 수 있다는 것입니다.

[11:00] Claude Code에서 /init을 입력하면

[11:03] Claude가 코드베이스를 스캔해서

[11:05] 프로젝트 컨텍스트, 패턴, 주요 파일이 포함된

[11:08] 상세한 claude.md 파일을 생성합니다. 그리고 이

[11:11] 파일은 앞으로 모든 대화에서

[11:14] Claude의 메모리가 됩니다. 좋습니다.

[11:17] 그럼 계속해서 Claude에게

[11:19] claude.md 파일을 생성해달라고 요청하겠습니다. 하지만 실제로는

[11:22] 빈 claude.md 파일을 만들어달라고 요청할 예정입니다

[11:24] 왜냐하면 아직 여기에

[11:25] 실제 코드가 없거든요. 그럼

[11:28] 빈 claude.md 파일을 만들어보겠습니다.

[11:30] 네, 그리고 빈 파일을 만들려는 이유는

[11:35] 다음 단계 때문입니다

[11:36] Claude에 제 개인적인 선호도를

[11:39] 추가하고 싶거든요.

[11:41] Claude가 어떻게 반응하길 원하는지

[11:44] 개인적인 선호도를

[11:46] 클라우드 파일에 추가할 수도 있습니다. 여기가

[11:49] Claude에 복사해서 붙여넣을

[11:50] 내용입니다. 저는 코딩 경험이 제한적인

[11:52] PM입니다. 코딩하거나

[11:54] 작업할 때, 기술 아키텍처와

[11:55] 변경사항에 대해 설명하고

[11:57] 그 이유를 설명하는 팁을 공유해 주세요.

[11:59] 자, 여기에 붙여넣겠습니다.

[12:02] 됐습니다. 이것으로

[12:04] 충분할 것 같네요. 좋습니다. 모든

[12:06] 준비 작업을 마쳤으니 이제 드디어

[12:09] 실제로 Claude Code로 넘어갈 수 있습니다. 그리고

[12:12] 여기가 7번 팁입니다. 음성을 사용해서

[12:15] Claude에게 더 빠르게 컨텍스트를 제공하세요.

[12:18] 저는 Kieran 같은 훌륭한 엔지니어들과

[12:21] 다른 분들을 많이 인터뷰해봤는데요.

[12:23] 많은 경우에 그들은 더 이상

[12:24] 타이핑을 하지 않습니다. 대신에

[12:27] Whisper Flow나 Monologue 같은 음성 도구를 사용해서

[12:30] Claude에 직접 딕테이션합니다. 그리고 자연스럽게 말하면

[12:32] Claude에게 더 자세한 지시사항을

[12:34] 전달할 수 있어서 더 나은 결과물을

[12:37] 만들 수 있습니다. 그러니까 확실히

[12:39] 음성을 활용해보세요. 그리고 이와 관련해서

[12:41] 8번째 팁을 알려드리겠는데요.

[12:43] 가능한 한 빨리 앱을 실행시키는 것입니다.

[12:46] 저는 첫 번째 마일스톤으로

[12:48] 더미 데이터로 UI만 먼저 구축하라고

[12:50] 구체적으로 요청했습니다. 왜냐하면

[12:52] 가능한 한 빨리 앱이 실제로 작동하는 것을

[12:55] 보고 싶기 때문이에요. 그래야

[12:56] Claude API에 연결하는 것 같은

[12:59] 후속 변경사항들을 만들 때 실제로 앱이

[13:03] 실시간으로 업데이트되는 것을 볼 수 있거든요.

[13:05] 여기 보시면 투두 파일을 기반으로 몬스터 원을

[13:07] 구축하고 로컬호스트를 실행하라는 프롬프트가 있습니다.

[13:09] 로컬호스트는 기본적으로 로컬 머신에서

[13:12] 앱을 실행시키는 것이므로 실시간으로

[13:14] 볼 수 있습니다. 이것을 복사해서 붙여넣는 대신

[13:17] Claude에게 음성으로 딕테이션하겠습니다.

[13:19] Whisper Flow가 설치되어 있으니까

[13:21] 컨트롤 키만 눌러서 Claude에게

[13:24] 딕테이션하면 됩니다. 투두 MD 파일을 기반으로

[13:27] 마일스톤 1을 구축하고 로컬호스트를 실행해라.

[13:31] 그리고 이 이미지를 참고자료로 사용해라.

[13:34] 좋습니다. 여기 음성이 있는데

[13:36] 완벽하지는 않네요. 편집해보겠습니다.

[13:39] 투두 파일을 사용해서 마일스톤 1을 구축하고

[13:43] 로컬호스트를 실행해라. 또한 이미지를

[13:45] 참고자료로 사용해라. 돌아가서

[13:48] 이미지를 여기에 붙여넣겠습니다.

[13:50] 이미지를 복사해서 여기에 붙여넣겠습니다.

[13:54] 이 이미지를 참고자료로 사용해라.

[13:57] 좋습니다. 이제 Claude가 드디어

[14:00] 마일스톤 1을 코딩할 것입니다.

[14:02] UI를 설정하고 더미 데이터만

[14:04] 사용해서 로컬 추천 기능을 만들어보겠습니다.

[14:06] Claude가 한 번에 이것을

[14:08] 해낼 수 있는지 봅시다. Claude가

[14:11] 여러 의존성을 설치하고 있네요.

[14:14] 코딩하는 동안 빠르게

[14:16] 9번째 팁을 설명하겠습니다. Claude가

[14:19] 잘못된 방향으로 가고 있다면 이스케이프 키를 눌러서

[14:22] Claude를 중단시키고 방향을 바꿀 수 있습니다.

[14:26] Claude가 여기서 코딩하는 동안 언제든지

[14:27] 여러 가지 설치를 요청하고 있는데

[14:30] 이스케이프 키만 누르면 Claude가 하고 있는

[14:32] 모든 작업을 중단시킬 수 있고

[14:34] 컨텍스트는 잃지 않습니다.

[14:35] 이는 Claude가 잘못된 방향으로

[14:38] 가거나 원하는 것보다 더 많은 일을

[14:40] 하는 것을 볼 때 매우 유용합니다.

[14:43] Claude가 잘못된 일을 하고 있다면

[14:45] 이스케이프 키를 누르는 것을 두려워하지 마세요.

[14:48] Claude가 실제로 마일스톤 1을

[14:50] 구축 완료할 때 돌아오겠습니다.

[14:52] 빠르게 돌아왔습니다. Claude가 아직

[14:54] 투두 리스트를 작업하고 있지만

[14:56] 이제 보시면 이러한 인사이트들을

[14:57] 공유하고 있습니다. 왜냐하면

[14:59] 출력 스타일을 설명형으로 바꿔서

[15:01] 앱을 구축하면서 학습할 수 있기 때문입니다.

[15:03] 여기 위쪽에 다른 인사이트들도 있구요.

[15:05] 만약 코딩이 처음이거나

[15:06] 더 기술적으로 되기 위해 학습하고 있다면

[15:08] 저는 확실히 설명형 출력 스타일을

[15:09] 사용하길 추천합니다. 그리고

[15:12] claw.MD를 업데이트해서 더 자세히 설명하도록 요청해 주세요. 좋습니다, 코딩이 완료되면 다시 돌아오겠습니다.

[15:14] Claude가 코딩을 완료했다고 하네요.

[15:17] 이제 로컬호스트 링크가 생겼습니다. 하지만

[15:20] 로컬호스트 링크를 로드해보니

[15:22] 아무것도 나타나지 않네요.

[15:24] 이런 버그들을 보여드리고 싶었습니다.

[15:25] 완벽하지 않기 때문이죠, 맞죠?

[15:29] 무엇이 문제일까요?

[15:31] 아무것도 로드되지 않고 있습니다.

[15:33] 팁으로 돌아가서

[15:34] 디버깅 섹션으로 건너뛰어보죠.

[15:36] 디버깅에 대한 두 가지 팁이 있습니다.

[15:39] 하나는 Claude에게 '매우 신중히 생각해라'라고 요청하거나

[15:41] '왜 이런 일이 일어났다고 생각하는가'라고 물어서

[15:43] 버그를 디버깅하도록 돕는 것입니다.

[15:46] '매우 신중히 생각해라'는 기본적으로

[15:48] Claude가 코딩하기 전에 더 오래 생각하게 합니다.

[15:51] 그리고 '왜 이런 일이 일어났다고 생각하는가'는

[15:54] 문제의 근본 원인을 더 찾으려고 노력하게 하죠.

[15:56] 물론, 정말 좋은 모범 사례는

[15:58] 매우 구체적인 피드백을 제공하는 것입니다.

[16:02] 이미지를 첨부하고

[16:03] 브라우저 콘솔 로그를 살펴보는 것이죠.

[16:06] Claude가 문제를 디버깅하는 데 도움이 됩니다.

[16:08] Claude가 가진 맥락이 많을수록

[16:11] 무엇이 잘못되었는지 알아낼 가능성이 높아집니다.

[16:13] 여기서는 이미지가 없습니다.

[16:15] 그냥 빈 화면이죠, 맞죠?

[16:17] 하지만 여기서 검사해보고

[16:19] 어떤 종류의 콘솔 버그가 있는지 확인해봅시다.

[16:22] 그리고 보세요, 있네요.

[16:24] 캐치되지 않은 오류가 있고

[16:27] 여기서 무언가 일어나고 있습니다.

[16:30] 이 버그를 복사해서

[16:31] Claude에 붙여넣어봅시다.

[16:33] 그리고 '빈 화면만 보입니다'라고 말해봅시다.

[16:37] '왜 이런 일이 일어났는지 매우 신중히 생각해보세요.'

[16:41] 그리고 '콘솔에서 본 버그입니다.'

[16:46] 이 버그를 붙여넣어봅시다.

[16:50] 좋습니다. 많은 맥락을 제공했네요.

[16:53] 많은 토큰을 사용하도록 요청했고

[16:56] 매우 신중히 생각하도록 했습니다.

[16:57] 이제 버그를 수정할 수 있기를 바랍니다.

[16:59] 나중에 돌아와서 수정되었는지 확인해보겠습니다.

[17:02] 좋습니다, 다시 돌아왔습니다. 앱을 살펴보죠.

[17:05] 잠깐만요.

[17:07] 여기 보세요. UI가 작동하는 것 같네요.

[17:09] 조금 확대해보면

[17:12] 도시, 키트, 나이, 가용성을 입력할 수 있고

[17:14] 거리와 선호도도 입력할 수 있습니다.

[17:18] 그리고 검색하면 많은 활동들이 로드됩니다.

[17:20] 이 활동들은 다시 더미 데이터입니다.

[17:24] 실제 API를 사용하지 않고 있어요.

[17:26] 우리는 아직 마일스톤 1에 있기 때문입니다.

[17:28] 보기 좋네요. 많은 이모지들이 있고

[17:30] 전반적으로 잘 작동하는 것 같습니다.

[17:33] Claude 코드로 돌아가봅시다.

[17:36] 그리고 Claude에게

[17:38] 마일스톤 1에서 완료된 것들을 to-do.md에서 체크하도록 요청해봅시다.

[17:44] 그리고 마일스톤 2를 위한 할 일들도 추가하세요.

[17:49] 기억하시겠지만 마일스톤 2는

[17:54] Claude API와 웹 검색 도구를 연결하는 것입니다.

[17:57] 더 많은 마일스톤을 구축하면서

[17:59] 할 일 목록을 최신 상태로 유지하고 싶습니다.

[18:02] 그것을 하는 동안

[18:03] 다른 것에 대해 이야기해봅시다.

[18:05] 팁으로 돌아가봅시다.

[18:07] 여기로 다시 돌아와서

[18:12] 팁 10번에 대해 이야기해봅시다.

[18:15] 지금까지는 그냥 Claude에게 코딩하라고 요청했죠?

[18:18] 하지만 버전 관리를 추가하는 것이

[18:20] 정말 중요하다고 생각합니다.

[18:21]

[18:24] GitHub 연동과 함께요. 저는 각 마일스톤 후에

[18:26] 변경사항을 GitHub에 저장하는 것을 좋아합니다.

[18:29] GitHub은 기본적으로 버전

[18:31] 관리를 제공하므로, 만약

[18:32] 코드베이스의 이전 버전으로

[18:34] 돌아갈 수 있습니다. 문제가 생겼을 때 말이죠.

[18:36] AI와 작업할 때는 불가피하게 발생하는 일이죠, 그렇죠? 그리고

[18:39] GitHub로 가보겠습니다. 여기서

[18:43] 새 저장소를 만들어보겠습니다.

[18:45] 같은 이름으로 지어보죠, family activity

[18:48] demo. GitHub이 처음이시라면

[18:51] 그리 복잡하지 않습니다. 그냥 새

[18:53] 계정을 여기서 만드시면 됩니다. 그리고

[18:55] 새 저장소를 만드는 버튼이 있고

[18:58] 그냥 생성을 누르면 됩니다. 저장소를

[19:01] 만든 후에는 여기에 저장소

[19:03] 링크가 있습니다. 그래서 Claude

[19:06] 코드로 들어가서 이 프로젝트를

[19:08] 제가 만든 이 저장소에 연결할 수 있고

[19:11] git의 작동 방식에 대한

[19:12] 통찰을 제공하고 있고

[19:14] 저장소 연결을 위한 권한을 요청하고

[19:16] 초기 커밋을 하려고 합니다. 즉

[19:18] 코드를 저장소에 커밋하려고 합니다.

[19:21] 다른 방법도 있는데

[19:23] install-github-app을 입력하고

[19:26] 몇 단계를 거치는 것입니다. 하지만

[19:28] 이미 저장소를 만들었으니까

[19:30] 위에서 했던 수동 방식을

[19:32] 사용하겠습니다. 이제 GitHub에

[19:34] 코드를 푸시했다고 나오네요. 그리고

[19:37] 우리 프로젝트를 살펴보겠습니다. 새로고침.

[19:40] 여기 보시면 코드가 많이 있네요

[19:42] 여기에는 사양서와 할 일 목록도 포함되어 있고

[19:44] 이 폴더에는 많은 코드가 있습니다.

[19:47] 이제 우리 코드가 GitHub에 있습니다. 그리고

[19:50] Claude에게 이전 버전으로

[19:52] 되돌리거나, 새로운

[19:54] 커밋을 추가하도록 요청할 수 있습니다.

[19:57] 좋습니다. 이제 다음에 뭘 할까요?

[20:00] 여기 우리 목록으로 돌아가서

[20:03] 팁 11번에 대해 이야기해보겠습니다.

[20:06] Claude가 계속해서

[20:08] 뭔가 하려고 권한을 요청하고 저는

[20:10] 권한을 설정해야 하는데 이게

[20:12] 꽤 귀찮을 수 있죠, 그렇죠? 그래서

[20:13] 할 수 있는 건 권한을 설정해서

[20:15] Claude가 더 자율적으로 작업하도록 하는 것입니다.

[20:18] 방법은 Claude 설정 파일을 만드는 것인데

[20:21] 여기서 읽기, 쓰기, 그리고 특정

[20:24] 저장 명령어 실행에 대한 자동 권한을

[20:27] 부여할 수 있습니다. 매번

[20:29] 권한을 요청하지 않고 말이죠.

[20:31] 또한 dangerously skip을 입력해서

[20:34] permissions, 즉 모든 권한을

[20:36] 건너뛸 수도 있지만, 정말로

[20:38] 무엇을 하는지 알지 못한다면

[20:39] 권하지 않습니다. 자, 이제

[20:41] 이 프롬프트를 Claude에

[20:43] 복사해서 자동으로 권한을 부여할

[20:46] 파일을 만들어보겠습니다. 매우

[20:48] 중요한 건, 아마도 Claude에게

[20:50] 파일을 제거하거나 삭제할 권한을

[20:52] 자동으로 부여하고 싶지 않을 것입니다

[20:54] 그게 더 위험하니까요. 그래서

[20:56] 여기에 그걸 명시해뒀는데

[20:59] 붙여넣어보겠습니다. 좋습니다, Claude가

[21:02] 설정 파일 생성을 완료했습니다.

[21:05] 살펴보겠습니다. 이 모든 다양한

[21:06] 권한들을 허용하고 있네요. 읽기, 쓰기

[21:08] 등등, 많은 git 명령어들과

[21:11] 요청한 대로 모든 종류의

[21:13] 제거 명령어들을 거부하려고 합니다.

[21:17] 됐네요. 이제 권한 파일이 완성되었습니다.

[21:18] 이제 팁 목록으로 다시 돌아가보겠습니다.

[21:20] 마일스톤 2를 구축하기 전에,

[21:23] 이 팁에 대해 먼저 이야기해보겠습니다.

[21:25] clear와 compact로 전략적으로 컨텍스트를 정리하는 방법입니다.

[21:28] Claude와 채팅 창에서 계속 대화를 주고받다 보면,

[21:31] Claude의 컨텍스트 창이

[21:32] 이미 꽤 가득 차 있을 것입니다.

[21:34] 그리고 AI는

[21:35] 대화 기록이 길어질수록 점점 성능이 떨어집니다.

[21:38] 그래서 여기에

[21:40] compact를 입력해보겠습니다.

[21:42] 대화 기록을 정리하되 요약은 컨텍스트에 유지하는 기능입니다.

[21:45] 맞죠? 실행해보겠습니다.

[21:47] 그리고 clear 명령으로

[21:50] 대화 기록을 완전히 지울 수도 있습니다.

[21:52] 하지만 저는 compact를 더 선호합니다.

[21:55] 요약을 만들어주거든요.

[21:57] 대화가 압축되는 동안

[21:59] 이 팁을 살펴보겠습니다.

[22:02] 이 튜토리얼에서 기억해야 할 한 가지가 있다면

[22:04] 각 마일스톤에서 명세서 → 할일 → 코드 순서로 진행하는 것입니다.

[22:06] 그래서 Claude API를 연결해서

[22:08] 마일스톤 2를 구축하기 전에

[22:11] 할일 목록을 업데이트해야 합니다.

[22:13] 완료된 마일스톤 1 항목들을 체크하고

[22:15] 마일스톤 2 항목들을 추가해야 합니다.

[22:17] 전에 Claude에게 이걸 요청했던 걸 기억하네요.

[22:20] 할일 목록을 확인해보겠습니다.

[22:22] 그리고 이 앞서 Claude가 작업했었죠.

[22:25] 할일 목록을 살펴보겠습니다.

[22:26] 보시면 완료된

[22:28] 마일스톤 1 항목들에 체크표시가 되어 있습니다.

[22:30] 그리고 마일스톤 2 항목들이 추가되었네요.

[22:31] 빠르게 확인해보겠습니다.

[22:36] 네, 모든 게 잘 되어 있네요.

[22:39] 요청 본문 설정. 웹 검색 도구 사용을 요청하는 게 매우 중요하고,

[22:41] 적절한 모델 매개변수 설정도 중요합니다.

[22:44] 어떤 이유에서인지

[22:46] claude 3.5 sonnet을 사용하려고 하는데,

[22:48] 이건 구 모델이거든요.

[22:50] 왜 그런지 모르겠네요.

[22:52] 실제로는 claude 4 sonnet을 사용해야 합니다.

[22:54] 그래서 이런 세부사항들을 검토하는 게 중요한 거죠.

[22:58] 실제로 이런 실수들을 잡아낼 수 있거든요.

[23:00] 그리고 프롬프트 엔지니어링도요.

[23:02] 우리는 이미 prompt.md에

[23:05] 프롬프트 템플릿이 있으니까

[23:07] prompt.md를 사용하라고 요청해야겠죠.

[23:09] 그리고 여기 아래로 내려가면

[23:12] 데이터 흐름 테스트, 성능, 다른 것들은 꽤 괜찮아 보입니다.

[23:17] 이제 모든 게 압축되었으니

[23:19] 새로운 대화가 시작되었네요.

[23:20] 마일스톤 2 구축을 요청해보겠습니다.

[23:23] 음성으로 말하겠습니다.

[23:24] 이제 todo.md 파일을 꼼꼼히 따라서

[23:27] 마일스톤 2를 구축해주세요.

[23:30] 시작하기 전에 한 가지 더 말씀드리겠습니다.

[23:34] 마일스톤 2에서는 Claude API 키가 필요합니다.

[23:37] Claude API를 호출해야 하거든요.

[23:39] Claude 콘솔로 가보겠습니다.

[23:42] 여기서 몇 개의 API 키를 설정해두었고

[23:44] 저장해둔 API 키가 있어서 붙여넣을 수 있습니다.

[23:46] 이 Claude API 키를 사용하겠습니다.

[23:49] 이제 구축을 요청해보겠습니다. 하지만

[23:51] API 키에 대해 잠깐 설명드리자면,

[23:55] 제가 방금 화면에 제 API 키를 잠깐 노출했는데

[23:58] 절대 이렇게 하시면 안 됩니다.

[24:01] API 키는 누구와도 공유해서는 안 됩니다.

[24:04] 그래서 제가 아마

[24:07] 나중에 여러분들이

[24:09] 제 Claude 계정에 요금을 청구할까봐

[24:11] 이 API 키를 삭제할 것 같지만,

[24:13] Claude 콘솔에 가서

[24:16] 새로운 API 키를 만들면 됩니다.

[24:18] 나중에 이 API 키를 삭제할 건데, 혹시 여러분이

[24:20] 제 클라우드 계정에 요금을 부과할까 봐서요. 하지만

[24:22] 여러분은 클라우드 콘솔로 가시면 됩니다.

[24:25] Anthropic 콘솔에서 새로운 키를 만들고

[24:28] 이름을 지어주세요. 테스트 키라고 하고

[24:29] 추가하면 여기에 새로운 키가 생성됩니다.

[24:33] 그걸 클라우드에 복사하면 작동할 거예요.

[24:35] 하지만 여기서 중요한 점은 API 키를

[24:40] 절대 누구와도 공유하면 안 된다는 것입니다.

[24:42] 심지어 배우자와도요.

[24:43] 비밀로 유지하세요. 그렇지 않으면

[24:45] 다른 사람들이 여러분의 계정에 요금을 부과할 수 있거든요.

[24:48] 그리고 물론 이 API 키를 실제로 사용하려면

[24:50] 클라우드 계정에 5달러 정도

[24:52] 충전해야 할 겁니다.

[24:54] AI로 코딩을 배우고 싶다면 5달러는 충분히 가치가 있어요.

[24:57] 자, 이제 클라우드가 할 일 목록을 처리하고 있고

[25:00] 백엔드 서버를 생성하고

[25:02] API를 연결할 예정입니다.

[25:03] 시간이 좀 걸릴 테니까

[25:05] 건너뛰고 결과를 보겠습니다.

[25:07] 잠깐 돌아와 보겠습니다.

[25:09] 지금까지 진행 상황을 보니까

[25:12] 여전히 클라우드 3.5 소네트를 사용하려고 하네요.

[25:13] 하지만 이건 더 이상 사용되지 않습니다.

[25:15] 그래서 클라우드 4를 사용하라고

[25:19] 모델로 지정해 보겠습니다.

[25:23] 네, 그리고 이런 작업을 하는 동안

[25:26] 커피를 마시러 가고 싶을 수도 있지만

[25:29] 코드를 지켜보는 것에도

[25:30] 장점이 있습니다.

[25:32] 학습할 수 있거든요.

[25:34] 여전히 저와 인사이트를 공유하고 있고

[25:38] 또한 언제 잘못된 방향으로 가는지도

[25:41] 알 수 있습니다. 구형 모델을 사용하는 것처럼요.

[25:43] 이제 모델을 클라우드 4로 업데이트할 거고

[25:45] 더 잘 작동하길 바랍니다.

[25:47] 완료되면 다시 돌아오겠습니다.

[25:49] 네, 모든 작업을 완료했다고 하네요.

[25:51] 마일스톤 2의 모든 항목을 체크했고

[25:54] 여기서 테스트해보니

[25:55] 결과가 로딩되고 있습니다. 하지만 문제는

[25:59] 결과가 너무 일반적이라는 거예요.

[26:02] 익스플로러토리엄이나

[26:03] 캘리포니아 과학 아카데미에 대해 이야기하고 있는데

[26:05] 이런 건 그냥 아주 일반적인 결과들입니다.

[26:07] 그래서 피드백을 주겠습니다.

[26:09] 익스플로러토리엄 같은

[26:11] 일반적인 결과를 보여주고 있어요.

[26:14] 제가 원하는 건 더 시기적절하고

[26:16] 관련성 있는 가족 친화적인

[26:22] 지역 이벤트예요. 예를 들어

[26:24] 익스플로러토리엄 애프터 다크나

[26:28] 린디 인 더 파크 같은 댄스 이벤트 말이죠.

[26:32] 이걸 어떻게 고치시겠어요?

[26:36] 편집을 수락하지 말고 플랜 모드로 가서

[26:39] 어떻게 고칠 계획인지 물어보겠습니다.

[26:41] 아마 프롬프트를 업데이트할 가능성이 높은데

[26:43] 뭘 생각해내는지 보겠습니다.

[26:45] 무엇을 생각해내는지 보겠습니다.

[26:47] 네, 클라우드의 웹 서치 도구를 활성화하라는

[26:50] 해결책을 제안하고 있네요.

[26:52] 그런데 실제로는 웹 서치 도구를

[26:55] 활성화하지 않았네요.

[26:57] 할 일 목록에 있었는데도 말이죠.

[26:59] 확실히 있었을 거예요.

[27:00] 그리고 체크까지 했거든요. 그래서 다시 말하지만

[27:03] 여기서 조심해야 해요.

[27:05] 뭔가를 했다고 주장하는 성급한 주니어 개발자 같은데

[27:07] 실제로는 하지 않았거든요.

[27:08] 웹 서치 도구 사용법을 검색하려고 하는데

[27:11] 우리는 이미 문서를 제공했잖아요.

[27:14] 웹 검색 도구를 사용하는 방법에 대한

[27:15] 문서가 있죠? 그럼 실제로

[27:16] 이 문서를 붙여넣어 봅시다. 웹 검색 도구

[27:19] 기능을 추가해 보겠습니다.

[27:22] 이 문서를 매우 자세히 따라해야 합니다.

[27:25] 자세히 말이죠.

[27:27] 바로 그겁니다. 그렇지 않으면

[27:28] Google 검색을 많이 하게 되고

[27:30] 관련 있는 기사를 찾을 수도 있고

[27:31] 아닐 수도 있지만, 우리가 이미

[27:33] 조사를 해놨잖아요. 이제 실제로

[27:35] 웹 검색 기능을 추가할 수 있기를

[27:36] 바라고

[27:39] 그러면 더 실시간으로

[27:40] 현재 이벤트를 얻을 수 있고

[27:42] 작업을 잘 해내는지 살펴보겠습니다.

[27:45] 잠깐 돌아와서 보니 위치와

[27:48] 시간대 지역 감지 도우미들을

[27:51] 많이 추가하기 시작했더군요.

[27:53] 하지만 우리 앱에서는 사용자가

[27:56] 이미 이 정보를 제공하고 있잖아요.

[27:58] 다시 작업을 중단시키고

[28:01] 잠깐, 사용자의 입력 데이터와

[28:02] 위치를 그대로 사용해서 프롬프트에

[28:05] 포함시키면 안 될까요? 라고 했더니

[28:07] 당연히 맞다고 하더군요.

[28:09] 그리고 때로는 가장 간단한

[28:10] 해결책이 최고라고 했습니다.

[28:12] 그래서 다시 말하지만 때로는

[28:14] Claude가 무엇을 하고 있는지

[28:16] 모니터링하고 최대한 간단히

[28:18] 하도록 수정해야 합니다.

[28:20] 그렇지 않으면 지나치게

[28:22] 복잡하게 만드는 것들을

[28:24] 많이 구축하게 됩니다.

[28:25] 좋습니다. 다시 돌아와서

[28:28] 이번에 실제로 좋은 결과가

[28:30] 나오는지 보겠습니다.

[28:32] 여러분, 우리가 돌아왔습니다.

[28:34] 솔직히 말씀드리면, 이 앱이

[28:37] 작동하도록 하는 데 10분 동안

[28:39] 계속 시도했습니다. Claude API에

[28:41] 많은 속도 제한 문제가 있었거든요.

[28:43] 그리고 마침내 작동했을 때

[28:44] 제가 얼마나 흥분했는지 여기서

[28:47] 볼 수 있습니다. 하지만 기본적으로

[28:48] 우리가 다룬 팁들과 동일한

[28:51] 과정을 거쳤습니다. 무엇이

[28:54] 잘못되었는지에 대한 많은

[28:56] 맥락을 제공했고, 브라우저

[28:58] 콘솔 로그와 다른 것들을

[29:00] 업로드했고, 프롬프트를 더 간결하게

[29:03] 만들었고, 결국 작동시킬 수

[29:06] 있었습니다. 좋습니다.

[29:08] 더 이상 지체하지 말고

[29:11] 우리 앱을 여기서 로드해봅시다.

[29:15] 여기서 볼 수 있듯이 로스앤젤레스를

[29:16] 입력했고, 일부 정보를 입력했더니

[29:19] 실제로 로스앤젤레스의 관련 있는

[29:22] 최근 이벤트들을 가져오고 있습니다.

[29:24] 샌프란시스코로 한 번 더

[29:27] 시도해 보겠습니다.

[29:29] 작동하는지 보기 위해서요.

[29:32] Claude API를 호출하고 웹 검색을

[29:35] 하게 하는 데 시간이 좀 걸리거든요.

[29:37] 그래서 몇 초 기다려야 합니다.

[29:40] 여기서 볼 수 있듯이 이벤트들이

[29:42] 로드되었고 이것들은 관련 있는

[29:43] 이벤트들입니다. 골든 게이트 파크가

[29:46] 있고, 고래 꼬리 이벤트가

[29:49] 열리고 있습니다. 문화 유산

[29:52] 주말이 열리고 있고, 이것들은

[29:54] 단순히 관광지를 나열하는

[29:56] 것보다 훨씬 더 최신이고

[29:58] 관련성 있는 이벤트들이죠?

[30:01] 완전히 작동하는 앱이 완성되었으니

[30:04] 이제 모범 사례에 따라

[30:07] 이 변경사항들을

[30:09] GitHub에 커밋해야 합니다. GitHub에 커밋하면

[30:13] GitHub 버전도

[30:15] 최신 백엔드와 API 변경사항을 반영하게 됩니다.

[30:19] 이 과정이 진행되는 동안

[30:21] 시간을 활용해 몇 가지 팁을 더 살펴보겠습니다.

[30:25] 이 팁들은 라이브 데모를 하지 않고

[30:27] 빠르게 설명드리겠습니다.

[30:28] 16번 팁은

[30:31] 반복되는 작업 흐름을 위한 커스텀 슬래시 명령을 만드는 것입니다.

[30:33] 제가 가장 좋아하는 팁 중 하나고

[30:35] 위에 있는 전용 튜토리얼을

[30:38] 확인해보실 수 있습니다.

[30:40] 다음은 17번 팁입니다.

[30:44] Claude에게 이름, 설명, 그리고

[30:47] 자체 프롬프트를 가진

[30:49] 전문화된 서브 에이전트를 만들도록 요청할 수 있습니다.

[30:52] 각 서브 에이전트는

[30:54] 자체 컨텍스트 윈도우를 가지고 있어서

[30:56] 메인 대화를 오염시키지 않습니다.

[30:58] 예를 들어, Anthropic 엔지니어들은

[31:00] 문서 업데이트, 보안 감사, 그리고

[31:03] 인시던트 대응을 위해 서브 에이전트를 사용합니다.

[31:06] 메인 에이전트가 언제 호출할지 결정합니다.

[31:08] 계속해보겠습니다. 18번 팁은

[31:12] 특정 동작을 트리거하는

[31:14] 훅을 설정하는 것입니다. 훅을 사용하면

[31:17] Claude가 특정 작업을 완료한 후

[31:20] 실행되는 스크립트를 만들 수 있습니다.

[31:22] 예를 들어, Claude가 작업을 완료하면

[31:25] 훅을 사용해 Slack 알림을 트리거하도록 할 수 있습니다.

[31:28] 서브 에이전트와 훅의 경우도

[31:29] Claude에게 요청하기만 하면 됩니다.

[31:31] Slack 알림 설정을 위한

[31:32] 훅을 만들고 싶다고 하면 되고

[31:35] 이것도 향후 튜토리얼 주제가 될 수 있겠네요.

[31:37] 마지막 두 가지 팁입니다.

[31:39] 전문적인 기능을 위해

[31:42] MCP 서버를 설치할 수 있습니다.

[31:44] 유용한 서버로는 코드 검색을 위한 Serena,

[31:47] Claude가 자체 UI를 스크린샷하고 테스트할 수 있게 해주는 Playwright, 그리고

[31:50] 프로토타입 제작을 위한 Figma가 있습니다.

[31:52] MCP를 실행하려면

[31:55] 'claude mcp add' 다음에 서버 이름을 입력하면 됩니다.

[31:58] Anthropic의 공식 문서에서

[32:00] MCP에 대한 자세한 내용을 확인할 수 있습니다.

[32:03] MCP의 주의사항은

[32:06] 프롬프트에 많은 컨텍스트를 로드하는 경향이 있다는 것입니다.

[32:10] 따라서 일반적으로

[32:12] 동시에 너무 많은 MCP 서버를

[32:15] 실행하지 않는 것이 좋습니다.

[32:17] 마지막으로, 더 빠른 개발을 위해

[32:20] 여러 Claude 세션을

[32:22] 병렬로 실행할 수도 있습니다.

[32:25] 우리 마일스톤에서 먼저

[32:27] 프론트엔드와 UI를 구축하고

[32:28] 그 다음에 백엔드를 구축했죠.

[32:30] 하지만 엔지니어로서 무엇을 하는지 알고 있다면

[32:33] git worktree를 사용해서

[32:34] 서로 다른 Claude 대화로

[32:36] 이 두 작업을 동시에

[32:38] 진행할 수 있습니다.

[32:40] 저는 아직 그 정도로 고급 사용자는 아니지만

[32:42] Kieran과의 인터뷰에서

[32:44] 라이브 데모를 확인해볼 수 있습니다.

[32:46] 이제 다시 돌아가서

[32:48] Claude가 우리 변경사항을

[32:50] GitHub에 커밋한 것을 확인했습니다.

[32:52] 여기서 모든 작업이 완료되었고

[32:54] 우리가 다룬 팁 목록을 간단히 정리하며

[32:57] 이 튜토리얼을 마무리하겠습니다.

[33:00] 팁들을 정리해보겠습니다. 네, 여기 목록이 있습니다.

[33:04] 첫 번째로, 계획 및 프로젝트

[33:06] 설정에서는 플랜 모드를 사용하세요.

[33:08] 명세서, 할 일, 코드

[33:11] 과정을 따라야 하죠. 그리고

[33:13] 출력 스타일과 Claude.md를 사용해서

[33:16] 앱을 만들면서 학습하세요.

[33:18] 그리고 실제로

[33:19] 핵심 코딩 워크플로우에 들어가면,

[33:21] 음성을 사용해서 Claude에게 빠르게 맥락을 전달하세요.

[33:24] 앱을 최대한 빨리 실행시켜서

[33:25] 변경사항을 실시간으로 볼 수 있도록 하고,

[33:26] Claude가 원하지 않는 작업을 시작하면,

[33:28] 이런 일이 이번 튜토리얼에서

[33:30] 여러 번 일어났는데요,

[33:31] 그냥 이스케이프를 누르고

[33:34] Claude에게 더 나은 지시를 주세요. 그리고

[33:37] GitHub을 사용해서 버전 관리를 추가하고,

[33:38] 더 빠르게 작업할 수 있도록 권한을 설정하세요.

[33:41] 그리고 새로운 기능을 구축할 때는

[33:43] 항상 명세서, 할 일, 코드 과정을

[33:45] 따르세요. 그래야

[33:47] Claude가 실수를 덜 하게 됩니다.

[33:50] 디버깅을 위해서는 Claude에게 매우 집중적으로 생각하고

[33:53] 왜 그런 일이 일어났는지 반성하도록 요청하고,

[33:54] 구체적인 피드백, 이미지,

[33:57] 브라우저 콘솔 로그를 포함한

[33:59] 많은 맥락을 제공해서 Claude가 문제를 디버깅하도록 도우세요.

[34:02] 마지막으로, 슬래시 명령어,

[34:04] 서브 에이전트, 훅과 같은

[34:06] 고급 기능들을 사용할 수 있습니다.

[34:08] 초보자에게는 부담스러울 수 있지만,

[34:10] 그냥 여기 대화에서

[34:12] Claude에게 물어보면 됩니다.

[34:14] 함께 알아갈 수 있도록 도와줄 것입니다.

[34:16] 좋습니다. 언젠가는

[34:19] MCP 설정과 여러 Claude를

[34:21] 병렬로 실행하는 고급 튜토리얼도

[34:23] 만들 예정입니다. 하지만

[34:25] 이 튜토리얼이 여러분에게

[34:28] Claude Code를 완전히 마스터해서

[34:31] 앱을 구축하는 데 사용할 수 있는

[34:33] 20가지 팁의 완전한 개요를

[34:35] 제공하기를 바랍니다. 저 역시

[34:37] 초보자이고 그렇게 기술적이지 않은

[34:39] 사람으로서, Claude는

[34:41] 정말 부담스러울 수 있지만,

[34:43] 시간을 들여서 알아내는 것은

[34:45] 정말 가치가 있다고 생각합니다.

[34:48] 결국에는 AI 에이전트와

[34:49] 대화를 나누는 것일 뿐이니까요.

[34:52] 이 튜토리얼이 도움이 되었기를 바라고,

[34:53] 제가 사용한 모든 프롬프트와

[34:55] 자료들은 설명란과 링크된

[34:58] 글에서 확인하실 수 있습니다.

[35:00] 좋아요와 구독 부탁드리고, 이런 콘텐츠를 더 만들겠습니다. 그럼 다음에 봐요.