코드투월드: 렌더 가능한 코드 생성 기반 GUI 세계 모델

초록

코드투월드는 GUI 인터페이스를 고해상도 HTML 코드로 변환하고, 이를 렌더링해 다음 화면을 예측하는 비전‑언어 모델이다. 80 K 이상의 화면‑액션 쌍을 포함한 AndroidCode 데이터를 시각‑피드백 기반으로 정제하고, 먼저 SFT로 형식 추종을 학습한 뒤 렌더‑어웨어 강화학습(RARL)으로 시각 의미와 행동 일관성을 보상한다. 실험 결과 Code2World‑8B는 최신 GPT‑5·Gemini‑3‑Pro‑Image와 동등한 성능을 보이며, 하위 GUI 에이전트의 탐색 성공률을 평균 9.5 % 끌어올린다.

상세 분석

코드투월드 논문은 GUI 세계 모델링이라는 문제를 “코드‑기반” 접근법으로 재정의한다는 점에서 혁신적이다. 기존 텍스트 기반 모델은 UI의 구조적 정보를 충분히 전달하지 못하고, 픽셀 기반 확산 모델은 연속적인 화면 변화를 생성하지만 레이아웃 정확도와 텍스트‑풍부 UI에서의 제어성을 잃는다. 코드(HTML) 자체가 구조와 스타일을 명시적으로 표현하므로, 렌더링 엔진을 통해 정확한 시각적 결과를 얻을 수 있다는 점을 활용한다.

데이터 측면에서 가장 큰 장애물은 “스크린샷‑코드” 쌍의 부족이다. 저자들은 AndroidControl의 화면·액션 로그를 GPT‑5에 프롬프트하여 초기 HTML을 생성하고, 시각‑피드백 루프를 도입한다. 구체적으로, 생성된 코드를 브라우저에 렌더링하고 SigLIP 기반 이미지 유사도 점수를 계산한다. 점수가 임계값 이하이면, 원본 스크린샷·렌더링 이미지·코드를 다시 GPT‑5에 입력해 차이를 설명하고 코드를 수정하도록 유도한다. 이 과정은 자동화된 품질 검증과 반복적 정제를 결합해 80 K 이상의 고품질 데이터셋(AndroidCode)을 만든다.

모델 학습은 두 단계로 진행된다. ① Supervised Fine‑Tuning (SFT) – Qwen‑3‑VL‑8B를 기반으로 입력(현재 화면, 액션, 목표) → 목표 HTML 코드(C*) 매핑을 학습한다. 이 단계는 구문·레이아웃 규칙을 습득하지만, 최종 렌더링 결과와의 연관성은 고려하지 않는다. ② Render‑Aware Reinforcement Learning (RARL) – SFT 정책을 초기화한 뒤, 샘플링된 HTML을 렌더링하고 VLM‑as‑Judge가 제공하는 두 종류의 보상을 사용해 정책을 업데이트한다.

• **시각 의미 보상(R_sem)**은 CLIP 기반 픽셀 유사도 대신, 구조·요소 대응에 초점을 맞춘 VLM 판단 점수를 활용한다. 이는 아이콘·이미지와 같은 외부 자산을 텍스트 플레이스홀더로 대체한 경우에도 의미적 일치를 인정한다.
• **행동 일관성 보상(R_act)**은 (현재 화면, 실행 액션, 예측 화면) 삼중 입력을 VLM에 넣어, 예측 화면이 실제 액션 결과를 반영했는지를 평가한다.

보상 함수는 R_total = α·R_sem + β·R_act 형태로 결합되며, Group Relative Policy Optimization(GRPO)으로 정책을 최적화한다. 이렇게 하면 모델이 “코드 → 시각 → 논리” 전 과정을 동시에 학습하게 된다.

평가에서는 두 가지 축을 사용한다. 첫째, Next UI Prediction에서 코드‑기반 모델이 픽셀‑기반 확산 모델보다 높은 구조·시맨틱 정확도를 보이며, GPT‑5·Gemini‑3‑Pro‑Image와 경쟁한다. 둘째, Downstream Navigation 실험에서 코드투월드를 플러그인 형태로 삽입한 Gemini‑2.5‑Flash가 AndroidWorld 탐색 성공률을 9.5 % 상승시킨다. 이는 가상 샌드박스가 실제 에이전트의 계획·시뮬레이션 단계에서 큰 가치를 제공함을 입증한다.

한계점으로는 HTML에 국한된 표현력(예: 네이티브 안드로이드 위젯, 복잡한 애니메이션)과, 렌더링 엔진 차이에 따른 시각 차이(브라우저 vs. 실제 디바이스) 등이 있다. 향후 연구에서는 React‑Native, Flutter 등 다양한 UI 프레임워크를 코드 형태로 확장하고, 멀티‑모달 렌더링 엔진을 교차 검증하는 방향이 기대된다.