WebVR: Benchmarking Multimodal LLMs for WebPage Recreation from Videos via Human-Aligned Visual Rubrics

1. 문제 정의 (Problem Statement)

기존의 웹 생성 (Web Generation) 벤치마크는 주로 텍스트 프롬프트나 정적 스크린샷을 입력으로 사용하여 모델의 코딩 능력을 평가했습니다. 그러나 실제 웹 개발 현장에서는 디자이너가 레이아웃, 상호작용 흐름, 애니메이션 타이밍 등을 전달하기 위해 화면 녹화 영상 (Screen Recording Videos) 을 제공하는 경우가 많습니다.

기존 벤치마크의 한계는 다음과 같습니다:

• 동적 행동 평가 부재: 정적 이미지 기반 평가는 전환 (transitions), 애니메이션 타이밍, 연속적인 모션 등 웹 인터페이스의 핵심인 동적 요소를 포착하지 못합니다.
• 평가 기준의 단순성: 기존 평가 프로토콜은 거시적인 구조나 텍스트 기반 지표에 의존하여, 미세한 시각적 정합성과 상호작용 충실도 (Fidelity) 를 체계적으로 평가하지 못했습니다.

따라서, 비디오 기반 웹페이지 생성 (Video-to-Webpage Generation) 과 이를 평가하기 위한 전용 벤치마크 및 정밀한 평가 체계가 필요했습니다.

2. 방법론 (Methodology)

저자들은 WebVR이라는 새로운 벤치마크와 이를 평가하기 위한 인간과 정렬된 시각적 루브릭 (Human-Aligned Visual Rubrics) 기반 평가 파이프라인을 제안했습니다.

A. 데이터셋 구성 (WebVR Dataset)

• 규모 및 구성: 다양한 카테고리 (이커머스, 포트폴리오, 랜딩 페이지 등) 에 속한 175 개의 웹페이지로 구성됩니다.
• 데이터 생성 방식: 기존 웹 크롤링이 아닌, 제어된 합성 파이프라인을 통해 데이터를 생성하여 기존 모델의 학습 데이터 오염 (Contamination) 을 방지했습니다.
  1. 시드 데이터 준비: 실제 웹 쇼케이스 영상을 수집하여 구조화된 캡션으로 변환한 후, 의미론적 재테이밍 (Semantic Re-theming) 을 통해 가상의 새로운 브랜드/주제로 변환합니다.
  2. 시각 자산 검색: Unsplash API 를 활용하여 캡션에 맞는 이미지 자산을 추출하고 모델에 제공합니다.
  3. 후보 생성 및 실행: 여러 MLLM 이 생성한 HTML 코드를 표준화된 샌드박스 환경에서 실행하여 렌더링된 비디오를 생성합니다.
  4. 필터링 및 정제: 생성된 후보들 중 가장 높은 점수를 받은 것을 '참조 (Reference)'로 선정하고, 루브릭을 정제하여 최종 벤치마크 세트를 구성합니다.

B. 평가 프로토콜 (Evaluation Protocol)

• 입력: 참조 비디오 ($V_{ref}$) 와 시각 자산 ($A$).
• 생성: MLLM 이 독립적인 실행 가능한 HTML 문서 ($C$) 를 생성합니다.
• 실행 및 녹화: 생성된 코드를 표준화된 샌드박스에서 실행하여 참조 비디오와 동일한 상호작용 스크립트를 적용한 후, 결과 비디오 ($V_{gen}$) 를 녹화합니다.
• 시각적 루브릭 기반 평가:
  • 루브릭 설계: 각 웹페이지마다 고유하게 정의된 세밀한 이진 (Binary) 검증 기준 집합 ($R$) 을 사용합니다. 이는 레이아웃 구조, 색상/타이포그래피, 컴포넌트 완성도, 애니메이션 품질, 상호작용 정확도 등 4 가지 차원 (GA, NF, SSL, IM) 으로 분류됩니다.
  • MLLM 저지 (Judge): 생성된 비디오와 HTML 코드를 입력받아 루브릭의 각 항목을 충족하는지 (0 또는 1) 판별합니다.
  • 점수 계산: 모든 항목의 만족도 평균을 최종 점수 ($S$) 로 산출합니다.

3. 주요 기여 (Key Contributions)

1. 최초의 비디오-웹페이지 생성 벤치마크 (WebVR): 175 개의 시각적으로 풍부한 웹페이지를 포함하며, 공정성을 위해 시각 자산을 함께 제공합니다.
2. 비디오 기반 평가 프로토콜: 정적 스크래샷이 아닌, 실행된 코드로부터 생성된 동작 비디오를 평가함으로써 정적 외관과 동적 상호작용을 모두 포괄하는 재현 가능한 평가를 가능하게 합니다.
3. 인간과 정렬된 시각적 루브릭: MLLM 저자가 인간 전문가의 선호도와 높은 일치도 (96%) 를 보이도록 세분화된 검증 기준을 설계했습니다. 이는 추상적인 점수 매기기를 넘어 해석 가능한 피드백을 제공합니다.

4. 실험 결과 (Results)

19 개의 최신 MLLM 모델 (Open-source 및 Closed-source) 을 대상으로 실험한 결과는 다음과 같습니다.

• 성능 순위: Kimi-K2.5가 전체 점수 79.14 로 1 위를 차지했으며, 이어 Claude-Sonnet-4.6(78.49), GPT-5.2-Thinking(77.93) 이 뒤를 이었습니다. 오픈소스 모델 중 최상위 모델 (Qwen3.5 등) 도 상용 모델과 경쟁 가능한 성능을 보였습니다.
• 차원별 격차:
  • 강점: 전역 미학 (GA) 과 네비게이션/푸터 (NF) 와 같은 정적 레이아웃 및 스타일 복원 능력은 이미 높은 수준 (80 점대) 에 도달했습니다.
  • 약점: 상호작용 및 모션 (IM) 영역은 여전히 큰 병목 현상을 보입니다. 최상위 모델조차 IM 점수가 60 점대 (Kimi-K2.5: 60.10) 에 머물러 있어, 비디오의 시간적 신호를 실행 가능한 상호작용 로직으로 변환하는 데 한계가 있음을 보여줍니다.
• 모델 스케일링 효과: 모델 크기 증가와 'Thinking' (추론) 모드 도입이 성능 향상에 기여했으나, 특히 IM 영역에서의 개선은 제한적이었습니다.

5. 평가 루브릭의 중요성 및 인간 일치도

• 루브릭의 효과: 시각적 루브릭 없이 MLLM 저자가 평가할 경우 점수 분포가 왜곡되고 모델 간 구별력이 떨어졌습니다. 반면, 루브릭을 적용한 평가는 인간 전문가와의 일치도를 **96%**까지 끌어올렸습니다.
• 멀티모달 평가의 필요성: 코드만 평가하거나 비디오만 평가하는 것보다, 코드와 비디오를 모두 입력으로 받는 평가 방식이 인간 선호도와 가장 높은 일치도를 보였습니다. (비디오가 시각적 증거를, 코드가 구조적 정보를 제공하여 상호 보완적임)

6. 의의 및 결론 (Significance)

WebVR 은 프론트엔드 AI 에이전트의 다음 세대를 위한 엄격한 테스트베드를 제공합니다. 이 연구는 현재 MLLM 이 정적 웹페이지 생성에서는 상당한 진전을 이루었으나, 동적인 상호작용과 시간적 흐름을 포함한 복잡한 웹 경험을 재현하는 데에는 여전히 큰 격차가 있음을 규명했습니다.

향후 연구 방향은 단순한 모델 크기 확장 (Scaling) 을 넘어, 명시적인 시간적 모델링 (Temporal Modeling) 이나 상호작용 인식 훈련 목표 (Interaction-aware Training Objectives) 개발에 초점을 맞춰야 함을 시사합니다. 또한, 제안된 루브릭 기반 평가 체계는 웹 생성 모델의 성능을 인간 중심의 UX 관점에서 객관적이고 재현 가능하게 평가하는 표준으로 자리 잡을 것으로 기대됩니다.