2025. 10. 1. 11:06ㆍUX & UI Design/Design Kata
오늘도 디자인 카타 토의를 진행했다.
이제 곧 우리 밴드 음원도 릴리즈되기에, 최근 스트리밍 서비스에 관심이 많아졌다. 해당 토픽을 놓칠 수 없었다.
처음 본 두 화면, 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로 재해석할지가 앞으로의 과제다.
'UX & UI Design > Design Kata' 카테고리의 다른 글
| 기술의 발전은 UI도 낳는다 - 페이지네이션 vs 무한스크롤 (0) | 2025.10.14 |
|---|---|
| Google의 색깔놀이에는 의도가 있다 (0) | 2025.09.29 |
