1. 문제 정의 (Problem Statement)

그래픽 사용자 인터페이스 (GUI) 설계의 초기 단계에서는 다양한 아이디어를 탐색하고 장단점을 비교하는 것이 중요합니다. 그러나 기존 도구들은 다음과 같은 한계를 가지고 있습니다:

• 창의성 제약 또는 과도한 입력 요구: 스케치 기반 시스템은 초기 아이디어에 고정되거나 (fixation), 기존 예시에만 의존하는 경향이 있습니다. 반면, 생성형 AI 기반 시스템은 대부분 텍스트 프롬프트에만 의존하여 구조적 레이아웃이나 사용자의 주의를 끄는 순서 (Visual Flow) 와 같은 설계자의 의도를 잘 반영하지 못합니다.
• 다중 모달리티 부재: 설계자들은 종종 텍스트, 스케치 (와이어프레임), 그리고 사용자 주의 흐름을 혼합하여 아이디어를 구상하지만, 이를 유연하게 결합하여 입력할 수 있는 도구가 부족합니다.
• 시각적 흐름 (Visual Flow) 의 무시: 사용자 인터페이스 요소에 대한 사용자의 시선 이동 순서 (Scanpath) 는 사용성에 중요하지만, 기존 생성 모델들은 이를 고려하지 못하거나 실험적 비용이 너무 커서 초기 설계 단계에서 반영되지 않습니다.

2. 방법론 (Methodology)

저자들은 ControlGUI라는 새로운 생성 시스템을 제안합니다. 이는 텍스트, 와이어프레임, 시각적 흐름 (Visual Flow) 을 유연하게 결합하여 저충실도 (Low-fidelity) GUI 개념을 빠르게 생성하는 멀티모달 듀얼 어댑터 확산 모델 (Dual-Adapter Diffusion Model) 입니다.

2.1 데이터셋 구축

• 규모: 약 72,500 개의 모바일 GUI 및 웹페이지로 구성된 대규모 멀티모달 데이터셋을 구축했습니다.
• 구성 요소: 각 GUI 에 대해 스크린샷, 레이블이 지정된 와이어프레임 (요소 유형 및 위치), 텍스트 설명, 그리고 EyeFormer 모델을 통해 예측된 사용자 스캔패스 (Scanpaths) 를 포함합니다.
• 의의: 기존 데이터셋들은 주로 모바일 앱에 국한되거나 시각적 흐름 데이터가 부족했는데, 이를 해결하여 구조, 의미, 시각적 흐름을 동시에 학습할 수 있는 기반을 마련했습니다.

2.2 모델 아키텍처 (Dual-Adapter Architecture)

Stable Diffusion 을 베이스로 하여 두 가지 특수한 어댑터 (Adapter) 를 도입하여 제어력을 높였습니다.

1. 와이어프레임 어댑터 (Wireframe Adapter):
   • 역할: 국소적 (Local) 인 구조 제어.
   • 기능: 입력된 와이어프레임에 기반하여 GUI 요소의 배치, 유형 (버튼, 텍스트, 이미지 등) 을 정밀하게 제어합니다.
   • 구현: ControlNet 의 아이디어를 차용하여, 사전 학습된 인코더/미들 블록의 복사본에 0 으로 초기화된 컨볼루션 레이어를 추가하여 학습합니다.
2. 플로우 어댑터 (Flow Adapter):
   • 역할: 전역적 (Global) 인 지각적 제어.
   • 기능: 사용자가 요소를 주시하는 순서 (시각적 흐름) 를 제어합니다.
   • 구현: EyeFormer(스캔패스 예측 모델) 의 디코더를 활용하여 시각적 흐름을 임베딩으로 변환하고, 확산 모델의 각 레이어에 크로스 어텐션 (Cross-attention) 레이어를 추가하여 이 흐름 정보를 주입합니다.

2.3 학습 및 최적화

• 손실 함수:
  • CFG Loss: 조건부 생성의 정확도를 높이기 위해 Classifier-Free Guidance 를 사용합니다.
  • Flow Consistency Loss: 생성된 GUI 의 예측 스캔패스와 목표 스캔패스 간의 유사성을 측정하기 위해 Soft-DTW (Soft Dynamic Time Warping) 를 사용합니다. 이는 시간적 시퀀스의 유사성을 미분 가능하게 측정하여 모델이 의도된 주의 흐름을 따르도록 유도합니다.
• 학습 전략: 3 단계 학습을 수행합니다. (1) 와이어프레임 어댑터 학습, (2) 플로우 어댑터 학습, (3) 세 가지 입력 (텍스트, 와이어프레임, 흐름) 을 모두 사용하는 공동 미세 조정 (Joint Fine-tuning).

2.4 텍스트 보정 파이프라인

생성된 GUI 의 텍스트가 읽기 어렵거나 의미 없는 경우를 보완하기 위해, Vision-Language Model (LLaVA-Next) 을 활용한 텍스트 수정 파이프라인을 도입했습니다. 이는 illegible 한 텍스트를 감지하고 문맥에 맞는 적절한 텍스트로 자동 대체하여 현실성을 높입니다.

3. 주요 기여 (Key Contributions)

1. 멀티모달 제어 방법론: 텍스트, 와이어프레임, 시각적 흐름을 임의의 조합으로 입력받아 GUI 를 생성하는 최초의 확산 모델 기반 시스템 (ControlGUI) 을 제안했습니다.
2. 듀얼 어댑터 확산 아키텍처: 구조적 레이아웃 (와이어프레임) 과 지각적 목표 (시각적 흐름) 를 동시에 제어하는 상호 보완적인 어댑터 구조를 설계했습니다.
3. 대규모 멀티모달 GUI 데이터셋: 스크린샷, 와이어프레임, 설명, 스캔패스가 정렬된 72,500 개의 GUI 데이터셋을 공개했습니다.

4. 평가 및 결과 (Evaluation & Results)

4.1 정량적 평가

• 비교 대상: ControlNet, IP-Adapter, Stitch, GPT-5 등 기존 모델과 비교했습니다.
• 성능: ControlGUI 는 지각적 품질 (ManIQA, MUSIQ), 프롬프트 정렬 (CLIP-IQA) 에서 기존 모델들을 능가했습니다.
• 고유한 장점: 시각적 흐름 (Flow) 입력을 지원하는 유일한 모델로, Soft-DTW 점수를 통해 의도된 주의 흐름을 가장 잘 따르는 것을 입증했습니다.

4.2 정성적 평가 및 사용자 연구

• 다양성 (Diversity): 텍스트만 입력했을 때보다 와이어프레임과 시각적 흐름을 추가했을 때 사용자가 인지하는 디자인의 다양성이 통계적으로 유의미하게 증가했습니다 (4.59 vs 3.56).
• 제어력 및 의도 정렬 (Control & Alignment): 멀티모달 입력을 통해 설계자의 의도 (레이아웃, 주의 흐름) 와 생성 결과의 일치도가 크게 향상되었습니다.
• 창의성 (Creativity): Creative Support Index (CSI) 점수가 텍스트 프롬프트만 사용한 경우보다 유의미하게 높았으며, 참가자들은 시스템이 아이디어 탐색의 범위를 넓히고 예상치 못한 영감을 제공한다고 평가했습니다.
• 효율성: RTX 4090 GPU 에서 16 개의 GUI 후보를 약 19 초 내에 생성하여 빠른 아이디어 탐색이 가능함을 보였습니다.

5. 의의 및 결론 (Significance & Conclusion)

• 초기 설계 단계의 혁신: 설계자가 과도하게 구체적인 명세를 작성하지 않고도, 자연스러운 모달리티 (텍스트, 스케치, 흐름) 를 통해 다양한 저충실도 GUI 개념을 빠르게 탐색할 수 있게 합니다.
• 구조와 지각의 통합: 기존에는 분리되어 다루어지던 '구조적 레이아웃'과 '사용자 주의 흐름'을 하나의 생성 모델에서 통합 제어함으로써, 사용성 (Usability) 을 고려한 초기 설계가 가능해졌습니다.
• 미래 지향성: 현재 생성된 텍스트의 가독성이나 고해상도 이미지 생성 등 한계점이 존재하지만, 이 연구는 생성형 AI 가 초기 아이디어 발상 (Ideation) 단계에서 설계자의 창의성을 확장하고 설계 공간을 넓히는 강력한 도구로 활용될 수 있음을 입증했습니다.

이 논문은 생성형 AI 가 단순한 이미지 생성을 넘어, 사용자의 시선과 행동을 고려한 지각적 설계 (Perceptual Design) 까지 지원할 수 있는 새로운 패러다임을 제시한다는 점에서 의의가 큽니다.