json-render — OnePageDaily

GENERATIVE UI

프롬프트가 곧 화면이 될 때
UI의 안전벨트

Vercel의 json-render는 AI가 만든 JSON을 미리 정한 컴포넌트 카탈로그 안에서만 렌더링한다.

사용자가 “매출 대시보드 하나 만들어줘”라고 말하면, 이제 모델은 텍스트 답변 대신 화면의 뼈대를 바로 내놓을 수 있다. json-render의 흥미로운 지점은 ‘AI가 UI를 만든다’가 아니다. AI가 무엇을 만들 수 있고, 무엇을 누를 수 있으며, 어떤 데이터에 묶일 수 있는지를 개발자가 먼저 카탈로그와 스키마로 좁혀 둔다는 점이다. 41개 컴포넌트와 6개 액션, 스트리밍 렌더링, React와 React Native, 그리고 런타임 의존성 없는 Next 프로젝트 export까지. 즉흥적인 생성과 제품 수준의 통제를 같은 문장 안에 넣으려는 시도다.

카탈로그 컴포넌트

정의된 액션

export 후 런타임 의존성

▼ SCROLL

AI UI를 ‘마법’이 아니라 제품 구조로 다루는 법

장면

프롬프트가 화면 설계서가 된다

사용자 요구를 JSON 트리로 변환
Card, Metric, Table 같은 컴포넌트로 렌더
대시보드·영수증·폼을 즉석 구성

핵심

AI는 자유롭게 만들지 않는다

정의된 catalog 안에서만 생성
props는 zod 스키마로 검증
허용된 action만 호출 가능

렌더링

JSON이 도착하는 동안 화면도 열린다

모델 응답을 스트리밍
완성 전부터 점진 렌더
대기 화면을 실제 UI로 전환

상태

화면은 데이터에 묶여야 살아난다

$state로 앱 상태 연결
$item·$index로 반복 영역 처리
입력값은 양방향 바인딩 가능

배포

생성된 UI를 코드로 꺼낸다

React 컴포넌트로 export
독립 Next.js 프로젝트 생성
런타임 의존성 없이 실행

긴장

카탈로그 설계가 곧 제품 설계다

컴포넌트 경계를 먼저 정해야 함
액션 권한을 좁게 설계해야 함
아무 UI나 만드는 도구는 아님

일반 생성형 UI와 json-render의 차이

쟁점	프롬프트 기반 UI 생성	json-render 방식
출력	모델이 임의의 마크업이나 코드를 생성	정해진 JSON 스펙과 컴포넌트 타입만 사용
안전성	렌더링과 액션 경계가 흐려지기 쉬움	catalog, schema, action 목록으로 허용 범위 제한
사용감	응답이 끝난 뒤 화면을 구성하는 경우가 많음	JSON 스트림을 받으며 UI를 점진적으로 렌더
운영	생성 결과를 서비스 코드에 붙이는 과정이 남음	standalone React/Next 프로젝트로 export 가능

json-render가 잘 맞는 화면

BarChart3

개인화 대시보드

Metric·LineGraph·Table

Receipt

주문 영수증

Card·Table·Badge

ChefHat

레시피 카드

Image·Rating·Accordion

ClipboardList

동적 입력 폼

Input·Select·Switch

SlidersHorizontal

설정 패널

Tabs·Slider·Toggle

Smartphone

모바일 네이티브 UI

React Native catalog

사용자가 채팅창에 “이번 분기 매출을 지역별로 보여줘”라고 치는 순간, 답변 대신 카드와 지표와 그래프가 차례로 떠오른다. json-render가 겨냥하는 장면은 바로 이 지점이다. AI가 문장을 잘 쓰는 단계를 지나, 화면의 구조를 즉석에서 제안하는 순간.

하지만 이 프로젝트의 핵심은 ‘AI가 마음대로 UI를 만든다’가 아니다. 오히려 반대에 가깝다. 개발자가 먼저 Card, Metric, Table, Button 같은 컴포넌트 카탈로그와 허용 액션을 정의하고, 모델은 그 울타리 안에서만 JSON을 생성한다. 생성형 UI에 안전벨트를 채우는 방식이다.

소스가 보여주는 증거는 꽤 구체적이다. 41개 컴포넌트와 6개 액션이 있고, zod 기반 스키마로 props를 제한하며, 모델 응답은 스트리밍되는 JSON으로 들어와 점진적으로 렌더링된다. $state, $item, $index 같은 바인딩은 화면을 실제 앱 상태와 연결하고, 결과물은 standalone React 또는 Next.js 프로젝트로 export할 수 있다.

물론 이건 마법 상자가 아니다. 좋은 경험을 만들려면 어떤 컴포넌트를 열어둘지, 어떤 액션을 허용할지, 데이터 경로를 어디까지 노출할지 미리 설계해야 한다. 카탈로그가 빈약하면 화면도 빈약하고, 액션 경계가 허술하면 AI UI는 곧 운영 리스크가 된다.

그래서 json-render가 던지는 질문은 신선하다. 앞으로의 UI 빌더는 더 자유로운 생성기가 될까, 아니면 더 잘 설계된 제약 시스템이 될까. 제품에서 쓸 수 있는 생성형 UI는 아마 후자에 가까울 것이다. AI가 즉흥적으로 만들되, 서비스가 감당할 수 있는 범위 안에서만 움직이게 하는 것.

생성형 UI의 다음 과제
자유가 아니라 경계 설계

json-render는 AI UI를 데모에서 제품으로 옮길 때 필요한 질문을 앞에 둔다. 무엇을 만들게 할 것인가보다, 무엇을 못 하게 할 것인가.

원문 보기 · json-render.dev

프롬프트가 곧 화면이 될 때UI의 안전벨트

AI UI를 ‘마법’이 아니라 제품 구조로 다루는 법

일반 생성형 UI와 json-render의 차이

json-render가 잘 맞는 화면

생성형 UI의 다음 과제자유가 아니라 경계 설계

프롬프트가 곧 화면이 될 때
UI의 안전벨트

생성형 UI의 다음 과제
자유가 아니라 경계 설계

json-render — 생성형 UI의 안전벨트

Reference Links

Comments (0)