간단 소개해외 아티스트의 내한 공연 정보와 예매 일정을 제공하고, AI가 사용자 취향에 맞는 음악을 추천해 나만의 플레이리스트를 만들어주는 서비스입니다. 숨듣명(숨어서 듣는 명곡) 추천부터 콘서트 후기, 티켓 팁까지 음악 팬들이 소통할 수 있는 커뮤니티 기능도 함께 제공합니다.
작업 기간2025.06. - 2025.08.
프로젝트 유형팀 프로젝트 (FrontEnd 5명)
기술 스택
구현한 기능
숨어서 듣는 명곡 페이지 구현 (커뮤니티)
- • 커뮤니티 CRUD 구현
Devcourse API를 활용해 숨듣명 등록·조회·수정·삭제 기능을 구축하여 사용자가 자유롭게 콘텐츠를 관리할 수 있도록 함
- • 음악 검색·재생 기능
Spotify·YouTube API를 연동해 곡 검색과 자동 영상 재생이 가능하도록 구현, 사용자 편의성과 콘텐츠 확장성 확보
- • 실시간 좋아요·알림 시스템
useLike 훅과 알림 시스템을 개발해 상호작용이 즉시 반영되도록 개선, 실시간 반응형 커뮤니티 경험 제공
- • 플레이리스트 연동 최적화
음악 탐색 → 저장 흐름을 단축시켜 탐색 과정의 이탈률을 낮추고 UX 효율성을 향상
- • 커뮤니티 CRUD 구현
콘서트/자유 게시판 페이지 구현 (커뮤니티)
- • 게시글 CRUD 및 작성 기능 구축
Devcourse API를 기반으로 게시물 작성, 조회, 수정, 삭제 기능을 구현하고, 제목·본문·이미지 업로드를 지원해 후기·동행 모집·티켓 팁 등 다양한 커뮤니티 콘텐츠를 생성할 수 있도록 개발
- • 게시글 검색·필터링
작성자·제목·내용을 기준으로 검색 가능한 필터링 시스템 구현, 원하는 정보 접근성 향상
- • 실시간 알림 시스템
댓글·좋아요 발생 시 작성자에게 알림을 전송해 커뮤니티 내 즉각적인 피드백 환경 조성
- • UX 개선
Skeleton UI와 반응형 디자인을 적용해 로딩 중에도 매끄러운 시각 경험 제공
- • 게시글 CRUD 및 작성 기능 구축
UI/UX 설계 총괄 및 디자인 시스템 구축
- • UX 구조 설계 및 브랜드 구축
서비스 흐름과 사용자 여정을 재설계하고, 로고·톤앤매너를 포함한 브랜드 아이덴티티 확립
- • 디자인 시스템 구축
색상·타이포그래피·컴포넌트 기준을 정의해 일관된 UI 제공 및 협업 효율성 향상
- • HOME 랜딩 페이지 구현
GSAP + ScrollTrigger를 활용해 Home 페이지에 몰입형 스크롤 인터랙션 적용, 첫 인상 개선
- • 마이크로 인터랙션 적용
버튼·카드 전환 등 세밀한 애니메이션을 추가해 사용자 경험의 완성도 강화
- • 디자인 QA 및 품질 유지
반응형 레이아웃·여백·컴포넌트 불일치를 정비해 UI의 시각적 일관성과 품질 확보
- • UX 구조 설계 및 브랜드 구축
트러블 슈팅Spotify 재생 제한으로 인한 음악 감상 기능 대체
Spotify API는 로그인 없이 곡 검색은 가능하지만, 재생 기능은 Premium 계정과 로그인이 필수입니다. 대부분의 사용자가 Premium 계정을 보유하지 않아 로그인 요구 시 UX가 저하되고, 이로 인해 핵심 기능인 ‘숨듣명 감상’ 구현에 제약이 생겼습니다.
해결 과정
• 대체 스트리밍 API 탐색
• SoundCloud API: 무료 재생 가능하나 2023년 이후 API 서비스 중단 및 불안정
• Apple Music, Deezer: 복잡한 인증 절차 및 한국 내 접근성 저하로 제외
결과
• YouTube Data API 채택
• 곡 제목 + 아티스트명으로 자동 검색 → 최상위 영상 자동 선택
• iframe 기반 재생/정지 기능 구현 → 로그인 없이 누구나 음악 감상 가능
배운 점
• Spotify Premium 없이도 누구나 음악 감상이 가능한 사용자 친화적 환경 구현
• YouTube 활용으로 접근성과 사용자 익숙도 모두 확보
• 제한된 조건에서도 기술 대안을 통해 UX를 개선할 수 있음을 경험함