멜론 클론코딩 최종 과제 제출 [🎼MyPli]

자기소개

안녕하세요, 저는 프론트엔드 개발자로 취업 준비 중인 deun이라고 합니다.

사실 처음에는 노마드코더 뉴스레터에서 html, css, js를 이용한 멜론 클론 코딩 콘테스트를 진행한다는 모집글을 보고 프론트만 해도 되는 줄 알고 지원했는데, 처음부터 db와 백엔드 세팅을 해야 돼서 당황했던 기억이 납니다ㅎㅎ

지금은 포기하고 나중에 nodeJS 공부를 하게되면 다시 도전해 보려고 하다가, 그래도 지원한 김에 되든 안 되든 최선을 다해서 만들어 보면 챌린지가 끝났을 때 조금 더 성장해 있지 않을까 하는 생각이 들어서 열심히 만들어 봤습니다.

백엔드가 처음인 만큼 세팅부터 배포까지 정말 많은 오류를 마주해서(물론 프론트에서도..) 포기하고 싶은 순간도 있었지만, 걱정했던 배포까지 무사히 마치고 최종 미션을 제출할 수 있게 돼서 뿌듯하네요!

기획

유튜브에는 essential; 이나 때껄룩처럼 다양한 플레이리스트 채널이 있습니다. 저는 이런 채널에서 아이디어를 얻어 ‘나만의 플레이리스트’를 만들자는 컨셉으로 기획을 시작했습니다.

플레이리스트 채널의 특징은 주로 감각적인 이미지와 채널명, 재생 중인 노래 제목, 사운드 비주얼라이저 등이라고 생각합니다. 그래서 저는 사용자가 원하는 이미지와 플레이리스트 제목으로 나만의 플레이리스트를 만들 수 있는 음악 플레이어를 만들었습니다.

이름은 My Playlist를 줄여 MyPli로 지었고 마플리라고 부르는 중입니다.

디자인

기본적인 디자인을 잡아두고 개발하는 게 좋을 것 같아서 Figma로 대략적인 레이아웃을 잡아보고 css 코드를 작성하며 부분적인 수정을 했습니다.

Figma로 로고도 만들어봤는데, MyPli 사이트의 리스트 디자인이 라인으로 되어있어서 로고 상단에 라인 5줄을 넣어 포인트를 줬습니다. 참고로 5줄인 이유는 음악 노트가 오선지이기 때문에 리스트를 표현하면서도 “음악” 플레이어라는 아이덴티티를 살릴 수 있을 것 같아서였습니다.

포인트 컬러는 멜론, 스포티파이 등의 음악 스트리밍 사이트에서도 사용하고 있는 그린으로 선택했습니다.

기능 소개

가장 먼저 구현한 기능인 Top 100 차트는 실제 멜론의 Top 100 데이터를 직접 크롤링해서 구현했습니다. 현재 순위와 변동 폭을 확인할 수 있습니다.

로그인하지 않아도 곡을 추가하고 재생할 수 있도록 만들었습니다. 하지만, 따로 저장은 하지 않아서 새로고침하면 사라지게 됩니다.

곡 추가는 두 가지 방법으로 할 수 있습니다. Top 100 차트의 + 버튼을 누르거나, 원하는 곡의 youtube url로 검색해 추가할 수 있습니다.

Top 100 차트의 + 버튼을 누르면 해당 곡의 곡 제목과 아티스트 명을 키워드로 youtube API에 검색 요청을 한 다음, 곡의 정보를 가져와 재생할 수 있도록 구현했습니다. 목표는 곡의 음원이나 뮤직비디오 영상을 추가하는 거였는데, 여러 설정으로 시도해 봐도 모든 곡에 적합한 결과가 나오지는 않아서 라이브 영상이나 음악 방송 영상이 뜨기도 합니다. 이렇게 차트에 있는 곡을 추가했지만 마음에 들지 않는 경우에는 url로 직접 노래를 추가할 수 있습니다.

한 곡을 여러 번 반복 재생하고 싶어 할 수도 있고, 멜론 등 스트리밍 사이트에서도 한 곡을 여러 번 추가할 수 있도록 지원하기 때문에 중복으로 저장할 수 있도록 만들었습니다.

중복을 허용하기 전에는 youtube-id로 현재 재생 중인 곡인지 다른 곡인지 구분했는데, 같은 곡을 여러 번 담을 수 있게 되면서 새로운 기준이 필요해 youtube-id에 시간 정보를 더해 새로운 id를 만들어 구분할 수 있도록 만들었습니다.

url로 검색의 경우, 올바르지 않은 url을 입력할 경우 alert 창을 띄우도록 만들었고 제대로 된 유튜브 url을 입력했다면 곡 제목과 아티스트 명을 수정할 수 있도록 input 창에 값을 넣어줬습니다. 기본값으로는 유튜브 영상 제목이 곡 제목으로, 채널명이 아티스트 명으로 적용됩니다.

로그인은 구글 로그인으로 구현했습니다. 로그인한다면, 플레이리스트에 추가하는 곡이 데이터베이스에 저장됩니다. 로그인 한 사용자는 My Page에 들어갈 수 있는데 여기에서 플레이리스트 이미지, 제목, 닉네임을 수정할 수 있습니다.

닉네임은 아직 사용되는 곳이 없지만 추후에 기능이 추가될 수도 있기 때문에 넣어두었습니다.

My Page에서는 플레이리스트에 담아둔 곡도 확인할 수 있는데, 우측의 - 버튼을 누르면 플레이리스트에서 곡을 삭제할 수 있습니다.

왼쪽에 있는 버튼은 잡고 드래그했을 때 순서를 바꿀 수 있도록 만들려고 했는데 시간 관계상 구현하지 못했습니다.😥

오디오 컨트롤러에서 곡 재생 / 이전 곡 재생 / 다음 곡 재생을 할 수 있도록 구현했습니다. 재생 바를 클릭하면 원하는 구간으로 이동할 수 있습니다. 음악 사이트인데 너무 동적인 것 같아서 LP 이미지에 spin 애니메이션 효과를 넣어줬습니다.

플레이리스트 화면도 너무 정적인 것 같아서 사운드웨이브를 추가했습니다. 원래는 실제 음원 데이터에 맞게 움직이는 오디오 비주얼라이저를 구현하고 싶었는데, Youtube API만으로는 영상의 오디오만 따로 분리할 수 없어서 이것저것 시도해 보다가 아쉽지만 css 애니메이션 효과로 대체했습니다.

모니터 화면에 띄워둘 수 있게전체화면 기능도 구현했습니다.

반응형 css도 적용했습니다!

후기

앞서 말한 것처럼 포기하고 싶은 순간도 있었지만 끝까지 완주할 수 있게 돼서 정말 뿌듯합니다. 콘테스트는 이제 끝났지만, 아직 부족한 점이 많아서 앞으로 더 보완하고 기능도 추가해 볼 예정입니다.

리액트처럼 컴포넌트 단위로 나눠보고 싶어서 중간에 class 문법을 사용해 리팩토링했는데 이후 시간에 쫓기며 급하게 기능을 구현하다 보니 적절한 class에 넣지 못한 기능들도 있는 것 같아 아쉬움이 듭니다. 그래도 새로운 시도를 해봤다는 데 의의를 두고 나중에 리액트로 다시 구현해 보고 싶다는 생각이 들었습니다. 덕분에 구현도 중요하지만 설계가 참 중요하다는 걸 이번 프로젝트를 하며 다시금 느낄 수 있었습니다.

백엔드는 처음이다 보니 정말 머리 아팠는데.. 정해진 기간이 있고 그 기간 내에 구현해야 할 기능이 있는 챌린지 미션 덕분에 완성할 수 있었던 것 같아 챌린지를 열어주신 노마드 코더분들에게 감사드립니다.

슬랙 채널에 다른 참여자분들이 올려주신 팁이나 진행 과정도 정말 많은 도움이 되었습니다. 온라인상이지만 함께 하고 있다는 느낌이 들어 좋은 동기부여가 됐습니다. 다들 수고 많았고 감사합니다!👍

링크

배포: https://port-0-mypli-e9btb72blgn1khw9.sel3.cloudtype.app/

깃허브: https://github.com/devdeun/music-player