디자이너가 디자인한 UI를 변환하는 개발자를 위한 딥러닝

디자이너가 디자인한 GUI를 다시 개발자 코딩하는 일은 필요하지만 힘든 일입니다. 이를 딥러닝으로 해결하면 어떨까요?

논문 제목은 pix2code: Generating Code from a Graphical User Interface Screenshot 이며, 2017년에 발표한 논문입니다.

깃헙 스타가 많아 다들 아실지도 모르겠지만 재밌게 읽으면 좋을 것 같습니다. :-)

  • paper : https://arxiv.org/pdf/1705.07962v2.pdf
  • github : https://github.com/tonybeltramelli/pix2code
  • webpage : https://uizard.io/research/#pix2code
  • video : https://www.youtube.com/watch?v=pqKeXkhFA3I

이 후에 Code2Pix 등의 후속 연구도 진행하였으니 관심이 있는 분들은 보시면 좋을 것 같습니다.

초록으로 읽기

디자이너가 만든 GUI(Graphic User Interface 그래픽 사용자 인터페이스) 스크린샷을 컴퓨터 코드로 변환하는 작업은 커스터마이즈 소프트웨어, 웹/모바일 어플리케이션을 만들기 위해 일반적으로 하는 작업입니다.

본 논문에서는 딥러닝을 사용하여 end-to-end로 학습을 진행합니다. iOS, Android, 웹 총 3가지 플랫폼에서 코드를 자동생성하였고, 약 77%의 정확도에 도달했습니다.

더 읽어보기

Introduction

디자이너가 만든 GUI를 기반으로 클라이언트측의 소프트웨어를 구현하는 작업은 개발자의 업무입니다. 그러나 GUI 코드를 구현하는 것은 시간이 많이 걸리고, 실제 기능과 논리를 구현하는데 더 많은 작업이 필요합니다.

이러한 GUI를 구현하는 데 사용되는 컴퓨터 언어는 각 시스템, 플랫폼에 따라도 다르기에 매우 지루하고 반복적인 작업을 진행해야 합니다.

이 논문에서는 모델 시퀀스와 시공간적 시각적 피쳐를 동시에 input으로 제공하여, 단일 GUI 이미지에서 입력으로 가변 길이의 토큰 문자열을 생성하기 위해 확률적 그래디언트 디센트(SGD)를 사용하여 end-to-end 모델을 훈련합니다.

논문이 가지는 기여는 총 두 가지입니다.

  1. CNN과 RNN을 사용하여 단일 GUI에서 컴퓨터 토큰을 생성하는 pix2code
  2. GUI와 세 가지 플랫폼에 대한 소스코드 데이터셋 (iOS and Android native mobile interfaces, and multi-platform web-based HTML/CSS interfaces)

그 외

1

2

3

4

5

Leave a Comment