생성형 UI 구현을 위한 'Gen-UI 3계층' 아키텍처: 코드 생성부터 마이크로 프론트엔드 조립까지

핵심 기술: 본 포스트는 생성형 UI(Generative UI) 구현을 위한 'Gen-UI 3계층'이라는 기술적 추상화 모델을 소개하며, 자연어 쿼리를 UI로 변환하는 과정을 레벨별로 분석한다.

기술적 세부사항:
* Level 1 (코드 직접 생성): LLM이 자연어 요청을 받아 React, HTML 등의 UI 코드를 직접 생성하고 샌드박스에서 평가한다. 높은 자유도와 커스터마이징이 가능하나, 코드 퀄리티 보장 및 예측 가능성 확보가 어렵다. (예: v0.app)
* Level 2 (DSL 활용): AI가 UI 표현을 위한 약속된 중간 언어(DSL, Domain-Specific Language)를 생성하고, 애플리케이션이 이를 해석하여 UI를 렌더링한다. 코드 퀄리티 관리와 커스터마이징 영역 통제가 용이하며, DSL 스키마를 통해 제약 조건을 명확히 할 수 있다. (예: JSON 형태의 DSL)
* Level 3 (마이크로 프론트엔드 조립): 독립적으로 개발/배포된 UI 덩어리(마이크로 앱)들을 LLM이 조립하여 복합적인 UI를 생성한다. Micro Frontend 아키텍처 기반으로, 런타임에 마이크로 앱들을 조합하여 동적인 웹앱을 구성한다. (예: <MicroAppLoader /> 컴포넌트, Webpack Module Federation 연상)
* 통합 활용: 사용자의 요청 추상화 수준에 따라 3개 레벨을 유연하게 전환하며 AI가 최적의 전략을 선택하는 지능형 오케스트레이터 역할을 수행한다. (예: 소비 내역 분석 요청 시 Level 3, 2, 1 통합 활용)

개발 임팩트:
* AI를 통한 UI 개발 생산성 극대화 및 프로토타이핑 가속화.
* 개발 지식이 없는 비개발 직군(PM, 디자이너)의 아이디어 구현 용이성 증대.
* 사내 디자인 시스템 및 언어를 활용한 일관성 있는 UI 생성 가능.
* AI의 예측 불가능성 및 품질 문제를 해결하여 안정적이고 고품질의 UI 생성.
* 기존 도메인 앱의 기능 재활용 및 응집도 높은 아키텍처 구축.

커뮤니티 반응:
* v0.app의 경우, shadcn과 tailwind를 기본으로 설정하며 코드 퀄리티 통제를 시도하지만 커스텀에 제약을 두는 점이 언급됨.
* 뱅크샐러드의 '샐러드 게임' 사례에서 DSL, 피드백 루프, 테스트 제약을 통해 프로덕션 코드 생성 경험이 언급됨.
* Shopify의 Composable Commerce가 Level 3의 마이크로 앱 조립 개념과 유사하다고 비유됨.