앨범 아카이빙·재생 서비스
2024.12 - 2025.02
좋아하는 앨범을 모아 하나의 컬렉션으로 저장하고, 다른 사용자의 컬렉션을 살펴볼 수 있는 서비스입니다. Spotify Premium 멤버십에 한해 감상할 수 있습니다.
Next.js를 처음 사용해본 프로젝트로, 직접 구현을 통해 학습해보려 기획하였습니다.
💻 기술 스택
🧩 구현 기능
1. 컬렉션 생성 (아카이빙)
Spotify Web API를 사용하여 앨범 검색 및 앨범 정보를 가져오는 api 구현
debounce 적용으로 검색 API 호출 최소화 및 가상 리스트 적용 -> 검색 기능 최적화
2. 재생 인터랙션 및 플레이어
LP를 잡아당겨 플레이어에 놓을 수 있는 재미 요소를 기획 및 개발
Three.js를 사용하여 오브젝트 및 애니메이션 구현Spotify Web Playback SDK 연동을 통한 재생 기능 개발 (Spotify 프리미엄 멤버에 한해 재생 가능)
플레이어 확대/축소 → 세가지 크기의 플레이어 컴포넌트 개발
3. 컬렉션 목록 조회
모든 공개 컬렉션과 사용자의 컬렉션을 조회할 수 있는 페이지 개발
컬렉션을 구성하는 앨범 중 4장을 커버를 모자이크 형태로 썸네일을 구성
4. 컬렉션 상세 조회
컬렉션을 구성하는 앨범 목록을 3D 캐러셀로 표시하고, 각 앨범 클릭 시 정보를 보여주는 모달 개발
interact 버튼을 통해 재생 인터랙션 페이지로 이동하여, 해당 앨범들을 재생해볼 수 있음
📌 이슈
Spotify 앱 토큰 만료 시 병렬 요청에서 API 응답 지연이 큰 문제
앨범 컬렉션 목록 페이지 초기 렌더링이 느린 문제
모바일 브라우저 기본 제스처가 LP 드래그 동작과 충돌
Web Playback SDK가 매번 재로드되어 재생 준비 시간이 지연됨
음악 재생을 위한 Spotify OAuth 인증과 토큰 보안 처리
➕ 기타 내용
CSS 미디어 쿼리를 사용하여 반응형 UI 구현
🌱 배운점
Next.js를 처음 사용해 본 프로젝트였기 때문에 사전에 CSR/SSG/SSR의 차이를 제대로 이해하고 이를 페이지 성격에 따라 적절히 적용해보는 경험을 할 수 있었습니다.
모바일 환경에서 일관된 사용자 경험을 제공하기 위해 노력하였습니다. 실제로 개발 후 모바일로 테스트하였을 때 예상과 다르게 동작하는 기능들을 발견했습니다. 터치 이벤트 처리, 반응형 UI 설계, 모바일 브라우저의 동작 방식 차이 등을 경험하며, 단순히 디자인만 조정하는 것이 아니라 다양한 요소를 종합적으로 고려해야함을 알게 되었습니다.