A2UI(Agent-to-User Interface): AI 에이전트와 사용자 간의 풍부하고 상호작용 가능한 UI 생성을 위한 프로토콜/표준

9bow · 12월 16, 2025, 9:30오후

A2UI 소개

A2UI (Agent-to-User Interface) 는 AI 에이전트가 사용자에게 풍부하고 인터랙티브한 UI를 생성하여 제공할 수 있도록 돕는 구글의 오픈소스 프로토콜이자 표준(Standard) 입니다. 생성형 AI가 텍스트, 이미지, 코드를 생성하는 데는 탁월하지만, 복잡한 사용자 인터페이스(UI)를 구성하여 전달하는 데는 여전히 어려움이 있었습니다. A2UI는 에이전트가 단순히 텍스트로만 응답하는 것을 넘어, 현재 대화 맥락에 가장 적합한 UI를 직접 생성하고 이를 프론트엔드 애플리케이션으로 전송할 수 있는 표준 형식을 제공합니다.

오늘날 AI 에이전트는 점점 더 복잡한 작업을 수행하고 있습니다. 예를 들어 식당을 예약하는 과정에서 텍스트로만 날짜와 시간을 묻고 답하는 것은 비효율적입니다. 에이전트가 날짜 선택기(Date Picker)나 슬라이더 같은 UI 요소를 직접 보여줄 수 있다면 사용자 경험은 훨씬 향상될 것입니다. 하지만 보안 문제와 플랫폼 호환성 문제로 인해, 원격 에이전트가 로컬 애플리케이션의 화면을 직접 제어하거나 임의의 코드를 실행하게 하는 것은 위험합니다.

A2UI는 이러한 문제를 해결하기 위해, "에이전트가 UI라는 언어를 말하게 하자(Speak UI)"는 철학 아래 개발되었습니다. 에이전트는 화면을 어떻게 그릴지 구체적으로 명령하는 코드가 아니라, 선언적인 데이터(Declarative Data) 형태(JSON)로 의도를 전달합니다. 클라이언트는 이 데이터를 받아 자신의 플랫폼(Web, Mobile, Desktop)에 맞는 네이티브 컴포넌트로 렌더링합니다. 이 방식은 보안을 유지하면서도 에이전트가 주도하는 동적인 인터페이스 구성이 가능해지는 보안성, 속도, 그리고 사용자 경험(UX)을 모두 만족시키는 새로운 접근법입니다.

Early Stage Public Preview
이 글을 작성하는 현재, A2UI 프로젝트는 v0.8(공개 프리뷰) 단계입니다. 사양과 구현은 기능적으로 작동하지만 여전히 발전 중입니다. 협력을 촉진하고 피드백을 수집하며 기여(예: 클라이언트 렌더러 관련)를 요청하기 위해 프로젝트를 공개합니다. 향후 변경 사항이 있을 수 있습니다.

A2UI is currently in v0.8 (Public Preview). The specification and implementations are functional but are still evolving. We are opening the project to foster collaboration, gather feedback, and solicit contributions (e.g., on client renderers). Expect changes.

Google이 제안하는 A2UI(Agent-to-User Interface)를 기존의 사용자 - 에이전트 간의 인터페이스들과 비교해보면 다음과 같습니다:

A2UI vs. 텍스트 기반 상호작용 (Text-only Interaction): 기존의 텍스트 기반 에이전트는 정보를 전달하기 위해 여러 번의 대화(Turn-taking)가 필요했습니다. 반면 A2UI를 사용하면 에이전트가 적절한 시점에 폼(Form), 버튼, 차트 등의 UI를 제시하여 사용자의 입력을 한 번에 효율적으로 받을 수 있습니다.
A2UI vs. 원격 HTML/JS 전송 (Remote Rendering): 기존에는 원격 서버에서 UI를 그리려면 HTML이나 JavaScript를 클라이언트로 보내 iframe 내에서 실행해야 했습니다. 이는 보안상 위험할 뿐만 아니라(샌드박싱 필요), 호스트 애플리케이션의 스타일과 이질감이 느껴지는 문제가 있었습니다. A2UI는 UI 구조만 데이터로 전송하고 실제 렌더링은 클라이언트가 담당하므로, 앱의 네이티브 스타일과 완벽하게 일치하며 보안적으로도 안전합니다.
A2UI vs. MCP (Model Context Protocol) Apps: 최근 등장한 MCP Apps는 ui:// 리소스를 통해 샌드박스된 HTML 콘텐츠를 반환하는 방식을 사용하고 있습니다. A2UI는 이와 달리 '네이티브 우선(Native-first)' 접근 방식을 취합니다. 불투명한 페이로드를 가져와 보여주는 대신, 네이티브 컴포넌트의 청사진(Blueprint)을 전송하여 호스트 앱의 스타일링과 접근성 기능을 그대로 상속받습니다.

예를 들어, Google은 A2UI를 소개하며 블로그에 다음과 같은 식당 예약(Restaurant Booking) 시 채팅 인터페이스를 사용하는 상황을 예시로 제시하였습니다:

기존 텍스트 기반 상호작용의 한계 (The Clunky Back-and-Forth)

텍스트로만 이루어지는 대화는 사용자와 에이전트 간에 불필요하게 많은 턴(Turn)을 소모하게 만듭니다. 사용자가 필요한 정보를 한 번에 주지 않으면, 에이전트는 계속해서 되물어야 하기 때문입니다.

[시나리오: 텍스트로만 예약할 때]

User: "2명 예약해줘."

Agent: "알겠습니다. 날짜는 언제로 할까요?" (1차 되묻기)

User: "내일."

Agent: "시간은요?" (2차 되묻기)

User: "저녁 7시쯤?"

Agent: "그 시간에는 예약이 꽉 찼네요. 다른 시간은 어떠세요?" (예약 실패 및 재질문)

User: "그럼 언제 되는데?"

Agent: "5:00, 5:30, 6:00, 8:30, 9:00, 9:30, 10:00에 가능합니다. 이 중 괜찮은 시간이 있나요?" (가독성이 떨어지는 텍스트 나열)

이러한 텍스트 기반의 상호작용은 단순한 예약을 위해 수많은 타이핑과 대화 오고 가기(Ping-pong)가 필요하여 효율성이 떨어집니다. 또한, 사용 가능한 시간대가 텍스트로 나열되면, 사용자는 이를 읽고 자신의 일정과 비교하는 데 피로감을 느낍니다.

전체적으로 이러한 '답답한 스무고개' 같은 대화 흐름은 사용자 경험(UX)을 크게 저하시켜 사용자에게 부정적인 인식을 심어줄 수 있습니다.

A2UI를 통한 해결책: 맞춤형 UI 생성 (Bespoke UIs)

A2UI는 에이전트가 상황에 맞는 UI 컴포넌트를 직접 선택하고 구성하여 제안할 수 있게 합니다. 에이전트는 더 이상 텍스트로 질문하지 않고, 필요한 도구(UI) 를 건네줍니다.

에이전트는 사용자의 의도를 파악하자마자 날짜 선택기(Date Picker), 시간 선택기(Time Selector), 인원수 조절 버튼 등이 포함된 예약 폼(Form) 을 동적으로 생성하여 보여줍니다. 이 때, A2UI는 추상적인 UI 구조만 전달하므로, 실제 화면에 그려지는 디자인은 호스트 앱(Front-end Host App) 이 제어합니다. 따라서 채팅창 안에서도 앱 전체 테마와 어울리는 아름다운 디자인으로 렌더링됩니다.

이러한 UI를 통해 사용자는 여러 번 타이핑할 필요 없이, 클릭 몇 번으로 원하는 옵션을 선택하고 '예약하기' 버튼을 누르면 됩니다. 즉, A2UI는 LLM이 미리 정의된 위젯 카탈로그(Catalog of Widgets)를 조합하여, 현재 작업(Task)에 가장 적합한 **'맞춤형 UI(Bespoke UI)'**를 즉석에서 만들어낼 수 있도록 지원합니다. 이것이 바로 "에이전트가 UI를 말한다"는 것의 핵심 의미입니다.

A2UI의 주요 특징

보안 우선 (Security First)

A2UI의 가장 큰 특징은 실행 코드가 아닌 데이터(Declarative JSON) 라는 점입니다. 클라이언트 애플리케이션은 신뢰할 수 있는 UI 컴포넌트(예: Card, Button, TextField) 목록인 '카탈로그'를 유지 관리합니다. 에이전트는 오직 이 카탈로그에 있는 컴포넌트의 렌더링만 요청할 수 있어, UI 인젝션(UI Injection)과 같은 보안 취약점을 원천적으로 차단합니다.

LLM 친화적인 구조 (LLM-friendly)

UI는 ID 참조를 포함한 평면적인 리스트(Flat list) 형태로 표현됩니다. 이는 거대한 트리 구조보다 LLM이 생성하기에 훨씬 효율적이며, 점진적 업데이트(Incremental Update)를 용이하게 합니다. 대화가 진행됨에 따라 에이전트는 UI의 특정 부분만 변경하는 데이터를 보낼 수 있어 반응성 높은 사용자 경험을 제공합니다.

프레임워크 불가지론 (Framework-agnostic)

A2UI는 UI의 '구조'와 '구현'을 분리합니다. 에이전트는 컴포넌트 트리와 데이터 모델에 대한 설명만 전송합니다. 이를 실제 화면에 그리는 것은 웹 컴포넌트(Web Components), Flutter, Angular, React, SwiftUI 등 각 클라이언트의 몫입니다. 따라서 하나의 A2UI JSON 응답이 웹, 모바일 등 다양한 플랫폼에서 각기 다른 프레임워크로 렌더링될 수 있습니다.

A2UI의 동작 흐름

A2UI의 전체적인 데이터 흐름은 다음과 같습니다.

생성 (Generation): 에이전트(Gemini 등 LLM 사용)가 UI 구성을 설명하는 A2UI JSON 페이로드를 생성합니다.
전송 (Transport): 생성된 메시지는 A2A(Agent-to-Agent) 프로토콜이나 AG UI 등을 통해 클라이언트로 전송됩니다.
해석 (Resolution): 클라이언트의 A2UI 렌더러(Renderer)가 JSON을 파싱합니다.
렌더링 (Rendering): 렌더러는 추상적인 컴포넌트 타입(예: text-field)을 클라이언트 코드베이스의 구체적인 구현체(위젯)로 매핑하여 화면에 그립니다.

A2UI 실행 예시 (Getting Started)

┌─────────────┐         ┌──────────────┐         ┌────────────────┐
│   You Type  │────────>│ A2A Agent    │────────>│  Gemini API    │
│  a Message  │         │  (Python)    │         │  (LLM)         │
└─────────────┘         └──────────────┘         └────────────────┘
                               │                         │
                               │ Generates A2UI JSON     │
                               │<────────────────────────┘
                               │
                               │ Streams JSONL messages
                               v
                        ┌──────────────┐
                        │   Web App    │
                        │ (A2UI Lit    │
                        │  Renderer)   │
                        └──────────────┘
                               │
                               │ Renders native components
                               v
                        ┌──────────────┐
                        │   Your UI    │
                        └──────────────┘

현재 A2UI는 v0.8 (Public Preview) 상태이며 실험적입니다. 사용자는 NodeJS 및 Python이 설치된 환경에서 Gemini API Key만 있다면 아래와 같이 예시 GitHub 저장소의 식당 예약 에이전트를 실행해볼 수 있습니다:

# 저장소 복제
git clone https://github.com/google/A2UI.git
cd A2UI

# API 키 설정
export GEMINI_API_KEY="your_gemini_api_key"

# 에이전트(백엔드) 실행
cd samples/agent/adk/restaurant_finder
uv run .

# 클라이언트(프론트엔드 - Lit 기반) 실행 (새 터미널 창)
cd samples/client/lit/shell
npm install
npm run dev

위와 같은 과정을 실행한 뒤, 브라우저로 http://localhost:5173 에 접근하여 데모를 실행해볼 수 있습니다. 사용자는 텍스트 채팅뿐만 아니라, 에이전트가 동적으로 생성한 식당 예약 양식(form)을 통해 상호작용하는 데모를 확인할 수 있습니다. 상세한 설치 및 실행 관련 내용은 다음 문서를 확인해주세요:

A2UI 사용 사례 (A2UI in Action)

아래에서는 에이전트가 A2UI를 통해 상황에 따라 얼마나 유연하게 UI를 생성하고 제어할 수 있는지를 보여주는 몇 가지 데모 시나리오를 확인할 수 있습니다:

조경 설계 데모 (Landscape Architect Demo)

이 예시는 사용자가 자신의 정원이나 작업 공간의 사진을 업로드하였을 때, 해당 공간의 조경 설계에 필요한 구체적인 요구사항(예: 면적, 선호 식물, 예산 등)을 파악하기 위해, 정적 폼이 아닌 맞춤형 입력 양식(Custom Form) 을 즉석에서 생성하여 A2UI 메시지로 전송하는 예시 데모입니다.

사용자는 텍스트로 일일이 설명할 필요 없이, 에이전트가 업로드한 사진을 보고 딱 맞춰 만들어준 UI를 통해 쉽고 정확하게 정보를 입력할 수 있게 됩니다. 이 데모는 A2UI의 멀티모달(Multimodal) 기능과 동적 폼 생성(Dynamic Form Generation) 의 결합을 잘 보여줍니다.

커스텀 컴포넌트: 대화형 차트 및 지도 (Custom Components: Interactive Charts & Maps)

이 예시는 에이전트가 질문의 의도에 따라 텍스트 대신 가장 효과적인 시각적 도구를 스스로 선택하여 응답하는 능력을 보여줍니다. 사용자가 수치 데이터 요약을 요청하면 차트(Chart) 컴포넌트를, 특정 위치를 물어보면 구글 지도(Google Map) 컴포넌트를 호출하여 화면에 띄웁니다.

중요한 점은 에이전트가 그림을 생성하는 것이 아니라, 클라이언트 앱이 이미 보유하고 있는 네이티브 컴포넌트(Native/Custom Components) 를 에이전트가 '호출'하여 활용한다는 것입니다. 이를 통해 에이전트는 클라이언트의 고유한 기능을 100% 활용하면서도, 텍스트보다 훨씬 직관적인 사용자 경험을 제공할 수 있습니다.

A2UI 컴포저 (A2UI Composer)

CopilotKit 팀이 제공하는 공개 A2UI 위젯 빌더(Widget Builder)입니다. 개발자들은 복잡한 백엔드 설정 없이도, 이 도구를 통해 A2UI가 제공하는 다양한 UI 위젯들을 웹상에서 즉시 생성해보고 테스트할 수 있습니다.

이 도구는 개발자가 A2UI의 작동 방식을 쉽게 이해할 수 있도록 도울 뿐만 아니라, A2UI 프로젝트가 구글 내부뿐만 아니라 파트너사(CopilotKit 등) 및 오픈소스 생태계와 협력하여 개발자 도구(Tooling) 생태계를 확장하고 있음을 보여줍니다.

A2UI(Agent-to-User Interface) 공식 홈페이지

Google의 A2UI(Agent-to-User Interface) 소개 블로그

A2UI 스펙(Specification)

글 작성 시점에서의 최신 버전은 v0.8이며, 추후 업데이트 되었을 수 있습니다

A2UI 프로젝트 GitHub 저장소

https://github.com/google/A2UI

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~