[최종 배포 URL 바로 가기]

[깃허브 URL 바로가기]

프로젝트에 대한 설명은 깃허브 README에 자세히 적어놓았습니다. 이 글에서는 간단하게 설명을 하려고 하니 자세한 설명을 보고 싶으신 분들은 깃허브 README를 읽어주시길 바랍니다!

[소개]

안녕하세요. 멜론 클론코딩 최종과제를 제출하기 위하여 글을 작성합니다. 제가 만든 서비스의 이름은 Goorm Music (구름 뮤직) 입니다!! 마치 푹신하고 편안한 느낌의 구름 위에서 노래를 듣는 것 같은 느낌을 주는 서비스!! 라는 의미입니다.

기능적인 면은 아니지만 제일 언급하고 싶은 부분은 디테일한 애니메이션입니다!! 평소 애플의 변태같이 디테일한 애니메이션(예를들어 다이나믹 아일랜드)을 좋아해서 제가 할 수 있는 범위내에서 최대한 디테일하게 애니메이션 효과를 주었습니다.

특히 노래를 선택할 때 앨범이 뮤직 플레이어로 빨려 들어가는 애니메이션은 꼭 직접 접속해서 보셨으면 합니다!!

뭔가 없으면 허전해서 아이콘도 빠르게 만들었습니다.

[주요 기능]

[👤 유저 인증]

• 기존에 사용하던 구글 아이디로 쉽고 빠르게 로그인할 수 있습니다.

[🎧 뮤직 플레이어]

• 차트 혹은 플레이 리스트에서 선택한 노래를 재생할 수 있습니다.

• 슬라이더를 이용하여 재생 시간 위치와 볼륨의 값을 확인 및 변경할 수 있습니다.

• [(재생/정지)하기, (다음 곡/이전 곡)으로 이동, 찜하기, (한 사이클/전체 반복/한 곡 반복) 재생]의 기능이 제공됩니다.

• 찜하기를 누르면 데이터 베이스에서 현재 사용자의 찜하기 목록이 변경됩니다. (추가 or 삭제)

[📊 인기곡 차트]

• 데이터 베이스에 있는 노래를 불러와 조회 수 순서대로 차트에 나열합니다.

• 노래 이미지, 제목, 아티스트, 조회수의 정보가 표시됩니다.

[📦 플레이 리스트]

• 데이터 베이스에서 현재 사용자의 찜하기 목록을 불러와 플레이 리스트에 표시합니다.

• 플레이 리스트 기본 순서는 추가된 순 이며, 순서는 사용자가 자유롭게 변경할 수 있습니다.

• 플레이 리스트 창의 위치를 자유롭게 이동시킬 수 있습니다.

[구현 기능 사진 중 일부]

( README에서 전체 사진을 보실 수 있습니다!! )

전체 사진

다음곡 재생 및 반복 기능

차트에서 곡 선택

플레이리스트에서 곡 선택

플레이리스트 순서변경

[개발 기술]

Front End : PUG, SCSS, JAVASCRIPT

Back End : NODE.JS, EXPRESS, MONGO DB

Tools: GITHUB, GIT, VSCODE

[후기]

컨테스트를 진행하면서 노션을 이용하여 컨테스트 개발 일기(?) 같은 것을 썼습니다. 그 날 새로 배운 것, 혹은 이미 알고 있었지만 부족하다고 생각한 것, 컨테스트가 끝나고 더 공부해보고 싶은 것 등을 매일 기록하면서 개발을 했습니다. 이 기록을 활용하여 컨테스트가 끝난 뒤에도 부족한 것들을 계속 공부할 예정입니다.

또한 개발을 하면서 역시 기본이 제일 중요하다는 것을 매일매일 느꼈습니다. 앞으로는 최신 기술, 코드 문법에만 사로잡히지 않고 근본적인, 기본적인 개념을 깊게 공부할 예정입니다.

자바스크립트를 사용하면서 타입스크립트가 왜 생겼고, 많은 개발자들이 선호하는지 조금은 알게된 것 같습니다. 시간이 된다면 니꼬쌤 무료 강의를 통해 타입스크립트도 배워봐야겠다고 생각했습니다.

이외에도 기획의 중요성.. 깃 사용의 중요성.., 등 정말 여러가지를 느끼고 배울 수 있는 계기가 되어주었습니다. 나중에는 정말 혼자서 생각하고 기획하고 개발해서 사이드 프로젝트 게시판에 글을 쓸 수 있는 날이 오면 좋겠습니다.

마지막으로 컨테스트를 기획하고 운영해주신 분들께 감사의 말씀을 드리고, 그리고 같이 참여해서 저에게 동기부여를 주신 다른 참여자 분들께도 감사의 말씀을 드리고 싶습니다. 역시 공부는 혼자보다는 같이할 때 더 효과가 있는 것 같습니다!