[논문 리뷰] Sketch2code: Generating a website from a paper mockup

Alex Robinson|arXiv (Cornell University)|2019. 05. 09.

Video Analysis and Summarization참고 문헌 90인용 수 5

한 줄 요약

이 논문은 수작업으로 그린 웨이퍼프레임에서 자동으로 HTML 웹사이트를 생성하는 시스템인 Sketch2code를 제시한다. 이는 전통적인 컴퓨터 비전 기법과 딥 러닝 기반의 의미적 세그멘테이션을 활용한 두 가지 접근 방식을 사용한다. 딥 러닝 방법이 전통 기법을 능가하며, 웨이퍼프레임에서 코드로의 변환에 있어 딥 러닝의 잠재력을 입증하였고, 향후 연구를 촉진하기 위해 데이터셋과 평가 프레임워크를 공개하였다.

ABSTRACT

An early stage of developing user-facing applications is creating a wireframe to layout the interface. Once a wireframe has been created it is given to a developer to implement in code. Developing boiler plate user interface code is time consuming work but still requires an experienced developer. In this dissertation we present two approaches which automates this process, one using classical computer vision techniques, and another using a novel application of deep semantic segmentation networks. We release a dataset of websites which can be used to train and evaluate these approaches. Further, we have designed a novel evaluation framework which allows empirical evaluation by creating synthetic sketches. Our evaluation illustrates that our deep learning approach outperforms our classical computer vision approach and we conclude that deep learning is the most promising direction for future research.

연구 동기 및 목표

• 종이에 그린 스케치에서 기능성 있는 웹사이트로의 자동 변환을 가능하게 하여 웨이퍼프레임에서 코드로의 변환 갭을 메운다.
• 웨이퍼프레임 요소 검출 및 코드 생성에 있어 전통적인 컴퓨터 비전 기법과 딥 러닝 기반 의미적 세그멘테이션 기법을 비교한다.
• 향후 디자인에서 코드로의 자동화 연구를 지원하기 위해 웨이퍼프레임과 해당 HTML 코드를 포함한 공개 데이터셋을 구축한다.
• 합성 스케치를 사용하여 반복 가능한 실증 평가 프레임워크를 설계하여 여러 지표에 따라 성능을 객관적으로 평가한다.
• 비개발자가 빌드업 코드 생성을 자동화함으로써 독립적으로 웹사이트 프로토타이핑을 수행할 수 있도록 한다.

제안 방법

• 전통적인 컴퓨터 비전(모서리 검출, 색상 세그멘테이션, 텍스트 검출)과 딥 러닝 기반 의미적 세그멘테이션 네트워크를 활용한 이중 접근 방식의 프레임워크를 개발하였다.
• 10,000개의 웹사이트 웨이퍼프레임과 해당 HTML 코드로 구성된 데이터셋을 구축하였으며, 일관성을 확보하기 위해 통제된 스케치 제작 절차를 적용하였다.
• 카메라로 촬영한 이미지를 정제되고 표준화된 스케치로 변환하기 위해 전처리를 적용하였다.
• 합성 웨이퍼프레임 스케치 데이터로 훈련된 U-Net 스타일의 딥 러닝 아키텍처를 의미적 세그멘테이션에 사용하였다.
• 레이아웃 정규화, 정렬 오류 수정, 검출된 요소를 의미론적 HTML 태그로 매핑하기 위한 후처리 단계를 구현하였다.
• 생성된 웹사이트를 실시간으로 배포하고, 호스팅된 웹 배포를 통해 실시간 협업을 가능하게 하였다.

실험 결과

연구 질문

• RQ1 RQ1: 전통적인 컴퓨터 비전 파이프라인은 수작업으로 그린 스케치에서 텍스트, 단추, 입력 필드 등의 웨이퍼프레임 요소를 효과적으로 검출하고 분류할 수 있는가?
• RQ2 RQ2: 딥 러닝 기반 의미적 세그멘테이션 접근 방식이 전통적인 컴퓨터 비전 기법보다 웨이퍼프레임 요소 검출 및 분류, 그리고 정확한 HTML 구조 생성에서 뛰어난 성능을 보이는가?
• RQ3 RQ3: 사용자들은 각 방법을 통해 생성된 웹사이트의 시각적 정확도와 구조적 정확도 측면에서 어떤 품질과 사용성에 대해 평가하는가?
• RQ4 RQ4: 합성 스케치 제작 절차를 통해 웨이퍼프레임에서 코드로의 변환 시스템에 대한 신뢰성 있고 반복 가능한 평가가 가능한가?

주요 결과

• 딥 러닝 기반 의미적 세그멘테이션 접근 방식이 전통적인 컴퓨터 비전 기법보다 요소 검출 및 분류 정확도에서 뚜렷이 뛰어났다.
• 마이크로 성능 평가에서 딥 러닝 모델은 모든 요소 유형에서 높은 F1 점수를 기록하였으며, 특히 입력 필드나 단추와 같은 복잡한 구성 요소에서 두각을 나타냈다.
• 시각적 비교 작업에서 사용자들은 딥 러닝 모델의 출력을 더 선호하였으며, 더 나은 레이아웃 정렬과 의도한 디자인을 더 정확하게 반영한다고 평가하였다.
• 구조적 비교 결과, 딥 러닝 모델은 레이아웃 오류와 중첩 오류가 적은 더 의미론적으로 정확한 HTML을 생성하였다.
• 사용자 연구 결과, 딥 러닝으로 생성된 웹사이트가 전통적 접근 방식에 비해 더 사용하기 쉬우며 원본 스케치의 의도에 더 가까운 것으로 평가되었다.
• 평가에서 뛰어난 성능를 보였음에도 불구하고, 두 시스템 모두 생산 수준의 신뢰성은 확보하지 못하였으며, 강인성과 일반화 능력 향상 여지가 있음을 시사하였다.