시각 차이를 학습한 스크린샷 코드 자동 생성

초록

VisRefiner는 렌더링 결과와 목표 디자인 사이의 시각적 차이를 학습 신호로 활용해 UI 스크린샷을 HTML·CSS 코드로 변환하는 프레임워크이다. 차이‑정렬 감독과 시각 보상 기반 강화학습을 결합해 모델이 코드 수정과 시각적 개선 사이의 관계를 스스로 익히게 한다. 실험 결과, 단일 단계 생성 품질과 레이아웃 충실도가 크게 향상되었으며, 자체 재정제 능력도 확보되었다.

상세 분석

VisRefiner는 기존 멀티모달 대형 언어 모델(MLLM)이 스크린샷‑코드 매핑을 일방향 지도학습만으로 수행한다는 한계를 지적하고, 인간 개발자가 “렌더‑비교‑수정” 과정을 통해 시각적 차이를 코드 변화와 연결짓는 방식을 모방한다. 이를 위해 두 단계 학습 파이프라인을 설계했다. 첫 번째 단계인 차이‑정렬 감독(Difference‑Aligned Supervision)에서는 시각적 편차와 그에 대응하는 코드 수정 쌍을 명시적으로 제공한다. 데이터는 규칙 기반 교란(색상, 레이아웃, 정렬, 컴포넌트, 이미지, 텍스트 등 6가지 카테고리)과 사전 모델이 만든 실제 오류 두 종류를 혼합해 구축했으며, 각 교란은 HTML·CSS 토큰 수준에서 정확히 추적 가능하도록 설계되었다. 모델은 입력으로 현재 렌더 이미지 Iₜ, 목표 이미지 I_gt, 현재 코드 Cₜ를 받아 정답 코드 Cₜ₊₁을 예측하도록 SFT 손실을 최소화한다.

두 번째 단계는 시각 보상 기반 강화학습이다. 모델이 생성한 코드 Cₜ를 렌더링해 Iₜ를 얻고, CLIP 기반 유사도 sₜ와 sₜ₊₁을 계산해 상대 개선 점수(RIS)를 정의한다. 보상은 형식 보상(문법 오류 패널티), 개선 보상(시각 유사도 상승 여부), 품질 보상(RIS 값)으로 구성돼, 먼저 구문 적합성을 확보하고 이후 시각적 향상을 독려한다. 그룹 상대 정책 최적화(GRPO)를 적용해 동일 목표 이미지 내에서 여러 후보 코드를 샘플링하고, 그룹 평균·표준편차를 이용해 정규화된 어드밴티지를 구한다. 이를 통해 정책 업데이트가 시각 차이 감소에 직접 연결된다.

핵심 인사이트는 (1) 시각 차이를 코드 수정과 직접 매핑함으로써 모델이 “왜” 특정 레이아웃 오류가 발생했는지를 학습한다는 점, (2) 강화학습 단계에서 시각 보상을 이용해 모델이 자체적으로 재정제 루프를 형성한다는 점이다. 또한, 규칙 기반 교란과 실제 모델 오류를 혼합한 데이터 구축 방식은 합성 데이터와 현실 데이터의 장점을 동시에 취해 일반화 능력을 높인다. 실험에서는 단일 단계 SFT만 사용했을 때보다 BLEU, CodeBLEU, 레이아웃 정확도 등에서 평균 1015%p 상승을 기록했으며, 자체 재정제 시 23회 반복 후 시각 유사도가 거의 수렴하는 모습을 보였다.