Intro
LLM 기반 서비스에서 텍스트 위주의 응답은 사용자 경험 측면에서 한계가 존재한다.
특히 최근들어 서비스 고도화를 위해 에이전트가 상황에 맞는 동적 UI (Form, Chart, Button...etc)
를 직접 제공하는 기능이 요구되고 있다.
다만, 서버에서 HTML이나 JS 코드를 클라이언트로 직접 전송하여 렌더링하는 고전적인 방식에서 XSS같은 보안 취약점을 발생시킬 우려도 있고, 클라이언트 프레임워크와의 강결합으로 인해 프론트엔드 유지보수를 어렵게 만든다.
최근 사내 프로젝트에서 Google의 오픈소스 프로토콜인 A2UI(Agent-to-User Interface)를 도입하여 이 문제를 해결하고, 에이전트 주도 UI(Agent-Driven UI) 구조로 개선한 과정을 차차 공유하고자 한다.
Requirements
기존 구조에서는 에이전트의 텍스트 응답을 특정 포맷으로 파싱하고 UI를 강제로 매핑하는 하드코딩 로직에 의존하여 확장성이 크게 떨어졌다. 새로운 아키텍처에서는 다음 세 가지 조건을 충족해야 했다.
실행 코드 배제 (보안성): 에이전트 응답 내에 실행 가능한 스크립트가 포함되어서는 안 된다.
프레임워크 종속성 제거: 에이전트는 프론트엔드 환경(React, Vue, Flutter 등)을 몰라도 UI 의도를 명확히 전달할 수 있어야 한다.
상태의 점진적 업데이트: 스트리밍 환경에서 지속적으로 갱신되는 UI 데이터를 클라이언트 상태 트리에 무결성을 유지하며 병합해야 한다.
Solutions
- 선언적 JSON 렌더링 (by A2UI Protocol)
A2UI는 에이전트가 UI의 구조와 데이터를 선언적인 JSON 형태로만 응답하도록 강제한다. 클라이언트는 이 데이터를 읽어, 내부 네이티브 컴포넌트로 렌더링한다.
- 컴포넌트 레지스트리 패턴 (Registry Pattern)
A2UI의 핵심은 서버가 명시한 UI 타입과 클라이언트의 실제 구현체인 컴포넌트와의 매핑이며,
에이전트가 전달하는 type 값에 따라 사전에 정의된 React 컴포넌트가 렌더링되도록 구현한다.
최근 며칠 전 A2UI 레포에 React Renderer가 제공되었다고 한다 이를 활용해서..?.
Conclusion
구글에서 제공하는 A2UI의 도입으로 단순한 렌더링 방식의 변경이 아닌, 에이전트와 프론트엔드 간의 데이터 교환 규격을 논리적으로 분리하고 표준화하는 작업 목표이다. 아직, 전사적으로 도입된건 아니기에 추가적인 리서치를 더 해보고 이어서 작성하고자 한다.
