[논문 리뷰] Sketch2Code: Transformation of Sketches to UI in Real-time Using Deep Neural Network

Vanita Jain, Piyush Agrawal외 3명|arXiv (Cornell University)|2019. 10. 20.

Interactive and Immersive Displays인용 수 13

한 줄 요약

Sketch2Code는 실시간으로(평균 추론 시간: 129 ms) 수기로 그린 UI 스케치를 플랫폼에 종속되지 않는 UI 표현 객체로 변환하는 딥러닝 모델을 제안한다. 이는 149개의 스케치에 걸쳐 2001개의 UI 요소를 포함한 고유한 데이터셋을 사용한다. 시스템은 최적화된 YOLO 기반 네트워크를 통해 UI 요소를 검출하고, 겹치는 요소를 해결하며, 플랫폼별로 구분되는 코드로 파싱 가능한 DOM 유사 JSON 객체를 생성함으로써, 재학습 없이도 효율적인 다중 플랫폼 UI 프로토타이핑을 가능하게 한다.

ABSTRACT

User Interface (UI) prototyping is a necessary step in the early stages of application development. Transforming sketches of a Graphical User Interface (UI) into a coded UI application is an uninspired but time-consuming task performed by a UI designer. An automated system that can replace human efforts for straightforward implementation of UI designs will greatly speed up this procedure. The works that propose such a system primarily focus on using UI wireframes as input rather than hand-drawn sketches. In this paper, we put forward a novel approach wherein we employ a Deep Neural Network that is trained on our custom database of such sketches to detect UI elements in the input sketch. Detection of objects in sketches is a peculiar visual recognition task that requires a specific solution that our deep neural network model attempts to provide. The output from the network is a platform-independent UI representation object. The UI representation object is a dictionary of key-value pairs to represent the UI elements recognized along with their properties. This is further consumed by our UI parser which creates code for different platforms. The intrinsic platform-independence allows the model to create a UI prototype for multiple platforms with single training. This two-step approach without the need for two trained models improves over other methods giving time-efficient results (average time: 129 ms) with good accuracy.

연구 동기 및 목표

• 수기로 그린 UI 스케치를 기능성 있는 코드 프로토타입으로 변환하는 데 소요되는 시간을 자동화하는 것.
• 제약 조건이 없는 자유로운 손그림에서 UI 요소를 인식할 수 있는 딥 네트워크를 개발하는 것. 이는 도전적인 시각 인식 작업이다.
• 다양한 플랫폼에 대해 재학습 없이도 빠른 코드 생성이 가능한 플랫폼에 종속되지 않는 UI 표현 객체를 생성하는 것.
• 와이어프레임이나 이중 단계 검출 파이프라인에 의존하는 기존 방법에 비해 효율성과 정확도를 향상시키는 것.
• 다양한 조명 조건과 스케치 품질(그림자, 과도한 포화도 포함)에서 모델의 강인성을 평가하는 것.

제안 방법

• 학습을 위해 149개의 스케치에 걸쳐 총 2001개의 레이블이 부여된 UI 요소(예: 버튼, 텍스트 필드)를 포함한 고유한 데이터셋을 구축하였다.
• 손그림 스케치 내의 UI 요소를 검출하기 위해 YOLO 기반 단일 스풷 객체 검출 모델을 미세 조정하였으며, 입력 이미지를 416×416로 리사이징하였다.
• 공간적으로 겹치는 UI 요소를 해결하기 위해, 더 큰 또는 더 두드러진 구성 요소를 우선순위로 정하는 히ュ리스틱 기반의 겹침 처리 전략을 적용하였다.
• 모델은 요소 유형, 위치, 속성 등을 인코딩한 키-값 쌍의 딕셔너리로 구성된 JSON 형식의 플랫폼에 종속되지 않는 UI 표현 객체를 출력한다.
• React 기반 UI 파서는 이 JSON 표현을 소비하여 플랫폼별로 맞춤화된 UI 코드를 생성하며, 이를 통해 다중 플랫폼 배포가 가능하다.
• 추론 속도를 향상시키기 위해 NVIDIA GeForce GTX 1060 GPU와 cuDNN를 사용하였으며, 순수 모델 추론 속도 측정을 위해 이미지 로딩 시간은 제외하였다.

실험 결과

연구 질문

• RQ1 다양한 조명 조건, 스케치 스타일, 배경 조건에도 불구하고 딥 네트워크가 자유로운 손그림에서 UI 요소를 정확하게 검출할 수 있는가?
• RQ2 저조도, 그림자, 과도한 포화도와 같은 도전적인 시각 조건에서 모델의 성능은 어떠한가?
• RQ3 하나의 학습된 모델이 플랫폼에 종속되지 않는 UI 표현 객체를 생성하여, 이를 다양한 플랫폼의 기능성 코드로 변환할 수 있는가?
• RQ4 모델의 추론 속도는 얼마이며, 상호작용 기반 프로토타이핑에 적합한 실시간 성능를 달성할 수 있는가?
• RQ5 학습 데이터가 증가함에 따라 모델 성능은 어떻게 변화하는가? 특히 정확도와 강인성 측면에서 어떻게 변화하는가?

주요 결과

• 모델은 평균 129ms의 추론 시간을 기록하여 상호작용 기반 UI 프로토타이핑에 적합한 실시간 성능를 입증하였다.
• 저조도 및 그림자가 있는 조건에서는 배경과 전경 요소를 구분하는 데 어려움을 겪어 추론 시간이 증가하는 경향을 보였다.
• 과도한 포화도와 반사성 배경은 배경이 일관되지 않거나 노이즈가 많은 경우 정확도 저하를 유발하여 잘못된 예측을 초래한다.
• 청결한 while 배경과 최적의 조명 조건에서 모델은 높은 정확도와 낮은 추론 시간을 기록하여 가장 우수한 성능를 보였다.
• 149장의 이미지와 2001개의 레이블된 구성 요소로 이루어진 소규모 데이터셋에서도 모델은 강력한 일반화 능력을 보이며, 더 큰 다각도의 학습 데이터로 향상 가능성을 시사한다.
• 검출 후 UI 표현 생성 및 파싱의 이중 단계 파이프라인은 별도의 플랫폼별 모델이 필요 없이 플랫폼 독립성을 달성한다.