MM-WebAgent: 웹페이지 생성을 위한 계층적 멀티모달 웹 에이전트

기존의 AI 기반 웹페이지 생성 도구들은 텍스트와 코드는 잘 다루지만 이미지, 비디오, 차트와 같은 멀티모달 요소를 전체 디자인 맥락에 맞춰 통합하는 데 한계가 있었다. 이 논문은 계층적 계획과 반복적인 자기 반성 메커니즘을 통해 시각적으로 일관되고 구조적으로 완성도 높은 웹페이지를 생성하는 에이전트 프레임워크를 제시하여 UI/UX 자동화의 수준을 높였다.

기존의 웹페이지 생성 모델은 주로 HTML/CSS 코드를 한 번에 생성(One-shot)하거나, 이미지와 같은 시각적 요소를 단순한 자리 표시자(Placeholder)로 처리한 뒤 나중에 채워 넣는 방식을 사용했다. 이로 인해 전체적인 디자인 스타일이 어긋나거나 생성된 이미지의 크기가 레이아웃과 맞지 않는 등 시각적 불일치 문제가 발생했다. 이는 딥러닝 모델이 전체 구조와 세부 요소 간의 상호 의존성을 한 번의 연산으로 완벽히 파악하기 어렵기 때문이다.

MM-WebAgent는 인간 디자이너의 작업 방식을 모방하여 이 문제를 해결한다. 먼저 전체적인 레이아웃의 뼈대를 잡는 '글로벌 계획'을 세우고, 각 섹션에 들어갈 이미지나 차트의 역할을 정의하는 '로컬 계획'을 수립한다. 이는 고차원적인 디자인 의도를 저차원적인 실행 단계로 구체화하는 과정이다. 이후 각 요소가 생성되면 다시 전체 맥락에 비추어 어색한 부분을 찾아내고 수정하는 '자기 반성(Self-reflection)' 과정을 거친다.

결과적으로 이 시스템은 단순한 코드 생성을 넘어 시각적 자산과 레이아웃이 유기적으로 결합된 결과물을 만들어낸다. 이는 모델이 생성한 HTML 코드뿐만 아니라 실제 렌더링된 스크린샷을 피드백으로 활용함으로써, 픽셀 단위의 시각적 정렬과 미적 일관성을 동시에 확보할 수 있게 한다.

MM-WebAgent의 방법론은 크게 계층적 계획 및 생성과 계층적 자기 반성으로 나뉜다. 계획 단계에서는 GPT-5.1을 활용하여 전체 웹페이지의 섹션 계층, 공간 구성, 페이지 수준의 스타일 속성을 정의하는 글로벌 레이아웃 플랜을 먼저 생성한다. 이후 이 글로벌 컨텍스트를 바탕으로 각 멀티모달 구성 요소에 대한 로컬 요소 플랜을 수립하며, 여기에는 요소의 기능적 역할, 주변 컨텍스트, 예상 크기 및 종횡비 제약 조건이 포함된다.

생성 단계에서는 각 로컬 플랜에 따라 지정된 생성 도구(이미지용 GPT-Image-1, 비디오용 Sora-2, 차트용 ECharts 기반 HTML 생성기 등)가 호출된다. 이때 로컬 플랜에 명시된 메타 속성(Visual style, Color tone 등)이 입력값으로 제공되어 병렬적으로 생성되면서도 전체 디자인 의도와 정렬되도록 한다.

자기 반성 단계는 세 가지 수준에서 반복된다. 1) Local Refine은 개별 자산의 시각적/의미적 오류를 수정한다. 2) Context Refine은 HTML/CSS 조각을 분석하여 요소 간의 오정렬, 겹침, 간격 문제를 해결하는 CSS 패치를 생성한다. 3) Global Refine은 렌더링된 전체 스크린샷을 참조하여 레이아웃 균형과 스타일 일관성을 최종 조정한다. 이러한 반복 과정은 최대 3회 또는 수렴할 때까지 진행된다.

MM-WebGEN-Bench 실험 결과, MM-WebAgent는 평균 점수 0.75를 기록하며 코드 전용 생성 방식(0.42) 및 코드 전용 에이전트 방식(0.46)을 크게 앞질렀다. 특히 이미지(0.88), 비디오(0.75), 차트(0.54)와 같은 로컬 멀티모달 요소의 품질과 통합 측면에서 압도적인 성능 향상을 보였다. 이는 에이전트 루프 내에서 멀티모달 콘텐츠 생성을 일급 시민(First-class action)으로 취급한 결과이다.

Ablation Study를 통해 계층적 계획이 없을 경우 성능이 0.42로 급락함을 확인하여 구조적 조정의 중요성을 입증했다. 또한 자기 반성 과정에서 1회차 수정 시 가장 큰 폭의 품질 향상이 일어났으며, 3회차까지 점진적으로 점수가 상승하는 경향을 보였다. 사용자 평가에서도 MM-WebAgent가 생성한 페이지가 기존 베이스라인 대비 78.99%의 승률을 기록하며 실제 인간의 선호도와도 일치함을 증명했다.

MM-WebAgent의 핵심 기술적 차별점은 '디자인 추상화 기반의 계층 구조'이다. 기존 에이전트들이 코드의 논리적 구조나 작업 순서에 집중한 것과 달리, 본 연구는 디자인의 위계(Global Layout -> Local Asset -> Contextual Integration)를 에이전트의 계획 단계에 직접 이식했다. 글로벌 레이아웃 에이전트는 레이아웃 구조를 JSON 형태로 출력하며, 이는 후속 로컬 에이전트들의 제약 조건(Constraint)으로 작용한다.

수학적 평가 모델로는 페널티 기반 스코어링 시스템을 도입했다. 레이아웃 정확도와 스타일 일관성을 측정하기 위해 미리 정의된 위반 규칙(Missing element, Misplaced critical element 등)에 따라 감점(Penalty)을 부여한다. 최종 점수는 score = max(0, 1 - α * Σ p_i)로 계산되며, 여기서 α는 정규화 계수, p_i는 각 이슈의 심각도에 따른 페널티 값이다. 미적 품질과 같은 주관적 요소는 0.2 단위의 Graded scoring scheme을 사용하여 정량화했다.

구현 측면에서 에이전트는 GPT-5.1을 백본으로 사용하며, 이미지 편집을 위한 Inpainting 기술과 차트 생성을 위한 ECharts 라이브러리를 도구로 활용한다. 특히 Context Refine 단계에서는 전체 코드를 수정하는 대신 특정 영역의 CSS만 수정하는 'Targeted structural edits' 방식을 채택하여 연산 효율성과 안정성을 동시에 확보했다.

이 접근 방식은 외부 AIGC 도구(이미지/비디오 생성기 등)에 의존하므로 해당 도구의 성능 한계나 안전 필터링, 가용성 변화에 민감하다. 또한 현재 프레임워크는 고정된 도구 세트와 호출 패턴을 가정하고 있어 동적인 도구 선택의 유연성이 부족하다. 학습 기반의 에이전트 최적화가 아닌 오케스트레이션 기반의 설계이므로 장기적인 상호작용을 통한 에이전트 행동의 자가 최적화 기능은 포함되어 있지 않다.