Asia-pacific Journal of Multimedia Services Convergent with Art, Humanities, and Sociology Vol.6, No.3, March (2016), pp. 1-8 http://dx.doi.org/10.14257/ajmahs.2016.03.06 안드로이드 애플리케이션 UX 디자인에 대한 연구 제갈 은 1), 최두현 2) Research of User-eXperience(UX) Design for an Android Application Eun Jegal 1), Doo-Hyun Choi 2) 요 약 본 논문에서는 사용자 경험을 도입한 유저 중심 안드로이드 애플리케이션의 UX/UI 디자인 및 서 비스 구현 방법을 제시한다. 먼저, 개인용 정보 단말기로 자리 잡고 있는 스마트폰에서 인터페이스 디자인의 중요성을 살펴본다. 아울러 최근 화두가 되고 있는 사용자 중심 혹은 사용자의 경험을 바탕 으로 하는 인터페이스의 중요성에 대해서도 살펴본다. 기존에 잘 알려진 애플리케이션에서 사용하는 사용자의 경험을 고려한 디자인들을 살펴보고, 사용자 경험을 고려한 디자인이 주는 편리성과 접근성 을 살펴본다. 저자가 개발한 애플리케이션을 바탕으로, 시중 애플리케이션 마켓에 배포되어있는 다양 한 사례 애플리케이션들을 통해 UX에 대한 이해를 돕는다. 사용자가 모바일 디바이스를 터치할 때의 범위, 모션 등을 계산하여 레이아웃을 배치하고 애플리케이션을 실행하지 않아도 디바이스 홈스크린 에서 애플리케이션의 기능을 제공하는 등 사용자의 경험을 인터페이스 디자인에 접목해 애플리케이 션의 실용성과 효용성을 향상시킬 수 있음을 보이고자 하였다. 핵심어 : 사용자 인터페이스, UX, 유저 중심 애플리케이션, 안드로이드, 달력 애플리케이션 Abstract A UI/UX design methodology and its implementation of an Android application considering user-experience based Android application is presented in this paper. The importance of UI/UX design and differences between UX and UI design are explained at first. For better understanding, well-known applications of app store or portals are introduced as examples. The convenience and accessibility that are given from user-experience design are suggested with such examples. It is confirmed that developers would able to improve practicality and efficiency through design layout, considering the range of users touch motion. In addition to UX design, Android service component is also presented in this paper. With providing the service of application in the home screen of a device, users are able to access performance of application even though they do not run the actual application. This paper confirms the advantages of Received (January 6, 2016), Review Result (January 20, 2016) Accepted (January 27, 2016), Published (March 31, 2016) 1 School of Electronics Engineering, Kyungpook National Univ., 80 Daehakro, Bukgu, Daegu, 41556, S. Korea email: best_of_life@naver.com 2 (Corresponding Author) School of Electronics Engineering, Kyungpook National Univ., 80 Daehakro, Bukgu, Daegu, 41556, S. Korea email: dhc@ee.knu.ac.kr ISSN: 2383-5281 AJMAHS Copyright c 2016 HSST 1
Research of User-eXperience(UX) Design for an Android Application application based on UX design and service window. Keywords : User Interface, User-experience, Application, Android, Calendar Application 1. 서론 2010년쯤부터 시작된 스마트폰에 대한 인기는 현재는 문화로서 자리 잡았으며, 남녀노소 누구나 스마트폰을 가지고 있는 것이 당연하게 받아들여지고 있다. 느끼지는 못하고 있지만 누구나 어제 어디서나 활용 가능한 개인 정보 단말기가 이미 보급되어 있는 것이다. 이렇게 되면서 유선에만 국한되었던 일부 서비스를 일반 대중이 자연스럽게 활용하게 되어 가고 있다. 엔터테인먼트는 물 론이고, 폰뱅킹, 건강관리 등 생활의 거의 모든 부분에서 스마트폰은 없어서는 안 될 중요한 기기 로 자리 잡고 있다. 이러한 환경의 변화에 발 맞춰, 기업뿐만 아니라 개인 개발자들도 스마트폰 시 장에 뛰어들면서 모바일 애플리케이션 시장도 급격히 커지고 있다. 비슷한 기능을 수행하는 애플 리케이션(예를 들면 달력, 메모)은 개인이나 기업에 의해 수백, 수천가지가 오픈 마켓에 올라와있 으며, 기본적인 기능은 디바이스에 탑재되어 있어 출시되고 있으므로, 현재 기능적인 부분에서의 큰 혁신은 쉽지 않다. 몇 년 전부터는 사용자의 경험이나 습관, 조작 편의성을 강조하거나 극대화할 수 있는 애플리케 이션이 출시되고 있으며, 기존의 많은 콘텐츠들을 보유하고 있는 포탈과 같은 인터넷 사이트에서 는 생존과 시장 변화에 대응하기 위해 자사의 웹 접근성과 활용도를 높이고자 이러한 노력에 역량 을 집중하고 있다. 동일한 기능을 수행하더라도 제공하는 접근성과 편의성의 정도에 따라 소비자 의 선호도와 추가 활용 가능성은 달라질 수 있으므로 기업으로서는 이러한 분야에 집중하는 것이 당연하다. 애플리케이션 개발 단계 중 핵심적인 부분은 여전히 기능적인 부분이라는 것에 이의를 달 사람은 없지만, 인터페이스 디자인, 서비스 구현 등을 통해 편의성을 향상시켜야만 기능에 충실 한 애플리케이션들이 시장에서 경쟁력을 유지할 수 있다. 인터페이스 디자인은 원래부터 접근성과 편의성을 중요시하여 개발 단계에서부터 가장 중요한 요소중의 하나로 다루어진다. 초창기의 인터페이스는 주로 가시성과 사용 편의성에만 집중되어 개 발과 설계가 진행되었다. 인터페이스가 발전하면서, 점차 사용자의 습관과 경험을 고려한 디자인이 주목받게 되면서 UI(User Interface)/UX(User experience)를 동일시하거나 UI의 당연한 요소로 경 험을 고려하게 되었다. 여기서 UX는 사용자가 제품 혹은 서비스를 이용함으로써 느끼고 생각하게 되는 총체적 경험을 뜻한다[1]. 긍정적인 사용자의 경험을 이끌어 내는 것이 시장에서 성공적인 결 과를 낼 수 있는 핵심 사항으로 여겨져 생산 업체나 서비스 업체에서는 이 부분의 혁신에 집중하 고 있다. 본 논문에서는 일정 기능을 수행하는 애플리케이션이 있다는 가정 하에 사용자의 경험을 바탕으로 한 UX를 제공하고 서비스 윈도우를 제공함으로써 편의성을 제공하는 방법을 제시한다. 본 논문은 [2]의 내용을 확장한 것으로, [3]에서 다루는 애플리케이션 개발 과정 중 사용자 경험 디 자인의 기여도 분석을 보강한 것이다. 2 Copyright c 2016 HSST
Asia-pacific Journal of Multimedia Services Convergent with Art, Humanities, and Sociology Vol.6, No.3, March (2016) 본 논문의 구성은 다음과 같다. 2장에서는 UX 디자인에 대해서 전반적으로 살펴보고, 3장에서는 사용장 중심의 애플리케이션 개발을 위해 고려해야할 UX 및 서비스 구현에 대해서 다룬다. 이 과 정에서 몇몇 요소의 구현 방안과, 기존의 UX 디자인들을 살펴보면서 고려사항들에 대해 고찰한다. 2. UX 디자인 사용자 경험 디자인(UX design)은 사용자가 제품, 서비스 혹은 시스템을 사용하거나 체험하는 데 있어 지각하는 것이 가능한 조직적 상호교감적인 모델을 창조하고 개발하는 디자인의 한 분야 이다. UX 디자인은 대표적인 인터랙션 디자인이라고 할 수 있는데, 인터랙션 디자인은 기본적으로 사람에 대한, 정확히는 어떻게 사람들이 사용하는 제품 서비스와 연결되고, 그것을 통해 어떻게 서 로 연결되는가에 대한 것이다. 간단하게 정의하면 인간과 이를 둘러싼 모든 관계를 통한 경험의 디자인이라고 할 수 있다[3]. 사용자 경험 디자인은 사용자 중심 디자인의 원리에 기반하고 있어 인간공학, 인간과 컴퓨터 상호 작용, 정보 아키텍처, 휴먼 팩터스, 사용자 인터페이스 디자인, 사용 성 공학(Usability Engineering) 분야와 많은 공통된 요소를 가지고 있다. 또한 사용자 경험 디자인 은 다학제적인 성격을 가지고 있어 심리학, 인류학, 컴퓨터 공학, 마케팅, 그래픽 디자인 및 산업 디자인 분야와 깊은 관련을 맺고 있다[3]. UX 디자인과 UI 디자인을 굳이 구분한다면, 총체적 사 용자 경험을 바탕으로 개발 방향을 정하고 감독하는 것이 UX 디자인에 해당되고, 구현하는 제작 단계에서 사용자에게 맞는 최적화를 시켜주는 디자인 행위는 UI 디자인이라고 할 수 있다. 스마트폰이 보급되기 시작한 초창기에는 UI 디자인에만 집중하고 있었으며, 기능과 인터페이스 를 별개의 작업 혹은 개념으로 분리하여 생각하고 진행하였다. 그러다가 접근성과 효용성 사용자 편의성과 습관을 고려하게 되면서 단순한 인터페이스의 제작이 아니라 사용자의 경험과 특성을 바 탕으로 정보 욕구를 지원하는 단계로까지 발전하고 있다. 현재의 모든 스마트폰은 인터페이스는 물론이고 기능의 구현에 까지도 UX 디자인의 개념을 도입하고 있으며, 이 부분이 스마트폰의 승 패에 결정적인 영향을 미친다는 것을 개발자들은 이미 인지하고 있다. 이에 본 논문에서는 이러한 점을 반영하여 사용자 중심 애플리케이션 개발에서 UX 디자인이나 서비스 구현 시 고려해야할 사 항들을 고찰하고자 하였다. 3. 사용자 중심 UX 및 서비스 구현 3.1 UX 구현 애플리케이션을 개발할 때 애플리케이션의 기능과 성질에 따라 레이아웃 배치를 비롯한 UX 디 자인이 사뭇 달라진다. 예를 들어, 카카오 톡과 같은 메신저 애플리케이션을 개발할 경우 친구 목 록, 대화창 등을 어떻게 유연하게 배치해야 하는지 고려해야 하고, 쇼핑몰 웹 애플리케이션의 경우 상품 카테고리, 장바구니, 사용자 설정 등을 어떻게 배치해야할지가 관건이다. ISSN: 2383-5281 AJMAHS Copyright c 2016 HSST 3
Research of User-eXperience(UX) Design for an Android Application 본 논문에서 예시가 되는 애플리케이션은 달력 기반 일정 입력 애플리케이션인데, 이 경우 달력 및 일정의 배치, 화면 간의 전환 등을 고려해 UI 디자인을 구상해 볼 수 있다. 그림 1(a)는 전형적 인 달력 애플리케이션의 메인 레이아웃을 보여주고 있다. 사람들에게 익숙한 달력 애플리케이션은 간단하지만 UI 구상의 좋은 예시가 될 수 있다. 달력에서 다음 달 혹은 이전 달을 탐색할 때 단순 히 버튼을 누르면 발생하는 클릭 이벤트가 실행되었을 때 해당 기능을 수행하게 할 수도 있다. 하 지만 다수의 사용자들이 보통 확장된 내용을 보려고 하는 경우 버튼 클릭 보다는 스크롤이나 swipe motion을 선호한다는 점을 고려한다면 swipe motion을 구현하여 편의성을 제공할 수 있을 것이다. 일정을 추가하는 기능 부분에서 날짜를 선택한 후 추가 버튼을 누르면 해당 기능을 수행 하게 할 수도 있다. 하지만 사용자의 터치 구간을 고려한다면 날짜 칸을 눌렀을 때도 동일한 기능 을 수행하게 구현한다면 사용자에게 편의성을 제공할 수 있을 것이다. 이런 경우 주의할 점은 각 각의 이벤트에 대해 기능을 분명하게 구분하여야만 사용자의 혼란과 불편함을 없앨 수 있다. (a) (b) (c) [그림 1] (a) 달력 애플리케이션[10], (b) 안드로이드 navigation drawer[11] (c) 카카오톡[12] [Fig. 1] (a) A calendar app, (b) Android navigation drawer, (c) Kakao talk (a) (b) [그림 2] (a) 안드로이드 이벤트 실행 순서, (b) 안드로이드 Intent [Fig. 2] (a) Android event procedure, (b) Android Intent 4 Copyright c 2016 HSST
Asia-pacific Journal of Multimedia Services Convergent with Art, Humanities, and Sociology Vol.6, No.3, March (2016) 안드로이드 프로그래밍에서는 사용자의 입력에 따른 특정한 상호작용을 이벤트라고 한다. 그림 2(a)는 안드로이드에서 이벤트가 실행되는 과정을 나타낸 순서도이다. 사용자가 날짜 칸을 클릭한 경우는 분명 해당 날짜에 저장된 일정을 확인하고 싶은 경우이기 때문에 이때는 일정 추가 기능을 실행하지 않아야 한다. 안드로이드에서 제공하는 click 이벤트 중 대표적으로 사용되는 것으로 OnClick과 LongClick이 있는데, 다음 두 이벤트를 활용해 기능적인 부분을 구분할 수 있다[4]. OnClickEvent(클릭) - 사용자가 화면의 어떤 view 요소를 클릭했을 때 호출되는 method - 날짜 칸의 Click 이벤트에 대해, Database에서 해당날짜의 정보를 검색하여 스크린에 표시 OnLongClickEvent(롱클릭) - 사용자가 화면의 어떤 view 요소를 클릭하고 그 상태가 유지되는 경우 호출되는 method - 일정을 추가하는 창을 Intent로 띄운다. 애플리케이션의 레이아웃도 시대의 유행을 따르는 모습을 보여주는데, 현재 가장 많이 쓰이고 있는 레이아웃은 그림 1(b)의 navigation drawer이다. Navigation drawer는 어떤 메뉴나 뷰(View) 가 사용자가 보는 화면에서 가려져 있다가 특정 버튼을 누르면 왼쪽이나 오른쪽에서 drawer(서랍) 처럼 등장하는 뷰이다. 앱 전체의 깊이를 줄일 수 있다는 점에서 공간 활용도가 크고 카테고리 별 로 항목을 묶어서 기능별로 디자인할 수 있는 점에서 개발자 및 사용자들이 선호하고 있다. 초기 에는 그림 2(c)와 같은 탭 뷰가 카카오 톡에서 제공되면서 탭 뷰가 자주 쓰였고 Fragment를 활용 한 swipe 뷰도 많이 쓰였다. Navigation drawer에 이어 많이 쓰는 뷰는 탭 뷰와 swipe 뷰가 합쳐진 Tab & Swipe 뷰인데, 이 또한 자체로도 UX 디자인의 대표적인 예라고 할 수 있다. 탭 뷰와 swipe 뷰에서 사용자가 경 험한 편리성을 바탕으로 두 개의 뷰를 하나의 뷰로 합쳐 양쪽 뷰의 장점을 동시에 살려서 편의성 을 향상시킨 뷰에 해당된다. 애플리케이션 기능, 성질 또는 편의성에 따라 적절한 레이아웃을 배치하도록 해야 한다[5]. 안드 로이드 개발 초기에는 다양한 레이아웃들을 개발자들이 직접 제작하거나 외부 라이브러리를 가져 와서 사용하였다. 하지만 현재는 안드로이드 스튜디오가 개발되면서 Google사에서 다양한 인터페 이스 혹은 레이아웃들을 제공해 이를 사용하면 어려움 없이 UI/UX를 개발할 수 있다. 3.2 서비스 윈도우 구현 서비스 윈도우란 애플리케이션을 실행하지 않고도 홈스크린에서 사용자에게 애플리케이션 기능 을 제공할 수 있도록 띄우는 뷰라고 할 수 있다. 위젯과는 조금 다른 개념이며 안드로이드 컴포넌 ISSN: 2383-5281 AJMAHS Copyright c 2016 HSST 5
Research of User-eXperience(UX) Design for an Android Application 트 중 Service 부분의 역할이 필요하다. 서비스 윈도우의 경우 실제 애플리케이션이 동작하지 않고 있는 상태에서 홈 스크린에 표시되어야 하므로 안드로이드 컴포넌트 중 서비스 컴포넌트를 활용해 제작할 수 있다. 그림 3은 안드로이드의 컴포넌트를 나타내는데 크게 Activity, Service, BR(Broad Receiver), CP(Content Provider)의 4가지로 구분된다[6]. Activity가 사용자와 상호작용을 관장하는 부분이라면, Service는 애플리케이션의 background단에서 동작하는 컴포넌트라고 할 수 있다[7]. Service는 홈 스크린의 윈도우를 관리해주는 Window manager API를 써서 gravity, layout width, height를 조정할 수 있으며 애플리케이션과의 커뮤니케이션을 담당한다. 서비스를 사용할 때 주의 할 점이 있다면 서비스 또한 Main Thread에서 진행되기 때문에 따로 Thread 작업이 필요한 경우 제작해 주는 것이 좋다[8]. 또한, 서비스 윈도우를 구현하는 목적은 사용자의 편의를 위해서 이기 때문에 윈도우를 원하지 않는 사용자들도 꼭 고려해주어야 한다. 강제적으로 사용해야 하는 경우 오히려 사용자들의 반감을 살 수 있기 때문에, 스위치나 버튼 등을 배치시켜 켜고 끄는 기능을 구 현하여야 한다. [그림 3] 안드로이드 컴포넌트[13] [Fig. 3] Android Component 서비스 윈도우도 안드로이드 개발자들이 많아지고 발전하면서 지속적으로 개발되고 있다. 대표 적으로 네이버사의 퀵메뉴, 페이스북 메신저 등이 있다.[9] 그림 4는 네이버에서 제공하는 퀵메뉴 라는 서비스 윈도우이다. 홈 스크린에 원형의 floating view를 띄우는 방식인데 해당하는 원에 각 사용자가 원하는 네이버 기능을 설정할 수 있다. 이 같은 경우 직접 애플리케이션을 실행하지 않 더라도 홈스크린에서 바로 원하는 기능을 수행하도록 하여 접근성을 높였다. Layout gravity를 화 면 가장자리로 두어서 사용자가 롱터치로 뷰를 옮겼을 때도 항상 화면의 오른쪽이나 왼쪽에 배치 시키도록 해 홈 스크린을 사용할 때 불편함이 없도록 하였다. 이렇게 하면 사용자가 한 화면에서 제어할 수 있는 영역이 늘어나게 되어 편의성과 접근성을 향상시킬 수 있다. 네이버의 퀵메뉴와 같은 원리를 이용해 service window를 달력 애플리케이션에 적용시킬 수 있 다. 그림 5와 같은 Floating 뷰에 네이버의 퀵메뉴와 같은 서비스를 구현하고 각 메뉴에 일정 혹은 달력 애플리케이션의 기능을 배치할 수 있다. 그러면 오늘 날짜로부터 일주일간의 일정을 홈 스크 6 Copyright c 2016 HSST
Asia-pacific Journal of Multimedia Services Convergent with Art, Humanities, and Sociology Vol.6, No.3, March (2016) 린에 표시하여 사용자가 앱을 실행시키지 않고도 저장해놓은 일정을 바로 볼 수 있으며, 일정의 등록과 검색도 가능하다. 좌표를 활용해 터치로 움직인 거리를 삼각함수로 계산하여 플로팅 뷰를 회전시킬 수 있는 기능도 가능하며, 뷰의 visibility를 설정해 화면 범위 내에 들어온 날짜들의 일 정만 보여주도록 설정할 수도 있다. 해당 날짜를 클릭하면 앱이 실행되면서 사용자가 선택한 날짜 의 상세 일정, 편집 등의 기능 제공도 가능하다. (a) (b) [그림 4] 네이버 퀵메뉴 (a)홈 스크린 뷰[14], (b)네이버 퀵메뉴[15] [Fig. 4] Naver Quickmenu (a)home screen view[14], (b) Naver Quickemenu[15] [그림 5] 플로팅 뷰 [Fig. 5] Floating View 3. 결론 본 논문에서는 스마트폰 인터페이스의 대세로 자리잡아가는 UX 디자인을 살펴보고 구현하는 방 안을 제시하였다. 사용자 경험을 고려한 애플리케이션 구현 방안을 제시하면서 UX 디자인의 전반 적인 개념과 안드로이드 애플리케이션 개발에서의 UX 디자인 중요성을 기술하였다. 사용자에게 ISSN: 2383-5281 AJMAHS Copyright c 2016 HSST 7
Research of User-eXperience(UX) Design for an Android Application 편의성과 접근성을 제공하기 위해 현실적으로 고려해야 되는 부분과 구현 방안을 제시하였다. 가 장 단순한 부분이지만, 실행 버튼이 어디 있는지, 메뉴 사항들이 어디에 위치해있는지 등의 레이아 웃 배치가 사용자의 선호도에 큰 영향을 미치는 것을 예를 통해 살펴보았으며, 잘 알려진 애플리 케이션을 통해 애플리케이션의 접근성 향상을 통한 편의성 재고의 가능성을 논술하였다. References [1] http://terms.naver.com/entry.nhn?docid=1691521&cid=42171&categoryid=42190, 25 February (2013). [2] Eun Jegal and D. H. Choi, Development of a User-experience(UX) based Android Application. Proceeding of Winter Conference of The Convergent Research Society Among Humanities, Sociology, Science, and Technology (2016) January 22, Soonchun, S. Korea [3] Hoekman Robert, Designing the moment : web interface design concepts in action, New riders publishers, (2008) [4] K. H. Kim, The Key to Make Everything Look Better UX Design, GilBut, Seoul (2014) [5] K. Y. In and S. H. Yang, Android Programming, Kame Publishing, Koyang (2014) [6] J. H. Song and J. S. Kim, Journal of Knowledge Information Technology and System (2011), vol. 6, no. 5, pp. 155-161 [7] P. J. Kim, Korea Information Processing Society Review (2010), vol. 17, no. 3, pp. 51-60 [8] J. S. Oh, M. Y Kang, and J. Y. Choi, Research of Guidance of Android App API Coding. Proceeding of Autumn Conference of The Korean Institute of Information Scientists and Engineers (2010) November 5-6, Seoul, S. Korea [9] H. J. Lee, H. J. Ra, C. S. Keum, and S. D. Kim, The Korea Information Processing Society Transactions: Part D (2011), vol. 18, no. 4, pp. 245-250 [10] http://www.notebookcheck.net/fileadmin/_processed_/csm_screenshot_2014_10_19_14_08_24_a54e5c7d10.png, 19 October (2014). [11] http://www.androidhive.info/wp-content/uploads/2013/11/sliding-menu-example-applications.jpg, 1 November (2013). [12] http://cfile24.uf.tistory.com/image/146efe3950aeee291e1ff5, 27 August (2015). [13] http://designthing.net/wp-content/uploads/2015/08/the-basic-components-in-an-android-app.jpg, 27 August (2015). [14] http://cfile5.uf.tistory.com/image/2633994553feadc923576e, 27 August (2015). [15] http://cfile10.uf.tistory.com/image/2437084553feadca1e809f, 27 August (2015). 8 Copyright c 2016 HSST