earticle

영어

Recently, studies are being conducted to recognize a sketch image of a GUI (Graphical User Interface) based on a deep learning and to make it into a code implemented in an application. UI / UX designers can communicate with developers through storyboards when developing mobile applications. However, UI / UX designers can create different widgets for ambiguous widgets. In this paper, we propose an automatic UI detection method using symbol markers to improve the accuracy of DNN (Deep Neural Network) based UI identification. In order to evaluate the performance with or without the symbol markers, their accuracy is compared. In order to improve the accuracy according to of the symbol marker, the results are analyzed when the shape is a circle or a parenthesis. The use of symbol markers will reduce feedback between developer and designer, time and cost, and reduce sketch image UI false positives and improve accuracy.

한국어

최근 딥러닝을 사용하여 스케치이미지에 있는 GUI(Graphical User Interface) 요소를 인식하여 어플리케이션 구현에 필요한 코드를 자동 생성하는 연구 등이 있다. UI/UX 디자이너는 모바일 응용 프로그램 개발 시 스토리보드를 개발자와의 의사소통을 돕는 도구로 사용하나 모호한 위젯에 대해서는 UI/UX 디자이너의 의도와 다르게 구현되는 경우 가 종종 발생한다. 본 논문에서는 DNN(Deep Neural Network) 기반의 GUI 요소 식별의 정확성을 높이기 위해 심볼 마커를 사용하는 자동 GUI 요소 인식 기법을 제안한다. 심볼마커의 성능평가를 위해 심볼마커의 유무에 따라 실험을 진행하여 정확도를 평가하였고, 정확도 개선을 위해 원형과 괄호형으로 나누어 심볼마커 모양에 따른 결과를 분석하였 다. 심볼마커를 사용한다면 개발자에게 정확한 의사 전달이 가능해져 피드백이 줄면서 시간과 비용이 감소하고 스케치이 미지의 UI 요소 오탐률을 줄이고 정확성이 향상될 것으로 기대한다.