모바일앱 디자인도 AI가 척척…개발팀 수고 덜었네

UNIST 고성안 교수팀, 앱 GUI 디자인 돕는 인공지능 시스템 개발

디자인 가이드 프로그램 화면(A) 기존의 온라인 디자인 툴(예. 카카오 오븐)(B) 디자인 채점표: 구성요소 간 균형(Balance), 줄 맞춤(Alignment), 글자 크기와 종류, 색상 통일성, 구성요소 크기, 밀집도, 평가 점수. 그림의 히스토그램은 구글 앱스토어 GUI 디자인들의 점수 분표(C) 추천된 GUI 디자인(D) 사용자 시선 예측 모듈: 빨간색 부분이 앱 사용자가 시선을 둘 곳으로 예측

앱(애플리케이션) 디자인을 도와주는 ‘AI(인공지능) 선생님’이 개발됐다. 이 시스템의 도움을 받으면 디자인 비전공자도 쉽고 빠르게 앱 디자인을 할 수 있다.

울산과학기술원( UNIST) 전기전자컴퓨터공학부 고성안 교수팀은 모바일 앱의 ‘사용자 환경’(Graphical User Interface·GUI)) 디자인을 평가해 개선점을 알려주고, 더 나은 디자인을 추천하는 ‘딥러닝(Deep Learning) AI 시스템’을 개발했다고 10일 밝혔다

GUI는 그림이나 도형, 문자 등의 그래픽을 이용해 기계에 정보를 입력하고 명령을 내리는 작업 환경이다. 그만큼 아름답고 편리하게 쓸 수 있는 디자인이 중요한데, 이를 AI를 통해 해결한 것이다.

스마트폰이 일상 깊숙이 들어오면서 모바일 앱을 통해 게임, 쇼핑, SNS(소셜네트워킹서비스) 활동 등 수많은 일을 하게 됐다. 이에 따라 앱을 이용해 창업이나 사업 활성화를 꿈꾸는 사람이 늘었지만, 앱 디자인 부분에서 어려움을 겪는다. 모바일 환경이라는 특성상 화면이 좁아 아이콘이나 글자의 시각적 배치가 더 중요해지기 때문이다.

고 교수팀은 이 문제를 ‘딥러닝 AI’를 통해 해결했다. 기존에 존재하는 수많은 GUI 디자인의 강점과 약점을 학습(딥러닝)한 AI가 현재 작업하는 앱 GUI 디자인을 평가해 대안을 제시하도록 한 것이다.

화면 구조상 사람들의 시선이 어디로 갈지도 예측 가능해 강조하고 싶은 문구를 효과적으로 배치할 수 있는 것도 큰 장점이다.

또 이 시스템은 기존 웹 기반 디자인 도구에 쉽게 설치·사용할 수 있는 응용 프로그램인 플러그인(Plug-in) 형태로 적용하면 홈페이지 제작에도 사용할 수 있다.


이 시스템은 디자인의 평가, 추천, 시선 예측 등 세 모듈로 구성된다. 디자인 평가 모듈에서는 디자인 이론에 따라 구성요소나 글자의 크기, 줄 맞춤, 색상 등을 채점한다. 기존 앱의 디자인과 비교한 점수를 제공한다. 디자인 추천 모듈은 현재 디자인 중인 앱과 비슷하면서도 우수한 디자인을 골라준다. 시선 예측 모듈에서는 사람들이 화면에서 어디에 집중할지 예측해준다.

고 교수는 “누구나 ‘인공지능 선생님’에게 쉽게 디자인을 배워서 앱 개발에 활용할 수 있도록 시각적 부분에 신경을 많이 쓴 시스템”이라며 “양질의 데이터를 더 많이 확보하면 웹 개발이나 페인팅 같은 교육 분야로도 적용할 수 있을 것”이라고 말했다.

고성안 교수(좌측) 이충기 연구원(우측)/사진=UNIST