마법처럼 UI를 만들어내는 오픈소스 도구

하이라이트

• Gemini 3.8 Flash 모델과 Open UI 표준을 활용해 소스 코드가 전혀 없는 상태에서 사용자 요청에 따라 즉석에서 UI 앱을 스트리밍 방식으로 생성한다.

• Open UI는 특정 UI 라이브러리에 종속되지 않으며 React, Vue, Svelte를 비롯해 Tailwind, Shadcn, Chakra UI 등 원하는 도구로 컴포넌트를 렌더링할 수 있는 사양이다.

• 기존 JSON 포맷은 중첩 구조 때문에 전체 응답을 기다려야 하는 반면 Open UI Lang은 줄 단위로 전달 및 파싱이 가능하여 속도가 빠르고 토큰 효율성이 높다.

• json-render나 A2UI 같은 대안 기술과 비교했을 때 Open UI Lang은 토큰 소비량이 절반 이하이며 지연 시간도 현저히 짧다.

• 초고속 모델 추론 기술이 발전함에 따라 프론트엔드 영역을 사용자 범위의 샌드박스 내부에서 즉석으로 생성하는 방식이 더욱 실용적인 사용자 경험을 제공할 것이다.

타임라인

1. 00:00 - 01:05

   소스 코드 없는 즉석 앱 생성 데모

   사전 작성된 소스 코드 없이 사용자 프롬프트에 맞춰 대시보드 내에서 앱이 실시간으로 빌드되는 과정을 보여준다. 날씨 확인, 계산, 주변 커피숍 검색 및 외부 링크 이동까지 실제 작동하는 기능들을 직접 구현해 보인다.

   • 대시보드에서 아이콘을 클릭하고 계산기, 커피숍 찾기 등의 명령어를 입력하면 즉석에서 앱이 생성된다.
   • 앱이 스트리밍되며 화면에 나타나고 생성된 지도나 버튼 등 실제 기능과 완벽하게 상호작용할 수 있다.
   • 해당 데모는 Gemini 3.8 Flash 모델과 Open UI를 기반으로 구동된다.
2. 01:05 - 04:12

   Open UI의 개념과 작동 원리

   챗GPT의 인텔리전트 UI와 유사한 생성형 UI 기술의 배경을 설명한다. 샌프란시스코 관광 코스나 드럼 패드 생성 예시를 통해 사용자 맞춤형 인터페이스의 유용성을 강조하며, 전체 응답을 대기해야 하는 기존 JSON 방식의 속도 한계를 극복하기 위해 도입된 Open UI Lang의 구조를 다룬다.

   • Open UI는 데이터를 렌더링하거나 간단한 양식을 만들기 위해 즉석에서 적은 양의 UI를 생성하는 목적을 가진다.
   • 개발자가 모든 예외 케이스를 미리 처리할 필요 없이 사용자 맞춤형 경험을 제공할 수 있다.
   • 특정 UI 라이브러리에 묶이지 않고 React, Vue, Tailwind 등 다양한 기술 스택과 연동된다.
   • 전체 응답을 기다려야 하는 JSON 대신 줄 단위로 파싱 가능한 컴팩트한 커스텀 포맷인 Open UI Lang을 사용한다.
3. 04:12 - 06:32

   경쟁 기술 비교 및 생성형 UI의 미래 전망

   다양한 생성형 UI 표준 간의 토큰 효율성과 지연 시간을 비교하여 커스텀 언어가 가지는 최적화 장점을 설명한다. 로컬 환경에서 고속 모델을 도입하는 과정의 시행착오를 공유하고, 미래의 초고속 추론 환경에서 구현될 고도화된 사용자 샌드박스 아키텍처를 전망한다.

   • json-render나 Google의 A2UI 같은 대안 기술은 Open UI Lang에 비해 2배 이상 많은 토큰을 소비하고 지연 시간이 길다.
   • 초당 수천 토큰을 처리하는 고성능 모델을 적용하는 과정에서 속도 제한 및 에러 문제를 겪었으나 Gemini 3.8 Flash로 해결했다.
   • 향후 초고속 모델 환경에서는 프론트엔드 영역이 사용자 샌드박스 내에서 즉석 생성되는 형태로 발전할 것이다.