brunch

You can make anything
by writing

C.S.Lewis

by Melon Design Mar 08. 2019

멜론 플레이어 리뉴얼

새로 단장한 멜론 플레이어를 소개합니다.

새로 단장한 

멜론 플레이어를 

소개합니다.


우리 일상에서 뗄 수 없는 음악, 음악이 필요한 순간엔 멜론이죠!

멜론이 2019년을 맞이하여 간결한 디자인으로 새단장을 했습니다.
이번 멜론 플레이어 개편은 전반적인 디자인 재정비를 통해 사용성이 불편한 요소들은 최소화하고, 기능과 정보를 보여주는 버튼들을 재정리
하여 중요 정보의 직관성을 높였는데요.

주요 개선 내용을 좀 더 자세하게 알려 드리겠습니다. 



앨범의 본연 모습 그대로

기능 버튼과 정보를

효율적으로 구성 


그동안 멜론의 심볼을 형상화하여 멜론의 시그니처 역할을 톡톡히 해왔던 플레이어가 새단장을 했습니다. 

이번에 개선된 새로운 멜론 플레이어는 앨범의 본연 모습 그대로 기획사 아티스트 마케팅 활용 역할을 할 수 있도록 사각의 형태로 노출되도록 개선하였으며, 시크바 또한 원하는 재생 시간으로 이동하고자 하는 목적에 부합되도록 위치 조정이 되었습니다.


아래는 대표 개선 내용입니다.


1. 앨범커버 이미지를 원형에서 사각 형태로 바꾸어 이미지를 크고 명확하게 볼 수 있도록 개선하였습니다.

2. 앨범 커버 이미지의 컬러를 추출하여 커버 이미지와 잘 조화될 수 있는 컬러 값을 산출, 배경 컬러로 사용하여 매 곡마다 가지고 있는 컬러감을 느낄 수 있도록 하였습니다.

3. 곡에 대한 정보는 화면 상단에, 좋아요와 유사곡 추천 버튼은 화면 가운데에, 음악 감상에 필요한 컨트롤 버튼은 화면 하단에 위치하여 기능적으로 연결된 일관된 사용성을 주었습니다.

4. 좋아요와 유사곡 버튼이 노출되는 기본 모드와 앨범 커버 이미지 터치하면 해당 버튼들이 가려지는 앨범 확장 모드로 심플하게 플레이어를 이용할 수 있습니다.


심플하게 플레이어를 이용하는 방법? 앨범 커버를 터치해보세요!



음악 감상은

유사곡 추천!


이전 버전에도 있었던 유사곡 추천이라는 기능 찾기 힘드셨다고요? 가사 영역 하단에 있어서 잘 눈에 띄지 않았었는데요, 이번 개선에서는 플레이어 화면 전면에 배치하여 간편하게 현재 재생 중인 곡과 유사한 곡을 접할 수 있게 되었습니다.


음악을 감상하는 서비스를 운영하며 매번 고민되는 부분은 어떻게 해야 음악이 끊임없이 자연스럽게 생활에 녹아드는 서비스를 제공할 수 있을까인데요. 새로운 기능도 중요하지만 멜론이 잘할 수 있는 서비스를 사용자들이 잘 접할 수 있도록 제공하는 UI 개선이 필요했습니다.

음악 감상에 최적화된 플레이어를 고민하며 가장 기본적인 곡 정보를 해치지 않고 유사곡으로 빠르게 접근할 수 있도록 화면 우측에 위치한 유사곡 추천은 버튼 터치하면 앨범 재킷을 팝업으로 가져올 수 있도록 모션 테스트도 함께 진행하여 색다른 팝업 스타일을 만날 수 있습니다.

그리고 유사곡 추천 팝업에 있는 유사곡 라디오로 일일히 곡을 찾아다니기보단 라디오처럼 계속 음악 감상도 가능합니다.


멜론의 유사곡 추천과 유사곡 라디오를 들으며 그동안 바쁜 일상에 잊고 지내던 나의 취향을 발견해보세요!


유사곡 추천 팝업



최신 가이드에 맞춘

인디케이터 플레이어


안드로이드 노티피케이션에 들어가는 인디케이터 플레이어가 최신 오레오 8.0 OS 버전에 맞추어 개선되었습니다. 최신 구글 디자인 가이드에 맞게 적용시킨 디자인인데요. 노티피케이션 플레이어도 모든 컬러가 앨범 아트에 의해 바뀌게 되어 개선된 멜론 기본 플레이어에 연결된 디자인으로 개선되었습니다. 


오레오 8.0 OS에서 제공하는 플레이어 가이드는 심플 버전과 확장 버전이 있는데요. 심플 버전에서는 최대 3개의 버튼만 사용이 가능하며, 확장 플레이어에서는 우측 이미지 포함 시 최대 5개의 버튼이 사용 가능합니다.

이렇게 인디케이터 플레이어는 노티피케이션에 위치하다 보니 개발적 이슈가 많은 플레이어인데요. 디자인을 하면서도 제한적인 부분이 많아 개발자와 함께 많은 부분 풀어나가며 진행을 했었습니다.


그중 몇 가지 이슈만 공유해드리자면,


1. 플레이어 상단의 멜론 로고 아이콘은 Status bar에 쓰이는 아이콘 소스와 동일한 소스가 사용됩니다.

2. 심플 플레이어는 버튼 리소스가 잘릴 수 있어서 잘리지 않게 조절이 필요합니다. 

    (아래 개발자 모드 영역 참고)

3. 버튼은 투명도 구현이 되지 않습니다.

4. 제공된 앨범 이미지의 색상은 배경 및 버튼 이미지 등에 자동으로 색상을 지정합니다.

    (총 3가지 컬러 : 배경, 포인트 1, 포인트 2 컬러)


인디케이터 플레이어


앞으로도 플레이어는 지속적인 개선으로 다양한 아티스트 마케팅 공간으로 음악과 컨텐츠, 새로운 곡의 발견등 다양한 역할을 할 수 있는 공간으로 진화시킬 예정입니다.

감사합니다!




앨범 정보 출처 및 내용 : 

위 멜론 플레이어 내 이미지 및 곡 정보들은 멜론에 노출된 내용을 기반으로 제작되었으며 실제 내용과 다를 수 있습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari