스포티파이(Spotify) ²
UI Insight 시리즈 03
© 스포티파이(Spotify)팟캐스트 ⁵
홈에서 팟캐스트 칩을 선택하면 팟캐스트 콘텐츠를 세로로 스크롤하여 볼 수 있습니다. 각 팟캐스트의 카드를 스크롤하면 표지 이미지가 작아지면서 남은 재생 시간, 자막, 음소거 버튼, 음파 비주얼 인터랙션이 나타납니다.
© 스포티파이(Spotify)팟캐스트: 리스트 추가 ⁵
리스트의 추가 버튼을 눌러 팟캐스트를 추가할 수 있습니다. 팟캐스트 리스트에서 카드를 선택을 할 때마다 체크아이콘이 발생하고 완료 버튼이 활성화됩니다.
© 스포티파이(Spotify)팟캐스트: 프로그램 페이지 ⁵
팟캐스트 프로그램을 누르면 에피소드, 상세정보 등을 확인할 수 있습니다. 이런 콘텐츠 더 보여주기를 누르면 유사한 팟캐스트 프로그램이 리스트로 나타납니다. 리스트에는 팟캐스트 분류, 제목, 상세 설명이 보입니다.
© 스포티파이(Spotify)팟캐스트: 에피소드 페이지 ⁵
팟캐스트 프로그램에서 각 에피소드의 리스트를 확인할 수 있습니다. 에피소드의 설명이 길 경우 더 보기 텍스트 버튼을 눌러 확장할 수 있습니다.
© 스포티파이(Spotify)팟캐스트: 프로그램 평가 ⁵
프로그램을 별점으로 평가할 수 있습니다. 단, 프로그램의 에피소드를 듣지 않은 경우, 프로그램을 들어야 한다는 모달이 발생합니다.
© 스포티파이(Spotify)팟캐스트: 다운로드 설정 ⁵
프로그램 페이지의 미트볼 메뉴를 눌러 설정으로 이동할 수 있습니다. 에피소드 자동 다운로드를 설정하고, 텍스트 버튼을 눌러 자동 다운로드 수를 제한할 수 있습니다.
© 스포티파이(Spotify)검색 ⁵
검색 탭에서 다양한 종류의 음악 콘텐츠로 진입할 수 있습니다. 라이브 일정, 나만의 플레이리스트를 제외한 카드 목록에는 앨범 커버 이미지가 들어있습니다.
© 스포티파이(Spotify)검색: 스포티파이 코드 ⁶
검색 탭의 카메라 아이콘을 눌러 각 콘텐츠에 있는 스포티파이 코드를 인식하여 진입할 수 있습니다. 코드의 비주얼이 QR과 같은 사각형이 아닌 음파 형태이기 때문에, 공유 기능을 제공하는 스포티파이만의 젊고 심미적인 아이덴티티를 잘 나타내는 것 같습니다.
© 스포티파이(Spotify)라이브러리: 블렌드 ⁷
라이브러리 탭에서 우측상단 더하기 버튼을 눌러 공유 플레이리스트인 블렌드 기능을 사용할 수 있습니다. 최대 10명의 친구를 블렌드에 초대할 수 있으며, 모든 참여자의 음악 취향을 바탕으로 소셜 추천을 제공합니다. 초대받은 사용자가 공유 링크에 접속하면 취향 매칭률과 관련 정보를 인스타그램 스토리와 같은 플로우로 제공합니다. 블렌드 페이지에는 각 곡마다 어떤 사용자의 취향인지 프로필 이미지로 알려줍니다.
© 스포티파이(Spotify)설정 ⁸
홈 탭 우측 상단의 톱니바퀴 아이콘을 탭 하여 설정으로 진입할 수 있습니다. 하단 내비게이션 상단 부분에 그라디언트 처리가 되어 어둡게 느껴집니다. 로그아웃 버튼을 텍스트 버튼이 아닌 레이즈드 버튼을 사용하여 다른 메뉴들보다 눈에 잘 띄게 한 점이 돋보입니다.
© 스포티파이(Spotify)설정: 프로필 설정 ⁸
아웃라인으로 된 수정 버튼을 탭 하여 프로필 내용을 편집할 수 있습니다. 프로필 편집 모달이 나타나며, 업로드 이후 다시 설정 창으로 이탈됩니다.
인터랙션 ★★★★★
마이크로인터랙션이나 페이지 전환의 모션에 큰 공을 들인 것처럼 느껴집니다. 모션의 가속도가 부드러우면서도 자연스럽습니다. 이런 사소한 디테일이 앱의 완성도가 매우 높은 것처럼 느끼게 해 줍니다.
직관성 ★★★☆☆
기능의 직관성은 높은 편이지만, 기능이 많고 집약되어 있다 보니 처음 사용 시 가이드가 필요해 보입니다. 단 온보딩이 완료되면 사용하던 기능은 직관적으로 사용할 수 있습니다.
