멜론 플레이어 잠금화면 리뉴얼
조금 더 편해진 멜론 플레이어 잠금화면을 만나보세요!
조금 더 편해진
멜론 플레이어
잠금화면을 만나보세요!
멜론 플레이어 잠금화면이 개선되었습니다.
우리가 처음 만나는 멜론은 바로 잠금화면에 있다는 건 다들 아시죠!
출근길이나 다른 용무 중 급히 멜론 플레이어를 사용해야 할 경우 잠금화면용 플레이어를 사용하게 되는데요. 이번에 멜론 플레이어 잠금화면을 개편하였습니다. 이번 잠금화면 멜론 플레이어는 앨범커버 이미지의 노출방식과 아티스트명, 곡 리스트 보기, 가사보기 등의 전체 UI 구조를 조금 더 효율적이고 보기에도 편하게 개편하였습니다.
주요 개선 내용을 좀 더 자세하게 알려 드리겠습니다.
재생 중인 음원 정보를
조금 더 직관적이고 효율적인
정보 구조로 개선
기존 잠금화면에서의 배경에 적용되는 불명확한 앨범 커버 이미지를 잘리는 영역 없이 온전하게 노출하고 화면의 메인 정보로서의 제 역할을 할 수 있게 하였습니다.
특히 앨범 커버 이미지가 상하단이나 좌우가 잘려서 노출되는 경우, 여러 명의 아이돌 그룹에서 몇몇 멤버들이 노출되지 못해 기획사 등에서 개선사항으로 요청이 있어 왔습니다.
그리고 앨범 커버 이미지와의 밸런스를 맞춰 기본적인 시간 및 날짜, 브랜드 로고 노출 영역을 상단으로 잡고 음원명과 아티스트명 그리고 좋아요 버튼을 앨범커버 이미지 하단으로 자연스럽게 그리고 미니멀하게, 강조하지 않으며 모자라지 않게 균형감 있는 위치를 찾아 배치하였습니다.
또한 정보의 가독성을 높이기 위해 앨범커버 이미지를 제외한 모든 정보를 좌측으로 배치하여 조금 더 쉽고 빠르게 정보를 읽을 수 있게 하였습니다.
주요 개선 내용
1. 앨범커버 이미지를 배경화면에서 화면 중앙으로 배치하여 이미지 정보를 쉽게 볼 수 있도록 개선하였습니다.
2. 개편된 멜론 플레이어와 동일하게 앨범 커버 이미지의 컬러를 추출하여 커버 이미지와 잘 조화될 수 있는 컬러 값을 산출, 배경 컬러로 사용하였습니다.
3. 곡 리스트, 가사 화면에서 앨범 커버 이미지를 상단에 노출하여 재생 중인 곡정보를 명확하게 했습니다.
가로 모드(Landscape View)에서도
멜론 플레이어를 즐길 수 있습니다.
'멜론 공작소 - 가로모드 접근성 테스트' 브런치를 기억하시나요?
상황에 따라 가로 뷰 모드가 필요하고 그에 따라 여러 가지 디자인 테스트를 진행했던 내용을 소개한 글인데요
요약하면 가로 모드 테스트는 서비스의 기준이 되는 공통 요소 정리부터 시작했으며, 구조 변화를 최소화한 부분부터 가로 모드에 최적화된 레이아웃까지 검토가 진행되었습니다.
1. 리소스 최소화 (공통화 / 점진적 고도화 형태 / 개발 대응 수위 낮춤)
2. 콘텐츠 소비 환경 최적화 (레이아웃 분기 처리)
3. 적용 범위 파악 (단계별 대응 가능 범위 조사)
위 내용을 기반으로 수많은 테스트가 진행되었으며 서비스에 적용할 수 있는 몇 가지 디자인 가이드를 마련하게 되었습니다.
이 가이드를 토대로 잠금화면에서도 가로 뷰 모드를 지원하게 되었으며 정말 조금 더 편해진 잠금화면용 플레이어를 제공할 수 있게 되었습니다.
멜론 플레이어 잠금화면 가로모드잠금해제 가이드
인터랙션 개선
기존 잠금해제 인터랙션을 개선하기 위해 인위적인 모션과 디자인 요소들의 군더더기를 빼고 '딱' 필요한 만큼의 정제된 디자인 요소와 절제되고 심플한 모션으로 개선하고 실제 화면상에 손가락이 움직이는 지점들을 체크하는 등 잠금해제를 위한 동작과 최적의 시간을 산출하여 가이드 모션을 개선하였습니다.
지금까지 멜론 플레이어 잠금화면 개선 내용을 소개해 드렸습니다.
계속해서 멜론의 새로운 디자인 소식으로 다시 찾아오겠습니다.
감사합니다!
앨범 정보 출처 및 내용 :
위 멜론 플레이어 잠금화면 내 이미지 및 곡 리스트 정보들은 멜론 차트에 노출된 내용을 기반으로 제작되었으며 실제 내용과 다를 수 있습니다.
