AI가 만든 화면을 내 앱에 안전하게 붙이는 방법
자연어 프롬프트로 대시보드나 폼을 만들고 싶지만, AI가 뭘 만들어낼지 몰라 불안한 개발자에게 이 저장소는 해답을 줍니다. 사용자가 정의한 컴포넌트 목록 안에서만 AI가 JSON을 생성하게 하고, 그 결과를 기존 앱에 바로 렌더링하는 구조입니다. 웹부터 모바일, 영상, PDF, 이메일까지 같은 규칙으로 화면을 뽑아낼 수 있습니다.
컴포넌트 카탈로그로 AI를 가두기
이 저장소의 핵심은 '카탈로그'라는 개념입니다. 개발자가 사용할 수 있는 컴포넌트와 액션을 미리 정의하면, AI는 그 범위 밖의 것을 생성할 수 없습니다. 덕분에 AI가 임의의 HTML 태그나 스크립트를 만들어 보안 문제를 일으키는 것을 막을 수 있습니다. 생성된 JSON은 항상 개발자가 정한 스키마를 따르므로, 예측 가능한 출력을 보장합니다. 모델이 응답하는 동안에도 스트리밍으로 화면이 점진적으로 그려지므로 사용자 체감이 빠릅니다.
하나의 카탈로그, 여러 플랫폼
같은 컴포넌트 카탈로그를 사용해 React, Vue, Svelte, SolidJS 웹 앱은 물론 React Native 모바일 앱까지 동일한 로직으로 렌더링할 수 있습니다. 웹 UI 외에도 Remotion으로 영상, React PDF로 문서, React Email로 이메일, Ink로 터미널 UI, Three.js로 3D 씬까지 생성할 수 있습니다. Next.js나 TanStack Start를 사용하면 라우팅, 레이아웃, 서버 사이드 렌더링까지 포함한 풀 앱 구조를 JSON 스펙으로 정의할 수도 있습니다. 각 플랫폼에 맞는 렌더러 패키지를 설치하면 됩니다.
상태와 상호작용 처리
단순 정적 화면이 아니라, 상태 변화에 따라 화면이 바뀌는 인터랙티브 UI를 만들 수 있습니다. $state, $cond, $template 같은 표현식을 사용해 프로퍼티 값을 데이터 기반으로 동적으로 바꿀 수 있습니다. 컴포넌트가 액션을 트리거하면 상태 모델이 업데이트되고, 이에 따라 가시성 조건이나 다른 프로퍼티가 재평가됩니다. watch 필드를 사용하면 특정 상태 값이 변할 때 자동으로 액션을 실행할 수도 있습니다. 이러한 기능들은 AI가 생성한 JSON 스펙 안에 직접 포함됩니다.
준비물과 시작하기
TypeScript 기반 프로젝트에서 사용하며, Apache-2.0 라이선스로 배포됩니다. @json-render/core와 사용하려는 플랫폼의 렌더러 패키지(예: @json-render/react)를 설치하면 됩니다. shadcn/ui 컴포넌트를 바로 쓰고 싶다면 @json-render/shadcn을 설치해 36개의 미리 만들어진 컴포넌트를 활용할 수 있습니다. 개발 도구는 @json-render/devtools 패키지로 제공되며, 스펙 트리, 상태 에디터, 액션 로그 등을 실시간으로 확인할 수 있습니다. 데모를 실행하려면 저장소를 클론한 뒤 pnpm install과 pnpm dev를 실행하면 됩니다.
적합한 프로젝트와 주의할 점
AI 생성 UI를 프로덕션에 도입하되, 출력의 안정성과 보안이 중요한 프로젝트에 적합합니다. 특히 다양한 플랫폼에 동일한 UI 로직을 배포해야 하는 경우 이 저장소의 이점이 큽니다. 다만, AI가 생성하는 JSON의 품질은 사용된 모델과 프롬프트에 따라 달라질 수 있으므로, 카탈로그 정의가 명확할수록 결과가 좋아집니다. 실험적인 기능인 Jev composition은 아직 미발표 상태이므로 프로덕션에서는 신중하게 접근해야 합니다. 특정 플랫폼 렌더러의 호환성이나 최신 버전 지원 범위는 해당 패키지의 문서나 소스를 직접 확인하는 것이 좋습니다.
