커서를 99% 더 효과적으로 만드는 방법 (Task Master가 2025년 주목할 만한 선택)

Parker Rex 구독자 5,620명

요약

영상에서는 스피커 Parker Rex가 자신의 창업과 기술 경험을 바탕으로 AI와 자동화 도구를 활용해 작업 효율을 극대화하는 방법을 소개합니다. 특히 Taskmaster라는 도구를 중심으로 제품 관리, 연락처 폼 구현, 데이터 매핑, 그리고 PRD(제품 요구사항 문서) 작성 과정을 상세하게 시연합니다. 음성 입력과 코드 예시를 통해 복잡한 업무들을 체계적으로 분해하고 자동화하는 노하우를 공유하며, 실제 개발 과정에서 발생하는 문제와 그 해결 방안에 대해 실무적인 팁을 제공합니다.

주요 키워드

Taskmaster PRD Google Sheets AI 활용 코딩 UI/UX 데이터 매핑 자동화 음성 입력 유효성 검사

하이라이트

🔑 스피커의 창업 경험과 기술 배경을 바탕으로 한 AI 및 자동화 도구 활용 소개.
🚀 Taskmaster 도구를 이용해 개발 및 제품 관리 과정을 자동화하는 방법을 시연함.
📌 연락처 폼의 데이터 정의, Google Sheets와의 연결, UI 구성 요소에 대한 구체적 설명 제공.
🌟 음성 입력을 통한 PRD 작성 및 작업 분해 과정이 실제 사례와 함께 공유됨.
⚡️ 코드 예시, Zod를 이용한 유효성 검사, 그리고 UI/UX 개선 팁 등 실무에서 바로 적용 가능한 전략 강조.

용어 설명

Taskmaster

작업 관리와 제품 개발 자동화를 지원하는 도구. 15분 내에 PRD 작성 및 작업 분해를 도와주는 핵심 도구임.

PRD

제품 요구사항 문서(Product Requirements Document). 기능 및 디자인 요구사항을 정리해 개발 전반에 걸쳐 활용됨.

MCP

Taskmaster 내부에서 사용되는 구성 요소들로, 도구가 특정 작업을 처리하기 위한 기본 로직들을 포함함.

Zod

TypeScript 기반의 스키마 유효성 검사 라이브러리로, 입력값 검증 및 데이터 구조의 정확성을 보장함.

G sheet

Google 스프레드시트의 줄임말로, 간단한 데이터베이스 역할을 하며 폼 데이터 저장에 활용됨.

Parker Rex의 창업 경험과 기술적 배경을 소개합니다. AI와 자동화 도구 필요성을 언급하며 영상의 전반적 동기를 설명합니다.

[00:00] Parker Rex가 자신을 소개하며, 2300만 달러에 매각된 스타트업의 기술 책임자였던 경험과 음악 관련 스타트업 실패 후 프로그래밍에 집중하게 된 배경을 설명합니다.

[00:10] ChatGPT 출시 이후 AI를 마케팅, 코딩, 생산성 향상에 활용하는 방법을 학습하기로 결정했다고 설명합니다.

[00:30] Taskmaster라는 새로운 도구를 소개하며, 이 도구가 작업 방식을 혁신적으로 변화시킬 수 있다고 강조합니다.

Taskmaster의 주요 기능과 역할에 대해 개괄합니다. 15분 데모를 통해 도구의 핵심 원리와 사용법을 미리 안내합니다.

[01:21] 5년간의 PM, UX 디자이너, 프로그래머 경험을 바탕으로 Taskmaster가 개발자를 위한 제품 관리자 역할을 한다고 설명합니다.

연락처 폼에 필요한 필드를 정의하고 Google Sheets와의 데이터 매핑 과정을 시연합니다. UI 요소와 코드 예시를 통해 실제 구현 과정을 보여줍니다.

[02:10] 고급 디자인 스튜디오를 위한 실제 프로젝트로, 연락처 양식을 구글 스프레드시트와 연동하는 작업을 소개합니다.

[02:56] 새 프로젝트 시작 시 도메인 기반 아키텍처 접근 방식에 대해 설명합니다. 모든 구성 요소와 데이터 구조를 먼저 정의하는 것이 중요함을 강조합니다.

[03:27] 프로젝트의 실제 구현을 위해 화이트보드를 사용하여 15분 동안 계획을 수립하고, 원하는 결과물의 참고 사항을 검토합니다.

[03:44] 연락처 폼 구현을 위해 shad CN 사이드 드로어와 새 프로젝트 문의 폼의 요구사항을 분석합니다.

[04:10] 폼에 필요한 데이터 구조를 정의하기 시작합니다. 이름, 성, 이메일, 전화번호 등 기본적인 연락처 정보의 타입을 string으로 설정합니다.

[04:50] 프로젝트 관련 필드들(타입, 설명, 회사 정보 등)을 정의하고, 이를 구글 시트에 매핑할 계획을 수립합니다.

[05:31] 정의된 데이터 구조를 바탕으로 스프레드시트 매핑 작업을 시작하고, SQL 문 작성을 준비합니다.

[06:06] 서버 액션, React Query, Axios 등을 사용할 때 필요한 구체적인 사항들에 대해 설명합니다. 특히 G Drive를 활용한 서비스 계정 설정의 중요성을 강조합니다.

[06:31] 중소기업들이 복잡한 데이터베이스 대신 G Drive를 선호하는 이유와 시트 ID, 이름의 대소문자 구분 등 주요 세부사항을 설명합니다.

[06:48] Taskmaster 설치 및 초기화 과정을 설명하며, Anthropic 키 사용에 대한 비용 효율성을 언급합니다.

[07:32] Cursor의 MDC 규칙들과 시스템 이해를 위한 자연어 처리 방식에 대해 설명합니다.

[08:09] scripts 폴더 구조와 PRD 예제, RCA 추가 기능, 그리고 로드맵 관리 방식에 대해 설명합니다.

[08:56] 솔루션 아키텍처 문서 작업과 작업 복잡도 보고서에 대한 설명. 이 도구의 한계를 테스트하고 있다고 언급.

음성 입력을 활용해 제품 요구사항 문서를 작성하는 과정을 설명합니다. PRD를 바탕으로 작업을 세부 단계로 분해하는 방법을 구체적으로 다룹니다.

[09:12] 전역 설치와 초기화 과정, 그리고 구글 시트 테스트에 대한 설명. 모든 기능에 테스트가 포함되어야 함을 강조.

[09:36] 작업의 재귀적 검토 기능과 대규모 작업의 세분화 필요성 설명. 의존성을 고려한 작업 순서의 중요성 강조.

[09:58] 추가 연구를 위한 도구들(perplexity, enthropic, sonar)의 사용법과 task.json 파일 관리에 대한 모범 사례 설명.

[10:26] PRD 작성 시작과 Whisper Flow 사용법 설명. 음성 입력의 장점과 효율성에 대한 강조.

[11:07] 연락처 페이지의 프로젝트 문의 양식 구현 계획. shad CN 컴포넌트를 활용한 UI 설계 설명.

[12:04] dialogue 컴포넌트를 사용하기 위해 shadcn dialogue의 상대 경로를 복사하고 OCR 스크린샷 기능을 활용하려 했지만 키 바인딩 문제가 발생했습니다.

[12:40] 이메일 가입 폼에서 사용했던 것과 동일한 데이터 게시 방식을 적용하기로 결정했습니다. Next.js와 Google Sheets를 연동하는 간단한 예제를 찾아 참조했습니다.

[13:50] 기본 초안에 코드 참조를 포함했으며, 새로운 기능 구현시 유사한 패턴을 찾아보는 것이 중요함을 강조했습니다.

[14:30] PRD 작성이 과해 보일 수 있지만, 이는 작업의 품질을 크게 향상시키며 스크린 리더 시맨틱스와 같은 중요한 요소들을 놓치지 않게 해줍니다.

[15:17] PRD 검토 중 contact 페이지 위치 정보가 누락된 것을 발견하여 수정이 필요한 상태입니다.

[15:24] 연락처 페이지(contact.tsx)에 구현될 새로운 기능의 위치를 명확히 하고, 프로젝트를 열어 실제 구현 위치를 확인합니다.

[15:55] 기존의 'Get in Touch' 섹션과 폼을 새로운 기능으로 대체할 계획을 수립합니다.

[16:16] ask 모드에서 에이전트 모드로 전환하여 쓰기 권한을 활성화하고, 팀의 최적화된 예제를 활용하여 더 높은 품질의 PRD를 작성합니다.

[16:44] 링크 스타일, 다이얼로그 구현, 모바일 호환성, 테일윈드 3 브레이크포인트 준수 등 구체적인 구현 요구사항을 검토합니다.

[17:14] 이메일 알림 및 추가 통합 기능은 범위에서 제외하고, 기본적인 폼 기능과 사용자 피드백에 집중합니다.

[17:53] 미해결된 이슈들(정확한 텍스트, 버튼 텍스트, 유효성 검사 규칙)을 확인하고 PRD에 반영하여 완성도를 높입니다.

[18:42] 폼 구성 요소를 변경하고 라디오 버튼을 사용하여 프로젝트 상태를 표시하기로 결정했습니다. 이를 통해 더 정확한 사용자 입력을 받을 수 있게 되었습니다.

[19:40] 예산 선택을 위해 원래 드롭다운을 고려했으나, 클라이언트의 선호도를 반영하여 라디오 버튼으로 변경하기로 결정했습니다.

[20:35] 구글 시트 통합을 위한 시트 ID 설정과 탭 이름 'website leads'를 지정했습니다. 데이터베이스 연동을 위한 기본 구조를 설정했습니다.

[21:10] 폼 필드와 구글 시트 컬럼 간의 매핑을 설정하고, 성공/오류 메시지에 대한 UX 패턴을 정의했습니다.

[21:59] 전체 구현 과정을 검토하며, 유효성 검사, 메시지 처리, 스타일링 등 상세 구현 사항들을 확인했습니다.

[22:25] PRD 초안을 검토하고 사용자 스토리와 필요한 요소들이 모두 포함되어 있음을 확인했습니다.

[22:55] 에이전트 모드로 전환하여 기존 PRD를 정리하고 Taskmaster 작업을 시작했습니다.

[23:11] Taskmaster를 사용해 PRD.txt에서 작업을 파싱하기 시작했고, 이전 작업 기록을 정리했습니다.

[24:31] 파싱된 작업들이 테이블 형태로 정리되었으며, 각 작업에는 ID, 제목, 설명, 상태, 의존성, 우선순위, 세부사항, 테스트 전략이 포함되어 있습니다.

[25:15] 다음 단계로 넘어가기 전, 향후 출시될 MCP 기능들은 현재 버그가 있어 사용하지 않기로 결정했습니다.

[25:26] 태스크마스터가 실행되어 작업 목록을 확인하고 CLI 명령어를 참조합니다. CLI에서 직접 실행도 가능하지만, 불필요한 작업을 줄이기 위해 다른 방식을 선호합니다.

[25:49] 올바른 경로를 찾아 작업을 시작하고, 버튼 임포트와 링크 텍스트 수정이 성공적으로 완료되었습니다. '새 프로젝트 문의' 텍스트가 정확히 구현되었습니다.

[26:18] 작업이 너무 크거나 모호할 경우 'research' 키워드를 사용하여 세분화할 수 있습니다. 현재 진행 중인 테스트는 여러 입력 폼 설정을 포함한 큰 규모의 작업입니다.

[27:00] 3번 작업을 확장하여 세부적으로 분석하고, 엔트로픽 콘솔을 통해 비용 효율성을 확인합니다. 하루 50센트의 저렴한 비용으로 효과적인 워크플로우를 구현할 수 있습니다.

[27:32] 작업을 폼 구조 설정, 세부 사항 구현, 주소 필드 작업 등으로 세분화하여 진행합니다. 기본 구조부터 시작하여 단계적으로 기능을 추가합니다.

[28:12] 코딩이 자동으로 진행되는 동안 잠시 휴식을 취하고, 4번 작업에서는 ZOD 스키마 작성, 필수 필드 정의, 유효성 검사 통합 등을 구현할 예정입니다.

[28:30] 클라이언트 사이드 스타일링과 폼 검증 작업을 진행하면서, 코드를 더 효율적으로 관리하기 위해 확장 기능을 실행합니다.

[28:54] 새로운 디스코드 커뮤니티를 소개하며, OpenAI의 새 모델 출시 소식과 함께 AI 관련 뉴스를 자동으로 수집하고 분류하는 시스템을 구축했다고 설명합니다.

[29:36] Zod 리졸버를 이용한 validation 시스템 리팩토링을 진행하며, AI가 10개의 태스크 임계값에 도달하면서 예상치 못한 개선점들을 발견하고 있습니다.

완성된 기능의 테스트와 UI 리파인 단계를 시연합니다. 최종 결과물을 검증하고 실무적인 팁 및 개선사항을 공유하며 영상을 마무리합니다.

[30:02] AI 도구의 효율성을 강조하며, 이전의 수동 작업 방식과 비교하여 현재의 개발 경험이 얼마나 개선되었는지 설명합니다.

[30:48] ChatGPT 이전과 이후의 개발 경험을 비교하며, 현재 진행 중인 폼 데이터 처리와 테스트 작성 과정에 대해 설명합니다.

[31:13] AI 도구가 자동으로 반응형 디자인과 최적화를 수행하는 동안, 작업의 효율성과 품질에 대한 만족감을 표현합니다.

[31:34] 폼 테스트 과정에서 대비 검사기를 실행하여 UI 개선점을 발견하고, 애니메이션과 전환 효과를 구현했습니다.

[32:07] 폼에 데이터를 입력하고 제출 테스트를 진행하면서, 타임스탬프 형식과 데이터 정렬 문제를 발견했습니다.

[32:48] 구글 시트 연동 시 발생하는 문제점을 확인하고, 개선을 위해 새로운 채팅 세션을 시작하는 방식을 테스트했습니다.

[33:36] 발견된 주요 사용성 문제점으로 타임스탬프 형식, 반응형 디자인, 라디오 그룹 구현 등이 확인되었습니다.

[34:32] 보물상자에 담긴 UI 예시, Next.js/TypeScript 패턴, 그리고 곧 출시될 터보 키트에 대해 소개했습니다.

[00:00] 안녕하세요, 저는 Parker Rex입니다.

[00:01] 2300만 달러에 매각된 스타트업의 기술 책임자였죠.

[00:03] 그 후에 음악계의 Airbnb를 만들어보려 했는데

[00:04] 실패했고, 결국 프로그래밍에

[00:07] 올인하기로 결심했습니다.

[00:08] 약 1년 정도 그렇게 지내다가

[00:10] ChatGPT가 출시되었고, 당연히

[00:12] 모든 것이 바뀌었죠. 저는

[00:14] 다른 모든 기회를 뿌리치고

[00:16] AI를 활용하는 방법을 배우는데

[00:18] 전념했습니다. 마케팅, 코딩,

[00:21] 그리고 전반적인 생산성 향상을 위해서요.

[00:24] 이를 통해 비즈니스에서 더 나은 성과를

[00:25] 얻고 싶었습니다. 저는 항상

[00:28] 최신 트렌드의 최전선에 있고 싶었고,

[00:30] 오늘은 제가 완전히 놀란

[00:32] 도구 하나를 소개해드리려고 합니다.

[00:35] 이 도구는 여러분의 작업 방식을 바꿀 겁니다.

[00:36] 클릭베이트처럼 들리겠지만

[00:38] 실제로 그렇습니다. Taskmaster라는 도구인데

[00:41] 15분 안에 설명해보도록 하겠습니다.

[00:42] 이 도구의 기본적인 것들을

[00:43] 불필요한 것들은 제외하고 보여드리겠습니다.

[00:45] 이 도구는 말씀드린 대로 Taskmaster인데

[00:48] 알아야 할 것들이 몇 가지 있습니다.

[00:51] MCPs가 내부에 있고

[00:52] 신경 쓸 필요 없는 기능들이 있기 때문이죠.

[00:56] 이 화면을 스크린샷으로 찍어두세요.

[00:57] 나중에 필요할 겁니다.

[00:59] 이게 바로 마법 같은 부분인데

[01:00] AI를 체계적으로 관리할 수 있게 해줍니다.

[01:03] 만약 AI 도우미들을 사용해 보셨다면

[01:09] 짧은 시간 동안은 정말 좋은 성능을 보이다가

[01:12] 항상 다음 알파를 찾아야 하고

[01:15] 다음 트릭을 찾아서

[01:17] AI를 제대로 된 궤도에

[01:19] 유지해야 했던 경험이 있으실 겁니다.

[01:21] 제가 5년 정도 프로덕트 매니저로 일하고

[01:24] UX 디자이너를 거쳐

[01:27] 몇 년간 프로그래머로 일하면서

[01:29] 태스크 관리에 대해

[01:30] 배운 것이 있는데, 이 도구가

[01:33] 바로 그 부분에서 뛰어납니다. 이건 마치

[01:34] 개발자의 어깨에 앉아있는

[01:37] 제품 관리자와 같아서

[01:39] '이게 다음 할 일이에요, 이거 끝났나요?'라고

[01:41] 계속 확인해주죠. 개발자로서

[01:42] 이미 하고 계시겠지만, 이 도구는

[01:45] 더욱 도움이 됩니다.

[01:47] 제품 관리 부분에 대해

[01:50] 자세히 설명해드리고 싶은데요.

[01:53] 이 스킬은 절대로 약화시켜서는

[01:56] 안 되는 능력입니다. 코딩의 기초에 대한

[01:59] 많은 세부사항들을 알아야

[02:00] 출력되는 내용을

[02:02] 이해할 수 있지만, 실제 계획은

[02:04] 앞으로 다가올 시대에

[02:06] 점점 더 중요해질 것입니다.

[02:08] 실제 클라이언트 프로젝트를

[02:11] 진행할 건데요, 디자인에 매우 신경 쓰는

[02:15] 고급 디자인 스튜디오를 위한 것입니다.

[02:19] 당연히 디자인을 중요하게 생각하죠.

[02:21] 그게 그들의 전문 분야니까요. 앗, 잘못 클릭했네요.

[02:25] 빌드를 리셋해야겠어요.

[02:27] 우리가 할 일은

[02:30] 연락처 양식을 추가하는 건데요, 아주 간단합니다.

[02:33] 그들은 그 이상의 것은

[02:36] 신경 쓰지 않습니다. 이 영상에서는

[02:38] 연락처 페이지를 가져와서

[02:41] 문의사항을 보낼 수 있도록 업데이트하고

[02:43] 구글 스프레드시트에 저장되도록 할 겁니다.

[02:45] 다음 단계로는 구글 스프레드시트에만 저장하는 게 아니라

[02:48] 자동 응답 시퀀스나

[02:50] 무료 콘텐츠 제공 같은

[02:52] 기능들을 추가하겠지만,

[02:54] 이번 작업에서는 그건 제외입니다.

[02:56] 그래서 우리가 해야 할 일은 무엇일까요?

[02:59] 새로운 프로젝트를 시작할 때마다

[03:00] 모든 다양한 구성 요소들과

[03:03] 관련된 모든 사항들을 파악해야 합니다

[03:05] 도메인 기반 아키텍처를 사용할 수 있는데

[03:07] 이는 타입을 작성하고

[03:08] 필요한 것들을 정의하고

[03:10] 데이터 구조를 작성한 다음

[03:11] 거기서부터 작업을 시작하는 방식입니다

[03:13] 저는 이 방식을 정말 좋아하는데요

[03:16] 우리는 이것의 하이브리드 방식을 사용해서

[03:18] 정확히 무엇이 필요한지 파악할 것입니다

[03:21] 화이트보드를 가져와서 15분 타이머를 설정하겠습니다

[03:24] 여기 들어가서

[03:26] 몇 가지 다른 부분들이 있을 텐데

[03:27] 그들이 원하는 결과물에 대한 영감을 가져오겠습니다

[03:30] 매우 간단하지만 이 프로세스를

[03:33] 정확히 어떻게 복제할 수 있는지 보여드릴 겁니다

[03:35] PRD 부분에 특히 집중해주세요

[03:38] 여기 들어가서 연락처로 가보면

[03:40] 몇 가지 요소들이 있는 것을 볼 수 있습니다

[03:43] shad CN 사이드 드로어를 원하고

[03:44] 새 프로젝트 문의가 있는데

[03:46] 이 큰 폼이 포함되어 있습니다

[03:49] 그래서 필요한 데이터 포인트가 무엇인지 파악해야 합니다

[03:51] 여기로 넘어와서

[03:52] 시간을 절약하기 위해 타이핑을 하겠습니다

[03:55] 제 데일리 업로드 채널에서는

[03:58] 보통은 이것을 직접 그리는데

[04:00] 관심 있으시다면

[04:02] Parker Rex Daily를 확인해보세요

[04:03] 하지만 지금은 타이머가 돌아가고 있으니

[04:04] 기본적으로 인터페이스를 만들어보겠습니다

[04:07] 이를 위한 타입들을 정의해보죠

[04:10] 먼저 first name은 string 타입이고

[04:13] last name도 string 타입입니다

[04:17] contact email은 string, 연락처 전화번호도 string으로 하겠습니다

[04:21] 이렇게 작은 프로젝트에서는 이런 작업이 필수는 아니지만

[04:25] 제가 어떻게 작업하는지

[04:26] 여러분이 보시면 좋을 것 같아서 보여드립니다

[04:30] 더 큰 규모의 프로젝트에서 도움이 될 거예요

[04:33] referral 옵션이 있는데

[04:35] 약간 과하긴 하지만 하나 만들어보겠습니다

[04:39] 이것도 string으로 하겠습니다

[04:43] 타입으로 만들 수도 있지만

[04:45] 이 정도 프로젝트에서는 과합니다

[04:46] project type도 string으로 하고

[04:50] description, project description도 string입니다

[04:53] 이것들은 모두 RDB에 매핑될 것인데

[04:56] 이 경우에는 구글 시트이지만

[04:58] 보통은 PostgreSQL을 사용합니다

[05:00] 아키텍트와 작업 중인지 여부는

[05:03] boolean이 될 것 같네요

[05:06] 회사 이름도 필요하고

[05:10] company details는 string, ongoing project details도 필요하고

[05:15] project stage 페이지는 string이 될 것이고

[05:18] budget도 string으로 하겠습니다

[05:22] 그리고 마지막으로 전체를 포괄하는

[05:24] project scope details도 string으로 하겠습니다

[05:29] 이렇게 하면 도움이 되죠

[05:31] 이것들 각각이 우리 스프레드시트에 매핑될 것입니다

[05:35] 그럼 이제 빠르게 만들어보죠

[05:36] Taskmaster로 작업한다면

[05:38] 바로 들어가서 SQL 문을 작성하겠지만

[05:40] 동일한 방식으로 진행할 겁니다

[05:41] 제가 방금 했던 것과 같은 형식으로요

[05:44] 자 그럼 시작해보죠

[05:46] 먼저 이름, 성, 이메일을 입력하고

[05:49] 물론 조건부 형식이 적용되어 있어서 되돌려야 하네요

[05:52] 전화번호, 프로젝트 주소

[05:53] 추천인, 프로젝트 유형, 프로젝트 설명

[05:57] 진행 중인 프로젝트, 프로젝트 세부사항

[05:59] 프로젝트 단계, 예산, 프로젝트 범위 등을 입력합니다

[06:02] 이렇게 모든 필드를 정의했습니다

[06:06] 스코프 세부사항들이 다 있네요.

[06:09] 이게 중요한 이유는

[06:11] 서버 액션을 작성하거나

[06:13] React Query나 다른 것을 사용할 때

[06:14] Axios 등을 쓸 때 몇 가지

[06:16] 구체적인 사항들이 필요하기 때문이에요. 이건 서비스 계정을 사용하는데

[06:20] G Drive 작업에 익숙하시다면

[06:22] 많은 중소기업들이 이걸 사용합니다.

[06:24] 데이터베이스에 익숙하지 않고

[06:27] 신경 쓰고 싶지 않아서죠.

[06:29] 과도한 것 같아서 이게

[06:31] 간단한 작업을 위한 최고의 DB예요.

[06:34] 하지만 반드시 확인해야 할 것은

[06:37] 시트 ID와 이름이 있고

[06:39] 대소문자를 구분한다는 점이에요.

[06:41] 이런 세부사항들은

[06:43] PRD를 작성하기 전에

[06:44] 미리 확인해야 하는 것들이죠.

[06:48] 이제 시트가 준비되었으니 Taskmaster로 넘어가보죠.

[06:51] 제가 이전에 실행했던 명령어를 보여드리겠습니다.

[06:55] npm을 사용하신다면 P는 빼고 실행하세요.

[06:59] 이렇게 하면 전역으로 설치되는데

[07:00] 매우 추천드립니다.

[07:01] 앞으로 모든 프로젝트에서

[07:02] 사용하게 될 거예요. 정말 좋거든요.

[07:05] 그 다음 taskmaster init을 실행하면

[07:08] Taskmaster가 초기화됩니다.

[07:12] Anthropic 키가 필요한데

[07:14] 비용 걱정은 하지 마세요.

[07:15] 저는 이걸 계속 사용했는데

[07:17] 4일 동안 1달러 썼어요.

[07:19] 실행하고 나면

[07:21] 설정을 위한 질문들이 나오고

[07:22] 프로젝트에 대해 몇 가지

[07:24] 답변하면 거의 끝납니다.

[07:28] 그러면 몇 개의 파일이 생성되는데

[07:31] 어떤 파일들이 생성되는지 보죠.

[07:32] 2단계를 실행하고 나면 Cursor에

[07:36] 몇 가지 규칙들이 생기는데

[07:39] 이것들은 MDC로

[07:41] 다양한 작업을 할 때 Cursor가 실행할 내용입니다.

[07:44] 이건 모범 사례들이에요.

[07:47] 수정하지 마세요. 건드리지 마세요.

[07:49] 이건 시스템에 제공되는 것으로

[07:51] 자연어로 말할 때

[07:53] 무엇을 호출해야 하는지 이해하게 해줍니다.

[07:55] 다시는 이것들을 입력할 필요가 없어요.

[07:57] 놀랍게도 저는 처음 두 개만 입력했어요.

[08:00] 나머지는 전혀 입력하지 않았지만

[08:02] 혹시 필요하실까 봐

[08:04] CLI에서 실행하고 싶으실 때를 위해 알려드립니다.

[08:06] 하지만 기억할 게 하나 더 늘어날 뿐이에요.

[08:09] 그리고 나서 scripts 폴더 아래

[08:11] 새로운 scripts 폴더가 생기는데

[08:13] 실행을 위한 JavaScript 파일과

[08:15] 예제 PRD가 포함되어 있어요.

[08:17] 파트 2에서 사용할 건데, 제가 만들어서

[08:20] 메타프롬프팅을 거쳐

[08:22] 테스트해본 PRD가 있어요.

[08:23] 아래에 'PRD'라고 댓글 달아주시면

[08:27] 답글로 공유해드리겠습니다.

[08:30] 원하지 않으시면 괜찮아요.

[08:31] 이걸 사용하셔도 되지만

[08:32] 제가 더 효과적이라고 생각하고

[08:35] RCA(근본 원인 분석)도 추가했어요.

[08:38] 새로운 기능 개발뿐만 아니라

[08:40] 디버깅할 때도

[08:42] 매우 유용합니다.

[08:44] readme 파일도 있고 로드맵도 있는데

[08:46] 이건 제가 추가한 거예요.

[08:48] 다음에 해야 할 작업들 중에서

[08:50] PRD로 나눠야 할 것들이에요.

[08:53] 아 맞다, 하나 더 추가했었네요.

[08:56] 걱정하지 않으셔도 됩니다.

[08:57] 이건 솔루션 아키텍처 문서를 위한 것이고

[08:59] 저는 이 도구가 어디까지 가능한지

[09:00] 테스트해보고 있는 중입니다.

[09:03] 작업 복잡도 보고서가 있는데,

[09:05] 첫 번째 명령을 실행할 때 생성되는 모든 작업의

[09:08] 복잡도를 빠르게 분석합니다.

[09:12] 이미 전역으로 설치했다고 가정하고,

[09:13] 초기화를 했다면

[09:15] 이런 것들이 여기에 나타나기 시작할 것입니다.

[09:18] 아직 이것들은 보이지 않을 텐데,

[09:20] 이 테스트 구글 시트는

[09:22] 제가 작성을 요청한 테스트입니다.

[09:23] 모든 것에 테스트가 있기를 원했기 때문에

[09:26] 이것이 완료 기준의 일부이고

[09:28] 마지막으로 작업 목록이 있는데

[09:30] 여러분의 것은 비어있을 것입니다.

[09:31] 하지만 이것이 출력될 것이고

[09:33] 기본적으로 1부터 10까지 있습니다.

[09:36] 작업을 재귀적으로 검토하도록 요청할 수 있어서

[09:38] 세분화가 필요한 부분을 찾습니다.

[09:41] 매우 큰 작업이 있다면

[09:43] 실제 개발과 마찬가지로

[09:45] 그것들을 더 작게 나눠야 합니다.

[09:46] 이해하기 쉽도록 하고

[09:48] 순서에서 벗어나지 않도록

[09:49] 의존성이 있는 작업을 하지 않기 위해서죠.

[09:51] 만약 어떤 것이 임계값에 도달하여

[09:54] 너무 어려워진다면

[09:56] 추가 연구를 요청할 수 있습니다.

[09:58] 이는 perplexity 키가 필요하며

[09:59] 선택사항입니다.

[10:01] enthropic 키는 항상 필요하고

[10:03] 추가 연구를 위해 sonar를 사용하는 것이

[10:05] 매우 유용하다고 생각합니다.

[10:07] 그리고 핵심 팀과

[10:09] 디스코드에서 시간을 보낸 경험에서 나온 모범 사례로

[10:13] 그들이 말하길 task.json 파일은

[10:16] 건드리지 말라고 합니다.

[10:19] cursor rules가 있어서 그것을 설치하고

[10:22] 그 외에 포함된 것이 뭐가 있는지 보면

[10:24] 그게 전부인 것 같습니다.

[10:26] 이제 PRD를 시작해보겠습니다.

[10:30] 우리가 논의했던 아이디어를 가지고

[10:32] Whisper Flow를 사용할 건데

[10:34] 이것은 훌륭한 워크플로우 도구입니다.

[10:36] 항상 음성을 사용하세요.

[10:38] 이건 그저 보여주기 위한 것이 아니에요.

[10:41] 키보드와 여러분 사이에는

[10:43] 장벽이 있고 압축과 데이터가

[10:45] 소통에 중요합니다.

[10:48] 우리는 말할 때 더 빠르게 진행할 수 있고

[10:50] 세부사항을 누락하지 않습니다.

[10:55] function 키를 누른 채로

[10:58] 말하기 시작할 것이고

[10:59] 해야 할 모든 것을 설명하겠습니다.

[11:02] 인터페이스를 포함해서

[11:02] 그리고 코드 스니펫도

[11:05] 포함하도록 하겠습니다.

[11:07] 우리는 연락처 페이지에 프로젝트 문의 양식을 만들어야 합니다.

[11:12] 작은 텍스트 블록과 링크 텍스트 버튼이 있을 것이고

[11:19] shad CN 버튼 링크 변형을 사용할 것입니다.

[11:23] 사용자가 탭하거나 클릭하면

[11:26] shad CN을 사용하는 모달이 열리고

[11:29] 다음과 같은 질문들이 표시됩니다.

[11:34] 이것이 첫 번째 부분이고

[11:38] 여기서 마무리하겠습니다.

[11:40] 이제 여기서 링크를

[11:43] 연결하도록 하겠습니다.

[11:45] source/app/components에 있다는 걸 알고 있는데

[11:49] 아니 죄송합니다. source/app/

[11:52] components... 잠깐만요, 그냥 가져오겠습니다.

[11:54] 버튼의 상대 경로를 가져오고

[11:58] 좋습니다. 그리고 나서

[12:01] 탭이나 클릭 중에 어떤 것을 사용할지

[12:04] 우리가 사용하려는 건 modal이 아니라

[12:07] dialogue라고 불립니다. 이제

[12:09] shadcn dialogue의 상대 경로를 복사하고

[12:12] 여기에 있는 것을 사용하여 다음 질문들을 진행하겠습니다.

[12:16] 이제 이것을 옮기고

[12:19] OCR 스크린샷을 사용하겠습니다.

[12:22] 한번 확인해 보겠습니다.

[12:26] 작동하지 않네요. 키를

[12:28] 다시 바인딩해야 할 것 같습니다. 이제 어시스턴트를 열고

[12:31] 코드 블록이나

[12:34] TypeScript 코드를

[12:35] 달라고 요청하고 실행시키겠습니다.

[12:38] 이제 PRD를 계속 작성해보죠.

[12:40] 완료됐네요. 이제 래핑하고

[12:44] 이메일 가입 폼에서 사용했던 것과 같은 방식으로

[12:48] 데이터를 게시하는 방법을 사용하겠습니다.

[12:53] 이제 그 코드를 가져와보죠.

[12:55] 물론 이전에 해본 적이 있다면

[12:57] 훨씬 더 도움이 됩니다.

[12:58] 무엇을 해야 할지 어려움을 겪고 있다면

[13:00] TypeScript를 사용하거나, GitHub에서

[13:03] 검색 연산자를 사용해서 찾아보세요.

[13:05] 저는 이것의 예제를 찾았는데, Next.js

[13:08] Google Sheets였습니다. 매우 간단하죠.

[13:12] 이 상대 경로를 가져오겠습니다. 이 패턴은

[13:15] Google 서비스 계정 접근을 사용하고

[13:20] Next.js 서버 액션을 사용하며

[13:25] submit 또는 subscribe 입력을 사용합니다.

[13:29] 이것을 가져와보죠. subscribe

[13:33] input을 폼 버튼용으로 가져옵니다.

[13:38] 또 무엇이 필요할까요? 키를 가져와야 하는데

[13:41] 여기 있네요. 서비스 키를

[13:44] 추가했습니다. 이게 전부인 것 같네요.

[13:46] 꽤 간단할 것 같고 이제 기본 초안을 작성했습니다.

[13:50] 약간의 코드 참조가 있는데

[13:52] 만약 완전히 새로운 것이라면

[13:54] 말씀드렸듯이, 유사한

[13:56] 패턴을 찾아보는 것이 여러분의 책임입니다.

[13:58] 문서화는 또 다른 방법이 될 수 있습니다.

[14:01] 이제 여기로 와서

[14:03] 이것을 ask 모드로 전환하겠습니다.

[14:04] 이제 실제 PRD를 작성하는 단계입니다.

[14:06] 텍스트 확장기를 사용할 건데

[14:08] 느낌표 F1을 사용하겠습니다.

[14:10] 이렇게 하면 열리고

[14:11] 이것을 안에 붙여넣겠습니다.

[14:14] temp 변수 또는 프롬프트 변수가 있는 것을 보실 수 있죠.

[14:16] PRD 지침 안에

[14:19] 이것을 붙여넣고 ask 모드로 설정하겠습니다.

[14:21] 저는 항상 Gemini 2.5 Pro를 사용하는데

[14:23] 이렇게 하면 우리의 첫 번째 제품 요구사항 문서 초안이

[14:26] 작성되고 있습니다.

[14:30] 이게 과하다고 생각하실 수도 있지만

[14:31] 전혀 그렇지 않습니다.

[14:33] 이는 여러분이 하는 모든 작업의

[14:36] 품질을 향상시킬 것입니다.

[14:37] 저는 이와 같은 프로세스를 했거나

[14:39] 훨씬 더 간단하게, 예를 들어

[14:42] 단순히 이미지 갤러리만 있는 것도 해봤는데

[14:46] 이는 더 나은 품질의 제품으로

[14:49] 강제로 이끌어냅니다.

[14:50] 정말 대단한데요, 예를 들어

[14:52] "페이지 로드 최적화가 필요한데

[14:56] 스크린 리더 시맨틱이

[14:58] 없네요"라고 할 거예요. 저는 이런 걸

[15:01] 생각해본 적이 없어서 좋습니다.

[15:04] 이제 돌아와서 한번 살펴보겠습니다.

[15:06] 읽어보는 게 중요하죠.

[15:08] 좋습니다. 여기 우리의 목표가 있고

[15:10] 이것을 간소화하려고 합니다. 이게 대상입니다.

[15:12] 지정된 텍스트 블록이 될 것이고

[15:14] 프로세스를 설명할 건데

[15:17] 제가 알아챈 것은 contact 페이지를

[15:19] 넣지 않았다는 거예요. 그래서

[15:22] 정확히 어디에 위치할지 모르는 상태네요.

[15:24] 그래서 제가 명확히 하고 싶은 것은

[15:28] 비슷한 방식으로 작업할 것이고

[15:30] 연락처 페이지에 구현될 것입니다. 그래서 contact.tsx에

[15:35] 자, 이제 프로젝트를 열어보겠습니다.

[15:38] 정확히 어디에 위치할지 알아보기 위해서죠.

[15:41] 우리가 찾는 것은

[15:43] 한 번에 처리하는 것이 핵심입니다.

[15:45] 실제 작업이 이루어지는 부분이죠.

[15:48] 놀라울 정도로 쉽게 처리될 거예요.

[15:51] 자, 로컬호스트를 한번 볼까요. 좋습니다.

[15:55] 이것이 'Get in Touch'를 대체할 거예요.

[15:56] 우리의 새로운 기능이

[16:01] 기존의 'Get in Touch' 섹션을 대체할 것입니다.

[16:05] 헤더 아래에 있는 기존 폼을

[16:10] 대체하게 될 거예요. 좋습니다.

[16:13] 다시 실행해보고, 이후에는

[16:16] ask 모드에서 전환할 거예요. ask 모드는 읽기 전용이라

[16:19] 에이전트 모드로 전환하겠습니다.

[16:22] 이제 쓰기가 가능해지죠.

[16:24] 그들의 예제를 가져올 건데,

[16:27] 팀이 이것에 맞춰 최적화해놓았기 때문이에요.

[16:29] 하지만 이전에 한 번 해봤기 때문에

[16:32] 더 높은 품질의 PRD가 될 것입니다.

[16:35] 이것을 가져와서

[16:37] 작업이 끝나면

[16:39] 검토해보고 빠진 것이 없는지 확인할 거예요.

[16:40] 연락처 페이지를 확인했는데,

[16:42] 이것이 정확한 구현을 위해 매우 중요합니다.

[16:44] 링크 스타일 버튼을 살펴볼까요?

[16:46] 좋아요, 다이얼로그 구현하기

[16:49] 폼 생성에 대해 이미 생각하고 있는데

[16:51] 모바일 친화적인지

[16:52] 테일윈드 3의 브레이크포인트를

[16:54] 따르고 있는지 확인해야 합니다. 4가 아닌

[16:56] 이제 새로운 이메일 추가 기능을

[16:58] 시트에 추가하는 것도 비슷하게 할 거예요.

[17:01] 자격 증명을 사용해서 저장하고

[17:04] 기존 폼을 대체할 겁니다.

[17:06] 사용자 피드백을 제공할 거예요.

[17:07] 제출이나 오류 발생 시에 좋습니다.

[17:10] 범위에서 제외되는 것은 인터페이스 생성

[17:12] 폼 제출 시 이메일 알림 보내기

[17:14] 또는 다른 것들과의 통합이에요.

[17:16] 이거 좋네요. 우리가 이미 개략적으로 정한

[17:19] 모든 사항이 포함되어 있어요.

[17:20] 이것들이 모든 기능 요구사항이고

[17:21] 일반적인 디바이스 크기도 언급되어 있습니다.

[17:24] 그리고 제가 주목한 것은

[17:26] 이 프롬프트의 끝부분에서

[17:27] 미해결된 이슈가 있는지 물어봅니다.

[17:30] 한번 살펴볼까요? 문의 버튼 위에

[17:33] 표시할 정확한 소개 텍스트는 무엇인가요?

[17:35] 자, 한번 찾아봅시다.

[17:36] 다시 한번 말씀드리지만,

[17:39] 처음부터 제대로 하면 시간을 절약할 수 있죠.

[17:40] 그래서 우리는

[17:42] 이 답변들이 미해결된 이슈에 대한 답변입니다.

[17:47] 이것들을 반영해서

[17:50] PRD를 다시 작성하여 완성도를 높일 거예요.

[17:53] 첫 번째는 정확한 텍스트입니다.

[17:56] 두 번째는 링크 버튼의 정확한 텍스트예요.

[17:59] 한번 볼까요? '새 프로젝트 문의'

[18:02] 세 번째는 구체적인 유효성 검사 규칙입니다.

[18:06] 구체적인 유효성 검사 규칙에 대해

[18:09] 모범 사례를 사용하고

[18:12] zod 오류나 유효성 검사 텍스트를 사용할 거예요.

[18:17] 이는 우리의

[18:20] 구독 추가 input.tsx와 같은 스타일을 따라야 합니다.

[18:25] 프로젝트 상태와

[18:28] 예산이 자유 텍스트 입력이어야 하는지

[18:31] 좋은 질문이네요. 이것들은

[18:33] 상태를 확인해봅시다. 상태가 어떤지

[18:37] 상태를 살펴보죠.

[18:40] 자, 이제 그것을 가져와보겠습니다.

[18:42] 이런, 이것들은 다르게 해야겠네요

[18:44] 이게 정말 좋은 게

[18:46] 그냥 추측해서 진행했다면 원하는 결과를 얻지 못했을 거예요

[18:49] 라디오 버튼을 사용하는데, 옵션으로는

[18:52] 공사 진행 중

[18:56] DA 도시계획 승인

[18:59] 사전 DA 도시계획 및 승인

[19:05] 아직 시작하지 않음

[19:09] 초기 문의 및 조사가 있습니다

[19:13] 이렇게 하면 엄청난 시간을 절약할 수 있어요

[19:15] 좋아요, 이것은 프로젝트 상태를 위한 거예요

[19:19] 프로젝트 상태에는 라디오 버튼을 사용하고

[19:21] 이것들을 4.1로 번호를 매기고 라디오 버튼을 사용할 거예요

[19:24] 라디오 버튼을 가져와서

[19:26] 라디오 그룹이 맞는 건가요?

[19:29] 한번 확인해 볼게요

[19:31] 선택 가능한 버튼 세트, 네 맞네요

[19:33] 라디오 버튼을 가져와서 붙여넣기 할게요

[19:37] 4.2는 프로젝트 상태이고

[19:40] 예산은 드롭다운을 사용하는데

[19:44] 셀렉터인 것 같아요. 한번 확인해볼게요

[19:46] 네, 맞네요. 이걸 가져와서

[19:50] 편의를 위해서

[19:53] 프로젝트 상태와 예산 모두 라디오 버튼을 사용할게요

[19:56] 클라이언트가

[19:58] 이 부분에 대해 특별히 신경 쓰고 있거든요

[20:00] 클라이언트를 만족시키기 위해

[20:03] 각각의 옵션은 다음과 같습니다

[20:05] 4.1은 공사 또는 프로젝트 상태용이고

[20:09] 중복되어 보일 수 있지만

[20:11] 정확히 하고 싶어서요

[20:12] 4.2는 예산을 위한 건데, '아직 예산 없음, 가이드 필요'

[20:18] 50만 달러 미만

[20:21] 50만에서 150만 달러, 150만에서 250만 달러

[20:27] 250만 달러 이상, 그리고 기타입니다

[20:32] 이제 5번을 볼까요, 대상 시트 ID가 뭔지

[20:35] 좋아요, 5번 대상 시트 ID는 여기 있네요

[20:40] 이걸 가져와서, 같은 프로세스를

[20:43] Postgres DB나 다른 어떤 DB에도

[20:45] 사용할 수 있지만, 아마 이미

[20:48] 싱글톤을 설정해 두었을 거예요

[20:50] 대상 시트 ID는

[20:54] 백틱으로 감싸고

[20:58] 특정 탭 이름은 'website leads'예요

[21:01] 대소문자 구분을

[21:03] 실수하지 않도록 주의하고

[21:06] 나중에 이걸 잠글 거예요

[21:10] 또 뭐가 있나요?

[21:12] 폼 필드와 구글 시트 컬럼 간의

[21:14] 정확한 매핑이 필요한데

[21:18] 컬럼 A부터 M까지네요

[21:23] 이것들이 모두 제대로

[21:27] 되어있는지 확인해야 해요

[21:29] 여기서는 대소문자를 구분하지 않지만, 카멜케이스가 아니라

[21:33] 이메일에서 읽을 때처럼 표시됩니다

[21:37] 예를 들어 'first name'처럼요

[21:42] 7번은 특정 성공/오류 메시지에 일반적인 UX 패턴을 사용하고

[21:47] 8번은 교체 전략 확인

[21:49] 기존 폼 섹션이 전체 제거되나요?

[21:51] 네, 기존 폼 섹션이 전부 제거됩니다

[21:54] 이게 많아 보일 수 있는데

[21:59] 실제로 많은 내용이에요

[22:01] 그리고 이게 좋은 이유는

[22:03] 아무것도 놓치지 않았다는 거죠

[22:05] 더 간단한 작업을 할 때는

[22:07] 이렇게 많지 않을 텐데

[22:09] 이건 여러 가지 폼들이랑

[22:11] 첫 번째 초안에 넣으려고 했던 것들이에요

[22:14] 하지만 이게 핵심이에요

[22:16] 이제 유효성 검사가 들어가고

[22:19] 메시지가 추가되고, 새로운 스타일링이 적용되고

[22:20] 모든 상대 경로를 사용하게 됩니다

[22:25] 우리가 붙여넣은 내용을 보니까

[22:28] 사용자 스토리가 아주 도움이 되네요

[22:31] 성공적인 결과를 위해 필요한

[22:32] 모든 것이 여기 있군요. 자, 이제

[22:35] 이 초안을 다음 형식으로

[22:38] 최종화해서 PRD 예시로 작성하고 복사해서

[22:44] PRD에 작성하겠습니다. 이게 마지막 단계예요

[22:47] 이제 에이전트 모드로 전환하고

[22:50] 기존 PRD가 비어있는지 확인합니다

[22:52] 더 이상 필요하지 않으니까요

[22:55] 이제 시작해볼게요

[22:56] PRD에 작성을 시작했네요

[22:59] 완료됐고 이제 Taskmaster를 사용할 차례입니다

[23:02] 제가 보통 하는 방식은

[23:05] 새로운 창을 열고

[23:07] 에이전트 모드인지 확인하고

[23:08] 여전히 Gemini를 사용하고 있는지 확인합니다

[23:11] Taskmaster를 사용해서 PRD.txt에서

[23:15] 작업을 파싱하도록 할게요. 이전 내용을 지우고

[23:19] 혹시 다른 것을 가져오려 했을 수 있으니

[23:20] 이전 작업 기록도 지웠어요

[23:22] 이전 작업 내역의 관련성도 지웠습니다

[23:26] 항상 새로 시작하는 걸 선호하거든요

[23:28] 이제 실행되는데, 내부적으로는

[23:31] 영상 초반에 설명했던 것처럼

[23:32] 호출하고 적절한 결과를 확인하고 있습니다

[23:36] 올바른 것을 가져오는지 확인하고

[23:37] 잘못된 걸 보고 있네요

[23:40] 스크립트에 없는 것 같아요

[23:43] 실행해보니 제가

[23:45] 첫 번째 것을 Taskmaster에 작성했는데

[23:48] "Taskmaster로 작업을 파싱해줘"라고 했죠

[23:50] 이 모든 걸 기억할 필요도 없었어요

[23:53] 작은 문제가 있었는데 저장 위치를

[23:56] 정의하지 않아서

[23:59] 잘못된 위치를 보고 있었어요

[24:00] 하지만 이제 시작됐고

[24:03] 내부적으로 작업을 생성하고 있습니다

[24:04] 아래로 스크롤하면 프로세스가 끝날 때

[24:07] 작업 폴더가 풍성해질 거예요

[24:10] 이전 내용을 덮어쓰고

[24:13] 멋진 테이블이 생성될 텐데

[24:16] 보지 못하셨다면 아주 보기 좋습니다

[24:19] 지금 Claude가 내부적으로 작업하고 있어요

[24:22] 진행되는 동안

[24:24] 멋진 점들을 살펴보죠

[24:27] 아래로 스크롤해보면

[24:28] 스크린샷이 하나도 없네요

[24:31] 놀랍죠? 멋진 테이블이 생성됩니다

[24:34] 작업들을 파싱했고 이제 작업 JSON이 있어요

[24:37] 여러 부분들을 볼 수 있는데

[24:40] 문의 양식 프로젝트가 있고

[24:41] 클라이언트 측 폼 유효성 검사 구현이 있고

[24:44] 맨 위에서 시작해서

[24:47] 상태도 있습니다

[24:49] 이들은 모두 구조화되어 있어서

[24:51] ID, 제목, 설명

[24:53] 상태, 배열로된 의존성이 있죠

[24:55] 작업들은 여러 다른 작업에 의존할 수 있고

[24:58] 우선순위가 있고

[25:00] 세부사항과

[25:01] 테스트 전략이 있어요. 아주 멋지죠

[25:04] 이 모든 게 여기 있고 다 좋아 보입니다

[25:06] 간단한 작업이에요. 유일하게 지루한 부분은

[25:08] 실제로 필요한 데이터 조각들을

[25:10] 가져오는 것이었고

[25:12] 각각이 여기 있습니다. 다음으로

[25:15] 시작하자고 할게요. 다음 버전에서

[25:18] 출시될 MCP들이 있는데

[25:19] 약간 버그가 있어서

[25:21] 저는 사용하지 않아요. 좋아요

[25:24] 작업 목록을 보니 10개가 표시되네요

[25:26] 보류 중인 작업이 있네요. 태스크마스터가 실행되었고

[25:30] 목록을 시작하죠. CLI 명령어를

[25:33] 참조하고 있는 것을 볼 수 있습니다.

[25:36] CLI에서 taskmaster next나

[25:38] taskmaster list를 실행할 수 있지만

[25:40] 저는 그렇게 하는 것을 선호하지 않습니다.

[25:43] 불필요한 작업이 늘어날 뿐이죠.

[25:46] 지금 실행 중인데, 처음에는 경로를 찾지 못했다가

[25:48] 이제 올바른 경로를 찾았네요

[25:49] 커서 사운드가 켜져 있는지 확인하세요

[25:52] 하지만 지금은 꺼져 있고 작업이 진행되고 있습니다

[25:55] 어떻게 진행되는지 보시죠

[25:57] 작업이 완료되었다고 나오네요

[26:00] 버튼이 제대로 임포트 되었는지 확인해보죠

[26:02] 이전 코드를 대체했고

[26:04] 이제 링크 텍스트가 있네요

[26:06] '새 프로젝트 문의'라고 되어 있어요

[26:08] 우리가 원하던 정확히 그대로죠

[26:12] 지금은 옐로우 모드로 설정되어 있어서

[26:14] 두 번째 작업을 시작하고 있습니다

[26:16] 이게 전부예요

[26:18] 물론 더 많은 기능이 있긴 한데

[26:21] 보여드릴 수 있습니다. 사용 사례 중 하나는

[26:24] 작업이 너무 모호하거나

[26:27] 너무 크게 보이면 작업을

[26:30] 충분히 세분화하지 않은 것입니다

[26:32] 이때 사용하는 키워드는

[26:34] 'research'를 사용하면 됩니다. 보시다시피

[26:38] 지금 작업이 진행되고 있네요

[26:41] 이 테스트는 꽤 큰 작업이네요

[26:43] 여러 입력 폼 설정이 포함되어 있습니다

[26:46] 3번 작업을 살펴보죠

[26:48] 걱정되는 부분이 있네요. 3번으로 넘어가서

[26:51] 폼 컴포넌트 생성을 볼 수 있고

[26:54] 모든 세부 사항이 포함되어 있습니다

[26:56] 이것을 세분화하고 싶어하네요

[26:58] 저는 그대로 진행해도 괜찮지만

[27:00] 확장해보도록 하죠. s expand를 입력하면

[27:03] 여러분께 좋은 사용 사례가 될 거예요

[27:04] 지금 3번 작업을 확장하고 있는데

[27:06] 이는 또 다른 호출을 의미하고

[27:09] 진행되는 동안 엔트로픽 콘솔을 열어서

[27:12] 비용을 확인해보죠

[27:15] 이걸 계속 사용해왔는데

[27:19] 하루에 50센트면 정말 말도 안 되게 저렴하죠

[27:22] 이 정도 수준의 워크플로우를 가질 수 있다니 대단합니다

[27:26] 작업을 어떻게 나눴는지 보죠

[27:29] 어떻게 세분화했는지 보면

[27:32] 폼 구조 설정, 세부 사항 구현

[27:34] 주소 필드 작업, 그 다음 작업들로 나눴네요

[27:38] 이렇게 작은 단위로 나누면

[27:40] 결과물의 품질이 향상될 거예요

[27:43] 폼을 열어서 진행 상황을 보죠

[27:44] 상태를 설정하고 있고

[27:47] 기본 구조부터 시작하고 있습니다

[27:49] 이제 다시 돌아와서

[27:51] 새로운 내용을 추가하고 있어요

[27:54] 32번이 완료되었고, 33번도 완료됐네요

[27:58] 나머지 폼들을 추가하고 있습니다

[28:00] 정말 놀라운 방식이죠

[28:03] 이게 기본 설정인데

[28:05] 잠시 중단하고

[28:07] 완료되면 다시 돌아와서 검토해보겠습니다

[28:10] 보세요, 계속 진행되고 있어요

[28:12] 이제 코딩이 진행 중이니

[28:14] 토스트 한 조각이나 먹으면서 기다리면 되죠

[28:17] 아, 이제 대화를 해야겠네요

[28:19] 4번을 보니 좋아 보입니다. 큰 폼이네요

[28:22] 마음에 들어서

[28:23] 수락하겠습니다. 4번 작업에는

[28:26] ZOD 스키마 작성과 필수 필드 정의,

[28:28] 유효성 검사 통합이 포함되어 있습니다

[28:30] 클라이언트 사이드에서 우리가 원하는 스타일을 적용하고

[28:34] 실패 시 어떻게 처리할지 등을 블로킹하고

[28:37] 각각 다른 부분들이 있기 때문에

[28:40] 확장하고 싶어하네요. 다시 한번

[28:41] 확장 기능을 실행할 건데, 제가 폼 코드를

[28:43] 건드리고 싶지 않아서죠

[28:45] 사실 이게 이 영상의 핵심이었어야 했는데

[28:46] 솔직히 이 세상에 폼을 좋아하는 사람이 있나요?

[28:48] 만약 폼을 좋아하신다면, 왜 그런지

[28:51] 들려주시면 좋겠네요

[28:54] 그리고 제가 디스코드를 런칭했는데

[28:56] 꽤 좋습니다. OpenAI가 오늘

[28:59] 새 모델을 출시할 예정이에요

[29:00] 아직 안 했다면 말이죠. 지금이 동부 시간으로

[29:02] 목요일 오후 3시인데, 제가 온라인에만 살다시피 해서

[29:05] 알고 있는 거예요. 하지만 모든 사람이 그런 건 아니죠

[29:07] 그래서 우리 커뮤니티를 위해

[29:10] 자동화된 피드가 있는 디스코드를 만들었어요

[29:12] Anthropic, OpenAI, Gemini, XAI 등의

[29:16] 모든 뉴스룸 정보를 자동으로 가져오죠

[29:18] 정말 유용한 게, 분류기를 통해

[29:21] 가장 핵심적인 내용 3-5개를

[29:24] 추려서 보여주는데

[29:25] 모든 멤버들이 좋아하더라고요

[29:27] 채널에서 함께 어울리는 것도 좋고요

[29:29] 무료로 시작했는데, 무료는 잘 안 되더라고요

[29:31] 관심도 없는 랜덤한 사람들이

[29:34] 너무 많이 들어와서요

[29:36] 자, 이제 42번 태스크에서 Zod 리졸버를

[29:39] 리팩토링하고 싶어하네요. 아시다시피 validation 관련 부분이죠

[29:45] 그리고 이것과 관련해서 말씀드리고 싶은 건

[29:47] 10개의 태스크 임계값에 도달하면

[29:50] 우리가 생각지도 못한 것들을

[29:53] AI가 생각해내는데

[29:54] 이게 정말 좋습니다

[29:56] 43번도 완료됐네요, 리팩토링 잘했어요

[29:59] 이 도구가 정말 잘하고 있어서

[30:01] 여러분들이 좋아하실 거예요

[30:02] 이걸 이 도구 없이 한다고 생각해보세요

[30:06] 정말 싫어하실 거예요

[30:07] 전 토스트도 못 먹고 새우등처럼 구부정하게

[30:10] 의자에 앉아서 불행하고 슬프게

[30:14] 인생을 후회하고 있었을 텐데

[30:16] 대신 토스트를 먹고 있네요, 진짜예요

[30:18] 좋아요, 5번 서버 액션을 보죠

[30:22] 네, 확장해봅시다

[30:25] 이게 영상 제목이 될 수도 있겠네요

[30:26] '토스트 먹으면서 폼 만들기: 키보드에 버터는 NO'

[30:29] 끝까지 보고 제가 키보드에

[30:31] 버터 묻히지 않는지 확인하세요

[30:33] 버터플라이... 버터플라이 하바치

[30:36] 농담이에요. 자, 이제 서버 액션이

[30:40] 작성되고 검증도 완료됐네요

[30:43] 이건 정말 훨씬 좋아요

[30:46] 제가 처음 이런 도구들을 사용했을 때보다

[30:48] ChatGPT 이전에 코딩하다가

[30:51] 나왔을 때 올인했었죠

[30:53] 와 정말 대단하다고 생각했는데

[30:55] 항상 정확한 건 아니어서 까다로웠어요

[30:59] 자, 6번을 볼까요

[31:01] 폼 데이터를 작성하는 기능이에요

[31:03] 패키지를 사용해서 테스트를 작성하는데

[31:06] 네, 정확하게 되길 바랄 뿐이에요

[31:09] 잠시 일시 정지하고 돌아올게요

[31:10] 이걸 계속 보는 게 지루할 테니까요

[31:11] 이렇게 잘 작동하는 걸 계속 보는 게

[31:13] 산책 좀 다녀왔어요. 이제 이 도구가

[31:16] 제 일을 대신하고 있는 것 같네요

[31:18] 돌아와보니 여전히 훌륭하게 작업하고 있어요

[31:23] 요소들의 크기와 간격을 최적화하고

[31:27] 모든 것이 반응형인지 확인하고 있죠

[31:29] 10번까지 완료되면

[31:31] 테스트를 진행할 겁니다

[31:34] 비디오의 마지막 부분인데

[31:36] 정말 놀라운 건, 방금 대비 검사기를 실행했는데

[31:40] 베이지색을 좀 더 어둡게

[31:43] 만드는 것을 고려해보라고 하네요.

[31:45] 여러분은 대비 검사기를 마지막으로 언제 써보셨나요? 한 번도 없죠?

[31:49] 이제 정말 대단한데,

[31:51] 애니메이션과 전환 효과를 다듬고 있어요.

[31:54] 테스트해볼까요? 이전 것이 제거된 걸 볼 수 있고

[31:56] 이렇게 멋진 폼이 있네요.

[31:59] 클릭하면 나타나는

[32:01] 멋진 애니메이션도 있어요.

[32:04] 좀 너무 길어 보이는데,

[32:07] 스크롤이 있으면 좋겠네요. 자 입력해볼게요.

[32:10] 타입은 어떻게 했더라...

[32:15] 몇 가지 수정할 게 있는데

[32:16] 보니까 제가

[32:17] 여기 옵션들을 깜빡했네요.

[32:21] '큰 집', '유튜브', '진행 중인

[32:23] 프로젝트입니까?' 좋아요, 테스트해볼게요.

[32:28] 이렇게 테스트 문의가 제출되었고

[32:31] 멋진 알림 메시지도 뜨네요. 잘 작동했나요?

[32:35] 아주 잘됐어요. 몇 가지 보이는데

[32:37] 여기서 볼 수 있듯이 타임스탬프가

[32:39] 이름을 대체했고 각각 하나씩

[32:43] 어긋나 있네요. 그래서

[32:45] 돌아가서 수정해야 겠어요. 이건

[32:48] 테스트의 일부인데, 만약

[32:51] 구글 시트를 사용하지 않았다면

[32:52] 이런 문제는 없었을 거예요.

[32:55] 확실히 말씀드리자면, 이걸 추가하고

[32:59] 다음으로 돌아가서

[33:02] 제가 했어야 했던 것처럼

[33:05] 라디오 그룹을 만들어야 했는데

[33:08] 여러분은 이해하실 거예요. 정말 멋지죠.

[33:11] 기존 대화창으로 돌아가서

[33:15] 동일한 창에서 하는 대신

[33:19] 새로운 결과를 위해

[33:23] 새로운 채팅을 시작할 건데

[33:25] 더 나은 결과를 위해 새로운 채팅을

[33:28] 시작하면 실제로

[33:30] 이전 대화가 묶여서

[33:33] 정리되죠. 정말 멋져요.

[33:36] 사용성 문제가 몇 가지 있는데

[33:40] 제출할 때

[33:41] 전달된 타임스탬프가 A열의

[33:46] 자리를 차지했고, 읽기 어려운

[33:49] 형식이었어요. 이메일 액션과 같은

[33:54] 타임스탬프 형식을 따르도록 수정해야겠어요.

[33:58] 이게 첫 번째고

[34:00] 두 번째로는 추가해야 할 게 있는데

[34:05] 폼의 높이를 수정해서 화면을 벗어나지 않고

[34:09] 반응형이 되도록 해야 해요.

[34:12] 반응형으로 만들어서

[34:14] 작은 화면 크기에도 맞춰야 하고

[34:17] 수정이 필요해요. 그리고 라디오 그룹도

[34:20] 작성할 건데, 여기서 영상을

[34:22] 마무리하려고 해요. 왜냐하면

[34:24] 제가 폼을 다시 만드는 걸

[34:26] 보실 필요는 없으니까요.

[34:27] 여기까지 보셨다면 정말 대단하시고

[34:30] 시청해주셔서 감사합니다.

[34:32] 제 보물상자에 접근하고 싶으시다면

[34:34] 아래 댓글을 남겨주세요.

[34:38] 제가 좋아하는 모든 것이 있는데

[34:41] 멋진 UI 예시들이 있고

[34:44] 제가 역설계한 것들이에요.

[34:45] Vzero 로그인 버튼의 디자인이나

[34:47] Clerk의 디자인도 마음에 들어요.

[34:48] 다양한 패턴 관련

[34:50] 내용이 있는데, 주로

[34:52] Next.js와 TypeScript용이지만

[34:55] SPA에 관한 다른 내용도 있어요.

[34:58] 꽤 좋죠.

[35:00] 다양한 데이터 가져오기 패턴이 있고

[35:02] 정말 유용해요. 그리고

[35:04] 곧 출시할 터보 키트도 있는데

[35:06] 이건 완벽하게

[35:08] 구성된

[35:10] 스타터 키트로, AI 코딩을 시작하거나

[35:14] 바이브 코딩을 하는 데 필요한

[35:16] 모든 것이 포함되어 있어요.

[35:19] 이건 제가 만들었고

[35:21] 우리 학교의 Hari가 도와줬어요.

[35:23] 학교와 디스코드에서

[35:25] 정말 재미있게 지내고 있으니

[35:28] 꼭 확인해보세요. 우리는 지금

[35:30] 성장하는 중이라 초기 참여자분들께

[35:32] 큰 할인을 제공하고 있어요. 이건 단순한

[35:34] 학교가 아니라 장기적인

[35:36] 미디어와 AI 시대의 커뮤니티예요. 감사합니다.

[35:39] 다음 영상에서

[35:41] 만나요.