생성 UI 개요
생성 UI 개요 (Generative UI overview)
생성 UI(generative UI) 란 에이전트의 출력이 텍스트 너머의 사용자 인터페이스를 제시하는 모든 패턴을 말해요. 채팅 거품 속에 문단을 스트리밍하는 대신, 에이전트가 폼·카드·대시보드·인터랙티브 컨트롤을 구동하는 식이죠. 이렇게 하면 UI가 마치 애플리케이션처럼 결과를 전달하면서도, 무엇을 언제 보여줄지는 에이전트가 결정합니다. 생성 UI는 단일 기법이 아니에요. 누가 인터페이스를 저작하는가( who authors the interface? ) 라는 한 가지 질문으로 정의되는 스펙트럼을 가로지르죠. 한쪽 끝에서는 여러분이 모든 컴포넌트를 작성하고 에이전트는 그중에서만 고르고, 다른 쪽 끝에서는 인터페이스가 애플리케이션 바깥에서 완전히 만들어집니다. 스펙트럼을 따라갈수록 예측 가능성은 팔리고 표현의 범위(expressive range)를 얻게 됩니다.
생성 UI 스펙트럼 (The generative UI spectrum)
스펙트럼은 모든 픽셀에 대한 완전한 통제에서 에이전트의 완전한 자율성까지, 세 가지 주요 접근법으로 이어져요.
더 많은 통제 (More control) 더 많은 자율성 (More autonomy)
통제형 (Controlled) → 선언형 (Declarative) → 개방형 (Open-ended)
왼쪽에서 오른쪽으로 갈수록 예측 가능성과 기능별 엔지니어링 비용은 내려가고, 에이전트의 표현 범위는 커져요. 접근성과 시각적 일관성은 왼쪽에서 보장하기 가장 쉽고 오른쪽에서 가장 어렵습니다.
통제형 (Controlled)
여러분이 컴포넌트를 작성하고, 에이전트는 어떤 것을 렌더링할지, 어떤 데이터를 넘길지 선택해요. 예측 가능성이 가장 높고 브랜딩·접근성에 대한 통제가 가장 타이트하지만, 노출하려는 모든 기능마다 컴포넌트를 작성해야 하는 비용이 따르죠. 생성 UI의 주력(workhorse)이며, 레이아웃이 정확해야 하는 트래픽 많고 브랜드가 중요한 서페이스 — 항공권, 예약 확인 같은 — 에 알맞아요. 컴포넌트 라이브러리가 경계가 되어, 에이전트는 배포된 것만 렌더링할 수 있어요. 통제형 생성 UI는 도구로서의 컴포넌트(components as tools), 도구 호출 렌더링, 상태 렌더링, 추론을 다룹니다. 자세한 내용은 통제형 생성 UI를 참고하세요.
선언형 (Declarative)
에이전트가 구조화된 명세를 내보내고, 프론트엔드는 사전에 등록해둔 컴포넌트 카탈로그에서 인터페이스를 조합해요. 카탈로그가 가드레일이자 경계가 되어, 에이전트는 여러분이 승인한 컴포넌트를 자유롭게 배열·결합할 수 있지만 그 밖으로는 나갈 수 없어요. 여기 긴 꼬리가 살아있습니다. 픽셀 단위 완벽함보다 폭을 택하며, 정확한 통제보다 유용한 무언가가 더 중요한 보조 상호작용·내부 도구·대시보드에 잘 맞아요. 선언형 생성 UI는 json-render로 이를 다루고, CopilotKit으로 통합되는 Google의 A2UI도 동적·고정 스키마 변형과 함께 같은 모양새를 제공합니다.
개방형 (Open-ended)
에이전트가 캔버스를 소유해요. 인터페이스는 MCP 서버 같은 곳에서 애플리케이션 바깥에 만들어지고, 샌드박스에서 렌더링됩니다. 표현 범위가 가장 넓고, 프론트엔드 코드 없이 새 인터페이스 기능을 추가할 수 있어요. 일회성 시각화나 맞춤형 답변 — 예측 가능한 것보다 놀랍고 충분히 좋은 결과가 나은 곳 — 에 잘 어울리죠. 동시에 가장 실험적인 접근법이기도 해요. 가장 덜 결정적이고, 접근성·일관성·안전성을 보장하기 가장 어렵기 때문에 UI를 반드시 격리(isolate) 해야 합니다. 샌드박스와 프롬프트가 경계가 돼요. 자세한 내용은 개방형 생성 UI를 참고하세요.
접근법 선택하기 (Choosing an approach)
인터페이스를 얼마나 제약할 필요가 있는지에서 시작하세요. 제품 전체에 단일 접근법을 고르는 것이 가장 흔한 실수입니다. 실제 애플리케이션은 접근법을 섞고 각 서페이스를 목적에 맞게 매칭해요 — 트래픽 많고 브랜드가 중요한 핵심은 통제형 컴포넌트로, 보조 상호작용의 긴 꼬리는 선언형 구성으로, 서드파티 기능은 개방형 임베드로 말이죠. 단일 세션도 세 가지를 모두 오갈 수 있어요. 스펙트럼은 채팅 너머에도 적용됩니다. 같은 세 가지 접근법이 모바일이나 Slack·이메일 같은 서페이스의 생성 인터페이스에도 그대로 적용돼요. 채팅 기록에만 한정되지 않는다는 뜻이죠.
스펙트럼 탐색하기 (Explore the spectrum)
아래 문서에서 각 접근법을 더 깊이 살펴볼 수 있어요.