"좋아하는 음악을 그냥 '듣는 것'이 아니라, '찾아가는 즐거움'으로 만들 수는 없을까?" SuperBGM 유튜브 채널의 콘텐츠를 프리미엄 쇼케이스 사이트로 재탄생시킨 Next.js 리디자인 프로젝트. 기획부터 디자인, 개발까지의 과정을 공유합니다.
SuperBGM은 감성 발라드부터 카페 재즈, Lofi, 인디포크, 그리고 계절의 분위기를 담은 플레이리스트를 큐레이션하는 유튜브 채널입니다. 겨울의 설레는 밤, 가을 낙엽을 밟는 산책, 여름의 낭만적인 순간까지 — 채널에는 그 순간들을 채워줄 음악들이 쌓여 있습니다. 이번 프로젝트의 목표는 그 콘텐츠를 유튜브를 벗어나지 않고도 탐색하고 감상할 수 있는 웹 경험으로 만드는 것이었습니다.
채널의 영상이 30개를 넘어가면서, "지금 나에게 어울리는 플레이리스트는 뭘까?"라는 고민이 커졌습니다. 그래서 핵심 기획을 무드(Mood)라는 언어로 정리했습니다. 발라드, 재즈, Lofi, 인디포크, 댄스, 계절, 카페, 힐링, 사랑, K-POP — 총 10가지 무드로 모든 콘텐츠를 분류하고, 사용자가 지금의 기분을 고르면 그 분위기의 플레이리스트만 보여주는 구조를 설계했습니다.
여기에 두 가지 장치를 더했습니다. 첫째, 오늘의 플레이리스트 — 날짜를 기반으로 하루에 하나씩 추천해 "오늘은 뭘 들을까"라는 선택 부담을 없앴습니다. 둘째, 조회수 TOP 3 쇼케이스 — 채널에서 가장 사랑받은 플레이리스트를 앨범처럼 전면에 배치했습니다.
음악 사이트의 디자인은 늘 "조용해야 한다"고 생각했습니다. 그런데 이번에는 다른 선택을 했습니다. 음악 채널의 브랜드가 곧 분위기이기 때문에, 시네마틱한 프리미엄 히어로로 첫인상을 만들기로 한 것입니다.
오로라처럼 은은하게 흐르는 그라디언트 조명 위로 플로팅 파티클이 떠다니고, 하단에는 실제 오디오 파형처럼 꿈틀거리는 EQ 웨이브 바가 흐릅니다. 대형 타이포는 그라디언트로 물들여 '감성을 깨우는 몽환적인 사운드 공간'이라는 채널의 정체성을 첫 화면에서 바로 전달하도록 했습니다.
| 섹션 | 역할 |
|---|---|
| 프리미엄 히어로 | 오로라 조명 + 파티클 + EQ 웨이브로 채널 분위기 연출 |
| 오늘의 플레이리스트 | 날짜 기반 하루 하나 추천 + '다른 추천' 버튼 |
| 추천 쇼케이스 | 조회수 TOP 3 플레이리스트를 카드로, NEW 배지 표시 |
| 무드 탐색 | 10가지 무드 필터 + 제목 검색 + 최신순/조회수순 정렬 |
| 미리듣기 모달 | 페이지 이탈 없이 유튜브 영상을 바로 감상 |
프레임워크는 Next.js App Router를 선택했습니다. TypeScript와 Tailwind CSS를 기반으로 서버 컴포넌트와 클라이언트 컴포넌트를 명확히 나눠, 미리듣기 모달이나 무드 필터처럼 인터랙션이 필요한 부분만 클라이언트에서 렌더링하도록 구성했습니다.
채널의 30개 플레이리스트 데이터는 정적 스냅샷으로 관리해 초기 로딩을 빠르게 유지했고, '오늘의 플레이리스트'는 날짜를 시드로 삼아 방문할 때마다 일관된 추천을 보여줍니다. 조회수 파싱과 무드 집계는 유틸 모듈로 분리해 통계 데이터를 재사용했습니다.
디자인 과정에서는 히어로 스타일 샘플 4종(회전하는 LP 디스크, 오로라 텍스트 + 파티클, 마우스 패럴랙스 3D, 뮤직 웨이브 배너)을 만들어 실제로 비교해 볼 수 있게 했습니다. 정적인 선택이 아니라, 움직임을 직접 보고 고르는 경험을 만들기 위해서였습니다.
사이트는 채널의 확장판이기 때문에 콘텐츠가 늘어나는 구조가 중요했습니다. 영상 데이터에 제목, 조회수, 무드 태그만 추가하면 쇼케이스와 무드 탐색에 자동으로 반영됩니다. 최근 업로드된 영상에는 NEW 배지를 붙여, 방문할 때마다 '새로운 음악이 있다'는 신호를 주도록 했습니다.
모바일에서도 완전한 반응형으로 동작해, 이동 중에도 무드를 고르고 플레이리스트를 바로 감상할 수 있습니다.
채널은 계속 자라나고, 사이트도 그에 맞춰 진화 중입니다. 콘텐츠와 경험을 함께 설계하는 프로젝트로서 앞으로도 재미있는 시도를 이어갈 예정입니다.