파일 하나로 앱 제작을 맡긴 Claude Code 하위 에이전트 5명, 결과는?

AI Oriented Dev 구독자 2,140명

요약

이번 영상에서는 Claude Code의 새 서브 에이전트(Subagents) 기능을 활용해 단일 PRD 문서만으로 전체 스택 앱을 자동 생성하는 과정을 보여줍니다. UI 디자인부터 백엔드 FastAPI 구현, 프론트엔드 React/TypeScript 개발과 테스트까지 다양한 전문 에이전트를 병렬로 활용해 빠르고 효율적인 워크플로우를 시연합니다. 실습 예제를 통해 에이전트 생성 방법, 모델 선택, 권한 설정, 컨텍스트 전달의 중요성을 꼼꼼히 설명하며 개발 현장에서 바로 적용 가능한 팁을 제공합니다. 시청자는 코드 빌더 팩을 활용해 동일한 환경을 재현하고, 향후 대규모 프로젝트에서 서브 에이전트 간 협업을 깊이 탐구할 기반을 마련할 수 있습니다.

주요 키워드

Subagent PRD FastAPI React/TypeScript MVP Swagger Wireframe Claude Code Builder Pack

하이라이트

🔑 새로운 Claude Code 서브 에이전트 기능으로 UI·프론트엔드·보안 등 분야별 전문화된 에이전트를 자유롭게 활용할 수 있습니다.
⚡️ 단 하나의 PRD 마크다운 파일만으로 FastAPI 백엔드와 React/TypeScript 프론트엔드를 병렬 생성해 전체 스택 앱을 완성했습니다.
🌟 에이전트별로 Sonet·Haiku·Opus 모델을 업무 특성에 맞게 지정해 비용과 성능을 동시에 최적화할 수 있습니다.
📌 하위 에이전트는 대화 전체가 아니라 명시적으로 전달된 컨텍스트만 활용해 필요한 정보만 선별해 효율적으로 동작합니다.
🚀 PRD 작성부터 시스템 아키텍처 설계, API·UI 사양 문서화, 실제 코드 구현과 테스트까지 모든 과정을 서브 에이전트 협업으로 자동화했습니다.
🔒 'dangerously skip permissions' 설정 시 데이터 삭제 위험이 있으므로 실제 프로젝트에선 세밀한 권한 제어가 필수입니다.
📈 완성된 MVP를 로컬에서 실행해 Swagger 인터페이스로 API를 검증하고, 에러·로딩 상태까지 포함한 UI 반응을 최종 확인했습니다.

용어 설명

PRD

Product Requirements Document(제품 요구사항 문서)로, 프로젝트 목표·기능·제약을 체계적으로 정리한 문서

Subagent(서브 에이전트)

Claude Code에서 특정 전문 영역에 특화된 개별 에이전트로, 여러 에이전트를 병렬로 운용해 업무를 분담

FastAPI

Python 기반으로 설계된 고성능 비동기 웹 프레임워크

React/TypeScript

UI 구축을 위한 React 라이브러리와 정적 타이핑을 지원하는 TypeScript 언어의 조합

Swagger

API 명세를 자동 문서화하고 인터랙티브하게 테스트할 수 있는 도구

MVP

Minimum Viable Product(최소 기능 제품)로, 핵심 기능만 구현해 빠르게 검증할 수 있는 프로토타입

Claude Code의 신규 서브 에이전트(Subagent) 기능을 소개하고, UI·백엔드·보안 등 분야별 전문 에이전트를 활용해 단일 PRD 파일만으로 전체 스택 앱을 자동 생성하는 워크플로우를 개략적으로 설명합니다.

[00:00] Claude Code 서브 에이전트의 새로운 기능 소개 - 개별 전문 분야를 가진 서브 에이전트들을 통해 UI 디자인, 프론트엔드, 백엔드, 보안 등 다양한 영역을 전담하는 방식으로 개발할 수 있게 되었다는 설명

[00:27] 실제 데모 소개 - 단일 PRD(Product Requirements Document) 문서로 시작해서 여러 서브 에이전트를 활용하여 백엔드와 프론트엔드를 포함한 완전한 풀스택 애플리케이션을 구현한 결과를 보여줌

[00:55] Claude Code 빌더 팩 안내 - 튜토리얼에서 사용된 모든 에이전트와 데모 애플리케이션의 소스 코드, 그리고 이전 비디오의 모든 리소스가 포함된 빌더 팩을 설명란에서 확인할 수 있다고 안내

slash agents 명령을 통해 새로운 에이전트를 생성·등록하는 방법, 모델·툴·권한 설정, 그리고 개별 에이전트 역할(예: 농담 에이전트) 정의 과정을 실습합니다.

[01:20] 에이전트 생성 방법 설명 - .claude 폴더의 agent 서브 폴더에 여러 에이전트를 생성하는 방법과 /agents 명령어를 사용하여 새로운 에이전트를 만드는 과정을 시연

[01:53] 농담 에이전트 생성 예시 - '항상 농담을 하는 에이전트' 생성을 통해 Claude가 작업에 적합한 에이전트 정의 파일을 자동으로 생성하는 과정과 도구 선택 옵션들을 설명

[02:30] 새로운 모델 선택 기능 - 최근 출시된 기능으로 각 에이전트마다 다른 모델을 지정할 수 있게 되었으며, 평범한 작업에는 Sonnet이나 Haiku, 복잡한 작업에는 Opus를 사용하거나 주 대화의 모델을 상속받을 수 있다고 설명

[02:45] Sonet 모델 선택과 자동 색상 설정을 통해 'joke teller'라는 에이전트를 생성하는 과정을 보여줍니다.

[02:59] Claude가 에이전트를 언제 어떻게 활용할지 결정하는 메커니즘과 에이전트 생성 방법에 대해 설명합니다.

[03:11] 에이전트를 직접 호출하는 방법과 Claude가 작업에 따라 서브에이전트를 자동 선택하는 기능을 소개합니다.

[03:33] 서브에이전트 생성 소개를 마무리하고, 자신의 경험을 바탕으로 큐레이션한 서브에이전트 저장소와 Claude 코드 빌더 팩을 소개합니다.

[03:58] 실제 앱 빌드 튜토리얼을 시작하며, plot과 권한 설정에 대해 설명합니다. 실제 프로젝트에서는 보안상 위험할 수 있는 설정임을 경고합니다.

[04:38] 프로젝트 초기화 과정과 PRD(제품 요구사항 문서)의 중요성에 대해 설명합니다.

프로젝트 초기화(init) 후 PRD(Product Requirements Document) 파일을 로드해 클라이언트 요구사항을 파악하고, System Architect 에이전트를 활용해 FastAPI 백엔드와 프론트엔드 구조를 설계합니다.

[04:56] 간단한 PRD 문서를 통해 YouTube 동영상 목록을 표시하는 읽기 전용 웹 애플리케이션 구축 목표를 설명합니다.

[05:30] 앱의 기본 구조를 설명하며, 백엔드의 에피소드 데이터를 프론트엔드로 서빙하는 시각적으로 매력적인 애플리케이션을 구축할 예정이라고 소개합니다.

[06:12] Claude Code 플레이리스트의 에피소드 목록이 담긴 episodes JSON 파일을 보여주며, Claude.md 파일을 통해 기존 코드베이스를 이해하는 것이 시작점임을 강조합니다.

[06:48] 시스템 아키텍트 에이전트를 태그하여 사용하는 방법을 시연하며, @system-architect로 에이전트를 호출하고 PRD 문서를 분석하여 FastAPI 백엔드와 프론트엔드 구조를 설계하도록 지시합니다.

[07:53] 서브에이전트의 중요한 특성을 설명합니다. 서브에이전트는 기존 대화 맥락을 알지 못하고 오직 Claude가 명시적으로 전달한 정보만으로 작업하며, Control+R로 실제 전달된 프롬프트를 확인할 수 있다고 설명합니다.

[08:36] 서브 에이전트의 컨텍스트 처리 방식에 대해 설명합니다. 많은 사람들이 오해하는 것과 달리, 서브 에이전트는 전체 대화 컨텍스트를 가져가지 않으며, 이는 토큰 사용량을 줄이는 장점이 있지만 올바른 컨텍스트 전달이 중요하다는 단점도 있습니다.

[08:52] 시스템 아키텍트가 백엔드와 프론트엔드 아키텍처 설계를 완료했으며, 이를 파일로 문서화하는 동시에 UI/UX 와이어프레임 디자인을 병렬로 진행하려고 합니다. UI 디자이너 에이전트를 활용해 이 작업들을 동시에 수행할 계획입니다.

PRD 작성 내용으로 PRD Writer 에이전트를 문서화 담당으로, UI Designer 에이전트를 와이어프레임 담당으로 지정해 API 스펙 문서와 UI 와이어프레임을 병렬로 생성합니다.

[09:35] 와이어프레이밍 요청이 나중 구현 단계에서 도움이 된다는 실용적인 팁을 제공합니다. 시스템 아키텍트의 설계를 바탕으로 명세서를 공식화하고 프로젝트 구조를 문서화하려고 하며, 이는 향후 다른 에이전트들에게 컨텍스트로 활용하기 위함입니다.

[10:04] UI 디자이너를 활용해 프로젝트의 UI 프레임을 별도 파일로 디자인하도록 지시합니다. 서브 에이전트 사용 시 반드시 '서브 에이전트를 사용해서 작업을 완수하라'고 명시해야 한다는 핵심 규칙을 강조하며, 작업들을 병렬로 실행하도록 지시합니다.

[10:28] Claude가 API 명세서 작성과 UI 와이어프레임 디자인을 위한 계획을 준비하고 있습니다. PRD 작성자와 UI 디자이너 서브 에이전트가 각각 실행되어 병렬 작업이 시작되었습니다.

[10:51] 흥미로운 관찰을 공유합니다. PRD 작성자를 직접 태그하지 않았음에도 불구하고, Claude가 시스템 아키텍트보다는 PRD 작성자가 명세서 작성에 더 적합하다고 자동으로 판단했습니다. 이는 PRD 작성자의 역할이 단순한 PRD 작성을 넘어서 더 광범위한 기능을 포함하기 때문입니다.

[11:25] 클로드의 PRD 작성자는 단순한 문서 작성을 넘어서 기술적 고려사항까지 포함하는 기술 문서 작성자 역할을 수행한다고 설명합니다.

[11:36] 서브에이전트를 명시적으로 지정하지 않으면 클로드가 자동으로 적합한 에이전트를 선택하며, 에이전트 설명이 이러한 선택에 매우 중요한 역할을 한다고 강조합니다.

[12:14] 시스템 아키텍트의 설계를 바탕으로 상세한 API 명세서가 작성되었으며, 상태 코드, 엔드포인트, 스키마, 프로젝트 구조 등 구현에 필요한 모든 요소가 포함되어 있습니다.

[12:46] PRD 작성자는 기술적 사고방식에 특화되어 있고, 시스템 아키텍트는 전체적인 계획을 담당하지만 실제 문서 작성은 전문 작성자에게 의존한다고 설명합니다.

[13:07] 서브에이전트 기능이 새로워서 때때로 클로드가 정지된 것처럼 보일 수 있지만, 실제로는 백그라운드에서 작업이 진행되고 있으니 인내심을 가지라고 조언합니다.

[13:44] 두 에이전트가 병렬로 작업하여 API 명세와 UI 와이어프레임을 동시에 완성했으며, 와이어프레임은 기대에 부합하는 프론트엔드 개발을 위한 효과적인 도구라고 설명합니다.

[14:27] UI 디자이너 에이전트가 생성한 와이어프레임의 세부 사항을 설명하며, 동영상 상세 보기, 모바일 반응형 뷰, 로딩 상태 등 다양한 화면 상태와 디자인 요소들을 포함한 포괄적인 UI 설계를 보여줍니다.

[14:47] 지금까지 단일 에이전트 태깅, Claude의 혼합 방식 선택, 병렬 에이전트 실행 등 다양한 서브에이전트 활용 방법을 시연했으며, 이제 서브에이전트의 진정한 힘을 발휘해 단일 프롬프트로 전체 애플리케이션을 구축하는 단계로 넘어갑니다.

단일 프롬프트로 전체 MVP 구현을 지시해 Python 백엔드 Dev 에이전트와 React/TS 에이전트를 병렬 실행, 최소 기능 동작 가능한 앱 코드를 자동 생성하고 간단 테스트까지 수행합니다.

[15:36] 엔드 투 엔드로 작동하는 MVP 버전 구현을 요청하며, API 사양과 UI 와이어프레임을 기반으로 하고, 간단한 테스트를 포함하되 최소한으로 유지하라는 구체적인 지시사항을 제시합니다.

[16:21] 서브에이전트를 병렬로 사용하라는 핵심 지시를 강조하며, WSL 환경에서 발생하는 키보드 멈춤 현상과 해결 방법에 대한 실무적인 팁을 공유합니다.

[16:54] 어떤 특정 에이전트도 태그하지 않고 Claude가 자율적으로 필요한 서브에이전트를 선택하도록 하는 접근 방식을 설명하며, 서브에이전트 팀의 장점인 병렬 처리와 각 에이전트의 전문성을 활용한 빠르고 정확한 작업 수행을 강조합니다.

[17:38] 윈도우 환경에서의 콘솔 작업 문제점을 설명하며, 동적 콘텐츠 렌더링으로 인한 화면 깜빡임 현상을 언급했습니다.

[18:07] Python 백엔드 개발자와 React TypeScript 전문가, 두 개의 하위 에이전트가 병렬로 실행되고 있음을 보여주며, 각각의 역할과 특징을 설명했습니다.

[18:37] FastAPI 사용과 최신 타입 힌트 등 Python 백엔드 개발의 모범 사례들을 적용했으며, React TypeScript 전문가도 유사한 방식으로 구성되어 있다고 설명했습니다.

[19:08] 에이전트들을 실행시켜두고 기다리면 자동으로 완료될 것이라고 하며, 실제로 백엔드와 프론트엔드 폴더에 코드가 생성된 것을 확인했습니다.

[19:37] 생성된 코드를 살펴보니 Next.js 앱과 FastAPI Python 백엔드가 만들어졌으며, 헬스 엔드포인트와 라우터 구조 등이 자신의 개발 방식과 일치한다며 만족감을 표현했습니다.

[20:19] 프로젝트 완성까지 지켜보며 프론트엔드가 에피소드 카드, 에러/로딩 상태, 댓글 등 컴포넌트들을 구현하는 과정을 확인합니다.

[20:43] Python 백엔드에서 실행 서버에 대한 간단한 테스트를 진행하며, 전체 구현 과정이 마지막 단계에 도달했음을 확인합니다.

[20:55] Python 백엔드가 실행되고 프론트엔드 테스트의 마지막 단계에 진입. NPM 설치 후 프론트엔드와 백엔드 간의 인터페이스 테스트를 수행합니다.

[21:17] Python 백엔드에서 엔드포인트 호출 요청과 응답을 확인하며 좋은 신호임을 파악. 서브에이전트 기능은 아직 개발 중이며 특히 WSL에서 UI 버그가 있다고 언급합니다.

[21:52] MVP 완성을 발표하며 백엔드와 프론트엔드 위치를 제공. Python 실행, 프론트엔드 설치, NPM run dev 실행 순서로 작동 방법을 설명합니다.

생성된 FastAPI 서버와 Next.js 프론트엔드를 로컬에서 실행해 Swagger UI로 API 엔드포인트를 검증하고, 앱 로딩·오류 상태를 테스트해 UI 동작을 최종 확인합니다.

[22:09] 실제 테스트를 통해 백엔드 연결 상태를 확인하고 원하는 JSON 형식의 결과를 성공적으로 받았다고 보고합니다.

[22:24] 브라우저에서 localhost:8000/docs의 Swagger 인터페이스를 통해 엔드포인트 테스트 기능을 시연하며, get episodes 엔드포인트 실행 결과를 확인합니다.

[22:52] localhost에서 완성된 애플리케이션을 확인하며 JSON 파일에 따라 모든 동영상이 로드된 것과 UI 와이어프레임과의 일치성을 확인합니다.

[23:10] 완성된 애플리케이션의 UI를 살펴보며 와이어프레임과의 일치성을 확인하고, 로딩 상태와 에러 상태 테스트를 통해 기능이 정상적으로 작동함을 검증합니다.

[24:05] 썸네일 로딩 문제를 디버깅하여 해결하고, 애플리케이션이 완전히 작동하는 상태로 완성되었음을 확인합니다.

서브 에이전트 기능의 가능성과 개선이 필요한 부분, 향후 대규모 프로젝트 활용 전망을 언급하며 추가 심층 탐구 예고와 구독·알림 설정을 독려합니다.

[24:12] 튜토리얼을 마무리하며 클로드 코드의 서브에이전트 개념의 유용성과 아직 초기 단계라는 점, 그리고 향후 더 복잡한 협업 방식에 대한 탐구 계획을 설명합니다.

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

[00:00] Cloud Code를 최대한 활용하는 방법에 대한 또 다른 에피소드에 오신 것을 환영합니다.

[00:05] 지난 주 가장 큰 소식은 Claude Code 서브 에이전트의 출시였습니다.

[00:10] 이번 새로운 릴리스를 통해 실제로 각각의 전문 분야를 가진

[00:15] 개별 서브 에이전트를 사용할 수 있는 기능이 추가되었습니다.

[00:18] 따라서 UI 디자인에 집중하는 하나, 프론트엔드에

[00:22] 집중하는 하나, 보안에 집중하는 하나를 가질 수 있고, 가장 좋은 방법은

[00:25] 예시를 통해 보여드리는 것이라고 생각합니다.

[00:27] 저는 단 하나의 PRD 문서로 시작했습니다.

[00:31] 그리고 여러 서브 에이전트를 활용하여 백엔드와 프론트엔드를

[00:35] 포함한 완전한 구현으로 끝낼 수 있었습니다.

[00:39] 바로 여기서 보실 수 있습니다.

[00:41] 모든 것을 구축할 수 있었습니다.

[00:42] 비록 간단한 앱처럼 보일 수 있지만, 실제로는 풀스택 앱이고

[00:45] 이 단일 PRD 마크다운 파일에서 백엔드와 프론트엔드 모두에 걸친

[00:50] 완전한 구현까지 어떻게 갈 수 있었는지 보여드리겠습니다.

[00:55] 오늘 튜토리얼에서 보는 모든 것들은 제 Claude Code 빌더 팩에서 찾을 수 있습니다.

[00:59] 아래 설명에서 확인 가능합니다. 빌더 팩에는 오늘 튜토리얼에서

[01:03] 실행되는 모든 에이전트들과 함께 구축된 데모 애플리케이션의

[01:07] 소스 코드도 포함되어 있습니다.

[01:08] 뿐만 아니라, 빌더 팩에는 실제로 제가 이전에 만든

[01:11] 모든 비디오의 소스 코드와 리소스도 포함되어 있습니다.

[01:14] 아래 설명 링크에서 빌더 팩을 확인하는 것을 잊지 마세요.

[01:18] 좋습니다, 그럼 오늘의 튜토리얼을 시작해보겠습니다.

[01:20] 좋습니다, 우선 Claude Code 내에서 실제로 어떻게 에이전트를

[01:23] 생성하고 활용할 수 있는지부터 시작하겠습니다.

[01:25] 제 .claude 폴더에서 보시듯이, 실제로 agent 서브

[01:28] 폴더가 있고, 그 안에는 이 튜토리얼 목적으로

[01:32] 제가 만든 여러 에이전트들이 있습니다.

[01:34] 권장되는 방법은 실제로 Claude Code 자체에서

[01:36] 슬래시 에이전트를 입력하는 것입니다.

[01:39] 보시다시피, 이전에 실제로 만든 다른 에이전트들을 찾았지만

[01:42] 새 에이전트를 만들 수 있고, 다른 사람들과 공유할 수 있도록

[01:46] 프로젝트에 넣는 것을 선호합니다.

[01:48] 그리고 Claude로 생성하는 것이 적극 권장됩니다.

[01:51] 좋습니다.

[01:51] 여기서 재미있는 일을 해보겠습니다.

[01:53] 항상 농담을 하는 에이전트를 만들겠습니다.

[01:59] 이것이 하는 일은 Claude가 실제로 이 작업에 가장 적합한

[02:03] 활용할 수 있는 에이전트 정의 파일을 생성한다는 것입니다.

[02:07] 따라서 그것이 무엇을 하는지에 대해 더 구체적으로 말할 수 있을수록 더 좋습니다.

[02:11] 여기서는 실제로 사용하고 싶은 도구를 선택할 수 있고

[02:14] 어떤 도구가 위의 범주 중 어떤 것에 해당하는지 확인할 수 있습니다.

[02:18] 고급 옵션을 보여주면, 실제로 특정 도구들을 볼 수 있습니다.

[02:22] 하지만 지금은 모든 도구를 사용하겠습니다.

[02:24] 농담 에이전트를 원한다고 하면 실제로는 많은 일을

[02:26] 할 필요가 없으므로 아마도 읽기 전용으로 하고 계속을 클릭할 수 있습니다.

[02:30] 방금 출시된 새로운 기능이 있습니다. 이제 실제로

[02:32] 다른 에이전트와 함께 사용할 다른 모델을 지정할 수 있습니다.

[02:35] 실제로 평범한 작업을 하는 에이전트가 있다면, 아마도

[02:37] Sonnet이나 Haiku를 사용하고 싶을 것입니다.

[02:39] 그리고 복잡한 작업을 하고 있다면, Opus를 사용하거나

[02:42] 실제로 상속을 사용할 수 있습니다. 즉, 주 대화가 사용하는 것을 사용하는 것입니다.

[02:45] 이 경우에는 그냥 Sonet을 사용하겠고, 원하는 색상을 선택할 수 있습니다.

[02:48] 그리고 자동 색상을 사용하겠습니다.

[02:50] 보시다시피 에이전트가 생성되었고, 'joke teller'라고 이름이 붙었습니다.

[02:54] 자, 이제 엔터를 누르면

[02:55] joke teller가 여기 있는 것을 볼 수 있습니다.

[02:58] 위쪽 이 섹션은 매우 중요합니다.

[02:59] 이것이 Claude가 언제 그리고 어떻게 이 에이전트를 활용할지 아는 방법이기 때문입니다.

[03:03] 네, 기본적으로 이렇게 에이전트를 생성하는 것입니다.

[03:06] 그리고 에이전트를 직접 호출해서 활용할 수 있습니다.

[03:11] 이것도 최근 변경된 사항입니다.

[03:13] 농담이라고 말하고 원하는 프롬프트를 전달할 수 있습니다.

[03:17] 정말 흥미로운 점은

[03:19] Claude가 실제로 수행 중인 작업에 따라

[03:22] 서브에이전트 목록에서 선택한다는 것입니다.

[03:26] 그것이 바로 서브에이전트의 진정한 힘이

[03:29] 발휘되는 지점입니다.

[03:30] 제가 보여드리겠습니다.

[03:33] 서브에이전트 생성에 대한 간단한 소개였습니다.

[03:36] 언급했듯이 전체 저장소를 생성했습니다. 실제로 잘 작동한

[03:40] 서브에이전트 목록을 만들었습니다.

[03:41] 이것은 제 경험과 이 튜토리얼을 만들면서

[03:45] 다양한 서브에이전트를 연구한 결과입니다.

[03:48] 이 모든 에이전트와 전체 프로젝트를

[03:51] 제 Claude 코드 빌더 팩의 일부로 제공하며, 아래 링크에서 받으실 수 있습니다.

[03:56] 오늘의 튜토리얼 제작을 시작해보겠습니다.

[03:58] 여기 있는 서브에이전트를 사용해서 이 앱을 빌드하는 것으로 시작하겠습니다.

[04:02] 첫 번째로 할 일은 plot을 하는 것입니다.

[04:04] 그리고 dangerously skip permissions을 사용하겠습니다.

[04:08] 실제 프로젝트에서는 이런 식으로 하면 안 됩니다.

[04:12] 이를 허용하면 Claude가 실제로

[04:15] 삭제와 제거를 수행하고

[04:18] 심지어 프로덕션 데이터베이스를 지울 수도 있기 때문입니다.

[04:22] 따라서 설정을 수정하는 것이 좋습니다.

[04:23] js ON을 통해 모든 것을 허용하는 것보다는 Claude가 수행할 수 있는 작업을 구체적으로 지정하는 것이 좋습니다.

[04:28] 하지만 많은 서브에이전트를 실행할 예정이고

[04:32] 매번 권한을 승인하고 싶지 않기 때문에 괜찮습니다.

[04:36] 1단계는 이게 전부입니다.

[04:38] 여기서 보시다시피 시작했고

[04:40] init로 시작하겠습니다. 모든 프로젝트에서 항상 이렇게 해야 합니다.

[04:43] 여기서 지적하고 싶은 것은 PRD 또는 제품 요구사항 문서라는 것이 있다는 점입니다.

[04:47] 이는 효과적으로 우리가 여기서 달성하려고 하는 목표를 설명하는 문서입니다.

[04:50] 이것은 클라이언트로부터 받거나

[04:54] 클라이언트의 요구사항을 바탕으로 작성하는 문서입니다.

[04:56] 그리고 이것이 이 프로젝트에서

[04:59] 무엇을 구축하고자 하는지에 대한 가이드 역할을 합니다.

[05:03] 여기서 미리보기를 하겠습니다.

[05:05] 조금 더 보기 좋게 하기 위해서인데, 실제로는 매우 간단한 PRD 문서입니다.

[05:09] 단일 읽기 전용 웹 애플리케이션을 구축하려고 합니다.

[05:12] YouTube 동영상 목록을 표시하는 앱입니다.

[05:14] 이 경우에는 제 YouTube 동영상 목록이 될 것입니다.

[05:17] 여기에 주요 초점은 깔끔하고 반응형이며

[05:20] 시각적으로 매력적인 프론트엔드라고 나와 있습니다.

[05:23] 백엔드의 정적 데이터를 표시하는 것입니다.

[05:26] 여기에 주요 초점이 맞춰져 있습니다.

[05:30] 시각적으로 매력적인 프론트엔드와 백엔드의 정적 데이터를 연결하는 것에 중점을 두고 있습니다.

[05:34] 알겠죠?

[05:34] 그래서 이것이 바로 우리가 집중할 부분입니다.

[05:37] 실제로 백엔드에서 사용할 에피소드 목록을 추가하겠습니다. 기본적으로 제 플레이리스트의 영상들 목록이 될 겁니다.

[05:44] 아직 확인해 보지 않으셨다면 꼭 보시길 바라며, 이 데이터를 백엔드에서 서빙해서

[05:48] 프론트엔드로 전달할 예정입니다.

[05:51] 이것이 바로 우리가 만들 애플리케이션의 구조입니다.

[05:55] 이 부분이 로딩되는 동안

[05:57] 정적으로 하드코딩된 JSON 배열을 반환하는 것을 보실 수 있을 겁니다.

[06:01] 이걸 적절한 위치에 넣어보겠습니다. 여기 보시는 것처럼

[06:05] episodes JSON 파일이 있습니다.

[06:08] 여기서 유튜브 문서를 확인할 수 있고

[06:10] 이 파일이 하는 일은

[06:12] 제 Claude Code 플레이리스트의 모든 에피소드를 나열하는 것입니다.

[06:17] 제 채널의 플레이리스트 말이죠.

[06:19] 이미 Claude.md를 분석했고, 이것은 항상 시작점이 되어야 합니다

[06:24] 기존 코드베이스가 무엇인지 이해할 수 있도록 말이죠.

[06:29] 이제 실제로 앱 구축 과정을 시작해보겠습니다.

[06:33] 다시 이쪽으로 돌아가보죠.

[06:35] PRD를 잠시 열어두고, 이 과정이 진행되는 동안

[06:39] Cursor를 연결하기 위해 IDE를 실행하겠습니다.

[06:43] 때로는 ID 연결이 끊어졌다고 나오지만, 우리가 달성하려는 목표에는

[06:46] 별 문제가 되지 않습니다.

[06:48] 좋습니다. 제가 가장 먼저 할 일은

[06:51] 시스템 아키텍트 에이전트를 사용하는 것입니다.

[06:54] 여기 말이죠.

[06:54] 이것은 높은 수준에서 전체 애플리케이션을 설계하는 에이전트로

[06:58] 프론트엔드와 백엔드 모두를 전문으로 하는 시작점과 같습니다.

[07:03] @를 사용해서 에이전트를 태그할 수 있고, 시스템 아키텍트 에이전트를

[07:09] 여기서 태그하겠습니다.

[07:11] 그리고 PRD 문서를 분석하라고

[07:15] 지시하겠습니다.

[07:18] 좋습니다.

[07:19] FastAPI를 사용한 Python 백엔드를 설계하도록 프롬프트하겠습니다.

[07:24] 에피소드 목록을 서빙하기 위해서요.

[07:26] 앞서 언급했듯이, 단일 get episodes 엔드포인트를 가져야 하고

[07:30] 이 파일에서 데이터를 반환해야 합니다.

[07:33] 그리고 프론트엔드가 수행할 기본 구조를

[07:36] 개요로 작성해 달라고 하겠습니다.

[07:37] 이 시스템 아키텍트가 백엔드와 프론트엔드를 모두 담당하게 됩니다.

[07:40] 지금 바로 시작해보겠습니다.

[07:42] 에이전트를 태그함으로써 Claude가 이 작업을 수행하기 위해

[07:48] 시스템 아키텍트를 특별히 선택한 것을 보실 수 있습니다.

[07:53] 서브에이전트를 실행할 때 기억해야 할 중요한 점이 있습니다.

[07:56] 이들은 여기서 진행된 대화의 맥락을 전혀 알지 못하며, 오직 Claude가

[08:00] 명시적으로 전달한 것들만 알 수 있습니다.

[08:02] Control+R을 누르면 실제로 무엇이 전달되고 있는지 볼 수 있습니다.

[08:06] Claude가 시스템 아키텍트를 호출할 때 실제로

[08:11] 이것을 프롬프트로 전달했습니다, 맞죠?

[08:13] PRD와 에피소드 데이터를 바탕으로 백엔드의 완전한 시스템 아키텍처를 설계하고

[08:17] 프론트엔드를 위한 모든 정보를 제공합니다

[08:21] 이 작업을 완수하는 데 필요한 모든 것을 말이죠.

[08:23] 앞서 언급했듯이, 이것의 핵심은 서브에이전트가

[08:28] 맥락을 인식하도록 설계되었다는 것입니다.

[08:30] 빈 상태에서 시작해서 전달받은 맥락으로만

[08:33] 작업을 처리합니다.

[08:35] 이해해야 할 매우 중요한 개념입니다.

[08:36] 많은 사람들이 서브 에이전트가 전체 대화의 컨텍스트 윈도우를 그대로 가져간다고 생각합니다.

[08:40] 하지만 그렇지 않습니다.

[08:42] 이것의 좋은 점은 에이전트에 전달되는 토큰 양을 줄인다는 것입니다.

[08:45] 하지만 단점은 올바른 컨텍스트를 전달하지 않으면

[08:49] 작업을 완수할 수 없다는 점입니다.

[08:52] 좋습니다. 시스템 아키텍트가 아키텍처를 설계했습니다. 보시는 것처럼

[08:56] 백엔드 아키텍처와 프론트엔드 모두 말이죠.

[08:59] 그리고 몇 가지 핵심 기술적 결정사항들도 있습니다.

[09:01] 이제 제가 하고 싶은 것은 이것을 실제로 어딘가 파일에 작성해두는 것입니다.

[09:05] 하지만 동시에 주목할 점은, 이 기회를 활용해서

[09:10] 이 앱의 UI와 UX 와이어프레임을 디자인할 수도 있다는 것입니다.

[09:15] 실제로 이것을 병렬로 시작할 수 있습니다. 겹치는 부분이 없어야 하기 때문이죠.

[09:19] 여기 있는 UI 디자이너 에이전트를 사용해서 진행하겠습니다.

[09:24] 여기서 미리보기를 열어보겠습니다.

[09:27] 당신은 아름답고 직관적이며 구현 가능한 사용자 인터페이스와 핵심 와이어프레이밍 생성에 집중하는 UI 디자이너입니다.

[09:32] 이것은 매우 유용한 팁입니다.

[09:36] 와이어프레이밍을 요청하면, 나중에 디자인을 구현할 때 실제로 도움이 됩니다.

[09:41] 좋습니다. 상세한 아키텍처를 파일에 작성하는 동안 UI 디자인을 병렬로 효과적으로 할 수 있게 하고 싶습니다.

[09:49] 이를 수행하는 방법은 다음과 같습니다.

[09:51] 시스템 아키텍트의 설계를 바탕으로, 명세서를 공식화하고 프로젝트 구조를 개요화해서 파일에 작성하고 싶습니다.

[09:58] 이것의 핵심은 나중에 다른 에이전트들에게 컨텍스트로 전달할 수 있도록 이것을 문서화하는 것입니다.

[10:04] 다음에 할 수 있는 것은 실제로 UI 디자이너를 사용하는 것입니다.

[10:08] 여기서 선택하겠습니다.

[10:11] UI 디자이너가 프로젝트의 UI 프레임을 디자인하고 별도 파일에 작성하게 하고 싶습니다.

[10:16] 서브 에이전트를 사용하기 위해서는 항상 말해야 하는 핵심이 있습니다. '서브 에이전트를 사용해서 이 작업들을 완수하라'고 해야 합니다.

[10:23] 여기서 병렬로라고 명시적으로 표현해서 이것들이 병렬로 실행되어야 한다는 것을 분명히 했습니다.

[10:28] 이제 시작해보겠습니다. Claude가 API 명세서를 작성하는 계획을 준비하고, 동시에 UI 와이어프레임도 디자인하는 것을 볼 수 있어야 합니다.

[10:39] 여기서 볼 수 있는 것은 이미 PRD 작성자를 실행해서 실제로 명세서를 작성하고 있다는 것입니다.

[10:46] 이제 UI 와이어프레임을 만들기 위해 UI 디자이너 서브 에이전트도 실행된 것을 볼 수 있습니다.

[10:51] 몇 가지 지적할 점이 있습니다.

[10:54] 제가 실제로 PRD 작성자를 태그하지 않았다는 점에 주목하세요.

[10:58] 저는 그냥 '아키텍트의 설계를 바탕으로 명세서를 공식화하라'고 했습니다.

[11:02] 매우 흥미로운 점을 볼 수 있습니다. Claude가 시스템 아키텍트가 아니라 PRD 작성자가 실제로 더 나은 위치에 있다고 판단했다는 것입니다.

[11:10] PRD 작성자가 명세서를 작성하기에 더 나은 위치에 있다고 봤습니다.

[11:15] 이것을 볼 수 있을 것입니다. 그 이유는, PRD 작성자의 설명을 실제로 보면

[11:20] 실제로 PRD 작성뿐만 아니라 다른 것들에도 집중한다는 것을 알 수 있습니다.

[11:25] PRD를 작성할 수 있을 뿐만 아니라 실제로는 거의 기술 문서 작성자와 같습니다.

[11:29] 기술 문서 작성자로서 충분한 맥락을 갖고 있어서 실제로

[11:33] 기술적 고려사항들까지 고려합니다.

[11:36] 이것이 클로드를 사용할 때 일어나는 일이고, 서브에이전트를 명시적으로 지정하지 않으면

[11:41] 누가 그 작업을 수행할지 스스로 알아내려고 최선을 다합니다.

[11:45] 그 작업을 말이죠.

[11:47] 하지만 UI 디자이너의 경우에는 실제로 태그를 지정했습니다.

[11:49] UI 디자이너를 명시적으로 말이죠. 클로드가 실제로

[11:54] 여기에 있는 설명을 기반으로 UI 디자이너를 선택했을 것이라고 확신합니다.

[11:58] 여기 이 설명이 매우 중요합니다. 왜냐하면

[12:01] 클로드가 누가 작업을 수행할지 결정하는 데 도움이 되기 때문입니다.

[12:07] 그리고 이것이 매우 중요한 역할을 한다는 것을 보게 될 겁니다.

[12:10] 이후에 전체 구현을 완료할 때 말이죠.

[12:14] 이것을 계속 진행하면 실제로 API를 작성했다는 것을 볼 수 있습니다.

[12:18] 여기에 명세가 있고 실제로 매우 상세한 것을 볼 수 있습니다.

[12:24] 시스템 아키텍트의 설계를 기반으로 한 명세서입니다.

[12:28] 상태 코드, 정확한 엔드포인트, 스키마, 프로젝트

[12:32] 구조, 그리고 백엔드 구성 방법, 프론트엔드 구성 방법

[12:36] 모든 구성 파일들과 이 프로젝트를 구현하는 데

[12:39] 필요할 수 있는 모든 것들을 포함하고 있습니다.

[12:43] 그리고 그것이 PRD 작성자를 보여주는 이유입니다.

[12:46] 이런 스타일의 글쓰기가 이런 매우 기술적인 방식으로 생각하는 것이 실제로

[12:50] PRD 작성자가 잘하는 것입니다.

[12:52] 그리고 시스템 아키텍트는 주로 전체적인

[12:56] 시스템 아키텍처 계획을 다룹니다.

[12:57] 하지만 그것을 작성하는 데는 최선이 아닙니다. 맞죠?

[13:00] 이 모든 것을 하고 나서 무엇을 해야 하는지 알고, 그런 다음 작성자에게 의존합니다.

[13:04] 실제로 그것을 작성하도록 말이죠.

[13:07] 서브에이전트에 대한 한 가지는 여전히 매우 새롭고 때때로

[13:11] 클로드가 그냥 돌고만 있는 것처럼 보일 수 있습니다.

[13:14] 그리고 실제로 아무것도 하지 않는 것처럼요.

[13:16] 그리고 때때로 이런 일이 발생합니다. 레딧과 일부

[13:20] 포럼에서 사람들이 이것을 언급하는 것을 봤는데, 때때로 메인 클로드

[13:25] 채팅이 일시정지된 것처럼 보이고 계속되지 않는 것 같지만, 참을성 있게 기다리면

[13:28] 실제로 백그라운드에서 작업을 하고 있다는 것을 볼 수 있습니다.

[13:31] 그리고 곧 완료될 것입니다.

[13:44] 여기서 봐야 할 주요한 것은 이 두 가지가

[13:46] 병렬로 작동하고 있다는 것입니다. 좋습니다, 이제 UI 와이어프레임이 완료되었습니다.

[13:50] 제가 언급했듯이 아무것도 하지 않는 것처럼 보였지만 실제로는

[13:53] 백그라운드에서 실제로 UI 와이어프레임을 완료했고 여기 있습니다.

[13:57] 두 개의 포괄적인 명세 문서를 성공적으로 생성했다고 나와 있습니다.

[14:01] 서브에이전트를 병렬로 사용해서 API 명세를 얻었고, 이것은 이미

[14:05] 다뤘고, 이제 UI 와이어프레임을 살펴볼 수 있습니다.

[14:08] 그리고 이것은 정말 멋진 것입니다.

[14:10] 다른 클로드 코어 전문가들을 실제로 보면

[14:13] 와이어프레임 사용을 실제로 언급합니다.

[14:16] 이것은 실제로 프론트엔드를 개발하는 정말 좋은 방법입니다.

[14:19] 당신의 기대에 부합하는.

[14:21] 여기서 볼 수 있듯이 헤더 섹션까지 있습니다.

[14:24] 여기에 그리드 레이아웃과 푸터가 있습니다.

[14:27] 그리고 각 동영상의 상세 보기에서 어떻게 보일지도 보여주죠. 카트 콘텐츠가 어떻게 될지, 버튼들이 어떻게 생겼는지,

[14:31] 아래로 스크롤하면 모바일 반응형 뷰나 단일 컬럼에서 어떻게 보이는지까지 다룹니다.

[14:35] 그리고 로딩 상태일 때 어떻게 보일지도 보여줘요. 반짝이는 효과와 동영상 로딩 진행률이 어떻게 표시될지까지요.

[14:40] 정말 멋진 와이어프레임과 UI 디자인 방식이에요. 여기에는 색상과 해야 할 일에 대한 세부사항이 정말 많이 있습니다.

[14:47] 그리고 이것은 실제로 멋져 보이는 결과물을 만들어낼 수 있도록 보장하는 정말 좋은 방법입니다. 자, 이제 단일 에이전트를 태그해서 작업을 완료하는 방법을 보여드렸고, Claude가 혼합 방식을 선택하도록 하는 방법도 보여드렸습니다.

[15:01] 그리고 병렬로 에이전트를 실행하는 방법도 보여드렸죠. 한 경우에는 명시적으로 어떤 에이전트를 사용할지 지정했고, 다른 경우에는 Claude에게 맡겼습니다.

[15:17] 이제 우리가 할 일은 서브에이전트의 진정한 힘을 발휘하는 것입니다. 제대로 설계된 서브에이전트가 있다면, 기술적으로 Claude에게 단 하나의 프롬프트로 전체 애플리케이션을 구축하도록 요청할 수 있어야 합니다.

[15:25] 그래서 이렇게 말할 거예요. '엔드 투 엔드로 작동하는 MVP 버전을 구현해달라'고 하겠습니다. MVP는 앱이 완전히 작동하고 제가 테스트할 수 있는 가장 기본적인 기능을 의미합니다.

[15:41] 그리고 'API 사양과 UI 와이어프레임을 기반으로 해달라'고 말하겠습니다. 그리고 '매우 간단하고 최소한의 테스트를 해서 제대로 작동하는지 확인해달라'고 하겠습니다.

[16:00] 매우 간단하고 가볍게 유지하세요. 전체 테스트 스위트를 만들고 싶지는 않거든요. 원한다면 할 수도 있지만, 이 데모의 목적상 최대한 간소하게 유지하고 싶습니다. 그리고 정말, 정말 중요한 건, '서브에이전트를 병렬로 사용해서 이 작업을 수행해달라'는 것입니다.

[16:21] 키가 잠시 멈춰있는 게 보이셨죠? 이건 WSL에서 자주 일어나는 일이에요. 저는 Windows에서 Linux용 Windows 서브시스템을 사용하고 있거든요. 이런 일이 생기면, 꼼수는 Ctrl+백스페이스를 누르는 건데, 그러면 최소한 키보드가 잠금 해제됩니다.

[16:44] 자, 여기서 보시는 바와 같이 저는 어떤 에이전트도 태그하지 않았습니다. Claude가 구현하는 데 무엇이 필요한지 알아내도록 맡겼어요.

[17:04] 이제 시작해보죠. 제가 말했듯이, 서브에이전트 팀을 갖는 것의 힘은 기술적으로 편안히 앉아서 기다리기만 하면 된다는 것입니다. Claude가 올바른 작업에 올바른 서브에이전트를 선택한다고 가정하면, 병렬로 처리하기 때문에 매우 빠르게 해낼 거라고 확신할 수 있어요.

[17:27] 그리고 각 서브에이전트가 정말 좋은 작업을 해낼 거라고 확신할 수도 있습니다. 여기서 보시는 바와 같이, FastAPI 백엔드와 Next.js 프론트엔드를 구현하기 위한 할 일 목록을 만들었습니다.

[17:38] 윈도우에서 작업할 때 가장 짜증나는 부분이

[17:40] 콘솔에서 동적 콘텐츠가 많이 렌더링되기 때문입니다.

[17:43] 여기서요.

[17:44] 가끔 폰트 크기를 줄이면 조금 나아지기도 해요.

[17:47] 방금 보셨듯이요.

[17:49] 하지만 그 후에는 다시 좀 이상해지기 시작해요.

[17:51] 제가 보여드리려는 건 결국...

[17:54] 폰트를 정말 작게 해서 너무 깜빡거리지 않도록 하는 건데, 여기서 보실 수 있듯이

[18:00] 너무 작아져서 스크롤바까지 사라졌네요.

[18:03] 여기서 보실 수 있는 건 실제로

[18:06] 하위 에이전트 두 개가 병렬로 실행되고 있다는 겁니다.

[18:07] 하나는 Python 백엔드 개발자이고, 다른 하나는

[18:11] React TypeScript 전문가입니다.

[18:13] 이게 실행되는 동안에, 실제로

[18:16] 그들이 선택한 두 하위 에이전트를 열어보겠습니다.

[18:19] 여기서 Python 백엔드를 보실 수 있는데, 빠른 미리보기로

[18:23] 화면에서 보기 쉽게 하겠습니다.

[18:25] Python 백엔드 개발 전문가이자

[18:29] 프로덕션급 Python 애플리케이션 생성 전문가라고 되어있네요.

[18:32] 실제로 보면, Python 백엔드 서비스를

[18:36] 개발할 때 이 에이전트를 사용하라고 되어있습니다.

[18:37] FastAPI를 사용하고 있기 때문에, 실제로

[18:41] 최신 타입 힌트 사용 같은 특정 모범 사례들을 사용하도록 프롬프팅했습니다.

[18:45] 그리고 Python 코드 작성과 관련된 여러 다른 것들도요.

[18:48] React TypeScript 전문가도 매우 비슷합니다.

[18:51] 이 깜빡거리는 화면 죄송합니다.

[18:53] 여기 아래를 보면, TypeScript와 NPM 패키지 사용에 대한 많은 모범 사례들이 포함되어 있습니다.

[18:57] 필요한 곳에 맞게 마음껏 커스터마이징할 수 있습니다.

[19:00] 하지만 결국 이건 코드베이스를 기반으로 제가 사용하기로 결정한 것이고

[19:04] 분명히 올바른 선택이었습니다.

[19:08] 말했듯이, 이걸 그냥 실행시켜두고

[19:10] 커피 한 잔 하고 돌아오면

[19:11] 모든 게 완료되어 있을 거예요.

[19:15] 아직도 진행 중이에요.

[19:17] 콘솔이 여전히 깜빡거리고 있지만, 좋은 소식은

[19:21] 실제로 코드가 작성된 걸 볼 수 있다는 겁니다.

[19:24] 코드가 실제로 작성되었어요.

[19:26] 이제 백엔드 폴더가 생겼네요.

[19:28] 그리고 작성된 코드가 들어있는 프론트엔드 폴더도 있습니다.

[19:31] 보시다시피 이건 Create Next App으로 만들어진

[19:35] 전형적인 Next.js 앱입니다.

[19:37] 그리고 백엔드는 FastAPI입니다.

[19:39] 메인 함수가 실행되고 있는 Python 백엔드네요.

[19:43] 메인 함수에 헬스 엔드포인트가 있는 걸 볼 수 있는데, 이건 항상 매우 유용해요.

[19:48] 그리고 루트 엔드포인트도 있고요.

[19:49] 다른 여러 엔드포인트들을 보여주는 루트 엔드포인트가 있습니다.

[19:54] 이게 정말 마음에 드는 이유는 제가 실제로 설계하는 방식이기 때문이에요.

[19:58] 제 백엔드를요.

[19:58] 모든 관련 엔드포인트들이 들어있는

[20:01] 명시적인 라우터 폴더를 두는 걸 좋아해요.

[20:03] 지금까지 꽤 만족스럽습니다.

[20:05] Python이나 FastAPI에 익숙하지 않으시더라도 걱정 마세요.

[20:08] 여기서 중요한 건 Python 백엔드 개발자에게 준

[20:11] 간단한 지시사항을 바탕으로

[20:14] 단순하지만 꽤 좋은 백엔드를 작성했고, 실제로 정말 잘했다는 것입니다.

[20:19] 이제 계속 실행하면서 끝까지 지켜보겠습니다.

[20:21] 그리고 최종 결과를 확인해보죠.

[20:24] 시간이 좀 지난 후, 프론트엔드가 점점 나머지 구현을 채워가기 시작하는 걸 볼 수 있습니다.

[20:29] 나머지 구현 부분들을 채워가고 있어요.

[20:31] 여기 에피소드 카드 컴포넌트들, 에러 상태,

[20:35] 로딩 상태, 앱 페이지 등이 있습니다.

[20:37] 댓글 기능도 있고요.

[20:38] 맞아요, 컴포넌트들이 작성되었고, Python 백엔드가

[20:40] 간단한 테스트를 실행하고 있는 걸 볼 수 있습니다.

[20:43] 실행 중인 서버의 간단한 테스트 말이죠.

[20:45] 지금까지 진행된 상태가 바로 이런 거예요.

[20:47] 계속 놔두고 어떤 결과를 가져다주는지 지켜보겠습니다.

[20:51] 실제로 완성에 가까워지고 있어요. 여기서 볼 수 있듯이

[20:55] Python 백엔드가 실제로 실행되고 있고, 프론트엔드의 마지막

[20:59] 테스트 단계에 와있습니다.

[21:02] 지금 테스트를 진행하고 있어요.

[21:04] NPM을 설치하고 있고요.

[21:05] 프론트엔드가 백엔드와 제대로

[21:08] 연결되는지 테스트할 예정입니다.

[21:10] 구현의 마지막 단계에 도달했을 것 같아요.

[21:13] 마무리될 때까지 조금만 더 기다린 후 테스트해보겠습니다.

[21:17] Python 백엔드 개발에서 엔드포인트에 대해

[21:22] 호출 요청을 보내고 응답을 받고 있는 걸 확인할 수 있어요.

[21:26] 좋은 신호입니다.

[21:28] 서브에이전트 기능은 여전히

[21:31] 활발하게 개발 중인 상태라고 생각해요.

[21:32] 그래서 UI 측면에서는 특히 WSL에서 여전히 약간 버그가 있지만,

[21:38] 더 견고해져서 Python 백엔드처럼

[21:41] 작업이 진행되는 과정을 볼 수 있기를 바랍니다.

[21:45] 이제 완료됐네요.

[21:46] React TypeScript 테스트 완료까지 기다리기만 하면 됩니다.

[21:50] 그러면 끝입니다.

[21:52] 좋아요.

[21:53] MVP가 완성되었습니다.

[21:54] 백엔드와 프론트엔드 위치를 알려줬고

[21:57] 이미 테스트했다고 하면서 실행 방법을 알려줍니다.

[22:00] Python을 실행하고, 프론트엔드를 설치한 다음

[22:04] NPM run dev를 실행하면 됩니다.

[22:06] 그리고 간단한 테스트를 위한 호출도 해볼 수 있어요.

[22:09] 실제로 여기서 테스트해보고 어떻게 되는지 볼게요.

[22:12] 화면을 확장해보면

[22:15] 백엔드에 제대로 연결되고 있는 걸 볼 수 있습니다.

[22:19] 실행하면 원하던 JSON 형식의

[22:21] 결과를 받을 수 있어요.

[22:23] 훌륭하네요.

[22:24] 이제 브라우저에서 실제로 확인해볼 수 있습니다.

[22:28] localhost:8000/docs로 가시면 Swagger 인터페이스라는

[22:34] 화면이 나타납니다.

[22:36] 여기서 시각적 인터페이스를 통해

[22:39] 엔드포인트를 실제로 테스트할 수 있어요.

[22:41] 예를 들어, 여기 get episodes 엔드포인트가 있고 실행을 클릭하면

[22:45] 실제로 결과를 반환하는 걸 볼 수 있어요.

[22:47] 앞서 터미널에서 curl 명령으로 본 것과 같은 결과죠.

[22:50] 좋습니다.

[22:51] 완료됐네요.

[22:52] localhost에서도 열어보면 실제로

[22:57] 반환된 JSON 파일에 따라 모든 동영상들이

[23:02] 로드되어 있는 걸 볼 수 있습니다.

[23:05] 그리고 UI 와이어프레임을 보면 거의 일치하는 걸 볼 수 있어요, 맞죠?

[23:10] 여기에 '마스터리 유튜브 비디오 라이브러리, 고급 개발 기술 배우기'라는 섹션이 있습니다.

[23:15] 고급 개발 기술들을 말이죠.

[23:17] 그리고 이 메인 콘텐츠 영역이 있고, 보시는 것처럼

[23:21] 이렇게 보이는 겁니다.

[23:24] 그런데 이런 텍스트는 없네요.

[23:26] 중간에 텍스트가 없는 이유는 JSON 파일에 실제로 설명이 없기 때문입니다.

[23:31] 하지만 다른 모든 부분은 디자인과 일치합니다.

[23:33] 실제로 로딩 상태와 에러 상태를 테스트해볼 수 있어요

[23:36] 서버를 종료해서 말이죠.

[23:38] 서버를 종료하고 새로고침하면 보실 수 있는데요

[23:42] 그러면 화면에 '비디오 로드 실패' 메시지가 나타납니다.

[23:47] 비디오를 가져올 수 없다고 나오죠.

[23:48] 그래서 이런 와이어프레임이 실제로 꽤 유용한 거예요.

[23:51] 서버를 다시 한 번 시작해보겠습니다. 이번에는

[23:55] 서버가 실행 중인 상태에서 페이지를 새로고침하면

[23:59] 데이터를 가져올 수 있고, 잘 작동합니다.

[24:01] 여기서 깨달은 한 가지는 썸네일이 제대로 로드되지 않는다는 것입니다.

[24:05] 알겠습니다.

[24:05] 약간의 디버깅 후에 실제로

[24:08] 썸네일이 나타나지 않는 이유를 알아낼 수 있었고 이제 작동합니다.

[24:11] 이것으로 오늘의 튜토리얼이 끝납니다.

[24:12] 이것이 클로드 코드 내에서

[24:15] 서브에이전트의 개념을 설명하는 데

[24:17] 유용했기를 바랍니다. 서브에이전트는 정말 멋진 기능이라고 생각하지만

[24:20] 아직은 초기 단계이고, 어떻게 최적으로 활용할지는 지켜봐야 할 것 같습니다.

[24:24] 저도 이것들을 더 깊이 이해하려고 노력하고 있습니다.

[24:27] 그리고 패턴이 나타나면서 더 큰 프로젝트에서

[24:32] 이것을 어떻게 최적으로 활용할지 알게 될 것이라고 생각합니다.

[24:34] 미래에는 서브에이전트 간의 더 복잡한 협업을 어떻게 활용할지에 대해

[24:39] 더 깊이 다뤄보겠습니다.

[24:41] 정말로 이 튜토리얼을 즐겁게 보셨기를 바랍니다.

[24:43] 이 영상에 좋아요와 구독을 잊지 마시고, 알림 벨도 켜두는 것을

[24:47] 잊지 마세요. 그러면 새 콘텐츠가 올라올 때마다 가장 먼저 알 수 있습니다.

[24:52] 또한, 저처럼 클로드 코드를 사용하다가 사용량 제한에 자주 걸리시는 분들은

[24:56] 제가 만든 이 튜토리얼을 확인해보시기 바랍니다. 어떻게 클로드 코드를

[24:59] 다른 프로바이더와 모든 모델과 함께 사용할 수 있는지 보여드립니다.

[25:03] 즉, 클로드 코드를 훨씬 저렴한 비용으로 실행할 수 있다는 뜻입니다.

[25:06] 5시간 사용량 제한 블록 사이에서 말이죠.

[25:09] 이 영상은 녹화 시점에 3만 회 이상 조회되었으니

[25:12] 놓치지 마세요.