[9일차] nailed it! 구현 마무리 및 해결되지 않은 문제

nailed it!

9일차를 끝으로 미완성된 재생 Progress bar 기능과 함께 프로젝트를 마무리 지었다. 실제 서비스하기엔 여러모로 부족하지만 애당초 실제 서비스 목표가 아니라 "iPhone과 mp3는 있지만, 맥북도, 앱스토어에 게시된 앱들도 믿지 못해서 직접 만든 웹 기반 음악 플레이어"에 상당 부분 충족했기 때문이다.

 

완성된 UI는 아래와 같다.

nailed it!!!

음악 커버 부분은 재생중인 음악별로 커버를 만들어 넣기 귀찮아서(!?) React 기본 이미지를 넣었다.

테스트 중에 Web Title에 현재 재생중인 음악 제목이 표시되었으면 좋겠다 싶어 수정했다.

프로그래스 바는 material-ui 에서 제공하는 LinearProgress 컴포넌트를 이용했으며 아래와 같이 간단하게 구현했다.

<LinearProgress className={classes.progress} variant="determinate" value={currentTime / totalTime * 100 } />

해결되지 않은 문제

테스트를 하면서 해결하지 못한 문제가 있다. 이는 치명적인데 아직 답을 찾지 못했다.

음악 재생 중 긴급재난문자가 오면 다시 재생이 되지 않는다. 다시 웹을 열어 재생을 시켜줘야 사용할 수 있다. 한번 켜두면 다시  끄기 전까지 휴대폰에 손을 대지 않게 하는게 목적이었는데 이 부분에서 해결하지 못했다.

 

마무리

긴급재난문자 이슈 외에는 이렇다할 큰 문제가 없어 마무리했다. 조만간이 될지 나중이 될지 긴급재난문자가 자꾸 음악 끊어서 빡치게 만들었을 때 손을 댈 듯 싶다.

 

전체 프로젝트는 github에 공개해 두었다. 누가 볼일이야 있겠냐 싶지만 혹시라도 나와 같은 목적을 가진 사람이 있다면 해당 프로젝트가 도움이 되길 바란다. 일반적인 사용목적이라면 firebase 의 free tier를 넘지 않을 것이다.

 

https://github.com/ddochea0314/music-web-player

ddochea0314/music-web-player

혹시 실제 구매를 요구하는 서비스를 만들 계획으로 이 소스를 참고한다면 피해주기 바란다. 브라우저의 개발툴에서 blob URL이 쉽게 찾을 수 있는데, 해당 URL을 알아내기만 하면 별다른 도구 없이도 브라우저에서 다운로드가 가능하다.

 

이것으로 뮤직플레이어 웹앱 개발기를 마무리하겠다.

이 따위로 만들어도 직장만 잘다니는 개발자가 있다는 사실에 위안을 얻길 바란다.