복잡한 상호작용 웹페이지의 코드 생성을 위한 멀티모달 LLM 벤치마킹

멀티모달 거대 언어 모델 (Multimodal Large Language Models, MLLMs)의 최근 발전은 멀티모달 추론 (Multimodal Reasoning) 및 코드 생성 (Code Generation) 분야에서 놀라운 진보를 이루었으며, 프론트엔드 개발의 새로운 패러다임을 촉진하고 있습니다. 특히, 이러한 모델들은 시각적 디자인을 실행 가능한 코드로 직접 변환할 수 있어 웹 개발의 효율성과 적응성을 크게 향상시킵니다. 현대의 웹 애플리케이션은 동적이고 상호작용적이며, 빈번한 사용자-페이지 상호작용 (User-page Interactions)을 특징으로 합니다. 그러나 기존의 벤치마크 (Benchmarks)들은 주로 정적 웹페이지의 코드 생성을 평가하며, 실제 애플리케이션에서의 복잡한 상호작용 동작을 간과하고 있습니다. 게다가, 기존의 평가 기준은 시각적 충실도 (Visual Fidelity)와 코드 구조에 국한되어 있어, 생성된 웹페이지와 참조 웹페이지 사이의 상호작용 일관성 (Interaction Consistency)을 놓치고 있습니다. 이러한 한계를 해결하기 위해, 우리는 복잡한 상호작용을 가진 상호작용형 웹페이지의 코드 생성을 평가하기 위해 설계된 최초의 벤치마크인 WebIGBench를 소개합니다. 수동으로 설계된 상호작용 경로 (Interaction Paths)와 UI 자동화 (UI Automation)를 결합하여, 우리는 실제 웹사이트로부터 103개의 복잡한 웹페이지를 수집했습니다. 이 벤치마크는 871개의 고유한 상호작용 동작을 포함하는 5가지 대중적인 상호작용 액션 유형 (예: 클릭 (Click), 입력 (Input))을 다룹니다. 또한, 우리는 상호작용 동작의 자동 평가 격차를 해소하기 위한 새로운 평가 파이프라인 (Evaluation Pipeline)을 제안합니다. 여러 대표적인 MLLMs에 대한 광범위한 실험을 통해, WebIGBench를 사용한 상호작용형 웹페이지 코드 생성에서 현재 모델들의 성능 경계를 밝혀냅니다. 제안된 벤치마크는 https://github.com/anoa12159-hue/WebIGBench_eval 에서 확인할 수 있습니다.