핵심 요약
게임 UI는 일반 앱과 달리 비정형적인 모양과 복잡한 계층 구조를 가져 자동화가 어려웠으나, SPRITE는 이를 해결하여 개발자가 수동으로 에셋을 자르고 배치하는 반복 작업을 획기적으로 줄여줍니다. 비전문가도 스케치만으로 실제 게임 엔진에서 작동하는 프로토타입을 즉시 생성할 수 있게 합니다.
왜 중요한가
게임 UI는 일반 앱과 달리 비정형적인 모양과 복잡한 계층 구조를 가져 자동화가 어려웠으나, SPRITE는 이를 해결하여 개발자가 수동으로 에셋을 자르고 배치하는 반복 작업을 획기적으로 줄여줍니다. 비전문가도 스케치만으로 실제 게임 엔진에서 작동하는 프로토타입을 즉시 생성할 수 있게 합니다.
관련 Figure

입력된 이미지가 단순한 그림이 아니라 클릭 가능한 버튼과 상호작용 수치 등 논리적 기능을 가진 엔진 에셋으로 변환됨을 시각화한다. 이는 논문의 핵심 목표인 '정적 목업의 엔진화'를 직접적으로 증명한다.
정적 게임 UI 스크린샷이 SPRITE를 통해 엔진 내 편집 가능한 에셋과 버튼으로 변환되는 과정을 보여주는 요약도이다.
핵심 기여
훈련이 필요 없는 Coarse-to-Fine 파이프라인
추가적인 도메인 학습 없이 기존의 VLM과 2D 파운데이션 모델을 조합하여 정적 스크린샷을 편집 가능한 엔진 에셋으로 변환하는 3단계 워크플로우를 구축했다.
구조 보존형 YAML 스키마 도입
이미지와 게임 엔진 사이의 가교 역할을 하는 YAML 기반 중간 표현식을 설계하여, 복잡한 UI의 계층적 일관성을 유지하고 코드 생성 시 논리적 오류를 방지했다.
GAMEUI 벤치마크 데이터셋 구축
실제 산업 현장의 복잡한 레이아웃을 포함하는 고충실도 데이터셋을 큐레이션하여, 레이아웃 정확도와 실무 유용성을 엄격하게 검증할 수 있는 기준을 마련했다.
핵심 아이디어 이해하기
기존의 Screenshot-to-Code 방식은 주로 웹이나 모바일의 사각형 박스 모델에 최적화되어 있어, 불규칙한 기하학적 구조를 가진 게임 UI를 처리하는 데 한계가 있었다. SPRITE는 이를 해결하기 위해 시각적 의미를 파악하는 VLM과 정밀한 위치를 찾는 2D 모델을 단계적으로 연결한다. 먼저 VLM이 전체적인 UI의 논리적 구조(부모-자식 관계)를 YAML 형식으로 파악하는데, 이는 딥러닝의 Embedding 공간에서 객체 간의 관계를 추론하는 것과 유사하다. 그 다음, GroundingDINO와 SAM2 같은 모델을 사용하여 픽셀 단위의 정밀한 마스킹을 수행한다. 마지막으로 추출된 요소 뒤의 빈 공간을 LaMa 인페인팅 모델로 채워넣음으로써, 단순한 이미지 복제를 넘어 엔진에서 즉시 레이어로 분리하여 사용할 수 있는 '살아있는' 에셋을 생성한다.
방법론
SPRITE 파이프라인은 세 단계로 구성된다. 첫 번째 단계인 Semantic Scaffolding에서는 Qwen3-VL 모델이 'UI Master' 페르소나를 부여받아 스크린샷을 스캔하고, 미리 정의된 YAML 템플릿에 맞춰 UI 요소의 계층 구조를 생성한다. 두 번째 단계인 Precision Grounding에서는 YAML에 정의된 관심 영역(ROI)을 바탕으로 GroundingDINO가 객체를 탐지하고 SAM2가 정밀한 세그멘테이션 마스크를 생성한다. [이미지 좌표 입력 → 2D 모델 연산 → 픽셀 마스크 출력] 과정을 통해 비정형 에셋을 추출하며, LaMa 모델을 이용해 가려진 배경을 복원한다. 마지막 단계인 Engine-Native Synthesis에서는 GPT-5나 Claude 4.5 Sonnet이 정제된 YAML을 입력받아 Unity 엔진용 UXML/USS 코드를 생성한다. [구조화된 YAML 입력 → LLM 코드 합성 → 실행 가능한 엔진 파일 출력] 순으로 진행되어 최종적으로 플레이 가능한 UI 프로젝트를 완성한다.
관련 Figure

SPRITE의 전체 동작 메커니즘을 단계별로 설명하며, 각 단계에서 사용되는 모델(VLM, SAM2, MLLM 등)과 데이터 흐름을 명확히 보여준다.
VLM을 이용한 시맨틱 스캐폴딩, 2D 모델을 이용한 정밀 추출, MLLM을 이용한 엔진 코드 합성의 3단계 파이프라인 구조도이다.
주요 결과
GAMEUI 벤치마크를 통한 전문가 평가 결과, 시각적 충실도(Visual Fidelity)에서 10점 만점에 8.5점, 계층적 논리(Hierarchical Logic)에서 8.0점이라는 높은 점수를 기록했다. 이는 기존 VLM들이 단순한 사각형 박스(Bounding Box) 형태로만 요소를 인식하여 발생하는 파편화 문제를 SPRITE의 시맨틱 스캐폴딩 기법이 효과적으로 해결했음을 보여준다. 다만, 드래그 앤 드롭과 같은 복잡한 상호작용 로직 구현(Interaction Accuracy)은 7.0점으로 상대적으로 낮게 나타났는데, 이는 정적 이미지 한 장에서 동적인 시간적 로직을 추론하는 데 따르는 근본적인 한계로 분석됐다.
관련 Figure

기존 모델들이 사각형 박스에 갇히거나 요소를 파편화하는 반면, SPRITE는 시맨틱 가이드를 통해 비정형 모양의 아이콘을 정확하고 깨끗하게 추출함을 입증한다.
Claude-4.5, Qwen3-VL, GroundingSAM과 SPRITE의 UI 요소 추출 성능을 비교한 이미지이다.
기술 상세
SPRITE 아키텍처의 핵심은 YAML을 중간 매개체로 사용하는 구조적 정렬이다. JSON 대신 YAML을 선택하여 토큰 효율성을 20-30% 높였으며, 이는 VLM이 더 조밀한 레이아웃을 한 번에 처리할 수 있게 한다. 또한, 단순한 객체 탐지를 넘어 'UI Master' 프롬프트를 통해 기능적 디커플링(Functional Decoupling)을 수행함으로써 심미적 노이즈를 제거하고 핵심 UI 로직만 추출한다. 구현 측면에서는 GroundingDINO의 오픈 보카불러리 탐지 능력과 SAM2의 제로샷 세그멘테이션 성능을 결합하여 학습 데이터 없이도 새로운 게임 장르에 대응할 수 있는 범용성을 확보했다. 배경 복원에는 Fourier Convolution 기반의 LaMa를 사용하여 고해상도에서도 자연스러운 인페인팅 결과를 얻는다.
한계점
현재 시스템은 정적 스크린샷 한 장에 의존하므로 반투명 요소가 겹쳐 있거나 시각적 경계가 모호한 다이제틱(Diegetic) UI에서 오류가 발생할 수 있다. 또한 드래그 앤 드롭이나 비선형 애니메이션과 같은 복잡한 시간적 상호작용 로직은 현재의 정적 분석 범위에서는 완벽히 재현하기 어렵다.
실무 활용
게임 개발 프로세스에서 UI 디자이너의 목업을 개발자가 엔진에 수동으로 구현하는 병목 현상을 해결하는 데 즉시 활용 가능하다.
- 디자인 목업 스크린샷을 Unity 엔진용 UXML/USS 코드로 자동 변환
- 기존 게임의 UI 레이아웃을 분석하여 리팩터링 및 에셋 추출
- 비개발자가 스케치한 이미지를 바탕으로 실행 가능한 게임 UI 프로토타입 제작
코드 공개 여부: 미확인
키워드
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.