기술 요약: Video2Code

문제 정의

본 논문은 UI 상호작용 영상을 통해 실행 가능한 프런트엔드 코드(HTML, CSS, JavaScript)를 생성하는 과제를 다룹로니다. 시각-언어 모델(VLM)은 정적 UI-to-코드 작업(스크린샷으로부터 레이아웃 재구성)에서는 발전해 왔으나, 동적인 동작을 처리하는 데는 어려움을 겪고 있습니다. 저자들은 기존 비디오 지원 VLM에서 발생하는 **상태-전이 불일치(state-transition misalignment)**라는 핵심적인 실패 모드를 식별했습니다.

현재의 모델들은 컨텍스트 예산을 관리하기 위해 희소한 프레임 샘플링(sparse frame sampling)이나 압축된 시간적 표현에 의존합니다. 이는 자연스러운 비디오에는 효과적일 수 있으나, 코드와 관련된 증거가 짧은 동작 경계(예: 드롭다운을 트리거하는 클릭) 주변에 집중되어 있는 UI 상호작용에서는 취약합니다. 희소한 샘플링은 이러한 짧은 전이 과정을 놓치기 쉬우며, 이로 인해 웹페이지의 올려바른 동작을 구현하는 데 필요한 상태-동작-상태(state-action-state) 시퀀스가 깨지게 됩니다. 결과적으로, 모델은 시각적 외형은 재구성할 수 있어도 사용자의 행동에 의해 트리거되는 실행 가능한 로직을 복구하는 데 실패하게 됩니다.

저자들은 이 과제를 단순한 시각적 재구성이 아닌, **실행 가능한 상태-전이 복구(executable state-transition recovery)**로 정의합니다. 목표는 완전한 전이 증거, 즉 동작 전의 UI 상태, 동작의 실행, 그리고 동작 후의 UI 상태를 보존하는 것입니다.

방법론: Video2Code

상태-전이 불일치를 해결하기 위해, 저자들은 동작 인식 비디오-to-코드 방식인 Video2Code를 제안합니다. 비디오 전체에 시각적 예산을 균등하게 할당하는 대신, Video2Code는 **동작 인식 재방문(Action-Aware Revisit)**을 중심으로 하는 단계적(Coarse-to-Fine) 전략을 채택합니다.

1. 동작 인식 재방문 프로세스

이 방법은 두 단계로 작동합니다:

• 단계적 비디오 읽기 (Round 1): 모델은 전체 UI 상호작용 영상을 낮은 시간 해상도로 1차 통과합니다. 모델의 목적은 전역적인 상호작용 흐름을 추론하고 **동작 결정적 시간 세그먼트(action-critical temporal segments)**를 예측하는 것입니다. 이 세그먼트는 동작 전 상태, 동작 실행, 동작 후 상태를 포함하는 구간으로 정의됩니다.
• 시간적 클리핑 도구 (Temporal Clipping Tool): 예측된 세그먼트를 기반으로, 모델은 특정 구간의 고해상도 클립을 추출하는 도구(extract_multi_segment)를 호출합니다.
• 집중 세그먼트 재방문 (Round 2): 추출된 고해상도 클립이 모델의 컨텍스트에 다시 도입됩니다. 모델은 단계적 통과에서 얻은 전역 컨텍스트와 재방문된 클립으로부터 얻은 국소적 고충실도 증거를 결합하여 최종 실행 가능한 코드를 생성합니다.

2. 동작 결정적 세그먼트의 정의

본 논문은 완전한 전이 증거를 확보하기 위해 두 가지 유형의 결정적 세그먼트를 구분합니다:

• 순수 동작 세그로먼트 (Pure Action Segments): 동작 전, 실행, 동작 후 상태를 포함하는 단일 동작(클릭, 텍스트 입력, 선택, 스크롤)을 포함합니다.
• 동작-스크롤 세그먼트 (Action-Scroll Segments): 동작의 결과를 드러내기 위해 스크롤이 필요한 경우(예: 링크를 클릭하여 로드된 콘텐츠가 스크롤 후에만 보이는 경우) 해당 동작을 스크롤과 함께 그룹화합니다. 이는 모델이 맥락적 의존성을 놓치는 것을 방지합니다.

3. 동작 정렬된 지도 학습 및 훈련

모델을 훈련하기 위해, 저자들은 12,000개의 동작 정렬된 비디오-코드 쌍으로 구성된 WebVidCoding 데이터셋을 구축했습니다.

• 데이터 수집: 자동화된 브라우저 탐색 에이전트가 웹페이지와 상호작용하며 UI 상호작용 영상을 기록합니다. 동작 경계에 명시적인 시간적 앵커를 제공하기 위해 가벼운 시각적 마커(12픽셀 바)가 주입됩니다.
• 지도 구조: 훈련은 동일한 2단계 추론 구조를 따릅니다:
  • Round 1: 동작 타임라인을 기반으로 클리핑 도구를 위한 시간적 윈도우를 예측하도록 모델을 지도합니다.
  • Round 2: Round 1에서 반환된 특정 클립과 전역 비디오 컨텍스트를 사용하여 실행 가능한 코드를 생성하도록 모델을 지도합니다.
• 기반 모델: 이 접근 방식은 GLM-4.6V-100B를 이 데이터셋으로 지도 미세 조정(SFT)하여 구현되었습니다.

주요 기여

1. 문제 정의: 저자들은 UI 비디오-to-코드 생성을 실행 가능한 상태-전이 복구로 정의하고, 예산 제한이 있는 비디오 관찰에서 상태-전이 불일치를 주요 병목 현상으로 식별했습니다.
2. 방법론적 혁신: 동작 결정적 영역을 더 높은 시간 해상도로 재방문하기 위해 시간적 클리핑 도구를 사용하는 Video2Code를 제안합니다. 이를 통해 비디오 전체를 조밀하게 만들지 않고도 국소적 전이 증거를 복구할 수 있습니다.
3. 데이터셋 및 지도 학습: 동작 정렬된 비디오-코드 지도를 갖춘 WebVidCoding을 도입하여, 모델이 재방문 계획과 복구된 전이 증거로부터의 코드 생성을 모두 학습할 수 있도록 합니다.

실험 결과

저자들은 실제 및 합성 웹페이지 시나리오를 포함하는 WebVideo2Code-Bench에서 Video2Code를 평가합니다. 평가는 시각적 유사도(Visual Similarity)(렌더링된 상태와의 일치 여부)와 기능적 정확성(Functional Correctness)(브라우저 기반 검증을 통한 동작 실행 후의 상태 변화 재현 여부) 지표를 사용합니다.

• 성능 향상: 실제 환경 서브셋(WebVideo2Code-Real)에서 Video2Code는 기본 GLM-4.6V 모델보다 크게 앞섭니다.
  • 시각적 유사도: 70.94%에서 **82.06%**로 향상되었습니다.
  • 기능적 정확성: 29.85%에서 **61.99%**로 향상되었습니다.
• 베이스라인과의 비교: 폐쇄형 모델(예: Kimi-K2.6, Gemini-3.1-Pro)이 강력한 결과를 달성하지만, 직접 비디오 관찰을 사용하는 오픈 소스 모델들은 기능적 정확성에서 어려움을 겪습니다. Video2Code는 특히 밀집된 다단계 상호작용에서 기초가 되는 오픈 소스 모델을 실질적으로 강화합니다.
• 절제 연구 (Ablation Studies): "재방문" 메커니즘(시간적 클리핑 도구 비활성화)을 제거하면 성능, 특히 기능적 정확성에서 큰 하락(61.99%에서 47.84%로 감소)이 발생하며, 이는 집중된 재방문이 실행 가능한 전이 증거를 복구하는 데 필수적임을 확인시켜 줍니다.
• 강건성: 모델은 다양한 상호작용 횟수(1~16단계)와 비디오 길이에 대해 비교적 안정적인 성능을 유지하지만, 상호작용 유형의 다양성이 높아질수록 기능적 정확성이 약간 감소합니다.

의의 및 주장

본 논문은 Video2Code가 동작에 충실한 UI 비디오-to-코드 생성을 위해 **동작 인식 재방문(Action-Aware Revisit)**이 필수적인 메커니즘임을 입증한다고 주장합니다. 저자들은 단순히 시각적 예산을 균등하게 늘리는 것만으로는 불충분하며, 대신 모델이 상호작용 동작을 정의하는 상태-동작-상태 전이를 복구하기 위해 자원을 동적으로 할당해야 한다고 강조합니다.

이 연구는 정적인 UI 재구성을 넘어 동적인 상호작용 모델링으로의 간극을 메움으로써, 시각적으로 정확할 뿐만 아니라 기능적으로 실행 가능한 웹페이지를 생성하는 단계로 나아가는 발판을 마련합니다. 저자들은 현재 범위가 일반적인 상호작용(클릭, 스크롤, 입력)에 국한되어 있으며, 드래그 앤 드롭, 파일 업로드 또는 고도로 비동기적인 백엔드 의존적 동작과 같은 복잡한 시나리오는 아직 다루지 않는다고 겸허히 언급합니다.