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

Context

AI 모델이 생성한 UI를 렌더링할 때 예측 불가능한 출력으로 인한 안정성 문제가 발생했다. 생성형 UI를 동적으로 만들되 안전하고 일관된 컴포넌트만 사용하도록 제약할 필요가 있었다.

Technical Solution

• 프롬프트로부터 JSON 생성 시 제약: 카탈로그에 등록된 컴포넌트, 액션, 유효성 검증 함수 범위 내에서만 AI가 JSON 구조 생성
• 점진적 렌더링 구현: 생성된 JSON을 스트리밍 방식으로 처리하여 모델 응답 도착 시점에 UI 즉시 표시
• 크로스 플랫폼 컴포넌트 스펙: React와 React Native가 동일한 카탈로그 및 포맷으로 렌더링 지원
• 양방향 데이터 바인딩: { $bindState } 문법으로 컴포넌트 상태 관리
• 선언적 유효성 검증: checks 배열로 required, email, minLength 등 검증 규칙 지정
• 이벤트 핸들링: on.press, on.change, on.select, on.submit 등의 이벤트 핸들러 바인딩
• 정적 배포 지원: 생성된 UI를 독립 실행 가능한 React 코드(Next.js 프로젝트)로 내보내기 가능하며 런타임 의존성 없이 동작

Key Takeaway

AI 생성 UI의 안정성은 컴포넌트 카탈로그를 통한 출력 제약과 스트리밍 렌더링으로 달성 가능하며, 하나의 컴포넌트 스펙으로 웹과 모바일을 동시에 지원하는 설계가 크로스 플랫폼 생성형 UI의 효율성을 극대화한다.