지금까지의 AI 에이전트는 주로 '텍스트'나 '코드'를 통해 우리와 소통했습니다. 맛집을 추천해달라고 하면 텍스트 목록을 주거나, 코드를 짜달라고 하면 파이썬 스크립트를 뱉어내는 식이었죠. 하지만 사용자가 진짜 원하는 건, 텍스트 뒤에 숨겨진 '실행 가능한 도구' 즉, 직관적인 UI입니다.
구글이 최근 공개한 A2UI (Agent-to-User Interface)는 이러한 패러다임을 완전히 바꿀 오픈 소스 프로토콜입니다. AI가 단순히 말을 하는 것을 넘어, 상황에 딱 맞는 버튼, 폼(Form), 지도를 즉석에서 그려내는 세상! 개발자라면 반드시 주목해야 할 이 기술의 정체를 파헤쳐 보겠습니다. 😊
1. A2UI란 무엇인가? (Agent speaks UI) 🤔
A2UI는 'AI 에이전트'와 '사용자 인터페이스(Client)' 사이의 소통을 위한 표준 프로토콜입니다. 핵심 철학은 "에이전트가 UI를 말하게 하자(Agents speak UI)"는 것입니다.
기존의 생성형 UI(Generative UI) 방식들은 주로 AI가 HTML이나 JavaScript 코드를 생성하고, 이를 웹뷰(WebView)나 iframe에 띄우는 방식이었습니다. 하지만 이 방식은 보안에 취약하고(임의 코드 실행 위험), 기존 앱 디자인과 이질감이 드는 문제가 있었죠.
A2UI는 실행 가능한 코드를 보내지 않습니다. 대신 "이런 의도의 UI가 필요해"라는 JSON 데이터를 보냅니다. 클라이언트는 이 데이터를 받아 자신의 네이티브 컴포넌트(Flutter, React 등)로 렌더링합니다.
2. 작동 원리와 아키텍처 📊
A2UI의 아키텍처는 보안(Security), LLM 친화성(LLM-Friendliness), 이식성(Portability)이라는 세 가지 기둥 위에 세워졌습니다.
사용자가 "내일 저녁 7시, 2명 식당 예약해줘"라고 요청했을 때의 흐름을 살펴볼까요?
- Agent (Server): 사용자의 의도를 파악하고, 예약에 필요한 UI 구조(날짜 선택기, 인원수 조절 버튼 등)를 A2UI 포맷의 JSON으로 생성합니다.
- Transport: 생성된 JSON 페이로드는 A2A(Agent-to-Agent) 프로토콜 등을 타고 클라이언트로 전송됩니다.
- Client (Renderer): 클라이언트(앱)는 JSON을 해석하여 미리 정의된 네이티브 위젯으로 변환해 화면에 그립니다.
기존 방식 vs A2UI 비교
| 구분 | 기존 생성형 UI (HTML/JS) | Google A2UI |
|---|---|---|
| 전송 데이터 | 실행 가능한 코드 (HTML/JS) | 선언적 데이터 (JSON) |
| 보안성 | 취약함 (샌드박싱 필수) | 안전함 (코드 실행 없음) |
| 디자인 일관성 | 앱과 이질적 (웹뷰 느낌) | 완벽한 네이티브 룩앤필 |
| 플랫폼 | 웹 중심 | 크로스 플랫폼 (Flutter, Angular 등) |
A2UI는 현재 v0.8 (Public Preview) 단계입니다. API나 사양이 변경될 수 있으므로 프로덕션 도입 시에는 GitHub 저장소의 최신 변경 사항을 확인해야 합니다.
3. 개발자를 위한 A2UI 구현 예시 🧮
A2UI의 가장 큰 특징은 LLM이 생성하기 쉽도록 평면적인(Flat) 구조의 JSON을 선호한다는 점입니다. 이는 복잡한 트리 구조보다 생성 오류를 줄이고, 스트리밍(Streaming) 전송에 유리합니다.
📝 A2UI JSON 페이로드 예시
시나리오: 식당 예약을 위한 날짜 및 시간 선택 카드 생성
에이전트는 아래와 같이 컴포넌트의 ID, 타입, 속성, 그리고 자식 요소의 ID 참조를 포함한 JSON을 전송합니다.
{
"rootId": "reservation-card",
"components": [
{
"id": "reservation-card",
"type": "card",
"props": { "title": "식당 예약" },
"children": ["date-picker", "time-select", "submit-btn"]
},
{
"id": "date-picker",
"type": "date-input",
"props": { "label": "날짜 선택" }
},
{
"id": "time-select",
"type": "dropdown",
"props": {
"options": ["18:00", "19:00", "20:00"],
"label": "시간"
}
},
{
"id": "submit-btn",
"type": "button",
"props": { "label": "예약 확정", "action": "confirm_booking" }
}
]
}설명: 클라이언트는 이 JSON을 받아 `card`, `date-input` 등의 타입을 미리 구현된 React 컴포넌트나 Flutter 위젯에 매핑하여 렌더링합니다.
이렇게 UI 구조와 구현이 분리되어 있기 때문에, 동일한 JSON을 받아도 웹에서는 HTML 요소로, 모바일에서는 네이티브 뷰로 최적화되어 표시됩니다. 이것이 바로 'Write Once (by AI), Render Everywhere'의 실현입니다.
4. A2UI가 가져올 미래: 에이전트 메시 🕸️
A2UI는 단순히 UI를 그리는 도구가 아닙니다. 구글은 이를 '멀티 에이전트 메시(Multi-Agent Mesh)'를 위한 핵심 인프라로 보고 있습니다. 서로 다른 조직의 AI 에이전트들이 협업할 때, A2UI는 공용어 역할을 하게 됩니다.
구글의 Gemini 앱과 Opal(미니 앱 플랫폼), 그리고 Flutter GenUI SDK에는 이미 A2UI가 통합되어 있습니다. 또한, AI UI 오픈소스 도구인 CopilotKit (AG UI) 팀도 A2UI 지원을 약속하며 생태계 확장에 나섰습니다.
자주 묻는 질문 ❓
'IT 및 AI' 카테고리의 다른 글
| 구글 Disco 브라우저 공개: GenTabs로 나만의 앱 만들기 (0) | 2025.12.30 |
|---|---|
| 카카오 멀티모달 임베딩: 한국어와 이미지를 잇는 기술 혁신 (0) | 2025.12.30 |
| 구글 펑션젬마(Function Gemma) 출시! Gemma 3 기반 초경량 AI (0) | 2025.12.30 |
| 구글, 2026년 맞이 AI 프리미엄 반값 할인 시작! (놓치면 손해) (0) | 2025.12.30 |
| Gemini 3.0 Flash 출시! 2.5 대비 3배 빨라진 이유 (0) | 2025.12.19 |