From Visual Widgets to UI Code: Efficient Tool-Grounded Generation

기술 요약: 시각적 위젯에서 UI 코드로: 효율적인 도구 기반 생성(Tool-Grounded Generation)

문제 정의
본 논문은 시각적 위젯(예: 상태 카드, 메트릭 타일, 컴팩트 차트)의 스크린샷으로부터 실행 가능한 UI 코드(특히 React JSX)를 생성하는 과제를 다룹니다. 기존 방식들은 유연성과 제어 가능성 사이에서 근본적인 트레이드오프에 직면해 있습니다:

• 직접 멀티모달 생성 (Direct Multimodal Generation): 유연성은 높지만, 대규모 멀티모달 모델(MLLM)은 단일 응답 내에서 시각적 인지, 공간 추론, 프로그램 합성을 동시에 수행해야 하므로 가시적인 세부 사항(텍스트, 색상, 레이아웃)을 환각(hallucination)하는 경우가 많습니다.
• 구조화된 파이프라인 (예: Widget2Code): 이러한 방식은 위젯을 원자적 컴포넌트로 분해하고, 아이콘을 검색하며, 사전 정의된 템플릿이나 중간 표현(WidgetDSL 등)을 사용하여 충실도를 높입니다. 그러나 이는 상당한 오케스트레이션 오버헤드를 초래하며, 출력을 스키마에 포함된 디자인으로 제한하고, 정의된 컴포넌트 범위를 벗어나는 패턴을 처리하기 위한 광범위한 인프라를 요구합니다.

저자들은 선택적 도구 그라운딩(selective tool grounding)—즉, 엄격한 중간 표현을 강제하지 않으면서 모델에게 특정하고 관찰 가능한 증거를 제공하는 방식—이 직접 생성의 충실도-효율성 트레이드오프를 개선할 수 있는지 조사합니다.

방법론: WidgetGen
본 논문은 관찰 가능한 시각적 사실과 생성적 결정을 분리하는 경량 프레임워크인 WidgetGen을 소개합니다. 컴포넌트 단위 생성이나 커스텀 컴파일러에 의존하는 구조화된 파이프라인과 달리, WidgetGen은 코드를 합성하기 전에 추출된 증거를 통해 MLLM을 그라운딩합니다.

이 프레임워크는 다음과 같은 단계로 작동합니다:

1. 증거 추출 (Evidence Extraction): 코드 생성 전, 시스템은 입력 스크립트 $I$로부터 두 가지 유형의 "시각적 사실"을 추출합니다:
   • 텍스트 증거 ($\mathcal{T}$): OCR을 사용하여 인식된 텍text 문자열과 해당 바운딩 박스를 식별합니다.
   • 색상 증거 ($\mathcal{C}$): 팔레트 분석을 사용하여 지배적인 색상과 그 대략적인 픽셀 점유율(8개 색상으로 제한)을 식별합니다.
2. 그라운디드 추론 (Grounded Reasoning): MLLM은 추출된 증거($\mathcal{T}, \mathcal{C}$)와 함께 원본 스크린샷을 처리하여 다음을 수행합니다:
   • 고수준 레이아웃 추론: 공간 영역을 식별하고 차트 존재 여부를 결정합니다.
   • 선택적 차트 추론: 차트가 감지된 경우, 전용 호출을 통해 특정 차트 JSX를 생성합니다. 그렇지 않으면 이 단계를 건너뜁니다.
3. 직접 JSX 합성 (Direct JSX Synthesis): 최종 생성기는 스크린샷, 증거, 레이아웃 설명 및 선택적 차트 코드를 전달받아 실행 가능한 JSX를 직접 생성합니다.
4. 터미널 실행 (Terminal Execution): 생성된 코드는 브라우저에서 렌더링되어 실행 가능성을 검증하고 평가를 위한 이미지를 생성합니다.

결정적으로, WidgetGen은 사전 정의된 컴포넌트 인벤토리, 커스텀 UI 스키마, 또는 작업 특정 컴파일러를 요구하지 않습니다. 이는 제어의 중심을 출력 표현을 제한하는 것에서 관찰 가능한 입력 증거로 모델을 그라운딩하는 것으로 전환합니다.

주요 기여

1. 설계 원칙: 관찰 가능한 시각적 사실(텍스트, 색상)과 모호한 생성적 결정(레이아웃 해석, 코드 합성)을 분리하는 방법으로서 **선택적 증거 그라운딩(selective evidence grounding)**을 공식화했습니다.
2. 프레임워크 구현: 이 원칙을 WidgetGen으로 구체화하여, 컴포넌트 단위의 스키마 제한적 생성에 대한 경량화된 대안을 제공합니다.
3. 체계적 평가: 1,000개의 홀드아웃 위젯을 대상으로 6가지 최첨단 MLLM(GPT-4o, Gemini 3 Pro, Claude Opus 4.5 및 Qwen 변형 포함)에 대해 단일 샷 프롬프팅 및 구조화된 Widget2Code 파이프라인과 비교하여 종합적인 평가를 수행했습니다.
4. 지도 미세 조정(SFT) 유용성: WidgetGen에 의해 생성된 재구성 기반 이미지-코드 쌍이 Qwen 제품군과 같은 오픈 웨이트 모델의 미세 조정을 위한 효과적인 감독 데이터로 기능함을 입증하여, 모든 지표에서 성능을 향상시켰습니다.

결과

• 재구성 충실도 (Reconstruction Fidelity): 6개 모델 전체에서 WidgetGen은 대부분의 시각적 재구성 지표에서 단일 샷 프롬프팅과 Widget2Code를 모두 능가했습니다. 특히 영역(Area)(레이아웃 정확도), 가독성(Legibility)(텍스트 및 대비), 스타일(Style)(팔레트 및 생동감)에서 일관된 이득을 얻었습니다. 주목할 점은 WidgetGen이 모든 모델에 대해 완벽한 기하학(Geometry) 점수(100.00)를 달성했다는 것입니다.
• 충실도-효율성 트레이드오프: Widget2Code와 같은 구조화된 파이프라인은 높은 충실도를 제공하지만, 여러 번의 도구 호출과 복잡한 컴파일로 인해 높은 추론 비용과 지연 시간을 초래합니다. WidgetGen은 재구성 품질을 유지하거나 개선하면서도 구조화된 파이프라인 대비 추론 비용과 지연 시간을 줄였습니다.
• 절제 연구 (Ablation Studies): 실험을 통해 고수준 추론과 텍스트/색상 증거 추출이 모두 성능에 기여함을 확인했습니다. 증거(OCR/팔레트)를 제거하면 가독성과 스타일 점수가 낮아졌고, 추론을 제거하면 레이아웃 정확도가 감소했습니다.
• 모델 적응 (Model Adaptation): WidgetGen이 생성한 이미지-코드 쌍을 사용하여 Qwen 모델(4B ~ 32B 파라미터)을 미세 조정한 결과, 9가지 모든 평가 지표에서 일관된 개선이 나타났습니다. 이렇게 적응된 모델들은 종종 독점적인 단일 샷 베이스라인보다 뛰어난 성능을 보였습니다.

의의 및 주장
본 논문은 WidgetGen이 위젯-투-코드 생성의 강력하고 경량화된 베이스라인을 구축한다고 주장합니다. 이 연구의 주요 의의는 선택적 증거 그라운딩이 광범위한 표현 제약에 대한 효과적인 대안임을 보여준 데 있습니다. 모델에게 명시적인 시각적 사실(텍스트 및 색상)을 제공하면서도 일반 목적의 UI 코드를 유지할 수 있는 유연성을 부여함으로써, 이 프레임워크는 엄격한 스키마나 복잡한 오케스트레이션의 오버헤드 없이 높은 제어 가능성을 달상했습니다.

저자들은 한계점도 겸허히 언급했습니다: 평가는 단일 데이터셋의 정적 위젯으로 제한되어 있으며, 지표는 상호작용성이나 접근성보다는 렌더링된 시각적 충실도에 집중되어 있고, SFT 연구는 현재 Qwen 모델 제품군에 국한되어 있습니다. 더 넓은 UI 분포와 다른 모델 제품군으로의 일반화 가능성을 확립하기 위한 향후 연구가 필요합니다.