🍈 멜론 클론코딩 최종 제출 <당신의 작업실>

최종 배포 URL: https://pixel-workroom.herokuapp.com/

깃허브 링크: https://github.com/ha-il/project-pixel

• 자기소개

안녕하세요! 프론트엔드 개발자로 취업 준비하고 있는 김형우라고 합니다. 노마드코더 10주 스터디를 시작으로 노마드코더와의 인연을 계속 이어가고 있습니다. 바닐라 자바스크립트로 이것 저것 구현하는 것을 좋아하는데, 마침 바닐라 자바스크립트만으로 앱을 구현하는 멜론 클론코딩 컨테스트가 열려서 반가운 마음으로 참가했습니다.

• 프로젝트 기획

프로젝트를 기획하면서, 일단 저는 언제 음악을 듣는지 생각해봤습니다. 저는 주로 프로그래밍 작업을 할 때 음악을 많이 들었습니다. 그러다보니 노트북이나 데스크탑으로 음악을 재생하거나, 웹으로 유튜브를 띄워놓고 음악을 듣는 경우도 많았습니다. 어떤 프로젝트가 탄생할지 모르겠으나, 일단 내가 사용할 프로젝트를 만드는 것이 좋겠다는 생각이 들어서, '작업하면서 음악을 듣는 사람들을 타겟으로한 웹 뮤직 플레이어'를 만들어야겠다는 생각이 들었습니다.

하지만 그런 뮤직 플레이어는 이미 너무 많고, 작은 프로젝트를 만들더라도 조금의 차별점은 있어야할 것 같아서 생각해낸 것이, '웹으로 개발하는만큼 넓은 화면을 사용할 수 있으니 유저에게 어떤 공간을 제공해주고 싶다'라는 생각을 하게되었습니다. 자신만의 취향으로 가득 채운 작업실을 갖고 싶다는 생각을 자주하는데, 제가 만든 웹을 이용하는 유저에게도 자신만의 작업실처럼 느껴질 수 있는 작은 공간을 제공하고 싶어서 프로젝트 이름을 "당신의 작업실"로 짓게 되었습니다.

• 초기 디자인

(심각한 디자인 감각...)

기획하면서 피그마로 간단히 스케치한 초기 디자인입니다. 평범한 뮤직 앱처럼 헤더와 네비게이션 바 등을 넣으면 공간이 협소해지고 지저분해보였습니다. 헤더와 메뉴를 과감하게 제거한 대신, 각 메뉴의 역할을 가구 오브젝트에 배치했습니다. '오히려 유저들이 이것저것 클릭해보면서 재미를 느낄 수 있지 않을까?'라는 생각도 조금은 해봤습니다. 아이패드의 레이아웃을 조금 참고했습니다.

• 디자인 테마는 "픽셀 아트"

사실 프로그래밍보다도 가장 걱정했던 부분입니다. 이번 프로젝트에 사용된 픽셀아트 이미지 리소스들은 Aseprite라는 픽셀 아트툴로 제가 직접 찍었습니다. 물론 디자인 전부를 제가 하기에는 시간이 많이 드는 관계로, 핀터레스트 등에서 이미지를 검색하고, 제가 찍을 수 있는 형태로 변형해서 만들었습니다. 평소에 취미로 픽셀아트를 조금씩 찍었었는데, 그때 찍었던 이미지도 활용했습니다.

(프로젝트 진행하면서 찍은 픽셀 아트 파일들)

• 이번 프로젝트 목표

이번 프로젝트를 하면서 제가 스스로 설정한 목표가 세 가지 있습니다.

하나. 음악이 끊기지 않도록 SPA로 구현할 것. (로그인, 로그아웃을 제외한 나머지 기능들은 전부 새로고침을 발생시키지 않습니다. )

둘. 퍼그 파일은 layout.pug 파일에 div 하나만 작성하고, 리액트처럼 나머지는 전부 프론트엔드에서 렌더링할 것

셋. 프론트엔드 구현할 때는 상태관리를 할 수 있는 컴포넌트 클래스를 만들고, 컴포넌트 클래스를 기반으로 컴포넌트를 확장시켜가면서 구현할 것

위 세 가지를 나름의 도전과제로 생각하면서 프로젝트를 진행했습니다.

(클라이언트 폴더 구조)

(모든 컴포넌트는 Component 클래스를 상속받아 작성했습니다.)

(상태관리도 할 수 있게 구현했습니다.)

• 프로젝트 기능 소개

1. 로그인 전 화면과 로그인 창

• 홈페이지 첫 진입시 나오는 화면입니다.

• 'click'이 떠있는 모니터를 클릭하면 URL이 /login으로 바뀌며 로그인창이 나옵니다.

2. 로그인 후 첫 진입 화면

• 스마트폰 아이콘: 클릭시 스마트폰 오브젝트가 렌더링됩니다.

• 침대: 클릭시 로그아웃 알람창이 뜹니다.

• 장식장: 유저의 플레이리스트를 나열합니다.

• 뮤직뱅크: 클릭시 인기차트 페이지를 렌더링합니다.

3. 플레이리스트 생성과 플레이리스트 페이지

• 스마트폰 아이콘을 클릭하면 스마트폰 오브젝트가 나옵니다.

• 녹색 아이콘은 플레이리스트 생성 기능입니다.

• 빨간색 아이콘은 유튜브 영상으로 음악을 추가하는 기능입니다.

• 녹색 아이콘을 누르면 입력창이 나옵니다.

• 폼을 입력하고 서브밋 이벤트가 발생하면 해당 플레이리스트 페이지가 렌더링됩니다.

• 음악을 추가할 수 있게 인기차트 음악을 밑에 추천해줍니다.

• + 버튼을 누르면 플레이리스트에 음악이 추가됩니다.

• 검색하기 창에 검색어를 입력하면 인가차트 곡 대신 검색 결과를 렌더링합니다.

  • 현재는 검색어 전체를 정확히 입력해야 결과가 뜹니다.

• 재생 버튼을 누르면 뮤직 플레이어로 현재 플레이리스트의 음악을 전달하고 재생이 시작됩니다.

• 플레이리스트를 생성하고 홈으로 돌아가면 장식장이 채워져있습니다.

4. 음악 추가 기능

• 스마트폰 오브젝트의 빨간 앱을 누르면 음악을 추가할 수 있는 폼이 렌더링됩니다.

• 유튜브 URL로 음악을 추가할 수 있습니다.

• 추가한 음악을 플레이리스트 화면에서 검색하여 플레이리스트에 추가할 수 있습니다.

5. 인기차트

• 홈 화면에서 '뮤직뱅크'가 나오는 티비 오브젝트를 클릭하면 인기차트가 렌더링됩니다.

• 개선하고 싶은 점

사실상 이미지가 가장 중요한 프로젝트인데, 이미지를 정적파일로 제공해서 그런지 배포 후에 이미지가 깨져서 나오는게 너무 아쉽습니다. 컨테스트 기간은 끝났지만, 이미지를 따로 호스팅해서 개선하고 싶습니다.

사실 다른 것보다도 코드로 인정받고 싶은 프로젝트였는데, 마감이 급하다보니 마지막에는 결국 중복 코드가 많아지고, 하나의 컴포넌트에 너무 많은 역할이 부여된 것 같아서 아쉽습니다. 며칠 쉬었다가 리팩토링 과정을 거치고 싶습니다.

• 멜론 클론코딩 참가하실 분들에게 전하고 싶은 팁

기획과 요구사항 명세에 많은 시간을 들이면 좋은 것 같습니다. 사실 저는 첫번째 멜론 클론코딩 컨테스트에 참가했다가 탈락을 했었는데요. 이유는 중간에 요구사항을 자꾸 변경해서 마감기한을 맞추지 못했기 때문입니다. 이번 프로젝트는 기획 초반에 요구사항을 최대한 자세하게 작성했고, 요청할 api경로와 응답에 따른 경우도 상세하게 작성했습니다. 그렇게 하니까 프로그래밍을 할 때 방향이 명확해지고, 내가 지금 해결해야할 문제도 명확해져서 작업 효율이 좋았던 것 같습니다.

• 소감

프로젝트를 처음 기획하고 나름대로 요구사항을 작성했을 때는, "그래 일단 진짜 최소기능까지만 요구사항을 정의하고, 최소 기능 다 구현하면 더 추가하자!"라는 마음이었는데, 그 '진짜 최소기능'을 구현하는데 컨테스트 기간을 다 써버릴 줄 몰랐습니다. 최소 기능을 잘 만드는 것도 정말 쉽지 않구나 라는 것을 느꼈습니다.

마지막으로, 멜론 클론코딩 컨테스트를 열어주신 노마드코더에게 감사드립니다. 이번 프로젝트를 통해서 바닐라 자바스크립트를 많이 공부할 수 있었습니다. 위에서 언급했던 개인적인 목표들을 달성하기 위해서 나름대로 검색도 많이 해보고 삽질도 많이 했습니다. 특히 express와 pug로 쉽게 하던걸, 클라이언트에서 바닐라 자바스크립트만 가지고 해결하는 것이 많이 어려웠지만, 덕분에 클래스, this 바인딩, SPA 구현, location API, history API, 쿠키, 상태관리 등 많은 것을 배웠습니다. 힘들었지만, 바닐라 자바스크립트로 한땀 한땀 구현하는게 정말 즐거웠습니다. 소중한 경험을 선물해주셔서 감사합니다.