Figma로 유튜브 뮤직 '내가 고정한 음악' 기능에 대한 와이어프레임 디자인하기 | 코드스테이츠 PMB 13기

🌷 들어가기 전에..

일정 마치고 집에 돌아오니 시간은 밤 11시..

어느샌가 쌍꺼풀은 두 겹이 돼서 풀리지도 않는다.

세 겹 쌍꺼풀 되는 그날까지 아자아자 화이팅. 

오늘 나는 유튜브뮤직의 유저스토리와 와이어프레임을 작성해볼 것이다.

사용자 조사는 하지 못하는 상황이니 나의 개인적인 경험을 기반으로 내용을 전개할 예정이다.

 

🎧 유튜브뮤직을 사용하면서 항상 불편했던 점이 있다.
나에게는 상황에 따라 듣는 음악이 몇 곡 정해져 있는데, 매번 검색해서 찾아서 재생버튼을 누르는 게 귀찮다는 점이다.
유튜브뮤직은 추천이라는 명목으로 매번 '임의의 연관 키워드를 기반으로 만들어진 플레이리스트'를 내 피드에 노출시킨다.
그리고 피드 최상단에는 최근 재생 기록을 기반으로 추천 음악 리스트를 보여준다.
이러한 기능들이 유용할 때가 있지만,  나처럼 루틴하게 듣는 음악이 있고, 일정 기간마다 반복해서 듣는 음악이 정해져 있는 사람에게는
앱을 켤 때마다 매번 바뀌는 추천 음악 리스트가 이따금씩 번거롭게 느껴진다.

🎧 예전에 JTBD과제를 할 때 언급했었는데, 나는 아침에 일어나기 싫거나 권태로울 때 듣는 음악이 정해져 있다.
데이브 브루벡의 take five, 라벨의 bolero다. 눈도 안 뜬 상태에서 일단 재생하고 보는 것들이다.
근데 현재 상태로는 매번 검색해서 음악을 재생해야 한다. 피드에는 항상 듣는 음악을 보여주는 공간이 없기 때문이다.
검색을 하지 않고 듣기 위해서는 별도의 재생목록을 생성해야 하고, 매번 재생목록 탭으로 이동해 음악을 선택해야 재생할 수 있다.
그래서 나는 항상 듣는 음악(or 요즘 꽂혀서 매일 듣고 싶은 음악)을 검색 없이 피드에서 바로 들을 수 있게 하는 기능을 추가하려고 한다.
이름은 '내가 고정한 음악'이라고 붙여보았다.
오른쪽 사진 속 검색창 바로 아래에 있는 '검색에서 최근 재생한 노래' 부분에 내가 제안하려는 기능을 두려고 한다.
왜냐면 이미 메인 피드 최상단에 최근 재생 기록을 기반으로 추천해주는 플레이리스트가 있는데
검색 탭 안에도 '다소 불필요하게' 최근 재생한 노래 리스트를 보여주고 있기 때문이다. 

 

다시 듣기, 빠른 선곡은 전부 최근 재생 기록을 기반으로 리스트가 구성된다. 검색 탭을 누르면 최상단에 또다시 '최근 재생' 목록을 보여준다.

 

 

---

 

W4D4

피그마를 활용해 유튜브뮤직의 와이어프레임을 만들어봅시다!

 

 

🎧  유저 스토리

유튜브뮤직 사용자는 검색하거나 재생목록을 생성하지 않고도
루틴하게 듣거나 최근 매일 듣고 있는 음악들을 빠르고 편하게 감상하고 싶어한다.

 

🎧  해결을 위한 핵심 기능

검색 페이지 상단에 사용자가 원하는 음악을 고정할 수 있도록 '내가 고정한 음악' 서비스를 제공한다.

 

🎧  Lo - Fi 프로토타입

이번에는 종이에다가 그려보았다. 나름 이미지를 연출하고 싶어서 유튜브뮤직 실행한 핸드폰하고 같이 찍어보았다 🌝

 

 

🎧  와이어프레임 제작하기

내 인생 첫 피그마 작업물! 재미있다. 상상만 하던, 남들이 하는 걸 보기만 하다 직접 하니까 짜릿하기까지 하다.

 

웹페이지로 볼 경우, 이미지를 클릭하면 고화질로 내용을 확인할 수 있습니다

 

제공된 샘플을 따라서 플로우 차트를 따로 만들 여력이 없어서 화살표와 번호를 사용해 네 가지 상황에 대한 각각의 흐름을 표현해보았다.
숫자는..도대체 어떤 위계를 따른 건지 나도 모르겠는데ㅎㅎ 일단 숫자가 겹치지 않는 것에 의의를 두고 넘버링을 했다.

 

웹페이지로 볼 경우, 이미지를 클릭하면 고화질로 내용을 확인할 수 있습니다

 

 

 

---

 

🌷 마무리를 하며..

너무너무 재밌다!! 고삼때도 이렇게 늦게까지 뭘 해 본 적이 없는데 역시 재밌다고 느끼면 안 힘든 것 같다.

아니 사실 힘들다 겁나 힘들다 빨리 자러가야지

지금 새벽 5시 10분 전인데 이따 10시에 북클럽 해야해서 기력을..조금이라도...모아둬야 한다.

만들면서 아쉬웠던 점은 단축키나 플러그인을 잘 몰라서 진짜 쌩노가다로 작업했다는 것이었다.

화살표 하나하나 장인 정신으로 만들었다. 오른손에 감각이 60% 정도밖에 없다.

오늘은 단축키도 좀 외우고 꿀팁도 좀 알고나서 작업에 들어가야겠다.

 

고생 많았고 이번주 위클리 과제도 힘내보자!