LLM이 이제 텍스트만 생성하는 시대는 지나가고 있습니다.
요즘 더 흥미로운 방향은 UI 자체를 생성하는 것, 그러니까 “무슨 말을 할까”를 넘어서 “어떤 인터페이스로 보여줄까”를 모델이 결정하는 흐름입니다.
문제는 여기서 바로 시작됩니다.
모델이 자유롭게 UI를 만든다고 하면 그럴듯해 보이지만, 실제 제품에서는 예측 가능성, 안전성, 유지보수성이 곧바로 발목을 잡습니다.
- 모델이 엉뚱한 구조를 만들면?
- 지원하지 않는 컴포넌트를 쓰면?
- 실행 가능한 코드나 이벤트를 제멋대로 붙이면?
- 웹과 모바일에서 일관성이 깨지면?
이 지점에서 Vercel이 공개한 json-render는 꽤 흥미로운 답을 보여줍니다.
핵심은 단순합니다.
AI가 직접 UI 코드를 생성하게 하지 말고, 제약된 JSON을 생성하게 한 뒤, 그 JSON을 미리 정의된 컴포넌트 카탈로그로 렌더링하자.
생성형 UI를 “더 자유롭게”가 아니라,
오히려 더 제약된 방식으로 현실화하려는 시도라는 점에서 꽤 인상적입니다.
json-render는 무엇인가요?
json-render는 Vercel Labs가 공개한 Generative UI framework입니다.
공식 소개 문구를 요약하면 이렇습니다.
- AI가 사용자 프롬프트를 해석합니다
- 모델은 자유로운 코드 대신 제약된 JSON 구조를 생성합니다
- 이 JSON은 미리 정의된 컴포넌트 카탈로그 안에서만 표현됩니다
- 렌더러가 그 JSON을 받아 실제 UI로 렌더링합니다
즉, 모델이 직접 JSX를 막 써내려가는 방식이 아니라,
**“허용된 부품 상자 안에서만 UI를 조합하게 하는 구조”**입니다.
이 접근은 굉장히 중요합니다.
생성형 UI의 가장 큰 문제는 보통 “모델이 무엇이든 만들 수 있다”는 데서 시작하니까요.
왜 JSON 기반 접근이 중요한가요?
생성형 UI를 처음 떠올리면 대개 이런 상상을 하게 됩니다.
- LLM이 React 코드를 직접 생성한다
- 그 코드를 실행한다
- 바로 인터페이스가 나온다
데모로는 멋집니다.
하지만 실서비스에서는 거의 바로 문제가 생깁니다.
- 코드 안전성 검증이 어렵습니다
- 렌더링 결과가 매번 달라질 수 있습니다
- 지원하지 않는 UI 조합이 섞입니다
- 데이터 바인딩과 이벤트 처리가 난잡해집니다
- 테스트와 유지보수가 어려워집니다
json-render는 이 문제를 코드 생성 대신 구조 생성으로 바꿉니다.
flowchart LR
A[사용자 프롬프트] --> B[LLM]
B --> C[제약된 JSON 생성]
C --> D[사전 정의된 카탈로그]
D --> E[안전한 UI 렌더링]이 구조의 핵심은 두 가지입니다.
- 모델이 만들 수 있는 표현 범위를 제한한다
- 렌더링 책임은 애플리케이션이 가진다
즉, AI는 창의적인 조합을 담당하고,
실제 실행 가능성과 안정성은 프레임워크가 책임지는 방식입니다.
json-render가 흥미로운 이유
이 프로젝트가 흥미로운 이유는 “생성형 UI도 결국 프런트엔드 엔지니어링의 문제”라는 걸 아주 잘 보여주기 때문입니다.
LLM이 UI를 만든다고 해서 프런트엔드의 핵심 문제가 사라지지는 않습니다.
오히려 더 중요해집니다.
- 어떤 컴포넌트를 허용할 것인가
- 어떤 액션만 노출할 것인가
- 어떤 데이터 바인딩을 허용할 것인가
- 어떤 검증 규칙이 필요한가
- 어떤 출력 구조까지를 신뢰할 것인가
json-render는 여기에 대해 꽤 명확한 철학을 보여줍니다.
모델에게 무한한 자유를 주지 말고, 좋은 제약을 설계하라
이건 단순히 UI 생성 프레임워크 이야기가 아니라,
앞으로 AI 제품 전반에서 점점 더 중요해질 원칙일 가능성이 큽니다.
카탈로그 방식이 특히 좋습니다
json-render의 핵심 개념 중 하나는 catalog입니다.
이 카탈로그에는 AI가 사용할 수 있는 요소들이 정의됩니다.
예를 들면 이런 것들이죠.
- 컴포넌트
- 액션
- validation 함수
- 데이터 바인딩 방식
즉, 모델은 “모든 UI를 만들 수 있는 것”이 아니라,
개발자가 허용한 UI 조각만 조합할 수 있는 존재가 됩니다.
이게 왜 좋을까요?
1. 예측 가능성이 생깁니다
어떤 컴포넌트가 나올지 알 수 있으니, 렌더링 결과도 통제 가능합니다.
2. 안전성이 높아집니다
모델이 임의의 코드나 이상한 이벤트를 삽입할 수 없습니다.
3. 디자인 시스템과 연결하기 쉽습니다
기존 디자인 시스템 컴포넌트를 카탈로그화하면, 생성형 UI도 브랜드/제품 규칙 안에 들어옵니다.
4. 테스트가 쉬워집니다
무한한 출력 공간 대신 제한된 출력 공간을 다루기 때문에 검증이 훨씬 현실적입니다.
스트리밍 렌더링도 꽤 인상적입니다
json-render는 생성된 JSON을 스트리밍 방식으로 점진적으로 렌더링합니다.
이건 생각보다 중요한 포인트입니다.
보통 생성형 시스템은 결과가 다 나올 때까지 기다리게 만들기 쉽습니다.
하지만 UI는 텍스트보다 더 강하게 즉각적인 반응성을 기대하게 만드는 매체입니다.
스트리밍 렌더링이 가능하면:
- 모델 응답이 끝나기 전에 일부 UI가 먼저 보이고
- 사용자는 시스템이 진행 중이라는 감각을 얻고
- 전체 경험이 훨씬 살아 있는 인터페이스처럼 느껴집니다
즉, json-render는 단순히 “구조적으로 안전한가”뿐 아니라
실제 사용자 경험까지 고려한 프레임워크라고 볼 수 있습니다.
React와 React Native를 함께 보는 시선도 좋습니다
또 하나 눈에 띄는 건 React와 React Native를 같은 스펙 포맷으로 지원한다는 점입니다.
이건 꽤 큰 의미가 있습니다.
보통 생성형 UI를 이야기하면 웹 데모 수준에서 끝나는 경우가 많습니다.
그런데 json-render는 처음부터 웹/모바일 양쪽을 염두에 둔 듯한 구조를 보여줍니다.
즉, 같은 카탈로그와 같은 생성 규칙을 기반으로:
- 웹 UI를 렌더링하고
- 모바일 UI도 렌더링하고
- 하나의 선언적 인터페이스 정의를 여러 플랫폼에 적용할 수 있다는 이야기입니다
이 방향은 특히 내부 도구, 폼 기반 앱, 설정 화면, 데이터 요약 인터페이스 같은 곳에서 꽤 강력할 수 있습니다.
Export as Code도 실용적입니다
json-render는 생성된 UI를 독립 실행 가능한 React 코드로 내보낼 수 있다고 합니다.
이 부분도 꽤 중요합니다.
생성형 UI가 늘 런타임에만 존재해야 하는 건 아닙니다.
어떤 경우에는 모델이 UI 초안을 만들고, 그 결과를 개발자가 가져가 정적인 코드베이스로 편입하고 싶을 수도 있습니다.
이렇게 되면 활용 방식이 더 넓어집니다.
- 런타임 생성 UI
- 초기 프로토타입 생성
- 폼/대시보드 초안 생성
- 내부 도구 스캐폴딩
- 템플릿 기반 UI 생성 후 수동 보정
즉, json-render는 “실시간 렌더러”이면서 동시에
UI 생성 파이프라인의 시작점으로도 쓸 수 있는 가능성이 있습니다.
어떤 문제에 특히 잘 맞을까
json-render는 모든 UI를 대체하는 도구라기보다,
특정한 유형의 인터페이스에 특히 잘 맞아 보입니다.
1. 폼 기반 UI
입력, 검증, 제출 흐름이 중요한 인터페이스는 JSON 기반 정의와 잘 맞습니다.
2. 데이터 요약/대시보드
카드, 그래프, 배지, 표 같은 제한된 시각 요소 조합이 주가 되는 화면에 적합합니다.
3. 내부 업무 도구
정형화된 컴포넌트 조합으로 빠르게 화면을 구성해야 하는 경우 강점이 있습니다.
4. 개인화된 인터페이스
사용자 입력에 따라 UI가 바뀌어야 하지만, 완전 자유 생성은 위험한 경우에 좋습니다.
즉, “무엇이든 다 만드는 UI 생성기”보다
제약된 범위 안에서 잘 작동하는 실용 도구에 더 가깝습니다.
프론트엔드 관점에서 더 중요한 메시지
개인적으로 json-render를 보면서 가장 크게 느낀 건,
생성형 UI 시대에도 프론트엔드 엔지니어의 역할은 줄어들지 않는다는 점입니다.
오히려 더 중요해질 수 있습니다.
왜냐하면 이제 중요한 건:
- 버튼 하나를 직접 만드는 일보다
- 어떤 버튼만 만들 수 있게 할지 설계하는 일
- 화면 하나를 직접 그리는 일보다
- 어떤 화면 구조만 허용할지 정의하는 일
- 이벤트 핸들러를 하나하나 붙이는 일보다
- 어떤 액션만 노출할지 통제하는 일
이기 때문입니다.
즉, 생성형 UI는 프론트엔드를 없애는 방향이 아니라,
프론트엔드를 더 선언적이고 더 제약 설계 중심의 영역으로 밀어 넣고 있는 것처럼 보입니다.
한계도 분명합니다
물론 json-render가 만능은 아닙니다.
1. 자유도가 낮습니다
제약된 카탈로그 안에서만 움직이기 때문에, 완전히 새로운 UI 발상을 즉석에서 구현하긴 어렵습니다.
2. 카탈로그 설계가 곧 품질입니다
좋은 카탈로그가 없으면 좋은 출력도 어렵습니다.
즉, 결국 엔지니어링 품질이 중요합니다.
3. 복잡한 제품 UX에는 별도 설계가 여전히 필요합니다
생성형 UI가 모든 제품 경험을 자동으로 해결해주진 않습니다.
특히 복잡한 상태 관리, 정교한 인터랙션, 브랜드 감성까지 요구하는 화면은 여전히 사람이 설계해야 합니다.
마무리
Vercel의 json-render는 생성형 UI를 다루는 방식이 점점 더 성숙해지고 있다는 걸 보여줍니다.
핵심은 모델에게 더 많은 자유를 주는 게 아니라, 더 좋은 제약을 설계하는 것입니다.
AI가 코드를 직접 생성하는 대신 JSON을 생성하게 하고,
그 JSON을 미리 정의된 카탈로그로 렌더링하게 하는 구조는 꽤 현실적입니다.
- 안전하고
- 예측 가능하고
- 스트리밍 UX를 만들 수 있고
- React / React Native로 확장 가능하고
- 필요하면 코드로 export도 할 수 있습니다
즉, json-render는 생성형 UI를 “멋진 데모”에서
실제로 제품에 넣을 수 있는 프레임워크 쪽으로 끌어당기는 프로젝트라고 볼 수 있습니다.
프론트엔드와 AI의 접점이 어디로 가고 있는지 궁금하다면,
json-render는 꽤 재미있게 볼 만한 사례입니다.
참고 자료
- 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/ ↗