🤖 AI

LongWebBench: Evaluating Structural and Functional Webpage Generation in Long-Horizon Settings

이 논문은 시각-언어 모델의 장기 웹페이지 생성에 있어 구조적 충실도와 기능적 실행 가능성을 평가하기 위해 설계된 종합적인 벤치마크인 LongWebBench를 소개하며, 현재의 최첨단 시스템들이 시각적 그럴듯함에도 불구하고 장거리 일관성과 상호작용 능력 측면에서 어려움을 겪고 있음을 밝힌다.

원저자: Yi Zhao, Zhen Yang, Mengpan Chen, Mingde Xu, Shanghui Gong, Xijun Liu, Jibing Gong, Jie Tang

게시일 2026-06-17

📖 2 분 읽기☕ 가벼운 읽기

CC BY 4.0

원저자: Yi Zhao, Zhen Yang, Mengpan Chen, Mingde Xu, Shanghui Gong, Xijun Liu, Jibing Gong, Jie Tang

원본 논문은 CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/) 라이선스로 제공됩니다. ✨ 이것은 아래 논문에 대한 AI 생성 설명입니다. 저자가 작성하거나 승인한 것이 아닙니다. 기술적 정확성을 위해서는 원본 논문을 참조하세요. 전체 면책 조항 읽기

당신이 단 한 장의 거대한 저택 사진을 바탕으로 집을 지을 유능한 건축가를 고용한다고 상상해 보십시오.

문제점:
지금까지 AI "건축가"(비전-언어 모델이라고 불리는 것)를 위한 대부분의 테스트는 그들에게 아주 작은 단층 오두막을 짓도록 요구했을 뿐입니다. 그 테스트들은 정문이 제대로 생겼는지, 혹은 페인트 색상이 일치하는지 등을 확인했습니다. 하지만 실제 웹사이트는 수십 개의 방과 여러 층, 그리고 복잡한 배선이 있는 거대한 저택과 같습니다. 만약 당신이 AI에게 사진 한 장을 보고 저택 전체를 지으라고 요청한다면, AI는 정문은 제대로 만들지 몰라도 계단을 2층과 어떻게 연결할지 잊어버리거나, 주방은 진짜처럼 보이게 만들지만 작동하는 싱크대는 없는 상태로 만들 수도 있습니다.

해결책: LongWebBench
저자들은 이보다 더 강력한 새로운 테스트인 LongWebBench를 만들었습니다. 이 테스트는 단순히 집이 사진과 똑같이 생겼는지만 확인하는 것이 아니라, 다음 두 가지를 확인합니다:

설계도 (구조): 건물 전체가 말이 되는가? 방들이 올바른 순서로 배치되어 있는가? 지붕이 벽에 잘 연결되어 있는가?
배관 및 전기 (기능): 수도꼭지를 틀면 물이 나오는가? 전등 스위치를 올리면 불이 들어오는가?

테스트 구축 방법:
그들은 두 가지 거대한 실제 "저택 사진"(긴 웹페이지) 컬렉션을 수집했습니다:

490개의 "닮은꼴 만들기" 테스트: 매우 긴 웹사이트(어떤 것은 바닥까지 보려면 30번은 스크롤해야 할 정도로 깁니다)의 사진들을 가져왔습니다. 그리고 AI 모델에게 이 페이지들의 코드를 재현하도록 요청했습니다. 이 테스트는 AI가 페이지의 맨 위부터 맨 아래까지 레이아웃을 일관되게 유지할 수 있는지 확인했습니다.
507개의 "실행하기" 테스트: 129개의 웹사이트를 선정하여 AI에게 "도쿄행 항공편 찾기", "장바구니에 아이템 추가하기", 또는 "검색 결과 필터링하기"와 같은 구체적인 작업을 주었습니다. AI는 단순히 하는 척하는 것이 아니라, 실제 웹 브라우저에서 이러한 일들을 실제로 수행할 수 있는 코드를 작성해야 했습니다.

결과: "현실과의 간극"
연구진이 이 새로운 테스트를 통해 최고의 AI 모델들을 실행했을 때, 놀라운 사실들을 발견했습니다:

"롱 스크롤" 문제: 웹사이트가 길어질수록, 구조를 올바르게 유지하는 AI의 능력이 떨어졌습니다. 이는 마치 1층은 완벽하게 설계하지만 2층을 어떻게 연결해야 할지는 잊어버리는 건축가와 같습니다.
"가짜 집" 문제: 많은 AI가 아름답고 사실적인 웹사이트(마치 영화 세트장처럼)를 만들었지만, 버튼을 클릭하거나 양식을 채우려고 하면 아무 일도 일어나지 않았습니다. 즉, "배관"이 고장 난 상태였습니다.
입력의 문제: 연구진이 AI가 더 쉽게 볼 수 있도록 긴 사진을 더 작은 조각들로 나누어 주었음에도 불구하고, AI는 여전히 그 조각들을 하나의 작동하는 전체로 합치는 데 어려움을 겪었습니다.

시사점
이 논문은 우리가 단순히 AI가 얼마나 예쁜 그림을 그리는지로 판단해서는 안 된다고 결론짓습니다. 진정으로 유용해지기 위해서, AI는 상호작용할 때 실제로 작동하는 길고 복잡한 웹사이트를 구축할 수 있어야 합니다. LongWebBench는 우리가 사용하는 새로운 척도로서, AI가 그림을 그리는 데는 능숙해지고 있지만, 완전히 기능하는 디지털 집을 짓기까지는 아직 갈 길이 멀다는 것을 보여줍니다.

기술 요약: LongWebBench

문제 정의
최근 시각-언어 모델(VLM)의 발전은 웹페이지 스크린샷과 같은 시각적 입력을 통해 프런트엔드 코드(HTML, CSS, JavaScript)를 생성하는 능력을 입증했습니다. 그러나 기존의 평가 벤치마크는 주로 짧고, 단일 화면이며, 대체로 정적인 웹페이지에 집중되어 있으며, 국소적인 시각적 유사성을 통해 성공 여부를 측정합니다. 이는 실제 웹페이지가 여러 화면에 걸쳐 있고, 반복되는 컴포넌트를 포함하며, 먼 거리의 섹션 간 스타일 일관성을 요구하고, 복잡한 다단계 사용자 상호작용을 지원해야 한다는 점을 고려할 때 심각한 "현실과의 격차(reality gap)"를 발생시킵니다. 현재의 평가 방식은 모델이 긴 컨텍스트 전반에 걸쳐 글로벌 구조를 보존할 수 있는지, 또는 목표 지향적 과업을 위한 실행 가능한 로직을 생성할 수 있는지를 평가하지 못합니다.

방법론
이러한 격차를 해결하기 위해 저자들은 구조적 및 기능적 관점 모두에서 긴 호흡의 웹페이지 생성을 평가하도록 설계된 벤치마크인 LongWebBench를 소개합니다. 이 벤치마크는 두 가지 상호 보완적인 과업으로 구성됩니다.

웹페이지 시각적 충실도 재현 (W-VFR):
- 목표: 모델이 긴 웹페이지의 글로벌 시각적 구조를 재현할 수 있는지 평가합니다.
- 데이터셋: 7가지 구조적 카테고리(예: 정보성 기사, 제품 페이지, 정부 페이지)에 걸친 490개의 실제 롱 웹페이지(1920×1080 해상도 기준 3개 이상의 뷰포트 높이를 초과하는 페이지로 정의)로 구성됩니다.
- 평가 프로토콜: 다차원 VLM 기반 메트릭(GPT-4o 사용)을 통해 생성된 렌더링을 참조 스크린샷과 비교하여 5가지 차원(페이지 스케일/스크롤 일관성, 글로벌 레이아웃, 섹션 계층 구조, 로컬 시각적 스타일링, 정보 밀도)에 대해 0~10점 척도로 점수를 매깁니다. 로컬 스타일링은 DINO 기반 특징 유사성을 통해 더욱 보강됩니다.
- 입력 설정: 해상도 제약과 롱 컨텍스트 추론을 구분하기 위해 단일 이미지(전체 스크린샷)와 멀티 이미지(뷰포트 크기의 타일로 분할) 입력을 모두 지원합니다.
웹페이지 기능적 충실도 실현 (W-FFR):
- 목표: 모델이 특정 사용자 목표를 지원하는 실행 가능한 웹페이지를 생성할 수 있는지 평가합니다.
- 데이터셋: 13가지 기능적 카테고리(예: 이커머스, 여행, 데이터 시각화)를 포괄하는 129개 웹페이지에 분산된 507개의 목표 지향적 상호작용 과업으로 구성됩니다.
- 평가 프로토콜: DOM이 보강된 에이전트 기반 파이프라인이 브라우저 환경에서 생성된 코드를 실행합니다. 컨트롤러가 지정된 행동을 수행하는 "액터(actor)" 에이전트와, 결과적인 DOM 및 페이지 상태가 과업 명세(specification)를 충족하는지 검증하는 "크리틱(critic)" 에이전트(Gemini-3-Pro 기반)를 조정합니다.
- 메트릭: 단계 성공률(SSR), 과업 성공률(TSR), 페이지 성공률(PSR).

주요 기여

벤치마크 구축: 웹페이지 생성에 있어 장거리 구조적 일관성과 실행 가능한 다단계 상호작용을 공동으로 평가하는 최초의 벤치마크인 LongWebBench를 도입했습니다.
데이터셋 구성: 레이아웃, 콘텐츠 밀도 및 상호작용 복잡성의 다양성을 보장하기 위해 구조적 충실도를 위한 490개의 롱 웹페이지와 기능적 검증을 위한 507개의 상호작용 과업을 큐레이션했습니다.
평가 프로토콜: 인간의 일치도 분석 및 교차 판사(cross-judge) 견고성 체크를 통해 검증된, 구조적 충실도를 위한 VLM 기반 메트릭과 기능적 검증을 위한 에이전트 기반 실행 파이프라인이라는 상호 보완적인 프로토콜을 설계했습니다.
경험적 분석: 단일 이미지 및 멀티 이미지 설정 모두에서 최첨단 오픈 소스 및 독점 VLM에 대한 종합적인 평가를 수행했습니다.

실험 결과
GPT-5.2, Gemini-3-Pro, Claude-Opus-4.5 및 다양한 오픈 소스 모델(예: GLM-4.6V, Qwen3-VL)을 대상으로 실시한 실험 결과는 다음과 같습니다.

구조적 충실도: 웹페이지 길이가 길어짐에 따라 성능이 일반적으로 저하됩니다. 멀티 이미지 입력이 해상도 제약을 완화해주기는 하지만, 글로벌 레이아웃 계획 및 섹션 간 통합의 과제를 완전히 해결하지는 못합니다. 가장 성능이 좋은 모델들도 매우 긴 페이지에서는 중간 정도의 구조적 충실도 점수만을 달성했습니다.
기능적 충실도: 실행 가능한 상호작용은 시각적 재구축보다 훨씬 더 어렵습니다. 높은 단계 성공률(SSR)을 보이는 모델들이 종종 훨씬 낮은 과업 성공률(TSR)과 페이지 성공률(PSR)을 보이는데, 이는 다단계 워크플로우에서의 오류 누적을 나타냅니다. 예를 들어, 상위 모델들은 SSR은 86% 이상을 달성했으나 TSR은 약 58~59%에 그쳤으며, PSR은 22% 미만으로 유지되었습니다.
길이 민감도: 구조적 충실도와 기능적 성공률 모두 뷰포트 수(구조의 경우) 또는 상호작용 단계(기능의 경우)가 증가함에 따라 감소하며, 이는 긴 호흡 동안 상태와 로직을 유지하는 것의 어려움을 강조합니다.
평가 신뢰도: 자동 평가 프로토콜은 인간의 판단과 강한 일치성을 보였으며(W-VFR의 경우 Pearson $r = 0.83$ , W-FFR의 경우 일치도 >0.89), 다양한 판사 모델에 대해 높은 견고성을 보였습니다.

의의 및 주장
본 논문은 LongWebBench가 현재 VLM 능력의 결정적인 한계, 즉 구조적으로 일관되면서도 기능적으로 실행 가능한 긴 웹페이지를 생성하는 능력이 부족함을 부각한다고 주장합니다. 저자들은 웹페이지 생성을 정적인 시각적 유사성만으로 평가하는 것은 불충분하다고 주장합니다. 대신, 실행 가능한 상호작용이 핵심 기준으로 다루어져야 합니다. 이 벤치마크는 모델이 시각적으로 그럴듯한 출력을 생성할 수는 있지만, 실제 웹 애플리케이션에서 요구되는 복잡한 다단계 사용자 목표를 지원하는 데는 자주 실패한다는 것을 드러내는 진단 테스트베드 역할을 합니다. 이 연구는 미래의 모델이 장거리 구조적 추론 및 상호작용 로직 합성을 개선해야 할 필요성을 강조합니다.

한계점
저자들은 LongWebBench가 안정화된 렌더링된 프런트엔드에 집중하며, 인증, 개인화, 라이브 백엔드 서비스 및 경계가 없는 무한 스크롤을 제외한다는 점을 언급합니다. 따라서 본 벤치마크는 외부 데이터베이스나 서버 측 로직을 포함하는 배포된 웹 애플리케이션의 전체 복잡성보다는 프런트엔드 구조와 관찰 가능한 동작을 평가합니다.

유사한 논문