Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
기존 웹페이지 코드 생성 벤치마크는 애니메이션을 충분히 다루지 못하는 한계가 있었습니다. 이를 해결하기 위해 비디오 기반의 최초 벤치마크인 AnimWeb-Bench를 소개합니다. 이 벤치마크는 실제 웹페이지 124개와 정교한 평가 프로토콜을 제공하며, MLLMs 및 코딩 에이전트의 애니메이션 재현 능력을 측정했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 arXiv Codex (cs.SE)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기웹에서 애니메이션은 만연해 있으며, CSS animation 속성만으로도 웹페이지의 4분의 3 이상에서 사용됩니다. 하지만 기존의 웹페이지 코드 생성 벤치마크는 정적 스크린샷, 사용자 트리거 상호작용 또는 고립된 모션 그래픽을 목표로 하기에, 멀티모달 대규모 언어 모델(MLLMs)과 코딩 에이전트가 완전한 애니메이션 웹페이지를 재구성하는 능력은 아직 충분히 탐구되지 않은 영역입니다. 이러한 격차를 해소하기 위해, 우리는 비디오로부터의 애니메이션 웹페이지 코드 생성을 위한 최초의 벤치마크인 AnimWeb-Bench를 소개합니다. 이 벤치마크는 7개 애플리케이션 도메인과 33가지 애니메이션 유형에 걸친 124개의 실제 웹페이지로 구성되어 있으며, 페이지 중 91.9%가 여러 유형을 결합하고 있습니다. 각 페이지는 참조 비디오와 원본 웹페이지의 정적 에셋 쌍으로 제공됩니다. 나아가 우리는 인간에게 맞춰진(human-aligned) 2차원 평가 프로토콜을 제안합니다: Static Appearance Fidelity는 정렬된 키프레임에서 구조, 텍스트, 색상 및 시각적 유사성을 측정하며, Animation Fidelity는 프레임 전반에 걸쳐 UI 구성 요소를 추적하고 그 위치, 크기, 속도(velocity), 그리고 외관을 참조 비디오의 요소와 비교합니다. 14개의 MLLMs와 세 개의 코딩 에이전트를 평가한 결과 다음 사항들이 밝혀졌습니다: (1) 웹페이지 애니메이션을 재현하는 것이 정적 외관을 재현하는 것보다 상당히 어렵다는 점; (2) 명시적인 프레임 검사 및 렌더 피드백이 코딩 에이전트의 재구성 품질을 향상시킨다는 점; 그리고 (3) 급격하고 연속적인 변화는 이산적인 상태 전환(discrete state transitions)보다 재현하기 어렵다는 점입니다. 저희의 코드와 데이터셋은 https://starry1001.github.io/AnimWeb-Bench-website/ 에서 이용 가능합니다.