보민님의 블로그

[코드스테이츠 PMB 11기]멜론의 Wireframe _W4D4 본문

PMB/데일리과제

[코드스테이츠 PMB 11기]멜론의 Wireframe _W4D4

야옹씌 2022. 4. 8. 18:17

멜론의 방금그곡
출처:멜론

방송을 보다 방금 나온 노래가 좋아 다시 듣고 싶거나 어딘가에서 들어봤는데 제목이 생각이 안 나 답답할 때가 있다.
멜론은 재방송을 포함해 실시간으로 TV와 라디오에서 나온 노래를 알려주는 기능인 '방금그곡' 을 제공하고 있다.
오늘은 '방금그곡' 이 사용자의 어떤 문제를 해결하는지 UserStory를 작성하고 Wireframe으로 역기획 해보려 한다.

User Story

유저 스토리를 사용하면 고객의 니즈를 중심으로 서비스를 만들 수 있고 설정한 유저 스토리를 기반으로 효율적인 의사소통을 할 수 있다. '방금그곡'은 고객의 어떤 문제를 발견했고 어떻게 해결하였을까 유저 스토리를 정리해보았다.

Who(User)? 방송에 방금 나온 노래가 궁금해
What(Action)? 방송에 방금 나온 노래를 찾고싶다.
Why(Purpose)? 플레이리스트에 추가해 언제든지 다시 듣고 싶기 때문이다.

출처:멜론 어플

멜론은 방송에 방금 나온 노래가 궁금한 사람들에게 '방금그곡'을 통해 노래의 정보를 알려주고 있다. TV/라디오로 탭을 나누고 '지금 방송 중인 프로그램'을 통해 자신이 보고 있는 프로그램을 선택해 곡에 삽입된 노래들을 플레이리스트에 추가해 바로 들어 볼 수 있다.

Mid-fi Wireframe
메인화면에서 방금 나온 노래를 찾아 자신의 플레이리스트에 추가하기 까지의 과정

Mid-fi Prototype


1. 메인화면에서 통합 페이지로 이동
2. 통합 페이지에서 '방금그곡' 선택
3. '방금그곡' 페이지에서 곡 재생
4. '1곡이 재생목록에 추가되었습니다.' 알림
5. 재생목록에서 추가된 곡 확인 및 감상