[코드스테이츠 PMB 7기] 유튜브뮤직 UI/UX개선해보기 (feat. 플레이리스트)

Figma를 활용해 Wireframe 만들어 보기

1. 앱 서비스를 하나 선택해, 해당 앱에서 태스크를 1가지를 선정합니다. 해당 태스크가 사용자의 어떤 문제를 해결하는지 정의하고 이에 대한 User Story를 작성해 봅니다.
2. ‼️ 단, 기존에 조사했던 제품/서비스 제외
3. User Story 를 해결하기 위한 핵심 기능과 Flow를 파악하고, 화면 흐름을 종이에 간단히 그려 봅니다.(Lo-Fi)
4. 링크에 접속해 Figma를 설치합니다. (https://www.figma.com/downloads/)
5. Figma 설치 후 아래 튜토리얼을 진행합니다.wire - web.fig
6. Wire - mobile.fig
7. Figma Tutorial.fig
8. Figma 를 통해 위에서 구성한 화면의 Wireframe 디자인 (Med-Fi 목표, High-Fi 면 👍)
9. (선택/Essay) 기존의 Flow에서 UX를 개선할 상황을 정의 및 분석해 보고, 이를 바탕으로 어떻게 화면을 개선할 수 있는지에 대해 자유롭게 작성해 봅니다.

 

 

 

 

Intro

유튜브의 끝없는 광고세례에 지쳐, 또 주변인들의 좋은 후기에 힘입어 결제하기 시작한 유튜브 프리미엄 서비스. 그리고 그에 더불어 함께 붙어 온 유튜브 뮤직 서비스 때문에 꽤 오랜시간 이용하던 벅스뮤직을 해지했다.

유튜브 뮤직은 꽤 장점이 많았다. 그 중에서도 가장 좋았던 점은(이제는 유튜브 뮤직만이 가능한 서비스는 아니지만), 알고리즘을 기반으로 한 내 취향에 맞을법한 음악들의 추천이었다. 이러한 장점때문에 꽤나 적극적으로 유튜브 뮤직을 사용했었는데, 단점들도 여럿 존재했다.

 

첫째는 UI/UX가 아직 좀 투박하고 기능들의 플로우가 명확하지 않아 이리저리 많은 부분을 넘나들며 기능을 작동시켜 보아야 했다는 점이었다.

둘째는 현재 나의 플레이리스트로 진입하는 플로우가 불편하다는 점이었다. 곡을 선택하여 저장하려고 하면 '목록에 추가'와 '재생목록에 추가'로 분명히 두 기능이 나뉘어져 있는 것을 알 수 있다. '재생목록에 추가'는 내가 보관하고 싶은 보관함의 목록이고, '목록에 추가'는 현재 나의 플레이리스트에 추가하는 것을 유추할 수 있었다. 그런데 도대체 그 '목록'을 어디서 볼수 있느냐고?! 내가 가장 불편하다고 느꼈던 점이 '현재 나의 플레이리스트' 부분이었다. 재생목록을 저장하는 기능은 쉽게 잘 활용했지만, 기존의 타 서비스들에서 가장 메인에 노출되던 현재 플레이리스트의 위치를 찾기가 쉽지 않았다.

 

내가 사용법에 익숙하지 않아서인지, 나 혼자만 불편함을 느끼는 지점인지는 알 수 없었으나 적어도 확실한 것은 (나한테 있어서만큼은) 기존의 플레이리스트 확인 방법은 무척이나 불편했다는 것이었다. 

 

UI/UX적으로 다소 불편함을 느낀다는 지점은 최근의 업데이트를 통해 꽤나 만족스럽게 변했다. 전체적인 UI는 만족 그 이상으로 깔끔하게 변했고, 직관적인 배치들과 각각의 기능들의 위치는 상당히 만족스러웠다. 

 

 

User Story

 

 

그럼에도 여전히 불편함을 느끼는 기능적인 부분은 여전히 '현재 나의 플레이리스트'의 위치였다. UI의 개선으로 최하단에 위치한 현재 재생중인 음악을 끌어올리면 토스트 팝업 형식으로 현재 나의 플레이리스트가 나타나지만, 아이폰의 경우 최하단에 탭 이동을 위한 모션 기능이 작동하고 있어 종종 원하지 않게 작동하는 경험을 하게 된다. 

 

 

 

기능개선

기능 개선 제안

제안하고 싶은 기능은 메인 홈 하단 네이비게이션 탭에 '현재 나의 플레이리스트' 로 랜딩되어지는 메뉴 탭을 하나 추가하는 것이다. 

기존에 서비스하는 기능들을 전부 활용하되, 하단 네비게이션 탭에서 진입하는 플로우를 추가해 주면 좋겠다고 생각했다. 

 

 

UI/UX 리디자인 (심플하게 로고 추가)

최하단 네비게이션 바에 '재생목록' 메뉴를 추가하였다.

 

 

 

기존 UI/UX 비교

기존의 플로우

 

기존의 플로우는 나의 플레이리스트를 확인하려면, 하단에 재생중인 곡을 선택하여 곡의 세부 화면으로 넘어가야 했다(1단계). 그런 후에 나타는 하단 토스트를 상단으로 끌어올려야만 나의 플레이 리스트가 나타났다. 

 

 

변경해본 플로우

 

변경해본 플로우를 확인하면, 최하단 네비게이션 바에 재생목록 메뉴가 추가되었다. 이제는 언제든 재생목록 버튼을 눌러 '현재 나의 플레이리스트'목록을 바로 확인할 수 있다. 플레이리스트에서 곡을 선택하거나, 최상단에 노출되고 있는 재생중인 곡을 선택하게 되면 앞서 노출된 것 처럼 곡의 상세페이지로 들어갈 수 있다. 

물론 기존의 플로우도 동시에 이용할 수 있도록 투트랙으로 플로우를 유지한다면, 기존의 플로우에 익숙해 있는 유저들에게도 불편함을 주지 않을 뿐더러, 나와같이 현재 나의 플레이리스트 목록을 찾기 힘들어하던 유저에게도 큰 도움이 될 것이라고 생각한다.