좋아하는 앨범을 아카이빙할 수 있는 서비스
2024.12 - 2025.02
앨범 단위로 음악을 감상하는 걸 좋아하다 보니, 마음에 드는 앨범을 모아 아카이빙할 수 있는 웹 서비스를 떠올리게 됐습니다. Spotify API를 활용해 앨범 정보를 불러오고, 개인 저장 기능을 구현하며 Next.js와 API 연동을 함께 학습할 수 있도록 기획한 개인 프로젝트입니다.
💻 기술 스택
🧩 구현 기능
1. 컬렉션 생성 (아카이빙)
Spotify API 기반 앨범 검색 및 추가
검색 시 debounce 적용으로 불필요한 API 호출 제거
Tanstack Virtual 기반 가상 리스트로 검색 결과 목록 부드러운 스크롤 구현
앨범 목록 편집, 컬렉션 저장 플로팅 버튼 제공
컬렉션 공개/비공개 저장
2. LP 재생 인터랙션
Three.js를 사용한 3D 턴테이블, LP 오브젝트 구현앨범 커버에 hover 시 LP가 나타나며, 드래그하여 턴테이블 위에 드롭 가능
턴테이블 클릭 시, LP 제거/재생 메뉴 표시
LP 드래그 시 카메라 시점(pov)을 변화시키고, 재생 중에는
useFrame으로 LP 오브젝트의 회전 값을 변경하며 인터랙션 구현
3. 앨범 재생 플레이어
Spotify Web Playback SDK 연동을 통해, Spotify 프리미엄 멤버에 한해 재생 가능
플레이어 확대/축소 → 세가지 크기의 플레이어 사용 가능
가장 작은 플레이어의 경우 앨범 커버에 버튼이 가려지지 않도록,
mix-blend-mode: difference을 적용해 버튼 색상 반전 처리비로그인, 연결 오류 등 에러 메시지를 플레이어 위 오버레이로 표시
4. 컬렉션 목록 조회
모든 공개 컬렉션, 내 컬렉션 조회
앨범 커버 4장을 모자이크 형태로 썸네일 구성
무한스크롤 구현 (
react-intersection-observer+useInfiniteQuery)
5. 컬렉션 상세 조회
앨범 목록을 3D 캐러셀로 표현
각 앨범 클릭 시 앨범 정보, 트랙 목록, Spotify 링크 등을 표시하는 모달이 나타남
interact 버튼을 통해 재생 인터랙션 페이지로 이동
📌 이슈
Spotify 앱 토큰 만료 시 병렬 요청에서 API 응답 지연이 큰 문제
앨범 컬렉션 목록 페이지 초기 렌더링이 느린 문제
모바일 브라우저 기본 제스처가 LP 드래그 동작과 충돌
Web Playback SDK가 매번 재로드되어 재생 준비 시간이 지연됨
음악 재생을 위한 Spotify OAuth 인증과 토큰 보안 처리
➕ 기타 내용
CSS 미디어 쿼리를 이용한 반응형 디자인 구현
next-pwa을 사용하여 설치 가능한 PWA(Progressive Web Application) 구현
🌱 배운점
Next.js를 처음 사용해 본 프로젝트였기 때문에 사전에 CSR/SSG/SSR의 차이를 제대로 이해하고 이를 페이지 성격에 따라 적절히 적용해보는 경험을 할 수 있었습니다. 또한 Next.js에서 제공하는 최적화 기법들을 적용해보고 이를 개발자 도구로 확인해보면서 작은 개선을 해보았는데, 원리를 이해하고 사용하니 앞으로도 상황에 맞게 선택하고 재현할 수 있겠다는 확신을 얻었습니다
모바일 환경에서 일관된 사용 자 경험을 제공하기 위해 노력하였습니다. 실제로 개발 후 모바일로 테스트하였을 때 예상과 다르게 동작하는 기능들을 발견했습니다. 터치 이벤트 처리, 반응형 UI 설계, 모바일 브라우저의 동작 방식 차이 등을 경험하며, 단순히 디자인만 조정하는 것이 다양한 요소를 종합적으로 고려해야함을 알게 되었습니다.