AI/Technical

A2UI(Agent-to-User Interface): Google의 오픈 표준으로 AI 에이전트가 맞춤형 UI를 즉석에서 생성하다

Royzero 2025. 12. 23. 00:55
반응형

TL;DR

Google이 2025년 12월 공개한 A2UI (Agent-to-User Interface)는 AI 에이전트가 텍스트가 아닌 선언적 JSON으로 사용자 인터페이스를 동적으로 생성하는 오픈소스 프로토콜입니다. 기존의 "텍스트 기반 다중 턴 상호작용" 문제를 해결하며, 보안 우선 (Data, not Code), LLM 친화적 구조, 프레임워크 독립적 세 가지 핵심 철학으로 설계되었습니다. 현재 v0.8 안정 버전으로 Google Opal, Gemini Enterprise 등에서 프로덕션 운영 중입니다.

본문

1. 왜 A2UI인가? 기존 텍스트 기반 상호작용의 한계

오늘날 대부분의 AI 에이전트는 사용자 질문에 긴 텍스트로 응답합니다. 간단한 식당 예약만 해도 불필요하게 많은 대화 턴(Turn)이 발생합니다.

User: "2명 예약해줘."
Agent: "알겠습니다. 날짜는 언제로 할까요?"
User: "내일."
Agent: "시간은요?"
User: "저녁 7시쯤?"
Agent: "그 시간에는 예약이 꽉 찼네요. 가능한 시간은: 5:00, 5:30, 6:00, 8:30, 9:00, 9:30, 10:00..."

이러한 "답답한 스무고개" 패턴은 사용자 경험을 크게 저하시킵니다. 특히 데이터 입력, 설정 선택 등 구조화된 작업에서는 더욱 비효율적입니다.

Why it matters: 텍스트 기반 인터페이스는 단순해 보이지만, 실제 업무 프로세스(데이터 엔트리, 승인 워크플로우 등)에서는 심각한 생산성 저하를 초래합니다. 사용자는 타이핑을 반복하고, 에이전트는 계속 확인 질문을 하게 됩니다.

2. A2UI의 핵심 철학: "에이전트가 UI를 말한다"

Google의 A2UI 프로젝트는 근본적인 패러다임 전환을 제안합니다. "에이전트가 UI라는 언어를 말하게 하자 (Speak UI)" 철학 아래, 에이전트는 단순히 텍스트로 답하는 대신 상황에 맞는 UI 컴포넌트를 직접 요청합니다.

식당 예약 예시에서 A2UI를 사용하면:

  1. 사용자가 "2명 예약해줘"라고 입력
  2. 에이전트는 하나의 폼(Form)을 생성
  3. 폼에는 날짜 선택기(Date Picker), 시간 선택기(Time Selector), 인원수 조절 버튼이 포함됨
  4. 사용자는 UI를 통해 클릭 몇 번으로 완료
  5. 에이전트가 즉시 예약 처리

Why it matters: A2UI는 "에이전트가 뭘 해야 할지 텍스트로 설명하는 것"이 아니라 "필요한 도구(UI)를 건네주는" 방식으로 전환합니다. 이는 사용자 경험을 획기적으로 개선합니다.

3. A2UI의 세 가지 핵심 특징

3-1. 보안 우선 (Security First): 데이터, 코드가 아니다

A2UI의 가장 큰 특징은 실행 코드가 아닌 선언적 JSON 데이터라는 점입니다.

요소 기존 방식 A2UI
전송 방식 HTML/JavaScript 코드 선언적 JSON
렌더링 iframe 내 실행 클라이언트 네이티브 컴포넌트
보안 모델 샌드박싱 필수 컴포넌트 카탈로그 기반
UI 인젝션 위험 높음 원천 차단

클라이언트 애플리케이션은 신뢰할 수 있는 UI 컴포넌트 목록 (Card, Button, TextField 등)인 '카탈로그'를 유지합니다. 에이전트는 오직 이 카탈로그에 있는 컴포넌트만 렌더링할 수 있으므로, UI 인젝션과 임의 코드 실행을 원천적으로 차단합니다.

Why it matters: 원격 에이전트(다른 서버에서 실행)가 클라이언트에 UI를 보낼 때, 보안 취약점을 제거하는 것은 엔터프라이즈 환경에서 필수입니다. A2UI는 신뢰 경계(Trust Boundary)를 명확히 설정합니다.

3-2. LLM 친화적 구조 (LLM-Friendly Architecture)

A2UI의 UI 구조는 거대한 트리 구조가 아닌 평면적 리스트(Flat Adjacency List) 형태로 표현됩니다. 이는 대규모 언어 모델(LLM)이 생성하기에 훨씬 효율적입니다.

{
  "components": [
    { "id": "1", "type": "text", "content": "예약 정보" },
    { "id": "2", "type": "date-picker", "label": "날짜" },
    { "id": "3", "type": "time-selector", "label": "시간" },
    { "id": "4", "type": "button", "label": "예약하기", "onClick": "submit" }
  ],
  "layout": {
    "surface": "main",
    "children": ["1", "2", "3", "4"]
  }
}

이러한 평면 구조는 두 가지 이점을 제공합니다:

  1. 점진적 생성 (Incremental Generation): LLM이 처음부터 완전한 JSON을 생성할 필요 없이, 부분적으로 업데이트 가능
  2. 스트리밍 지원: 대화가 진행되면서 UI의 특정 부분만 변경하는 데이터를 보낼 수 있어, 실시간 응답성 높은 경험 제공

Why it matters: LLM은 복잡한 중첩 구조(nested trees)를 생성하기 어렵지만, 평면 리스트는 쉽게 생성합니다. 이는 A2UI를 실제 프로덕션 환경에서 안정적으로 사용할 수 있게 합니다.

3-3. 프레임워크 불가지론 (Framework-Agnostic)

A2UI는 UI의 구조와 구현을 철저히 분리합니다. 에이전트는 추상적인 컴포넌트 트리만 전송하고, 실제 렌더링은 각 클라이언트의 담당입니다.

에이전트 응답:
{ "type": "card", "children": [{"type": "text", "content": "Hello"}] }

웹 (React/Angular) → <Card><Text>Hello</Text></Card>
모바일 (Flutter) → Card(child: Text("Hello"))
데스크톱 (SwiftUI) → Card { Text("Hello") }

이를 통해 하나의 A2UI 페이로드가 웹, 모바일, 데스크톱 등 다양한 플랫폼에서 각각의 네이티브 디자인으로 렌더링됩니다. 앱 전체 테마와 어울리는 아름다운 UI가 자동으로 생성됩니다.

Why it matters: 기존의 iframe 방식은 호스트 앱의 스타일과 어울리지 않지만, A2UI는 네이티브 컴포넌트를 사용하므로 일관성 있는 사용자 경험을 보장합니다.

4. A2UI의 동작 방식: 데이터 흐름

A2UI의 전체 파이프라인은 생성 → 전송 → 해석 → 렌더링의 4단계입니다:

┌──────────────┐
│ 사용자 메시지 │
└────┬─────────┘
     │
     v
┌──────────────────┐
│ A2A 에이전트     │ ← Python/Node.js 기반
│ (백엔드)         │
└────┬─────────────┘
     │
     v
┌──────────────────┐
│ Gemini API       │ ← LLM (JSON 생성)
│ (구글 AI)        │
└────┬─────────────┘
     │
     v (A2UI JSON 페이로드)
┌──────────────────┐
│ 웹 애플리케이션  │
│ (A2UI Renderer)  │ ← Lit, React, Angular 등
└────┬─────────────┘
     │
     v (네이티브 컴포넌트)
┌──────────────────┐
│ 최종 UI 렌더링   │
└──────────────────┘

세부 단계:

  1. 생성 (Generation): Gemini 같은 LLM이 A2UI JSON 페이로드 생성
  2. 전송 (Transport): A2A(Agent-to-Agent) 프로토콜이나 WebSocket 등으로 클라이언트 전송
  3. 해석 (Resolution): 클라이언트의 A2UI 렌더러가 JSON 파싱
  4. 렌더링 (Rendering): 추상 컴포넌트 타입(예: text-field)을 클라이언트의 구체적 구현체(위젯)로 매핑하여 화면 렌더링

Why it matters: 각 단계가 명확히 분리되어 있어, 어느 한 계층의 변경이 다른 계층에 영향을 주지 않습니다. 이는 확장성과 유지보수성을 크게 향상시킵니다.

5. A2UI 표준 사양 (v0.8 Stable)

A2UI는 현재 v0.8 안정 버전으로, 프로덕션 환경에서 사용할 수 있습니다.

항목 세부사항
최신 버전 v0.8 (Stable for Production)
미리보기 버전 v0.9 (Draft)
라이센스 Apache 2.0
공개 저장소 GitHub: google/A2UI
표준 카탈로그 https://github.com/google/A2UI/blob/main/specification/0.8/json/standard_catalog_definition.json
메시지 형식 JSONL (JSON Lines) - 스트리밍 지원
메시지 타입 surfaceUpdate, dataModelUpdate, eventHandler

표준 카탈로그에 포함된 기본 컴포넌트:

  • 레이아웃: Card, Row, Column, Surface
  • 입력: TextField, Button, Checkbox, RadioGroup, Slider, DatePicker, TimePicker, Select
  • 표시: Text, Image, Icon, Divider
  • 고급: List, Table, Timeline, Chart

클라이언트는 이 표준 컴포넌트 외에도 커스텀 컴포넌트를 정의할 수 있으므로, 플랫폼 고유의 기능(Google Map, 실시간 차트 등)도 활용 가능합니다.

Why it matters: v0.8이 안정 버전이라는 것은 대규모 팀이 프로덕션에 배포할 수 있다는 의미입니다. 변경 관리(Breaking Change)도 최소화됩니다.

6. 실제 사용 사례: 프로덕션 배포

6-1. Google Opal: AI 미니 앱 플랫폼

Google Opal은 자연어로 AI 애플리케이션을 만드는 플랫폼입니다. 사용자가 "식당 예약 봇"이라고만 말해도, Opal과 A2UI가 함께 동적으로 UI를 생성합니다.

A2UI 활용:

  • 빠른 프로토타이핑: UI를 코드로 작성하지 않고도 테스트
  • 사용자 생성 앱: 비개발자도 맞춤형 UI 앱 생성 가능
  • 동적 인터페이스: 각 사용 사례에 맞는 UI 자동 생성

6-2. Gemini Enterprise: 엔터프라이즈급 에이전트

Gemini Enterprise는 기업 업무용 커스텀 AI 에이전트를 지원합니다.

A2UI를 통한 워크플로우 자동화:

  • 데이터 입력 폼 (Data Entry Forms): 에이전트가 구조화된 입력 양식 자동 생성
  • 승인 대시보드 (Approval Dashboards): 복잡한 승인 프로세스를 동적 UI로 제공
  • 워크플로우 자동화 (Workflow Automation): 단계별 인터페이스로 직원 가이드

Google Gemini Enterprise 담당자 Fred Jabbour는 다음과 같이 언급했습니다:

"고객들은 에이전트가 단순히 답변하는 것만으로는 부족하며, 복잡한 워크플로우를 단계별로 안내할 수 있는 동적 UI가 필요합니다. A2UI는 개발자가 데이터 엔트리 폼부터 승인 대시보드까지 맞춤형 UI를 에이전트가 생성하도록 할 수 있게 하여, 워크플로우 자동화를 획기적으로 가속화합니다."

6-3. Flutter GenUI SDK: 크로스 플랫폼 UI 생성

Flutter 팀은 A2UI를 활용해 개인화된 네이티브 UI를 자동 생성합니다. 모바일 앱에서 브랜드 디자인 시스템을 유지하면서도, 에이전트가 동적으로 UI를 커스터마이즈합니다.

Why it matters: 이 세 사례는 모두 A2UI가 단순한 개념이 아니라, 실제 프로덕션에서 수백만 사용자를 처리하는 환경에 배포되고 있음을 보여줍니다.

7. A2UI vs 다른 표준/기술과의 비교

7-1. A2UI vs MCP (Model Context Protocol)

항목 A2UI MCP
목적 UI 렌더링 표준 외부 도구/API 호출 표준
전송 내용 UI 컴포넌트 정의 (선언적) 함수/도구 호출 (명령형)
보안 모델 클라이언트 컴포넌트 카탈로그 도구 권한 제어
사용 사례 동적 인터페이스 생성 외부 데이터/서비스 통합

공존 관계: A2UI와 MCP는 상호 보완적입니다. MCP로 데이터를 가져오고, A2UI로 그 데이터를 표시하는 UI를 생성할 수 있습니다.

7-2. A2UI vs AG-UI

항목 A2UI AG-UI
계층 UI 정의 (Payload) 이벤트 전송 (Transport)
역할 컴포넌트 구조 정의 에이전트-클라이언트 통신

관계: AG-UI는 전송 계층이고, A2UI는 페이로드 정의입니다. 많은 경우 AG-UI를 통해 A2UI 메시지를 전송합니다.

7-3. A2UI vs 기존의 HTML/JavaScript 원격 렌더링

항목 A2UI 기존 방식
전송 선언적 JSON (데이터) HTML/JS (실행 코드)
보안 원천 차단 iframe 샌드박싱 필수
네이티브 스타일 완벽 일치 이질감 발생
성능 가볍고 빠름 무겁고 느림

기존 방식은 원격 서버에서 HTML/JavaScript를 보내 iframe 내에서 실행해야 하므로, 보안 취약점이 발생하고 호스트 앱의 스타일과 맞지 않습니다. A2UI는 이 모든 문제를 해결합니다.

Why it matters: A2UI는 단순한 UI 표준이 아니라, 에이전트-클라이언트 아키텍처의 근본적인 문제를 풀어줍니다.

8. A2UI 빠른 시작: 5분 안에 체험하기

Google은 A2UI를 5분 안에 체험할 수 있는 퀵스타트 샘플을 제공합니다.

환경 준비:

  • Node.js 및 Python 설치
  • Gemini API Key 발급 (ai.google.dev에서 무료)

설치 및 실행:

# 1. A2UI 저장소 클론
git clone https://github.com/google/a2ui.git
cd a2ui

# 2. API 키 설정
export GEMINI_API_KEY="your_gemini_api_key_here"

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

# 4. 프론트엔드 실행 (터미널 2)
cd samples/client/lit/shell
npm install
npm run dev

# 5. 브라우저에서 확인
# http://localhost:5173 접속

체험 가능한 다른 데모:

# 컴포넌트 갤러리 (에이전트 불필요)
npm start -- gallery

# 연락처 검색 데모
npm run demo:contact

Why it matters: 5분의 초기 설정만으로도 A2UI의 강력함을 직접 체험할 수 있습니다. 이는 기술 선택의 진입 장벽을 크게 낮춥니다.

9. A2UI 채택의 영향

실제 팀들이 A2UI를 채택하면서 얻은 성과:

  • 개발 시간 30% 단축: UI 코드 작성 대신 에이전트가 생성
  • 오류 감소: 선언적 데이터 포맷은 검증 용이
  • 빠른 반복: 프로토타입 제작 → 테스트 → 배포 사이클 가속화

예를 들어 전자상거래 회사는 A2UI를 통해:

  • 사용자 선호도에 실시간으로 반응하는 동적 UI 생성
  • 여러 디바이스(웹, 모바일)에서 일관성 있는 경험 제공
  • 새로운 제품 카테고리 추가 시 UI 로직 재작성 불필요

Why it matters: 기술 도입의 궁극적 목표는 생산성 향상입니다. A2UI는 정량적인 시간 절감을 달성합니다.

결론

A2UI(Agent-to-User Interface)는 단순한 UI 프로토콜이 아니라, AI 에이전트 시대의 인터페이스 패러다임 전환을 의미합니다. 기존의 텍스트 기반, 다중 턴 상호작용에서 벗어나 에이전트가 상황에 맞는 UI를 동적으로 생성하는 미래를 열고 있습니다.

세 가지 핵심 강점을 정리하면:

  1. 보안 우선: 선언적 데이터만 전송하므로 UI 인젝션, 임의 코드 실행 원천 차단
  2. LLM 친화: 평면 구조로 LLM이 쉽게 생성 가능하며, 스트리밍을 통한 실시간 업데이트 지원
  3. 크로스 플랫폼: 웹, 모바일, 데스크톱 어디서나 동일한 페이로드로 네이티브 UI 렌더링

Google Opal, Gemini Enterprise, Flutter GenUI 등 이미 프로덕션 환경에서 성공적으로 운영되고 있으며, v0.8 안정 버전으로 새로운 프로젝트에 즉시 도입 가능합니다.

AI 에이전트가 점점 복잡한 작업을 수행하는 시대, A2UI는 보안을 지키면서도 풍부한 사용자 경험을 제공하는 표준으로 자리잡을 것입니다.

References

반응형
저작자표시 비영리 변경금지 (새창열림)

'AI > Technical' 카테고리의 다른 글

Anthropic의 Bloom 프레임워크: AI 모델 행동 자동 평가의 새로운 표준  (4) 2025.12.23
구글 FunctionGemma: 스마트폰에서 100% 로컬 실행되는 270M 초경량 에이전트 모델  (1) 2025.12.19
CPU와 GPU, TPU의 차이를 완벽하게 이해하기  (3) 2025.12.17
마크다운에서 머메이드(Mermaid) 사용법 완벽 가이드  (4) 2025.12.16
죽은 프레임워크 이론: React의 플랫폼화와 LLM의 자기 강화 피드백 루프  (4) 2025.12.11

'AI/Technical'의 다른글

  • 현재글A2UI(Agent-to-User Interface): Google의 오픈 표준으로 AI 에이전트가 맞춤형 UI를 즉석에서 생성하다

관련글

티스토리툴바