AI 기반 안전한 사용자 인터페이스 생성 프레임워크 json-render

json-render는 '생성형 UI(Generative UI)' 프레임워크로, 자연어 프롬프트만으로 동적인 사용자 인터페이스를 생성할 수 있게 합니다. 이 과정에서 AI가 개발자가 정의한 컴포넌트 카탈로그와 스키마 내에서만 작동하도록 제약하는 것이 핵심입니다. 이를 통해 출력은 예측 가능하고(Predictable), 안전하며(Guardrailed), 모델 응답에 따라 점진적으로 렌더링되는(Fast) 방식으로 구현됩니다.

이 프레임워크를 사용하려면 먼저 사용할 모든 UI 요소와 동작을 정의하는 '카탈로그' 구축 과정이 필수적입니다. 개발자는 `defineCatalog` 함수를 사용하여 컴포넌트의 Props 스키마와 설명을 정의하고, 수행 가능한 액션(actions)도 함께 등록할 수 있습니다. 예를 들어, Card나 Button 같은 컴포넌트는 각각 필요한 속성(props)을 Zod 스키마로 명확히 지정하여 AI가 구조화된 JSON 형태로만 결과물을 생성하도록 강제합니다.

json-render는 단일 카탈로그 정의를 기반으로 웹 환경은 물론 다양한 플랫폼과 출력 형태를 지원하는 범용성이 특징입니다. React, Vue, Svelte, SolidJS 같은 주요 프론트엔드 라이브러리 외에도 React Native(모바일), Remotion(비디오), PDF 문서 생성(`@json-render/react-pdf`), HTML 이메일 등 다양한 환경에 맞는 렌더러를 제공합니다. 또한 Next.js나 TanStack Start와 같이 전체 애플리케이션 구조까지 JSON 스펙으로 변환하여 구현할 수 있습니다.