SuperBGM
감성 BGM 유튜브 채널 SuperBGM을 소개하는 프리미엄 쇼케이스 웹사이트. 시네마틱 히어로와 무드 필터 갤러리로 플레이리스트를 탐색합니다.
프로젝트 이야기
SuperBGM은 감성 발라드부터 카페 재즈, Lofi, 인디포크까지 계절의 분위기를 담은 플레이리스트를 큐레이션하는 음악 채널입니다. 이 사이트는 채널의 콘텐츠를 '음악을 고르는 즐거움'으로 바꿔 전달하는 프리미엄 쇼케이스로, Next.js App Router + TypeScript + Tailwind CSS로 제작했습니다. 시네마틱 오로라 히어로, 날짜 기반 '오늘의 플레이리스트', 조회수 TOP 3 쇼케이스, 10가지 무드(발라드·재즈·Lofi·인디포크·댄스·계절·카페·힐링·사랑·K-POP) 필터 탐색, 유튜브 미리듣기 모달까지 — 유튜브를 벗어나지 않고도 채널의 모든 플레이리스트를 탐색하고 감상할 수 있도록 설계했습니다.
- 작업 기간
- 프로젝트별 기록
- 참여 역할
- 기획 · 제작
주요 기능
- 시네마틱 프리미엄 히어로 — 오로라 조명 · 플로팅 파티클 · 오디오 EQ 웨이브 애니메이션
- 오늘의 플레이리스트 — 날짜 기반으로 하루 하나씩 추천 (다른 추천 기능)
- 조회수 TOP 3 추천 쇼케이스 (NEW 배지 자동 표시)
- 10가지 무드 필터 탐색 — 발라드·재즈·Lofi·인디포크·댄스·계절·카페·힐링·사랑·K-POP
- 플레이리스트 제목 검색 + 최신순/조회수순 정렬
- 유튜브 미리듣기 모달 — 페이지 이탈 없이 바로 감상
- 30개 플레이리스트 정적 데이터 — 빠른 초기 로딩
- 모바일 완전 반응형 디자인