[논문 리뷰] Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps

Kevin Moran, Carlos Bernal-Cárdenas외 3명|arXiv (Cornell University)|2018. 02. 07.

Software Engineering Research인용 수 6

한 줄 요약

이 논문은 머신러닝 기반 시스템인 ReDraw를 제시한다. 이 시스템은 모ック업에서 GUI 컴포넌트를 감지하고, 딥 러닝 및 소프트웨어 마이닝을 사용해 컴포넌트를 분류한 후, K-가장 가까운 이웃 알고리즘을 통해 구조화되고 시각적으로 정확한 안드로이드 앱으로 조립함으로써 모바일 GUI 프로토타이핑을 자동화한다. 이 시스템은 컴포넌트 분류 정확도 91%를 달성하며, 목표 모ocked-up 이미지에 뛰어난 시각적 유사성을 유지한다.

ABSTRACT

It is common practice for developers of user-facing software to transform a mock-up of a graphical user interface (GUI) into code. This process takes place both at an application's inception and in an evolutionary context as GUI changes keep pace with evolving features. Unfortunately, this practice is challenging and time-consuming. In this paper, we present an approach that automates this process by enabling accurate prototyping of GUIs via three tasks: detection, classification, and assembly. First, logical components of a GUI are detected from a mock-up artifact using either computer vision techniques or mock-up metadata. Then, software repository mining, automated dynamic analysis, and deep convolutional neural networks are utilized to accurately classify GUI-components into domain-specific types (e.g., toggle-button). Finally, a data-driven, K-nearest-neighbors algorithm generates a suitable hierarchical GUI structure from which a prototype application can be automatically assembled. We implemented this approach for Android in a system called ReDraw. Our evaluation illustrates that ReDraw achieves an average GUI-component classification accuracy of 91% and assembles prototype applications that closely mirror target mock-ups in terms of visual affinity while exhibiting reasonable code structure. Interviews with industrial practitioners illustrate ReDraw's potential to improve real development workflows.

연구 동기 및 목표

• 모바일 앱 개발에서 GUI 모ocked-up을 실제 코드로 수작업으로 변환하는 데 소요되는 시간과 실수를 줄이기 위해.
• 기계학습을 활용해 프로토타이핑 단계를 자동화함으로써 디자이너와 개발자의 부담을 경감하기 위해.
• GUI 모ocked-up을 기능성 있는 안드로이드 프로토타입 애플리케이션으로 신속하고 정확하며 시각적으로 충실하게 변환할 수 있도록 하기 위해.
• 실제 개발 프로세스에 자동화된 프로토타이핑을 통합함으로써 산업 워크플로우를 향상시키기 위해.
• 디자인 모ocked-up과 네이티브 코드 사이의 추상화 갭을 메우는 종단간 솔루션을 제공하기 위해.

제안 방법

• 디자인 파일에서의 메타데이터 추출 또는 컴퓨터 비전 기반 기법을 사용해 모ocked-up 아티팩트 내 GUI 컴포넌트를 감지한다.
• 마이닝된 소프트웨어 레포지토리와 동적 분 析를 기반으로 훈련된 딥 컨volution 네트워크를 사용해 감지된 컴포넌트를 도메인 특화 유형(예: 토글 버튼)으로 분류한다.
• 실제 안드로이드 앱 레이아웃을 기반으로 훈련된 K-가장 가까운 이웃 알고리즘을 사용해 계층적 GUI 구조를 구성한다.
• 분류된 컴포넌트와 계층적 구조를 데이터 기반 코드 생성 기법을 통해 최종 프로토타입 애플리케이션으로 조립한다.
• CNN 분류기 훈련을 위해 자동화된 동적 분석 및 액세스 가능성 서비스를 활용해 GUI 메타데이터를 추출한다.
• 소프트웨어 레포지토리, 동적 분석, 모ocked-up 아티팩트 등 다양한 데이터 소스를 통합해 통합적이고 플랫폼 전용 프로토타이핑 파이프라인을 훈련한다.

실험 결과

연구 질문

• RQ1 기계학습 시스템이 정적 모ocked-up 이미지 또는 디자인 파일에서 GUI 컴포넌트를 정확하게 감지하고 분류할 수 있는가?
• RQ2 KNN 기반 접근 방식이 컴포넌트 분류 결과로부터 의미적이고 시각적으로 정확한 GUI 계층을 얼마나 잘 재구성할 수 있는가?
• RQ3 생성된 프로토타입이 원본 모ocked-up과 비교해 얼마나 시각적 외관과 구조적 레이아웃에서 유사한가?
• RQ4 pix2code와 REMAUI와 같은 기존 베이스라인과 비교해 분류 정확도와 시각적 정확도 측면에서 제안된 시스템의 성능은 어떠한가?
• RQ5 산업 현장의 전문가들이 이 시스템을 실제 개발 워크플로우에 통합하고 자동화의 이점을 얻을 수 있는가?

주요 결과

• ReDraw는 마이닝된 소프트웨어 레포지토리와 동적 분 析를 기반으로 훈련된 딥 컨volution 네트워크를 사용해 평균 GUI 컴포넌트 분류 정확도 91%를 달성한다.
• qualitative 및 quantitative 평가를 통해 검증된 결과, 시스템은 원본 모ocked-up과 강한 시각적 유사성을 보이는 프로토타입 애플리케이션을 생성한다.
• KNN 기반 조립 방법으로 생성된 계층적 구조는 인간 개발자가 일반적으로 생성하는 레이아웃 구조와 유사하다.
• 산업 현장의 전문가들은 ReDraw가 프로토타이핑 단계를 가속화함으로써 실제 개발 워크플로우를 향상시킬 잠재력을 지녔다고 보고했다.
• pix2code와 REMAUI와 같은 기존 베이스라인과 비교해 ReDraw는 컴포넌트 분류 및 시각적 정확도 측면에서 뛰어난 성능을 보였다.
• 이 시스템의 아키텍처는 다른 플랫폼으로도 일반화 가능하지만, 향후 작업에서는 전이 학습 또는 플랫폼 전용 메타데이터 추출이 필요할 수 있다.