음악 서비스의 두개골

Kwangbae Lee
Jan 11, 2016 · 9 min read
Image for post
Image for post
Pandora의 device 별 일 평균 체류 시간 변화 (eMarketer 자료를 바탕으로 Forbes 기사 내에 제공된 차트를 인용함)

스트리밍 서비스를 이용하는 첫번째 방법은 이제 모바일 앱이 되었다. 음악을 듣기 위해 우리가 가장 자주 만나는 화면은 스트리밍 서비스의 모바일 앱, 그 중에서도 홈 화면이다. 사람으로 비유하자면, 비록 크기는 작지만 그 사람과 가장 자주 소통하는 신체 부위인 얼굴과도 같다.

음악 서비스는 큐레이션 컨텐츠, 재생 컨텐츠와 기능, 각종 인터랙션, 그 외의 유틸리티 기능 등을 소화하기에, 제법 복잡한 구조가 필요하다. 이 복잡한 구조를 작은 모바일 스크린에 담기 위한 방법들이 필요하고, 선택한 방법이 가져오는 사용자 경험도 다르다. 홈 화면 유저 인터페이스의 뼈대를 살펴보는 것은 그래서 의미가 있다. 이 글에서는 내비게이션과 ui 구조, 즉 뼈대 위주의 홈 화면을 살펴본다. 국내외 대표적인 19개 음악 서비스의 iOS 앱을 몇 가지의 유형으로 나누었으며, 컨텐츠 영역의 요소는 생략되었다.

: 햄버거 메뉴 + 하단 재생 바

Image for post
Image for post
  • 사례: Spotify, Guvera, 8tracks, Rhapsody, 벅스
  • 숨겨진 사이드 메뉴(일명 햄버거 메뉴)를 채택했기에, 메뉴 진입이 다른 유형에 비해 어렵다.
  • 특히 검색과 같이 자주 쓰는 기능이 숨겨져 있을 경우 그 불편함이 크다. (Spotify가 그렇다.)
  • 메뉴를 숨겨서 확보한 하단 공간은 재생 바의 자리가 된다. 홈 화면에서 바로 재생중인 곡 정보를 확인할 수 있고, 일시중지, 스킵 등의 간단한 동작도 가능하다. 재생 바를 위로 끌어올리면 재생 화면으로 진입이 가능하다.
  • 햄버거 메뉴 방식은 product designer들 사이에서 논란이 많다. 일단 화면에서 보이지 않아 메뉴 진입 자체가 어렵고, 메뉴 버튼도 thumb zone에서 멀어 탭하기 어렵기 때문이다. 그러나 햄버거 메뉴의 유용성을 논하기 위해서는 각 앱의 홈 화면 컨텐츠와 함께 고려되어야한다고 본다.
    예컨대 Spotify, 벅스 등은 홈 화면에서 충분히 둘러볼만한 다양한 맥락의 컨텐츠 묶음을 보여준다. 굳이 메뉴에 진입하지 않아도 대부분의 액션이 홈에서 소화되고, 메뉴는 꼭 필요할 때에만 들어가게 된다.
    반면 Guvera, Rhapsody, 8tracks 등에서의 홈 컨텐츠는 단순한 feed 정도에 불과하다. 내 음악, 장르, 추천 컨텐츠 등을 확인하기 위해서는 메뉴 진입이 필수인데, 유독 메뉴 진입이 어려운 ui 방식을 택했다.

: 상단 내비게이션 바 + 하단 탭 메뉴

Image for post
Image for post
  • 사례: Pandora, TuneIn
  • iOS에서 가이드하는 방식을 그대로 따르고 있어서 사용자에게 익숙한 경험을 제공한다.
  • 재생 화면을 진입하기 위해서는 우상단에 있는 now playing 버튼을 탭해야하는데, 이 방식은 불편하다. 홈에서 재생중인 곡이 무엇인지 알 수 없고, 일시중지도 못 한다. 버튼을 누르려면 thumb zone에서 가장 먼 화면 구석으로 손가락을 옮겨야한다.
  • ‘복잡한 구조 + 커진 스크린 사이즈’라는 변화된 환경에서 플랫폼 가이드를 곧이곧대로 지키는 것은 현명한 선택이라고 보이지 않는다. (심지어 Apple Music 조차 iOS의 기본적인 가이드에 변형을 가해 만들어졌다.)

: 하단 탭바 안에 now playing이 메뉴로.

Image for post
Image for post
  • 사례: SoundCloud, Deezer, 헤이비
  • Now playing이 하단 탭 바에 들어가, 재생화면으로의 접근성이 Pandora 방식보다 월등히 좋다.
  • 그러나 now playing bar가 아닌 버튼 형태로 제공되는 단점은 여전하다. 재생중인 곡을 알기 어렵고, 재생/일시중지 등의 간단한 기능을 하기 위해서는 메뉴 자체를 이동해야한다.
  • 재생중인 곡을 표현하는 방법은 아주 제한적으로 시도되는데, 재생중인 곡의 아트웍 이미지를 탭 바에 깔아주는 것이다. (그러나 어둡게 blur 처리해야하기 때문에, 제대로 정보를 제공한다고 보기는 어렵다.)
  • SoundCloud의 now playing 버튼은 재생중일 때에만 생긴다. 이는 애플의 iOS 가이드라인에서 권장하지 않는 방식이다. (“Don’t remove a tab when its function is unavailable. If you remove a tab in some cases but not in others, you make your app’s UI unstable and unpredictable.”)
    그러나 재생중일 때에만 재생 버튼이 생긴다고 정말 예측불가능하고 불안정한 경험을 제공하는 것일까? 그렇지 않다고 본다. SoundCloud의 방식은 음악 서비스라는 특성에 맞는 유연한 선택이였다고 보이고, 그것은 가이드라인 보다는 기존 ui 요소를 조합하는 상상력으로 가능했다고 본다. (그 효과가 그리 드라마틱하지는 않았지만 말이다.)

: 1)상단 내비게이션 바 + 2)하단 탭 메뉴 + 3)하단 재생 바

Image for post
Image for post
  • 사례: Apple Music, 멜론
  • Apple Music에서 이 방식을 적용했을 때 적잖이 놀랐다. 세상에 하단 탭이 두겹이라니.
  • iPhone 5까지만 해도 상상하지 못하던 방식이다. 이제는 사용자들이 웬만큼 큰 화면을 사용하고 있으니, 기본 ui 방식은 유지하면서 추가로 재생 bar가 들어가도 되겠다고 판단한 것으로 보인다.
  • Now playing bar를 누르려다가 탭 메뉴를 누르게 되는 경우가 종종 발생하지만, 어색함의 단계가 지나면 불편함 없이 사용할 수 있는 수준으로 보인다. 다른 요소들은 iOS의 기본 요소들이니, 익숙하고 단순하다.
  • 멜론은 iPhone 6 출시 전에도 이 방식을 사용한 것으로 기억한다. (애플과 멜론의 디자인 접근 방식은 조금 다른 것 같다.) 컨텐츠 영역을 조금이라도 확보하기 위해, 멜론은 now playing bar를 닫고 펼칠 수 있는 버튼도 들어가있다. 때문에 화면에 들어간 액션이 꽤 많아졌고, 기능을 유추하기 어려운 상황이 생기기도 한다.

: 내비게이션 드로어 + 상단 탭 메뉴 + 하단 재생 바

Image for post
Image for post
  • 사례: YouTube Music
  • 여타 구글의 iOS 앱들이 그렇듯, 숨기지 않고 안드로이드의 유전자를 온몸으로 주장한다.
  • 탭 메뉴는 하단이 아닌 상단에 위치하는데, 좌/우 swipe으로 메뉴간 이동이 가능하다.
  • 안드로이드에서는 화면 좌측을 swipe하여 내비게이션 드로어에 진입할 수 있지만 iOS에서는 그러하지 못하다. 즉, thumb zone에서 가장 먼 햄버거 버튼을 탭 해야만 드로어에 들어갈 수 있으므로 사실상 진입이 어렵다. iOS에 안드로이드 내비게이션을 적용한 한계다. (드로어 안에 중요한 기능이 들어있다면 낭패가 될 것이다.)
  • 이중으로 된 상단 바의 높이가 제법되어 컨텐츠 영역을 많이 가리는 단점이 있는데, 스크롤중일 때에는 윗줄을 가리는 방식으로 극복했다.

: 필요해 보이면 일단 한 화면에 때려넣는다

Image for post
Image for post
  • 사례: 멜론, 네이버 뮤직, 지니, 엠넷, 비트
  • 앞서 언급한 몇 개의 방식을 각기 적용된 사례들인데, 이 앱들은 공통점이 있다. 화면에 사용된 액션 버튼이 많고, 위계에 맞지 않게 배치되었다는 점이다. 이런 특징은 한국 서비스에서 두드러진다. 1번~5번의 분류 체계와는 맞지 않지만, 예외적인 분류로 모아봤다.
  • 대부분의 서비스들이 구매 버튼을 상단 내비게이션 바에 배치했다. 외국의 많은 서비스와는 달리 유료 서비스만 제공하는 한국 서비스들의 특징이 반영되어있다고 볼 수도 있다.
    홈 화면에 고정된 구매 버튼의 효과에는 의문이 있다. ‘사용자가 자주 사용하는 기능’이 아니라 ‘서비스에서 중요하게 생각하는 사업 목표’를 고정된 버튼으로 박아주는게 과연 맞는 방법일지.
  • ‘위계에 맞지 않는 배치’는 네이버 뮤직에서 두드러진다. 내비게이션 바의 타이틀 영역에 흡사 메뉴 버튼 또는 scope bar 처럼 움직이는 두 개의 아이콘이 있고(내용상 그 둘은 병렬적인 관계가 아님에도 불구하고 말이다), 재생 바 안에는 서비스 전체 단위의 히든 메뉴 버튼이 들어있다. 엠넷의 내비게이션바에는 featured 컨텐츠의 이미지와 문구가 있다. 홈에 나와있는 메뉴와 숨겨진 메뉴들은 어떤 기준으로 구분되어있는지 알기 어렵다. 비트는 홈 화면에 내비게이션 바가 없는데, 하위 화면으로 가면 생긴다. Now playing은 상/하단 바가 아닌 컨텐츠 영역 위에 떠있다.
  • UI 요소의 디자인에서는 실험 정신이 발견된다. 예컨대 지니의 재생 바는 바의 형태가 아닌 플로팅 버튼처럼 생겼다. 고정된 내비게이션 영역이라기보다는, 컨텐츠 영역에 임시로 띄워져있는 토스트처럼 보인다.(로그인을 하려면 똑같이 생긴 토스트가 이 위에 뜨기도 한다) 엠넷의 재생 바는 아트웍 이미지 부분만 볼록하다. 비트의 탭 바는 영역 구분 없이 화면 위에 둥둥 떠있으며, now playing 버튼은 탭 바 바로 위에 위치한다. 흡사 머티리얼 디자인의 fab(플로팅 액션 버튼)처럼 보이기도 하는데, fab을 하단 탭바와 함께 사용하는 경우는 흔하지 않다.

앞서 살펴본 몇 가지의 방식은 각각의 장단점이 있다. 유형은 사후의 분석을 통한 분류일 뿐이지, 애초에 고정적인 몇 개로 정해진 것이 아니다. 플랫폼의 특성을 이해하고 원하는 경험에 맞는 뼈대를 설계하는 것은 프로덕트 매니저와 프로덕트 디자이너들의 몫이다. 그 과정에서 현재까지 나온 ui 요소들을 조합하고 교배함으로써 새로운 시도가 나올 수도 있겠다.

구조의 이해 없이 화면을 설계하는 것은 위험할 수 있다. 한 화면에 단순히 필요한 기능을 나열한다던가, 관계에 대한 고려 없이 내비게이션을 배치한다면, 사용자는 너무 많은 길에 질겁하거나 길을 잃을 수도 있다. 적어도 얼굴 피부 위로 뼈가 튀어나오거나, 입술 위에 눈알이 달리는 일은 없어야 할 것이다.

시대에 맞는 ‘미인형’을 발견하는 것도 중요하다. 스크린 사이즈의 변화에 따라 Apple Music의 모습이 크게 바뀌었듯, 음악 서비스의 ui는 주요 컨텐츠의 성격과 디바이스 환경 등에 많은 영향을 받는다. 새로운 시도를 하는 사례에 항상 주목할 필요가 있다.

디지털 음악 서비스 만드는 생각

음악 서비스 만드는 사람들의 이런 저런 생각들

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store