기술 요약: MT-Web2Code

문제 정의

최근 대규모 시각-언어 모델(LVML)의 발전은 무에서 웹 UI를 생성하는 데 있어 상당한 능력을 입증했습니다. 그러나 기존 벤치마크는 주로 단일 턴(single-turn), 전체 페이지 생성에 집중되어 있으며, 각 태스크를 독립적인 입력-출력 문제로 취급합니다. 이러한 방식은 개발자가 기존 코드베이스 내에서 누락된 영역을 재구성하거나 국소적인 요소를 수정하면서도 영향을 받지 않는 콘텐츠는 보존하는 **반복적인 워크플로우(iterative workflows)**를 수행하는 프론트엔드 엔지니어링의 현실을 포착하지 못합니다. 현재의 벤치마크는 모델이 진화하는 페이지를 안정적으로 편집할 수 있는지, 턴 간의 일관성을 유지할 수 있는지, 또는 오류 전파를 방지할 수 있는지를 평가할 수 없습니다. 정적인 UI 생성 벤치마크와 동적인 다중 턴(multi-turn) 요구사항이 있는 실제 UI 코딩 사이에는 중대한 격차가 존재합니다.

방법론

1. 벤치마크 구축: MT-Web2Code

저자들은 다중 턴(multi-turn) 상호작용을 위해 설계된 최초의 멀티모달 코딩 벤치마크인 MT-Web2Code를 소개합니다. 이는 16개의 수직적 도메인(예: CRM, ERP, 리테일, 정부)에 걸친 102개의 태스크를 포함합니다. 이 벤치마크는 두 가지 상호 보완적인 태스크 입도를 정의합니다:

• 매크로 수준의 영역 재구성(Macro-Level Regional Reconstruction): 에이전트는 시각적 참조를 바탕으로 누락된 전체 의미론적 영역을 재구성하고, 페이지의 나머지 부분을 변경하지 않으면서 주변 페이지 구조에 통합해야 합니다.
• 마이크로 수준의 국소적 수정(Micro-Level Localized Modification): 에이전트는 특정 바운딩 박스 내의 미세한 구조적 및 스타일적 결함(예: 색상, 간격, 텍text 정렬)을 수정하는 동시에 주변 레이아웃을 엄격히 보존해야 합니다.

2. 데이터 생성: 역방향 오염 궤적 엔진 (Reverse-Corruption Trajectory Engine)

비싼 턴 단위의 인간 주석 없이 고품질의 결정론적 다중 턴 복구 궤적을 구축하기 위해, 저자들은 역방향 오염 궤적 엔진을 개발했습니다:

• 프로세스: "골든 페이지(Golden Page, $H_0$)"에서 시작하여, 엔진은 결정론적인 구조적 및 스타일적 결함을 반복적으로 주입하여 일련의 오염된 상태($H_1, \dots, H_T$)를 생성합니다. 에이전트의 과제는 이 궤적을 자기회귀적(autoregressively)으로 역전시키는 것입니다.
• 요소 지문(Element Fingerprinting): DOM 리플로우(reflow)에도 불구하고 순차적 수정 과정에서 요소를 추적하기 위해, 시스템은 HTML 노드에 위치에 무관한 요소 지문(태그, 텍스트 및 속성의 해시값)을 할당합니다. 이 식별자들을 통해 시스템은 대상 영역과 그와 가장 가까운 생존 형제 노드를 결정론적으로 추적하여, 각 턴의 "그라운드 트루스(ground truth)"가 고유하게 정의되도록 보장합니다.
• 결함 분류 체계(Defect Taxonomy): 마이크로 수준의 결함은 5가지 지각적 차원(레이아웃, 요소, 텍스트, 색상, 간격)에 걸친 9가지 원자적 연산자를 사용하여 생성되며, 이를 통해 타겟 노드 간의 위상적 독립성을 확보하여 연쇄적인 복구 실패를 방지합니다.

3. 평가 프로토콜: 이중 축 메트릭 (Dual-Axis Metrics)

본 논문은 대상 영역 충실도(in-box)와 영향받지 않은 콘텐츠의 보존(out-of-box)을 별도로 측정하는 이중 축 평가 프로토콜을 제안합니다:

• 매크로 수준 (영역): 5차원 VLM 기반 루브릭(레이아웃, 요소, 텍스트, 색상, 간격)을 사용하여 재구성된 영역을 지각적으로 점수화합니다. 주변 페이지는 부수적인 리플로우나 스타일 변경 여부에 대해 평가됩니다.
• 마이크로 수준 (국소화): 결정론적인 픽셀 기반 정렬을 사용합니다. 복구 영역(repair footprint)은 골든 페이지와 오염된 페이지 사이의 픽셀 차이 마스크로 정의됩니다. 정확도는 영역 내의 구조적 유사도(SSIM)를 통해 측정되며, 보존도는 영역 외의 SSIM으로 측정되며 색상 민감도 페널티가 보완됩니다.
• 통합 점수: 최종 점수는 $0.8 \times S_{inbox} + 0.2 \times S_{outbox}$의 가중치를 적용하여 인박스(in-box) 및 아웃박스(out-of-box) 메트릭을 결합합니다.

주요 결과

저자들은 13개의 최첨단 코딩 에이전트(Gemini, Claude, GPT, Kimi, GLM, Qwen, Doubao 시리즈 포함)를 MT-Web2Code로 평가했습니다. 실험 결과 세 가지 일관된 한계점이 드러났습니다:

1. 충실한 영역 재구성의 어려움: 에이전트들이 가능성을 보여주기는 하지만, 대상 영역을 충실하게 재구성하면서 동시에 대상 영역 외부의 일관성을 유지하는 데 종종 실패합니다. 더 큰 모델들은 영향을 받지 않는 영역을 보존하라는 명시적인 지시가 있음에도 불구하고 불필요한 전역 레이아웃 변경을 도입하기도 합니다.
2. 미세한 시각-코드 정렬 부족: 마이크로 수준의 태스크에서 에이전트들은 일반적으로 주변 콘텐츠를 보존하는 데 있어서는 높은 점수(종종 >0.95)를 얻지만, 특정 결함을 복구하는 데 있어서는 상당한 편차를 보입니다. 이는 정밀한 시각적 그라운딩(visual grounding) 및 코드 정렬의 약점을 나타냅니다.
3. 오류 스노우볼링 (Error Snowballing): 다중 턴 설정에서 초기 턴에 발생한 오류는 후속 편집에 의해 상속되고 증폭됩니다. 모델이 자신의 이전(잠재적으로 결함이 있는) 출력물을 바탕으로 편집하도록 강제될 때, 올로바른 골든 상태로부터 편집할 때보다 성능이 현저히 저하됩니다.

주요 발견 사항:

• 태스크 특이성: 매크로 재구성에서의 강력한 성능이 마이크로 수정에서의 강력한 성능을 보장하지는 않습니다(그 반대도 마찬가지임). 예를 들어, Gemini-3.5-Flash는 매크로 수준(65.5)에서 앞섰던 반면, Doubao-Seed-2.0-Pro는 마이크로 수준(83.5)에서 앞섰습니다.
• 캡션의 영향: 시각적 참조에 대한 텍스트 캡션을 제공하는 것은 일관되지 않은 결과를 낳았습니다. 이는 일부 모델(예: Gemini-3.5-Flash)의 성능을 향상시켰으나 다른 모델(예: Kimi-K2.6)의 성능은 저하시켰으며, 이는 텍스트 사전 지식이 때때로 시각적 증거와 충돌할 수 있음을 시사합니다.
• 판단자 신뢰성: 고성능 코딩 에이전트가 반드시 신뢰할 수 있는 판단자인 것은 아닙니다. 일부 상위 코딩 모델들은 인간의 평가와 비교했을 때 지나치게 낙관적인 점수를 부여했습니다.

의의 및 주장

본 논문은 MT-Web2Code가 정적인 UI 생성 벤치마크와 실제 프론트엔드 개발의 반복적 특성 사이의 간극을 메운다고 주장합니다. 주요 기여는 다음과 같습니다:

1. 최초의 다중 턴 벤치마크: 영역 재구성과 국소적 수정을 모두 다루는 반복적 웹 UI 코딩을 위한 최초의 벤치마크입니다.
2. 확장 가능한 데이터 구축: 역방향 오염 궤적 엔진은 비용이 많이 드는 인간 주석 없이도 결정론적인 복구 궤적을 생성할 수 있게 하여 재현 가능한 그라운드 트루스를 제공합니다.
3. 세밀한 평가: 이중 축 프로토콜은 성공적인 복구와 부수적인 피해를 구분하는 미세한 피드백 신호를 제공하며, 이는 기존의 전역 메트릭에는 없는 기능입니다.
4. 학습을 위한 토대: 벤치마킹을 넘어, 결정론적이고 픽셀에 기반하며 루브릭을 사용하는 메트릭은 강화 학습(RL)을 위한 **검증 가능한 보상 신호(verifiable reward signals)**의 자연스러운 토대를 제공하여, 인간 선호 데이터에 의존하지 않고도 미래의 반복적 UI 코딩 에이전트를 훈련하는 것을 용이하게 할 수 있습니다.

저자들은 현재의 에이전트들이 강력한 시각적 이해력에도 불구하고, 신뢰할 수 있는 장기적(long-horizon) 다중 턴 UI 코딩에 필요한 일관성과 미세한 정렬 능력이 부족하다고 결론지으며, 향-후 연구를 위한 명확한 방향을 제시했습니다.