WebVR: 인간 정렬 시각적 루브릭을 통한 비디오 기반 웹페이지 재현 멀티모달 LLM 벤치마크

기존 웹페이지 생성 AI는 정지 이미지나 텍스트만 보고 코드를 작성하여 동적인 애니메이션이나 상호작용을 구현하는 데 한계가 있었다. 이 논문은 실제 개발 환경처럼 화면 녹화 비디오를 보고 웹페이지를 재현하는 능력을 측정하는 최초의 벤치마크를 제시하여 AI 에이전트의 실무 활용 가능성을 높였다.

기존의 웹페이지 생성 모델은 Transformer 아키텍처를 기반으로 정지 이미지의 Embedding을 입력받아 코드를 생성하므로, 버튼 클릭 시의 변화나 스크롤 애니메이션 같은 시계열(Temporal) 정보를 학습하거나 평가하기 어려웠다. WebVR은 비디오의 프레임 시퀀스를 입력으로 사용하여 모델이 시간의 흐름에 따른 상태 변화를 이해하도록 유도한다.

논문은 비디오에 담긴 레이아웃 구조와 동적 피드백을 코드로 변환하는 능력을 측정하기 위해 '시각적 루브릭' 개념을 도입했다. 이는 복잡한 디자인 평가를 "버튼이 존재하는가?", "호버 시 색상이 변하는가?"와 같은 단순 이진 질문으로 분해하여 MLLM 판사가 객관적으로 점수를 매길 수 있게 한다.

이러한 접근은 AI가 단순히 겉모습만 흉내 내는 것을 넘어, 사용자의 상호작용에 반응하는 실행 가능한 소프트웨어 아티팩트를 얼마나 정확하게 설계할 수 있는지 검증하는 기준이 된다.

데이터 합성 파이프라인은 4단계로 구성된다. (1) 실제 웹사이트 녹화 비디오 수집 (2) MLLM을 이용한 구조적 캡션 생성 (3) 데이터 오염 방지를 위한 의미론적 재테마(Re-theming) (4) Unsplash API를 통한 고해상도 이미지 매칭을 거쳐 새로운 벤치마크 인스턴스를 생성한다.

평가 단계에서는 MLLM 판사가 생성된 코드와 실행 비디오를 동시에 분석한다. [참조 비디오와 생성된 비디오/코드를 입력으로] → [사전에 정의된 원자적 루브릭 항목별로 이진 판단을 수행하여] → [각 항목의 통과 여부를 0 또는 1로 출력하고] → [전체 항목의 평균값을 내어 최종 재현 품질 점수 S를 산출한다].

루브릭은 Global Aesthetics(GA), Navigation and Footer(NF), Section-Specific Layouts(SSL), Interaction and Motion(IM)의 4대 차원으로 분류된다. 각 항목은 시각적 증거에만 기반하도록 설계되어 코드 구현 방식에 구애받지 않는 객관적인 평가를 보장한다.

19개 주요 MLLM을 대상으로 실험한 결과, Kimi-K2.5가 79.14점으로 전체 1위를 차지했으며 Claude-Sonnet-4.6(78.49점)과 GPT-5.2-Thinking(77.93점)이 뒤를 이었다. 오픈소스 모델 중에서는 Kimi-K2.5가 폐쇄형 모델들을 능가하는 성능을 보였다.

차원별 분석 결과, 모든 모델이 Global Aesthetics(평균 72.57점)와 Navigation/Footer(72.09점)에서는 우수한 성적을 거두었으나, Interaction and Motion(38.44점)에서는 급격한 성능 저하를 보였다. 이는 최신 모델들도 비디오의 동적 요소를 실행 가능한 코드로 변환하는 데 여전히 어려움을 겪고 있음을 시사한다.

루브릭 기반 자동 평가는 인간 전문가의 선호도와 비교했을 때 96%의 높은 일치도를 기록했다. 특히 코드와 비디오를 모두 활용하는 멀티모달 평가 방식이 단일 모달리티 평가보다 인간의 판단을 훨씬 더 잘 모사하는 것으로 확인됐다.

WebVR은 데이터 오염(Data Contamination) 문제를 해결하기 위해 실제 웹사이트를 그대로 사용하지 않고, 레이아웃 구조는 유지하되 도메인과 콘텐츠를 완전히 바꾸는 Semantic Re-theming 기법을 적용했다. 이를 통해 모델이 학습 데이터에서 본 내용을 기억해 출력하는 것이 아니라 순수하게 비디오를 이해하여 코드를 생성하도록 강제한다.

평가 샌드박스는 Chromium 엔진을 기반으로 2560x1440 해상도, 30 FPS 환경에서 동작한다. 고정된 인터랙션 스크립트를 실행하여 페이지 스크롤 및 호버 효과를 유도하고 이를 녹화함으로써, 모델이 작성한 JavaScript 로직의 정확성을 시각적으로 검증한다.

루브릭 설계 원칙으로 'Extreme Atomicity'를 채택했다. 하나의 체크 항목은 반드시 하나의 속성(예: 색상, 정렬, 존재 여부)만 확인하며, 접속사(and, or) 사용을 금지하여 평가의 모호성을 제거하고 결과의 해석력을 높였다.

현재 MLLM들은 정적인 레이아웃 재현에는 능숙하지만, 비디오에 나타난 복잡한 상태 전환 로직이나 미세한 애니메이션 타이밍을 코드로 정확히 구현하는 데는 여전히 한계가 있다. 또한 픽셀 단위의 정밀한 공간 배치(Spatial Grounding) 오류가 빈번하게 발생한다.