Flutter×A2UI로 실현하는 「Generative UI」의 미래: LLM이 앱 화면을 동적으로 생성하는 세계

최근 AI 에이전트가 텍스트뿐만 아니라 상황에 따른 최적의 「화면(UI)」을 그 자리에서 생성하여 사용자에게 제시하는 Generative UI (GenUI)가 큰 주목을 받고 있습니다.

이를 뒷받침하는 오픈 표준 프로토콜이 Google 등이 개발하고 있는 A2UI (Agent to UI)입니다.

그리고, Flutter에서도 공식적으로 A2UI에 대응하는 genui 패키지의 업데이트가 발표되면서, 프로덕트에의 도입이 현실화되었습니다.

이 기사에서는 「A2UI란 무엇인가?」라는 기초부터 Flutter에서 GenUI를 구축하는 메커니즘에 대해 해설합니다.

A2UI는 AI 에이전트와 프론트엔드(클라이언트) 사이에서 「UI 설계도」를 안전하고 구조화된 데이터로서 주고받기 위한 선언형 UI 프로토콜입니다.

기존의 채팅형 AI에서는 예를 들어 레스토랑 예약을 할 때 다음과 같은 소모적인 텍스트 랠리가 발생하곤 했습니다.

• 「몇 일 예약인가요?」 ➔ 「내일입니다」
• 「몇 시인가요?」 ➔ 「19시입니다」

GenUI의 세계에서는 AI가 「예약 폼」이라는 UI 그 자체를 출력하며, 사용자는 화면을 클릭하여 조작하는 것만으로 입력을 완료할 수 있습니다.

보안성 담보 (코드를 실행하지 않음) AI에게 HTML이나 JavaScript, 혹은 Flutter 코드를 직접 생성하여 실행하게 하는 것은 보안 리스크 (XSS 등)가 너무 높습니다. A2UI에서는 UI 구조를 안전한 JSON 형식의 데이터로 송수신합니다. -
플랫폼 비의존성 Web (React/Angular/Lit)뿐만 아니라 모바일·데스크톱 (Flutter) 등, 동일한 A2UI JSON으로부터 각각의 네이티브 컴포넌트를 렌더링할 수 있습니다.

Flutter 팀은 A2UI 프로토콜을 이용하여 AI 에이전트와 접속하고, 위젯을 동적으로 렌더링하기 위한 공식 패키지 genui를 제공하고 있습니다.

메커니즘은 매우 심플합니다.

사용자가 앱 (Flutter)에서 AI로 메시지를 전송. -
AI 에이전트가 사전에 준비된 「컴포넌트 카탈로그 (사양)」를 바탕으로 최적의 UI 구조 (A2UI JSON)를 생성한다. -
Flutter 앱 (genui 패키지)이 해당 JSON을 스트리밍으로 받아 내부에서 정의된 네이티브 Flutter Widget (Text, Card, 커스텀 Widget 등)에 매핑하여 그린다.

최신 A2UI v0.9 및 Flutter의 genui 패키지 업데이트를 통해 설계 사상이 크게 진화했습니다.

이전에는 LLM의 「Structured Output (구조화된 출력 기능)」에 의존했으나, 최신 버전에서는 「Prompt First (프롬프트 우선)」 어프로치로 전환되었습니다.

무엇이 바뀌었나? UI 스키마 (정의)를 LLM의 시스템 프롬프트 (시스템 지시문)에 플레인 텍스트로서 직접 주입합니다. 이를 통해 LLM 본연의 「문맥을 이해하고 유연하게 출력하는 능력」을 최대한 활용할 수 있게 되었으며, 개발자는 LLM 측의 API 제한에 얽매이지 않고 자유로운 UI 생성이 가능해졌습니다. 또한, 코어 클래스의 명칭에서 GenUi 접두사가 삭제되어, 보다 Flutter에 친숙한 이디엄적인 명명 (SurfaceController, SurfaceHost, Transport 등)으로 쇄신되었습니다.

최신 A2UI (v0.9 이후)에서는 플랫한 식별자 (component)를 사용하여 다음과 같은 심플한 JSONL 형식으로 메시지가 스트리밍됩니다.

// 1. 렌더링 시작을 알림 (Surface 생성)
{"type": "createSurface", "surfaceId": "reservation_form"}
// 2. UI 컴포넌트 구조를 정의 (플랫한 컴포넌트 정의)
...

Flutter 측에서는 이 DatePicker나 Button을 미리 자사의 디자인 시스템에 맞춘 Widget으로 등록 (매핑)해 두기만 하면, AI가 생성한 그대로 화면이 나타납니다.

• 디자인의 일관성 (Design Consistency): AI가 임의로 화면을 스타일링하는 것이 아니라, 앱 측에서 정의한 고품질의 Widget 카탈로그(컴포넌트)를 AI가 조립하기 때문에 브랜드의 디자인 시스템을 해치지 않습니다. -
• 클라이언트 측 검증 (Client-side Validation): 최신 업데이트를 통해 커스텀 함수를 이용한 클라이언트 측의 데이터 검증 기능 등도 강화되었습니다. -
• 경이로운 자유도: 여행 예약, 재고 데이터의 그래프화, 사내 도구의 동적 폼(Dynamic Form) 생성 등 백엔드(AI 측)의 프롬프트(Prompt)를 변경하는 것만으로, 앱을 업데이트하지 않고도 새로운 화면을 제공할 수 있습니다.

정식 랩(Lab)을 이용하여,

결과

A2UI와 Flutter의 조합은 **「무엇이든 텍스트 채팅으로 해결하려는 AI」에서 「상황에 맞는 최적의 UI를 AI가 선택하여 제공하는 앱」으로의 패러다임 전환 (Paradigm Shift)**을 가능하게 합니다.

특히 Flutter는 단일 코드베이스(Single Codebase)로 멀티 플랫폼(Multi-platform)에 대응할 수 있기 때문에, A2UI의 「하나의 UI 데이터로부터 각 플랫폼의 네이티브 UI를 렌더링(Rendering)한다」는 사상과 매우 잘 맞습니다.

앞으로의 AI 네이티브 앱 개발에 있어 필수적인 기술 스택(Tech Stack)이 될 것임은 틀림없습니다.