인터랙션투코드: 인터랙티브 웹페이지 자동 생성 벤치마크

초록

본 논문은 정적 UI‑Mockup만을 대상으로 해왔던 기존 디자인‑투‑코드 연구의 한계를 넘어, 인터랙티브 프로토타입을 입력으로 받아 동적 웹페이지 코드를 생성하는 MLLM의 능력을 평가한다. 127개의 실제 웹사이트와 374개의 다양한 인터랙션을 포함한 Interaction2Code 벤치마크를 구축하고, 최신 멀티모달 대형 언어 모델들을 자동·인간 평가한 결과, 인터랙션 구현 능력에서 ① 전체 페이지 대비 낮은 성능, ② 10가지 유형의 오류, ③ 시각적으로 미묘한 인터랙션에 대한 취약성, ④ 단일 시각 입력만으로는 이해 부족이라는 네 가지 주요 한계를 발견한다. 이를 극복하기 위해 인터랙티브 요소 강조, 실패‑인식 프롬프팅, 시각적 살리엔시 강화, 시각·텍스트 결합 네 가지 전략을 제안한다.

상세 분석

Interaction2Code 논문은 UI‑to‑Code 연구에서 정적 화면만을 다루던 기존 패러다임을 깨고, “Interaction‑to‑Code”라는 새로운 문제 정의를 제시한다. 저자들은 실제 웹 환경에서 흔히 사용되는 인터랙티브 요소가 전체 UI의 절반 이상을 차지한다는 실증적 분석을 기반으로, 동적 행동을 포함한 코드 생성이 실용적인 웹 개발에 필수임을 강조한다. 이를 위해 15개의 도메인(블로그, 쇼핑, 뉴스 등)와 31개의 인터랙션 카테고리(버튼, 드롭다운, 슬라이더 등)를 포괄하는 127개의 웹페이지와 374개의 전·후 스크린샷을 수집·주석화하였다. 평가에서는 GPT‑4o, Claude‑3.5, Gemini‑1.5 등 최신 폐쇄형·오픈소스 MLLM을 사용해 자동 메트릭(CLIP, SSIM, BLEU, Widget Match)과 인간 평가(구현률, 사용성률, 실패 유형 분석)를 수행하였다. 결과는 네 가지 핵심 문제점을 드러낸다. 첫째, 전체 페이지를 생성할 때보다 인터랙션 부분만 구현할 때 정확도가 현저히 낮다. 둘째, “요소 누락”, “잘못된 이벤트 바인딩”, “스타일 손실” 등 10가지 구체적 오류가 빈번히 발생한다. 셋째, 색상 변화나 미세한 위치 이동처럼 시각적으로 눈에 띄지 않는 인터랙션은 모델이 인식하지 못한다. 넷째, 이미지 하나만 제공되는 경우 모델이 인터랙션 의도를 충분히 파악하지 못해 코드가 부정확해진다. 이러한 한계를 극복하기 위해 저자들은 네 가지 개선 전략을 제안한다. (1) 인터랙티브 요소에 시각적 하이라이트(예: 테두리, 색상 강조)를 추가해 모델이 관심 영역을 명확히 인식하도록 한다. (2) 실패 사례를 프롬프트에 포함하는 “Failure‑aware Prompting(FAP)”으로 모델이 흔히 저지르는 오류를 사전에 회피하도록 유도한다. (3) 시각적 살리엔시 강화(VSE) 기법으로 중요한 인터랙션 영역을 대비를 높여 모델의 시각적 감지를 돕는다. (4) 이미지와 함께 텍스트 설명을 결합해 멀티모달 입력을 제공함으로써 모델이 인터랙션 의도를 보다 풍부히 이해하도록 한다. 실험 결과, 이 네 가지 전략을 조합했을 때 인터랙션 구현률과 사용성률이 모두 유의미하게 상승했으며, 특히 시각적으로 미묘한 인터랙션에 대한 성능 개선이 두드러졌다. 논문은 또한 벤치마크와 코드, 데이터셋을 공개함으로써 향후 연구자들이 인터랙티브 UI 자동 생성 분야를 지속적으로 확장할 수 있는 기반을 제공한다.