AI 에이전트가 화면을 그린다 — OpenGenerativeUI와 AG-UI 프로토콜

챗봇에 "지난 3개월 매출 트렌드를 보여줘"라고 물으면 대부분의 서비스는 미리 만들어둔 대시보드 페이지로 사용자를 옮긴다. OpenGenerativeUI는 이 순서를 뒤집는다. 미리 준비된 화면으로 이동시키는 대신, 그 데이터에 맞는 인터랙티브 차트를 AI 에이전트가 그 자리에서 만들어낸다.

Generative UI라는 접근

Generative UI는 AI가 대화의 맥락을 분석해 그 순간 가장 적합한 UI 요소를 생성한다는 개념이다. 사용자마다, 요청마다 다른 화면이 나올 수 있다는 뜻이다.

⤢✕

OpenGenerativeUI는 이 개념을 오픈소스로 구현한 CopilotKit의 프레임워크다. LangGraph와 통합해 AI 에이전트의 상태 기계와 UI 생성 로직을 연결하고, 샌드박스 환경에서 동적 UI를 안전하게 렌더링한다.

무엇을 그릴 수 있는가

OpenGenerativeUI가 AI에게 허용하는 렌더링 범위는 좁지 않다.

기능	설명	활용 예시
알고리즘 시각화	정렬, 탐색 알고리즘의 단계별 애니메이션	코드 교육, 디버깅 보조
3D 애니메이션	Three.js 기반 3D 오브젝트 렌더링	데이터 시각화, 제품 데모
차트 렌더링	D3.js, Chart.js 기반 동적 차트	분석 대시보드, 리포트
인터랙티브 다이어그램	클릭·드래그 가능한 관계도	아키텍처 설명, 프로세스 맵
라이브 HTML/SVG	임의의 HTML·SVG 마크업	커스텀 UI 컴포넌트

문제는 AI가 짜낸 코드를 메인 앱에서 곧바로 실행할 수는 없다는 점이다. 그래서 OpenGenerativeUI는 생성된 HTML/SVG를 샌드박스 iframe 안에서만 실행한다.

⤢✕

메인 앱의 DOM과 JavaScript 컨텍스트가 격리되므로, AI가 생성한 코드가 사용자의 인증 토큰을 탈취하거나 앱 상태를 건드릴 여지가 차단된다.

AG-UI 프로토콜의 확산

OpenGenerativeUI를 떠받치는 것은 AG-UI(Agent-UI) 프로토콜이다. AI 에이전트와 프론트엔드 사이의 실시간 통신을 표준화해, 어떤 에이전트 프레임워크든 어떤 프론트엔드 스택이든 AG-UI로 연결될 수 있도록 설계됐다.

채택 현황을 보면 실험적 오픈소스 수준을 넘어섰다는 게 드러난다.

채택 주체	역할
Google	AI 에이전트 주도 인터페이스 표준화
LangChain	에이전트 프레임워크 통합
AWS	클라우드 AI 서비스 연동
Microsoft	Azure AI 에이전트 지원
Mastra	에이전트 오케스트레이션
PydanticAI	Python AI 에이전트 SDK

주요 클라우드 벤더와 AI 프레임워크가 나란히 같은 프로토콜을 채택하고 있다는 건, Generative UI 표준화가 한 프로젝트의 지지 이상의 무게를 갖기 시작했다는 신호다.

CopilotKit과 LangGraph가 만나는 지점

OpenGenerativeUI는 CopilotKit이 개발했다. CopilotKit은 Fortune 500 기업의 10% 이상이 신뢰하는 풀스택 에이전틱 앱 SDK로, React 기반 앱에 AI 코파일럿 기능을 붙이는 데 특화돼 있다.

여기에 LangGraph를 얹으면 강력한 상태 관리가 따라온다. LangGraph는 에이전트의 상태를 그래프로 모델링해 복잡한 멀티 스텝 워크플로우를 표현할 수 있는 도구다.

⤢✕

이 조합에서 AI 에이전트는 텍스트로 답하는 데 그치지 않고, 사용자의 상호작용에 반응하는 UI를 직접 생성하고 관리하는 역할까지 맡는다.

Google이 뛰어든 A2UI

Google은 "A2UI(Agent-to-UI)"라는 오픈 프로젝트를 발표하며 에이전트 주도 인터페이스 표준화에 직접 뛰어들었다. Oracle, Google, CopilotKit이 공동으로 다음 세 가지를 정의하는 중이다.

AI 에이전트 정의: 에이전트가 UI 생성 요청을 어떻게 표현하고 전달하는지에 대한 인터페이스 명세

프론트엔드 실시간 통신: 에이전트와 프론트엔드 사이의 스트리밍 통신 프로토콜(AG-UI 기반)

UI 기술 표준화: 에이전트가 만들 수 있는 UI 요소의 유형과 인터랙션 모델 정의

Generative UI가 단일 프레임워크의 기능을 넘어 업계 전반의 인프라로 옮겨가고 있다는 뜻이다.

전통적 방식과 어디서 갈리는가

⤢✕

차원	전통적 UI 개발	Generative UI
설계 시점	개발 시점 사전 정의	런타임 동적 생성
유연성	정의된 화면만 표시	맥락에 최적화된 UI
개발 비용	모든 케이스 사전 구현 필요	프롬프트로 UI 명세
보안	코드 리뷰로 사전 검증	런타임 샌드박스 필요
일관성	디자인 시스템으로 통제	AI 생성 편차 관리 필요

Generative UI가 전통적 UI를 완전히 밀어내는 단계는 아직 아니다. 복잡한 디자인 시스템, 브랜드 일관성, 접근성 요구사항이 있는 프로덕션 환경에서는 사전 정의된 컴포넌트 체계가 여전히 필요하다. 지금 수준에서는 그 위에 얹어 동적 데이터 시각화와 맥락 특화 인터페이스를 보완하는 레이어로 보는 편이 맞다.

실제로 어디에 쓸 수 있나

데이터 분석 어시스턴트: "Q3 실적을 전년도와 비교해줘"라는 요청에 AI가 적합한 차트 유형을 골라 즉석에서 렌더링하고, "제품군별로 나눠봐"라는 추가 요청에는 차트를 바로 재구성한다.

교육 플랫폼: "퀵소트 알고리즘 이해가 안 돼"라는 말에 AI가 단계별 애니메이션으로 실행 과정을 보여주고, 학생이 배열 값을 직접 바꿔가며 동작을 확인할 수 있는 인터랙티브 UI를 만든다.

기업 내부 도구: 재고 관리 시스템에서 "이번 달 재고 부족 예상 품목을 우선순위별로 보여줘"라고 요청하면, AI가 데이터를 분석해 그 결과에 맞는 테이블·차트 조합을 그때그때 만든다.

Google, AWS, Microsoft, LangChain이 AG-UI 프로토콜을 채택하며 표준화가 진행되고 있다는 사실은, 이 흐름이 실험적 트렌드를 넘어 다음 세대 웹 인터페이스의 인프라 자리를 노리고 있음을 보여준다. 프론트엔드 개발자에게는 컴포넌트를 만드는 역할에서, AI가 컴포넌트를 만들 수 있는 시스템을 설계하는 역할로의 전환이 요구될 것이다.