[논문]심볼마커를 사용한 딥러닝 기반 모바일 응용 UI 요소 인식

박지수; 정진만; 은성배; 윤영선

doi:10.7236/jiibc.2020.20.3.89

심볼마커를 사용한 딥러닝 기반 모바일 응용 UI 요소 인식
UI Elements Identification for Mobile Applications based on Deep Learning using Symbol Marker 원문보기

The journal of the institute of internet, broadcasting and communication : JIIBC, v.20 no.3, 2020년, pp.89 - 95

박지수 (한남대학교, 정보통신공학과) , 정진만 (한남대학교, 정보통신공학과) , 은성배 (한남대학교, 정보통신공학과) , 윤영선 (한남대학교, 정보통신공학과)

초록
AI-Helper

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

Abstract ▼ AI-Helper

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.

주제어

표/그림 (12)

그림 그림 1. 스토리보드 예시 Fig. 1. Storyboard example
표 표 1. 관련 연구의 장단점 Table 1. Advantages and Disadvantages of Related Studies
그림 그림 2. YOLO v2 계층구조 Fig. 2. YOLO v2 Layer Structure
그림 그림 3. 모호한 위젯들의 예시 Fig. 3. Examples of obscure widgets
그림 그림 4. 원형 심볼마커 및 괄호형 심볼마커 스케치이미지 Fig. 4. Circular Symbol Markers and Parenthesized Symbol Marker Sketch Images
표 표 2. 평가용 데이터셋 위젯의 개수 Table 2. Number of dataset widgets for evaluation
그림 그림 5. 원형 및 괄호형 심볼마커 포함된 UI 인식결과이미지 Fig. 5. UI recognition result image with circular and parenthesized symbol marker
표 표 3. 정밀도 및 재현율 계산 Table 3. Precision and recall rate calculation
표 표 4. 기존기법 (심볼마커가 없는) 각 위젯의 mAP Table 4. mAP of each existing technique (without symbol marker)
표 표 5. 원형 심볼마커 데이터셋 각 위젯의 mAP Table 5. Circular symbol marker data set mAP for each widget
표 표 6. 괄호형 심볼마커 데이터셋 각 위젯의 mAP Table 6. Parenthesized symbol marker data set mAP for each widget
그림 그림 6. Epoch에 따른 데이터셋의 총 mAP 결과 Fig. 6. Total mAP result of data set according to epoch

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

제안 기법의 평가를 위해 심볼마커가 없는 경우와 있는 경우에 대해 실험하고, 비교 분석하여 정확도를 높이기 위해 심볼마커의 모양을 다르게 하여 실험을 진행한다. UI 요소 자동인식으로 UI/UX 디자이너와 개발자 간의 시간과 비용을 줄이고 심볼마커를 사용하여 모호한 UI 요소 객체 식별을 줄이고 정확도 향상을 목표로 한다.
본 논문에서는 UI 요소 인식 정확도 향상을 위해 심볼마커를 활용한 딥러닝 기반 UI 요소 자동인식 방법을 제안한다. 제안 기법의 평가를 위해 심볼마커가 없는 경우와 있는 경우에 대해 실험하고, 비교 분석하여 정확도를 높이기 위해 심볼마커의 모양을 다르게 하여 실험을 진행한다.
본 논문에서는 딥러닝 기반 자동 UI 요소 인식과 모호한 위젯에 대한 정확성 향상을 위해 명시적 표시로 심볼마커를 사용하는 기법을 제안하였다. 기존 기법에서 심볼마커를 추가한 제안 기법을 증명하기 위해 실험을 진행 하였고, 심볼마커의 모양에 따른 결과값의 차이를 비교 분석하기 위해 원형 심볼마커와 괄호형 심볼마커로 나누어 실험을 진행하였다.
사전연구 결과 그림 3과 같이 정확성을 떨어뜨리는 요인 중 하나는 모호한 위젯이다. 본 논문에서는 모호한 위젯에 대하여 명시적 표시인 심볼마커를 통해 정확도 개선에 초점을 맞추어 딥러닝 기반의 심볼마커 기법을 제안한다.

제안 방법

UI 객체는 총 7가지로 Button, CheckButton, EditText, ImageView, RadioButton, Spinner, TextView로 나누었고, UI 요소의 알파벳 앞글자 1-2 문자를 따서 심볼마커 모양 안에 작성하였다. 예를 들어, TextView는 T, Button은 B, CheckButton은 CB로 표시가 된다.
본 논문에서는 딥러닝 기반 자동 UI 요소 인식과 모호한 위젯에 대한 정확성 향상을 위해 명시적 표시로 심볼마커를 사용하는 기법을 제안하였다. 기존 기법에서 심볼마커를 추가한 제안 기법을 증명하기 위해 실험을 진행 하였고, 심볼마커의 모양에 따른 결과값의 차이를 비교 분석하기 위해 원형 심볼마커와 괄호형 심볼마커로 나누어 실험을 진행하였다.
첫 번째 이미지는 기존기법인 심볼마커가 없는 이미지이고, 두 번째는 제안 기법 원형 심볼마커를 표시한 이미지이고, 세 번째는 괄호형 심볼마커를 표시한 이미지이다. 데이터셋을 기반으로 한 데이터셋 당 학습횟수를 500, 1000, 1500으로 3 번으로 나누어 총 9번의 실험을 진행하였다. Epoch은 전체 데이터에 대한 한 번의 학습으로 Epoch 500일 때는 약 2시간, 1000일 때는 약 4시간, 1500일 때는 약 7시간이 소요되었다.
심볼마커의 모양은 UI 요소 인식 시 정확성에 영향을 주기 때문에 원형과 괄호형 두 가지 모양으로 나누어 실험을 진행하였다. 딥러닝 기반의 객체 인식을 위해 jpg 파일 형식으로, 사이즈는 500*800 pixel로 통일시켰으며 이미지의 위젯 정보를 담은 XML 파일도 같이 준비하였다.
초기에는 Mirror (좌우반전) 데이터 처리를 하여 데이터 강화(data augmentation)를 진행하였으나, 심볼마커의 위치를 UI 왼쪽 앞으로 고정하여 Mirror 효과 대신 Flip(상하반전)과 Scale(크기) 효과를 이용하여 학습을 진행하였다. 사전에 ImageNet을 통하여 학습된 darknet19_448.weights 파일을 사용하여 학습용 데이 터셋을 학습시키고, 학습한 Weights를 바탕으로 학습용 데이터셋에 적용한 결과를 기반으로 평가용 데이터셋의각 위젯의 AP와 mAP를 확인하였다.
예를 들어, TextView는 T, Button은 B, CheckButton은 CB로 표시가 된다. 심볼마커의 모양은 UI 요소 인식 시 정확성에 영향을 주기 때문에 원형과 괄호형 두 가지 모양으로 나누어 실험을 진행하였다. 딥러닝 기반의 객체 인식을 위해 jpg 파일 형식으로, 사이즈는 500*800 pixel로 통일시켰으며 이미지의 위젯 정보를 담은 XML 파일도 같이 준비하였다.
두 번째는 소셜어플 리케이션인 Snapchat의 스크린샷으로 이미지 뷰와 텍스트 뷰로 인식되지만 하나의 버튼이고, 마지막 SURE 어플리케이션은 여러 개의 텍스트 뷰로 구성된 리스트 뷰로 인식하지만, 사용 설명을 써 놓은 텍스트 뷰이다. 예시와 같이 모호한 위젯이 존재하여 UI/UX 디자이너에게 전달받은 스토리보드를 개발자가 구현할 때 정확한 위젯 인식에 대한 어려움이 있고, 딥러닝으로 UI 요소 인식 시오탐률이 증가하여 정확성이 떨어지므로 각 위젯의 앞부 분에 심볼마커를 표시하여 오탐률을 줄이고 정확성을 높이는 방법을 제안하였다.
본 논문에서는 UI 요소 인식 정확도 향상을 위해 심볼마커를 활용한 딥러닝 기반 UI 요소 자동인식 방법을 제안한다. 제안 기법의 평가를 위해 심볼마커가 없는 경우와 있는 경우에 대해 실험하고, 비교 분석하여 정확도를 높이기 위해 심볼마커의 모양을 다르게 하여 실험을 진행한다. UI 요소 자동인식으로 UI/UX 디자이너와 개발자 간의 시간과 비용을 줄이고 심볼마커를 사용하여 모호한 UI 요소 객체 식별을 줄이고 정확도 향상을 목표로 한다.
표 1은 관련 연구들의 주요기술과 취약점을 정리한 것으로 기존 기법들의 문제점을 파악하고, 취약점을 해결하기 위하여 심볼마커 기반의 UI 요소 인식 방법을 제안한다. 제안된 방법은 기존 기법에서 UI 요소 인식 시 모호한 위젯에 대해서 명시적 표시인 심볼마커를 통해 정확도를 향상시키고자한다.
Class는 위젯 종류에 따라 7개로 작성되어 학습 값인 Epoch을 통해 500, 1000, 1500으로 총 세 번의 학습을 진행한다. 초기에는 Mirror (좌우반전) 데이터 처리를 하여 데이터 강화(data augmentation)를 진행하였으나, 심볼마커의 위치를 UI 왼쪽 앞으로 고정하여 Mirror 효과 대신 Flip(상하반전)과 Scale(크기) 효과를 이용하여 학습을 진행하였다. 사전에 ImageNet을 통하여 학습된 darknet19_448.

대상 데이터

본 실험의 데이터셋은 두 종류로 구성되어있다. 8가지 유형의 모바일 응용에 대한 각 7장의 스케치 이미지를 모바일환경에 익숙한 20대 대학생들이 그린 총 280개(8 유형 * 7장 * 5명)의 스케치이미지와 구글 스토어 카테고리 중 다운로드 수가 높은 어플리케이션 10유형을 선정 하여 주요기능 화면 5가지를 캡처한 총 50개(10유형 * 5장)의 스크린샷으로 총 330장의 데이터셋을 준비하였다.
데이터셋은 무작위로 선정하여 8:2 비율로 나누어 학습용 데이터셋 264개와 평가용 데이터셋 66개로 구성하였다. 표 2는 평가용 데이터셋의 7가지 위젯들의 분포를 보인다.
본 논문에서는 Darknet 19를 기반으로 한 YOLOv2 를 사용하였으며 그림 2는 Darknet 19의 Layer 구조를 표시하였으며 Convolution, Maxpooling 등으로 총 30개의 Layer로 이루어져 있다.
실험은 Nvidia GTX 1070이 장착된 ubuntu 16.04 환경에서 pytorch-yolov2 [17]를 이용하여 진행되었다.
제안 기법을 평가하기 위해 세 종류의 데이터셋을 준비하였다. 첫 번째 데이터셋은 기존 기법인 UI 요소만을 인식한 이미지이고 두 번째 데이터셋은 원형 심볼마커가 추가된 이미지이다.

데이터처리

실험 진행 시 학습횟수를 다르게 하여 총 아홉 번의 실험을 진행하였으며 세 개의 데이터셋에 대한 결과값인 mAP를 확인하였다. 실험결과 심볼마커가 없을 때보다 괄호형 심볼마커가 있을 때 정확성이 15.
실험을 통하여 위젯들의 mAP와 위젯들의 전체 평균을 비교 및 분석하였다. 객체 인식에서 mAP (Mean Average Precision)은 PASCAL VOC 2012에서 정의한 것으로 각 클래스에 대하여 AP를 구하고 각각의 클래 스에 대한 평균을 취하는 방식이다.

이론/모형

데이터셋의 각 UI 객체에 Bounding box를 지정한다. UI Bounding box와 Labels의 정보를 표기하기 위해 LabelImag Tool [18] 을 사용하였다. LabelImg Tool은 PASCAL VOC format의 정보를 XML 파일로 저장한다.

성능/효과

7% 차이를 보였다. 3 개의 결과를 비교하였을 때, 인식률 증가가 가장 낮았던 것은 Epoch이 500일때에 심볼마커가 없는 데이터셋과 원형 심볼마커 데이터셋으로 0.1% 였고, 인식률 증가가 가장 높았던 것은 Epoch 1500일 때 심볼마커 없는 데이터셋과 괄호형 심볼마커 데이터셋이 15.7%로 가장 큰차이를 보였다.
마지막으로 심볼마커가 없는 데이터셋과 괄호형 심볼마커의 데이터셋은 7.5%, 10%, 15.7% 차이를 보였다. 3 개의 결과를 비교하였을 때, 인식률 증가가 가장 낮았던 것은 Epoch이 500일때에 심볼마커가 없는 데이터셋과 원형 심볼마커 데이터셋으로 0.
실험 진행 시 학습횟수를 다르게 하여 총 아홉 번의 실험을 진행하였으며 세 개의 데이터셋에 대한 결과값인 mAP를 확인하였다. 실험결과 심볼마커가 없을 때보다 괄호형 심볼마커가 있을 때 정확성이 15.7% 증가하였고, 원형의 심볼마커보다 괄호형 심볼마커의 결과값이 높게 나왔다. 원형 심볼마커는 라디오 버튼과 혼동되어 인식률이 떨어졌다고 판단한다.
그림 6은 Epoch 따른 데이터 값을 막대 그래프로 표시하였다. 심볼마커가 없는 데이터셋은 Epoch이 1500인 경우보다 1000일 때 2% 낮게 나왔고, 심볼마커 없는 데이터셋과 원형 심볼마커 데이터셋을 비교하면 0.1%, 2%, 10% 증가하였고, 원형 심볼마커와 괄호형 심볼마커의 결과값이 Epoch에 따라서 7.4%, 8%, 5.7% 증가 되었다.
각 데이터셋의 Epoch에 따른 7종류의 위젯에 대한 mAP 결과값을 표 4-6에 기술하였다. 표 4는 기존 기법인 심볼마커가 없는 위젯의 mAP 값을 나열하였으며 Epoch 1000인 경우 인식률이 높다는 것을 확인하였다.
표 5은 원형 심볼마커 결과로 Epoch가 증가할수록 위젯들의 mAP가 증가하였고, 7종류의 위젯 중 Radio Button과 CheckButton의 인식률이 현저히 낮음을 알 수 있다.

후속연구

따라서 심볼마커가 없는 데이터 셋으로 UI 요소를 인식할 때 Epoch 1000 이상으로 설정하고, 심볼마커가 있는 데이터셋을 사용할 때는 괄호형 심볼마커 사용을 권장한다. UI 요소 자동인식을 통해 개발자의 편의성을 도모하고, 괄호형 심볼마커를 사용함으로써 UI/UX 디자이너와 개발자 간의 만족도를 충족시키 고, 정확성이 향상되어 추후 GUI Code 개발에 도움이될 것으로 기대한다.

질의응답

핵심어	질문	논문에서 추출한 답변
	본 연구에서 제안하는 딥러닝 기반 인식기법을 평가하기 위해 어떠한 세 종류의 데이터셋을 준비하였는가?	제안 기법을 평가하기 위해 세 종류의 데이터셋을 준비하였다. 첫 번째 데이터셋은 기존 기법인 UI 요소만을 인식한 이미지이고 두 번째 데이터셋은 원형 심볼마커가 추가된 이미지이다. 마지막으로 세 번째 데이터셋은 괄호형의 심볼마커를 추가한 이미지이다. 그림 4는 실험에 사용된 모바일 응용을 제작하기 위해 스케치한 DigitalWallet 의 이미지 중 하나인 로그인 화면을 작성한 예시이다.
	모바일 응용 프로그램을 제작하는 과정에서 UI/UX디자이너들은 어떠한 디자인 도구를 사용하는가?	모바일 응용 프로그램을 제작하는 과정에서 UI/UX디자이너들은 Illustrator, Fireworks, InDesign, Keynote 그리고 Balsamiq 등 디자인 도구를 사용한다 [1]. 모바일 어플리케이션 개발을 위해 사용자의 요구에 맞춰 기능을 제작하고, 기능에 따른 UI 요소의 크기와 위치, 모양 등을 구상하여 한눈에 알아보기 쉽게 스케치한 것을 스토리보드라 한다.
	스토리보드는 무엇인가?	모바일 응용 프로그램을 제작하는 과정에서 UI/UX디자이너들은 Illustrator, Fireworks, InDesign, Keynote 그리고 Balsamiq 등 디자인 도구를 사용한다 [1]. 모바일 어플리케이션 개발을 위해 사용자의 요구에 맞춰 기능을 제작하고, 기능에 따른 UI 요소의 크기와 위치, 모양 등을 구상하여 한눈에 알아보기 쉽게 스케치한 것을 스토리보드라 한다. 그림 1은 칼로리 계산기 모바일 응용을 제작하기 위해 스케치한 스토리보드 예시이다.

참고문헌 (21)

Joe Ligman, Marco Pistoia, Omer Tripp, Gegi Thomas, "Improving design validation of mobile application user interface implementation." In Proceedings of the International Conference on Mobile Software Engineering and Systems, ACM pp. 277-278, 2016. DOI: https://doi.org/10.1145/2897073.2897708
https://developer.apple.com/kr/xcode/
https://developer.android.com/
Toufiq Parag, Claus Bahlmann, Vinay Shet, Maneesh Singh, "A grammar for hierarchical object descriptions in logic programs", Computer Vision and Pattern Recognition Workshops (CVPRW), 2012 IEEE Computer Society Conference on. Computer Vision and Pattern Recognition Workshops, pp. 33-38, 2012. DOI: https://doi.org/10.1109/CVPRW.2012.6239171
Hung Pham, Tam Nguyen, Phong Vu, Tung Nguyen, "Toward mining visual log of software", arXiv preprint arXiv:1610.08911, 2016.
Tuan Anh Nguyen, Christoph Csallner, "Reverse engineering mobile application user interfaces with REMAUI(T)" Automated Software Engineering (ASE), 2015 30th IEEE/ACM International Conference on. IEEE, pp. 248-259, 2015. DOI: https://doi.org/10.1109/ASE.2015.32
Tony Beltramelli, "pix2code: Generating code from a graphical user interface screenshot", Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems. ACM, pp. 1-6, 2018. DOI: https://doi.org/10.1145/3220134.3220135
Young-Sun Yun, Jisu Park, Jinman Jung, Seungbae Eun, Sin Cha, So-Sun Sup, "Automatic Mobile Screen Translation Using Object Detection Approach Based on Deep Neural Networks", Journal of Korea Multimedia Society, Vol. 21, No. 11, pp. 1305-1316, 2018. DOI: https://doi.org/10.9717/kmms .2018.21.11.1305
https://github.com/Microsoft/ailab/tree/master/Sketch2Code.
Ye-Seul Lee, Hyunl-Jae Choi, Dong-Myung Shin, Jung-Jae Lee, "Deep Learning based User Anomaly Detection Performance Evaluation to prevent Ransomware", Journal of Korea S/W Assessment and Valuation Society, Vol. 15, No.2, pp. 43-50, 2019. DOI: https://doi.org/10.29056/jsav.2019.12.06
Dong-Hoon Lee, Lee Bong Kyu, "A Study on the Analysis of Jeju Island Precipitation Patterns using the Convolution Neural Network", Journal of Korea S/W Assessment and Valuation Society, Vol. 15, No. 2, pp. 59-66, 2019. DOI: https://doi.org/10.29056/jsav.2019.12.08

상세보기
Dong-Hee Yun, Young-Ung Kim, "Design and Implementation of Mobile Communication System for Hearing- impaired Person", The Journal of The Institute of Internet, Broadcasting and Communication, Vol. 13, No. 6, pp. 47-54, 2013. DOI: https://doi.org/10.7236/JIIBC.2013.13.6.47
https://en.wikipedia.org/wiki/Object_detection
Zhong-Qiu Zhao, Peng Zheng, Shou-tao Xu, and Xindong Wu, "Object detection with deep learning: a review", IEEE transactions on neural networks and learning systems, arXiv:1807.05511, Vol. 30, No. 11, pp. 3212-3232, 2019. DOI: https://doi.org/10.1109/TNNLS.2018.2876865

상세보기
https://pjreddie.com/darknet/yolo/511.
Joseph Redmon, Ali Farhadi, "YOLO9000: better, faster, stronger", In: Proceedings of the IEEE conference on computer vision and pattern recognition, pp. 7263-7271, 2017. DOI: https://doi.org/10.1109/CVPR.2017.690
https://github.com/andy-yun/pytorch-0.4-yolov3
Tzutalin, LabelImg, Git code 2015. https://github.com/tzutalin/labelImg
https://github.com/rafaelpadilla/Object-Detection-Metrics
Mark Everingham, Luc Van Gool, Christopher K. I. Williams, John Winn, Andrew Zisserman, "The pascal visual object classes (voc) challenge", International journal of computer vision, Vol, 88, No. 2, pp. 303-338, 2010. DOI: https://doi.org/10.1007/s11263-009-0275-4

상세보기
https://en.wikipedia.org/wiki/Precision_and_recall

저자의 다른 논문 :

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증