기술 요약: Animation2Code

문제 정의

시각-언어 모델(VLMs)이 정적 시각-코드 작업(예: 이미지로부터 웹페이지, 차트, SVG 생성)에서 상당한 능력을 입증해 왔으나, 비디오로부터 **시간적 역동성(temporal dynamics)**을 복구하는 능력은 아직 탐구되지 않았습니다. 정적 디렌더링(de-rendering)은 단일 이미지를 프로그램으로 매핑하는 것을 요구하는 반면, 동적 디렌더링은 프레임 시퀀스에 대한 추론, 객체 궤적 추적, 그리고 움직임 타이밍에 대한 이해를 요구합니다. 현재의 비디오 이해 벤치마크는 주로 질의응답이나 분류에 집중되어 있으며, 이는 복잡한 움직임을 결정론적으로 재현하는 실행 가능한 코드를 생성하도록 모델을 요구하지 않습니다. 모델이 연속적이고 시간에 기반한 시각적 변화를 추론하고 이를 프로그래밍적 표현(HTML/CSS/JavaScript)으로 변환할 수 있는지 평가하는 벤치마크가 부족한 실정입니다.

방법론

Animation2Code 벤치마크

저자들은 애니메이션 디렌더링(animation de-rendering) 작업을 통해 시간적 시각 추론을 평가하기 위해 설계된 벤치마크인 Animation2Code를 소개합니다.

• 데이터셋: 이 데이터셋은 CodePen에서 가져온 1,069개의 고품질 웹 애니메이션 비디오로 구성됩니다. 각 비디오는 실제 정답 코드(인라인 CSS 및/또는 JavaScript가 포함된 HTML)와 쌍을 이룹니다.
• 데이터 다양성: 애니메이션은 회전, 이동(translation), 크기 조절(scaling), 불투명도 변화를 포함하여 다양한 시각적 외형과 움직임 패턴을 다룹니다. 코드 복잡도는 7줄에서 10,000줄 이상까지 다양하며, 86%는 순수 CSS이고 14%는 JavaScript를 포함합니다.
• 작업 정의: 정답 코드로 렌더링된 참조 비디오($V_{ref}$)가 주어지면, 모델은 독립적이고 실행 가능한 HTML 파일($C$)을 생성해야 합니다. $C$를 실행했을 때, $C$는 **공간적 외형(spatial appearance)**과 시간적 역동성(temporal dynamics) 모두에서 $V_{ref}$와 일치하는 렌더링된 비디오($V_{gen}$)를 생성해야 합니다.
• 렌더링 파이프라인: 공정한 평가를 보장하기 위해, 본 벤치마크는 헤드리스 크로미움(headless Chromium) 파이프라인을 사용하여 CSS와 JavaScript 애니메이션을 동기화하며 코드를 결정론적인 MP4 비디오(1024×768, 30 FPS)로 렌더링합니다.

평가 지표

저자들은 시각적 충실도와 시간적 정렬을 분리하기 위해 두 가지 자동화된 인간 정렬 지표를 제안합니다:

1. 외형 유사도(Appearance Similarity): 생성된 애니메이션과 참조 애니메이션 사이의 시각적 유사성을 측정합니다.
   • 프로세스: 위치적 혼란을 제거하기 위해 애니메이션 영역을 크롭합니다. 프레임은 **동적 시간 워핑(Dynamic Time Warping, DTW)**을 사용하여 정렬됩니다.
   • 점수 산정: 인간의 지각을 바탕으로 학습된 DreamSim 임베딩을 사용하여 최적의 정렬 경로를 따라 평균 유사도를 계산합니다.
2. 시간적 유사도(Temporal Similarity): 시각적 외형과 독립적으로 움직임 궤적의 유사성을 측정합니다.
   • 프로세스: CoTracker3를 사용하여 모션 트랙렛(tracklets)을 추출합니다. 생성된 애니메이션과 정답 애니메이션 간의 픽셀 단위 대응 관계 부재를 처리하기 위해, 시스템은 그리드 상에 프로그래밍 방식으로 추적 포인트를 초기화합니다.
   • 점수 산정: **방향 일치성(direction agreement, 코사인 유사도)**과 **속도 일치성(speed agreement, 크기 비율)**을 기반으로 트랙렛 변위 간의 상관관관계를 계산합니다. 최종 점수는 **샴 거리(Chamfer distance)**를 사용하여 쌍별 상관관계를 집계합니다.

실험 설정

저자들은 세 가지 설정 하에서 일련의 최신 상용 및 오픈 소스 VLM(Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6, LLaMA 4 Scout)을 평가했습니다:

• 제로샷 프롬프팅(Zero-Shot Prompting): 비디오 입력(네이티브 비디오 또는 2 FPS 샘플링된 프레임)으로부터 직접 생성합니다.
• 지도 학습 미세 조정(Supervised Finetuning, SFT): LoRA 및 전체 파라미터 방법을 사용하여 데이터셋에 대해 Qwen3-VL-8B-Instruct를 미세 조정합니다.
• 반복적 정제(Iterative Refinement): 모델이 자신의 렌더링된 출력을 대상과 반복적으로 비교하고 코드를 수정하는 멀티 에이전트 프레임워크(METAL에서 채택)입니다.

주요 결과

• 실행 성공률: 대부분의 모델이 높은 코드 실행률(최대 100%)을 달성하였으며, 이는 모델이 구문적으로 유효한 HTML/CSS/JS를 생성할 수 있음을 나타냅니다.
• 외형 vs 시간적 격차:
  • 모델들은 강력한 외형 유사도(GPT-5.4의 경우 최대 0.84)를 달성하였으며, 이는 모델이 정적 시각 레이아웃을 효과적으로 재현할 수 있음을 시사합니다.
  • 시간적 유사도는 모든 모델과 설정에서 일관되게 낮게 나타났습니다(Gemini 3 Flash Preview의 최대 점수는 0.31).
• 학습 및 정제의 영향:
  • 미세 조정(Finetuning): SFT는 실행 성공률을 높였으나, 외형 및 시간적 유사도를 크게 저하시켰습니다. 이는 모델이 입력 비디오에 근거하기보다 학습된 코드 사전 지식(prior)에 의존했음을 시사합니다.
  • 반복적 정제(Iterative Refinement): 이 방식은 특히 첫 번째 반복에서 가장 일관된 개선을 보여주었으나, 시간적 점수는 여전히 외형 점수에 비해 낮았습니다.
• 입력 모달리티: 입력 프레임 레이트를 높이는 것(2 FPS에서 24 FPS로)은 미미한 이득만을 제공하였으며, 이는 단순히 더 밀도 높은 시간적 신호를 제공하는 것만으로는 현재의 모델이 연속적인 애니메이션 역동성을 학습하기에 불충분함을 나타냅니다.
• 질적 실패 사례: 모델들은 일반적인 시각적 스타일은 올바르게 구현하더라도, 궤적(예: 원형 운동이 선형 또는 정적으로 변함)을 정확히 재현하는 데 실패하거나 공간적 관계를 파악하는 데 어려움을 겪었습니다.

의의 및 주장

본 논문은 웹 애니메이션을 실행 가능한 코드로 디렌더링하는 것을 평가하며, 특히 시간적 시각 추론을 목표로 하는 최초의 벤치마크라고 주장합니다.

• 근본적 한계 노출: 주요 발견은 현재의 VLM이 움직임을 해석하고 코드로 재현하는 능력에 있어 상당한 격차를 가지고 있다는 점입니다. 모델은 객체가 "무엇처럼" 보이는지는 재구성할 수 있지만, 그것이 시간이 지남에 따라 "어떻게" 움직이는지는 재구성하는 데 실패합니다.
• 평가 도구: 제안된 지표(외형 및 시간적 유사도)는 인간의 판단과 강한 상관관계를 보이며 검증되었고, 애니메이션 품질을 평가하기 위한 신뢰할 수 있는 자동화된 대리 지표를 제공합니다.
• 연구 방향: 이 벤치마크는 기존 벤치마크에서 외형 불일치와 혼동될 수 있는 시간적 역동성 복구 문제를 분리하여 제시합니다. 이는 멀티모달 프로그램 합성 및 시간적 추론 연구를 위한 테스트베드 역할을 합니다.
• 윤리적 소싱: 데이터셋은 라이선스 없는 웹 비주얼 클로닝의 위험을 완화하기 위해 MIT 라이선스가 부여된 CodePen 프로젝트로부터 구축되었습니다.

저자들은 모델이 실행 가능한 코드를 안정적으로 생성하고 강력한 정적 외형을 보여줄 수는 있지만, 시간적 역동성을 포착하는 데는 지속적으로 실패한다는 결론을 내리며, 이는 VLM의 향후 개선을 위한 중요한 영역임을 강조합니다.