“이번 달 식비가 얼마였지?” 챗봇에게 물으면 “식비는 1,234달러, 외식비는 567달러입니다”라는 텍스트가 돌아옵니다. 그런데 예산을 초과한 카테고리는 뭔지, 어떻게 지출 패턴이 변했는지 알려면 또 질문해야 하죠. 이런 왕복 대화를 10번쯤 하다 보면 그냥 스프레드시트를 여는 게 빠릅니다.

Google A2UI는 이 문제를 정면으로 해결합니다. AI가 텍스트 대신 대시보드를 그려주는 거죠. 프롬프트 하나면 슬라이더, 차트, 필터가 있는 완전한 인터페이스가 만들어집니다.

Analytics Vidhya가 A2UI를 실제로 활용하는 방법을 구체적인 예제와 함께 정리한 가이드를 발표했습니다. 개념 설명을 넘어 “어떤 프롬프트를 써야 하는지”, “어떤 UI가 만들어지는지”를 보여주는 실전 중심 내용입니다.

출처: Google A2UI Explained: How AI Agents Build Secure, Native UIs – Analytics Vidhya

시작하기: 두 가지 방법

A2UI를 써보는 방법은 두 가지입니다.

첫 번째는 웹 인터페이스입니다. a2ui-composer.ag-ui.com에 접속해서 로그인하면 바로 프롬프트를 입력할 수 있어요. 설치 없이 빠르게 테스트하기 좋습니다.

두 번째는 로컬 환경 구축입니다. GitHub 저장소를 클론하고 Gemini API 키를 설정한 뒤 샘플 에이전트를 실행하는 방식이죠. 커스터마이징이나 깊은 실험을 하려면 이 방법이 낫습니다.

처음 시도한다면 웹 인터페이스부터 시작하는 걸 추천합니다. 프롬프트 작성법을 익힌 다음 로컬로 넘어가도 늦지 않아요.

예제 1: 예산 추적 대시보드

텍스트 방식의 한계

기존 챗봇 방식으로 예산을 관리하면 이렇게 됩니다.

사용자: “이번 달 지출이 얼마였지?”
AI: “식비 1,234달러, 외식비 567달러를 쓰셨습니다”
사용자: “어떤 카테고리가 예산을 초과했어?”
AI: “외식비가 500달러 예산을 67달러 초과했습니다”
사용자: “자세한 리포트 보여줘”

이런 식으로 계속 물어봐야 원하는 정보를 얻을 수 있죠.

A2UI 프롬프트 작성

같은 작업을 A2UI로 처리하려면 이렇게 프롬프트를 씁니다.

아래 거래 데이터로 예산 추적 대시보드를 만들어줘.

데이터:
12월 1일: $200 (식비)
12월 1일: $300 (의류)
12월 2일: $500 (여행)

예산 한도: 각 카테고리당 $400로 기본 설정

프롬프트 자체는 단순합니다. 데이터와 요구사항만 명확히 전달하면 됩니다.

생성되는 컴포넌트

AI는 이 프롬프트를 받아서 완전한 대시보드를 만들어냅니다.

인터랙티브 슬라이더가 카테고리별 지출 분포를 보여줍니다. 시각적으로 어디에 돈을 많이 썼는지 한눈에 들어오죠.

편집 가능한 예산 한도가 텍스트 필드로 제공됩니다. 사용자가 직접 숫자를 바꿔가며 시뮬레이션할 수 있어요.

날짜 범위 선택기로 특정 기간의 지출을 비교할 수 있습니다. 이번 달과 지난달을 비교하거나, 분기별 패턴을 보는 식이죠.

카테고리 필터는 토글 스위치로 구현됩니다. 식비만 보고 싶으면 다른 카테고리를 끄면 됩니다.

트렌드 분석이 시간 흐름에 따른 지출 패턴을 보여줍니다. 매주 외식비가 늘고 있다면 차트에서 바로 확인할 수 있어요.

사용자는 타이핑 없이 슬라이더를 움직이고, 체크박스를 클릭하고, 탭 한 번으로 세부 정보를 확인합니다. 10번의 대화가 한 번의 상호작용으로 바뀌는 거죠.

예제 2: 택시 예약 시스템

복잡한 UI 설계

택시 예약은 예산 대시보드보다 훨씬 복잡합니다. 지도, 실시간 위치 추적, 드라이버 정보, 가격 계산이 모두 필요하니까요.

텍스트 방식이라면 “어디서 타세요?”, “어디로 가세요?”, “언제 필요하세요?”, “어떤 차량을 원하세요?” 같은 질문을 순차적으로 던져야 합니다. 사용자는 매번 입력하고 기다려야 하고요.

단일 화면으로 통합

A2UI는 이 모든 단계를 한 화면에 담을 수 있습니다. 프롬프트에서 “단일 화면”을 명시하고, 예약 전 단계와 예약 후 단계의 전환 로직까지 설명하면 됩니다.

택시 예약 인터페이스를 만들어줘. 단일 화면으로 구성하되, 
예약 전후로 UI가 전환되어야 해.

예약 전 단계:
- 인터랙티브 지도: 드래그 가능한 '픽업' 핀과 '목적지' 핀, 경로 표시
- 주소 입력: 자동완성 지원, 목적지는 "456 Oak Avenue"로 기본값 설정
- 차량 선택: Economy, Premium, XL 옵션을 가로 리스트로 표시
  각 옵션에 실시간 가격, 도착 예상 시간(예: "3분 후"), 차량 아이콘 포함
- 환경설정:
  * "최단 경로 vs 최속 경로" 토글
  * 저장된 장소 목록 (집, 회사, 헬스장)
  * 시간 선택기 (기본값: 지금)
- 비용 계산기: 기본 요금 + 세금 동적 표시

전환 로직:
"예약 확인" 버튼을 탭하면 화면을 지우지 말고, 
기존 UI를 "실시간 추적 모드"로 전환해줘.

예약 후 단계:
- 지도 업데이트: 운전자의 실시간 위치를 나타내는 차 아이콘 표시
- 도착 카드: 차량 선택기를 "운전자 정보 카드"로 교체
  드라이버 이름, 평점, 차량 번호 포함
  실시간 카운트다운 타이머 (예: "2분 14초 후 도착")
- 커뮤니케이션: [운전자에게 전화] [메시지 보내기] 버튼
- 비상: 눈에 띄는 "SOS" 버튼

디자인 스타일:
- 깔끔한 지도 중심 레이아웃 (Uber/Lyft 스타일)
- 입력 요소는 플로팅 액션 시트로 처리해서 지도 가시성 최대화

프롬프트 작성 포인트

이 프롬프트에서 주목할 점이 몇 가지 있습니다.

첫째, 구조화된 요구사항입니다. “예약 전 단계”, “전환 로직”, “예약 후 단계”로 명확히 나눠서 AI가 전체 흐름을 이해하도록 만들었어요.

둘째, 디자인 디테일입니다. “플로팅 액션 시트”, “가로 리스트”, “실시간 카운트다운” 같은 구체적인 UI 패턴을 명시했습니다. 추상적으로 “좋은 UI”라고 하면 AI가 해석하기 어렵거든요.

셋째, 인터랙션 명세입니다. “드래그 가능한 핀”, “토글”, “원탭 버튼”처럼 사용자가 어떻게 조작하는지까지 설명했습니다.

결과적으로 AI는 지도, 주소 자동완성, 차량 선택 UI, 실시간 추적, 드라이버 정보 카드를 모두 갖춘 완전한 예약 시스템을 만들어냅니다. 예약 버튼을 누르면 같은 화면이 자연스럽게 추적 모드로 전환되고요.

프롬프트 작성 팁

A2UI를 효과적으로 쓰려면 프롬프트를 어떻게 구성하느냐가 중요합니다.

데이터와 요구사항을 명확히 분리하세요. “이런 데이터가 있고, 이런 UI를 원한다”는 식으로 구조화하면 AI가 맥락을 더 잘 이해합니다.

구체적인 UI 패턴을 언급하세요. “슬라이더”, “토글 스위치”, “드래그 가능한 핀”처럼 정확한 컴포넌트 이름을 쓰는 게 “사용자 친화적인 인터페이스”처럼 모호한 표현보다 낫습니다.

인터랙션을 설명하세요. 사용자가 무엇을 클릭하면 무슨 일이 일어나는지 명시하면, AI가 단순한 정적 화면이 아니라 동적인 흐름을 만들어냅니다.

디자인 참조를 활용하세요. “Uber 스타일”, “Material Design”, “미니멀한 대시보드” 같은 표현은 AI에게 시각적 방향을 제시하는 좋은 방법입니다.

단계를 나누세요. 복잡한 UI라면 “1단계”, “2단계”, “전환 로직”으로 명확히 구분하세요. 택시 예약 예제처럼요.

아직 초기 단계지만

A2UI는 현재 v0.8 버전입니다. 공개 프리뷰 단계라는 뜻이죠. 완성도 높은 제품이라기보다는 실험하고 피드백을 모으는 과정에 있습니다.

클라이언트 렌더러도 아직 Flutter, Web Components, Angular 정도만 지원됩니다. React나 Vue 같은 프레임워크는 커뮤니티 기여를 기다리는 중이고요.

하지만 방향은 분명합니다. AI가 텍스트만 생성하는 시대는 끝나가고 있어요. 이제 AI는 예산 관리 툴, 예약 시스템, 프로젝트 대시보드를 직접 만들 수 있습니다. 프롬프트 하나로요.

개발자라면 지금이 실험하기 좋은 타이밍입니다. 완성도를 기대하기보다는, 새로운 패러다임을 미리 경험해보는 거죠. 프롬프트로 UI를 그린다는 발상이 어디까지 갈 수 있는지 직접 확인해보세요.

참고자료:

• Introducing A2UI: An open project for agent-driven interfaces – Google Developers Blog
• A2UI GitHub Repository – Google
• A2UI Official Documentation – A2UI Project