brunch

라이킷 18 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이나 Feb 29. 2024

스포티파이의 UX/UI (1)

모바일 앱의 UX/UI 톺톺

유저에게 좋은 앱 UX/UI를 제공하는 방법은 모바일 앱의 사용경험을 늘리는 것이 정도인 것 같아 다양한 앱을 직접 사용해 보고 기록하기로 했습니다.

그 첫 번째 기록으로, 스포티파이 iOS 앱을 사용해 봤습니다.

버전 8.8.96.395 기준입니다.

스포티파이 앱은 다크모드/라이트 모드 선택이 없다

설정에 가서 다크모드/라이트 모드를 선택해서 컬러가 어떻게 바뀌는지 확인하려 했는데, 설정 메뉴를 모두 열어봐도 없었습니다.

스포티파이의 ‘설정 및 개인정보’ 메뉴

보통 화면 설정 같은 메뉴가 있는데 없고, 모든 메뉴 다 열어봤지만 없습니다.

블랙+녹색의 브랜드 컬러로 전하고 싶은 게 있었던 걸까요?

확실히 홈탭의 상단 메뉴를 선택했을 때, 스포티파이의 브랜드 컬러인 녹색이 블랙 컬러의 배경에서 주목도가 높고 시각적으로 도드라집니다.

모바일 경험에 맞춘 플레이리스트의 카드와 스크롤 효과

홈탭에서 ‘음악’ 메뉴를 선택하면 스포티파이가 유저맞춤으로 추천하는 플레이리스트를 보여줍니다. 그리고 스크롤을 해서 여러 개의 플레이리스트를 볼 수 있습니다.

무한 스크롤처럼 보이지만 확인해 보니 저는 총 49개의 카드를 볼 수 있었습니다.

모바일에 최적화했다고 느낀 이유는 첫 번째가 카드 사이즈, 두 번째가 스크롤 시 상단에 카드가 고정되는 UX 때문입니다.

카드 사이즈

하나의 카드 콘텐츠에 완전히 집중할 수 있는 사이즈로 구성했습니다. 이 카드를 보는 동안 다른 정보에 샐 일은 별로 없습니다. 탐색을 목적으로 이 페이지에 진입한 사용자는 한 번에 하나의 플레이리스트를 집중해서 탐색할 수 있습니다.

플레이리스트의 카드 사이즈가 모바일 화면에 최적화되어 있다

카드 사이즈는 한 화면을 꽉 채우는 듯 하지만, 지금 재생 중인 미디어를 보여주는 영역 뒤로 빼꼼 다음 카드가 보입니다. 다음 콘텐츠가 있다는 것을 직관적으로 알 수 있죠.

스크롤 시 잠시 멈춤

카드는 아래로 밀어 스크롤하면 다음 카드로 넘어갑니다. 그리고 반드시 멈춥니다. 카드의 최상단이 메뉴 바로 아래 탁하고 붙습니다. 다음, 그다음 카드를 보려면 반드시 한 번 더 스크롤을 해야 합니다.

그럼 카드가 멈췄을 때 사용자는 어떻게 반응할까요? 추천하는 플레이리스트를 잠시라도 보게 됩니다. 슉슉 내려가는 무한 스크롤이었다면 정보를 보지도 않고 지나 보낼 가능성이 높겠죠. 멈추고, 또 스크롤을 하는 잠깐을 놓치지 않았습니다.

이뿐만 아니라 이 카드 자체가 참 똑똑하게 구성됐습니다.

1. 영상/이미지 사용

음악을 듣는데 영상이나 사진은 필요 없을지도 모르죠. 현재 음악을 재생 중인 유저에게 음악을 들려주지도 않고 플레이리스트를 눌러보게 할 방법으로 영상만큼 탁월한 것도 없을 겁니다.

음악은 듣는 것에서 그치지 않고 영상이나 이미지와 결합해 종합적인 예술로서 향유됩니다. 뮤직비디오가 없는 신곡을 찾아보기는 힘들죠. 영상이 없어도 앨범 재킷 이미지가 있습니다. 음악을 설명하는 이미지는 어느 때나 있었죠.

스포티파이는 짧은 영상을 카드 가득히 보여주며 자동 재생합니다. 영상이 없으면 재킷 이미지를 보여줍니다. 카드 영상/이미지를 보고 마음에 들면 유저는 액션을 해보게 되겠죠.

2. 잠깐 들어보고 결정할 수 있게 미리 듣기 가능

카드 우측 상단에 스피커 아이콘이 있습니다. 재생 중인 음악이 있을 때에는 스피커 아이콘에 x가 나타납니다. 아이콘을 선택하면 플레이리스트의 곡이 재생되며 현재 재생 중인 곡은 일시 정지됩니다.

언제든 원래 재생 중이었던 음악으로 돌아갈 수 있어 부담감 없이 재생해 볼 수 있습니다.

3. 음악이 재생 중인 것처럼 보이기

카드 상단에 회색 바가 여러 개 나타납니다. 이 바는 시간에 따라 흰색으로 채워집니다. 일반적인 재생바의 형태죠. 사용자들은 직관적으로 음악이 재생 중이라고 인지하게 됩니다. 실제로 소리는 나오고 있지 않지만 이 음악이 재생 중이라는 것을 알게 된 사용자는 음악을 잠시라도 들어보게 될 겁니다.

애니메이션이 없었다면 이 플레이리스트 카드가 여러 곡을 추천해 준다는 것을, 또 미리 들어볼 수 있다는 것을 알려주기 어려웠을 거예요.

이미 사용자들에게 익숙한 UI와 애니메이션으로 정보를 제공하는 동시에 플레이리스트를 들어볼 가능성을 높였습니다.

개인적으로 카드에서 아쉬운 것은 5개 곡에 대한 미리 듣기를 제공하는 것 같은데, 사용자에게 선택권이 없다는 것입니다. 무조건 첫 곡부터 들을 수 있고 그다음 곡을 들으려면 기다려야만 합니다. 지금 재생 중인 곡/플레에서 이탈하기를 원하지는 않고 탐색만 하고 싶을 때에는 방법이 없었습니다.

스포티파이 앱을 이렇게 저렇게 사용하다가 플레이리스트 카드가 무척 눈에 띄어 첫 번째 글로 작성하게 되었습니다. 재미있는 것이 있으면 또 작성해 보겠습니다.

keyword