[UX/UI 관점] 스크롤 세번의 비용, 떨어진 멜론차트의 위상

2025. 10. 1. 11:06UX & UI Design/Design Kata

오늘도 디자인 카타 토의를 진행했다.

이제 곧 우리 밴드 음원도 릴리즈되기에, 최근 스트리밍 서비스에 관심이 많아졌다. 해당 토픽을 놓칠 수 없었다.

출저 : DesignUs

 

 

처음 본 두 화면, A와 B

 

UI/UX 카타 시간에 제시된 두 가지 메인 화면.

처음엔 어떤 서비스인지 모른 채, 오직 디자인 요소만 보고 분석을 시작했다.

 

A: 인기차트  |  대중성 기반 UI 

  • 순위 중심 레이아웃
    • 리딩 이미지 (앨범자켓) 그 옆으로 보이는 정보는 순위
    • 그 아래엔 순위 변동 수치가 표시되어, 사용자가 아티스트보다 먼저 “지금 몇 위인가”를 인식하게 된다. (시각적 계층 / Visual Hierarchy)
  • 한 곡 단위 재생 의도
    • 트레일링(리스트 오른쪽)에는 재생 버튼 아이콘이 있다.
    • 사용자는 차트 속 곡을 하나씩 바로 재생할 수 있다.
    • 즉각적으로 리스트의 성격을 한 곡 중심 소비로 유도한다.
  • 피처링 아티스트 표기가 (feat… 식으로 잘려 끝난다.
    • 반면 B는 (feat…) 형태로 마무리해 심미적으로 더 완결성 있는 UI를 제공한다.

B: 데이터 기반  |  개인화 맞춤 UI

  • 탐색과 발견의 경험을 강화
  • 사용자의 취향 데이터를 반영해 개인화된 신곡 추천을 제공한다.
  • 트레일링 버튼 – ‘··· 케밥’
    • 사용자는 흥미를 느낀 곡을 눌러 노래 정보 / 재생 / 플레이리스트 추가를 선택할 수 있다.
    • 아이콘의 시각적 무게(weight)가 가벼워 시선은 자연스럽게 곡명과 아티스트 텍스트에 머무른다.
  • 흥미 유발 장치이는 “오늘은 어떤 새로운 곡이 나를 기다리고 있을까?”라는 기대감을 심어주며, 메인에 더 적합해 보인다.
  • 개인 맞춤 + 신곡이라는 특성 덕분에, 사용자는 매번 새로운 콘텐츠를 접한다.

 

 

A가 멜론차트라고?

 

토의가 진행되던 중, 팀원 중 한 명이 밝혀준 사실:

👉 A는 멜론, B는 유튜브 뮤직이었다.

 

순간 토의 분위기가 확 달라졌다.

단순히 UI 차이를 말하는 수준에서, 이제는 “멜론이라는 맥락 속에서 이 디자인이 왜 이렇게 되었을까?”라는 서비스 차원의 논의로 확장된 것이다.

 

특히 실제 멜론 사용자가 팀에 있어, 더 구체적인 실사용자 경험을 묻고 검증할 수 있었다.

 


 

꼬리에 꼬리를 무는 질문들

 

 

스크롤 세 번의 비용

 

  • 멜론 차트는 히어로 섹션이 아니다.
  • 실제 앱을 켜보니 스크롤을 세 번이나 내려야 차트가 나온다.
  • 리스트 아이템 전체를 클릭해도 곡이 재생되지 않고, 큰 멜론차트 페이지로 랜딩된다.
  • 곡 재생은 오직 우측 재생 버튼으로만 가능하다.

→ 차트라는 핵심 자산을 이렇게 멀리 두는 건 충격적이었다 (더불어 List Item 마다 개별화 되지 못한 UX까지)

 

 

긴 곡 제목 문제

위에도 언급했듯, 

“OOOO(feat. XXXXXXX)” 같은 긴 곡 제목은 오른쪽 괄호가 잘려서 표시된다.

자동 스크롤(Marquee)로 해결할 수 있지 않을까?라는 질문이 나왔지만, 모바일에서 리스트 단위로 움직이면 화면이 난잡해질 가능성이 크다.

 

 

차트 배치 방식

 

  • 멜론은 순위를 4곡 단위로 끊어서(1st-4th, 5th-8th)로 배치하고 한 Screen에서 한 Column만 볼 수 있다. 
  • 실제 사용자 의견: “순위를 한눈에 보기 불편하다.”
  • 순위는 본질적으로 숫자 Order인데, 한 Column에 담아 내는 것이 본질적으로 가독성이 좋을 것이다.
    •  이 것을 n개 단위로 잘라서 다중 Column을 만드는 것, 이  그리드로 잘라내는 건 정보 구조(IA) 관점에서 맞지 않는 설계라는 생각이 들었다

  • 왜 이렇게 구현되었는가?
    • 멜론 차트의 중요도가 떨어지게 되었고, 이에 맞게 시각적 간편화를 위해 해당 섹션의 height을 줄이는 선택을 하는 과정에서 이렇게 되지 않았을까? 생각해본다
    • 최대한 많은 정보(List item)을 한 섹션에서 보여주기 위해서, 좌우로 스크롤되는 방식을 사용했다고 추측한다. 그러나 이렇게 되면, "전체보기"가 아닌 현재 섹션이 멜론차트라고 User들이 인식하게 되고, 간소화된 멜론차트에 불편함이 유발되는 것 같다고 판단한다.

 


 

4. 결론: 멜론차트, 상징에서 곁가지로

 

토의 끝에 자연스럽게 도달한 내 결론은 이거였다.

 

  • 멜론차트는 한때 압도적인 영향력과 상징성을 가진 멜론의 자산이자 브랜드 이미지 그 자체였다.
  • “멜론 차트 1위”라는 말은 음악 시장의 기준이자, 곡의 성패를 가르는 지표였다.

 

하지만 지금은 개인화 스트리밍의 시대.

유저는 차트보다 자기 취향에 맞는 추천을 원한다.

멜론 역시 이 흐름에 맞춰 차트를 의도적으로 아래로 내리고, 곁가지처럼 배치한 것일지도 모른다.

 

다만, 그렇다고 멜론차트의 가치가 사라진 건 아니다.

멜론이 단순히 차트를 낮춰두는 데 그치지 않고, 이 자산을 어떻게 새로운 UX로 재해석할지가 앞으로의 과제다.