🤖 AI

UI2App: Benchmarking Visual Interaction Inference in Executable Web Application Generation

이 논문은 정적인 UI 스크린샷만으로부터 실행 가능한 상호작용 동작을 추론하는 시각-언어 모델의 능력을 평가하기 위해 설계된 최초의 벤치마크인 UI2App을 소개하며, 현재 모델들의 시각적 재구성 능력과 복잡하고 상태 일관성이 있는 웹 애플리케이션을 생성하는 능력 사이의 상당한 격차를 드러낸다.

원저자: Grace Man Chen, Litao Guo, Yifan Wu, Yiyu Chen, Yenchi Tseng, Sicheng Liu, Yuyu Luo, Ying-Cong Chen

게시일 2026-07-08

📖 4 분 읽기☕ 가벼운 읽기

CC BY 4.0

원저자: Grace Man Chen, Litao Guo, Yifan Wu, Yiyu Chen, Yenchi Tseng, Sicheng Liu, Yuyu Luo, Ying-Cong Chen

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

핵심 아이디어: "보는 것"에서 "하는 것"으로

당신이 숙련된 요리사라고 상상해 보세요. 당신 앞의 테이블에는 아주 아름답고 복잡한 케이크 사진 한 장이 놓여 있습니다.

기존 방식 (텍text 기반): 당신은 요리사에게 이렇게 요청합니다. "이 사진처럼 생겼고, 층이 세 개이며, 초콜릿 맛이 나고, 버튼을 누르면 스프링클이 튀어나오는 비밀 버튼이 있는 케이크를 만들어 줘." 요리사는 당신이 모든 세부 사항을 글로 설명해주기를 기다려야 합니다. 만약 당신이 비밀 버튼에 대해 언급하는 것을 깜빡한다면, 요리사는 그것을 만들지 않을 것입니다.
새로운 방식 (이미지 기반): 당신은 그냥 요리사에게 사진을 건네줍니다. 요리사는 그 사진을 보고 케이크를 구우려고 시도합니다.

오랫동안 AI 모델들(이 이야기 속의 '요리사' 같은 존재들)은 사진을 보고 그 사진과 똑같이 보이는 케이크를 굽는 데 매우 능숙해졌습니다. 색상, 프로스팅의 소용돌이, 모양까지 완벽하게 맞출 수 있죠.

하지만 여기에 문제가 있습니다: 케이크가 실제처럼 보인다고 해서 반드시 제대로 작동한다는 뜻은 아닙니다.

비밀 버튼을 누르면 실제로 스프링클이 나올까요?
케이크 한 조각을 잘라냈을 때, 안쪽이 초콜릿 맛일까요, 아니면 그냥 속이 빈 껍데기뿐일까요?
층 하나를 움직였을 때, 다른 층들이 연결된 상태를 유지할까요?

논문 UI2App은 이렇게 말합니다: "우리는 단순히 케이크가 어떻게 보이는지를 확인하는 것을 멈춰야 합니다. 우리는 케이크가 실제로 작동하는지를 확인해야 합니다."

새로운 벤치마크: UI2App

연구진은 UI2App이라는 새로운 테스트를 만들었습니다. AI에게 긴 글의 지침을 바탕으로 웹사이트를 구축하라고 요구하는 대신, 스크린샷(웹사이트 사진) 뭉치를 건네주며 다음과 같이 말했습니다:

"이 사진들과 똑같이 작동하고 클릭 가능한 웹사이트를 만드세요. 단, 버튼이 어떻게 작동하는지는 알려주지 않겠습니다."

AI는 오직 사진만을 보고 "숨겨진 마법"을 알아내야 합니다. 예를 들어, 한 사진에는 쇼핑카트에 아이템이 1개 있고, 다음 사진에는 2개가 있다면, AI는 *"아, 내가 추가한 것을 기억하는 숨겨진 시스템이 있구나!"*라는 것을 깨달아야 합니다.

4단계 성적표

AI의 작업물을 채점하기 위해 연구진은 최종 결과물만 본 것이 아닙니다. 그들은 네 가지 체크리스트를 사용했습니다:

실행 가능한가? (Executability): 코드가 실제로 작동하나요, 아니면 즉시 충돌하나요? 이것은 케이크를 맛보기 전에 오븐이 콘센트에 꽂혀 있는지 확인하는 것과 같습니다.
이동할 수 있는가? (Navigation Reachability): 사진 속에 "문의하기" 페이지가 있다면, 링크를 클릭해서 실제로 그곳에 도달할 수 있나요? 아니면 링크가 깨져 있나요?
제대로 보이는가? (Visual Fidelity): 웹사이트가 사진과 똑같이 생겼나요? (이것은 기존의 테스트 방식이며, 대부분의 AI가 잘 해내는 부분입니다.)
제대로 작동하는가? (Interaction Inference Score - IIS): 이것이 가장 중요한 새로운 부분입니다. "장바구니 담기"를 클릭했을 때 숫자가 올라가나요? 로그인을 하면 페이지가 사용자를 기억하나요? 이것은 AI가 외형뿐만 아니라 동작을 이해했는지 테스트합니다.

충격적인 결과

연구진은 현존하는 가장 똑똑한 6개의 AI 모델을 테스트했습니다. 결과는 다음과 같았습니다:

"닮은 꼴"의 함정: 웹사이트를 완벽하게 보이게 만드는 데 가장 뛰어났던 AI 모델이, 정작 제대로 작동하게 만드는 데는 4위에 그쳤습니다.
- 비유: 마치 진흙으로 만든 가짜 자동차를 만든 모델과 같습니다. 페라리처럼 보이지만(광택도 나고 형태도 완벽함), 막상 엔진을 걸려고 하면 아무 일도 일어나지 않습니다. 그것은 "얼어붙은 외관"일 뿐입니다.
"실행가"의 승리: 웹사이트를 제대로 작동하게 만드는 데(아이템 추가, 비밀번호 기억, 페이지 전환 등) 가장 뛰어났던 모델은 완전히 다른 모델이었습니다.
"기억력" 문제: 모든 AI에게 가장 어려웠던 점은 **교차 경로 상태(Cross-Route State)**였습니다.
- 비유: 당신이 비디오 게임을 하고 있다고 상상해 보세요. "숲" 레벨에서 검을 하나 주웠습니다. 그리고 "성" 레벨로 이동합니다. 똑똑한 AI라면 당신이 여전히 검을 가지고 있다는 것을 기억할 것입니다. 하지만 이 테스트의 AI들은 자주 까먹었습니다. 숲에서는 검을 주울 수 있게 만들었지만, 성으로 이동하면 검이 사라지고 게임은 당신이 검을 집은 적조차 없었던 것처럼 행동했습니다.
- 결과: 절반의 모델들이 이 특정 기술에서 0점을 받았습니다. 페이지 사이를 이동할 때 정보를 추적하지 못했던 것입니다.

이것이 왜 중요한가

이 논문은 시각적 충실도(Visual Fidelity)가 지능과 동일하지 않다는 결론을 내립니다.

AI가 버튼의 완벽한 그림을 그려낼 수 있다고 해서, 그 버튼을 클릭했을 때 어떤 일이 일어나는지 안다는 뜻은 아닙니다. 현재 세대의 AI는 훌륭한 예술가(외형을 복제하는 것)가 될 수는 있지만, 여전히 엔지니어(논리를 구축하는 것)가 되는 데는 어려움을 겪고 있습니다.

UI2App 벤치마크는 AI가 단순히 "흉내 내는 것"을 멈추고 실제로 "수행하도록" 강제하는 새로운 도구입니다. 이는 현재 AI의 가장 큰 격차가 무언가를 예쁘게 만드는 것이 아니라, 웹사이트를 살아있게 만드는 '보이지 않는 규칙'을 이해하는 데 있음을 강조합니다.

기술 요약: UI2App 벤치마크 - 시각적 상호작용 추론 (Visual Interaction Inference)

문제 정의

대규모 언语言 모델(LLM)과 시각-언어 모델(VLM)이 자연어나 단일 스크린샷으로부터 웹 페이지를 생성하는 데 있어 점진적인 역량을 보여주고 있지만, 기존 방식들은 상당한 한계점을 가지고 있다. 텍스트 기반 패러다임은 복잡한 프롬프트에 의존하며, 이는 상세한 시각적 레이아웃과 페이지 간의 시각적 일관성을 정밀하게 지정하는 데 어려움을 겪는다. 반대로 이미지 기반 패러다임(screenshot-to-code)은 주로 시각적 충실도(visual fidelity)—즉, 렌더링된 출력이 참조 이미지와 얼마나 유사한지를 측정하는 데 집중해 왔으며, 상호작용 추론(interaction inference) 능력은 간과해 왔다.

현재의 벤치마크들은 시각적으로는 올바르지만 행동적으로는 무력한 "얼어붙은 파사드(frozen façades)"를 생성하는 경우가 많다. 이러한 벤치마크들은 생성된 애플리케이션이 정적인 시각적 증거만으로 동적인 동작, 상태 관리 및 페이지 간 상호작용을 복구할 수 있는지 여부를 평가하지 못한다. 명시적인 텍스트나 데모 기반의 사양 없이도 누락된 상호작용 로직(예: 경로 간 상태 유지, 데이터 CRUD 작업)을 추론하는 모델의 능력을 측정하는 데 있어 결정적인 격차가 존재한다.

방법론

UI2App 벤치마크

저자들은 상호작용 추론(interaction inference), 즉 텍스트나 행동 가이드 없이 오직 스크린샷만으로 애플리케이션의 동작을 복구하는 능력을 구체적으로 겨냥한 최초의 벤치마크인 UI2App을 소개한다.

데이터셋 구축: 이 벤치마크는 327개의 스크린샷을 45개의 상태 일관적(state-coherent) 스크린샷 세트로 구성하고 있다. 이 세트들은 Content, Admin, Transaction, Specialty의 네 가지 카테고리에 걸쳐 실행 가능한 멀티 루트 웹 애플리케이션을 나타낸다.
출처: 스크린샷은 오픈 소스 GitHub 프로젝트에서 수집되었으며, 허용 가능한 라이선스, 구조적 유효성 및 빌드 가능성을 기준으로 필터링되었다.
태스크 정의: 모델에게는 서로 다른 경로 또는 시각적 상태를 포착한 $M$ 개의 스크린샷 세트(태스크당 4~14개)가 주어진다. 액션 트레이스(action traces)나 상호작용 설명은 제공되지 않는다. 모델은 스크린샷과 그에 내포된 동작을 재현하는 실행 가능한 애플리케이션(React + TypeScript) 소스 코드를 생성해야 한다.

평가 프로토콜

평가는 다음 네 가지 차원을 따라 아티팩트를 점수화하는 엔드 투 엔드 파이프라인으로 진행된다:

실행 가능성 (EXEC): 코드가 빌드되고 렌더링되는지 측정한다.
- EXEC@1: 원샷(one-shot) 통과율.
- EXEC@3: 빌드 에러 피드백을 사용한 최대 3회의 셀프 디버깅 후의 통과율.
내비게이션 도달 가능성 (NRS): 생성된 앱의 홈 경로로부터 가시적인 내비게이션을 통해 도달 가능한 입력 스크린샷 경로의 비율.
시각적 충실도 (VFS): 렌더링된 DOM을 참조 모델과 비교하는 판사 없는(judge-free) 블록 레벨 매칭 메트릭이다. 크기(Size), 텍스트(Text), 위치(Position), 색상(Color)의 네 가지 하위 메트릭의 평균을 사용한다.
상호작용 추론 점수 (IIS): 핵심 기여 요소이다. IIS는 모델이 스크린샷에 내포된 상호작용을 얼마나 잘 추론하고 구현하는지 정량화한다.
- 분류 체계: 상호작용은 7가지 유형(Toggle, Expand/Collapse, List Operations, Data CRUD, Form Validation, Notification, Cross-Route State)으로 분류된다.
- 범위: 상호작용은 상태 관리 복잡도에 따라 가중치가 부여된다: S1(UI 상태), S2(데이터 상태), S3(경로 간 상태 유지).
- 점수 산정: 단일 참조 트레이스와 비교하는 기존 벤치마크와 달리, IIS는 루브릭 기반 프로토콜을 사용한다. 이는 생성된 애플리케이션이 상호작용의 기능적 기준(트리거, 상태 전이, 결과)을 실현하는지 평가하여, 다양하지만 의미론적으로 동일한 구현들을 수용한다.

주요 기여

UI2App 벤치마크: 정적인 시각적 재구성을 넘어, 이미지 전용 입력을 통한 상호작용 추론을 테스트하기 위해 설계된 45개의 멀티 루트, 상태 일관적 애플리케이션 세트 데이터셋이다.
상호작용 추론 점수 (IIS): 상호작용 분류 체계와 범위 기반 가중치에 근거한 새로운 메트릭이다. 단일 그라운드 트루스 실행 트레이스와 매칭하는 대신, 기능적 정확성과 상태 관리 복잡도에 기반하여 추론된 동작을 평가한다.
포괄적 평가: 6개의 프런티어 VLM(Claude Sonnet 4.6, Gemini 3.1 Pro, GPT-5.4, Kimi K2.5, Qwen3.5, GLM-4.6V 포함)과 Qwen2.5-VL의 스케일링 래더를 평가함으로써 이미지 전용 상호작용 추론에 대한 첫 번째 베이스라인을 구축한다.

실험 결과

6개의 프런티어 모델에 대한 평가 결과, 시각적 재구성과 상호작용 실현 사이의 현저한 역량 불일치가 드러났다:

시각적 충실도 $\neq$ 상호작용 추론: 시각적 충실도에서 앞선 모델(Gemini 3.1 Pro Preview, VFS=78.1)은 IIS(7.5)에서 4위를 기록했다. 반면, IIS 선두 모델(Claude Sonnet 4.6, IIS=39.3)은 VFS(75.7)에서 2위를 차지했다. IIS 선두 모델은 상호작용 추론 측면에서 VFS 선두 모델보다 5.2배 앞서 있다.
경로 간 상태 관리 병목 현상: 가장 큰 도전 과제는 **S3 (경로 간 상태 유지)**였다. 6개 모델 중 3개가 이 차원에서 정확히 0점을 기록했다. 가장 우수한 모델(Claude)조차 S3 상호작용에서 21.6/100만을 달성했다.
Admin 애플리케이션: Admin 스타일의 앱은 모든 모델에서 가장 낮은 평균 IIS(9.4)를 기록하며 지속적인 병목 구간임을 입증했다.
스케일링 동작: Qwen2.5-VL 제품군 내에서 32B와 72B 파라미터 사이에서 "상전이(phase transition)"가 관찰되었는데, 여기서 실행 가능성과 시각적 충실도가 급격히 상승했다. 그러나 파라미터 스케일링만으로는 상호작용 추론 요구사항을 충족시키지 못했다.
실패 모드: 분석 결과, 일부 모델(예: GPT-5.4)이 빌드 에러를 위한 셀프 디버깅을 통해 크게 개선되었음에도 불구하고, 이것이 더 나은 상호작용 추론으로 이어지지는 않았다. 상호작용 실패는 주로 상태 컨테이너(예: CartContext)의 누락이나, UI 요소는 렌더링되었으나 핸들러가 연결되지 않은 데드 코드(dead code)에서 기인했다.

의의 및 주장

본 논문은 정적 스크린샷으로부터 완전한 상호작용 동작을 추론하는 것이 여전히 시각-언어 모델의 핵심적인 프런티어 과제라고 주장한다.

역량의 디커플링(Decoupling): 결과는 시각적 충실도가 상호작용 실현의 좋은 대리 지표(proxy)가 아님을 보여준다. 모델은 픽셀 단위로 완벽한 복제품을 만들면서도 기능적으로는 무력할 수 있다.
명세 준수를 넘어: 텍스트나 비디오를 통해 상호작용이 명시적으로 지정되는 벤치마크와 달리, UI2App은 모델이 상호작용 추론—즉, 시각적 단서로부터 누락된 동작을 복구하는 것—을 수행할 것을 요구한다. 이는 "명세 준수(specification-following)"에서 "잠재적 어포던스 추론(latent-affordance inference)"으로의 전환을 의미한다.
미래 방향: 저자들은 UI2App가 모델이 더 강력한 추론 능력을 갖추도록 유도하는 데 필요한 테스트베드를 제공하며, 특히 현재 모델들이 실패하고 있는 경로 간 상태 유지 및 복잡한 상태 관리 문제를 해결하는 데 기여할 것이라고 상정한다.

결론적으로, 모델이 코드 생성 능력은 발전했을지라도, 명시적인 행동 가이드 없이 정적 시각적 증거로부터 실행 가능한 인터랙티브 애플리케이션을 합성하는 능력은 아직 해결되지 않았으며, 특히 경로 간 상태 관리가 가장 만연한 병목 지점이라고 밝히고 있다.