안녕하세요.
담당 매니저 김수민입니다.
기간제(상주) 프로젝트 희망 근무 시작일을
등록해 주시면, 파트너님의 일정에 맞는
적합한 프로젝트를 추천해 드려요.
플러스
iTunes와 Last.fm 결합한 AI 기반 음악 추천 서비스 구축
개발 · 디자인 · 기획
기타(IT 서비스 구축), 퍼블리싱ㆍ반응형, 기타(웹사이트 구축)
프로젝트 배경
1) 문제점
- 기존 음악 추천 서비스는 대부분 유료 구독 모델
- 회원가입 없이 간단히 비슷한 곡을 찾기 어려움
- 추천 결과에 대한 미리듣기가 불가능하거나 제한적
- 다국어 지원이 부족하여 해외 사용자 접근성 저하
2) 프로젝트 목표
- 무료/무회원 음악 추천: 누구나 즉시 사용 가능한 서비스 개발
- 하이브리드 추천: Last.fm 집단지성 + iTunes 고품질 메타데이터 결합
- 즉각적 체험: 30초 미리듣기로 추천 곡을 바로 감상
- 글로벌 서비스: 다국어(한/영/일) 지원으로 해외 확장
3) 주안점
- 사용자 경험: 검색 → 선택 → 추천 → 미리듣기의 직관적 플로우
- 성능 최적화: 디바운스, 캐싱, Edge 배포로 빠른 응답
- 접근성: 다크 모드, 반응형 디자인, 키보드 네비게이션
프로젝트 성과
즉시 사용 가능
회원가입/로그인 없이 0초 만에 서비스 이용 시작
추천 정확도
Last.fm 집단지성 기반 유사도 점수(matchScore) 제공으로 신뢰도 향상
글로벌 커버리지
3개 언어(한/영/일) 지원으로 해외 사용자 접근 가능
빠른 응답 속도
Cloudflare Edge 배포로 전세계 평균 100ms 이내 응답
핵심 기능
실시간 음악 검색
디바운스 적용으로 타이핑 중 자동 검색, iTunes DB에서 곡 정보 및 고화질 앨범 커버 표시
AI 유사 곡 추천
선택한 곡 기반 Last.fm 집단지성 알고리즘으로 비슷한 분위기의 곡 최대 20개 추천
다국어 지원
한국어/English/日本語 실시간 전환, URL 기반 로케일 라우팅
진행 단계
기획 및 설계
2025.12.
서비스 컨셉 정의, iTunes/Last.fm API 분석, 시스템 아키텍처 설계
UI/UX 디자인
2025.12.
다크 모드 테마, 반응형 레이아웃, 애니메이션 설계
프론트엔드 개발
2026.01.
Next.js App Router 구조, 컴포넌트 개발, 다국어 적용
API 연동
2026.01.
iTunes Search API, Last.fm Similar API 연동 및 하이브리드 처리
SEO 최적화, 배포 및 런칭
2026.01.
구조화된 데이터, sitemap, hreflang, 검색엔진 등록

Cloudflare Pages 배포, 도메인 연결, 모니터링 설정
프로젝트 상세
배경
기존 음악 추천 서비스들은 유료이거나, 회원가입이 필요하거나, 추천 로직이 불투명한 문제가 있었습니다. 사용자가 좋아하는 곡 하나만으로 바로 비슷한 분위기의 곡을 찾을 수 있는 무료 서비스의 필요성을 느꼈습니다.

솔루션
iTunes의 방대한 음원 DB와 Last.fm의 집단지성(collaborative filtering) 추천 알고리즘을 결합한 하이브리드 추천 시스템을 구축했습니다.

기술적 특징
- 디바운스 적용 실시간 검색으로 API 호출 최적화
- TanStack Query를 활용한 서버 상태 관리 및 캐싱
- Framer Motion으로 부드러운 애니메이션 구현
- 한국어/영어/일본어 다국어 지원 (next-intl)
- SSR 기반 SEO 최적화 (구조화된 데이터, hreflang, sitemap)
- Cloudflare Pages로 Edge 배포, 글로벌 CDN 활용
메인
검색
검색중
추천목록
추천목록버튼

비슷한 프로젝트를 준비 중이라면?
위시켓 매니저와 상담하세요.

참여 개발사와 미팅 연결

프로젝트 1:1 컨설팅 제공

무료로 프로젝트 등록하기

작업한 파트너 프로필 보기

kj******
개발 · 개인

프로젝트 정보

참여 기간
2025.12. ~ 2026.01.
참여율
참여율이 100%인 프로젝트는 해당 파트너님이 온전히 작업한 결과물입니다.
외부 공동 작업의 경우 기여도에 따라 참여율이 달라지며 역할, 프로젝트 설명을 통해 업무 분야 및 참여 범위를 확인할 수 있습니다.
100%
관련 기술
framer-motion
tanstack query
seo최적화
TypeScript
API연동
TailwindCSS
next.js
Next-intl