[논문 리뷰] Creating User Interface Mock-ups from High-Level Text Descriptions with Deep-Learning Models

Forrest Huang, Gang Li외 3명|arXiv (Cornell University)|2021. 10. 14.

Innovative Human-Technology Interaction참고 문헌 27인용 수 4

한 줄 요약

이 논문은 고수준의 자연어 기술서술에서 저해상도 UI 모ocked-up을 자동으로 생성하기 위한 세 가지 새로운 딥러닝 방법—두 가지 검색 기반 및 한 가지 생성 기반—을 소개한다. 제안된 방법들, 즉 텍스트-에서-UI 생성기와 두 가지 다중모달 검색기 포함하여, 일관성 있고 다양한, 관련성이 높은 UI 설계를 생성하는 데 강력한 성능을 보이며, 사용자 연구를 통해 전문 디자이너와 비전문가 모두에게 실용적임을 확인하였다.

ABSTRACT

The design process of user interfaces (UIs) often begins with articulating high-level design goals. Translating these high-level design goals into concrete design mock-ups, however, requires extensive effort and UI design expertise. To facilitate this process for app designers and developers, we introduce three deep-learning techniques to create low-fidelity UI mock-ups from a natural language phrase that describes the high-level design goal (e.g. "pop up displaying an image and other options"). In particular, we contribute two retrieval-based methods and one generative method, as well as pre-processing and post-processing techniques to ensure the quality of the created UI mock-ups. We quantitatively and qualitatively compare and contrast each method's ability in suggesting coherent, diverse and relevant UI design mock-ups. We further evaluate these methods with 15 professional UI designers and practitioners to understand each method's advantages and disadvantages. The designers responded positively to the potential of these methods for assisting the design process.

연구 동기 및 목표

• 고수준의 디자인 목표를 구체적인 UI 모ocked-up으로 번역하는 데 어려움을 해결하는 것—전문 디자인 기술이 필요한 시간이 오래 걸리는 작업.
• 비전문가 앱 개발자와 디자이너가 자연어 기술서술만으로도 사용 가능한 UI 프로토타입을 생성할 수 있도록 하는 것.
• 다양하고 일관성 있고 관련성이 높은 UI 제안을 지원하는 방법을 개발하여 수동 디자인 노력 감소와 디자인 커뮤니케이션 향상.
• 정량적 지표와 사용자 연구를 통해 실제 디자인 워크플로우에서 검색 기반 및 생성 기반 접근 방식의 효과성을 평가하는 것.

제안 방법

• 텍스트-에서-UI 생성기(UI Generator)를 제안한다. 이는 텍스트 기술서술에서 일련의 시퀀스-투-시퀀스 아키텍처를 사용하여 UI 모ocked-up을 합성하고, 품질 필터링을 위한 후처리 기법을 적용한다.
• 다중모달 검색기(Multi-modal Retriever)를 도입한다. 이는 텍스트와 UI의 공동 임베딩을 학습하여 의미적 유사성 기반으로 대규모 코퍼스에서 관련 설계를 검색하는 다중모달 검색 모델이다.
• 텍스트 전용 검색기(Text-only Retriever)를 개발한다. 이는 텍스트 임베딩만을 사용하여 기술서술과 UI를 매칭함으로써 빠르고 해석 가능한 검색을 가능하게 한다.
• 배치 검증 및 시각적 품질 필터링과 같은 후처리 기법을 적용하여 생성된 모ocked-up의 일관성과 사용 가능성을 향상시킨다.
• 모든 모델의 사전 훈련 및 평가를 위해 대규모 쌍체의 텍스트-UI 데이터셋(screen2words)을 사용하여 기술서술과 시각적 출력 간의 일치를 보장한다.
• 텍스트 및 UI 인코딩을 위한 트랜스포머 기반 아키텍처를 활용하여 복잡한 디자인 의미론과 구조적 관계를 효과적으로 모델링한다.

실험 결과

연구 질문

• RQ1 딥러닝 모델은 고수준의 자연어 기술서술에서 얼마나 잘 일관성 있고 다양한 저해상도 UI 모ocked-up을 생성할 수 있는가?
• RQ2 검색 기반 접근 방식과 생성 기반 접근 방식 간의 상대적 강점과 약점은 무엇인가? 관련성이 높은 UI 설계를 제안하는 데서.
• RQ3 기존 방법들과 비교해 제안된 방법들은 다양성, 관련성, 일관성 측면에서 어떻게 성능을 발휘하는가?
• RQ4 이러한 모델들은 아이디어 도출에서 정밀 조정에 이르기까지 UI 디자인 프로세스의 다양한 단계에서 얼마나 효과적으로 기여하는가?
• RQ5 전문 UI 디자이너들은 실제 디자인 워크플로우에서 AI 기반 UI 제안의 유용성과 사용성에 대해 어떻게 평가하는가?

주요 결과

• 텍스트-에서-UI 생성기는 온도 조절을 통해 다양성을 조절할 수 있는 샘플링 기반 생성 과정을 사용하여 기술서술에서 새로운 일관성 있는 UI 모ocked-up을 성공적으로 생성한다.
• 다중모달 검색기는 공동 시각-텍스트 임베딩을 활용함으로써 텍스트 전용 검색기보다 의미적으로 관련성이 높은 설계를 더 잘 검색한다.
• 15명의 전문 디자이너를 대상으로 한 사용자 연구에서 모든 세 가지 방법에 대해 강력한 긍정적 피드백을 확인하였으며, 특히 아이디어 도출 및 빠른 프로토타이핑에 유용함을 확인하였다.
• 텍스트 전용 검색기는 속도와 해석 가능성 덕분에 초기 단계의 디자인 영감으로 선호되었고, 텍스트-에서-UI 생성기는 혁신성과 다양성에서 뛰어났다.
• 특히 추상적이거나 고수준의 디자인 목표가 제시되었을 경우, 생성 모델이 검색 기반 모델보다 더 높은 다양성을 보였다.
• 모든 방법이 기준 방법에 비해 디자인 제안 품질에서 상당한 향상을 보였으며, 텍스트-에서-UI 생성기는 신규성과 일관성 측면에서 최신 기술 수준의 성능을 달성하였다.