모바일앱 탐구 - 벅스뮤직 앱 (1) 메뉴 UI, 플레이어

 

벅스뮤직 앱 탐구 1편!

벅스 앱은 메뉴와 컨텐츠 영역 사이를 오고가는 UI가 신선하다. 세로형 슬라이드 메뉴 형태를 사용하지 않았다. 오히려 메뉴 영역은 고정이고 컨텐츠 영역이 축소 확장되는 모양을 취하고 있다. 보기도 좋으면서도 편리한 UI를 만나서 반값다. 스틸 이미지로는 느낌을 전달하기 어려워 GIF로 만들어 봤다. 

 

벅스 앱의 디자인은 애플의 iOS 휴먼 인터페이스 가이드를 제대로 적용 시킨듯하다.  

콘텐츠에 여백이나 테두리를 두는 대신 전체 화면을 채워 사용했고, 앱의 주요 화면에 반투명 효과를 폭넓게 사용했다. (상단 네비게이션 바, 하단 플레이어 바, 플레이어 화면 등) 플레이어 화면은 아이폰의 기본 음악 앱과 상당히 유사하다. 

리스트 뷰 형태의 화면에서도 기능 버튼에 테두리 배제하고 버튼 타이틀을 의미있는 단어로 지정해서 '당연히' 버튼임을 알도록 하는 애플의 가이드를 그대로 적용했다. 

 

1. 전체메뉴 

상단 네비게이션 바에서 우측의 메뉴 버튼을 탭하면 컨텐츠 영역이 축소되면서 좌측으로 밀려나고 전체메뉴가 나타난다. 메뉴 영역은 현재위치를 표시하는 역할도 겸하고 있다. 

벅스뮤직 앱은 9개의 메뉴로 구성되어 있다.

1. 홈
2. What's Hot
3. 테마/장르
4. 라디오
5. 내 앨범
6. 보관함
7. FLAC 전용관
8. 공지/문의
9. 설정 

 

라디오 화면을 보고 있다가 메뉴를 탭하면 라디오 화면이 그대로 축소되며 좌측으로 밀려난다. 그리고 다른 메뉴로 이동해서 보다가 다시 라디오 메뉴를 탭하면 이전에 보던 화면을 그대로 이어서 볼 수 있다. 

벅스 앱의 메뉴는 모양도 새롭지만 또 하나 특이한 점은 터치 시 눈에띄는 인터랙션을 준 점이다. 스마트폰에서는 하이퍼링크에 active 상태의 표현은 무의미하다. 그런데 벅스 앱 네비게이션은 터치하는 순간 포인트 컬러로 눈에 띄게 변하는 인터랙션이 작동한다. 아이폰 6S부터 적용된 3D 터치의 활용을 염두해 둔 인터랙션인가?

 

 

2. 플레이어

하단 플레이어 바는 반투명 효과가 들어가 있다. 은은하고 감긴다. 그래서 묻혀보이기도 한다. 어떤 화면에서는 플레이어인지 노래 목록이 이어지는 건지 구분이 잘 안될 때가 있다. 

집중해서 감상하는 음악이라기 보다 그냥 틀어놓는 음악을 지향하는 듯하다. 플레이어 바에는 '다음곡' 버튼이 없다. 라디오 재생 시 좌측에 커버이미지 대신 라디오 아이콘이 표시된다. 노래 제목을 탭하면 플레이어 화면으로 이동한다. 노래를 들을수록 재생버튼 테두리에 레드 컬러가 점점 채워진다. 이런 느낌이 너무 좋다. 

 

플레이어 화면은 커버이미지에 반투명과 블러 효과를 적용시켜 매 곡마다 아주 멋진 배경이 연출된다. 

아이폰6 음악 앱과 상당히 유사하지만 아이폰 음악 앱에는 볼 수 없는 특별한 기능을 가지고 있다. 가사 글자크기 확대축소, 종료타이머, 음질 및 음향 설정, 부가기능 링크 등 이다. 

보통의 뮤직 플레이어가 가지고 있는 이퀄라이저와 음량조절 기능이 빠져있다. '음량조절'은 기기의 버튼으로 조절하는 것이 편하기 때문에 굳이 앱 화면을 열어볼 필요가 없으니 이해가 된다. '이퀄라이저'가 빠진 이유는 무엇인지 궁금해진다. 사람들이 이용을 자주하지 않아서 일까. 요즘은 장르별 음악도 워낙 다양하고 여러 스타일로 리메이크도 많이 하기에 필요성이 떨어진걸까. 스트리밍하며 이어폰으로 들을 수 있는 음질이 제한적이어서 그런걸까. 이것도 감상하는 음악이 아니라 틀어놓는 음악이기 때문에 굳이 필요없는 것이 아닐까. 

 

벅스 앱과 아이폰 음악 앱의 플레이어가 유사한 디자인이긴 하나 벅스 앱이 더 멋있는 느낌이 든다. 

자세히 살펴보니 플레이어 화면 아래 부분의 배경이 커버의 느낌을 조금 더 살려서 보여준다. 그리고 배경 색조에 따라 아이콘이 어울리는 색상으로 맞춰 바뀐다. 단순히 어두운 배경에는 흰색, 밝은 배경에는 검정색이 아니라. 아이콘의 색상이 붉은색, 푸른색, 검정색, 회색, 아이보리색, 주황색, 녹색 등 배경색과 유사한 색으로 다양하게 바뀐다. 투명도를 주는 것은 는 참 멋지다. 

 

다음은 라디오 재생중일 때의 플레이어 화면이다. 아이콘 구성이 기본 음악재생 때와 약간 다르다. 

벅스뮤직 앱 탐구 1편을 여기서 마친다. 

 

 

*** 1.6 추가 ***

하단 플레이어 바에 이전/다음곡 기능 

화면 상에 버튼은 없지만 기능은 있었다. 노래제목 부분을 좌우로 스와이프하면 이전곡, 다음곡으로 넘어간다. 노래제목 부분을 탭하면 플레이어 화면이 열리고, 스와이프하면 이전/다음곡으로 넘어간다. 좋은 UI 라고 생각되는데 안내가 제대로 되지 않아 눈치채고 사용하는 사용자가 얼마나 될 지 의문이다. 

플레이어 화면의 숨은 기능

상단의 커머이미지를 좌우로 스와이프 하면 역시 이전곡, 다음곡을 로딩한다. 그리고 커버이미지를 아래로 스와이프 하면 플레이어가 축소되면서 하단 바로 내려간다.  

 

스트리밍 라디오 서비스 '비트' 앱도 커머이미지를 좌우로 스와이프 해야 이전/다음곡으로 넘어갈 수 있다. 

비트 앱에서는 별도의 안내가 없어도 직관적으로 그 제스처를 사용하게 된다. 일단 화면에 이전곡, 다음곡 버튼이 없다. 그리고 커버이미지가 화면을 꽉 채우는 모양이 아니다. 한 화면에 커버이미지가 3개 보이는데 현재곡은 가운데, 이전곡/다음곡은 화면 가장자리에 살짝 걸쳐 보여준다. 좌우로 스와이프하면 이동할 것이라는 추측을 자동으로 하게된다. 그런데 벅스 앱은 일단 화면이 꽉차있기 때문에 좌우에 무언가가 숨어있다가 내가 스와이프하면 나타날 거라는 추측을 이끌어 내기에 부족하다. 

 

하단 플레이어 바에서 이전,다음곡 이동에 관한 것은 이용안내 메뉴를 읽다 발견했다. 플레이어 화면에서는 혹시나 해서 같은 제스처를 해보니 역시나 같은 방식으로 작동했다. 이런 것은 앱 설치한 후 처음 실행하거나 기능 추가 업데이트 후 첫 실행 시 코치마크로 안내를 해주었으면 좋았을텐데 최근에 설치했을 때 그런 화면을 보지 못했다. 아쉬운 부분이다. 차차 개선되길 기대해본다. 

네이버 앱 '홈 메뉴 편집' 화면의 코치마크가 좋은 예이다. 이 화면에 처음 접속할 때 코치마크를 보여주고, 그것을 놓친 사용자를 위함인지 코치마크를 다시 볼 수 있도록 작은 아이콘을 넣어두었다. 

 

 

관련 글

모바일앱 탐구 - 벅스뮤직 앱 (1) 메뉴 UI, 플레이어

모바일앱 탐구 - 벅스뮤직 앱 (2) 재생목록, 내 앨범

모바일앱 탐구 - 벅스뮤직 앱 (3) What's Hot, 테마/장르, 라디오, 보관함

모바일앱 탐구 - 벅스뮤직 앱 (4) FLAC전용관, 공지/문의, 설정, 음악검색

모바일앱 탐구 - 벅스뮤직 앱 (5) 홈, 채널별 컨텐츠 구성 - END