[모바일 터치 제스처 UI] 탭과 좌우 스와이프 화면 전환에 관한 생각 그리고 벅스뮤직 앱 플레이어

 

요즘 〈스마트폰 앱 UX/UI 디자인〉이라는 책을 읽고 있다. 2012년 하반기에 쓰여져 2013년 4월에 출간된 책이라 아이폰4S와 갤럭시2 기준으로 설명되어 있다. 내용이 좀 오래된 감이 있지만 스마트폰 앱 디자인의 기본 지식을 두루 훌터보기에 좋은 내용으로 구성된 것 같아서 읽고 있다. 

 

책에서 안드로이드의 기본 작동 방식에 관한 내용 중 '스와이프 제스처로 페이지를 넘기는 방식'을 알게 되었다. 이 부분을 읽고 나서 벅스뮤직 앱 탐구를 하면서 좌우 스와이프로 이전, 다음곡으로 이동하는 좋은 UI를 제대로 소개하지 않았다는 비판을 적었던 것이 떠올랐다. 내가 안드로이드 UI에 대해서 무지해서 생겨난 오해일 수도 있겠다. ☞해당 포스팅 보기

 

스와이프 제스처로 페이지 전환. 이 UI는 안드로이드 사용자라면 익숙한 기본 사용법일 것이다. 너무나 일반적인 방법이라 안드로이드, iOS 구분없이 사용되는 몇몇 UI를 떠올려보면, 아이폰 사용자도 이 정도는 쉽게 알 수 있다는 판단하에 충분히 설명하지 않은 것일 수도 있겠다. 

 

한글로 번역된 최신 구글 디자인 가이드라인에서 찾아보니 스와이프 제스처로 페이지가 넘어가는 방식은 안드로이드 네비게이션 트랜지션 패턴 중에 하나다. ☞해당 내용보기

네비게이션 트랜지션 패턴 중 Sibling Transition

 

이 방식의 제스처는 상단에 탭 요소와 함께 구성되어 사용된다. 탭 영역은 현재 넘겨보고 있는 화면이 어디인지 알려주고, 그 외에 좌우 스와이프를 하면 다른 화면으로 넘길 수 있다는 힌트를 준다. 

 

그런데 벅스뮤직 앱의 플레이어는 그런 '힌트'가 없어서 화면에 그런 기능이 숨어 있다는 상상을 하기에 부족하다는 생각이 든다.  하지만 평소 좌우 스와이프가 습관이 된 사용자라면 그냥 한번 제스처를 해볼 수는 있을 것이다. 그렇게 우연한 사용으로 기능을 발견하기가 쉬울 수 있겠다. 그러나 스스로 알아차리기 전까지 기능을 제대로 사용하지 못하는 시간들을 경험해야 한다는 것은  매우 불안정한 느낌을 준다. 

 

네이버 모바일 홈페이지를 접속하면 상단에 섹션별 탭 메뉴가 있다. 

 

 

이 화면에서 탭 메뉴 간 이동을 쉽게 하기위해서 좌우 스와이프 제스처를 사용한다. 여기서 충분히 좌우 스와이프를 이용한 화면 전환이 학습이 된 나는 왜 벅스뮤직 앱에서 이전, 다음곡에 대한 제스처를 상상하지 못했을까? 

역시 상단 탭 영역이 중요한 힌트를 주는 것이 틀림없다. 탭 혹은 좌우 방향성을 담은 아이콘 등과 같은 시각적인 요소가 함께 있어줘야 좌우 스와이프 제스처가 상상이 되는 것이다. 

 

네이버 날씨 모바일 페이지를 접속하면 로딩 시 화면 좌우에 화살표 아이콘이 잠시동안 나타났다가 사라진다. 화면에 항상 고정으로 보여주지 않아도 이 정도 힌트만으로도 좌우 스와이프 제스처를 시도해보게 된다. 

 

 

오른쪽 벅스뮤직 플레이어에는 어떤 힌트도 없다. 어떤 제스처를 상상해서 취해볼 수 있을까? 

 

 

벅스뮤직 플레이어 화면에서 앨범 커버이미지를 좌우로 스와이프 하면 이전, 다음곡으로 이동한다. 또한 커버이미지를 아래로 스와이프 하면 플레이어가 하단으로 축소되는 편리한 제스처 UI가 담겨있다. 그렇지만 그것을 스스로 눈치채는 사용자가 얼마나 될까. 세련된 디자인과 좋은 컨텐츠로 꽉 채워진 벅스뮤직 앱이지만 사용 안내에 있어서는 좀 부족한 듯 하다. 

 

안드로이드 UI 도 관심을 기울여야겠다.