스크립트
00:00:00모두 참석해 주셔서 감사합니다. 오늘은 제가 지금까지 작성했던 소프트웨어 중 가장 기묘한 것에 대해 이야기하려고 합니다.
00:00:18제가 세상에 내놓았던 수많은 아이디어들의 경계선상에 있는 작품이죠.
00:00:22자, 함께 해 주시죠. 에이전트와 MCP 등 기타 기술들이 가능하게 만든 아주 낯선 것에 대해
00:00:27가장 합리적인 방식으로 접근해 보겠습니다. 자, 시작해 볼까요.
00:00:34먼저 MCP 앱에 대해 이야기하고 싶습니다. 혹시 오늘 일찍 진행된 다른 세션에 참석하신 분 계신가요?
00:00:38약 한 시간 전에 Ido와 Liat이 진행했던 세션 말입니다. 손을 한번 들어볼까요?
00:00:44MCP 앱에 대해 익숙하신 분들요. 좋습니다. 오늘 제 발표를 들으러 오신 분들이 역대급으로 가장 잘 아시는 청중인 것 같군요.
00:00:52정말 환상적이네요. 손을 들지 않으신 분들을 위해 설명하자면, MCP 앱은
00:00:57올해 1월쯤에 도입된 MCP 프로토콜의 확장 기능입니다. 그 개념은 이렇습니다.
00:01:02이것은 일반적인 MCP 툴의 요청-응답 주기입니다. 사용자가 에이전트에 요청을 보내면, 에이전트는
00:01:10MCP 서버에 호스팅된 MCP 툴을 사용하기로 결정합니다. 툴의 결과가
00:01:16에이전트의 컨텍스트로 들어오고, 에이전트는 응답을 구성하여 사용자에게 보냅니다. 따라서
00:01:23근본적으로 MCP 서버는 에이전트에 기능과 비즈니스 로직을 추가하는 환상적인 방법이지만,
00:01:28사용자와 MCP 서버 사이에 직접적인 연결은 존재하지 않습니다. 항상 에이전트의 두뇌를 거치며,
00:01:34더 중요하게는 에이전트의 컨텍스트 윈도우를 거치게 됩니다. 따라서 MCP 앱은 이를 확장한 것으로,
00:01:40실제로 우리가 에이전트를 우회할 수 있게 해줍니다. 대신 다음과 같은 일이 일어납니다.
00:01:44사용자가 에이전트에 무언가를 요청하면, 에이전트는 툴을 사용하지만, 그 툴 요청이 에이전트로 돌아가는 대신
00:01:49사용자에게 전송됩니다. HTML, CSS, JavaScript 형태로 전달되며 완전한 UI입니다.
00:01:55여러분이 원하는 어떤 모습으로든 만들 수 있습니다. 즉, 기본적으로
00:02:01인터넷을 에이전트 안에 집어넣는 방법이라고 할 수 있습니다. 맞춤형 브랜딩이 적용된 유용한 UI를 자유롭게 배포할 수 있죠.
00:02:08사용자가 원하는 모든 인터랙티브 경험을 제공할 수 있습니다. 그러면 다이어그램에서 볼 수 있듯이
00:02:12이제 사용자는 애플리케이션과 상호작용할 수 있습니다. 툴을 사용할 수도 있고,
00:02:17해당 앱에 호스팅된 백엔드로 정보를 다시 전송하여 진정한 완전한 경험을 누릴 수 있습니다.
00:02:21식당 테이블을 예약하거나, 비행기 좌석을 변경하거나, 일정을 관리하는 모습을 상상해 보세요.
00:02:28AI 엔지니어의 입장에서, 이제 에이전트가 촉진하되 인간으로서 직접 상호작용하는 작업들을 많이 할 수 있습니다.
00:02:33그리고 새로운 확장 기능이 곧 출시될 예정입니다. 7월 MCP 릴리스에
00:02:37나올 예정인데, 에이전트도 앱과 상호작용할 수 있게 됩니다. 이를 통해
00:02:43오늘 다루지는 않겠지만 아주 흥미로운 사용 사례들이 많이 생겨날 것입니다. 예를 들어
00:02:47시각적 앱 안에서 여러분이 수를 두고 에이전트가 앱과 상호작용하는 방식으로 에이전트와 체스 게임을 즐길 수도 있겠죠.
00:02:52이로 인해 완전히 새로운 가능성의 세계가 열릴 것이라고 생각합니다. 자, 여러분 중에는
00:02:55제가 만들었고 제 회사가 유지 관리하는 FastMCP라는 프레임워크를 아시는 분도 계실 겁니다.
00:03:03FastMCP는 MCP 서버를 구축하는 가장 인기 있는 방법 중 하나입니다. 따라서 MCP 세계에 새롭고 멋진 기능이 등장할 때마다
00:03:09제가 가장 먼저 하는 고민은 '이것을 우리 사용자들에게 어떻게 제공할 수 있을까?' 하는 것입니다.
00:03:16우리 사용자층에 대해 말씀드려야 할 가장 중요한 점 중 하나는 그들이
00:03:20대부분 파이썬 엔지니어라는 사실입니다. 그래서 프론트엔드와 UI를 제공하려고 할 때 약간의 문제가 발생합니다.
00:03:27도대체 어떻게 이걸 구현해야 할까요? 바로 이 대목에서 제가
00:03:31다음 슬라이드가 정확히 뭔지 까먹었다는 사실을 실토하게 되네요. 잠시 확인해 보겠습니다.
00:03:35아니죠, 다시 돌아오겠습니다. 우리에게는 이제 과제가 생겼습니다. 파이썬 엔지니어들이
00:03:42모범 사례에 부합하고, 인터랙티브하며, 아름답고, 유용한 UI를 어떻게 구축하게 만들 것인가?
00:03:50이미 시도되었다가 실패한 멍청한 짓을 반복하면서 프론트엔드의
00:03:54모든 생태계와 요소들을 파이썬 안에 억지로 쑤셔 넣는 기괴하고 타협적이며
00:04:00주먹구구식인 프랑켄슈타인 같은 시스템을 만들 척하지 않으면서 말이죠. 그래서 정말 고심했습니다.
00:04:04이를 제공할 방법을 찾아야 한다는 강박을 느꼈죠. 하지만 파이썬 안에서 React를 구현할 거라고
00:04:10시치미를 뗄 수는 없습니다. 그런 식으로는 안 되니까요. 그래서 FastMCP 생태계의 사용자가
00:04:15과연 누구인지 깊이 고민해 보았습니다. 주로 기업에 속해 있는 이 파이썬 개발자들은
00:04:20무엇을 하고 있으며 UI가 왜 필요할까요? 이 MCP 앱들이 왜 필요한 걸까요?
00:04:25그들에게 필요한 것은 완전한 브랜딩이 적용된 소비자용 맞춤형 UI가 아닙니다. 이들이 하는 일은 그런 게 아니죠. 이들이 주로
00:04:34담당하는 일은 조직 내부에 정보를 공유하고, 조직 전반에서
00:04:38정보를 수집하는 것입니다. 따라서 MCP 앱 프레임워크 내에서 그들이 수행하기를 기대하는 작업의 성격도 달라집니다.
00:04:43그리고 그 제약 조건이 매우 유용하다는 사실을 깨달았습니다. 기본적으로 우리가 예상하는 바는
00:04:48테이블을 만들고, 양식을 통해 정보를 수집하며,
00:04:53차트를 공유하고 싶어 한다는 점입니다. 이러한 제약 조건을 바탕으로,
00:04:58우리는 몇 달 전에 오픈소스로 공개했고 이 집단에서 놀라울 정도로 인기를 끌고 있는 소프트웨어를
00:05:03소개할 수 있게 되었습니다. 바로 Prefab이라는 것입니다. 이것은 방금 말씀드린 목적들을 위해
00:05:11에이전트를 통해 UI를 제공하기 위한 목적 지향적 UI 구축 프레임워크입니다. 이것은 헬로 월드 카드입니다.
00:05:17어떤 프론트엔드 프레임워크에서든 볼 수 있을 겁니다. 말 그대로 어떤 프레임워크에서든요.
00:05:22이와 비슷한 모양새를 하고 있으며, 웹사이트에 들어가 이름을 입력하면 실시간으로 업데이트되죠.
00:05:27하지만 이 예시에서 기묘한 점은 이를 생성한 코드가 전적으로
00:05:31파이썬으로 작성되었다는 것입니다. 이 코드를 볼 때 제가 느끼는 감정을 여러분도 느끼시길 바랍니다.
00:05:38정말 멋지면서도 동시에 묘하게 오싹한 기분이 드는 조합이죠. 멋지다는 생각은
00:05:44가까이서 볼 수 없더라도 이 코드에는 묘한 매력이 있다는 사실에서 비롯됩니다. 조금 더 크게 키워볼 수도 있는데,
00:05:48이 코드에는 왠지 일리가 있는 구석이 있습니다. 코드 안에서 UI의 구조를
00:05:52눈으로 확인할 수 있죠. 하지만 동시에 뭔가 이질적이고 약간은 기묘한 느낌도 듭니다.
00:05:58그런 감정을 느낄 때 우리는 다음과 같은 결론에 도달하게 됩니다.
00:06:04파이썬으로 프론트엔드를 구성할 때, 과제를 올바르게 한정 짓기만 한다면 실제로 꽤 괜찮게 느껴진다는 것입니다.
00:06:09우리는 처음부터 프론트엔드를 구축하려는 게 아닙니다. 최고 수준의 잘 설계된
00:06:15컴포넌트들을 조합해서 프론트엔드를 구성하려는 것이죠. 바로 이것이 안전장치를 유지하고
00:06:20사용자를 염두에 두는 방법입니다. 여기서 사용자는 무언가 임의의 작업을 하려는 것이 아닙니다.
00:06:24잘 구조화된 프론트엔드를 가져와 그것을 전달하려는 대상에게 보여주려는 것뿐입니다.
00:06:29그럼 이 DSL에 대한 간단한 투어를 시작하겠습니다. 주로 컨텍스트 매니저를 사용하고 있습니다.
00:06:34FastMCP를 아시는 분들이라면 알겠지만, FastMCP의 핵심 혁신은
00:06:39파이썬 데코레이터를 사용하여 전체 MCP 서버를 구축했다는 점으로 요약할 수 있습니다.
00:06:44Prefab에도 똑같이 단순화된 접근 방식을 적용하자면, 컨텍스트 매니저를 사용하여
00:06:48전체 UI를 구축한다고 말할 수 있습니다. 여기서 보시는 것처럼 컴포넌트를 컨텍스트 매니저로 중첩하면
00:06:55UI와 정확히 일치하는 구조가 구축됩니다. 코드를 읽을 때 매우 자연스럽게 느껴지며
00:07:01구조가 어떻게 짜여 있는지 한눈에 볼 수 있습니다. UI의 각 요소와 컴포넌트는
00:07:06렌더링될 때 멋진 shad-sian 컴포넌트가 되는데, 보시다시피 인스턴스화하는 클래스입니다. 매개변수를 지정할 수도 있고,
00:07:11CSS 클래스 같은 것을 전달하여 원하는 대로 꾸밀 수 있습니다. 그리고 마지막으로 오늘 시간 관계상
00:07:17깊게 다루지 못할 부분은 바로 이 반응형 변수들입니다. 잠시 후에 데모를 보여드리겠습니다.
00:07:21기본적으로 클라이언트 측 상호작용을 생성하고 컴포넌트 간에 데이터를 바인딩하는 완전한 방법이 마련되어 있어,
00:07:26사용자층이 매우 익숙해하는 생태계를 굳이 떠나서
00:07:31자바스크립트 생태계로 완전히 넘어가거나 제 사용자 기반이 대개 아주 익숙해하는 생태계를 떠나지 않고도
00:07:36에코시스템을 벗어나지 않으면서 이러한 풍부한 경험을 구축할 수 있게 해줍니다. 그리고 이것이 프리팹이 제공하는 파이프라인입니다.
00:07:42이를 통해 UI의 선언적 표현을 구축합니다.
00:07:46그런 다음 이 표현은 JSON 프로토콜로 직렬화됩니다. 그리고 그 JSON 프로토콜은
00:07:53실제 MCP 앱으로 호스팅되는 React 앱에 의해 최종적으로 렌더링됩니다. 이것은 우리에게 정말 많은 가능성을 열어줄 것입니다.
00:07:59이 역시 잠시 후에 보여드리겠습니다. 하지만 이 모든 과정의 핵심은
00:08:02중간에 있는 JSON입니다. 파이썬은 사실 제가 원했던 기묘하고 독특한 요구사항 때문에
00:08:07사후에 우연히 발견하게 된 부산물에 가깝습니다. 이 작업의 본질은 다음과 같았습니다.
00:08:10“UI의 직렬화 가능한 표현을 만들 수 있을까?” 그것이 바로 앞서 말한 JSON 프로토콜입니다.
00:08:17직렬화가 가능하기 때문에 에이전트로부터 생성할 수도 있고, 에이전트에 보낼 수도 있습니다. 인간으로서 생성하여
00:08:22에이전트에게 수정을 요청할 수도 있죠. JSON이라는 이 중간 표현 덕분에 이 모든 멋진 일들이 가능해집니다.
00:08:26그리고 파이썬 DSL은 이 과정에서 자연스럽게 파생되었는데, 정말 아름답고 사용하기 쉬워서
00:08:31뭔가 제대로 된 걸 만들어냈다는 느낌이 들었습니다. 그래서 우리는 문서도 마련했습니다. 그 점을 입증하기 위해
00:08:37우리가 수용한 또 다른 제약 조건이 있습니다. 이게 뭔지도 잘 모르겠네요. 이건 Prefab의
00:08:42데이터 테이블 컴포넌트 문서입니다. 임의의 형태로 조합할 수 있도록 우리가 제공하는 컴포넌트가 130개 혹은 140개 정도 되는 것 같네요.
00:08:47Prefab의 문서는 100% Prefab으로 렌더링됩니다. 따라서 기본 사용법에 나와 있는 이 데이터 테이블은
00:08:55Prefab에서 실시간으로 렌더링된 것입니다. 화면 하단에 살짝 보이는 저 파이썬 코드는
00:09:01이를 생성하기 위해 렌더러에 의해 실시간으로 렌더링되고 있는 파이썬 코드입니다.
00:09:05원하신다면 Prefab 문서의 아무 예시나 골라 링크를 클릭한 뒤 플레이그라운드로 가져가서
00:09:09파이썬 코드를 실시간으로 편집하며 UI가 업데이트되는 모습을 확인할 수 있습니다. 다시 말씀드리지만,
00:09:15이건 정말 기묘합니다. 이 방식이 조금 불편하게 느껴지셔도 괜찮습니다.
00:09:20문제를 제한하고 UI를 직접 구축하는 것이 아니라 구성하는 것이라는 점을 기억하면
00:09:24훨씬 더 이해하기 쉬워집니다. 이제 처음 말씀드렸던 주제, 즉 MCP 서버와
00:09:29더 구체적으로는 MCP 앱에 대해 이야기해 보겠습니다. 어떤 프론트엔드 문제든 Prefab을 사용하실 수 있습니다.
00:09:34제 팀에서는 소규모 대화형 데이터 앱이나 탐색용 도구에 Prefab을 사용하기 시작했습니다.
00:09:39프레젠테이션을 제작하는 데도 활용해 왔죠. 슬라이드와 프레젠테이션을 만들 수 있도록
00:09:43지금 제가 보여드리는 화면과 비슷한 느낌의 다크 모드 테마도 기본 제공합니다. 정말 다양한 작업을 할 수 있죠.
00:09:48하지만 우리가 이 기술을 만든 진짜 이유는 MCP 서버를 지원하기 위함입니다. 따라서 이를 활용할 수 있는
00:09:54세 가지 방법, 점점 더 고도화되는 세 가지 활용 방안을 빠르게 소개해 드리겠습니다.
00:09:58MCP 서버에서 사용할 수 있습니다. 첫 번째는 인터랙티브 도구를 만드는 것입니다. 강연 시작 부분에서 보여드렸듯이,
00:10:04일반적인 MCP 도구는 에이전트가 호출하고 그 결과를 받기만 할 뿐, 사용자가 직접
00:10:09상호작용할 방법은 전혀 없습니다. 그렇다면 이 대화형 기능을 발전시킬 수 있는 가장 쉬운 방법은 무엇일까요?
00:10:14지금부터 보여드리겠습니다. 이건 Fast MCP 도구입니다. 보시다시피 도구 데코레이터가 지정되어 있으며,
00:10:20일부 정보를 반환하는 단순한 파이썬 함수입니다. 명심할 점은 이 정보가 사용자가 아니라
00:10:24에이전트에게 전달된다는 것입니다. 이 기능을 Prefab을 이용해 완전한 대화형 도구로 전환하려면
00:10:30단 한 가지만 바꾸면 됩니다. 에이전트로 전달될 파이썬 딕셔너리를 반환하는 대신
00:10:36Prefab 컴포넌트를 반환하는 것입니다. 여기서는 데이터 테이블이 되겠네요. 방금 전에
00:10:40문서로 보여드렸던 바로 그 컴포넌트입니다. 이 Prefab 컴포넌트를 반환하면 Fast MCP가 이를 자동으로 감지하여
00:10:46사용자가 실제로 MCP 앱을 반환하려 한다는 것을 유추하고, HTML, 자바스크립트, CSS, 렌더러 등
00:10:51HTML, 자바스크립트, CSS, 렌더링 등 모든 필요한 요소를 작동시켜
00:10:55실제로는 이런 모습입니다. 뛰어난 클라이언트인 Goose 클라이언트를 사용한 예시인데요,
00:11:00방금 보여드린 함수가 있는 서버에 팀 디렉터리를 보여달라고 요청했습니다. 그러면 (GIF로 보여드렸으면 더 좋았을 텐데 죄송합니다)
00:11:06완전한 대화형 데이터 테이블 컴포넌트가 화면에 팝업으로 나타납니다.
00:11:10검색, 필터링, 정렬, 페이지네이션 등 온갖 기능을 지원합니다. 그리고 이 모든 것이 아까 보여드렸듯이
00:11:16데이터 테이블 클래스를 반환하기만 하면 알아서 처리됩니다. 여기서 한 걸음 더 나아갈 수도 있습니다.
00:11:21데이터 테이블뿐만 아니라, 팀 디렉터리를 세분화해서 보여주는 원형 차트를 데이터 테이블 바로 옆에 띄우고 싶다면 어떨까요?
00:11:26상상하시듯 코드가 매우, 매우, 매우 유사합니다.
00:11:30데이터 테이블만 쓰는 대신, 이제 그리드와 원형 차트를 임포트하여 사용할 것입니다.
00:11:35하단을 보시면 아시겠지만, 컨텍스트 매니저를 이용해 원형 차트와 데이터 테이블을
00:11:40아주 자연스럽게 그리드 안에 배치할 수 있습니다. 그 결과물이 바로 이것입니다.
00:11:45데이터 테이블 옆에 원형 차트가 나란히 나타납니다. 이는 저희가 Prefect의 많은 소프트웨어에서
00:11:51철칙으로 여기는 원칙, 즉 '한 줄의 코드, 하나의 눈에 띄는 변화'를 따릅니다.
00:11:55복잡성이 점진적으로 증가하도록 유지하려 하며, 이는 프레임워크와 DSL에서 정말 중요하다고 생각하는
00:11:59많은 요구를 충족해 줍니다. 시간 관계상 깊게 다루지는 못하겠지만 아주 빠르게 넘어가자면,
00:12:05이것은 제가 직접 만들고 녹화한 완전한 클라이언트 측 상호작용의 예시입니다.
00:12:09모든 컨트롤이 서로 연동되어 있고, 항목과 텍스트, 값들이 실시간으로 업데이트되지만
00:12:15자바스크립트를 전혀 작성하지 않았습니다. 이건 그냥 똑같은
00:12:19속성이 지정된 몇 가지 클래스를 조합해 알아서 작동하게 만든 것입니다.
00:12:24아, 그리고 그 코드가 어떻게 생겼는지 간단한 예시도 넣어봤습니다. Rx라는 클래스가 있는데,
00:12:28짐작하시겠지만 리액티브(reactive)를 의미합니다. 이 리액티브 변수들을 사용하면 코드 어디서든
00:12:33참조하고 포맷을 지정하며 무언가의 이름으로도 만들 수 있으며, 그러면
00:12:38올바른 자바스크립트 구현으로 자동 컴파일됩니다. 저희가 할 수 있는 두 번째 일은
00:12:43FastMCP 앱입니다. 대화형 도구가 일회성 UI를 제공하고 클라이언트에서 상호작용하는 방식이라면,
00:12:49FastMCP 앱은 백엔드를 갖춘 완전한 애플리케이션입니다. 이 경우 MCP 서버가
00:12:54백엔드 역할을 하게 됩니다. 이번 세션에서 전체 작동 예시를 다 다룰 시간은 없지만,
00:12:59인체공학적 설계 방식을 감 잡으실 수 있도록 코드가 어떻게 생겼는지 보여드리겠습니다.
00:13:03FastMCP 앱이 될 클래스를 작성한 다음, 최소한 두 개의 함수에
00:13:08두 개의 함수에 app.ui 데코레이터를 지정합니다. 이는 해당 애플리케이션의 기본 UI를 구성하는
00:13:14조립식 컴포넌트를 반환하는 진입점이며, 그 다음으로는 최소 하나, 이건 선택사항이니 0개 이상의
00:13:20app.tools를 지정합니다. 이들은 기본적으로 UI에서 참조할 수 있는 백엔드 메서드들입니다.
00:13:27따라서 사용자가 양식에 입력한 데이터를 가져와 이와 같은 데코레이터가 지정된 도구를 사용하여
00:13:31데이터베이스로 전송하는 버튼을 만들 수 있습니다. 저희가 사용하며 현재 FastMCP의 내장
00:13:38컴포넌트로 제공하는 기능 중 하나는 업로드 컴포넌트입니다. 보시다시피 에이전트만 MCP 서버에
00:13:46접근할 수 있기 때문에, 단순히 MCP 서버에 파일을 업로드할 수는 없습니다. 반드시 에이전트의
00:13:51두뇌를 거쳐야 하므로, 많은 사람들이 MCP 서버에 업로드 도구를 대충 만들어 놓고는
00:13:56에이전트가 실제로 그것을 호출해야 한다는 사실을 잊어버리곤 합니다. 그 결과 세상에서 가장
00:14:00비싼 복사-붙여넣기 작업이 탄생합니다. 에이전트에게 1메가바이트의 텍스트를 주면 에이전트가 MCP에
00:14:06한 글자씩 다시 입력하고, 그래요, 결국 업로드는 되지만 엄청나게 비효율적입니다.
00:14:12따라서 이는 MCP 앱을 위한 정말 좋은 활용 사례입니다. 에이전트에게 앱 인터페이스를 띄우라고 요청하고,
00:14:18그곳에 파일을 끌어다 놓으면 파일이 에이전트를 우회하여 곧바로 서버로 전달됩니다.
00:14:23저희는 이를 다른 유용한 도구들과 함께 단 한 줄의 코드로 만들었습니다. 그리고
00:14:30이거 GIF인가요? GIF가 아니거나, 맞더라도 렌더링되지 않는데 클라이언트에서는 이런 모습일 겁니다.
00:14:34MCP 앱을 지원하는 모든 클라이언트에서 에이전트에게 무언가 업로드해야 한다고 요청하면 이제 이를
00:14:38표시해 줄 수 있으며, 안전하고 무엇보다 저렴하게 업로드할 수 있습니다. 아, GIF가 있네요. 됐습니다.
00:14:45자신의 슬라이드를 잘 알자는 것이 이 발표에서 얻을 수 있는 좋은 교훈이네요. 자, 에이전트가
00:14:50제가 방금 드래그앤드롭으로 업로드한 파일과 상호작용하고 있습니다. 이 슬라이드는 원하시면
00:14:55나중에 공유해 드리겠습니다. 물론 한 줄짜리 코드니 오늘 오후에 서버에서 직접 시도해 보셔도 됩니다.
00:15:00제가 마지막으로 다루고 싶은 주제는 이러한 아키텍처에 의해 구현되는
00:15:04완전한 생성형 UI입니다. 제가 이야기하는 동안 건너뛰고 영상이 재생되도록 두겠습니다. 이것은 아주
00:15:10간단한 데모로, 클로드에게 “야, 나 이걸로 발표 중이야. 네가 생각해 낼 수 있는 가장 흥미로운 UI를
00:15:15스트리밍해 줘”라고 요청한 것입니다. 그래서 곧바로 실행되었죠. 여기서 하고 있는 일은
00:15:21Prefab의 기반이 되는 UI의 프로토콜 직렬화인 JSON을 받아들이는 도구를 노출한 것입니다.
00:15:29따라서 에이전트가 네트워크를 통해 그 정보를 스트리밍하는 동안, 우리는 실시간으로 가진 것들을 렌더링하고
00:15:35그 JSON을 고쳐가며 렌더링합니다. 정말 멋진 데모였고 효과도 아주 좋았습니다.
00:15:39사람들도 마음에 들어 했는데, 이제 직접 UI를 정의할 필요조차 없기 때문입니다. 여러분이 할 일은
00:15:43이미 제공되는 스킬을 사용하여 에이전트가 UI를 작성하는법을 알 수 있도록 공유하기만 하면 됩니다.
00:15:48원하는 것은 무엇이든 만들어 줍니다. 이 기능의 내장 버전을 가진 클라이언트들도 일부 있습니다.
00:15:52만약 내장 버전이 있다면 기꺼이 그걸 사용하셔도 됩니다. 하지만 이는 자신만의 맞춤형 접근 방식이나
00:15:56유용한 제한된 컴포넌트 집합을 구축하는 방법이 될 수도 있습니다. 자, 이 시스템을 구동했을 때 아주 흥미로운 일이 일어났습니다.
00:16:01앞서 말씀드렸듯이 원래 계획은 에이전트가 네트워크를 통해 JSON을 보내고 이를 완전한 React 애플리케이션으로
00:16:07렌더링하는 것이었습니다. 저희가 발견하게 된 사실은 UI의 파이썬 표현 방식이
00:16:13JSON 표현 방식보다 약 70% 더 작다는 점이었습니다.
00:16:20그래서 이제는 이렇게 하지 않습니다. 스트리밍 JSON으로 이 데모를 녹화했을 때와 달리, 이제는 실제로
00:16:26네트워크를 통해 파이썬을 스트리밍합니다. 샌드박스에서 실행되고, 서버에서 JSON으로 변환된 다음
00:16:32렌더링됩니다. 이는 토큰 효율성 비용과 지연 시간 측면에서 엄청난, 정말 엄청난 이점을 가져다줍니다.
00:16:39따라서 제가 이 데모를 녹화했을 때와 정확히 똑같이 작동하지만, 이것이야말로 우리가 현장에서
00:16:43배운 점들 중 하나입니다. 파이썬 표현 방식이 전체 JSON 방식보다 훨씬 더 간결하고 사용하기 편리하다는 점이 정말 매력적입니다.
00:16:49자, 이것이 바로 Prefab입니다. 확인해 보고 싶으시다면, 호기심이 생기신다면,
00:16:55그리고 다른 많은 사람들과 함께 제가 만든 가장 기묘한 것을 보고 싶으시다면, prefab.prefect.io에서
00:17:00문서를 확인하실 수 있습니다. 여기 저희 GitHub에 있는 전체 라이브러리도 보실 수 있습니다. 그리고 이것은
00:17:06이미 Fast MCP에 완전히 내장되어 있습니다. 따라서 최신 버전의 Fast MCP를 사용하고 계신다면
00:17:11이 선택적 에디션을 설치하고, 컴포넌트를 임포트하여 반환하고, 이러한 MCP 앱을 가지고 놀기 시작할 수 있습니다.
00:17:17와주신 분들 모두 감사합니다.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기