# Vercel의 json-render - Generative UI 프레임워크

> Clean Markdown view of GeekNews topic #27933. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=27933](https://news.hada.io/topic?id=27933)
- GeekNews Markdown: [https://news.hada.io/topic/27933.md](https://news.hada.io/topic/27933.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-03-28T09:31:02+09:00
- Updated: 2026-03-28T09:31:02+09:00
- Original source: [json-render.dev](https://json-render.dev/)
- Points: 11
- Comments: 1

## Summary

Vercel이 공개한 **json-render**는 AI가 프롬프트로부터 **제약된 JSON 구조를 생성해 즉시 렌더링하는 생성형 UI 프레임워크**입니다. 개발자는 미리 정의한 컴포넌트·액션·검증 규칙 카탈로그 안에서만 모델이 동작하도록 제한해, 동적 UI 생성에도 안정성과 예측 가능성을 확보합니다. 생성된 UI는 **React·React Native 모두에서 동일한 스펙으로 실행**되며, 완성된 결과를 순수 React 코드로 내보내 배포할 수 있어, 프롬프트 기반 UI 프로토타이핑과 실제 제품 코드의 경계를 빠르게 잇는 흐름을 만듭니다.

## Topic Body

- AI가 사용자 프롬프트를 받아 **JSON 구조를 생성**하고, 이를 미리 정의된 컴포넌트로 렌더링하는 생성형 UI 프레임워크   
- 프롬프트로 부터 동적이고 개인화된 UI를 생성하되, **사전 정의된 컴포넌트 카탈로그**를 통해 안전하고 예측 가능한 출력을 보장   
- 카탈로그에 사용 가능한 **컴포넌트, 액션, 유효성 검증 함수**를 정의하면, AI는 해당 범위 내에서만 **제약된(constrained) JSON**을 생성  
- 생성된 JSON은 **스트리밍 방식으로 점진적 렌더링**되어, 모델 응답이 도착하는 대로 UI가 즉시 표시  
- 생성된 UI를 **독립 실행 가능한 React 코드(Next.js 프로젝트)로 내보내기** 가능하며, 런타임 의존성 없이 동작 가능한 **순수 React 코드로 배포 가능**  
- React와 **React Native** 모두 동일한 카탈로그와 스펙 포맷으로 렌더링을 지원하여, 웹과 모바일을 하나의 정의로 커버 가능  
- **제공 컴포넌트들**  
  - **레이아웃**: Card, Grid, Stack, Tabs, Carousel, Collapsible, Accordion  
  - **입력**: Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Toggle, ToggleGroup, Rating  
  - **표시**: Text, Heading, Image, Badge, Alert, Progress, Skeleton, Spinner, Table, Avatar, Separator  
  - **인터랙션**: Button, ButtonGroup, Link, DropdownMenu, Dialog, Drawer, Popover, Tooltip, Pagination  
  - **차트**: BarGraph, LineGraph  
  - 각 컴포넌트는 `{ $bindState }`를 통한 **양방향 데이터 바인딩** 지원  
  - `checks` 배열로 `required`, `email`, `minLength` 등 **유효성 검증 규칙**을 선언적으로 지정 가능  
  - 이벤트 핸들러는 `on.press`, `on.change`, `on.select`, `on.submit` 등으로 바인딩  
- `npm install @json-render/core @json-render/react`

## Comments



### Comment 54506

- Author: wskyland
- Created: 2026-04-03T07:42:20+09:00
- Points: 1

대단하십니다. 그디어 나아가 기획을 시작으로 디자인,퍼블 영역의 매개체로 좋을거같습니다