Code2World: A GUI World Model via Renderable Code Generation

← 📚 이번 주 Weekly Digest로 돌아가기

DD-024 Code2World: A GUI World Model via Renderable Code Generation

arXiv: 2602.09856 기관: AMAP-ML Upvotes: 186 | Comments: 3 순위: 이번 주 Top 4

---

Code2World: A GUI World Model via Renderable Code Generation 리뷰

1. 왜 이 논문이 중요한가?

기존의 GUI 에이전트들은 행동의 결과를 미리 예측하지 못해 마치 눈을 감고 길을 걷는 것처럼 오류 수정이 어렵다는 치명적인 한계가 있었습니다. 이 논문은 다음 화면을 픽셀 단위가 아닌 렌더링 가능한 코드(HTML)로 생성하여, 높은 시각적 퀄리티와 정교한 구조 제어를 동시에 달성한 최초의 GUI 월드 모델을 제시합니다. 이를 통해 AI가 인간처럼 ‘가상 모래상자’에서 미리 연습해 볼 수 있게 하여, 결제 확인이나 데이터 삭제처럼 되돌릴 수 없는 위험한 작업에서의 실수를 획기적으로 줄일 수 있는 길을 열었습니다.

2. 핵심 아이디어 쉽게 이해하기

요리사와 요리법의 비유

기존 AI가 화면을 예측하는 방식은 화가가 캔버스에 직접 그림을 그리는 것(픽셀 생성)과 같습니다. 이 방식은 전체적인 분위기는 비슷하게 만들 수 있어도, ‘버튼의 텍스트가 정확히 무엇인가’나 ‘버튼이 정확히 어디에 위치해야 하는가’ 같은 디테일을 맞추기 매우 어렵습니다. Code2World는 달리 요리사(Browser)가 완벽하게 요리할 수 있도록 정교한 ‘요리법(HTML 코드)‘을 작성해주는 셰프 역할을 합니다. 요리사는 요리법을 입력받기만 하면 늘 똑같은 모양의 요리(화면)를 만들어내기 때문에 구조가 정확하게 유지되는 것이죠.

단계별 동작 과정

이 모델은 크게 두 단계로 나뉩니다. 첫째, AI는 현재 화면 스크린샷과 사용자의 행동(예: ‘로그인 버튼 클릭’)을 보고, 다음 화면이 어떻게 구성되어야 할지 HTML 코드로 작성합니다. 이때 단순히 비슷하게 보이는 코드를 짜는 것이 아니라, 실제 브라우저에서 문제없이 실행되도록 엄격한 문법을 따릅니다. 둘째, 작성된 코드는 브라우저라는 렌더링 엔진을 통해 실제 이미지로 변환됩니다. 픽셀을 직접 찍어내는 것이 아니라 구조적인 코드를 짜고 이를 그림으로 바꾸기 때문에 글자가 깨지거나 버튼이 삐뚤어지는 일이 거의 없습니다.

핵심 알고리즘과 수식

이 논문의 핵심은 상태 전이를 코드 생성과 렌더링의 결합으로 정의한다는 점입니다. 수식으로 표현하면 다음과 같습니다.

$$ \hat{C}{t+1} = \mathcal{M}{\theta}(I_t, a_t, \mathcal{G}), \quad \hat{I}{t+1} = \mathcal{R}(\hat{C}{t+1}) $$

여기서 $\mathcal{M}{\theta}$는 AI 모델이고, $I_t$는 현재 화면, $a_t$는 행동, $\mathcal{G}$는 목표입니다. 모델은 이를 바탕으로 다음 상태의 코드 $\hat{C}{t+1}$을 만들어냅니다. 이후 렌더링 엔진 $\mathcal{R}$이 이 코드를 받아 최종적으로 우리 눈에 보이는 다음 화면 이미지 $\hat{I}_{t+1}$을 확정적으로 만들어냅니다.

3. 실험 결과 분석

연구진은 실제 안드로이드 기기 데이터셋인 Android Control(In-Distribution)과 학습하지 않은 앱과 기기에서의 성능을 테스트하는 GUI Odyssey(Out-of-Distribution) 벤치마크를 사용했습니다. 기존의 강력한 이미지 생성 모델(예: FLUX, SDXL)이나 텍스트 기반 모델들과 비교했을 때, Code2World는 모든 지표에서 압도적인 성능을 기록했습니다.

구체적으로 보면, Android Control 데이터셋에서 기능적 논리 정확도(Action Adherence) 관련 지표에서 약 95% 이상의 매우 높은 점수를 기록했습니다. 이는 모델이 생성한 화면이 사용자의 행동에 따라 논리적으로 완벽하게 반응했다는 뜻입니다. 특히 시각적 품질 측면에서도 기존 이미지 생성 모델들이 흔히 저지르는 ‘텍스트 깨짐’ 현상 없이, 레이아웃 유사도(Layout Similarity)와 요소 유사도(Element Similarity) 면에서 큰 우위를 점했습니다. 가장 인상적인 부분은 GUI Odyssey(OOD) 테스트에서, 학습한 적 없는 새로운 앱 환경에서도 기존 최첨단(SOTA) 모델들과 비교해 월등한 일반화 성능을 보여주었다는 점입니다.

4. 한계점과 향후 연구 방향

가장 큰 한계는 속도입니다. HTML 코드를 생성하고 이를 실제 브라우저 엔진을 통해 렌더링하는 과정이 추가되기 때문에, 단순히 이미지를 생성하는 모델보다는 예측 시간이 더 오래 걸립니다. 따라서 실시간으로 즉각적인 반응이 필요한 환경에서는 지연 시간(Latency)이 병목이 될 수 있습니다.

또한, 현재는 주로 정적인 화면 전이를 예측하는 데 특화되어 있습니다. 복잡한 애니메이션이나 자연스러운 화면 전환 효과, 동영상 재생과 같은 동적 요소가 많은 앱에서는 코드만으로 완벽한 시뮬레이션이 어려울 수 있습니다. 향후 연구에서는 이러한 렌더링 속도를 최적화하고, 더 복잡한 멀티미디어 요소를 코드로 표현하는 방식을 개선해야 할 것입니다.

5. 실무 적용 가능성

이 기술은 자율주행 자동차가 시뮬레이터를 통해 학습하듯, 소프트웨어 테스트 자동화 분야에 즉시 적용할 수 있습니다. 실제 앱을 배포하기 전에 AI가 수천 가지 시나리오를 코드 레벨에서 시뮬레이션하여 치명적인 버그를 찾아내는 ‘오토마이저(Auto-patcher)’ 역할을 할 수 있습니다.

또한 AI 비서나 챗봇 개발 시, 사용자의 요청을 처리하기 전에 미리 결과 화면을 그려보고 문제가 없는지 확인하는 사전 검증 시스템으로 활용될 수 있습니다. 도입하기 위해서는 고성능 GPU가 탑재된 서버 환경이 필요하며, 학습 데이터로 활용할高质量的 GUI 궤적 데이터가 확보되어야 합니다.

6. 이 논문을 이해하기 위한 사전 지식

• 비전-언어 모델 (Vision-Language Model, VLM): 이미지와 텍스트를 동시에 이해하고 처리할 수 있는 AI 모델의 한 종류입니다.
• GUI 에이전트 (GUI Agent): 화면을 보고 인간처럼 클릭하거나 스크롤 등의 행동을 통해 앱을 조작하는 자동화 시스템입니다.
• 월드 모델 (World Model): 현재 상태와 행동을 입력받아 미래의 상태를 예측하는 환경 모델로, AI가 미리 시뮬레이션을 통해 계획을 세울 수 있게 합니다.
• HTML/DOM (Document Object Model): 웹페이지나 앱 화면의 구조와 내용을 코드로 표현한 표준입니다.
• 강화 학습 (Reinforcement Learning, RL): 시행착오를 통해 보상을 최대화하는 방법을 스스로 학습하는 머신러닝의 한 방식입니다.
• 지도 학습 미세 조정 (Supervised Fine-Tuning, SFT): 이미 학습된 큰 모델을 특정 데이터셋을 사용해 추가로 학습시켜 원하는 작업에 특화시키는 과정입니다.
• 아웃-오브-디스트리뷰션 (Out-of-Distribution, OOD): 학습에 사용되지 않았던 새로운 종류의 데이터에서도 모델이 잘 작동하는지를 의미합니다.

---

📚 이번 주 관련 Deep Dive

순위	논문	Deep Dive
🥇	OPUS: Towards Efficient and Princip…	DD-021
🥈	Weak-Driven Learning: How Weak Agen…	DD-022
🥉	TermiGen: High-Fidelity Environment…	DD-023
4.	Code2World: A GUI World Model via R…	📍 현재 문서
5.	The Devil Behind Moltbook: Anthropi…	DD-025

---

📅 생성일: 2026-02-15 | 🤖 GLM-4.7 Deep Dive