[논문 리뷰] BlackBox Toolkit: Intelligent Assistance to UI Design

Vinoth Pandian Sermuga Pandian, Sarah Suleri|arXiv (Cornell University)|2020. 04. 04.

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

한 줄 요약

이 논문은 UI 디자이너가 반복 작업을 자동화하면서도 창의적 결정보존을 유지할 수 있도록 돕는 두 부분으로 구성된 AI 시스템인 BlackBox Toolkit을 소개한다. MetaMorph는 미세조정된 RetinaNet을 사용해 저해상도 스케치에서 UI 요소를 검출한다(63.5% mAP 달성), 반면 Blu는 재정렬된 RICO 데이터셋을 기반으로 한 딥러닝을 통해 UI 스크린샷을 구조화된 블루프린트로 변환하여 자동 레이아웃 복원 및 디자인 이관을 가능하게 한다.

ABSTRACT

User Interface (UI) design is an creative process that involves considerable reiteration and rework. Designers go through multiple iterations of different prototyping fidelities to create a UI design. In this research, we propose to modify the UI design process by assisting it with artificial intelligence (AI). We propose to enable AI to perform repetitive tasks for the designer while allowing the designer to take command of the creative process. This approach makes the machine act as a black box that intelligently assists the designers in creating UI design. We believe this approach would greatly benefit designers in co-creating design solutions with AI.

연구 동기 및 목표

• AI를 지능형 보조자로 통합하여 UI 디자인의 정신적 부담과 반복 작업을 줄이기 위해.
• 저수준의 반복 작업을 자동화하면서도 디자이너가 창의적 결정보존을 유지할 수 있도록 하기 위해.
• AI 기반 변환을 통해 저해상도 스케치와 고해상도 프로토타입 사이의 격차를 메우기 위해.
• 개발자 이관을 향상시키기 위해 시각적 UI 스크린샷에서 기계로 읽을 수 있는 디자인 블루프린트를 생성하는 데 지원하기 위해.
• AI 보조 공창작을 탐색하고, AI를 르네상스 시대의 조수와 유사한 '블랙박스' 보조자로 모델링하기 위해.

제안 방법

• MetaMorph는 저해상도 스케치에서 19개의 UI 요소 카테고리(예: 버튼, 텍스트 필드 등)를 식별하고 국소화하기 위해 미세조정된 RetinaNet 딥 네트워크를 사용한다.
• MetaMorph의 훈련 데이터를 보강하기 위해 UISketch 데이터셋의 UI 요소를 무작위로 배치하여 생성한 합성 데이터셋 Syn(125,000장의 이미지)이 사용되었다.
• Blu는 재정렬된 RICO 데이터셋의 일부를 활용해 안드로이드 UI 스크린샷에서 UI 요소 카테고리, 위치, 그룹화 및 레이아웃 구조를 딥러닝으로 검출한다.
• 레이아웃 검출 과정은 게슈탈트 심리학 원리를 통합하여 UI 요소의 정렬 및 그룹화를 알고리즘적으로 유추한다.
• 두 도구는 디자이너가 스케치를 그린 후 중간 해상도로 변환하고 고해상도 안드로이드 XML 코드를 생성할 수 있도록 통합된 프로토타이핑 워크벤치(Eve)에 통합되었다.
• 시스템은 '블랙박스' 보조자로 설계되었으며, AI는 반복 작업(예: 요소 검출, 레이아웃 복원)을 처리하지만, 디자이너는 스타일링 및 창의적 결정보존을 유지한다.

실험 결과

연구 질문

• RQ1 AI를 사용해 UI 디자인의 반복 작업을 자동화하면서도 디자이너가 창의적 결정보존을 유지할 수 있는가?
• RQ2 딥러닝 모델이 충분한 정확도로 저해상도 스케치에서 UI 요소를 검출하여 후속 프로토타이핑을 가능하게 할 수 있는가?
• RQ3 딥러닝과 게슈탈트 원리를 활용해 UI 스크린샷에서 레이아웃 구조를 얼마나 자동으로 추론할 수 있는가?
• RQ4 AI 보조 도구는 재작업을 줄이고 UI 디자인 및 개발자 이관의 효율성을 어떻게 향상시킬 수 있는가?
• RQ5 디자이너가 창의성의 주도자로 남아 있는 동안 AI는 UI 디자인 공창작에서 어떤 역할을 할 수 있는가?

주요 결과

• MetaMorph는 미세조정된 RetinaNet 모델을 사용해 저해상도 스케치에서 19개의 UI 요소 카테고리를 검출하는 데 평균 정밀도(mAP) 63.5%를 달성했다.
• 125,000장의 생성된 로우파이 스케치를 포함한 합성 데이터셋 Syn은 MetaMorph 모델의 강건성과 일반화 능력을 크게 향상시켰다.
• Blu는 재정렬된 RICO 데이터셋의 일부를 활용해 스크린샷에서 UI 블루프린트와 레이아웃 트리를 성공적으로 복원하여 구조화된 디자인 표현을 가능하게 했다.
• RICO의 UI 요소 계층 및 레이아웃 정보를 재정렬함으로써 자동 레이블링 오류를 수정하여 모델 신뢰도를 향상시켰다.
• MetaMorph와 Blu가 Eve 프로토타이핑 워크벤치에 통합되어 스케치에서 고해상도 안드로이드 XML 코드로의 엔드 투 엔드 변환을 가능하게 하였으며, 각 단계에서 디자이너의 제어를 유지할 수 있었다.
• BlackBox Toolkit는 AI가 UI 디자인에서 '블랙박스' 보조자로 기능할 수 있음을 입증하였으며, 반복 작업을 자동화하면서도 인간의 창의성과 제어를 유지할 수 있음을 보여주었다.