이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.
TL;DR
Gus Iwanaga는 정적 화면의 한계를 극복하기 위해 사용자의 의도에 따라 실시간으로 구성되는 생성형 UI 아키텍처를 제안했다. 초기 시도에서 발생한 레이아웃 불일치 문제를 해결하기 위해 의도 분류, 도구 호출, 컴포넌트 매핑을 수행하는 오케스트레이터를 도입했다. 특히 디자인 시스템을 준수하는 선언적(Declarative) 방식을 채택하고 Atomic Design을 활용해 에이전트의 컴포넌트 배치 능력을 강화했다. 이는 디자이너의 역할이 픽셀 묘사에서 시스템 스키마 설계로 진화함을 시사한다.
챕터별 상세
정적 화면의 한계와 AI 기반 인터페이스의 필요성
지난 40년간 사용자는 소프트웨어의 정적 구조에 자신을 맞춰왔으며, 이는 높은 인지 부하와 온보딩 비용을 초래했다. commercetools는 300개 이상의 API를 보유한 기업으로서, AI를 통해 소프트웨어와 상호작용하는 근본적인 방식을 바꾸고자 했다. 사용자의 의도에 따라 화면이 동적으로 구성되는 인터페이스를 지향점으로 설정했다. 이는 단순한 챗봇을 넘어 비즈니스 로직과 UI가 결합된 새로운 형태의 상거래 경험을 목표로 한다.
생성형 UI 구현의 실패 사례와 일관성 문제
동일한 매출 보고서 생성 쿼리에 대해 시스템이 매번 다른 레이아웃과 텍스트를 출력하는 문제가 발생했다. 모델에게 컴포넌트 카탈로그만 주고 자유롭게 구성하게 했을 때, Q1 보고서가 어떤 실행에서는 '1월과 3월'로 표기되는 등 비즈니스 관점에서 수용 불가능한 결과가 나왔다. 이는 모델의 실패가 아니라 제어되지 않은 생성형 UI의 구조적 한계였다. 결과적으로 비즈니스는 예측 불가능한 출력을 프로덕션 환경에 배포할 수 없다는 결론에 도달했다.
오케스트레이터 기반의 의도 중심 UX 아키텍처
사용자의 쿼리를 의도(Intent)로 분류하고 적절한 도구를 호출하여 데이터를 가져오는 오케스트레이션 계층을 구축했다. 오케스트레이터는 결과를 적격 컴포넌트에 매핑하고 UI 사양(Spec)을 브로드캐스트하여 네이티브 컴포넌트로 렌더링한다. 이를 통해 비즈니스 로직을 유지하면서도 사용자 의도에 맞춤화된 화면을 실시간으로 생성할 수 있게 되었다. 이 구조는 LLM의 창의성을 제어하면서도 데이터의 정확성을 보장하는 완충 지대 역할을 한다.
제어 수준에 따른 세 가지 UI 렌더링 전략
UI 생성 방식을 Controlled, Declarative, Open-ended의 세 가지 스펙트럼으로 구분했다. Controlled는 고정된 컴포넌트를 에이전트가 선택만 하는 방식이고, Open-ended는 모델이 HTML을 직접 생성하여 샌드박스에서 실행하는 방식이다. commercetools는 디자인 시스템을 준수하면서도 유연성을 확보할 수 있는 선언적(Declarative) 방식을 최종 선택했다. A2UI, JSON-Render, OpenUI와 같은 프로토콜이 이 선언적 접근 방식을 지원한다.
typescript
const salesReport = createTool({
description: "Show the sales report.",
schema: z.object({ period: z.string() }),
execute: async ({ period }) => {
const rows = await getTopProducts(period);
return { period, rows }; // -> part.output
}
});에이전트가 사용할 도구를 정의하고 실행 결과를 출력하는 로직
typescript
AI SDK: RENDER YOUR COMPONENT
message.parts.map((part) => {
if (part.type === 'tool-invocation') {
const { state, result } = part;
if (state === 'result') {
return <SalesReport rows={result.rows} />;
}
}
return null;
});도구 실행 결과를 바탕으로 특정 리액트 컴포넌트를 렌더링하는 과정
컴포넌트 배치 최적화를 위한 원자적 디자인 적용
에이전트가 선택한 컴포넌트들을 조화롭게 배치하기 위해 Atomic Design 개념을 도입했다. 계층 구조를 뒤집어 컴포넌트에서 시작해 서브 슬롯, 슬롯, 템플릿 순으로 올라가는 방식을 에이전트에게 학습시켰다. 이를 통해 무작위 배치를 방지하고 정보 아키텍처 관점에서 최적화된 레이아웃을 구성할 수 있게 되었다. 결과적으로 에이전트는 디자인 시스템의 규칙 내에서 가장 논리적인 화면 구성을 스스로 결정하게 된다.
픽셀 디자인에서 시스템 설계로의 전환
생성형 UI 시대의 UX 팀은 더 이상 개별 픽셀이나 고정된 플로우를 디자인하지 않는다. 대신 시스템 스키마, 카탈로그 규칙, 의도 매핑 로직을 설계하는 기술적 역할로 업무의 성격이 변화했다. 카탈로그는 에이전트와 인터페이스 사이의 계약이 되며, 모든 속성이 생성 결과에 직접적인 영향을 미치게 된다. 이는 디자이너와 개발자가 협업하는 방식의 근본적인 패러다임 시프트를 의미한다.
용어 해설
- 생성형 UI(Generative UI)
- — 사용자의 의도나 데이터에 따라 실시간으로 화면 구성 요소와 레이아웃을 생성하는 인터페이스 기술이다. 정해진 정적 화면 대신 LLM이 컴포넌트를 조합하여 최적의 UX를 제공하며, 개인화된 사용자 경험을 극대화하는 데 중요하다.
- 오케스트레이터(Orchestrator)
- — 사용자의 쿼리를 해석하여 적절한 도구를 호출하고 결과를 컴포넌트에 매핑하는 제어 계층이다. 복잡한 에이전트 시스템에서 실행 순서와 데이터 흐름을 관리하며, 일관성 있는 UI 출력을 보장하는 핵심 역할을 한다.
- 원자적 디자인(Atomic Design)
- — 디자인 시스템을 원자, 분자, 유기체, 템플릿, 페이지 단위로 쪼개어 관리하는 방법론이다. 작은 단위부터 조립하여 복잡한 화면을 구성하며, 생성형 UI에서 에이전트가 컴포넌트를 논리적으로 배치하는 기준이 된다.
- 모델 컨텍스트 프로토콜(MCP)
- — 에이전트가 외부 도구 및 데이터 소스와 상호작용하기 위한 표준화된 프로토콜이다. 모델이 샌드박스 환경에서 HTML이나 스크립트를 안전하게 실행하고 렌더링할 수 있도록 돕는 인프라 역할을 한다.
- 선언적 UI(Declarative UI)
- — 화면의 상태와 구조를 코드로 기술하면 시스템이 이를 해석하여 렌더링하는 방식이다. 생성형 UI에서는 에이전트가 UI 스펙을 JSON 형태로 출력하고 이를 네이티브 컴포넌트로 변환하여 디자인 시스템의 일관성을 유지한다.
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 09. 02.수집 2026. 09. 02.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
