시각적 프로토타입 및 요구사항 기반 배포 가능한 웹사이트의 상태 인식 생성

원문 발행 2026. 10. 13. 16:23원문 언어 영어AI 한국어 번역arXiv Codex (cs.SE) 원문 보기

요약

본 논문은 시각적 프로토타입과 텍스트 요구사항을 기반으로 배포 가능한 웹사이트를 생성할 때 발생하는 '프로토타입-투-프로젝트 상태 표류' 문제를 해결하는 VisStateCoder라는 상태 인식 프레임워크를 제안합니다. 이 프레임워크는 프로젝트 상태 그래프를 사용하여 다양한 유형의 상태 노드를 연결하고, 일관성을 유지하며 업데이트 범위를 효과적으로 관리합니다.

핵심 포인트

VisStateCoder는 프로젝트 상태 그래프를 활용하여 일관성 문제를 해결합니다.
프로토타입 접지 및 그래프 기반 생성을 지원하는 상태 인식 프레임워크입니다.
Interactive Frontend 및 Full-Stack Website 작업에서 높은 성능 향상을 보였습니다.
검증된 상태 표류(verified-state drift)를 줄여 프로젝트의 안정성을 높였습니다.

멀티모달 모델을 통해 시각적 프로토타입과 텍스트 요구사항으로부터 배포 가능한 웹사이트를 생성하는 것은 점점 더 가능해지고 있지만, 생성된 프로젝트가 원래의 프로토타입과 일관성을 유지하는 것은 여전히 어려운 과제입니다. 프로토타입은 레이아웃과 시각적 요소를 지정하고, 요구사항은 상호작용 워크플로우와 배포 제약 조건을 설명합니다. 기존의 UI-to-code 방식 및 코딩 에이전트는 종종 레이아웃 재구성, 상호작용 구현, 프로젝트 편집을 개별적으로 다루어, 시각적 요소, 파일, 워크플로우, 의존성, 렌더 증거가 생성, 검증, 업데이트 전반에 걸쳐 대응 관계를 잃게 만듭니다. 우리는 이 문제를 프로토타입-투-프로젝트 상태 표류(prototype-to-project state drift)라고 부릅니다. 본 논문에서는 이러한 대응 관계를 프로젝트 상태 그래프(Project State Graph)에서 유지하는 상태 인식 프레임워크인 VisStateCoder를 제안합니다. 이 그래프는 유형화된 링크를 통해 네 가지 유형의 상태 노드를 연결하며, 프로토타입 접지(prototype grounding), 그래프 기반 생성(graph-guided generation), 그리고 실패한 검사를 영향을 받는 파일에 매핑하고 업데이트 범위 외의 파일을 보존하는 렌더 증거 기반 스코프 업데이트(render-evidence-guided scoped updates)를 지원합니다. 우리는 Static Webpage, Interactive Frontend, Full-Stack Website 작업을 포괄하여 다섯 가지 파운데이션 모델을 사용하여 Vision2Web에서 VisStateCoder를 평가했습니다. 모델 전반에 걸쳐 평균했을 때, VisStateCoder는 각각 Interactive Frontend 및 Full-Stack Website 작업에서 가장 강력한 기준선 대비 전체 점수를 26.1점과 22.6점 향상시켰습니다. 또한, 대체 상태 표현 방식과 비교하여 한 업데이트 라운드에서는 통과하지만 나중에 실패하는 검사로 측정되는 검증된 상태 표류(verified-state drift)를 줄였습니다. 50개 태스크에 대한 주석 연구 결과, 구축된 그래프는 95.6%의 엣지 레벨 F1 점수를 달성했습니다.

AI 자동 생성 콘텐츠

원문 바로가기

시각적 프로토타입 및 요구사항 기반 배포 가능한 웹사이트의 상태 인식 생성

요약

핵심 포인트

댓글