^*딥러닝(Deep Learning): 복잡한 알고리즘을 이용해 대량의 데이터에서 패턴을 찾아내고 예측하며 오차를 줄여나가는 능력을 갖춘 학습 방법을 머신러닝(Machine Learning)이라 하는데, 딥러닝은 여기서 한 단계 더 나아가 사람이 먼저 데이터를 처리할 절차를 규칙으로 제시해 주지 않아도 되는 시스템이다.

^*플러그인(Plug-in): 웹 브라우저나 응용 프로그램의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램을 말한다.

^*K-최근접 이론(k-nearest neighbor algorithm): 새로운 데이터가 주어질 때 기존 데이터 가운데 가장 가까운 새로운 데이터를 예측하는 방법론

^*적층 오토인코더(Stacked AutoEncoder, SAE): 오토인코더는(autoencoder)는 지도 학습 없이도 입력 데이터의 표현을 효율적으로 학습할 수 있는 인공신경망이다. 인풋(input), 히든(hidden), 아웃풋(output) 세 레이어로 구성돼 있다. 여러 개의 히든(hidden) 레이어를 가진 경우를 적층 오토인코더(stacked autoencoder)라고 한다. 레이어를 더 추가할 경우 오토인코더는 GUI 데이터 공간을 축소해 실시간 추천이 가능하다.

[붙임] 연구결과 개요

1. 연구배경

모바일 앱 개발이 인기를 얻으면서, 많은 사람들이 앱 개발에 관심을 가지고 있다. 좋은 앱의 기준은 다양하지만, GUI(Graphical User Interface)1) 디자인 품질도 앱을 선택하는 중요한 요소 중 하나이다. 따라서 많은 개발자들이 좋은 GUI 디자인을 만들고자 하지만, 일반적인 개발자들은 디자인에 대한 배경지식이 부족하거나, 디자인을 위한 훈련이 부족해 양질의 디자인에 어려움을 겪고 있다. 디자인 과정에 시작부터 막막해 하거나, 현재 제작 중인 디자인의 품질이 좋은지 나쁜지 등에 대해서 큰 고민 없이 디자인을 한다. 마찬가지로 최종 사용자가 내가 만든 디자인의 어디를 중점으로 볼지에 대한 부분은 훈련을 받지 않으면 쉽게 예측하기 어려운 부분이다. 예를 들어, 쇼핑몰 앱을 만든다면, 특정 제품에 ‘50% 세일 문구’를 넣어 강조해야 하는 경우가 많은데, 실제 잘 강조 되고 있는지 알기 어렵다. 본 연구는 인공지능 기술을 활용하여, 좋은 디자인을 하고자 하지만, 잘 해내지 못하는 초보 디자이너들을 돕고자 하는 시스템을 개발하였다.

2. 연구내용

본 연구의 인공지능 디자인 가이드 시스템은 평가모듈, 추천모듈, 시선 예측 모듈로 구성된다. 추천모듈과 시선예측모듈은 딥러닝2) 기반 기술을 사용했다. 이 중 첫 번째 모듈인 디자인 평가 모듈은, 디자인 전문가와 협업을 통해 만들어졌다. 해당 모듈은 현재 디자인에서 디자인 구성 요소들 간의 밸런스, 줄맞춤 (Alignment), 글자 크기 및 종류, 색상 통일성, 구성 요소들 크기, 밀집도 그리고 최종 평가 점수를 제공한다. 또한 구글 앱스토어 GUI 디자인을 동일 기준으로 평가한 내용을 히스토그램(막대 그래프)으로 전달한다.

두 번째 모듈은 디자인 추천 모듈로, 현 사용자 디자인과 가장 유사한 디자인 중 높은 점수를 받은 디자인을 추천한다. 실시간으로 추천하기 위해서는 기존 학습한 GUI 데이터 공간을 축소해야 하는데, 이를 위하여 적층 자동 인코더(SAE, Stacked Autoencoder)3)를 사용하고, 가장 유사한 디자인을 찾기 위해서는 K –최근접 알고리즘 (k-nearest neighbor algorithm)4)을 사용한다. 이 방법으로 수천 개의 학습용 디자인에서 가장 적합한 디자인을 실시간으로 추천한다. 사용자는 추천된 양질의 디자인을 채점 점수별로 정렬할 수 있고, 어떠한 색상 위주로 썼는지 확인 가능하며, 또한 카테고리 별로 추천도 가능하다. 각 추천 모듈에서 사용자 시선이 어디서 머무는지도 알려준다.

세 번째 모듈은 사용자 시선 예측 모듈로, 앱 사용자가 현 디자인에서 주로 어디를 쳐다볼지를 예측해서 알려준다. 사용자가 더 많이 쳐다 볼 것으로 예상되는 곳은 더 붉은 지점으로 표시된다. 이 모듈은 FCN-165) 이라는 딥러닝 기술에 기반을 두어 개발되었다.

3. 기대효과

본 시스템은 디자인을 해본 적이 없는 개발자들도 쉽고 빠르게 높은 품질의 디자인을 제작 할 수 있도록 한다. 추가적으로, 따라하면서 배우기에 적합한 다른 교육 분야, (예. 페인팅, 프로그래밍) 등이 분야에도 활용 될 수 있을 것으로 기대 된다.

[붙임] 용어설명

1. GUI(Graphical User Interface)

GUI는 사용자가 컴퓨터와 정보를 교환할 때, 도형, 문자와 같은 ‘그래픽’을 통해 작업할 수 있는 환경을 말한다. 컴퓨터 화면의 아이콘 모양이나 배치, 문자 배치 등이 GUI에 해당된다. 

2. 딥러닝(Deep Learning)

복잡한 알고리즘을 이용해 대량의 데이터에서 패턴을 찾아내고 예측하며 오차를 줄여나가는 능력을 갖춘 학습 방법을 머신러닝이라 하는데, 사람이 먼저 데이터를 처리할 절차를 규칙으로 제시해 주지 않아도 시스템이 스스로 데이터에서 처리 규칙을 공부하여 머신러닝(Machine Leaning)을 수행하는 시스템을 딥러닝이라 한다. 인체의 신경세포(뉴런)의 작동기작과 유사한 인공신경망(artificial neural network)을 통해 딥러닝이 가능하다. 

 3. Stacked Autoencoder (SAE)

오토인코더는(autoencoder)는 지도 학습 없이도 입력 데이터의 표현을 효율적으로 학습할 수 있는 인공신경망이다. 인풋(input), 히든(hidden), 아웃풋(output) 세 레이어로 구성돼 있다. 여러 개의 히든(hidden) 레이어를 가진 경우를 적층 오토인코더(stacked autoencoder)라고 한다. 레이어를 더 추가할 경우 오토인코더는 GUI 데이터 공간을 축소해 실시간 추천이 가능하다. 

4. K –최근접 알고리즘 (k-nearest neighbor algorithm)

새로운 데이터가 주어졌을 때 기존 데이터 가운데 가장 가까운 새로운 데이터를 예측하는 방법론 

5. FCN(Fully Convolutional Network)-16

인공신경망 중 하나로 이미지를 픽셀 단위로 구분해서 각 픽셀이 어떤 사물에 해당하는지 구분하는 작업(Semantic Segmentation)을 수행한다. FCN은 기존의 CNN (Convolutional Neural Networks)에서 ‘Fully Connected Layer’ 제외해 이미지 픽셀의 위치 정보를 보존하고, 인풋 사이즈에 제한이 없는 것이 특징이다.

[붙임] 그림설명

그림1. 디자인 가이드 프로그램 화면

(A) 기존의 온라인 디자인 툴(예. 카카오 오븐)

(B) 디자인 채점표: 구성요소 간 균형(Balance), 줄 맞춤(Alignment), 글자 크기와 종류, 색상 통일성, 구성요소 크기, 밀집도, 평가 점수. 그림의 히스토그램은 구글 앱스토어 GUI 디자인들의 점수 분표

(C) 추천된 GUI 디자인

(D) 사용자 시선 예측 모듈: 빨간색 부분이 앱 사용자가 시선을 둘 곳으로 예측