한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
딥 러닝을 사용해 휴대기기의 사용성을 향상해보세요
2019년 6월 28일 금요일
<블로그 원문은
이곳
에서 확인하실 수 있으며 블로그 번역 리뷰는
박해선(MachineLearning GDE)
님이 참여해 주셨습니다>
게시자: Yang Li, Google AI 연구원
탭(tap)은 모바일 인터페이스에서 가장 흔히 사용되는 동작으로, 앱 실행부터 문자 메시지 입력까지 온갖 종류의 작업을 수행하는 데 사용됩니다. 전통적인 데스크톱
그래픽 사용자 인터페이스
에서 클릭 가능한 요소(예: 버튼)의 스타일이 종종 관례적으로 정의되지만, 모바일 인터페이스에서는 스타일의 다양성으로 인해 여전히 사람들이 탭 가능한 요소와 그렇지 않은 요소를 구별하기 어려울 수 있습니다. 이런 혼동은
잘못된 어포던스
(affrodance)(예: 버튼으로 착각할 수 있는 기능)를 유도하거나 기능을 찾지 못해 사용자의 불만, 불확실성, 실수로 이어질 수 있습니다. 인터페이스 디자이너는 인터페이스에 있는 항목의 탭 가능성을 분명히 나타내는 데 도움이 되는 연구 또는 시각적 어포던스 테스트를 수행하여 이런 혼동을 피할 수 있습니다. 하지만 이러한 연구는 오랜 시간이 소요되고 연구를 통해 얻는 결과가 특정 앱 또는 인터페이스 디자인으로 제한되는 경우가 많습니다.
우리는 '
Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning
'이라는 제목의
CHI'19
논문을 통해 적정 규모로 모바일 인터페이스의 사용성을 모델링하기 위한 한가지 접근 방식을 소개했습니다. 우리는 사용자가 인식한 탭 가능성을 정량적으로 평가하기 위해 다양한 모바일 앱에 걸쳐 UI 요소를 연구하는 과제를 크라우드소싱했습니다. 우리의 모델 예측은 최대 90% 수준에서 사용자 그룹과 일치했는데, 이는 비용과 시간이 많이 드는 사용자 테스트를 수행할 필요 없이 디자인에 포함되는 인터페이스 요소에 대해 사용자가 인식하는 탭 가능성을 추정하는 데 머신러닝 모델을 효과적으로 사용할 수 있음을 입증합니다.
딥 러닝을 이용한 탭 가능성 예측
디자이너는 인터페이스에서 상호작용이 가능하다는 것을 나타내기 위해 요소의 색이나 깊이와 같은 시각적 속성(예:
링크의 파란색과 밑줄
)을 종종 사용합니다. 이런 일반적인 기호 표현이 흔히 사용되긴 하지만, 각각의 특정한 디자인 환경에서 이런 기호 표현을 적용할 시점이 항상 분명한 것은 아닙니다. 더욱이, 디자인 트렌드가 계속 변화하고 발전함에 따라 전통적인 기호 표현은 항상 변형되고 도전받고 있어, 사용자 입장에서는 불확실성과 실수를 유발할 가능성이 있습니다.
사용자가 이처럼 변화하는 환경을 어떻게 인식하는지 이해하기 위해, 우리는 실제 모바일 앱에서 탭 가능성에 영향을 미칠 수 있는 기호 표현, 즉 요소의 종류(예: 확인란, 입력란 등),
위치
,
크기
,
색
,
단어
등을 분석했습니다. 우리는 먼저 최대 3,500가지 앱에서 최대 20,000가지의 고유한 인터페이스 요소에 대해 클릭 가능한 것으로 인식되는 요소에 라벨을 지정해 줄 자발적 지원자를 크라우드소싱으로 모았습니다. 입력란은 제외하고,
종류
기호 표현은 사용자의 탭 가능성 인식에서 불확실성이 낮은 것으로 나타났습니다.
위치
기호 표현은 화면상에 나타나는 어떤 특징의 위치를 지칭하는데, 아래 그림에 나타낸 것처럼 모바일 앱에서 일반적인 레이아웃 디자인에 의해 결정됩니다.
위치를 기준으로 탭 가능한 요소와 그렇지 않은 요소의 정확도를 표시하는 히트맵으로, 색감이 따뜻한 느낌일수록 정확도가 더 높은 영역임을 나타냅니다. 사용자들은 인터페이스의 상부 중앙 쪽으로 갈수록 더 정확하게 탭 불가능한 요소로 라벨을 지정했고, 인터페이스의 하부 중앙 쪽으로 갈수록 더 정확하게 탭 가능한 요소로 라벨을 지정했습니다.
요소의 크기가 미치는 영향은 상대적으로 약했지만, 탭 불가능한 요소가 큰 경우 혼동을 주는 것으로 나타났습니다. 단어의 의미 역시 중요한 역할을 하기는 해도, 사용자들은 밝은 색과 짧은 단어를 보고 탭 가능한 요소로 인식하는 경향성을 보였습니다.
우리는 이러한 라벨을 사용하여 사용자가 탭 가능한 인터페이스 요소와 탭 불가능한 인터페이스 요소로 인식할 가능성을 예측하는 간단한
심층신경망
을 훈련했습니다. 인터페이스 요소가 주어지면, 모델은 화면상에 표시되는 요소의 공간 컨텍스트(
위치
), 요소의 의미 체계와 기능(
단어
와 종류), 시각적 외관(
크기
뿐 아니라 원시 픽셀도 포함)을 포함한 다양한 특성을 사용합니다. 이 신경망 모델은 합성곱
신경망
(CNN)을 적용하여 원시 픽셀에서 특성을 추출하고 학습된 단어 임베딩(embedding)을 사용하여 텍스트 콘텐츠 및 요소 속성을 표현합니다. 이러한 모든 특성을 연결하여 완전 연결 네트워크 층으로 주입하면되고, 그 출력은 요소의 탭 가능성에 대한 이진 분류 결과를 출력합입니다.
모델 평가
이 모델을 통해 사용자가 인식하는 각 인터페이스 요소의 탭 가능성(모델의 예측)과 개발자나 디자이너가 의도적으로 지정한 요소의 실제 탭 가능 상태 사이의 불일치를 자동으로 진단할 수 있었습니다. 아래 예에서, 우리의 모델은 사용자가 'Followers' 또는 'Following'과 같은 라벨이 탭 가능할 것이라 생각할 확률이 73%라고 예측한 반면, 이들 인터페이스 요소는 실제로는 탭 가능하도록 프로그래밍되지 않았습니다.
특히 사람이 모호하다고 느낄 때 사용자와 비교해 모델의 동작 방식을 이해하고 싶었습니다. 이를 위해 우리는 크라우드 소싱으로 290명의 지원자가 각자 인식한 탭 가능성에 대해 2,000개의 고유한 인터페이스 요소에 각각 라벨을 지정하여 제2의 독립적인 데이터세트를 만들었습니다. 각 요소에 대해 5명의 다른 사용자가 독립적으로 라벨을 지정했습니다. 그 결과, 지원자들은 샘플에 있는 요소 중 40% 이상을 일관되지 않게 라벨을 지정한 것으로 나타났습니다. 아래 그림에 나타낸 것처럼, 우리가 만든 모델은 인간의 인식에서 드러나는 이러한 불확실성과 상당히 잘 맞습니다.
일관성 데이터세트에 있는 각 요소에 대해 모델이 예측한 탭 가능성 확률(Y축)과 사용자가 부여한 라벨의 일관성(X축)을 보여주는 산점도.
어떤 요소의 탭 가능성이 사용자들의 라벨과 맞을 때 우리 모델은 더 명확한 답을 내놓는 경향이 있습니다. 즉, 탭 가능한 경우 1에 가까운 확률을, 탭 불가능한 경우 0에 가까운 확률로 예측합니다. 사용자가 어떤 요소에 대한 일관성이 부족할 때(X축의 중간 쪽으로 치우칠 때), 우리 모델 역시 덜 확실하게 결정합니다. 전체적으로, 우리 모델은 탭 가능한 UI 요소 식별에 있어서 평균
정밀도
90.2%,
재현율
87.0%로 사람이 인식하는 수준의 정확도를 달성했습니다.
탭 가능성의 예측은 우리가 사용자 인터페이스의 다양한 사용성 문제를 해결하기 위해 머신러닝으로 할 수 있는 일의 한 예에 불과합니다. 인터랙션 디자인(interaction design)과 사용자 경험 연구에 있어, 딥 러닝 모델이 크고 다양한 사용자 경험 데이터세트에서 의미 있는 정보를 추출하고 상호작용 동작에 대한 과학적 이해를 진전시키기 위한 도구를 제공할 수 있는 다른 도전 영역이 많이 있습니다.
감사의 말
본 연구는 Google 여름 인턴으로 이번 프로젝트에 참가한 Amanda Swangson과 딥 러닝 및 휴먼 컴퓨터 상호작용 연구원인 Yang Li의 공동 작업으로 진행되었습니다.
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase
검색
Tag
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2023
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2022
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2021
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2020
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2015
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
3월
2월
1월
2011
12월
11월
Feed