WebCompass: 코드 언어 모델을 위한 멀티모달 웹 코딩 평가를 향하여

기존의 코드 벤치마크가 단순한 알고리즘 정확도에만 집중했던 것과 달리, 실제 웹 개발에서 중요한 시각적 충실도와 상호작용성을 평가할 수 있는 통합 프레임워크를 제시한다. 텍스트뿐만 아니라 이미지와 비디오 입력을 모두 지원하여 실제 개발자의 워크플로우와 유사한 환경에서 모델의 성능을 정밀하게 측정한다.

기존의 코드 평가 방식은 주로 정적인 텍스트 기반의 유닛 테스트에 의존해왔다. 하지만 웹 개발은 화면에 그려지는 시각적 요소와 사용자의 클릭에 반응하는 동적 동작이 핵심이며, 이는 단순한 코드 매칭으로는 확인하기 어렵다. 특히 Transformer 기반 모델들이 코드를 잘 생성하더라도 실제 브라우저 환경에서 레이아웃이 깨지거나 버튼이 작동하지 않는 경우가 빈번하다.

WebCompass는 이러한 한계를 극복하기 위해 '실행 기반의 동적 평가'를 핵심 원리로 삼는다. 모델이 생성한 코드를 실제 Headless Chromium 브라우저에 렌더링하고, 에이전트가 직접 웹사이트의 DOM 구조를 탐색하며 자바스크립트 테스트 케이스를 실행한다. 이는 정적 분석으로는 놓치기 쉬운 런타임 오류와 시각적 결함을 포착하게 해준다.

결과적으로 모델의 성능을 단순한 Pass@k 수치가 아닌, 실제 사용자가 체감하는 시각적 완성도와 기능적 무결성이라는 다차원적인 관점에서 측정할 수 있게 된다. 이는 LLM이 단순한 코드 보조 도구를 넘어 자율적인 웹 엔지니어링 에이전트로 진화하는 데 필요한 엄격한 기준점을 제공한다.

WebCompass는 생성(Generation), 편집(Editing), 수정(Repair)의 세 가지 핵심 작업군으로 구성된다. 생성 작업은 텍스트 설명, 스크린샷 이미지, 또는 조작 영상으로부터 전체 웹 저장소를 구축하는 것을 목표로 한다. 편집과 수정 작업은 기존 코드베이스와 지침을 입력받아 특정 기능을 추가하거나 레이아웃 오류, 상호작용 불능 등의 결함을 해결하는 패치(Patch)를 생성하도록 요구한다.

평가 시스템은 작업의 특성에 따라 이원화된다. 편집과 수정 작업은 체크리스트 기반의 'LLM-as-a-Judge' 방식을 사용한다. 모델이 생성한 패치를 적용한 후 전후 스크린샷과 빌드 로그를 비교하여 지침 준수 여부와 스타일 일관성을 평가한다. 이때 [패치 적용 전후의 DOM 상태와 시각적 차이값을 입력으로] → [사전에 정의된 10점 척도의 체크리스트 항목별로 점수를 산출하여] → [최종적인 가중 평균 점수를 얻고] → [모델의 수정 능력을 정량화한다].

생성 작업에는 'Agent-as-a-Judge' 시스템이 적용된다. Claude Code와 같은 에이전트가 MCP를 통해 브라우저를 제어하며, [설계 문서의 요구사항을 입력으로] → [브라우저 내 요소 클릭 및 상태 검증 스크립트를 실행해] → [성공 여부를 판단하고] → [실제 배포 가능한 수준의 품질인지를 검증한다]. 이 과정에서 에이전트는 실패한 테스트에 대해 디버깅 루프를 수행하며 모델의 최종 결과물을 정밀하게 채점한다.

실험 결과, 폐쇄형 모델(Closed-source)이 오픈소스 모델보다 압도적으로 우수한 성능을 보였으며, 특히 Claude-Opus-4.5와 Gemini-3-Pro-Preview가 각각 종합 점수 67.40점과 66.68점으로 선두를 차지했다. 오픈소스 모델 중 가장 우수한 Qwen3-VL-235B-Instruct는 41.14점에 그쳐 약 25점 이상의 큰 격차를 보였다.

작업 유형별 분석에서는 모든 모델이 '시각적 품질(Design Quality)'에서 가장 낮은 점수를 기록하며 미적 완성도가 여전히 LLM의 주요 병목 구간임을 입증했다. 특히 오픈소스 모델은 복잡한 컨텍스트 내에서의 코드 수정(Editing) 작업에서 18~28점 수준의 매우 낮은 점수를 기록하여 문맥 인식 코드 수정 능력이 현저히 떨어지는 것으로 나타났다.

프레임워크별로는 Vanilla HTML/JS 환경에서 가장 높은 성능을 보였으나, React나 Vue와 같은 현대적인 프레임워크로 갈수록 성능이 저하되었다. 특히 Vue의 경우 단일 파일 컴포넌트(SFC) 구조 내에서 마크업, 로직, 스타일을 동시에 관리해야 하는 복잡성 때문에 모든 모델에서 가장 낮은 점수를 기록하는 경향을 보였다.

WebCompass는 웹 엔지니어링의 복잡성을 반영하기 위해 다차원 평가 지표를 도입했다. 생성 작업은 실행 가능성(RUN), 명세 구현도(SPI), 디자인 품질(DSQ)을 측정하며, 편집 작업은 지침 타겟팅(ITG), 기능 무결성(FTI), 스타일 적합성(STC)을 평가한다. 수정 작업은 근본 원인 타겟팅(RCT), 상호작용 무결성(ITI), 참조 충실도(RFF)를 기준으로 삼는다.

특히 'Agent-as-a-Judge' 아키텍처는 Model Context Protocol(MCP)을 활용하여 에이전트가 브라우저의 DOM 상태와 CSS 속성을 직접 검사할 수 있게 설계되었다. 이는 단순한 픽셀 비교의 한계를 넘어, 실제 웹 요소의 기능적 상태를 프로그래밍 방식으로 검증할 수 있게 한다. 또한 평가의 편향을 방지하기 위해 체크리스트 불변성, 선택자 전용 적응(Selector-only adaptation), 하드 에비던스(Hard-evidence) 기반 채점이라는 세 가지 보호 장치를 적용했다.

데이터 구축 과정에서는 인간 참여형(Human-in-the-loop) 파이프라인을 통해 200개 이상의 실제 GitHub 이슈와 V0 커뮤니티 제출물을 분석하여 11가지 빈번한 프론트엔드 안티 패턴을 도출했다. 이를 통해 모델이 실제 개발 환경에서 마주칠 법한 현실적인 버그와 요구사항을 반영하도록 보장했다.

현재 WebCompass는 프론트엔드 개발(HTML, CSS, JS)에 집중하고 있어 데이터베이스 설계나 서버 사이드 로직과 같은 백엔드 역량은 평가하지 않는다. 또한 매우 동적인 웹페이지(브라우저 게임 등)의 실시간 상태 변화를 완벽하게 추적하는 데는 여전히 기술적 한계가 존재하며, 에이전트 기반 평가 방식의 높은 계산 비용도 제약 사항으로 언급되었다.