피드로 돌아가기
Dev.toFrontend
원문 읽기
LLM의 HTML 직접 생성 탈피, UI Runtime 기반의 Generative UI 아키텍처 전환
Your AI agent shouldn't write HTML. It should call a UI runtime.
AI 요약
Context
LLM이 런타임에 HTML/React 코드를 직접 생성하며 발생하는 스타일 불일치와 기능 결함 문제를 해결하고자 함. 텍스트 기반의 Markdown 출력만으로는 복잡한 데이터 시각화와 인터랙티브한 UI 요구사항을 충족하기 어려운 한계 존재.
Technical Solution
- LLM의 역할을 '코드 작성'에서 'UI 상태 및 요구사항 정의'로 제한하는 역할 분리 설계
- LLM이 Tool Call을 통해 데이터와 UI 명세(Brief)를 전달하면 전문 Runtime이 렌더링을 담당하는 구조 채택
- Shadow DOM 기반의 컴포넌트를 통한 스타일 격리 및 메인 애플리케이션과의 간섭 방지
- 다양한 LLM 프레임워크(Vercel AI SDK, LangChain, MCP 등)와 연동 가능한 Adapter 패턴 적용
- 브랜드 가이드라인 및 Typography를 런타임 시점에 주입하는 Design System Override 메커니즘 구현
- 정적 렌더링을 넘어 실제 워크스페이스와 연동되는 Empty-state aware UI 처리 로직 적용
실천 포인트
- LLM에게 UI 코드를 직접 생성하게 하는 대신 정형화된 JSON 스키마를 통한 UI 명세 전달 검토 - 생성된 UI 요소의 스타일 오염 방지를 위해 Shadow DOM 또는 Iframe 기반의 격리 환경 구축 - 비즈니스 로직(LLM)과 프레젠테이션 계층(Runtime)을 분리하여 UI 일관성 및 유지보수성 확보 - Markdown 테이블로 표현되는 복잡한 데이터를 인터랙티브한 Artifact로 전환하여 UX 개선