Music Road

길 위에서 만나는 모두의 노래, MusicRoad는 위치 기반 노래 공유 및 플레이어 서비스입니다.

🔔 서비스 배경

“지금 무슨 노래 듣고 계세요? 뉴진스의 하입보이요”

길거리에서 지나치는 수많은 사람들이 어떤 노래를 듣고 있는지 궁금한 적 있으신가요?

Music Road는 주변 사람들이 어떤 노래를 듣고 있는지, 더 나아가 내가 어떤 노래를 듣고 있는지 손쉽게 공유할 수 있으면 어떨까 라는 생각에서 출발했습니다.

내가 Pick한 음악을 길거리에 남기고, 지도의 Pick을 통해 다른 사람들은 이 장소에서 어떤 음악을 들었는지 둘러보세요.

🙆‍♂️ 서비스 대상

• 음악 취향을 공유하고 싶은 사람
• 다른 사람들은 지금 이 장소에서 어떤 노래를 들었는지 궁금한 사람
• 새로운 노래를 찾고 싶은 사람

🔮 핵심 기능

픽 탐색

지도에서 등록된 픽을 마커로 확인할 수 있습니다. 가까이 존재해서 겹쳐지는 픽은 클러스터링 되어 개수만 표시됩니다. 마커를 누르면 인포윈도우에서 픽 정보를, 클러스터 마커를 누르면 여러 개의 픽들을 리스트로 보여줍니다. 내 주변 반경 100M 내에 픽이 존재하면 배너에 개수가 표시되며, 클릭 시 노래가 랜덤으로 재생됩니다. 다크모드를 지원합니다.

픽 등록

등록할 노래를 검색할 수 있습니다. 검색어를 입력하면 검색 결과가 자동으로 보여집니다. 검색 결과를 페이지 하단까지 스크롤 시 다음 결과를 로드하여 모든 결과를 볼 수 있습니다. 픽을 한마디와 함께 등록할 수 있습니다.

음악 감상

픽 정보 화면에서 마음에 드는 픽을 담을 수 있습니다. 플레이어로 음악을 제어할 수 있습니다. 음악 재생 시 소리에 따라 애니메이션이 나타납니다. Notification에서 백그라운드 재생을 제어할 수 있습니다.

뮤직비디오 감상

뮤직비디오가 존재하는 노래는 썸네일 미리보기 애니메이션이 나타납니다. 옆으로 스와이프하여 뮤직비디오를 볼 수 있습니다. 뮤직비디오 화면을 탭해서 픽 정보를 확인할 수 있으며 일시 정지, 재개, 다시보기를 컨트롤할 수 있습니다. 기기 회전 시 영상의 가로/세로 모드가 전환되며 이어서 재생할 수 있습니다.

픽 모음

나와 다른 사람들이 담은 Pick과 등록한 Pick을 한눈에 모아볼 수 있습니다.

📚 기술 스택

분류	기술 스택	관련 문서
Architecture
UI
DI
Map		지도 API 비교
Network
Image		Coil vs Glide
Media		[음원 재생] 기술 검토 및 기획 [영상 처리] 기술 검토 및 기획
Backend
Data Storage		Firebase Firestore vs RealtimeDB

🎯 기술적 도전

지도

• 디자인 요구사항에 맞게 마커 아이콘으로 사용할 커스텀 뷰를 만들었습니다.
• 지도를 축소했을 때 겹쳐지는 마커에 클러스터링 기능을 적용했습니다.
• 클러스터 마커를 클릭했을 때 포함된 항목을 보여주기 위해 클러스터 마커의 태그를 단말 마커의 태그를 모두 병합하여 지정하는 방식을 선택했습니다.

음원 재생

• ExoPlayer를 사용하여 컴포즈 UI에 대응되는 음원 플레이어를 구현했고, 메인 지도 화면에서 주변 반경 내의 음원을 셔플 재생할 수 있습니다.
• Configuration change가 일어나도 플레이어의 상태가 유지됩니다.
• 음원의 주파수 대역별 음량 데이터를 전처리 후 시각화하여 플레이어 UI에 반영했습니다.
• MediaSessionService를 이용해 포그라운드에서 동작하는 플레이어를 구현했습니다.

영상 재생

• 디자인 요구사항에 따라 영상 재생 화면을 커스텀 했습니다.
• 제스처와 애니메이션을 사용하여 화면 이동 및 오버레이 표시가 자연스럽게 연결되도록 했습니다.
• ExoPlayer를 사용하여 영상 재생 및 일시중지, 재시작 기능을 구현했으며 화면을 회전하여도 상태가 유지됩니다.

👨‍👩‍👧‍👦 팀원 소개

K002 강민주	K009 김승규	K050 주윤겸
@meanjoo	@miler198	@yuni-ju

더 많은 정보는 WIKI를 방문해주세요!