시작하며
안녕하세요. 오랜만입니다.
붉은 말의 새해가 찾아왔네요!🌅 모두들 새해 복 많이 받으세요!ㅎㅎ
저는 작년 10월 정도부터 Yoon-Play2라는 AI 기반 음악 플레이어를 만들게 되었습니다.
이번에는! 단순히 음악을 재생하는 플레이어가 아니라, 사용자의 입력 텍스트 기반으로 동적으로 카테고리를 추천해주는 스마트한 플레이어를 목표로 하고 있습니다.🥳
이 시리즈에서는 프로젝트를 진행하며 겪은 기술적 챌린지와 해결 과정을 공유하려고 합니다.
🤔 왜 다시 만들게 되었나?
사실 이전에 원티드에서 주최했던 프리온보딩 코스를 참여하고, 짧은 기간 안에 yoon-play라는 뮤직 플레이어를 만든적이 있습니다 (3일안에 기획, 디자인, 개발 모두 다 해야했던,,🤦🏻♀️)
기존에는 정적인 감정, 장르 카테고리를 제공하고, 유튜브 api를 활용해서 플레이리스트를 제공하는 형식이었어요.
당시에는 만족스럽던 프로젝트였네요 ㅎㅎ
하지만 실제로 뮤직 플레이어의 필수 기능들이 빠져있기도 하고, 정적 카테고리 말고
"ai가 사용자의 상태, 기분을 파악해서 카테고리를 추천해주는 것은 없을까?"라는 생각이 들며 새롭게 만들어 보기로 했습니다!!
프로젝트를 진행하면서 비슷한 기능이나 내용일지도 모릅니다.
하지만, 새로운 기술 스택을 선택하고, 보다 더 좋은 코드로 작성되길 바라는 마음으로 다시 시작하려고 합니다.
🛠️ 기술 스택
이 프로젝트에서 사용할 기술들입니다:
Frontend
Next.js 15,TypeScript,Tailwind CSS
상태 관리 & 데이터
React Query (TanStack Query),~~(Recoil)~~ Jotai,IndexedDB (idb)
AI & API
OpenAI API,YouTube Data API
Deploy
Vercel
🎯 목표와 핵심 기능
핵심 기능
1. 🤖 AI 기반 카테고리 추천 (핵심 차별화 포인트!)
- 사용자 텍스트 기반으로 음악 카테고리, 장르 추천
- "오늘 기분이 우울해" → 위로되는 음악 추천
- "집중하고 싶어" → 집중력 높이는 음악 추천
2. 기본 플레이어 기능 (Yoon-Play1에서 놓쳤던 것들도 포함)
- 재생/일시정지/이전/다음
- 볼륨 컨트롤
- 프로그레스바
3. 재생목록 관리(feat. indexedDB)
- 사용자 재생목록 생성/수정/삭제
- 좋아요 목록
(시간이 된다면?)IndexedDB로 오프라인 저장
4. 검색 기능
- 자유롭게 플레이리스트 검색
5. 성능 최적화
- 대용량 재생목록 가상 리스트
- 불필요한 리렌더링 방지
- 이미지 lazy loading
📝 시리즈 구성
이 프로젝트를 진행하며 겪은 이슈들과 해결 과정을 정리할 예정입니다 ㅎㅎ
🚀 이제 시작합니다
"일단 돌아가게 만들기"에서 벗어나, 제대로 된 웹 애플리케이션을 만들어보려고 합니다.
그 과정에서 마주친 문제들, 고민했던 지점들, 그리고 해결 방법들을 솔직하게 공유하겠습니다.
혹시라도 비슷한 프로젝트를 진행하시는 분들께 도움이 되었으면 좋겠습니다!
다음 글에서는 오디오 플레이어를 만들며 겪은 첫 번째 이슈부터 시작하겠습니다.
감사합니다.
💬 궁금한 점이나 피드백은 댓글로 남겨주세요!
