기술 요약: VisRefiner

1. 문제 정의

스크린샷-투-코드 생성(Screenshot-to-Code Generation) 작업은 정적인 사용자 인터페이스(UI) 스크린샷을 대상 레이아웃과 스타일을 충실히 재현하는 실행 가능한 프론트엔드 코드(예: HTML/CSS)로 변환하는 것을 포함합니다. 최근의 멀티모달 거대 언어 모델(MLLM)들이 이 분야에서 엔드 투 엔드(end-to-end) 역량을 입증해 왔으나, 이들은 일반적으로 디자인에서 코드로의 일방향적인 지도 학습 매핑에 의존합니다. 이러한 기존 방식의 결정적인 한계는 모델이 자신이 생성한 코드의 시각적 결과물을 관찰하지 못한 채 학습된다는 점입니다. 결과적으로, 모델은 특정 시각적 불일치가 왜 필요한 코드 변경으로 이어지는지를 학습하는 능력이 결여되어 있습니다.

반면, 인간 개발자는 **렌더링-비교-수정(render–compare–revise)**이라는 반복적인 과정을 수행합니다. 개발자는 구현체를 렌더링하고, 이를 디자인과 비교하며, 시각적 불일치를 식별한 뒤, 근간이 되는 코드를 정교하게 수정합니다. 현재의 MLLM 기반 시스템들은 이러한 메커니즘을 내재화하지 못하며, 시각적 차이를 내부적인 학습 신호가 아닌 단순한 외부 진단 신호로 취급합니다.

2. 방법론: VisRefiner

이러한 격차를 해소하기 위해, 저자들은 렌더링된 예측값과 참조 디자인 사이의 시각적 차이로부터 MLLM이 직접 학습할 수 있도록 설계된 훈련 프레임워크인 VisRefiner를 제안합니다. 이 프레임워크는 피드포워드(feed-forward) 예측에서 차이 기반 학습(difference-driven learning)으로 패러다임을 전환하며, 두 가지 뚜렷한 단계로 구성됩니다.

A. 차이 정렬 지도 학습 (Stage 1)

이 단계는 관찰된 시각적 불일치와 이를 해결하기 위해 필요한 구체적인 코드 업데이트 사이의 명시적인 대응 관계를 구축합니다.

• 데이터 구축 (VisDiffUI): 저자들은 시각적 편차와 그에 대응하는 코드 편집 쌍을 포함하는 데이터셋인 VisDiffUI를 구축했습니다. 이 데이터셋은 공개 소스(Vision2UI, WebSight)에서 유래되었으며 다음 두 가지 방법을 통해 증강되었습니다:
  1. 규칙 기반 섭동(Rule-based Perturbations): 색상, 레이아웃, 정렬, 컴포넌트, 이미지, 텍스트의 6가지 차원에 걸쳐 국소적인 UI 불일치를 시뮬레이션하기 위해 HTML/CSS 토큰을 수정하는 라이브러리를 사용합니다.
  2. 모델 예측 결함(Model-Predicted Imperfections): 초기 단계 모델의 불완전한 출력물을 그라운드 트루스(ground truth)와 결합하여, 규칙만으로는 합성하기 어려운 현실적인 아티팩트(예: 잘못 배치된 컨테이너, 불필요한 래퍼 등)를 포착합니다.
• 학습 목표: 모델은 타겟 스크린샷($I_{gt}$), 현재 코드($C_t$), 그리고 현재 코드의 렌더링 이미지($I_t$)가 주어졌을 때 정교화된 코드($C_{t+1}$)를 예측하도록 학습됩니다. 이 목적 함수는 다음과 같은 음의 로그 가능도(negative log-likelihood)를 최소화합니다:
  $$L_{SFT} = -\log P_\theta(C_{t+1} | I_t, I_{gt}, C_t)$$
  이를 통해 모델은 구현의 변화가 시각적 외형에 어떤 영향을 미치는지에 대한 이해를 확립합니다.

B. 자기 정교화를 통한 강화 학습 (Stage 2)

지도 학습 기반을 바탕으로, 이 단계는 **그룹 상대 정책 최적화(Group Relative Policy Optimization, GRPO)**를 사용하여 시각적 피드백을 통해 모델 스스로 출력을 정교화할 수 있게 합니다.

• 개선도 정량화: CLIP 기반의 지각적 유사성을 바탕으로 **상대적 개선 점수(Relative Improvement Score, RIS)**를 정의합니다. 이는 현재 렌더링과 타겟 사이의 시각적 차이를 줄이는 상대적 진전도를 측정하며, 척도 불변성(scale invariance)을 보장하기 위해 정규화됩니다.
• 보상 설계: 복합 보상 함수가 최적화를 유도합니다:
  1. 포맷 보상 ($r_{format}$): 구문론적으로 유효하지 않은 코드를 처벌합니다.
  2. 정교화 보상 ($r_{improve}$): 새로운 렌더링이 시각적 유사성을 개선했을 경우 양의 신호를 부여합니다.
  3. 품질 보상 ($r_{quality}$): 연속적인 RIS 값을 사용하여 개선의 정도를 측정합니다.
• 최적화: 모델은 후보 코드 변형들을 생성하고, 이를 렌더링하며, 보상의 그룹 상대적 이점(group-relative advantage)을 바탕으로 정책을 업데이트하여 반복적인 추론과 정교화 행동의 내재화를 장려합니다.

3. 주요 기여

1. VisRefiner 프레임워크: 시각적 피드백을 훈련 과정에 직접 통합하여, MLLM이 코드 수정이 시각적 결과에 어떤 영향을 미치는지 학습할 수 있게 하는 새로운 훈련 패러다임을 제시합니다.
2. VisDiffUI 데이터셋: 시각적 차이를 그에 대응하는 코드 편집과 정렬하는 특화된 데이터셋 및 데이터 파이프라인을 구축하여, 외형-구현 간의 대응 관계를 연구할 수 있는 자원을 제공합니다.
3. 실증적 검증: VisRefiner가 여러 벤치마크에서 시각적 충실도, 레이아웃 정렬 및 자기 정교화 능력을 일관되게 향상시킨다는 것을 광범-한 실험을 통해 입증했습니다.

4. 실험 결과

저자들은 VisRefiner(특히 7B 파라미터 변체)를 Design2Code, Design2Code-HARD, 그리고 홀드아웃 데이터셋인 VisDiffUI-Test에서 독점 모델(GPT-4o, Claude 3.5 Sonnet) 및 오픈 소스 베이스라인(Qwen2.5-VL, MiMo-VL)과 비교 평가했습니다.

• 단일 단계 생성 (Single-Step Generation): VisRefiner-7B는 강력한 단일 단계 정확도를 달성하여, 까다로운 Design2Code-HARD 벤치마크에서 72B 파라미터 규모인 Qwen2.5-VL-72B를 능가했습니다(평균 점수 85.6 대 80.8). 또한 구조적 정렬(Block Match) 측면에서 GPT-4o를 앞질렀습니다(78.1 대 56.6).
• 자기 정교화 안정성 (Self-Refinement Stability): 정교화 과정이 종종 성능 저하를 일으키는 베이스라인들과 달리, VisRefiner는 모든 데이터셋과 정교화 모드에서 일관된 이득을 보여주었습니다.
• 어블레이션 연구 (Ablation Studies):
  • SFT의 동력: 차이 정렬 쌍에 대한 지도 미세 조정(SFT)이 구조적 및 시각적 품질(예: 위치 정렬 및 색상 일관성)을 개선하는 핵심 요인으로 확인되었습니다.
  • GRPO의 정교화 역할: GRPO는 특히 세밀한 지표에서 추가적인 점진적 개선을 제공했으나, SFT에 의해 구축된 차이 인식 기반에 의존하는 모습을 보였습니다.
• 인간 평가: 인간 평가자들은 VisRefiner-7B가 베이스 모델에 비해 "의도적이고 능동적인 정교화"를 보여주며, "무변화(Tie)" 사례를 크게 줄였다고 평가했습니다. 이는 다소 높은 "패배(Lose)" 비율(능동적이지만 때로는 성공하지 못한 편집을 의미)로 이어졌으나, 모델이 보수적인 무작위 행동 대신 비사소한 수정을 수행할 수 있음을 확인시켜 주었습니다.
• 다회차 분석 (Multi-turn Analysis): 다회차 정교화 과정에서 성능이 변동되기는 했으나, 필터링된 결과(여러 회차 중 최선의 출력 선택)는 지속적으로 개선되었습니다. 이는 모델이 다양한 수정 경로를 탐색하고 있음을 시사합니다.

5. 의의 및 주장

본 논문은 VisRefiner가 스크린샷-투-코드 생성을 순수한 피드포워드 예측 작업에서 차이 기반 학습 패러다임으로 전환시킨다고 주장합니다. 시각적 차이로부터 학습함으로써, 이 프레임워크는 모델에게 코드 수정과 시각적 결과 사이의 인과 관계를 이해하는 인간과 유사한 추론 과정을 부여합니다.

저자들은 이 접근 방식이 단순히 생성 품질을 높이는 것을 넘어, 표준 MLLM, 특히 작은 규모의 모델에서는 결여되기 쉬운 자기 정교화 능력을 심어준다는 점을 강조합니다. 본 연구는 시각적 불일치를 사후 피드백이 아닌 직접적인 학습 신호로 포함하는 것이 구조화된 코드 합성 분야에서 멀티모달 추론을 발전시키는 데 있어 핵심적인 단계임을 시사합니다.