A visually immersive music experience — drag, drop, and play music on a spinning LP record.
Built with Next.js · React DnD · TailwindCSS
LP Player는 실제 턴테이블에서 음악을 듣는 듯한 시각적 경험을 제공하는 웹 앱입니다.
사용자는 LP 위로 음악을 드래그해 올려 재생할 수 있고,
LP를 클릭하거나 회전시키면 노래가 멈추거나 역재생되어 스크래치 사운드가 재현됩니다.
- 🌀 LP 레코드 애니메이션 및 회전 효과
- 🎧 Drag & Drop 기반 음악 플레이어
- ⏸ LP 클릭 시 정지 및 스크래치 모션 구현
- 💽 음악 메타데이터 자동 파싱 (
music-metadata-browser) - 🌐 Spotify / Apple Music API 연동 (추후 추가 예정)
lp-player/
├── public/ # Static assets (LP images, icons, etc.)
├── src/
│ ├── components/ # Reusable UI components (LP, Player, Controls)
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Next.js pages
│ ├── styles/ # Tailwind / global CSS
│ └── utils/ # Helper functions
├── package.json
└── tailwind.config.js
배포는 Vercel 플랫폼을 사용합니다.
main 브랜치에 push 시 자동으로 배포가 트리거됩니다.
LP Player는 단순히 음악을 재생하는 것을 넘어, ‘사용자가 음악과 물리적으로 상호작용하는 경험’을 웹에서 구현하는 데 초점을 맞춘 프로젝트입니다. 다음은 개발 과정에서의 주요 기술적 시도와 교훈입니다.
LP를 클릭한 상태로 마우스를 드래그하면,
노래가 실제로 뒤로 감기거나 정지하는 듯한 “스크래치” 효과를 주기 위해
Web Audio API를 직접 다뤘습니다.
- AudioBufferSourceNode를 활용해 오디오를 프레임 단위로 재생/역재생.
- LP 회전 각도(마우스 이동량)에 따라
playbackRate를 동적으로 조절. - 곡을 완전히 멈추는 대신, 회전 감속을 자연스럽게 구현하여 ‘턴테이블 질감’을 살림.
이 과정을 통해 ‘UI의 시각적 모션이 실제 오디오와 동기화될 때 사용자의 몰입감이 극대화된다’는 UX적 교훈을 얻었습니다.
react-dnd를 사용해 사용자가 곡 카드를 LP 위로 드롭하면
즉시 재생되는 직관적인 인터랙션을 설계했습니다.
- 곡 정보를 드래그 가능한 객체로 설정 (
useDrag) - LP 영역을 드롭 타겟으로 지정 (
useDrop) - 드롭 성공 시 곡이 자동 재생되며 LP가 회전 애니메이션을 시작
UX 측면에서 ‘플레이버튼을 누르는 절차 없이도 음악과 상호작용하는 감각’을 제공했습니다.
LP의 회전, 클릭 시 진동 효과, 호버 시 반사광 등은
Tailwind CSS의 유틸리티 클래스를 이용해 구성했습니다.
CSS 애니메이션 대신 transition과 transform을 활용해
실시간 반응성과 성능을 모두 확보했습니다.
이 과정을 통해 “작은 모션이 오디오 경험 전체의 리듬을 강화한다”는 UX 디자인의 미시적 원리를 배웠습니다.
음악 파일에서 메타데이터(앨범 커버, 제목, 아티스트 등)를 추출하기 위해
music-metadata-browser 패키지를 사용했습니다.
- MP3, FLAC, WAV 등 다양한 포맷 지원
- 앨범 아트 자동 파싱 후 LP 이미지로 매핑
- 메타데이터 불러오기 시
async/await으로 비동기 UX 보장
이를 통해 사용자는 “자신의 로컬 음악 파일을 직접 LP 위로 올려 감상하는 경험”을 하게 됩니다.
- 음악 UI에서는 버튼보다 직접 조작이 몰입도를 높인다.
- 시각적 인터랙션과 오디오 피드백이 실시간으로 연결되어야 한다.
- 불필요한 UI 요소를 줄이고, 사용자의 감각적 피드백에 집중할 것.
LP Player는 이런 실험을 통해 “음악을 클릭하는 것이 아니라, 음악을 ‘만지는’ 경험”을 웹 기술로 구현하려는 시도였습니다.