멜론 피드 개선 디자인 이야기
디자이너의 고민과 개선점
안녕하세요. 오늘은 멜론 5.0 업데이트를 진행하며, 피드를 어떻게 개선하면 좋을 지 고민하고 반영한 이야기를 적어보려 합니다.
피드는 어떤 서비스인가요?
멜론 피드는 팬 맺은 아티스트, 팔로우 한 DJ나 매거진 등의 새로운 업데이트 소식을 알려주는 개인 맞춤 서비스입니다.
어떻게 하면 피드를 받아볼 수 있나요?
멜론을 사용하다 맘에 드는 아티스트 이름 옆에 있는 팬 맺기 버튼을 누르면, 그 아티스트의 새로운 소식을 피드로 받아볼 수 있습니다. 개선된 피드에서는 마음에 드는 플레이리스트를 올려주는 DJ를 팔로우하면 DJ의 새 플레이리스트 소식을 받아볼 수 있어, 내 취향의 플레이리스트를 듣기 더욱 좋아졌습니다.
피드 디자인
어떻게 개선할까요?
좌 개선 전(멜론 4.0) / 우 개선 후 (멜론 5.0)이번 개선에서는 피드를 사용하는 분들에게 좀 더 정보를 컴팩트하게 제공해드리려 했습니다. 동일한 아티스트의피드가 여러번 날아와 스팸성으로 오인할 수 있는 것을 방지하기 위해, 동일한 아티스트의 피드를 묶어 한 공간에서 소비할 수 있게 하고요. 앨범, 비디오, 포토, 매거진, 티켓, 플레이리스트, 라디오 등 각 컨텐츠에 적합한 디자인으로 고도화해 변별력을 명확히 하기로 했습니다. 제목도 서비스에 대한 이해도를 높일 수 있도록 명확하게 크게 달기로 했습니다.
이렇게 개선했어요
Before & After
* 모든 이미지는 좌 개선 전, 우 개선 후입니다.
앨범 발매 소식일단 전체적인 텍스트를 키웠습니다. 술술 잘 읽히는 소식이 되도록요. 누구의 소식인지가 중요해 아티스트의 썸네일을 조금 더 키웠습니다. 썸네일 좌상단에 표시하던 컨텐츠 구분 아이콘은 텍스트로 변경해, 명확하게 컨텐츠 타입이나 발송 이유를 알려줍니다.
개선 전 멜론 4.0 피드 화면을 작업할 때만 해도 2015년이라, 작은 해상도에서 정사각형으로 화면을 채우면 시원해보인다는 기준으로 디자인했습니다. 세월이 흐를수록 디바이스의 크기도 커지고, 정사각형 이미지가 기대보다 크게 노출이 되어 밸런스가 안 맞는 경우가 생겼습니다. 컨텐츠를 비쥬얼 위주로 하나하나 주목시키는 컨셉이라면 크게 채우는 정사각형 스타일도 좋지만, 피드는 적당한 크기의 컨텐츠들로 구성해 다양한 소식을 전달하는 것이 더 중요했습니다. 앨범 커버 썸네일 크기를 줄여 전체적인 밸런스를 맞췄습니다.
좋아요, 댓글, 더보기, 발송시간을 한 줄로 묶어 하단에 배치해, 컨텐츠를 다 본 후 좋아요를 누르는 흐름을 맞췄습니다. 아이콘들의 크기 밸런스도 맞추고요. 좀 더 가독성이 좋아졌지요?
영상 컨텐츠라는 걸 알려주는 가장 중요한 정보는 뭘까요? 저는 재생시간이라고 생각합니다. 재생시간을 제외한 영상 아이콘, 재생버튼을 제거했습니다. 썸네일이 한결 시원해보입니다.
포토가 여러장이어도 기존에는 한 장밖에 볼 수 없었습니다. 비율도 정사각형 고정이라, 이미지가 잘려보여 예쁘게 보이지 않았습니다. 이미지가 여러장을 경우에는 넘겨볼 수 있게, 비율대로 나오게 변경했습니다.
당시에는 분기처리 이슈로 공연 컨텐츠도 정사각형으로 제공해야 했습니다. 아쉽게도 포스터의 제목과 글자들이 잘려 나왔었습니다. 이번에는 개발자분들이 노력해주신 덕에 포스터의 비율대로 온전히 나오도록 변경할 수 있었습니다. 시간과 더보기 영역을 하단에 한 줄로 변경함으로 이미지 아래에 벙벙하게 뜨던 영역도 제거했습니다.
구독 중인 멜론 매거진 소식
팔로우한 DJ나 플레이리스트 소식매거진은 매거진다운 차별화 포인트를 가볍게 줄 수 있게 살짝 편집 디자인 느낌을 적용했습니다. 멜론에 알차고 매력적인 음악 전문 매거진이 많답니다. 구독해보세요! 플레이리스트도 어떤 음악이 수록되어 있는 지 알 수 있어 정보를 판별하기 좋게 개선했습니다.
위에서 언급한 묶음 피드입니다. 한 아티스트의 잦은 소식을 알차게 한 공간에서 확인할 수 있도록 컨텐츠를 묶어주니, 피드로 더 다채롭고 유용한 정보를 쉽게 확인할 수 있어졌습니다.
개선 후, 피드의 이용자 수가 무려 26% 상승했습니다!
저는 개선 후 서비스를 실 사용하기 더 좋아졌다 느낍니다. 디자이너로서도 무척 즐겁고 보람찼던 작업이었습니다. 흥미롭게 읽으셨다면 멜론에 들어와 피드를 한 번 사용해봐주셔도 감사하겠습니다. 앞으로도 꾸준히 사용자분들의 니즈를 연구하고, 더 나은 서비스를 제공하며 여러분의 일상에 도움이 되는 멜론이 되도록 노력하겠습니다.
다음 시간에도 재미있고 알찬 이야기로 만나뵙겠습니다. :)
감사합니다.
