Transcript
00:00:00대부분의 AI 기능과 앱은 똑같은 문제를 가지고 있습니다. 보기엔 좋지만 실제로는 그냥 채팅창에 불과하죠.
00:00:06화면 한쪽에 붙어 있어서, 뭔가를 물어보면 마크다운이나 표를 보여주고,
00:00:11심지어 여러분이 해야 할 일을 몇 문단으로 설명해주기도 하죠. 하지만 에이전트가 그냥 말만 하는 게 아니라면 어떨까요?
00:00:17이것은 Copilot Kit입니다. 실제 컴포넌트를 렌더링하고, 앱과 실시간 상태를 공유하며,
00:00:23무언가를 변경하기 전에 승인을 요청할 수 있죠. 과연 AI 기능을 더 제품의 일부처럼
00:00:29느껴지게 만들 수 있을까요? 한번 알아보죠.
00:00:37먼저 많은 사람들이 앱에 AI를 추가한다고 생각하지만, 실제로는 앱 내부에
00:00:43두 번째 앱을 하나 더 넣는 것과 같습니다. 여러분의 제품은 저쪽에 있고 AI는 여기 있어서, 사용자는
00:00:49뭔가 제대로 작동하게 하려면 머릿속으로 맥락을 계속 옮겨가며 복사해야 합니다. 그냥 기본적인
00:00:54Q&A 구조만 필요하다면 괜찮지만, 에이전트가 상태를 업데이트하게 하거나
00:01:00도구를 호출하거나 실제 워크플로우 속에서 사용자와 함께 작업하게 하려는 순간 벽에 부딪히게 됩니다. 이제 여러분은
00:01:07스트리밍 이벤트, 상태 동기화, 승인 절차 등을 만들게 되고, 다들 조금씩 다른 방식으로
00:01:14같은 기능을 다시 만들고 있죠. Copilot Kit은 이 문제를 정면으로 다룹니다. 어떻게 하면 더 나은 챗봇을 만들까가 아니라,
00:01:20어떻게 하면 에이전트가 앱 내부에서 네이티브처럼 느껴지게 할까를 고민합니다. 데모부터 시작해서,
00:01:26무엇이 진짜이고, 무엇이 유용하며, 무엇이 좀 과한 것인지 분석해보겠습니다. 만약 여러분이
00:01:32워크플로우를 빠르게 해줄 코딩 도구를 좋아하신다면 구독해주세요. 계속해서 영상이 올라옵니다. 자, 그럼
00:01:37이제 보시죠. 깨끗한 터미널에서 시작해 Copilot Kit에서 가져온 설치 명령어를 실행합니다.
00:01:42이것이 앱을 스캐폴딩하고 제대로 시작할 수 있는 지점을 제공해주죠. 우리가 보통 진짜 시작하는
00:01:49다른 프로젝트들과 똑같습니다. 그냥 빈 채팅 말풍선이 아니라, 프론트엔드 조각들이 이미
00:01:56서로 연결되어 있어서 우리가 원하는 실제 경험을 바로 테스트해볼 수 있습니다. 이제 개발 모드를 실행하면,
00:02:02자, 로컬에서 실행 중인 앱입니다. 물론 이 부분은 익숙하죠. 채팅창이 있네요.
00:02:09하지만 이게 정말 흥미로운 부분의 전부는 아닙니다. 진짜 멋진 부분은
00:02:13에이전트가 UI와 연결되었을 때 일어나는 일이죠. 인터페이스에 질문을 하나 해보겠습니다. 자, 여기 보면요.
00:02:21여기서 중요한 점을 주목하세요. 에이전트는 그냥 텍스트 덩어리로만 답하는 게 아닙니다. 응답을 스트리밍하고,
00:02:26도구를 호출하고, 앱 내에서 실제 컴포넌트를 렌더링할 수 있습니다. 이게 Copilot Kit에서
00:02:32가장 큰 변화입니다. 이제 AI는 인터페이스를 설명만 하는 게 아니라, 그 일부가 된 거죠.
00:02:38이제 한 단계 더 나아가 보죠. 여기 팔로업 질문을 하나 해볼게요.
00:02:46자, 여기서 다른 많은 에이전트들은 그냥 넘어갈 부분을 보세요. 우리 에이전트는 잠시 멈추고 승인을 요청합니다.
00:02:52승인을 요청한다는 바로 그 점이 중요한 겁니다. 제가 정말 좋아하는 부분이죠. 왜냐하면
00:02:57실제 소프트웨어에서 제어권은 선택 사항이 아니니까요. 우리 사용자들에겐 여전히 최종 결정권이 필요합니다.
00:03:03자, 데모 멋졌죠? Copilot Kit을 설명하는 가장 쉬운 방법은 이것입니다. Copilot Kit은
00:03:09에이전트 앱을 위한 프론트엔드 스택입니다. 그냥 채팅 컴포넌트도 아니고, 다른 LLM API의 래퍼도 아닙니다.
00:03:15제품 내부에 존재하는 AI 경험을 만드는 데 필요한 모든 조각을 제공합니다. 여기서 알아야 할
00:03:23네 가지 요소가 있습니다. 첫 번째는 AGUI입니다. AGUI는 에이전트와 프론트엔드가 대화하는 방식을 위한
00:03:31개방형 이벤트 기반 프로토콜입니다. 지금 에이전트 툴링은 연결 문제가 있습니다. LangGraph,
00:03:37CrewAI, 사용자 지정 에이전트, 그리고 오늘 아침에 새로 나온 프레임워크까지, 다들
00:03:43우리 앱에 넣어보려고 하죠. 그러면서 React 앱, 모바일 앱, 대시보드 등 온갖 것들을
00:03:48저글링하고 있습니다. 모두 공유 프로토콜 없이 처리되고 있죠.
00:03:55모든 백엔드가 프론트엔드마다 커스텀 코드를 짜야 합니다. AGUI는 에이전트와 인터페이스 사이의 공유
00:04:01언어가 되려 합니다. 메시지, 상태 업데이트, 도구 호출, UI 이벤트 등이 모두 공통 이벤트 스트림을 통해 흐르죠.
00:04:07그다음은 생성형 UI입니다. 모델이 텍스트만 반환하는 대신 에이전트가
00:04:14실제 컴포넌트를 트리거할 수 있죠. 무작위 HTML이 아니라, 필요한 순간에 여러분의 UI가 렌더링되는 것입니다. 그 다음은 공유
00:04:22상태, 혹은 Copilot Kit이 부르는 Co-Agents입니다. 프론트엔드와 에이전트 백엔드가 양방향으로
00:04:29상태를 공유할 수 있죠. 사용자가 뭔가를 바꾸면 에이전트가 반응하고, 에이전트가 업데이트하면 UI가
00:04:35반영합니다. 사용자와 에이전트가 같은 객체를 가지고 작업하는 도구, 대시보드 등을 만들 때 정말 엄청난 기능입니다.
00:04:41마지막으로 휴먼 인 더 루프입니다. 이건 정말 중요한 부분입니다.
00:04:47많은 에이전트 데모들이 마치 완전한 자율성이 최고의 경험인 것처럼 굴지만, 실제로는
00:04:52꼭 그렇지는 않습니다. 실제 제품에서 사용자들은 권한과 통제권을 원합니다.
00:04:59전송 전 확인, 생성 전 승인, 옵션 선택 등등 이 모든 것을 Copilot이 지원합니다.
00:05:05물론 모든 사람에게 Copilot이 정답은 아닙니다. Vercel AI SDK 같은 것과 비교하면,
00:05:10Copilot Kit은 더 '배터리 포함' 방식입니다. 스트리밍 채팅,
00:05:17생성형 UI, 상태 공유, 인간 승인 패턴을 바로 사용할 수 있죠. Copilot Kit은
00:05:23완전한 제품 레이어에 가까워지고 있습니다. Vercel AI SDK는 더 가볍고, 더 낮은 레벨의 제어권을 제공하죠.
00:05:31아키텍처의 모든 부분을 직접 관리하고 싶다면, 그쪽이 훨씬 더 적합할 겁니다. 하지만
00:05:38Copilot Kit과 직접 모든 것을 구축하는 것을 비교한다면, 후자가 이기기 정말 어렵습니다.
00:05:43왜냐하면 어려운 부분은 채팅 말풍선을 렌더링하는 게 아니거든요. 그건 이제 쉬운 일이 됐죠.
00:05:49어려운 건 그 주변의 모든 것들입니다. 물론 트레이드 오프는 있습니다. 가벼운 AI SDK보다는
00:05:54무겁게 느껴질 수 있고, Copilot Kit의 패턴을 따라야 하죠. 또, 일정 부분은 무료지만,
00:06:02솔로 프로젝트로 놀 때는 정말 멋지지만, 규모를 키우려고 할 때는 다 무료가 아니라는 점이
00:06:08조금 짜증날 수도 있습니다. 혹시 이 기능에 대한 완전한 오픈 소스 대안을 아신다면
00:06:14댓글로 알려주세요. 저도 지금 찾고 있거든요.
00:06:19Copilot Kit을 쓸 때는 무엇이 오픈 소스인지, 무엇이 키가 필요한지,
00:06:25무엇이 호스팅되고 유료인지 이해해야 합니다. 이건 Copilot을 비난하려는 게 아니라,
00:06:32무료인지 아닌지를 이해해야 한다는 거죠. 단순한 지원용 챗봇만 필요하다면 Copilot Kit은
00:06:38아마 과할 겁니다. 하지만 에이전트가 여러분의 UI와 앱 상태를 가지고 작업하는 에이전트 UX를 원한다면
00:06:44정말 멋진 도구입니다. 그러니 Copilot Kit을 써야 할까요? 만약 여러분이 진지한 인앱 AI를 만들고 있다면
00:06:50한번 시도해보세요. 특히 React나 Next.js를 사용 중이고, AI가 단순히 사이드 패널이 아니라
00:06:56제품의 일부처럼 느껴지길 원한다면 아주 좋습니다. 정말 빠르게 시작할 수 있고,
00:07:02다양한 컴포넌트 덕분에 워크플로우에 적용하기가 매우 실용적입니다. 만약 이미
00:07:07본인만의 스트리밍, 상태 관리, 도구 호출 UI를 이미 구현했다면 바꿀 가치가 없을 수도 있습니다. 그리고 만약 여러분의
00:07:13기능이 말 그대로 질문하고 답변받는 게 전부라면 Copilot Kit은 너무 과한 도구가 될 것입니다.
00:07:19그럴 땐 전체 에이전트 프론트엔드 스택까지는 필요 없으니, 그냥 더 가벼운 걸 쓰세요. 자, 개발해서 출시하세요.
00:07:25계속 앞으로 나아가세요. 이런 코딩 도구들이 재미있었다면 Better Stack 채널을 구독해주세요.
00:07:30다음 영상에서 뵙겠습니다.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video