brunch

You can make anything
by writing

C.S.Lewis

by 김현준 Jan 17. 2024

스포티파이(Spotify) ¹

UI Insight 시리즈 03

© 스포티파이(Spotify)

온보딩 ¹

계정 생성 시, 사용자가 좋아하는 아티스트를 선택하여 피드에 노출되게 할 수 있습니다. 좋아하는 아티스트를 선택하면, 선택한 아티스트와 유사한 무드의 아티스트가 바로 아래에 노출되므로 일일이 스크롤할 필요가 없습니다.


.

© 스포티파이(Spotify)

프리미엄 ²

프리미엄 요금제에 가입되어 있지 않은 경우, 네 번째 탭에 프리미엄 요금제가 나타납니다. 단, 앱에서는 구독할 수 없어 요금제 옵션을 확인할 수만 있습니다.



© 스포티파이(Spotify)

홈 ³

홈에는 사용자의 취향에 맞춘 여러 플레이리스트를 확인할 수 있습니다. 홈 내에서는 상단의 음악 및 팟캐스트 을 탭 하여 해당하는 내용을 볼 수 있습니다.



© 스포티파이(Spotify)

홈: 음악 ³

음악 칩을 탭 하면 추천하는 음악 믹스를 확인할 수 있습니다. 믹스된 노래 중 5가지 정도의 일부를 인스타그램 스토리처럼 프로그래스바를 통해 넘겨볼 수 있습니다. 카드의 우측 절반 가량을 탭 하면 다음 노래로 넘어갑니다.



© 스포티파이(Spotify)

홈: 음악 ³

음악 믹스가 마음에 들지 않는다면 점 3개 메뉴라고 하는 소위 미트볼 메뉴를 눌러 흥미 없음을 선택할 수 있습니다. 이후 스낵바가 발생하며 리스트에서 해당 믹스가 성공적으로 사라졌음을 사용자에게 알립니다.



© 스포티파이(Spotify)

음악 재생 ⁴

믹스에서 음악을 선택하고 세로로 스크롤하여 가사와 가수 정보, 라이브 일정, 상품 등을 확인할 수 있습니다. 가사뿐 아니라 다양한 항목을 리스트에 포함시킨 점이 흥미롭습니다.



© 스포티파이(Spotify)

음악 재생: 재생 옵션 ⁴

제목 우측의 추가 버튼을 탭 하여 좋아요 한 곡에 추가하거나 랜덤 재생, 반복 재생 등을 할 수 있습니다. 라인 형태의 아이콘 셋이 잘 통일되어 있고 심미적으로도 훌륭합니다.



© 스포티파이(Spotify)

음악 재생: 기기 연결 ⁴

다른 기기에 연결하여 음악을 재생할 수 있습니다. 기기 연결 시, 기기가 어디에 연결되어 있는지 알려주는 모달이 발생합니다.



© 스포티파이(Spotify)

음악 재생: 재생목록 ⁴

우측 하단의 리스트 아이콘을 탭 하여 현재 플레이되고 있는 재생목록과 믹스를 확인할 수 있습니다. 믹스 리스트의 좌측 체크박스를 선택하여 재생목록에 음악을 추가할 수 있습니다. 체크박스가 아닌 음악을 탭 하면 바로 해당 음악이 재생됩니다. 체크박스가 선택되지 않은 경우, 어떤 기능인지 사용자가 인지하지 못하는 경우도 있을 수 있어 보입니다.



© 스포티파이(Spotify)

음악 재생: 가사 ⁴

재생되고 있는 음악 페이지를 세로로 스크롤하면 가사가 나타납니다. 탭 하여 크게 보거나 깃발 아이콘을 탭 하여 문제가 있을 시 보고할 수 있습니다.



© 스포티파이(Spotify)

음악 재생: 재생목록 추가 ⁴

우측 상단의 미트볼 메뉴를 눌러 현재 듣고 있는 음악을 재생목록에 추가할 수 있습니다. 플레이리스트 추가 시, 상단의 버튼을 눌러 새 플레이리스트를 만들 수 있습니다.



© 스포티파이(Spotify)

음악 재생: 수면 타이머 ⁴

메뉴의 수면 타이머에서 시간을 설정하면 자동으로 음악 재생을 정지할 수 있습니다. 다시 메뉴에 들어가면 현재 설정된 수면 타이머 시간이 나타납니다.



© 스포티파이(Spotify)

음악 재생: 아티스트 ⁴

메뉴에서 아티스트 보기를 눌러 아티스트의 곡과 일정, 제품 등의 정보를 볼 수 있습니다. 스크롤을 내려도 재생 버튼이 FAB 버튼처럼 탑 바에 걸려 있어 상시 플레이할 수 있습니다.



© 스포티파이(Spotify)

음악 재생: SNS 공유 ⁴

음악을 플레이하는 중 캡처를 하면 바로 SNS에 공유할 수 있는 폼으로 이미지가 생성됩니다. 가사를 탭 하여 공유하고 싶은 부분만 선택하여 공유할 수도 있습니다. 이런 기능은 젊은 사용자 층으로 하여금 SNS를 통해 스포티파이라는 스트리밍 플랫폼을 홍보하는데 큰 역할을 할 것 같습니다. 물론 멜론 등의 서비스에서도 유사한 기능을 제공하지만, 이미지 폼 자체가 심미적이기 때문에 소위 MZ스타일의 젊은 브랜드 아이덴티티를 구축하는데 효과적이라고 생각합니다.





다음 글에서 이어집니다
인터랙션 ★★★★★
페이드와 슬라이드가 동시에 되는 페이지 이동, 스크롤 시 부드럽게 반동 모션이 나타나는 재생 모달 등 전반적인 인터랙션이 부드럽고 심미적입니다. 스트리밍 서비스 특성상 따분할 수 있는 컴포넌트를 제스처에 따라 살아있듯 움직이는 마이크로인터랙션을 추가하여 소위 아이폰 감성까지도 느껴집니다.

직관성 ★★★★☆
인터랙션 요소가 적지 않음에도 기존 멘탈모델에서 벗어나지 않은 사용성이 좋습니다. 유사한 스트리밍 플랫폼의 기능을 충족하는 동시에 스포티파이만의 인터랙션을 사용하였음에도 직관적입니다.
매거진의 이전글 우버(Uber) ²
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari