OpenUI: JSON보다 적은 토큰으로 UI를 스트리밍하는 생성형 UI 오픈 표준

9bow · 7월 6, 2026, 12:30오전

OpenUI 소개

LLM이 화면을 직접 그려주는 생성형 UI(Generative UI)는 보통 모델이 JSON으로 UI 구조를 출력하고, 클라이언트가 그 JSON을 파싱해 컴포넌트를 렌더링하는 방식으로 구현됩니다. 문제는 JSON 자체가 중괄호·따옴표·키 이름을 반복하는 장황한 포맷이라, 화면 하나를 표현하는 데도 토큰을 상당히 소모한다는 점입니다. OpenUI는 이 문제를 JSON 대신 스트리밍에 최적화된 전용 언어인 OpenUI Lang으로 UI를 표현해 해결하는 풀스택 생성형 UI 프레임워크입니다.

OpenUI의 핵심은 컴포넌트 라이브러리를 먼저 정의하면, 그 라이브러리로부터 모델에게 줄 시스템 프롬프트를 자동 생성하고, 모델이 내보낸 OpenUI Lang 스트림을 React 런타임이 토큰이 도착하는 대로 점진적으로 렌더링하는 구조입니다. 차트·폼·테이블·레이아웃 같은 기본 컴포넌트 라이브러리가 내장되어 있어 바로 쓰거나 확장할 수 있고, Zod 스키마로 컴포넌트의 props와 구조를 미리 타입으로 정의할 수 있습니다.

이 프로젝트는 Thesys가 공개한 오픈소스로, 2024년 12월 처음 공개된 뒤 2026년 7월 기준 GitHub에서 7,700개 이상의 스타를 받았습니다. React 외에도 Vue 3, Svelte 5 바인딩과 스크립트 태그만으로 붙일 수 있는 브라우저 번들, 이메일 렌더링용 패키지까지 제공해 프레임워크에 크게 얽매이지 않고 도입할 수 있습니다.

OpenUI의 데이터 흐름

OpenUI README는 전체 동작을 "Component Library → System Prompt → LLM → OpenUI Lang Stream → Renderer → Live UI"라는 흐름도로 정리하고 있습니다. 개발자가 허용할 컴포넌트 라이브러리를 정의하면, OpenUI가 이 라이브러리 정보로부터 모델에게 전달할 시스템 프롬프트를 생성합니다. 이 프롬프트를 받은 LLM은 정해진 컴포넌트 범위 안에서만 결과를 만들어내며, 그 결과를 JSON이 아니라 OpenUI Lang이라는 압축된 스트림 형태로 출력합니다.

클라이언트의 Renderer는 이 스트림을 토큰이 도착하는 즉시 파싱해 React 화면에 반영합니다. 즉 모델의 출력이 끝날 때까지 기다렸다가 한 번에 렌더링하는 것이 아니라, 응답이 만들어지는 도중에도 차트나 표, 폼이 화면에 점진적으로 채워지는 방식입니다. 이 구조 덕분에 같은 화면을 표현할 때 OpenUI Lang이 JSON 기반 방식보다 적은 토큰을 사용하게 됩니다.

OpenUI Lang의 토큰 효율성

OpenUI README는 tiktoken(GPT-5 인코더 기준)으로 7가지 UI 시나리오를 측정한 벤치마크를 공개하고 있습니다. 표는 Vercel의 json-render, Thesys의 C1 JSON 방식과 OpenUI Lang을 비교합니다.

시나리오	Vercel JSON-Render	Thesys C1 JSON	OpenUI Lang	OpenUI 대비 절감
단순 테이블	340	357	148	-56.5%
데이터 차트	520	516	231	-55.6%
문의 폼	893	849	294	-67.1%
대시보드	2,247	2,261	1,226	-45.4%
가격 페이지	2,487	2,379	1,195	-52.0%
설정 패널	1,244	1,205	540	-56.6%
이커머스 상품	2,449	2,381	1,166	-52.4%
합계	10,180	9,948	4,800	-52.8%

일곱 시나리오 전체 합산 기준으로 OpenUI Lang은 Vercel의 json-render 대비 52.8%, Thesys C1 JSON 대비 51.7% 적은 토큰을 사용했습니다. 자세한 측정 방법과 재현 절차는 저장소의 benchmarks/ 디렉토리에 공개되어 있습니다.

OpenUI의 패키지 구성

OpenUI는 하나의 거대한 라이브러리가 아니라 용도별로 나뉜 패키지 모음으로 배포됩니다.

@openuidev/lang-core: React·Vue·Svelte에 의존하지 않는, 프레임워크 독립적인 파서와 프롬프트 생성 레이어입니다.
@openuidev/react-lang: 컴포넌트 라이브러리를 정의하고 프롬프트를 생성하며, 스트리밍된 OpenUI Lang을 React에서 렌더링하는 런타임입니다.
@openuidev/react-headless: 직접 UI를 만들고 싶은 경우를 위한 헤드리스 채팅 상태 관리와 스트리밍 어댑터입니다.
@openuidev/react-ui: 완성된 채팅 레이아웃과 두 가지 내장 컴포넌트 라이브러리를 제공해 가장 빠르게 화면을 구성할 수 있습니다.
@openuidev/vue-lang / @openuidev/svelte-lang: 각각 Vue 3, Svelte 5를 위한 바인딩입니다.
@openuidev/browser-bundle: 렌더러와 UI 라이브러리, React, 스타일을 스크립트 태그 하나로 묶어 CDN이나 iframe, 빌드 없는 환경에서 바로 쓸 수 있게 합니다.
@openuidev/cli: 새 프로젝트를 스캐폴딩하거나 컴포넌트 라이브러리 정의로부터 시스템 프롬프트·JSON 스키마를 생성하는 CLI입니다.

OpenUI 설치 및 사용법

가장 빠르게 시작하는 방법은 CLI로 예제 앱을 스캐폴딩하는 것입니다.

npx @openuidev/cli@latest create --name genui-chat-app
cd genui-chat-app
echo "OPENAI_API_KEY=sk-your-key-here" > .env
npm run dev

이 명령은 스트리밍과 내장 UI, OpenUI Lang 지원이 이미 연결된 실행 가능한 앱을 만들어줍니다. 기존 React 프로젝트에 직접 통합하려면 다음 패키지를 설치합니다.

# 내장 컴포넌트가 포함된 React 앱
npm install @openuidev/react-lang @openuidev/react-ui

# 프레임워크에 독립적인 백엔드/엣지용 프롬프트 생성
npm install @openuidev/lang-core

직접 UI를 만들어보고 싶다면 Playground에서 기본 컴포넌트 라이브러리로 실시간 생성 결과를 바로 확인할 수 있습니다.

OpenUI의 라이선스

OpenUI는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

OpenUI 플레이그라운드

OpenUI 공식 홈페이지

OpenUI 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다.

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~