[00:02]
[음악]
[00:04]
Claude가 몇 주 전에 서브 에이전트 기능을 출시했는데
[00:06]
정말 흥미로운 개념이었죠.
[00:08]
하지만 시도해본 사람들은
[00:10]
종종 부정적인 경험을 했습니다.
[00:12]
서브 에이전트가 느리고
[00:14]
토큰을 훨씬 많이 소비하고
[00:16]
무엇보다 더 나은 결과를
[00:17]
가져다주지 않는다고 느꼈거든요.
[00:19]
저도 그런 사람 중 하나였는데
[00:21]
최근에 서브 에이전트를 사용하는
[00:23]
모범 사례를 배우기 시작했고
[00:25]
그것이 완전히 게임을 바꿔놨고
[00:26]
Claude가 더 나은 성능을
[00:28]
일관되게 낼 수 있게 해줬습니다.
[00:30]
그래서 오늘은 제가 서브 에이전트
[00:31]
시스템을 어떻게 생각하고 설계하는지
[00:33]
공유하고 싶습니다. 먼저
[00:35]
Claude가 처음에 왜 서브 에이전트
[00:37]
개념을 도입했는지 이해해야 하는데
[00:39]
Claude 에이전트가 내부적으로
[00:41]
어떻게 작동하는지 모른다면
[00:43]
기본적으로 파일 읽기, 모든 파일
[00:45]
나열하기, 파일 편집 등의
[00:47]
다양한 도구들을 갖춘 에이전트입니다.
[00:49]
일부 도구는 읽기 도구처럼
[00:51]
많은 토큰을 소비할 수 있는데
[00:52]
파일의 전체 내용을 대화 기록에
[00:55]
포함시키기 때문입니다.
[00:57]
Claude에 서브 에이전트 기능이
[00:58]
있기 전에는 모든 작업이
[01:00]
Claude 에이전트 자체에 의해
[01:02]
수행되었는데, 이는 구현을 시작하기 전에
[01:04]
이미 컨텍스트 윈도우의 80%를
[01:06]
사용했을 수도 있다는 뜻입니다.
[01:08]
왜냐하면 그런 파일들은 대량의
[01:10]
컨텍스트를 포함하고 있어서
[01:11]
진행하기 전에 전체 대화를
[01:13]
요약하는 대화 압축 명령을
[01:15]
발생시킬 가능성이 높기 때문이죠.
[01:16]
그리고 아시다시피 대화를
[01:18]
압축할 때마다 성능이
[01:19]
극적으로 떨어집니다. 왜냐하면
[01:21]
이전에 수행한 작업에 대한 컨텍스트를
[01:23]
잃기 시작하기 때문입니다. 그래서
[01:25]
나중에 Claude 에이전트를 위한
[01:27]
태스크 도구를 도입했습니다.
[01:29]
이를 통해 Claude가 다른 에이전트에게
[01:31]
작업을 할당할 수 있게 되었고
[01:33]
이 에이전트는 파일 읽기,
[01:35]
파일 검색을 포함한
[01:37]
정확히 동일한 도구 세트를 가지고
[01:39]
있습니다. 따라서 이 에이전트가
[01:41]
실제로 전체 코드베이스를 스캔하고
[01:43]
변경해야 할 모든 관련 파일이
[01:45]
무엇인지 이해하고
[01:46]
그 정보를 바탕으로 실제
[01:48]
구현을 수행하도록 할 수 있습니다.
[01:50]
이렇게 토큰을 절약하는 방법은
[01:52]
상위 에이전트 관점에서 서브
[01:55]
에이전트가 중간에 수행하는 모든
[01:56]
단계가 상위 에이전트의
[01:58]
대화 기록의 일부가 되지 않기
[02:00]
때문입니다. 서브 에이전트에게
[02:03]
작업을 할당했고 서브 에이전트가
[02:05]
연구 보고서 요약을 가지고
[02:07]
돌아왔다는 것만 볼 수 있고
[02:08]
이것이 다음 최선의 행동을
[02:10]
안내하는 데 사용될 수 있습니다.
[02:12]
이렇게 함으로써 파일 읽기,
[02:14]
파일 검색 작업으로부터 나오는
[02:16]
대량의 토큰 소비를
[02:18]
몇 백 개의 토큰 요약으로
[02:20]
바꿀 수 있지만
[02:21]
여전히 다음 행동을 안내할
[02:23]
가장 중요한 정보는 포함하고 있습니다.
[02:25]
프론트엔드 개발 에이전트가 특별한 규칙과
[02:28]
워크플로우로 프론트엔드 구현만 담당하고
[02:30]
백엔드 구현에 특화된
[02:32]
백엔드 개발 에이전트가 있다면 어떨까 생각했습니다.
[02:35]
그러면 부모 에이전트는
[02:36]
전체 대화를 조율하고
[02:38]
다른 에이전트에게 작업을 위임하기만 하면 됩니다.
[02:40]
처음에는 정말 좋은 아이디어처럼 보였지만
[02:41]
서브 에이전트가 구현한 것이 100% 정확하지 않아서
[02:43]
에이전트가 수정해야 하는 순간이 오면
[02:46]
문제가 시작됩니다. 각 에이전트는
[02:48]
무슨 일이 일어나고 있는지에 대한
[02:50]
매우 제한적인 정보만 가지고 있기 때문입니다.
[02:52]
프론트엔드 개발 에이전트는 자신이 취한 액션과
[02:54]
그 특정 작업에서 생성한
[02:55]
최종 메시지만 알고 있습니다.
[02:57]
백엔드 개발 에이전트도 마찬가지입니다.
[03:00]
클라우드 코드 에이전트에게 프론트엔드 버그가 있다고 하면
[03:02]
프론트엔드 개발자에게 다시 할당하더라도
[03:04]
이것은 단지 새로운 대화를 시작할 뿐입니다.
[03:06]
프론트엔드 개발 에이전트는
[03:08]
이전 프론트엔드 세션에서 무슨 일이 일어났는지
[03:09]
알지 못하고
[03:11]
백엔드 개발자가 이전에 무엇을 했는지에 대한
[03:13]
맥락도 전혀 모릅니다.
[03:15]
따라서 각 작업은 매우 독립적인 세션입니다.
[03:17]
한편, 부모 클라우드 코드 에이전트도
[03:19]
다시 말하지만 매우 제한적인 정보만 가지고 있습니다.
[03:21]
서브 에이전트가 취한 모든 액션을
[03:23]
보지 못하기 때문입니다. 즉,
[03:25]
특정 파일이 생성되었는지,
[03:28]
그 파일에 실제로 무엇이 들어있는지
[03:30]
알 수 없습니다.
[03:31]
부모 에이전트가 보는 것은
[03:33]
프론트엔드 개발자에게 작업을 할당했고
[03:35]
프론트엔드 개발자가 작업 완료했다고 응답하는 것,
[03:37]
백엔드도 마찬가지입니다.
[03:39]
따라서 클라우드 코드 에이전트가
[03:41]
버그를 직접 수정하게 하려면
[03:43]
문제의 원인에 대한
[03:45]
매우 제한적인 정보만 가지게 됩니다.
[03:46]
이 문제는 아마 나중에 해결될 것입니다.
[03:48]
서로 다른 에이전트 간에 맥락을 공유하는
[03:50]
좋은 방법을 찾아서
[03:53]
각각이 항상 무엇이 완료되었는지에 대해
[03:55]
같은 정보를 공유하도록 할 것입니다.
[03:56]
하지만 지금으로서는
[03:58]
각 서브 에이전트를 거의 연구자처럼 간주하고
[04:01]
어떤 종류의 기획과 연구 단계가
[04:04]
현재 AI 코딩 워크플로우를
[04:05]
극적으로 개선할 수 있을지 생각해보는 것이
[04:07]
최선의 방법일 것입니다.
[04:09]
클라우드 코드 팀의 핵심 엔지니어 중 한 명인
[04:11]
Adam Wolf로부터도 비슷한 피드백을 받았는데
[04:13]
서브 에이전트는 정보를 찾고
[04:14]
메인 대화 스레드에
[04:16]
소량의 요약을 제공할 때
[04:18]
가장 잘 작동한다고 했습니다.
[04:20]
이를 통해 아이디어를 얻었습니다.
[04:22]
Vercel AI SDK, Supabase,
[04:24]
Tailwind 같은 각 서비스 제공업체가
[04:27]
최신 문서, 모범 사례,
[04:29]
디자인 지식으로 무장한
[04:31]
에이전트 하나씩을 가지고
[04:33]
이 에이전트가 내 기존 코드베이스를 살펴보고
[04:35]
구현 계획을 파악할 수 있다면 어떨까요?
[04:37]
이것이 바로 제가 시도한 것입니다.
[04:39]
shadcn부터 시작해서
[04:41]
각 서비스를 위한 다양한 전문가 서브 에이전트를
[04:43]
만들기 시작했습니다. shadcn의 경우
[04:46]
관련 컴포넌트를 검색할 수 있는
[04:48]
특별한 MCP 도구에 접근할 수 있고
[04:50]
정말 좋은 프론트엔드 작업이나
[04:52]
Vercel AI를 위한 동일한 디자인을 수행합니다
[04:54]
최신 버전인 SDK v5 문서가 로드된 SDK 전문가나
[04:56]
몇 주 전에 출시된 새 버전이기 때문에
[04:59]
또는 최신 Stripe 문서가 로드된
[05:01]
Stripe 전문가와 더불어
[05:04]
Context 7과 같은 도구들을 사용해서
[05:06]
사용량 기반 가격 책정과 같은 복잡한 설정을
[05:08]
매우 쉽게 할 수 있습니다.
[05:11]
한편, 서로 다른 에이전트 간의
[05:13]
컨텍스트 공유에 대한 최적화도
[05:15]
진행했습니다. 이는
[05:16]
매그너스 팀의 블로그에서
[05:18]
컨텍스트 엔지니어링에 대해 배운 것으로
[05:20]
매그너스가 장기 실행 작업을
[05:21]
어떻게 수행하게 만드는지에 대한
[05:23]
모든 노하우와 팁을 다루고 있습니다.
[05:25]
거기에 많은 좋은 내용들이 있지만
[05:27]
가장 영감을 준 부분은
[05:29]
파일 시스템을 궁극적인 컨텍스트
[05:31]
관리 시스템으로 활용하는 방법이었습니다.
[05:33]
모든 도구 결과를 대화 히스토리에
[05:35]
직접 저장하는 대신
[05:37]
결과를 나중에 검색할 수 있는
[05:40]
로컬 파일에 저장합니다.
[05:42]
그들의 경우, 에이전트가 웹 스크래핑 도구를
[05:43]
실행할 때 전체 콘텐츠 스크립트를
[05:45]
대화 히스토리에 직접 포함시키는 대신
[05:47]
1만 토큰 이상이 될 수도 있는
[05:49]
스크립트 콘텐츠를 로컬 MD 파일에 저장해서
[05:51]
나중에 대화의 어느 시점에서든
[05:53]
검색할 수 있도록 합니다.
[05:54]
그리고 이것이 바로 제가 여기서
[05:56]
설계한 것과 똑같습니다. 문서 클라우드
[05:58]
폴더 안에는 팀이 구현하고자 하는
[06:01]
각 기능의 컨텍스트가 포함된
[06:02]
작업 폴더가 있을 것입니다.
[06:04]
한편, 각 서브 에이전트는
[06:06]
특정 연구 보고서와
[06:08]
구현 계획에 대한 MD 파일을
[06:10]
생성하기 시작할 수 있어서
[06:12]
상위 에이전트가 항상
[06:13]
실행하려는 특정 프로젝트에 대한
[06:15]
모든 정보가 포함된 컨텍스트 파일을
[06:17]
만들 것입니다. 그리고 모든
[06:19]
서브 에이전트는 작업을 시작하기 전에
[06:21]
먼저 이 컨텍스트 파일을 읽어서
[06:22]
전체 프로젝트 계획과 현재 상황을
[06:25]
이해합니다. 그리고
[06:27]
작업을 완료한 후에는
[06:29]
어떤 핵심 단계들을 수행했는지
[06:30]
표시하고 연구 보고서를
[06:33]
문서의 MD 파일로 저장하기 위해
[06:35]
컨텍스트 파일을 업데이트합니다.
[06:37]
그래서 상위 에이전트나 다른 모든 에이전트가
[06:39]
나중에 이 대화를 읽고
[06:41]
더 많은 컨텍스트를 얻을 수 있습니다.
[06:42]
그리고 이 설정은
[06:44]
제 클라우드 코드의 성공률과
[06:45]
결과를 극적으로 향상시켰습니다.
[06:47]
그리고 이것이 오늘 여러분께
[06:49]
빠르게 보여드리고 싶은 내용입니다.
[06:50]
그래서 어떤 타입의 서브 에이전트를
[06:52]
만들 수 있는지에 대한 아이디어를
[06:54]
얻으실 수 있기를 바랍니다.
[06:56]
하지만 본격적으로 들어가기 전에
[06:58]
여러분 중 많은 분들이 처음 창업하시는
[07:00]
분들이라는 것을 알고 있습니다.
[07:02]
제품을 만드는 것은 퍼즐의 한 부분일 뿐입니다.
[07:04]
사용자를 확보하는 방법, 가격을 책정하는 방법,
[07:06]
그리고 고객에게 가치를 증명하는 방법도
[07:08]
배워야 합니다. 그래서
[07:11]
돈을 버는 AI 에이전트라는
[07:12]
무료 자료를 소개하고 싶습니다.
[07:14]
이는 가장 빠르게 성장하는
[07:16]
AI 스타트업 중 하나인
[07:18]
M Studio의 창립자이자 CEO인 디미트리 샤피어가 만든 것으로, 그는 실제 문제를 찾는 것부터 가격 책정과 거래 성사까지 모든 실용적인 과정을 포함한 자신의 전체 여정과 경험을 공유했습니다.
[07:18]
그리고 필수 워크플로우, 도구, 그리고
[07:21]
프로세스들을 다루고 있어요. 심지어
[07:22]
고객들에게 데모를 어떻게 하는지에 대한
[07:25]
구체적인 스크립트와 AI 제품을
[07:27]
구축하고 런칭하는 사람들의 많은 실제 사례들이
[07:29]
포함되어 있는데, 연간 반복 수익이
[07:31]
6자리에서 7자리까지 달성한
[07:33]
케이스들이죠. 그리고 제가 가장 좋아하는 부분은
[07:34]
AI 제품과 서비스의 가격 책정을
[07:36]
어떻게 생각할지에 대한 부분이에요. 기업과 중소기업을
[07:38]
대상으로 하는 다양한 프레임워크와
[07:40]
고객 관점에서 가치를
[07:42]
어떻게 추정할지에 대해 다룹니다. 1시간 이상의
[07:44]
실용적인 가이드와 무료로
[07:46]
사용할 수 있는 가이드들도 포함되어 있어요.
[07:47]
아래 설명란의 링크를 클릭하시면
[07:49]
이 자료를 받을 수 있고, 이런 훌륭한 자료를
[07:51]
제공해준 HubSpot에 감사드립니다. 이제
[07:53]
Claude 코드 서브 에이전트를
[07:55]
구축하기 시작해봅시다. 이런 서브 에이전트를 구축할 때
[07:57]
제가 가지고 있는 일반적인 규칙은
[07:59]
중요한 문서들을 시스템 프롬프트에
[08:01]
직접 포함시켜서 최신 관행을
[08:03]
따를 것이라는 확신을 가질 수 있도록 하고
[08:04]
동시에 중요한 컨텍스트를
[08:06]
검색할 수 있는 랜덤 도구들도 제공합니다.
[08:08]
이 Shadcn 전문가 예시에서, 앞서 언급한 대로
[08:10]
특정 패키지에서 정보 검색을 위해
[08:12]
특별히 설계된 MCP 도구가 있습니다.
[08:14]
하나는 이
[08:16]
Shadcn 컴포넌트 MCP입니다. 이 도구는
[08:18]
컴포넌트, 각 컴포넌트의 예시 코드,
[08:20]
그리고 관련 블록들을 검색할 수 있게 해줍니다.
[08:22]
따라서 전체 컨텍스트를 가질 수 있고
[08:24]
Shadcn을 위한 디자인을 검색하는
[08:26]
또 다른 MCP도 있습니다. 이 MCP는
[08:28]
UI 디자인에 특화된 웹사이트인
[08:31]
Twinx에서 가져온 것이고
[08:33]
이 MCP는 참고용으로 사용할 수 있는
[08:35]
잘 디자인된 UI를
[08:37]
검색해줍니다. 보통 저는
[08:38]
터미널을 열어서
[08:40]
code ~/.claude.json을 실행합니다.
[08:43]
이렇게 하면 글로벌 설정이 열리고
[08:45]
여기에 MCP 서버라는 키가 있는데, 이곳에
[08:47]
Shadcn 컴포넌트와 Shadcn UI 도구를
[08:50]
전달합니다. 그러면 서브 에이전트가
[08:52]
액세스할 수 있게 되고, 어떤 도구에
[08:53]
에이전트가 액세스할지 선택할 수 있습니다.
[08:55]
모델과 컬러를 설정하면 새로운
[08:57]
에이전트가 생성된 것을 볼 수 있어요.
[08:59]
원한다면 에이전트를 추가할 수 있지만
[09:01]
제가 보통 하는 방법은 터미널을 열어서
[09:03]
code ~/.claude를 실행하는 것입니다. 이렇게 하면
[09:05]
모든 프로젝트에 적용되는 Claude 코드의
[09:07]
개인 설정이 열립니다.
[09:09]
그러면 새 에이전트를 생성할 수 있고
[09:10]
프로젝트 특정 에이전트나
[09:12]
모든 프로젝트에서 사용될
[09:14]
개인 레벨 에이전트를 생성할 수 있습니다.
[09:16]
이 예시에서는 개인 레벨을 사용하겠고
[09:18]
Claude를 생성할 수 있어요. 그러면
[09:20]
간단한 설명을 바탕으로 제목, 설명,
[09:22]
그리고 이 서브 에이전트를 위한
[09:23]
시스템 프롬프트를 생성하려고 시도합니다.
[09:25]
여기서 제가 제공한 설명은
[09:27]
세련된 프론트엔드 UI를 설계하는 데 도움을 줄 수 있는
[09:29]
Shadcn 프론트엔드 전문가라는 것입니다.
[09:31]
앞서 언급한 대로 관련 Shadcn MCP가 있어요.
[09:33]
여기에 제가 사용한 특별한 MCP 도구들이 있습니다.
[09:36]
여기에서 생성된 예시를 볼 수 있어요.
[09:37]
보통 이 시점에서 제가 하는 일은
[09:40]
문서를 시스템 프롬프트에 붙여넣거나
[09:42]
특별한 MCP 도구와 이 도구를 사용하는 방법에 대한
[09:44]
규칙들을 첨부하는 것입니다.
[09:46]
MCP 도구에 대한 것입니다. 최종 버전에서는
[09:48]
모든 과정에 대한 규칙들을 포함하도록 설계했습니다.
[09:50]
따라야 할 프로세스에 대한 규칙들 말이죠.
[09:52]
전체적인 계획은 다음과 같습니다.
[09:54]
모든 컴포넌트를 나열하고, 적절한
[09:56]
컴포넌트를 선택하고, 사용법을 알기 위해
[09:58]
예제 코드를 가져오는 것입니다. 그리고
[10:00]
다양한 UI 패턴들을
[10:01]
어떻게 조합하는지에 대한 참고 자료도
[10:03]
블록을 사용해서 관련 시임들을 가져오고
[10:05]
어디에 어떤 컴포넌트 파일을
[10:08]
놓을지에 대한 규칙들도 포함됩니다.
[10:10]
보통 제가 하는 것은 각 서브 에이전트마다
[10:12]
목표를 먼저 추가하는 것입니다.
[10:14]
목표는 상세한 구현 계획을 설계하고
[10:17]
제안하는 것이며, 실제 구현은
[10:19]
절대 하지 않는 것입니다.
[10:20]
작업을 완료하면 디자인 파일을
[10:22]
doc/cloud/doc 파일에 저장하고
[10:25]
마지막에 이 출력 형식을
[10:26]
포함해서 최종 메시지가
[10:28]
다음과 같이 보이도록 지시합니다.
[10:30]
'이 파일에 계획을 생성했으니
[10:32]
진행하기 전에 먼저 읽어보세요.'
[10:33]
이 메시지는 클라우드 코드
[10:35]
부모 에이전트에게 다시 전송되어
[10:37]
모든 사람이 이 파일을 확인해야
[10:39]
한다는 것을 알 수 있습니다.
[10:40]
그리고 실제 구현을 하지 말라는
[10:42]
다양한 규칙들의 목록과 함께
[10:44]
작업하기 전에 컨텍스트 파일을
[10:46]
먼저 확인하여 전체 컨텍스트를
[10:48]
파악하라고 지시합니다.
[10:50]
작업 완료 후에는 이 컨텍스트 파일을 업데이트해야 합니다.
[10:51]
그리고 이것도 제가 관찰한 이상한 행동 중 하나인데
[10:54]
때때로 서브 에이전트가 클라우드 MCP 클라이언트를
[10:55]
실행해서 자기 자신을 호출하려고 합니다.
[10:58]
의심스러운 것은 서브 에이전트가 실제로
[11:00]
우리가 가진 cloud.md 파일을 상속받기 때문입니다.
[11:03]
그래서 혼란을 방지하기 위해 여기에
[11:05]
이 규칙을 추가했습니다.
[11:07]
이 출력 형식과 규칙들, 그리고 목표들은
[11:09]
제가 만든 모든 서브 에이전트에서 거의 동일합니다.
[11:12]
예를 들어, 이 Vercel AI SDK 전문가의 경우에도
[11:14]
출력 형식과 규칙에 대해서는
[11:16]
동일한 구조를 가지고 있습니다.
[11:19]
여기서 유일한 차이점은
[11:20]
최신 Vercel AI SDK 문서에 대한
[11:22]
더 자세한 문서를 추가한다는 것입니다.
[11:25]
이것은 제가 그들의 웹사이트에서
[11:26]
직접 가져온 것입니다. 복사해서
[11:28]
Vercel AI SDK v5에 대한 기본적이고
[11:31]
중요한 페이지들을 시스템 프롬프트에
[11:34]
넣었고, 마이그레이션 가이드도 추가해서
[11:36]
4.0과 5.0의 차이점을 명확히
[11:38]
구분할 수 있도록 했습니다. 이것도 그들 문서에서 가져온 것입니다.
[11:41]
이것이 사용하려는 각 서비스에 대해
[11:43]
전문화된 서브 에이전트를 설정하는
[11:46]
방법의 예시입니다.
[11:48]
이제 시도해보겠습니다.
[11:49]
먼저 Next.js 프로젝트를
[11:51]
shadcn과 함께 설정하고, cd my-app과
[11:53]
claw를 실행합니다. 이렇게 하면
[11:56]
초기 프로젝트가 설정됩니다. 코드베이스를
[11:58]
초기화하고 기본 클라우드 코드 규칙을
[12:00]
생성하기 위해 init을 실행합니다.
[12:02]
그리고 이제 이 cloud.md 파일을
[12:04]
생성하겠습니다. 하지만 cloud.md에서
[12:06]
더 잘 작동하도록 하기 위해
[12:08]
서브 에이전트에 대한 특별한 규칙들을
[12:11]
추가하고 싶습니다. 첫째로, 부모 에이전트가
[12:13]
항상 프로젝트 계획을 doc/task/
[12:15]
컨택트 세션에 유지하길 원합니다.
[12:17]
이 파일을 선택의 소스로 사용하여 유지할 수 있도록
[12:19]
컨텍스트를 유지하고, 작업이 완료된 후에는
[12:21]
반드시 이 MD 파일을 업데이트해야 합니다. 그리고
[12:24]
서브 에이전트에 대한 몇 가지 규칙도 제공하려고 합니다.
[12:25]
이제 서브 에이전트가 두 개 있어서 위임이 가능하고
[12:28]
서브 에이전트에게 작업을 전달할 때
[12:30]
반드시 이 MD 파일명을 함께 전달해야 합니다.
[12:31]
그리고 각 서브 에이전트가 작업을 완료한 후에는
[12:34]
작업을 실행하기 전에 자신이 생성한
[12:35]
문서를 먼저 읽어야 합니다. 이렇게 설정하면
[12:37]
한 번 시도해볼 수 있습니다.
[12:39]
이제 프롬프트를 주겠습니다. ShadCN을 프론트엔드로 하고
[12:41]
Vercel AI SDK를 AI 서비스로 사용해서
[12:43]
ChatGPT 복제본을 만들어 달라고 했습니다.
[12:45]
먼저 UI를 구축하되 서브 에이전트와 상의하여
[12:47]
진행하고, 먼저 컨텍스트 세션 MD 파일을 생성하여
[12:49]
현재 실행 중인 프로젝트에 대한
[12:51]
컨텍스트를 문서화합니다. 그런 다음
[12:53]
ShadCN 에이전트를 트리거합니다.
[12:55]
Ctrl+R로 세부 내용을 열어보면
[12:57]
이 ShadCN 전문가 에이전트에게 매우 구체적인 작업을
[13:00]
제공하는 것을 볼 수 있습니다.
[13:01]
읽어야 할 컨텍스트 파일과
[13:04]
구체적인 작업들을 포함해서 말입니다.
[13:06]
이 서브 에이전트가 가장 먼저 하는 일은
[13:08]
이 컨텍스트 파일을 읽으려고 시도하는 것입니다.
[13:09]
그런 다음 ShadCN 컴포넌트라는
[13:12]
MCP 도구를 실행하기 시작합니다.
[13:14]
이것이 우리가 연결한 특별한 MCP 도구입니다.
[13:17]
다시 에이전트로 돌아가면
[13:18]
관련 도구들을 지속적으로 사용해서
[13:21]
올바른 컴포넌트로 UI를 설계하는 데
[13:22]
도움이 될 수 있는 정보를 검색합니다.
[13:24]
그리고 각 컴포넌트에 대해
[13:26]
사용 방법의 예제 코드도 얻을 수 있습니다.
[13:28]
결국 이 ShadCN 에이전트는 작업을 완료하고
[13:30]
이 UI 설계, 전체 레이아웃, 그리고
[13:32]
사용할 계획된 컴포넌트들에 대한
[13:35]
문서 파일을 매우 자세한 구조로 생성합니다.
[13:37]
이를 바탕으로 부모 에이전트가 이 계획을 읽고
[13:40]
실제 구현을 세분화하기 시작합니다.
[13:42]
잠시 후 한 번에 전체를 완료하고
[13:44]
또한 이 컨텍스트 세션 파일을 업데이트해서
[13:46]
어떤 작업들이 완료되었는지와
[13:48]
전체 아키텍처가 무엇인지를 표시하고
[13:50]
이 애플리케이션을 실행할 수 있습니다.
[13:53]
그런데 Claude Code가 방금 백그라운드 세션을 도입했는데
[13:55]
계속 실행되면서 결과를 모니터링할 수 있어서
[13:56]
정말 유용합니다.
[13:59]
이 UI를 열어보면
[14:01]
모든 세부 상호작용이 고려된
[14:03]
매우 높은 충실도를 보여주며
[14:04]
ChatGPT의 첫 번째 버전과 거의 동일하게 보이고
[14:06]
몇 가지 오류가 있는데
[14:08]
이를 붙여넣고 수정을 시작할 수 있습니다.
[14:11]
이것이 새로운 서브 에이전트 구조가 훌륭한 이유입니다.
[14:13]
모든 실행은 이 부모 에이전트에 의해 수행되므로
[14:15]
완전한 컨텍스트를 가질 수 있습니다.
[14:17]
문제를 해결하는 최선의 방법이 무엇일까요? 좋습니다.
[14:20]
이제 오류가 없고 메시지를 입력하면
[14:23]
좋은 상호작용과 애니메이션도
[14:25]
처리되었습니다. 다음으로
[14:28]
Vercel SDK에 연결하도록 요청할 수 있습니다.
[14:30]
그래서 Vercel SDK 통합을 진행하고
[14:32]
반드시 서브 에이전트와 상의하라고 요청했습니다.
[14:35]
이렇게 하면 Vercel AI SDK 구현 계획자가
[14:37]
트리거됩니다.
[14:39]
이 에이전트 내부에서 다시 먼저 이 컨텍스트 파일을 읽으려고 시도합니다.
[14:42]
그런 다음 전체 코드베이스를 살펴보며
[14:45]
이를 구현하는 최선의 방법이 무엇인지 확인하고
[14:46]
완료 후 Vercel AI SDK에 대한
[14:48]
구현 계획에 대한 문서를 생성하고
[14:51]
또한 이 컨텍스트 세션 MD 파일을 업데이트해서
[14:53]
완료된 작업을 문서화합니다.
[14:55]
그러면 이 부모 에이전트가 전체 구현 계획을 읽고
[14:57]
구체적인 구현 단계를 수립합니다.
[15:00]
완료 후 다시 주목할 점은 완료되었고
[15:01]
이 컨텍스트 파일을 지속적으로 업데이트한다는 것입니다.
[15:04]
이제 이 애플리케이션이 실행됩니다.
[15:06]
그냥 'Hi I'm Jason'이라고 입력하면
[15:09]
이 에이전트가 실제로 대형 언어 모델에 연결되어
[15:10]
한 번에 결과를 반환해주는데
[15:12]
정말 놀라운 부분입니다.
[15:14]
여기서는 서브 에이전트 사용에 대한
[15:16]
모범 사례로 제가 배운 간단한 예시입니다.
[15:18]
더 자세히 알고 싶다면 AI Builder Club에서
[15:21]
방금 보여드린 서브 에이전트들을 생성하는
[15:22]
모든 프롬프트 과정을 붙여넣겠습니다.
[15:26]
또한 우리가 관리하고 있는 Cloud Code 템플릿이 있는데
[15:28]
실제로 테스트했고 프로덕션 환경에서
[15:29]
정말 유용한 훅, 명령어, 에이전트 목록이
[15:31]
포함되어 있습니다.
[15:33]
관심이 있으시다면
[15:35]
아래 링크를 클릭해서 AI Builder Club에 가입하세요.
[15:37]
매주 세션을 통해 매주 배운
[15:39]
모범 사례를 논의하는 시간도 있습니다.
[15:40]
이 비디오를 즐겁게 보셨기를 바랍니다.
[15:42]
감사하고 다음에 뵙겠습니다.
[15:44]
[15:48]
[15:50]
[15:52]
[15:53]
[15:55]
[15:56]
[15:59]
[16:00]