Vision2Web: A Hierarchical Benchmark for Visual Website Development with Agent Verification

이 논문은 대규모 언어 모델 기반 코딩 에이전트의 웹사이트 개발 능력을 평가하기 위해 실제 웹사이트 기반의 계층적 벤치마크 'Vision2Web'과 GUI 에이전트 검증자 및 VLM 기반 심사자를 활용한 검증 체계를 제안합니다.

핵심

1. 왜 이 논문이 필요할까요? (문제점)

지금까지의 AI 코딩 테스트는 마치 **"벽돌 하나를 잘못 쌓았을 때 고치는 능력"**만 평가하는 것과 비슷했습니다. 하지만 현실에서는 건물을 처음부터 설계하고, 벽을 쌓고, 전기 배선을 하고, 인테리어까지 다 해야 합니다.

기존 테스트들은 다음과 같은 한계가 있었습니다:

• 너무 단순함: 복잡한 건물을 통째로 짓는 능력을 보지 못함.
• 눈이 없는 테스트: AI 가 그림 (디자인) 을 보고 코드를 짜는 능력은 제대로 평가하지 못함.
• 검증 부족: AI 가 만든 건물이 실제로 작동하는지, 디자인과 같은지 확인하는 방법이 불완전함.

2. Vision2Web 은 무엇인가요? (해결책)

이 연구팀은 세 단계로 난이도가 올라가는 건축 시험을 만들었습니다.

• 1 단계 (정적 웹페이지): "이 그림 (디자인) 을 보고 똑같은 2D 도면을 그려줘."
  • 비유: 건축 도면을 보고 벽과 창문 위치만 정확히 그리는 것.
• 2 단계 (인터랙티브 프론트엔드): "이 그림 여러 장을 보고, 버튼을 누르면 다른 페이지로 넘어가는 움직이는 집을 만들어줘."
  • 비유: 문이 열리고, 계단이 올라가는 등 실제 사람이 들어와서 움직일 수 있는 집을 짓는 것.
• 3 단계 (풀스택 웹사이트): "이 요구사항서와 그림을 보고, 데이터도 저장되고 로그인도 되는 완전한 건물을 지어줘."
  • 비유: 전기, 수도, 보안 시스템까지 다 포함된 완공된 건물을 짓는 것.

3. 어떻게 시험을 치나요? (검증 방법)

AI 가 만든 웹사이트를 평가할 때, 사람이 일일이 다 확인하면 시간이 너무 걸립니다. 그래서 연구팀은 **두 명의 'AI 감시관'**을 고용했습니다.

1. GUI 에이전트 (실무 감시관):
   • 이 감시관은 AI 가 만든 웹사이트에 직접 들어가서 "로그인해봐", "장바구니에 담으세요" 같은 행동을 실제로 해봅니다.
   • 비유: 건물을 직접 걸어 다니며 "문이 잘 열리는지, 전등이 켜지는지" 확인하는 시공 감리원.
2. VLM 판정관 (디자인 감시관):
   • 이 감시관은 AI 가 만든 결과물과 원래 디자인 그림을 비교합니다. "색상이 같은가?", "배치가 같은가?"를 점수로 매깁니다.
   • 비유: 원래 설계도와 실제 건물을 비교하며 "이 벽이 너무 기울었네"라고 지적하는 건축 디자이너.

이 두 감시관이 협력하여 AI 가 만든 웹사이트를 기능적 정확성과 디자인 충실도 두 가지로 꼼꼼하게 채점합니다.

4. 실험 결과는 어땠나요? (현실적인 결론)

최고 수준의 최신 AI 모델들 (Claude, GPT-5, Gemini 등) 을 이 시험에 풀어봤습니다. 결과는 아주 흥미롭고 놀라웠습니다.

• 난이도가 오르면 실력이 뚝 떨어집니다:
  • 단순한 그림을 코드로 바꾸는 1 단계에서는 꽤 잘했습니다. (점수 50~60 점대)
  • 하지만 건물을 통째로 짓는 3 단계 (풀스택) 로 가면 대부분의 AI 가 완전히 무너졌습니다. (점수 10~20 점대, 심지어 0 점인 모델도 있음)
• 작은 화면일수록 힘들어합니다:
  • 컴퓨터 화면 (데스크톱) 에서는 잘 만들지만, 태블릿이나 스마트폰 화면으로 만들라고 하면 디자인이 깨지는 경우가 많았습니다.
• 가장 잘한 모델:
  • 'Claude-Opus-4.5'가 가장 잘했지만, 그래도 완벽한 건물을 짓는 데는 여전히 한계가 있었습니다.

5. 핵심 교훈 (결론)

이 논문의 가장 중요한 메시지는 **"AI 가 작은 문제를 해결하는 능력과, 복잡한 시스템을 처음부터 끝까지 만드는 능력은 완전히 다르다"**는 것입니다.

지금의 AI 는 **재능 있는 '도배공'**은 될 수 있지만, 아직 **완벽한 '건축주'**가 되지는 못했습니다. 복잡한 설계도 (디자인) 를 보고, 여러 단계로 나누어 작업을 조율하며, 실수가 생기면 스스로 고쳐 나가는 능력은 여전히 인간이 필요하다는 뜻입니다.

한 줄 요약:

"AI 가 그림을 보고 코드를 짜는 능력은 꽤 좋지만, 복잡한 웹사이트를 처음부터 끝까지 혼자서 완벽하게 짓는 능력은 아직 '인간'이 훨씬 낫습니다. 이 연구는 그 격차를 정확히 측정하는 새로운 자를 만들었습니다."

기술 요약

1. 문제 제기 (Problem Statement)

최근 대규모 언어 모델 (LLM) 의 발전으로 코딩 에이전트 (Coding Agents) 의 능력이 향상되었으나, 복잡하고 종단간 (End-to-End) 인 웹사이트 개발을 체계적으로 평가하는 데는 여전히 한계가 존재합니다. 기존 벤치마크의 주요 문제점은 다음과 같습니다.

• 제한된 작업 정의: SWE-Bench 등 기존 벤치마크는 주로 기존 코드의 수정 (Issue fixing) 에 초점을 맞추어, 전체적인 소프트웨어 공학 능력이나 종단간 개발 능력을 평가하지 못합니다.
• 불일치하는 멀티모달 커버리지: 최근 텍스트 기반 벤치마크는 종단간 개발을 다루기 시작했으나, 멀티모달 벤치마크는 여전히 정적 UI-to-Code 생성 (Design2Code 등) 에 국한되어 있어, 상호작용이 포함된 동적 웹사이트 개발을 평가하지 못합니다.
• 불충분한 검증 메커니즘: 복잡한 상호작용과 장기적 (Long-horizon) 시스템 결과를 신뢰성 있게 재현 가능하게 평가하는 검증 절차가 부족합니다.

2. 방법론 (Methodology)

이 논문은 이러한 격차를 해소하기 위해 Vision2Web을 제안합니다. 이는 시각적 웹사이트 개발을 위한 계층적 벤치마크이자 에이전트 검증 패러다임입니다.

2.1. 계층적 작업 설계 (Hierarchical Task Design)

비주얼 웹사이트 개발의 능력을 단계별로 분리하여 평가하기 위해 3 단계의 계층적 구조를 도입했습니다.

1. Level 1: 정적 웹페이지 (Static Webpage): UI 프로토타입 이미지를 기반으로 데스크탑, 태블릿, 모바일 등 다양한 해상도에 대응하는 정적 HTML/CSS 코드를 생성하는 능력 평가.
2. Level 2: 인터랙티브 프론트엔드 (Interactive Frontend): 여러 페이지 간의 논리적 관계와 텍스트 설명을 바탕으로, 구조적 일관성과 네비게이션 흐름을 유지하는 다중 페이지 인터랙티브 프론트엔드 생성 평가.
3. Level 3: 풀스택 웹사이트 (Full-Stack Website): 요구사항 문서와 프로토타입을 기반으로 복잡한 애플리케이션 상태 관리, 통합 디버깅, 백엔드 연동 등을 포함한 완전한 풀스택 시스템 구축 능력 평가.

2.2. 데이터셋 구축 (Dataset Construction)

• 출처: C4 데이터셋의 검증 세트를 기반으로 하여, 인기 있는 웹사이트로부터의 데이터 유출 (Leakage) 을 방지했습니다.
• 필터링 파이프라인:
  1. 구조적 평가: DOM 트리 깊이, 토큰 길이 등을 분석하여 단순하거나 구조가 손상된 페이지 제거.
  2. 콘텐츠 스크리닝: VLM 기반 점수 매기기를 통해 기능적 풍부함과 시각적 일관성을 갖춘 페이지 선별.
  3. 수동 검토: 전문가에 의한 품질 검증 및 카테고리 균형 확보.
• 통계: 총 193 개의 작업, 16 개의 하위 카테고리, 918 개의 프로토타입 이미지, 1,255 개의 테스트 케이스로 구성됨.

2.3. 워크플로우 기반 에이전트 검증 (Workflow-Based Agent Verification)

종단간 평가의 신뢰성을 높이기 위해 두 가지 상보적 구성 요소를 결합한 검증 패러다임을 도입했습니다.

• GUI 에이전트 검증자 (Functional Verification): 전문가가 설계한 테스트 워크플로우에 따라 에이전트가 실행됩니다. 기능적 정확도 (Functional Score, FS) 를 측정하며, 에이전트가 불필요한 모듈을 탐색하거나 우회하지 않도록 행동 (Action) 을 제한하는 가이드를 제공합니다.
• VLM 기반 심판자 (Visual Verification): 렌더링된 페이지와 원본 프로토타입을 비교하여 시각적 충실도 (Visual Score, VS) 를 측정합니다. VLM 이 컴포넌트 단위로 일관성을 평가합니다.
• 워크플로우 설계: 의존성 그래프를 기반으로 테스트 노드를 분해하거나 통합하여, 오류 누적 방지와 재현 가능성을 보장합니다.

3. 주요 기여 (Key Contributions)

1. 계층적 작업 설계: 시각적 웹사이트 개발의 각 단계 (정적, 인터랙티브, 풀스택) 에서 에이전트의 능력을 체계적으로 분리하고 평가할 수 있는 프레임워크 제공.
2. 현실적인 멀티모달 데이터: 실제 웹사이트 기반의 대규모 데이터셋으로, 명시적인 요구사항과 멀티모달 제약 조건 하에서의 평가 가능.
3. 워크플로우 기반 에이전트 검증: 구조화된 워크플로우와 에이전트 실행을 결합하여 기능적 정확도와 시각적 충실도를 모두 재현 가능하게 평가하는 새로운 패러다임 제시.

4. 실험 결과 (Results)

최첨단 멀티모달 모델 (Claude-Opus-4.5, GPT-5, Gemini-3-Pro 등) 을 OpenHands 와 Claude Code 프레임워크에서 평가한 결과입니다.

• 작업 복잡도 증가에 따른 성능 저하: 모든 에이전트가 정적 웹페이지에서는 상대적으로 좋은 성능을 보였으나, 인터랙티브 프론트엔드와 풀스택 단계로 갈수록 성능이 급격히 하락했습니다. (예: Gemini-3-Pro-Preview 는 정적 웹페이지에서 50 점대였으나 풀스택에서는 10 점대 수준으로 떨어짐)
• 기기 및 시각적 복잡성: 데스크탑보다 태블릿/모바일 환경에서, 그리고 복잡한 프로토타입 이미지일수록 성능이 저하되었습니다.
• 모델별 차이: Claude-Opus-4.5가 모든 프레임워크와 작업 수준에서 가장 우수한 성능을 보였으나, 여전히 풀스택 개발에서는 한계를 드러냈습니다. 반면, Qwen3-VL 모델은 풀스택 작업에서 거의 0 점에 가까운 성능을 보였습니다.
• 카테고리별 차이: 공공 서비스 (Public Service) 웹사이트는 상대적으로 잘 수행했으나, 복잡한 상호작용이 필요한 SaaS 플랫폼은 가장 낮은 점수를 기록했습니다.
• 실패 모드 분석:
  • 세부 시각적 정렬 실패: 레이아웃, 색상, 자산 (Asset) 매칭 오류.
  • 크로스 모듈 이해 실패: 여러 페이지 간 시각적/기능적 일관성 유지 실패.
  • 시스템 수준의 계획 실패: 장기적 계획 부족으로 인한 기능 구현의 편차 (Drift) 및 실행 오류.

5. 의의 및 결론 (Significance & Conclusion)

• 현실적인 평가 기준: 기존 벤치마크가 놓치고 있던 '시각적 이해'와 '종단간 시스템 구축' 능력을 통합적으로 평가할 수 있는 표준을 제시했습니다.
• 연구 방향 제시: 현재 최첨단 모델조차도 복잡한 구조, 페이지 간 조율, 상태 유지 (State Reasoning) 에서 심각한 결함을 가지고 있음을 보여주었습니다. 이는 향후 에이전트 연구가 단순한 코드 생성을 넘어, 계층적이고 점진적으로 어려운 과제를 해결할 수 있는 장기적 계획 및 검증 능력을 강화해야 함을 시사합니다.
• 신뢰성 있는 평가 체계: 워크플로우 기반의 자동화된 검증 시스템은 향후 에이전트 성능 평가의 재현 가능성과 객관성을 높이는 데 기여할 것입니다.

요약하자면, Vision2Web은 AI 코딩 에이전트가 단순한 코드 조각 생성을 넘어, 실제 복잡한 웹사이트를 시각적 설계도대로 완벽하게 구축할 수 있는 능력을 평가하기 위한 가장 포괄적이고 엄격한 벤치마크 중 하나로 자리 잡았습니다.