[논문 리뷰] Auto Completion of User Interface Layout Design Using Transformer-Based Tree Decoders

Yang Li, Julien Amelot외 3명|arXiv (Cornell University)|2020. 01. 14.

Video Analysis and Summarization참고 문헌 25인용 수 11

한 줄 요약

이 논문은 부분적인 트리 구조 입력으로부터 그래픽 사용자 인터페이스(UI) 레이아웃 설계를 자동으로 보완하기 위한 트랜스포머 기반 트리 디코더 프레임워크를 제안한다. 두 가지 새로운 아키텍처—포인터 트랜스포머 및 재귀 트랜스포머 디코더—를 도입하여 정확한 공간 배치와 구조를 가진 계층적 UI 요소를 생성하며, 너비 우선 탐색 설정 하에서 공개된 안드로이드 UI 데이터셋에서 최고 성능을 기록하여 F1 점수는 최대 91.8%이며 편집 거리는 최소 11.79에 이를 수 있다.

ABSTRACT

It has been of increasing interest in the field to develop automatic machineries to facilitate the design process. In this paper, we focus on assisting graphical user interface (UI) layout design, a crucial task in app development. Given a partial layout, which a designer has entered, our model learns to complete the layout by predicting the remaining UI elements with a correct position and dimension as well as the hierarchical structures. Such automation will significantly ease the effort of UI designers and developers. While we focus on interface layout prediction, our model can be generally applicable for other layout prediction problems that involve tree structures and 2-dimensional placements. Particularly, we design two versions of Transformer-based tree decoders: Pointer and Recursive Transformer, and experiment with these models on a public dataset. We also propose several metrics for measuring the accuracy of tree prediction and ground these metrics in the domain of user experience. These contribute a new task and methods to deep learning research.

연구 동기 및 목표

• 부분적인 레이아웃에서 누락된 UI 요소와 그들의 계층적 구조를 예측하여 UI 레이아웃 설계를 자동화한다.
• 딥 러닝을 활용하여 2차원 공간 배치와 트리 구조 생성의 과제를 해결한다.
• 사용자 경험에 기반한 새로운 평가 지표를 설계하여 레이아웃 예측 품질을 측정한다.
• 트랜스포머 기반 디코더가 구조적 2차원 레이아웃 생성 과제에서 얼마나 효과적인지 탐색한다.
• UI 설계를 초월하여 다른 트리 구조 레이아웃 문제에 대해서도 일반화 가능성을 탐색한다.

제안 방법

• 자기 회귀적 레이아웃 생성을 위한 두 가지 트랜스포머 기반 트리 디코더 아키텍처—포인터 트랜스포머 및 재귀 트랜스포머—를 제안한다.
• 자기 어텐션 메커니즘을 사용하여 UI 레이아웃 내 계층적 관계와 공간적 종속성을 모델링한다.
• UI 요소의 좌표를 연속 값이 아닌 이산적 변수(원-핫 인코딩)로 간주함으로써 학습 안정성과 성능을 향상시킨다.
• 위계적 순서 또는 너비 우선 순서에 따라 노드를 생성하는 트리 구조 디코딩 프로세스를 적용한다.
• 세 가지 평가 지표를 도입: 부모-자식 쌍 예측에 대한 F1 점수, 다음 항목 정확도, 구조적 및 공간적 정밀도에 대한 편집 거리.
• 부분 입력(10%, 50%, 80%)이 다양한 정도로 포함된 50,000개 이상의 공개 안드로이드 UI 레이아웃 데이터셋을 기반으로 모델을 학습하고 평가한다.

실험 결과

연구 질문

• RQ1 트랜스포머 기반 트리 디코더는 정확한 공간 배치와 계층적 구조를 갖춘 부분적인 UI 레이아웃을 효과적으로 보완할 수 있는가?
• RQ2 다른 디코딩 전략—포인터 대비 재귀 방식—은 너비 우선 탐색 대비 깊이 우선 탐색 순서에서 어떻게 성능을 내는가?
• RQ3 제안된 평가 지표가 사용자 경험과 레이아웃 품질과 얼마나 상관이 있는가?
• RQ4 왜 좌표를 이산적 변수로 간주하는 것이 이 작업에서 연속 회귀보다 우수한가?
• RQ5 이 모델은 UI 설계를 초월하여 트리 구조적 2차원 배치 문제에 일반화될 수 있는가?

주요 결과

• 재귀 트랜스포머 디코더는 대부분의 지표에서 포인터 트랜스포머 및 기존 베이스라인 모델을 능가하며, 특히 너비 우선 탐색 설정에서 F1 점수 91.8%와 편집 거리 11.79를 기록하여 80% 부분 레이아웃에서 최고 성능을 보였다.
• 재귀 트랜스포머는 이전에 디코딩된 모든 노드에 직접 접근하지 않더라도 강력한 성능 유지를 보이며, 효과적인 계층적 추론 능력을 보였다.
• 포인터 트랜스포머는 깊이 우선 탐색에서 모든 부분 트리 노드에 접근할 수 있어 성능이 뛰어나지만, 여전히 다음 항목 예측에서 재귀 트랜스포머에 뒤지지 않았다.
• 정확한 좌표를 무시하고 구조적 및 의미적 요소에 집중하는 조건으로 지표를 완화하면, 80% 부분 레이아웃에서 모든 모델이 90% 이상의 다음 항목 정확도를 기록했으며, 재귀 트랜스포머가 95.3%로 가장 높은 성능을 보였다.
• 좌표를 원-핫 이산 변수로 처리하는 것이 연속 회귀보다 훨씬 우수한 결과를 얻었으며, 이는 이산 토큰화가 레이아웃 의미를 더 잘 포착함을 시사한다.
• 모델는 정밀한 경계 상자 예측에서는 어려움을 겪었으며, 이는 강력한 구조적 성능에도 불구하고 공간 정확도가 여전히 도전 과제임을 시사한다.