Beyond Components: Designing Generative UI for MCP Apps — Ruben Casas, Postman
Video

Beyond Components: Designing Generative UI for MCP Apps — Ruben Casas, Postman

2026.06.09
·YouTube·by 이호민
#AI#DL#GPT#LLM#ML

핵심 포인트

  • 1AI의 UI 생성 능력은 초기 copy-paste 수준에서 GPT 5.2 및 Opus 4.5와 같은 모델을 통해 고품질의 프런트엔드 코드를 직접 생성하는 수준으로 급속히 발전했습니다.
  • 2현재 UI는 주로 Static 또는 Declarative 방식으로 구현되지만, 모델이 직접 HTML, CSS, JavaScript를 생성하는 Generative UI의 보안 및 신뢰성 문제를 해결하기 위해 MCP apps가 최적의 전달 메커니즘으로 제시됩니다.
  • 3미래에는 단순한 컴포넌트 생성을 넘어, Excalidraw MCP app처럼 인간과 에이전트가 공유된 공간에서 협업하여 개인화된 UI를 함께 만들어가는 방향으로 발전할 것이라고 전망합니다.

이 논문은 2022년 11월 ChatGPT 출시 이후 LLM 기반 UI 생성 기술의 발전과 현재 당면 과제를 설명하고 미래 방향을 제시합니다. 초기 LLM이 생성한 코드를 수동으로 복사-붙여넣기하고 수정하는 방식에서 벗어나, GPT 5.2 및 Opus 4.5와 같은 고성능 LLM이 이제는 고품질의 UI 코드를 직접 생성할 수 있게 되었다고 강조합니다. 하지만 이러한 발전에도 불구하고, 대부분의 UI가 여전히 정적(static)이며, "Jarvis"와 같은 동적인 상호작용이 부족하다고 지적합니다.

저자는 LLM을 "새로운 컴퓨터"에 비유하며, 현재 우리가 1970년대 터미널 시대처럼 GUI가 없는 텍스트 기반 인터페이스에 머물러 있다고 주장합니다. 현재 논의되는 주요 인터페이스 패러다임으로는 "Chat-everywhere"와 "Super App (e.g., MCP apps)"이 있지만, 이들은 UI가 *어디서* 실행되는지에 대한 질문이지, 모델이 *무엇을* 생성하는지에 대한 질문이 아니라고 선을 긋습니다.

이어서 UI 생성 방식에 따라 세 가지 주요 패러다임을 기술적으로 상세히 설명합니다:

  1. Static UI:
    • 개념: 현재 가장 일반적인 방식으로, Agent는 Orchestrator 역할을 수행하며 Tool Call을 통해 (예: MCP apps 사용) 사전 정의된 정적(static) UI 컴포넌트(developer가 생성)에 필요한 parameters와 data를 전달합니다.
    • 동작 방식: Client는 Agent가 제공한 props와 data를 기반으로 해당 정적 컴포넌트를 렌더링합니다. 이는 전통적인 서버-클라이언트 렌더링 방식과 유사하지만, data와 props의 생성 주체가 Agent라는 점이 다릅니다.
    • 예시: AGUI protocol은 client tool을 React component에 매핑하며, tool call은 props를 수신합니다. Goose Auto Visualizer는 data를 사전 정의된 시각화 컴포넌트에 매칭합니다. LLM은 컴포넌트 자체를 생성하지 않고, 컴포넌트의 입력(data, props)만 제공합니다.
  1. Declarative UI:
    • 개념: Static UI의 상위 개념으로, 여전히 사전 정의된 정적 컴포넌트와 디자인 시스템을 활용합니다.
    • 동작 방식: Agent는 단순히 props를 전달하는 대신, JSON, YAML, 또는 Python과 같은 형식의 descriptor를 생성합니다. 이 descriptor는 특정 정적 컴포넌트와 그 컴포넌트 내의 동적 요소를 매핑합니다. "Translation rendering engine"이 이 descriptor를 해석하여 최종 UI를 렌더링합니다.
    • 특징: Static UI보다 동적이고 개인화된 UI를 생성할 수 있지만, 기존 컴포넌트의 일관성과 예측 가능성을 유지합니다. 유연성과 일관성 사이의 균형을 제공하며, 토큰 사용량이 적어 효율적일 수 있습니다.
    • 예시: Netflix의 서버 주도(server-driven) UI는 사용자 개인화에 따라 UI를 동적으로 구성합니다. Vercel의 JSON Render는 JSON 또는 YAML을 사용하여 컴포넌트를 매핑하고 동적인 UI를 생성합니다. LLM은 UI의 구조와 동적 요소를 정의하는 descriptor를 생성하며, 컴포넌트 자체는 생성하지 않습니다.
  1. Generative UI (Generative Components):
    • 개념: 궁극적인 목표로, LLM이 런타임에 HTML, CSS, JavaScript와 같은 프런트엔드 코드를 직접 생성하여 UI를 만듭니다.
    • 동작 방식: Agent (또는 별도의 모델)가 HTML, CSS, JavaScript 전체를 온디맨드(on demand)로 생성하고, 이를 클라이언트에 전달하여 렌더링합니다. 사전 정의된 컴포넌트가 없으며, UI가 즉석에서 생성됩니다.
    • 예시: 발표자가 Postman에서 수행한 실험(weather agent가 API 호출, 농담 생성, 그리고 HTML, CSS, JavaScript를 모두 한 번의 tool call로 생성하여 독창적인 UI를 제공).
    • 과제: LLM이 생성한 코드에 대한 신뢰성(security) 문제가 가장 큽니다. 이는 샌드박스(sandbox) 환경과 배포 모델(distribution model)을 필요로 합니다. 저자는 MCP apps가 이러한 generative UI를 위한 이상적인 배포 메커니즘이 될 수 있다고 제안합니다. MCP apps는 인증(authentication), tool calling, message passing 등의 기능을 제공하며, iFrame을 통한 sandbox 환경을 기본으로 제공하여 third-party UI 배포에 적합합니다. Anthropic이 클로드(Claude)의 시각화(visualizer) 기능에 MCP apps를 사용하는 사례를 들어 그 전략적 중요성을 강조합니다.

결론적으로, 저자는 현재의 UI 인터페이스가 최종 형태가 아니며, 미래의 UI는 "컴포넌트를 넘어서는(beyond components)" 개념으로 발전할 것이라고 예측합니다. 특히 Excalidraw MCP app과 같이 인간과 Agent가 공유된 공간에서 협력하는 human-agent collaboration 모델을 미래 generative UI의 중요한 형태로 제시합니다. 이러한 UI는 고도로 개인화되고 협력적인 경험을 제공할 것이며, 아직 초기 단계이므로 미래는 우리가 만들어갈 수 있다고 마무리합니다.