멜론 클론코딩 최종 과제 제출 <한사랑 산악회 뮤직플레이어>

🌸 자기소개

안녕하세요. 프론트엔드 개발자가 되기 위해 공부하고 있는 또자입니다. 10주챌린지 2기를 졸업했습니다. 원래는 해외 유학을 준비했습니다만, 니코쌤 강의를 작년에 처음 듣고 너무 재밌어서 웹개발자로 전향하기로 마음을 먹었습니다. 공부를 하다보니 생각보다 해야 할 게 많고 어려워서 준비 시간이 길어지고 있지만, 요즘은 발전하는 재미를 알게 되어 나름 즐겁게 코딩하고 있습니다.

🌸 구현한 기능 소개 및 스크린샷

한산랑 산악회에서 영감을 받은, 소위 아재 갬성이 물씬 묻어나는 뮤직 플레이어를 만들어봤습니다.

한산랑 산악회는 워낙 유명해서 간단하게만 소개하자면, 젊은 개그맨들이 50-60대의 모습을 재밌게 묘사하는 유튜브 콘텐츠입니다. 이 컨텐츠를 너무 재밌게 봐서, 멜론 챌린지 공고를 봤을 때부터 이런 컨셉으로 만들고자 생각했습니다. (만드는 내내 들었는데 지금도 재밌네요)

- 음원 : 한사랑 산악회 유튜브 컨텐츠

- 컨셉 : 킹받는 디자인

(1) Home

처음 페이지의 모습입니다.

전반적으로 촌스런 디자인으로 구성해봤습니다.

Header 부분에 무지개 색 바탕에 환영 문구가 옆으로 흘러가게 만들어 더욱 옛스런 느낌을 내봤습니다 .

이 페이지에서는 [로그인] 페이지로 이동이 가능하고, 로그인 시 사용자의 이름이 보여집니다.

[음악 듣기]를 클릭하면 전체 노래 목록인 music list로 이동합니다.

[글 남기기]를 클릭하면 방명록 페이지도 이동합니다.

(2) Music Home (전체 음악 차트)

전체 노래 목록을 볼 수 있는 페이지 입니다.

필수 과제였던 기능들을 확인할 수 있습니다.

왼쪽 [👍] 버튼을 누르면 플레이리스트에 추가되며,

즉각적으로 체크 표시로 확인 할 수 있습니다.

User에 objectId 로 만든 배열을 추가해서 화면의 리스트를 만들었습니다.

(2) 사용자 플레이리스트 (찜한 목록)

찜한 노래는 플레이리스트 페이지에서 따로 확인할 수 있습니다.

동일한 버튼을 이용해 플레이리스트에서 제거할 수 있습니다.

헤드폰 수는 플레이 수를 의미합니다. 노래가 끝나면 자동으로 1++ 이 됩니다.

재생 수가 높은 순서로 정렬되며, 제목을 클릭 시 노래를 들을 수 있는 듣기 페이지도 넘어갑니다.

종종 엄마께서 어플 사용 시 어떤 버튼인지 직관적으로 인지하지 못하는 경우가 있었습니다.
50-60대의 컨셉을 가진 어플의 명색에 맞게

아이콘으로 된 nav 엔 title을 넣어줌으로써 어떤 기능인지 알 수 있게 했습니다.

(3) Music Player

플레이어 페이지입니다. 진짜 있는 음원이 아니라서 썸네일과 음악파일을 같이 업로드했습니다.

audio에 autoplay 를 추가해 자동으로 재생이 됩니다.

가사가 바로 로드되기 때문에 가사와 함께 노래를 즐기실 수 있습니다.

일시정지, 한곡 반복듣기, 이전, 이후 곡 이동이 가능합니다.

볼륨 아이콘에 마우스를 대면 (hover) 음소거와 볼륨 조정이 가능한 range input이 나오도록 구현했습니다.

햄버거 아이콘을 클릭하면 현재 플레이중인 목록을 확인할 수 있고, 재생 버튼을 누르면 해당 곡이 재생됩니다.

작은 버전의 mixin을 따로 만들어 구현했습니다.

(현재는 찜한 목록에 현재 재생중인 곡이 추가된 목록이 보여집니다.)

이미지위의 찜 버튼을 이용해 재생화면에서도 플레이리스트를 조작할 수 있습니다.

(4) Master 만 가능한 업로드와 수정

nav 에 보이는 업로드 링크는 master 권한을 가진 유저한테만 보입니다.

곡 수정도 master 권한이 있는 유저만 가능합니다.

User Model에 isMaster 라는 속성을 추가해서 만들었습니다. 기본값은 false 입니다.

수작업으로 올리다보니 가사가 없는 노래들도 아직 많습니다.

계속 업데이트 예정입니다.

(5) 방명록

로그인 시 방명록을 작성할 수 있습니다.

글 남겨주시면 재밌을 거 같습니다 :-)

(6) 로그인 과 회원가입

로그인, 로그아웃이 가능합니다.

로그인 화면에서 회원 가입 페이지로 이동이 가능합니다.

회원가입 페이지에서 로그인 페이지로 이동이 가능합니다.

(7) 배경 자동 변환

자연을 고스란히 느낄 수 있는 배경이 10초마다 변경되어 봄나들이가 필요 없습니다.

(재생 중인 곡이 없을 시의 플레이 화면입니다.)

🌸 앞으로 더 구현하고 싶은 것들

• 유툽 링크로 바로 연결되는 유툽 버튼 활성화

• 모바일 화면에 맞춘 UI 구현

• 찜 목록과 관계 없는 현재 재생중인 플레이리스트

🌸 느낀점과 생각

사실 약 3달 전까지만 해도 유튜브 클론코딩을 어떻게 완강했는지 모를 정도로 백엔드는 너무너무 어려웠습니다. 유툽 복습도 몇번이나 시도했는데 늘 절반 정도 까지 밖에 못했어요.

강의를 봐도 봐도 새로운 느낌이 들었고, 문득 제대로 공부하고 있지 않다는 생각에 다시 기초부터 매일 공부하고 있었습니다. 그러던 차에 맬론챌을 만났어요. 제 입장에선 정말 고맙고 반가운 챌린지입니다. 완강 후 얼마나 더 성장했고, 더 많은 것을 스스로 할 수 있는지 느끼게 해줬거든요. 더불어 유툽 강의의 내용을 전체적으로 복습할 수 있었습니다.

진행하면 할 수록 더하고 싶은 기능도 많아지고, 이런 저런 방법을 고민하며 열중하는 시간도 늘어갔습니다. 그래서 너무 재밌었고 더 많은 걸 배우고 싶어졌습니다. 물론 중간중간 포기하고 싶은 순간들도 있었습니다. 성공시켜보겠다고 욕심부리다가 실패한 기능들도 있고, 안되는거 붙잡고 있다가 이렇게 마감시간 가까이 왔네요ㅠ 몇시간 전에도 배포하다가 오류나서 통째로 날릴 뻔 했지만 끝까지 해내서 정말 뿌듯합니다!

아직 부족하고 기능도 빠져있는 것들이 많지만, 조금씩 더 채워갈 예정입니다.

슬랙과 10주챌 디스코드 커뮤니티가 정말 많은 도움이 됐어요.

챌린지 기획해주신 운영진분들도 감사해요! 또 이런 재밌고 유익한 챌린지가 나왔으면 좋겠습니다.

모두모두 고생하셨고 제 어플로 조금이나마 웃고 가셨으면 합니다! 감사합니다!

🌸 깃허브 & 배포 링크

깃허브 링크 : https://github.com/ddozza54/melon_challenge

배포 링크 : https://port-0-melon-challenge-1maxx2algqmtl28.sel3.cloudtype.app/