Claude Code 설정을 10배 향상시키는 방법

Morning Maker Show with Sandra and Dan 구독자 4,140명

요약

이 영상에서는 Taskmaster AI를 Cloud Code 프로젝트에 통합해 AI 기반 코딩 과정의 오류를 줄이고 복잡도를 관리하는 워크플로우를 소개합니다. PRD(제품 요구사항 문서) 작성부터 MCP.json 구성, PRD 파싱, 복잡도 분석, 서브 에이전트 병렬 실행, 단계별 실행 루프까지 4단계 과정을 통해 아이디어 단계에서 앱을 프로덕션까지 완성하는 방법을 자세히 설명합니다. 실행 중 발생한 JSON 오류를 해결하는 우회 방법과 트릭 없는 호스팅 서비스인 Savala를 활용해 배포 환경을 안정화하는 팁도 공유합니다. 마지막으로 Spamoose 터미널 스팸 스캐너 앱의 데모를 통해 Taskmaster AI가 실제 프로젝트에 어떻게 적용되는지 보여줍니다.

주요 키워드

Taskmaster AI PRD (Product Requirements Document) MCP.json Cloud Code 복잡도 분석 sub agents cursor Savala Spamoose AI agentic system

하이라이트

🔑 태스크 관리 시스템을 도입하면 AI 코드 오류를 획기적으로 줄일 수 있습니다.
🚀 Taskmaster AI를 Cloud Code에 통합하면 앱이 커져도 AI가 복잡도를 자동으로 관리합니다.
📌 PRD(제품 요구사항 문서)를 미리 작성해 AI가 명확한 지침으로 태스크를 생성하도록 합니다.
⚡️ MCP.json 구성, PRD 파싱, 복잡도 분석, 서브 에이전트 병렬 실행으로 이뤄진 4단계 워크플로우가 핵심입니다.
🌟 JSON 생성 오류가 발생했을 때는 Cursor를 활용한 우회 방법으로 문제를 해결했습니다.
🔥 Savala 호스팅을 이용해 트릭 없는 안정적인 배포 환경을 구축했습니다.
🎉 최종 데모로 Spamoose 터미널 스팸 스캐너 앱을 아이디어 단계에서 프로덕션까지 완성했습니다.

용어 설명

Taskmaster AI

AI 기반 태스크 관리 시스템으로 프로젝트 단계를 자동화하고 오류를 줄이는 솔루션입니다.

PRD

Product Requirements Document(제품 요구사항 문서)로, 기능·UI·대상 사용자 등을 명확히 정의합니다.

MCP.json

Taskmaster AI를 Cloud Code에 연결하기 위한 모듈형 채팅 플러그인 설정 파일입니다.

Cloud Code

코드베이스 내 AI 에이전트와 툴을 통합해 실행하는 플랫폼입니다.

cursor

터미널 기반 작업 실행 도구로, Taskmaster AI MCP 호출과 프롬프트 흐름 제어에 사용합니다.

sub agents

병렬로 작업을 수행해 복잡한 태스크를 분할 처리하는 하위 AI 에이전트입니다.

Savala

트릭 없는 애플리케이션 호스팅 서비스로, 사용량 기반 과금만 적용합니다.

Spamoose

터미널 스팸 스캐너 2.0 앱의 이름으로, 최종 데모에서 시연된 결과물입니다.

Complexity report

태스크 복잡도를 분석해 서브태스크 분할을 제안하는 보고서입니다.

AI 코딩 과정에서 발생하는 오류를 줄이기 위해 프로젝트에 Taskmaster AI 기반 태스크 관리 시스템을 도입하는 장점을 설명합니다.

[00:00] AI 코딩 오류를 줄이는 가장 좋은 방법으로 TaskMaster AI를 소개합니다. 이 도구는 프로젝트에 작업 관리 시스템을 설정하여 AI가 코딩하면서 발생하는 대부분의 오류를 제거하는 최고의 해킹 도구입니다.

[00:17] 대부분의 사람들이 이 비밀을 숨기고 완전한 프롬프트와 워크플로우를 공유하지 않지만, 오늘 모든 것을 공유하겠다고 약속합니다. 설명란에서 모든 프롬프트와 상세한 지침을 확인할 수 있습니다.

PRD 파일 생성, Taskmaster MCP 설정, PRD 파싱, 빌드 루프 실행까지 4단계 핵심 프로세스를 간략히 소개합니다.

[00:43] TaskMaster AI와 Claude Code로 제작한 앱의 데모를 보여줍니다. 완성된 앱의 어바웃 페이지와 기능을 확인하며, HTML 이메일을 넣어 분석하는 기능을 시연합니다.

[01:15] 설정 과정을 4단계로 설명합니다. 1단계는 TaskMaster 초기화를 위한 PRD 파일 생성, 2단계는 Claude Code에서 TaskMaster MCP 설정, 3단계는 PRD 파싱, 4단계는 빌드 루프를 통한 실제 개발 과정입니다.

Cloud Code 프로젝트에 Taskmaster AI를 연결하기 위해 Taskmasterconfig.json 파일을 생성하고 구성하는 방법을 안내합니다.

[01:43] 첫 번째 단계인 TaskMasterConfig.json 파일 생성과 설정을 진행합니다. 비용 문제에 대해 설명하며, 모든 요청이 Claude Code 구독을 통해 처리되어 실질적으로 무료로 사용할 수 있다고 안내합니다.

Taskmaster AI 설치 명령어와 모델 옵션(Sonet/Opus) 설정 방법을 설명하며, 모든 요청이 Cloud Code 구독을 통해 처리되어 사실상 무료로 사용할 수 있음을 안내합니다.

[02:09] 터미널에서 TaskMaster AI를 설치하고 모델을 Sonet 또는 Opus로 설정하는 과정을 안내합니다. 그 다음 Claude Code 스팸 체커 애플리케이션 예제를 통해 PRD 파일 생성 과정을 설명합니다.

Claw Code 스팸 체커 앱을 예시로 10~15분 동안 기능·UI·대상 사용자·라이브러리 등을 정리해 PRD 파일을 작성하는 과정을 설명합니다.

[02:38] PRD 파일 생성을 위해 10-15분 정도 시간을 들여 앱에 대해 깊이 생각하고, 사용자 인터페이스 기술과 기능들을 상세히 작성해야 한다고 조언합니다.

[02:59] AI 코딩을 시작할 때 중요한 준비사항들을 설명합니다. 대상 사용자를 정의하고, 코드베이스를 직접 부트스트랩해야 하는 이유를 강조합니다. 선호하는 CLI나 보일러플레이트를 사용해 기본 설정을 먼저 완료해야 한다고 조언합니다.

[03:22] 프레임워크 설정이나 라이브러리 설치로 시간과 토큰을 낭비하지 말고, 사용할 오픈소스 라이브러리들을 미리 조사해두라고 권합니다. 사용자 인터페이스 작동 방식과 레이아웃 세부사항, 고급 기능들까지 상세히 기획해야 한다고 설명합니다.

Taskmaster AI의 PRD 프롬프트를 실행해 구조화된 마크다운 문서와 체크리스트 형태의 산출물을 얻는 과정을 보여줍니다.

[03:57] PRD 프롬프트의 결과물은 구조화된 마크다운 형식의 체크리스트가 됩니다. 이 문서를 TaskMaster AI가 의존성 생성, 복잡도 분석, 하위 작업 생성 등에 사용한다고 설명합니다. console.anthropic.com에서 실행하지만 다른 플랫폼에서도 가능하다고 언급합니다.

Cloud Code에 Taskmaster AI MCP를 추가해 MCP.json 파일을 생성하거나 직접 구성 파일을 작성하는 방법을 설명합니다.

[04:36] PRD 실행 결과로 얻는 마크다운에는 설명, 페르소나, 사용자 인터페이스 컴포넌트들이 포함됩니다. 사용자 스토리들은 성능과 접근성 관련 요구사항들과 함께 세분화되어 나타납니다. 프로덕션용이 아닌 개인 도구라면 필요한 부분만 선택해서 사용하라고 조언합니다.

[05:16] scripts 폴더에 prd.txt 파일을 만들어 PRD 프롬프트의 전체 출력을 저장합니다. Claude Code에서 TaskMaster AI를 설정하기 위해 MCP를 추가하는 과정을 설명합니다. MCP.json 파일이 생성되고, Claude Code가 권한을 요청하면 승인하여 새 프로젝트를 초기화합니다.

scripts/prd.txt에 PRD를 저장하고 Cloud Code에 파싱 명령을 내려 초기 태스크를 자동으로 생성하는 과정을 실습합니다.

[06:01] PRD.txt 파일을 파싱하고 초기 작업을 설정하도록 요청했으며, TaskMaster AI 사용 승인을 묻는 과정을 설명합니다.

[06:10] 작업 실행과 읽기에 대한 반복적인 승인 요청을 피하기 위해 TaskMaster AI에 대해 다시 묻지 말라고 설정하겠다고 합니다.

[06:19] TaskMaster AI가 AI 에이전트 위의 레이어임을 설명하며, 클라우드 MD 파일 생성과 프로젝트 규칙 설정을 추천합니다.

생성된 JSON에서 발생한 오류를 해결하는 데 하루를 투자한 경험과 트릭 없는 호스팅 서비스인 Savala를 활용해 배포 환경을 안정화하는 팁을 공유합니다.

[06:32] TaskMaster AI의 JSON 생성에 문제가 있어 많은 오류가 발생했으며, 예상보다 복잡해서 하루 종일 해결책을 찾았다고 설명합니다.

[06:49] 속임수 없는 앱 호스팅 회사인 Savala를 소개하며, 컴퓨트 시간이 아닌 사용량만 청구하고 Python, PHP, Next.js 등 다양한 기술을 호스팅할 수 있다고 설명합니다.

[07:20] 커서에서 작업을 생성하고 클라우드 코드로 이동하는 해결책을 제시하며, 간단한 커서 프롬프트를 사용해 PRD를 파싱하고 초기 작업을 설정하도록 합니다.

Cursor를 통해 Taskmaster MCP를 직접 호출해 PRD 파싱과 태스크 생성을 우회하는 프롬프트 워크플로우를 설명합니다.

[07:44] 시청자들이 커서에서 taskmaster를 설정하는 방법을 모를 수 있다고 언급하며, MCP로 설정하는 방법에 대한 자세한 가이드 비디오를 추천합니다.

Cloud Code에서 복잡도 분석을 요청해 태스크별 난이도를 보고받고, 병렬 실행 가능한 sub agents로 서브태스크를 자동 분할하는 방법을 보여줍니다.

[08:10] 클라우드 코드로 전환하여 작업의 복잡성을 분석하고 어떤 작업들이 더 세분화되어야 하는지 파악하도록 요청합니다.

[08:30] 복잡성 보고서가 생성되어 하위 작업으로 세분화할 작업들을 추천하며, 하위 작업 생성이 애플리케이션의 오류율을 크게 감소시킨다고 설명합니다.

[08:42] TaskMaster AI가 복잡한 작업들을 서브 에이전트를 통해 병렬로 처리하도록 설정하고, 실제로 네 개의 서브 에이전트로 작업을 분해하는 과정을 보여준다.

[09:05] 서브 에이전트들이 TaskMaster MCP를 호출하여 작업을 분해하고, 일부는 이미 완료되어 결과를 정리하고 요약하는 단계를 설명한다.

[09:28] 작업 분해가 성공적으로 완료되었으며, 작업의 복잡성과 종속성이 파악되었음을 확인하고, 실제로 하위 작업들이 포함되어 있음을 검증한다.

현재 우선순위와 의존성을 고려해 실행할 다음 태스크를 AI에게 묻고, 단계별로 구현한 뒤 커밋하는 프롬프트 루프 사용법을 설명합니다.

[09:42] 프롬프트 루프에 들어가서 작업 표시를 요청하고, 종속성과 우선순위를 고려하여 다음 작업을 선택하는 과정을 시연한다.

[09:55] 핵심 데이터 타입과 스키마 구현 작업을 시작하고, 2번 작업과 모든 하위 작업들을 구현하여 성공적으로 완료한다.

[10:18] 애플리케이션을 실행하여 정상 작동을 확인하고, 한 번에 하나씩 작업해서 앱을 빌드하는 방법을 설명하며 커밋의 중요성을 강조한다.

최종 결과물인 Spamoose 터미널 스팸 스캐너 앱을 실행해 작동을 확인하고, ’90s 느낌의 UI와 복사본 텍스트를 시연합니다.

[10:44] 실제로 완성된 앱인 Spamoose 터미널 스팸 스캐너 2.0을 데모로 소개하며, 90년대 분위기의 완전한 앱을 아이디어부터 프로덕션까지 성공적으로 빌드했음을 보여준다.

[11:25] 완성된 앱의 사용법을 설명하며, 왼쪽 이메일 입력란에서 이메일 분석 버튼을 누르면 API를 호출하여 전체 보고서를 받을 수 있음을 시연한다.

[11:37] API 호출 결과로 전체 보고서, 세부사항, 이메일 개선 팁을 받게 됩니다. 더 실질적인 이메일로 테스트해보겠습니다.

이메일 입력, 분석·프리뷰 패널 크기 조절, 모바일·태블릿 뷰 전환, 히스토리 탭 등 사용자 인터페이스 주요 기능을 소개합니다.

[11:48] 새 이메일 기능을 통해 레이아웃을 사용자가 정의할 수 있으며, 드래그를 통해 분석 공간을 조정할 수 있습니다.

[12:01] 제목 줄에 내용을 입력하고 텍스트 박스 크기를 조정한 후, 본격적인 HTML 이메일을 넣고 분석을 요청합니다.

[12:13] 분석 결과 스팸 위험도가 매우 높게 나왔으며, 많은 개선 팁을 받았습니다. HTML 이메일은 본문만으로는 내용 판단이 어렵습니다.

[12:25] 미리보기 패널이 매우 유용하며, 태블릿이나 모바일 뷰로 전환하여 받은편지함에서 어떻게 보일지 확인할 수 있습니다.

[12:38] 확대/축소 기능과 슬라이더를 제공하며, AI가 미리보기 기능에 과몰입했지만 유용한 기능입니다.

[12:45] 보고서에서 금액 표시, 할인, 긴 URL, 과도한 대문자, 의심스러운 포맷이 감지되어 개선점을 제시합니다.

[12:57] AI 탐지 기능 추가가 확실한 개선점이지만, 지금은 사용자 인터페이스의 나머지 부분을 소개합니다.

[13:06] 히스토리 탭은 로컬 스토리지에 저장되어 이전 테스트한 이메일들과 점수, 팁들을 쉽게 확인할 수 있습니다.

[13:21] 오른쪽에는 전체 화면 토글과 레이아웃 리셋 토글이 있으며, 패널 크기를 조정하여 작업에 따라 공간을 최적화할 수 있습니다.

Taskmaster AI 기반 워크플로우를 통해 아이디어 단계에서 프로덕션 앱을 완성한 과정을 정리하고, 좋아요·댓글·구독을 요청하며 영상을 마무리합니다.

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

[00:00] AI 코딩 오류를 줄이는 가장 좋은 방법은

[00:02] 프로젝트에 작업 관리 시스템을 설정하는 것입니다.

[00:04] 저는 TaskMaster AI를 사용해서

[00:06] 여러 앱을 프로덕션에 배포했습니다.

[00:08] 이것은 AI가 코딩하면서 발생하는

[00:10] 대부분의 오류를 제거하는 절대적인 최고의 해킹입니다.

[00:13] 가장 좋은 점은 앱이 성장함에 따라

[00:15] AI가 복잡성을 관리하는 데 도움이 된다는 것입니다.

[00:17] 너무 좋아서 대부분의 사람들이

[00:19] 이 비밀을 아주 잘 숨겨둡니다.

[00:21] 그들은 완전한 프롬프트와 워크플로우를

[00:23] 절대 공유하지 않거나 유료 벽 뒤에 숨깁니다.

[00:25] 오늘 저는 모든 것을 여러분과 공유하겠습니다.

[00:28] 그러니 설명란을 확인해서

[00:29] 모든 프롬프트와 상세한 지침을 받아보세요.

[00:31] 저는 TaskMaster를 Claude Code와 함께

[00:33] 설정했을 뿐만 아니라 전체 앱을

[00:36] 코딩해서 프로덕션에 배포했습니다.

[00:38] 최종 결과에 대한 제 반응을 보시죠.

[00:40] 와! 이게 뭐지?

[00:43] 이게 뭐야? 정말 멋있네요.

[00:46] 어바웃 페이지를 봐보세요!

[00:49] 오 맙소사! 카피도 완전히 훌륭하네요.

[00:53] 이것 좀 보세요. 너무 멋있어요.

[00:56] 멋져 보이니까 그냥 사용하고 싶네요.

[00:58] 이제 제목란에 뭔가 입력해보겠습니다.

[01:01] 여기 텍스트 박스 크기를 조정하고

[01:03] 완전한 HTML 이메일을 넣어보겠습니다.

[01:06] 그리고 분석해달라고 요청하면... 짠!

[01:09] 좋은 결과가 나왔습니다.

[01:12] 비디오 끝에 더 보여드리겠지만

[01:14] 지금은 설정 방법을 알려드리겠습니다.

[01:15] 몇 단계로 진행하겠습니다.

[01:18] 1단계, TaskMaster 초기화를 위한

[01:20] PRD 파일 생성. 2단계, Claude Code에서

[01:23] TaskMaster MCP 설정. 3단계,

[01:25] PRD 파싱. 그리고 4단계,

[01:28] 마지막으로 TaskMaster AI를 사용한

[01:31] 빌드 루프를 보여드려서

[01:33] 여러분도 무엇이든 만들 수 있게 하겠습니다.

[01:34] 따라하실 수 있으니

[01:36] 함께 설정해보죠.

[01:38] 이것이 Claude Code에서 TaskMaster AI를

[01:40] 설정하는 방법입니다.

[01:43] 가장 먼저 해야 할 일은

[01:45] TaskMasterConfig.json 파일을 생성하는 것입니다.

[01:47] 이 파일에 다음을 붙여넣으세요.

[01:49] 모든 설정을 설명란에 링크해두었으니

[01:51] 확인해보세요.

[01:52] 잠깐, 이게 얼마나 비용이 들까요?

[01:54] 이렇게 하면 TaskMaster AI에서

[01:57] 보내는 모든 요청이 여러분의

[01:59] Claude Code 구독을 통해 처리됩니다.

[02:02] 실질적으로 무료로 사용할 수 있습니다.

[02:04] 걱정하지 마세요.

[02:06] 이 설정을 입력한 후 터미널을 열어주세요.

[02:08] 가장 먼저 해야 할 일은

[02:09] 아직 하지 않았다면 TaskMaster AI를 설치하는 것입니다.

[02:12] 두 번째로 해야 할 일은

[02:14] 이 명령을 실행하는 것입니다. 모델을

[02:16] Sonet 또는 Opus 중 선택하고

[02:20] 이 -cloud-code 옵션을 전달하세요.

[02:24] 그러면 성공적으로 설정되었다고

[02:25] 나올 것입니다. 이제 작업을 생성해야 합니다.

[02:28] 이 목적을 위해 저는

[02:30] Claude Code 스팸 체커 애플리케이션이라고

[02:33] 부르는 것을 만들겠습니다.

[02:36] 이 PRD 파일을 생성하기 위해

[02:38] 두 개의 프롬프트를 사용하겠습니다.

[02:40] 10-15분 정도 시간을 들여

[02:42] 여러분이 만들고 있는 것에 대해

[02:44] 깊이 생각하고 사용자 인터페이스 기술과

[02:49] 머리에 떠오르는 모든 기능을

[02:51] 적어보세요. 그것을 설명해보세요.

[02:54] 제가 작성한 것은 앱에 대한

[02:56] 설명, 기능, 대상에 대한 내용입니다.

[02:59] 대상 사용자에 대해 언급했고, 이미

[03:02] 코드베이스가 있다고 적었습니다. AI로

[03:05] 코딩을 시작할 때 항상 말하는 것이지만,

[03:09] 코드베이스는 직접 부트스트랩하세요.

[03:11] 선호하는 CLI나 보일러플레이트를

[03:14] 사용하거나 PJI를 사용해도 됩니다.

[03:17] 뭘 사용하든 기능 개발을 시작하기 전에

[03:19] 먼저 설정하세요. 프레임워크 설정이나

[03:22] 라이브러리 설치 같은 것들로

[03:25] 시간과 토큰을 낭비하고 있을 뿐이고,

[03:27] 어차피 더 나쁜 기반이

[03:28] 만들어질 겁니다. 그리고

[03:31] 사용하고 싶은 라이브러리들도

[03:33] 몇 가지 언급했습니다. 이 부분은

[03:36] 여러분과 다를 수 있으니

[03:37] 여러분이 만들고 있는 앱에 사용할 수 있는

[03:40] 오픈소스 라이브러리들을

[03:42] 조금 구글링해보는 것이 좋겠습니다.

[03:44] 그리고 사용자 인터페이스가 어떻게

[03:46] 작동해야 하는지 자세히 설명했습니다.

[03:50] 레이아웃이 어떻게 되어야 하는지 같은

[03:52] 세부사항까지 다뤘습니다. 그리고

[03:54] 고급 기능들도 강조했습니다.

[03:57] 결과물은 구조화된 마크다운 형식으로

[04:01] 해야 할 일들의 체크리스트가

[04:04] 포함되어 있습니다. 이 전체 내용을 가져와서

[04:07] 실제 PRD 프롬프트로

[04:10] 넘어가겠습니다. 이 문서는

[04:12] TaskMaster AI가 모든 의존성을 생성하고

[04:15] 복잡도를 분석하고 하위 작업을 만들고

[04:18] 기타 등등을 하는 데 사용할 문서입니다.

[04:20] 참고로 저는 console.anthropic.com에서

[04:23] 실행하고 있습니다만,

[04:24] cloud.ai나 심지어 ChatGPT에서도

[04:27] 실행할 수 있습니다. 상관없어요.

[04:30] 저는 그냥 여기 콘솔이 더 편해서요.

[04:32] 이걸 실행한 후에 또 다른 마크다운을

[04:36] 얻습니다. 먼저 설명이 있고,

[04:38] 몇 가지 페르소나가 있습니다.

[04:39] 그리고 사용자 인터페이스 컴포넌트들이

[04:42] 있습니다. 이 설명 다음에

[04:44] 실제 사용자 스토리들이 나옵니다.

[04:47] 보시다시피 모든 사용자 스토리들이

[04:49] 많은 요구사항들과 함께 세분화되어

[04:52] 있습니다. 성능 관련 사항들도 있고,

[04:54] 접근성 관련 사항들도 있습니다.

[04:56] 이런 것들을 원하지 않는다면

[04:59] PRD를 검토해서

[05:01] 원하는 것들만 포함시키는 것을

[05:04] 권합니다. 왜냐하면 이것은

[05:05] 프로덕션 애플리케이션에 필요한

[05:07] 모든 것을 포함하기 때문입니다.

[05:09] 하지만 여러분이 만들려는 것이

[05:11] 개인적으로 사용할 도구이거나

[05:13] 성능에 대해 그렇게 신경쓰지 않을 수도

[05:15] 있습니다. 예를 들어

[05:16] scripts 밑에 prd.txt라는

[05:18] 새 텍스트 파일을 만들고 PRD 프롬프트의

[05:22] 전체 출력을 그 안에 붙여넣겠습니다.

[05:25] Claude Code에서 TaskMaster AI를 설정하려면

[05:28] 먼저 TaskMaster AI MCP를 추가해야

[05:30] 합니다. 이렇게 하면 다음과 같은

[05:34] MCP.json이 생성됩니다. 또는

[05:37] 명령어 대신 MCP.json을 직접 만들고

[05:39] 이 내용을 붙여넣어도 됩니다.

[05:40] 이제 다시 Claude로 돌아가서

[05:42] Claude Code가 이 MCP 서버를 사용할

[05:45] 권한을 요청하고 있고

[05:46] 모든 도구 호출에는 승인이 필요하다고

[05:49] 강조하고 있습니다. 승인 버튼을

[05:52] 누르겠습니다. 이제 Claude Code에

[05:53] 다음과 같이 프롬프트를 주겠습니다.

[05:55] TaskMaster AI로 새 프로젝트를

[05:56] 초기화했습니다. scripts에

[05:58] PRD가 있습니다.

[06:01] PRD.txt에 있습니다. 이것을 파싱하고 초기 작업을 설정할 수 있나요?

[06:03] 그러면 TaskMaster AI 사용 승인을 요청할 것입니다.

[06:06] 저는 예라고 답하겠습니다. 이 경우에는

[06:08] 항상 승인해야 하는 것이 싫어서

[06:10] 이런 작업들을 실행하고 읽는 것에 대해

[06:12] 매번 승인해야 하는 것이 싫습니다.

[06:14] 그래서 예라고 답하고 TaskMaster AI에 대해

[06:16] 다시 묻지 말라고 할 겁니다.

[06:19] 기억하세요, TaskMaster AI는 그냥

[06:20] AI 에이전트 위의 레이어입니다.

[06:22] 저는 확실히 클라우드 MD 파일을

[06:25] 만들고 이 프로젝트를 위한

[06:26] 규칙을 설정하는 것을 추천합니다.

[06:29] 그리고 우리는 준비됐습니다. 만약

[06:32] 실제로 작동한다면 그렇게 말하겠죠.

[06:34] 하지만 현재 TaskMaster AI는

[06:37] 생성된 JSON에 문제가 있는 것 같습니다.

[06:39] 더 정확히 말하면, 많은 오류를 던졌습니다.

[06:41] 예상보다 훨씬 복잡해졌고

[06:43] 결국 하루 종일 해결책을

[06:45] 찾는 데 시간을 보냈습니다.

[06:46] 잠시 후에 여러분과 공유하겠습니다.

[06:49] 속는 걸 싫어하고 이것이 바로 제가

[06:51] Savala를 사용해서 앱을 배포하는 이유입니다.

[06:54] 이것은 몇 안 되는 속임수 없는

[06:56] 앱 호스팅 회사 중 하나입니다.

[06:57] 컴퓨트 시간이나 그런 말도 안 되는

[06:59] 것들로 요금을 청구하지 않습니다.

[07:01] 사용한 만큼만 요금을 청구하고

[07:03] 무엇이든 배포할 수 있습니다.

[07:05] 스토리지, 관리형 데이터베이스,

[07:07] 그리고 생각할 수 있는 모든 것을 위한

[07:09] 애플리케이션 호스팅을 제공합니다. Python, PHP, Next.js, Nuxt, Laravel.

[07:13] 무엇을 던져도 호스팅할 수 있습니다.

[07:15] 그리고 가장 좋은 부분은 설명란의 링크를 사용하면

[07:18] $50의 무료 크레딧을 받을 수 있다는 것입니다.

[07:20] 자, 이제 우리의 해결책으로 돌아가죠.

[07:22] 커서에서 작업을 생성하고

[07:24] 클라우드 코드로 이동해서

[07:26] 나중에 작업을 계속합니다.

[07:27] 이제 간단한 커서 프롬프트를 하겠습니다.

[07:29] TaskMaster AI로 새 프로젝트를 초기화했습니다.

[07:31] scripts/prd.txt에 PRD가 있습니다.

[07:34] 이것을 파싱하고 초기 작업을 설정할 수 있나요?

[07:37] 이제 커서가 직접 taskmaster mcp를 호출할 것입니다.

[07:39] 희망적으로 작업을 생성하고

[07:41] 다시 클라우드 코드로 돌아갈 수 있습니다.

[07:44] 이제 여러분이 이 비디오를 보는

[07:46] 같은 이유로 커서에서 taskmaster를

[07:49] 설정하는 방법을 모를 수도 있다는

[07:50] 것을 깨달았습니다.

[07:52] 제가 말하고 싶은 것은

[07:55] 커서에서 taskmaster를 MCP로

[07:57] 설정해야 한다는 것입니다.

[08:00] 제 화면에서 어떻게 보이는지

[08:02] 확인할 수 있습니다.

[08:04] 하지만 단계별 가이드를 원한다면

[08:06] 여기 비디오를 확인해 주세요.

[08:08] 더 자세히 설명합니다.

[08:10] 이제 클라우드 코드로 전환해서

[08:11] 앞으로 거기서 구현하겠습니다.

[08:14] 커맨드 이스케이프를 누르고

[08:16] 클라우드 코드에 프롬프트를 주겠습니다.

[08:18] 우리 작업의 복잡성을 분석해서

[08:20] 어떤 것들이 더 세분화되어야 하는지

[08:22] 이해하도록 도와줄 수 있나요?

[08:24] 클라우드가 TaskMaster AI에서

[08:26] 프로젝트 복잡성 분석을 호출합니다.

[08:28] 그리고 승인하겠습니다.

[08:30] 여기 있습니다. 복잡성 보고서를

[08:32] 생성하고 몇 가지 하위 작업으로

[08:34] 세분화할 작업들을 추천합니다.

[08:37] 제 경험상 하위 작업을 생성하면

[08:39] 애플리케이션의 오류율이 크게 감소합니다.

[08:42] 단계별로 하라고 말하곤 했지만

[08:44] Claude Code에는 서브 에이전트가 있어야 합니다

[08:46] 그래서 서브 에이전트를 사용하라고 말할 거예요

[08:48] 이 작업들을 병렬로 분해할 수 있기를 바랍니다

[08:50] 이제 프롬프트를 입력하겠습니다

[08:52] 모든 복잡한 작업들을 분해하는 것을 도와주세요

[08:53] 서브 에이전트를 사용해서 작업을 병렬로 수행하도록 해주세요

[08:55] 많은 일이 진행되고 있지만

[08:57] 실제로 네 개의 별도 서브 에이전트로 분해된 것을 볼 수 있어요

[08:59] 각각이 이제 TaskMaster MCP를 호출해서

[09:02] 작업을 분해하는데 도움을 받고 있습니다

[09:05] 이건 정말 멋지네요

[09:08] 보시다시피 일부 서브 에이전트들은

[09:10] 이미 작업을 완료했어요

[09:12] 이제 이 결과를 정리해서

[09:14] 요약을 해줄 것 같아요

[09:15] 네, 바로 그거예요

[09:18] 성공적으로 작업을 분해했습니다

[09:20] 이제 작업과 복잡성을 파악했고

[09:23] 작업들 간의 종속성도 파악했습니다

[09:25] 거짓말을 했는지 확인해보고 싶었는데

[09:28] 3번 작업이 실제로

[09:29] 여러 하위 작업들을 포함하고 있네요

[09:31] 거짓말을 하지 않았어요

[09:33] 실제로 작업을 수행했습니다

[09:35] 정말 멋지네요

[09:37] 이제 프롬프트 루프에 들어가겠습니다

[09:39] 이는 다른 AI 에이전트 시스템에서

[09:41] TaskMaster AI를 사용하는 것과 유사합니다

[09:42] 작업을 표시하라고 프롬프트부터 시작하겠습니다

[09:44] 그 다음에 '어떤 작업을 해야 하나요?'

[09:46] 종속성과 우선순위를 고려해 주세요

[09:49] 다음 작업으로 이런 것을 제안해줬어요

[09:51] 핵심 데이터 타입과 스키마를 구현하기

[09:53] 꽤 좋아 보입니다

[09:55] 이 작업이 무엇인지 꽤 잘 이해하고 있는 것 같아요

[09:57] 시작할 준비가 되었는지 묻고 있어요

[09:59] 저는 확실히 준비되어 있습니다

[10:02] 이제 프롬프트할 내용은

[10:04] 2번 작업과 모든 하위 작업들을 구현하는 것입니다

[10:06] 그리고 바로 완료되었어요

[10:09] 작업이 완료되었습니다

[10:10] 결과에 만족하고 있어요

[10:13] 이제 이 애플리케이션을 실행해보겠습니다

[10:15] 모든 것이 잘 작동하는 것 같아요

[10:18] 브라우저에서 열어보면

[10:20] 모든 것이 정상적으로 열립니다

[10:22] 전혀 문제가 없어요

[10:24] 그리고 이제 완료입니다

[10:26] 이제 계속해서 다음 작업을 선택할 수 있어요

[10:28] 한 번에 하나씩 작업해서 앱을 빌드하는 방법을 알게 되었습니다

[10:31] 각 작업 후에 변경사항을 커밋하는 것을 기억하세요

[10:33] Cursor에서처럼 체크포인트가 없기 때문이에요

[10:35] 실제로 이것으로 뭔가를 빌드했을까요?

[10:38] 네, 그렇습니다

[10:40] 아이디어부터 프로덕션까지

[10:41] 완전한 앱을 빌드하는데 성공했어요

[10:44] 여기 전체 데모가 있습니다

[10:46] 이것은 완전히 새로운 Spamoose입니다

[10:49] 터미널 스팸 스캐너 2.0

[10:51] 아, 이것이 제 얼굴에 미소를 짓게 하네요

[10:53] 보시다시피 이것은 완전히 과거로의 폭발입니다

[10:56] 90년대 분위기가 나요

[10:59] 카피도 정말 정확해요

[11:01] 와우, 뭐지?

[11:03] 너무 멋지네요

[11:07] About 페이지를 보세요

[11:13] 오 마이 갓

[11:16] 이것 좀 보세요

[11:20] 정말 멋져요

[11:22] 멋져 보이기 때문에 이것을 사용하고 싶어요

[11:25] 왼쪽에서 이메일 입력란을 볼 수 있어요

[11:27] 이메일 분석을 누르면 됩니다

[11:29] API를 호출할 거예요

[11:33] 많은 것들을 받게 될 거예요

[11:35] 전체 보고서를 받을 거예요

[11:37] 많은 정보를 돌려받게 됩니다. 전체 보고서를 받고,

[11:39] 세부사항과 이메일 개선 팁까지

[11:41] 받을 수 있습니다. 여기에

[11:43] 더 실질적인 이메일을 넣고

[11:46] 분석해보겠습니다. 새 이메일을

[11:48] 눌러보겠습니다. 보시다시피

[11:50] 레이아웃은 사용자가 정의할 수 있습니다.

[11:52] 이걸 왼쪽으로 드래그해서

[11:54] 크기를 조정하면 분석을 위한

[11:57] 공간을 더 확보할 수 있습니다.

[11:58] 꽤 멋져요. 나쁘지 않네요.

[12:01] 이제 제목 줄에 뭔가를 넣고

[12:03] 텍스트 박스 크기를 조정해서

[12:08] 본격적인 HTML 이메일을 넣고

[12:11] 분석을 요청해보겠습니다. 짠!

[12:13] 스팸 위험도가 매우 높습니다.

[12:15] 이번엔 얼마나 많은 개선 팁을

[12:17] 받았는지 보세요. 왼쪽에서 보시듯

[12:19] 이건 실제로 HTML 이메일입니다.

[12:21] 그래서 이메일 본문만으로는

[12:23] 내용을 판단하기가 꽤 어렵습니다.

[12:25] 바로 이때 미리보기 패널이

[12:27] 정말 유용합니다. 이것 좀 보세요.

[12:29] 태블릿이나 모바일 뷰로 전환해서

[12:32] 이메일이 사람들의 받은편지함에

[12:33] 도착했을 때 대략 어떻게 보일지

[12:36] 확인할 수 있습니다. 확대와 축소도

[12:38] 가능하고, 슬라이더도 있습니다.

[12:40] AI가 이 미리보기 기능에

[12:43] 완전히 과몰입했네요. 하지만

[12:45] 여기 보고서를 보면, 금액 표시,

[12:48] 할인, 긴 URL, 과도한 대문자,

[12:51] 의심스러운 포맷이 감지되었습니다.

[12:53] 더 나은 이메일을 만들기 위해

[12:55] 개선할 수 있는 것들이 많네요.

[12:57] 여기서 확실한 개선점은

[12:59] AI 탐지 기능을 추가하는 것인데,

[13:00] 그건 다른 영상 주제로 남겨두고,

[13:02] 지금은 사용자 인터페이스의

[13:04] 나머지 부분을 보여드리겠습니다.

[13:06] 여기 히스토리 탭이 있습니다.

[13:08] 이건 로컬 스토리지에 저장되어

[13:10] 이전에 테스트한 이메일들을

[13:12] 쉽게 왔다 갔다 할 수 있고

[13:14] 이전에 받은 점수를 확인할 수

[13:15] 있습니다. 오른쪽에서 받은 팁들도

[13:18] 볼 수 있고요. 분석과 세부사항,

[13:21] 팁들은 이미 봤습니다. 오른쪽에

[13:23] 토글 몇 개도 있는데, 하나는

[13:24] 분석과 미리보기를 전체 화면으로

[13:26] 만드는 것이고, 다른 하나는

[13:28] 레이아웃을 초기값으로 리셋하는

[13:30] 것입니다. 보시다시피 언제든지

[13:33] 패널 크기를 조정할 수 있어서

[13:34] 이메일 작성 공간을 더 확보하거나

[13:36] 오른쪽 미리보기와 분석 공간을

[13:38] 더 확보할 수 있습니다.

[13:39] 현재 수행 중인 작업에 따라서요.

[13:42] 여기 Claude Code를 사용해서

[13:44] 단순한 아이디어 하나에서 시작해

[13:47] 완전한 애플리케이션을 만들었습니다.

[13:49] 이제 전 세계 모든 사람이

[13:52] spamuse.com에 가서 앱을 열고

[13:54] 완전한 기능을 즐길 수 있습니다.

[13:56] 이 영상이 마음에 드셨다면

[13:58] 좋아요, 댓글, 구독 부탁드립니다.

[14:00] 지금까지 제가 준비한 모든 내용입니다.

[14:02] 시청해주셔서 감사합니다.