Vercel의 json-render 살펴보기: 생성형 UI를 더 안전하게 만드는 방식

LLM은 이제 텍스트뿐 아니라 UI도 생성합니다. 모델이 “무슨 말을 할까”를 넘어 “어떤 인터페이스로 보여줄까”까지 결정합니다.

모델이 UI를 자유롭게 만들면 실제 제품에서는 예측 가능성, 안전성, 유지보수성에 바로 문제가 생깁니다.

• 모델이 엉뚱한 구조를 만들면?
• 지원하지 않는 컴포넌트를 쓰면?
• 실행 가능한 코드나 이벤트를 제멋대로 붙이면?
• 웹과 모바일에서 일관성이 깨지면?

Vercel이 공개한 json-render는 이 문제를 다음 방식으로 풉니다.

AI가 직접 UI 코드를 생성하게 하지 말고, 제약된 JSON을 생성하게 한 뒤, 그 JSON을 미리 정의된 컴포넌트 카탈로그로 렌더링하자.

json-render는 생성형 UI에 자유를 더하지 않고, 제약을 더해 실제 제품에 넣으려고 합니다.

json-render는 무엇인가요?

json-render는 Vercel Labs가 공개한 Generative UI framework입니다. 공식 소개 문구를 요약하면 다음과 같습니다.

• AI가 사용자 프롬프트를 해석합니다
• 모델은 자유로운 코드 대신 제약된 JSON 구조를 생성합니다
• 이 JSON은 미리 정의된 컴포넌트 카탈로그 안에서만 표현됩니다
• 렌더러가 그 JSON을 받아 실제 UI로 렌더링합니다

모델은 JSX를 직접 쓰지 않습니다. 허용된 부품 상자 안에서만 UI를 조합합니다.

생성형 UI의 문제는 대부분 “모델이 무엇이든 만들 수 있다”는 데서 시작합니다. json-render는 이 범위를 처음부터 제한합니다.

코드 대신 JSON을 생성하는 이유

생성형 UI를 처음 떠올리면 대개 다음 흐름을 상상합니다.

• LLM이 React 코드를 직접 생성한다
• 그 코드를 실행한다
• 바로 인터페이스가 나온다

이 흐름은 데모에서는 동작하지만, 실서비스에서는 다음 문제가 생깁니다.

• 코드 안전성 검증이 어렵습니다
• 렌더링 결과가 매번 달라질 수 있습니다
• 지원하지 않는 UI 조합이 섞입니다
• 데이터 바인딩과 이벤트 처리가 난잡해집니다
• 테스트와 유지보수가 어려워집니다

json-render는 코드 생성을 구조 생성으로 바꿔 이 문제를 줄입니다.

flowchart TB
    subgraph model["모델이 담당"]
        A["사용자 프롬프트"]
        B["LLM"]
    end
    subgraph structured["구조화된 출력"]
        C["제약된 JSON<br/>(허용 스키마 내)"]
    end
    subgraph app["앱이 담당 (신뢰 경계)"]
        D["컴포넌트 카탈로그"]
        E["실제 UI 렌더"]
    end
    A --> B --> C --> D --> E

이 구조는 두 가지를 정합니다.

1. 모델이 만들 수 있는 표현 범위를 제한한다
2. 렌더링 책임은 애플리케이션이 가진다

AI는 컴포넌트 조합을 맡고, 실행 가능성과 안정성은 프레임워크가 맡습니다.

생성형 UI에서도 프론트엔드 설계 문제는 남습니다

LLM이 UI를 만들어도 프론트엔드 엔지니어가 정해야 할 문제는 그대로 남습니다.

• 어떤 컴포넌트를 허용할 것인가
• 어떤 액션만 노출할 것인가
• 어떤 데이터 바인딩을 허용할 것인가
• 어떤 검증 규칙이 필요한가
• 어떤 출력 구조까지를 신뢰할 것인가

json-render는 이 질문에 다음 원칙으로 답합니다.

모델에게 무한한 자유를 주지 말고, 좋은 제약을 설계하라

이 원칙은 UI 생성 프레임워크 밖의 AI 제품에도 적용될 가능성이 큽니다.

카탈로그: AI가 쓸 수 있는 요소 목록

json-render의 중심 개념은 catalog입니다. 카탈로그에는 AI가 사용할 수 있는 요소를 정의합니다.

예를 들면 다음과 같습니다.

• 컴포넌트
• 액션
• validation 함수
• 데이터 바인딩 방식

모델은 개발자가 카탈로그에 넣은 UI 조각만 조합할 수 있습니다. 이 방식에는 네 가지 장점이 있습니다.

1. 예측 가능성이 생깁니다

어떤 컴포넌트가 나올지 알 수 있으니, 렌더링 결과도 통제 가능합니다.

2. 안전성이 높아집니다

모델이 임의의 코드나 이상한 이벤트를 삽입할 수 없습니다.

3. 디자인 시스템과 연결하기 쉽습니다

기존 디자인 시스템 컴포넌트를 카탈로그화하면, 생성형 UI도 브랜드/제품 규칙 안에 들어옵니다.

4. 테스트가 쉬워집니다

무한한 출력 공간 대신 제한된 출력 공간을 다루기 때문에 검증이 훨씬 현실적입니다.

스트리밍 렌더링: 응답이 끝나기 전에 UI가 보입니다

json-render는 생성된 JSON을 스트리밍 방식으로 점진적으로 렌더링합니다.

생성형 시스템은 결과가 다 나올 때까지 사용자를 기다리게 하기 쉽습니다. 사용자는 텍스트보다 UI에서 더 즉각적인 반응을 기대합니다.

스트리밍 렌더링을 쓰면 다음과 같이 달라집니다.

• 모델 응답이 끝나기 전에 일부 UI가 먼저 보입니다.
• 사용자는 시스템이 진행 중이라는 감각을 얻습니다.
• 전체 경험이 훨씬 살아 있는 인터페이스처럼 느껴집니다.

json-render는 구조적 안전성과 함께 응답 대기 시간이라는 사용자 경험 문제도 다룹니다.

React와 React Native를 같은 스펙으로 지원합니다

json-render는 React와 React Native를 같은 스펙 포맷으로 지원합니다.

생성형 UI 사례는 웹 데모에서 끝나는 경우가 많습니다. json-render는 처음부터 웹과 모바일을 함께 고려한 구조입니다.

같은 카탈로그와 생성 규칙으로 웹 UI와 모바일 UI를 렌더링할 수 있습니다. 하나의 선언적 인터페이스 정의를 여러 플랫폼에 적용하는 방식입니다.

이 방식은 내부 도구, 폼 기반 앱, 설정 화면, 데이터 요약 인터페이스처럼 화면 구조가 정형화된 곳에 맞습니다.

Export as Code: 생성된 UI를 React 코드로 내보냅니다

json-render는 생성된 UI를 독립 실행 가능한 React 코드로 내보낼 수 있다고 소개합니다.

생성형 UI가 늘 런타임에만 존재할 필요는 없습니다. 모델이 UI 초안을 만들고, 개발자가 그 결과를 정적인 코드베이스로 편입할 수도 있습니다.

이 기능으로 다음 용도에도 쓸 수 있습니다.

• 런타임 생성 UI
• 초기 프로토타입 생성
• 폼/대시보드 초안 생성
• 내부 도구 스캐폴딩
• 템플릿 기반 UI 생성 후 수동 보정

json-render는 실시간 렌더러이면서 UI 생성 파이프라인의 시작점으로도 쓸 수 있습니다.

어떤 문제에 맞을까

json-render는 모든 UI를 대체하지 않습니다. 다음 유형의 인터페이스에 맞습니다.

1. 폼 기반 UI

입력, 검증, 제출 흐름이 중요한 인터페이스는 JSON 기반 정의와 잘 맞습니다.

2. 데이터 요약/대시보드

카드, 그래프, 배지, 표 같은 제한된 시각 요소 조합이 주가 되는 화면에 적합합니다.

3. 내부 업무 도구

정형화된 컴포넌트 조합으로 빠르게 화면을 구성해야 하는 경우 강점이 있습니다.

4. 개인화된 인터페이스

사용자 입력에 따라 UI가 바뀌어야 하지만, 완전 자유 생성은 위험한 경우에 좋습니다.

프론트엔드 엔지니어는 허용 범위를 설계합니다

생성형 UI를 써도 프론트엔드 엔지니어의 역할은 줄지 않습니다. 작업의 초점이 다음과 같이 옮겨 갑니다.

• 버튼 하나를 직접 만드는 일보다
• 어떤 버튼만 만들 수 있게 할지 설계하는 일
• 화면 하나를 직접 그리는 일보다
• 어떤 화면 구조만 허용할지 정의하는 일
• 이벤트 핸들러를 하나하나 붙이는 일보다
• 어떤 액션만 노출할지 통제하는 일

생성형 UI는 프론트엔드 작업을 더 선언적이고 제약 설계 중심인 영역으로 옮깁니다.

한계도 분명합니다

json-render에는 다음 한계가 있습니다.

1. 자유도가 낮습니다

제약된 카탈로그 안에서만 움직이기 때문에, 완전히 새로운 UI 발상을 즉석에서 구현하긴 어렵습니다.

2. 카탈로그 설계가 곧 품질입니다

카탈로그가 부실하면 출력도 부실합니다. 출력 품질은 카탈로그를 설계한 엔지니어링 품질에 달려 있습니다.

3. 복잡한 제품 UX에는 별도 설계가 여전히 필요합니다

생성형 UI가 모든 제품 경험을 자동으로 해결하지는 않습니다. 복잡한 상태 관리, 정교한 인터랙션, 브랜드 감성까지 요구하는 화면은 여전히 사람이 설계해야 합니다.

마무리

json-render는 모델에게 자유를 더 주는 대신 제약을 설계해 생성형 UI를 다룹니다.

AI가 코드 대신 JSON을 생성하고, 그 JSON을 미리 정의된 카탈로그로 렌더링합니다. 이 구조로 다음을 얻습니다.

• 안전하고
• 예측 가능하고
• 스트리밍 UX를 만들 수 있고
• React / React Native로 확장 가능하고
• 필요하면 코드로 export도 할 수 있습니다.

프론트엔드와 AI가 만나는 지점을 살펴보려면 json-render의 카탈로그와 렌더러 구조부터 읽어 봅니다.

관련 글

• OpenGenerativeUI 살펴보기 — CopilotKit·LangGraph 기반 생성형 UI
• Figma AI Agent Design — 디자인 도구와 에이전트 연결

참고 자료

• GeekNews 소개: https://news.hada.io/topic?id=27933 ↗
• json-render 공식 사이트: https://json-render.dev/ ↗
• GitHub: https://github.com/vercel-labs/json-render ↗
• InfoQ: https://www.infoq.com/news/2026/03/vercel-json-render/ ↗