Enhancing User Interface Design Process with AI through Semantic Representations = 시맨틱 표현을 통한 인공지능 기반 사용자 인터페이스 디자인 프로세스 개선

국문 초록 (Abstract)

사용자 인터페이스(User Interface; UI) 디자인은 기존 디자인에서 영감을 탐색하고, 새로운 디자인을 생성하며, 이를 다듬어가는 복잡하고 반복적인 과정이다. 이 과정에는 인터페이스에 담긴 의미, 즉 UI 디자인 시맨틱(Semantic)에 대한 이해가 수반되며, 디자이너는 이러한 의미를 해석하고 표현하며 조율하는 과정을 통해 디자인을 발전시킨다. 한편, 최신 인공지능(Artificial Intelligence; AI) 모델은 이를 지원할 잠재력을 지니고 있다. 그러나 AI가 시맨틱을 얼마나 잘 이해하는지에 대한 탐구가 부족하며, 현재의 도구들은 제한된 수준의 시맨틱만을 다루고 사용자가 조작할 수 있는 형태로 표현하지 못한다. 이러한 디자이너가 추론하는 시맨틱과 AI 시스템이 처리하는 표현 사이의 단절로 인해 사용자는 AI 시스템을 조작하거나 그 결과물을 해석하기 어렵다.
따라서 본 논문은 AI가 UI 디자인 시맨틱을 얼마나 잘 이해하는지 평가할 뿐만 아니라, UI 시맨틱 표현의 진화—잠재적(latent)에서 명시적(explicit), 구조화된(structured) 형태로—가 이 간극을 어떻게 해소할 수 있는지 탐구하여, 디자인 프로세스 전반에서 보다 효과적인 인간-AI 협업을 가능하게 하고자 한다. 본 논문은 세 가지 상호보완적 연구를 제시한다. 첫 번째 연구는 비전 파운데이션 모델이 잠재적 시맨틱을 효과적으로 포착하여 앱 수준 분석을 가능하게 함을 보인다. 최적 수송(optimal transport) 기반 앱간 검색 방법과 통일성(uniformity) 기반 디자인 일관성 검증을 도입하여, UI 검색과 검증을 개별 스크린샷을 넘어 확장한다. 그러나 잠재적 표현은 불투명하여, 디자이너가 어떤 시맨틱 속성이 결과에 기여했는지 파악하거나 특정 속성을 기준으로 검색하기 어렵다는 한계가 있다. 두 번째 연구는 멀티모달 대규모 언어 모델이 명시적 시맨틱 속성을 추출할 수 있음을 보인다. 형성 연구를 통해 UI 영감 탐색에 중요한 다층의 핵심 시맨틱을 도출하고, 설명과 함께 유연한 다중 기준 쿼리가 가능한 시맨틱 기반 검색 방법을 개발하였다. 그러나 명시적 시맨틱은 정적으로 머물러, 속성 간의 관계를 포착하거나 시맨틱이 얼마나 반영되었는지 추적하기는 힘들다. 세 번째 연구는 UI 시맨틱을 계층적으로 조직하고 상호 관계를 드러내는 구조화된 프레임워크와, 사용자와 AI 모두가 활용하는 양방향 매개 메커니즘을 제안한다. 이를 통해 생성형 UI 시스템에서 의도 명세가 어렵다는 실행의 간극(gulf of execution)과 결과 해석이 어렵다는 평가의 간극(gulf of evaluation)을 해소할 수 있음을 보인다.
종합적으로, 본 연구는 잠재적에서 명시적, 구조화된 시맨틱 표현으로의 진화가 UI 디자인에서 인간-AI 협업을 점진적으로 향상시킴을 보인다. 더블 다이아몬드(Double Diamond) 프레임워크에 기여를 매핑하여, 시맨틱 기반 접근법이 영감(inspiration) 활동과 생성(generation) 활동 모두를 지원함을 보인다. 본 논문은 시맨틱 표현이 단순한 기술적 매개체가 아닌, 인간과 AI가 협업할 수 있는 공유된 기반으로서 디자인 프로세스를 지원할 수 있음을 보인다.

다국어 초록 (Multilingual Abstract)

User interface (UI) design involves complex, iterative activities, from exploring designs for inspiration to generating and refining new ones. This process entails understanding UI design semantics, the meanings encoded in interfaces, and designers develop their work by interpreting, expressing, and coordinating these meanings. Meanwhile, modern artificial intelligence (AI) models offer potential support for these activities. Yet, how well they understand semantics remains underexplored, and current tools address semantics only at limited levels and fail to represent these meanings in forms that users can manipulate. This disconnect between the semantics that designers reason about and the representations that AI processes leaves users struggling to manipulate AI systems and interpret their outputs.
This dissertation investigates not only how well AI understands UI design semantics, but also how evolving UI semantic representations—from latent to explicit to structured—can bridge this gap, enabling more effective human-AI collaboration across the design process. We present three complementary studies. The first study demonstrates that vision foundation models effectively capture latent semantics and enable app-level analysis. We introduce an app-to-app retrieval method based on optimal transport and uniformity-based design consistency checks, extending UI search and checks beyond individual screenshots. However, latent representations remain opaque, preventing designers from understanding which semantic attributes contributed to results or searching by specific attributes. The second study demonstrates that multimodal large language models can extract explicit semantic attributes. Through formative studies, we identified key semantics across multiple levels for UI inspiration. We developed semantic-based search methods that enable flexible, multi-criteria queries with explanations. However, explicit semantics remain static descriptions, limited in capturing relationships among semantics or tracking how semantics are reflected in generated UI. The third study proposes a structured framework that organizes UI semantics hierarchically and reveals their interrelationships, along with a bidirectional mediation mechanism that both users and AI can leverage. This approach bridges the gulf of execution—difficulty in specifying intent—and the gulf of evaluation—difficulty in interpreting results—in generative UI systems.
Collectively, these contributions demonstrate that the evolution from latent to explicit to structured semantic representations progressively enhances human-AI collaboration in UI design. By mapping our contributions to the Double Diamond framework, we show how semantic-based approaches support both inspiration and generation. This dissertation demonstrates that semantic representations serve not merely as technical intermediaries but as shared ground where humans and AI can collaborate, supporting the design process.

목차 (Table of Contents)

• Abstract i
• 1. Introduction 1
• 1.1 Background and Motivation 2
• 1.2 Thesis and Contributions 5
• 1.2.1 Thesis Statement 5
• 1.2.2 Contributions 5
• 1.3 Structure of the Dissertation 9
• 2. Background and Related Work 11
• 2.1 UI Design Process and AI Support 11
• 2.2 Computational UI Understanding and Representation 15
• 2.3 Large-scale AI Models for UI 17
• 2.4 Summary and Research Gaps 21
• 3. Latent UI Semantics for App-Level Understanding 23
• 3.1 Introduction 23
• 3.2 Background 26
• 3.2.1 Optimal Transport for App-to-App Retrieval 26
• 3.2.2 Uniformity for Design Consistency Check 28
• 3.3 Methods 29
• 3.3.1 Dataset and UI Representations 29
• 3.3.2 Uniformity of Contrastive Representation 32
• 3.3.3 Optimal Transport 33
• 3.4 Experiments 33
• 3.4.1 Supremacy of Foundation Models 33
• 3.4.2 App-to-App Retrieval 39
• 3.4.3 Design Consistency Check 42
• 3.5 Discussion 45
• 3.6 Summary 48
• 4. Explicit UI Semantics for Explainable Search 49
• 4.1 Introduction 49
• 4.2 Background 52
• 4.2.1 Limitations of Embedding-based Retrieval 52
• 4.2.2 MLLMs for Explainable UI Understanding 53
• 4.3 Formative Study 54
• 4.3.1 Participants and Procedure 55
• 4.3.2 Results 56
• 4.4 Methods 64
• 4.4.1 Semantic Extraction 64
• 4.4.2 S&UI: Semantic-based Retrieval System 69
• 4.5 Computational Evaluation 73
• 4.5.1 App and Screen Category Classification 73
• 4.5.2 UI Element Prediction 76
• 4.5.3 Screen Role Understanding 77
• 4.6 Human Evaluation 78
• 4.6.1 Quality Assessment of Extracted Semantics 79
• 4.6.2 Human Evaluation of Retrieval Method 85
• 4.7 Discussion 92
• 4.8 Summary 95
• 5. Structured UI Semantics for Controllable Generation 97
• 5.1 Introduction 97
• 5.2 Background 100
• 5.2.1 Evolution of UI Generation Methods 100
• 5.2.2 Design Intent Specification in Generative AI 101
• 5.2.3 Intermediate Representations for UI Generation 103
• 5.3 Gulfs in Current UI Generation 104
• 5.3.1 Gulf of Execution: The Articulation Challenge 104
• 5.3.2 Gulf of Evaluation: The Interpretation Challenge 105
• 5.3.3 The Amplification Problem: Gulfs Compounding through Iteration 106
• 5.4 Understanding UI Generation Semantics 107
• 5.4.1 Analysis Process 107
• 5.4.2 Hierarchical Semantic Framework 108
• 5.5 System 111
• 5.5.1 Design Goals 111
• 5.5.2 System Design 112
• 5.6 Human Evaluation 117
• 5.6.1 Participants and Procedure 118
• 5.6.2 Results 121
• 5.7 Discussion 128
• 5.8 Summary 131
• 6. Discussion 133
• 6.1 Lessons Learned 133
• 6.2 The Evolution of UI Semantic Representations 135
• 6.3 Bridging the Double Diamond with AI 137
• 6.4 Implications for AI-Supported Design Tools 138
• 6.5 Limitations 139
• 6.6 Future Research Agendas 140
• 6.6.1 Toward a Unified System 140
• 6.6.2 Evolving and Expanding Semantics 143
• 6.6.3 Designing for Human-AI-Agent Collaboration 145
• 7. Conclusion 146
• 7.1 Summary of Contributions 146
• 7.2 Closing Remarks 148
• A. User Study Details of Chapter 4 161
• A.1 Formative Study Interview Questions 161
• A.2 Human Evaluation Interview Questions 163
• A.3 Comparative Study Instruments 166
• B. User Study Details of Chapter 5 168
• B.1 Comparative Study Instruments 168
• Abstract (Korean) 173