음악 무료 스트리밍 플랫폼 리믹스 뮤직
Ⅰ. 프로그램 개발의 동기 및 목적
음악은 현대인의 일상에서 중요한 역할을 합니다. 하지만 기존 음악 서비스는 단순한 스트리밍에
그치거나, 사용자의 취향을 반영한 추천이 부족한 경우가 많았습니다.본 프로그램은 사용자가 직접 음악을
검색하고, 최신 차트와 추천 음악, 최근 들은 음악을 한눈에 확인하며, 원하는 곡을 바로 재생할 수 있도록
개발하였습니다.
Ⅱ. 프로그램 소개
리믹스는 최신 음악 차트, 추천 음악, 최근 들은 음악, 검색 기능, 플레이리스트 관리 등 다양한 음악 관련
기능을 제공합니다.
주요 기능
- 최신 음악 차트:
멜론 차트 기반 TOP 100 곡을 실시간으로 확인
- 추천 음악: 차트 곡을 무작위로 섞어 새로운 곡을 추천
- 재생: 유튜브를 기반으로 스트리밍 기능을 구현 하였습니다.
Ⅲ. 메뉴 구성도
Ⅳ. 프로그램 사용법 및 주요 실행 결과
메인 페이지 접속
•
최신 차트, 추천 음악을 한눈에 볼 수 있음
•
원하는 곡을 클릭하면 하단 플레이어에서 바로 재생
검색
•
상단 검색창에 곡명/아티스트 입력 후 엔터 -> 검색 결과 페이지 이동
•
결과에서 곡 클릭 시 재생
플레이리스트
•
곡 우클릭 -> 플레이리스트에 추가
•
플레이리스트 페이지에서 곡 확인
Ⅴ. 기술적 요소
난이도 높았던 부분
•
멜론 차트 크롤링 및 데이터 파싱
•
유튜브 API 연동 및 ReactPlayer로 스트리밍
특별한 모듈/메소드
•
Next.js, React, Radix UI, ReactPlayer, axios
•
Zustand로 전역 음악 상태 관리
Ⅵ. 참고 문헌 및 웹 사이트
•
유튜브 Data API
•
React Player
•
Zustand
•
Stack Overflow
Ⅶ. 개발 소감 ( 배운점, 어려웠던 점과 해결했던 내용, 아쉬운 점, 느낀점 )
리믹스를 통해 Next.js와상태 관리, 외부 API 연동 등 다양한 웹 기술을 실전에서 경험할 수 있었습니다.
특히 멜론 차트 크롤링, 유튜브 API 연동, DB 설계와 같은 부분에서 많은 시행착오를 겪었지만, 문제를 해결하며 실력이 크게 향상되었습니다.
반응형 UI, 스크롤바 숨기기 등 세부적인 UI/UX까지 신경 쓸 수 있었던 점이 인상적이었습니다.
아쉬운 점은 더 다양한 추천 알고리즘이나 소셜 기능을 넣지 못한 점입니다.
다음에는 사용자 맞춤형 추천, 소셜 공유 등도 도전해보고 싶습니다.
유튜브 API에서 음악을 불러와서 재생하는 함수를 구현 하는 부분에서 뮤직비디오등 가사 시간이랑 맞지 않은 영상이 너무 많이 나왔습니다.
하지만 이 문제를 해결하기 위해
뒤에 lyric 등 가사 영상을 검색하는 코드를 넣어 가사 영상만 나오게 해 시간과 맞게 하였습니다.
Ⅷ. 개발 일지
2024-06-22: 프로젝트 구조 설계, Next.js 세팅
2024-06-23: 멜론 차트 크롤링, 차트 API 구현
2024-06-24: 음악 검색, 유튜브 API 연동, 플레이어
2024-06-26: 추천 음악, UI/UX 개선, 반응형 적용
2024-06-27: 접근성 개선, 스크롤바 숨기기, 마무리
Ⅸ. 소스 코드