JSON Render: AI가 생성한 JSON으로 UI를 렌더링하는 Generative UI 엔진

AI 애플리케이션이 점점 많아지면서 **“AI가 직접 UI를 만들어주는 방식”**이 새로운 패러다임으로 떠오르고 있습니다.

이번 글에서는 **Vercel Labs에서 공개한 오픈소스 프로젝트 json-render**를 소개합니다.
이 프로젝트는 AI → JSON → UI 흐름을 통해 사용자가 프롬프트만으로 UI를 생성하도록 만드는 Generative UI 엔진입니다. (GitHub)

단순히 데이터를 생성하는 AI가 아니라
인터페이스 자체를 생성하는 AI 시스템을 만들고 싶다면 꽤 흥미로운 프로젝트입니다.

---

프로젝트 소개

JSON Render는 AI가 생성한 JSON 구조를 기반으로 React 컴포넌트를 동적으로 렌더링하는 라이브러리입니다.

핵심 아이디어는 매우 단순합니다.

AI → JSON → UI

1. 사용자가 프롬프트 입력
2. AI가 JSON 형태의 UI 구조 생성
3. json-render가 JSON을 React 컴포넌트로 렌더링

즉 AI가 UI를 설계하고 앱이 이를 렌더링하는 구조입니다.

이 프로젝트는 Vercel Labs에서 공개했으며,
Next.js / React 기반 AI 애플리케이션에서 Generative UI를 구현하기 위한 실험적인 프로젝트입니다. (The New Stack)

---

왜 이 프로젝트가 등장했을까

AI 애플리케이션은 보통 다음과 같은 흐름을 가집니다.

User → Prompt → LLM → Text → UI

예를 들어

"이번 달 매출 분석 대시보드 만들어줘"

라고 하면

AI는 보통 이런 식으로 답합니다.

이번 달 매출은 ...
그래프는 ...

하지만 문제는 여기 있습니다.

문제 1 — 텍스트 중심 응답

AI는 UI가 아니라 텍스트를 생성합니다.

개발자는 결국 다시

• 차트 만들기
• 테이블 만들기
• 대시보드 만들기

등을 직접 구현해야 합니다.

---

문제 2 — UI 생성은 위험하다

AI에게 HTML을 생성하게 하면

AI → HTML → DOM

이 구조는 보안적으로 매우 위험합니다.

예를 들어

• XSS
• Script Injection
• Arbitrary Code

문제가 생길 수 있습니다.

---

해결 방법: JSON 기반 UI

그래서 등장한 접근 방식이 바로

Server Driven UI + Generative UI

AI → JSON → Safe Components → UI

AI는 JSON 구조만 생성하고
UI는 개발자가 정의한 컴포넌트만 사용합니다.

이 방식이 바로 json-render의 핵심 아이디어입니다.

---

핵심 기능

1️⃣ Generative UI

사용자가 프롬프트를 입력하면 AI가 UI 구조를 생성합니다.

예시

Create a sales dashboard

AI가 생성하는 JSON

{
  "type": "Dashboard",
  "children": [
    {
      "type": "Chart",
      "props": {
        "title": "Monthly Sales"
      }
    },
    {
      "type": "Table",
      "props": {
        "data": "salesData"
      }
    }
  ]
}

이 JSON을 기반으로 UI가 렌더링됩니다.

---

2️⃣ 컴포넌트 Guardrails

AI는 아무 컴포넌트나 생성할 수 없습니다.

개발자가 catalog를 정의합니다.

const catalog = {
  Chart: ChartComponent,
  Table: TableComponent,
  Card: CardComponent
}

AI는 이 컴포넌트들만 사용할 수 있습니다.

장점

• 보안 문제 해결
• UI 일관성 유지
• 디자인 시스템 적용

---

3️⃣ Streaming UI

대부분 Generative UI 시스템의 문제는

AI → JSON 완성 → UI 렌더

이 구조입니다.

즉 응답이 끝날 때까지 아무 UI도 보이지 않습니다.

하지만 json-render는 JSON 스트리밍을 지원합니다.

AI → JSON stream → UI progressively render

즉 UI가 점진적으로 생성됩니다. (The New Stack)

---

4️⃣ Data Binding

JSON Render는 간단한 데이터 바인딩 문법도 제공합니다.

예시

$state
$item
$index

예시 JSON

{
  "type": "List",
  "props": {
    "items": "$state.products"
  },
  "children": {
    "type": "Card",
    "props": {
      "title": "$item.name"
    }
  }
}

---

5️⃣ React 코드 Export

생성된 UI는 나중에 순수 React 코드로 export할 수도 있습니다.

즉

AI → JSON → UI → React Code

이 흐름이 가능합니다.

---

프로젝트 구조

json-render는 기본적으로 세 가지 주요 구성 요소로 이루어져 있습니다.

구성 요소 설명

1️⃣ Component Catalog

개발자가 정의하는 UI 컴포넌트 목록

Button
Chart
Card
Table
Dashboard

AI는 이 컴포넌트들만 사용 가능합니다.

---

2️⃣ JSON Renderer

JSON을 읽어서

type → React component
props → props
children → nested components

로 변환합니다.

---

3️⃣ AI Layer

LLM이 JSON을 생성합니다.

예

• OpenAI
• Anthropic
• Gemini

---

기본 사용 방법

1️⃣ 설치

npm install json-render

---

2️⃣ 컴포넌트 Catalog 정의

import { createRenderer } from "json-render"

const catalog = {
  Card: ({ title, children }) => (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  ),
  Text: ({ value }) => <p>{value}</p>
}

const renderer = createRenderer({ catalog })

---

3️⃣ AI가 생성한 JSON 렌더링

const ui = {
  type: "Card",
  props: {
    title: "Hello"
  },
  children: [
    {
      type: "Text",
      props: { value: "Welcome to JSON Render" }
    }
  ]
}

return renderer.render(ui)

결과

Card
 └ Text

---

실제 사용 사례

이 프로젝트는 특히 다음과 같은 앱에서 강력합니다.

AI Dashboard Builder

"이번 달 매출 대시보드 만들어줘"

→ AI가 UI 생성

---

AI App Builder

"Todo 앱 만들어줘"

→ UI 자동 생성

---

Data Visualization

"데이터를 차트로 보여줘"

→ Chart UI 생성

---

AI Admin Panel

"유저 관리 화면 만들어줘"

→ Table / Form UI 생성

---

이 프로젝트가 중요한 이유

json-render는 단순한 UI 라이브러리가 아닙니다.

이 프로젝트는 AI 시대 UI 아키텍처의 방향을 보여줍니다.

기존 UI

Developer → Code → UI

Generative UI

Developer → Components
AI → Layout

즉

AI가 UI를 설계하는 시대가 시작되고 있습니다.

---

마무리

json-render는 다음과 같은 개발자에게 특히 흥미로운 프로젝트입니다.

• AI 앱 개발자
• Next.js / React 개발자
• Generative UI 연구자
• AI Agent UI 개발자

핵심 특징을 정리하면

• AI → JSON → UI 구조
• Generative UI
• 컴포넌트 기반 guardrails
• Streaming UI
• React 기반 렌더링

AI가 단순히 텍스트를 생성하는 것을 넘어 UI 자체를 생성하는 시대가 오고 있습니다.

json-render는 그 방향을 보여주는 매우 흥미로운 오픈소스입니다.