WebCompass: 코드 언어 모델을 위한 다중 모드 웹 코딩 평가 방법론

WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models

대규모 언어 모델은 엔드-투-엔드 웹 코딩 기능을 갖춘 대화형 코딩 에이전트로 빠르게 발전하고 있지만, 기존의 벤치마크는 이러한 기능의 일부만을 평가합니다. 일반적으로 텍스트 기반 생성에 대한 정적 정확성 지표를 사용하며, 시각적 충실도, 상호 작용 품질, 코드베이스 수준의 추론은 거의 측정하지 못합니다. 본 논문에서는 웹 엔지니어링 능력을 종합적으로 평가할 수 있는 다중 모드 벤치마크인 WebCompass를 소개합니다. 실제 웹 코딩은 생성, 편집, 수정의 반복적인 과정이라는 점을 고려하여, WebCompass는 세 가지 입력 모드(텍스트, 이미지, 비디오)와 세 가지 작업 유형(생성, 편집, 수정)을 포함하여, 전문적인 워크플로우를 반영하는 7가지 작업 범주를 제공합니다. 다단계, 인간 개입형 파이프라인을 통해 15가지 생성 도메인, 16가지 편집 작업 유형, 11가지 수정 결함 유형을 포함하는 데이터셋을 구축하고, 각 데이터셋은 쉬움/보통/어려움 수준으로 주석이 달려 있습니다. 평가를 위해 편집 및 수정 작업에는 체크리스트 기반의 LLM-as-a-Judge 프로토콜을 사용하고, 생성 작업에는 모델이 생성한 웹사이트를 실제 브라우저에서 실행하고, Model Context Protocol (MCP)를 통해 상호 작용 동작을 탐색하며, 반복적으로 목표 테스트 케이스를 생성하는 새로운 Agent-as-a-Judge 패러다임을 제안하여, 인간의 수용 테스트를 보다 정확하게 모사합니다. 닫힌 소스 및 공개 소스 모델을 평가한 결과, (1) 닫힌 소스 모델이 여전히 전반적으로 더 강력하고 균형 잡힌 성능을 보이며, (2) 편집 및 수정 작업은 서로 다른 난이도 프로필을 가지며, 수정 작업은 상호 작용성을 더 잘 유지하지만 실행 측면에서 여전히 어려움을 나타냅니다. (3) 특히 공개 소스 모델에서 미적인 측면이 가장 큰 걸림돌이며, (4) 프레임워크 선택이 결과에 상당한 영향을 미치며, Vue는 지속적으로 높은 난이도를 보이는 반면, React 및 Vanilla/HTML은 작업 유형에 따라 더 나은 성능을 보이는 것을 확인했습니다.

Large language models are rapidly evolving into interactive coding agents capable of end-to-end web coding, yet existing benchmarks evaluate only narrow slices of this capability, typically text-conditioned generation with static-correctness metrics, leaving visual fidelity, interaction quality, and codebase-level reasoning largely unmeasured. We introduce WebCompass, a multimodal benchmark that provides unified lifecycle evaluation of web engineering capability. Recognizing that real-world web coding is an iterative cycle of generation, editing, and repair, WebCompass spans three input modalities (text, image, video) and three task types (generation, editing, repair), yielding seven task categories that mirror professional workflows. Through a multi-stage, human-in-the-loop pipeline, we curate instances covering 15 generation domains, 16 editing operation types, and 11 repair defect types, each annotated at Easy/Medium/Hard levels. For evaluation, we adopt a checklist-guided LLM-as-a-Judge protocol for editing and repair, and propose a novel Agent-as-a-Judge paradigm for generation that autonomously executes generated websites in a real browser, explores interactive behaviors via the Model Context Protocol (MCP), and iteratively synthesizes targeted test cases, closely approximating human acceptance testing. We evaluate representative closed-source and open-source models and observe that: (1) closed-source models remain substantially stronger and more balanced; (2) editing and repair exhibit distinct difficulty profiles, with repair preserving interactivity better but remaining execution-challenging; (3) aesthetics is the most persistent bottleneck, especially for open-source models; and (4) framework choice materially affects outcomes, with Vue consistently challenging while React and Vanilla/HTML perform more strongly depending on task type.