글의 목적

몇 년 전부터 기획했던 사이드 프로젝트 My Muse List를 얼마 전에 배포했습니다. 라이브 공연 영상 주소를 보관하고, 모아서 보는 걸 좋아한다면, 이 서비스를 좋아하실 수도 있습니다. 사람들이 써주길 바라는 마음으로 쓰는 서비스 홍보글 겸 개발 후기입니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7f37568b-7c9d-46fd-8834-e6511a74cd37/www.mymuselist.com_.png

자기 소개

저는 현재 회사에서 Javascript를 다루며 가끔 Spring, MFC, Qt, Android (Java, React Native) 개발도 하는 프로그래머입니다. 회사에서 프론트엔드 개발을 하고 있지만, 모던 웹 앱을 개발한다는 느낌을 받지 못했습니다. 그래서 사이드 프로젝트로 모던 웹 앱을 (공부하면서) 개발해보려고 서비스를 개발하기 시작했습니다.

My Muse List 소개

My Muse List는 YouTube에 업로드 된 음악가의 공연 영상 주소를 음악가, 공연장, 공연 별로 모아서 보관 및 제공하는 서비스입니다. 사용자가 My Muse List 내에서 영상을 시청하는 것이 아니라 YouTube 주소로 리다이렉트 시킵니다.

프로젝트가 지나온 길

프로토타입

My Muse List는 좋아하는 음악가의 영상을 모아서 보고 싶은 마음이 있었고, 5년 전에 Python, Flask, MongoDB를 이용해서 프로토타입을 만들어서 사용했습니다. 하지만 Python과 웹 앱에 대해서 잘 이해하지 못한 상태로 만든 서비스는 지속시키기 힘들었습니다. 이왕 만든 김에 다른 사람들에게 보여주고 싶고 혹시 나와 같은 마음을 가진 사람들에게 필요한 서비스라고 생각해서 좀 더 제대로 만들어 보기로 했습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bc721e53-010f-4245-b63d-c19594b59150/Untitled.png

5년 전에 만든 프로토타입

안드로이드 앱

그렇게 몇 년 간 메모장에 잠들어있던 기획은 2년 전 한 행사를 계기로 다시 세상 밖으로 나왔습니다. 2 주 동안 서비스를 만들어서 배포해보는 행사에 참여했는데, 그 당시 기술 스택으로 2 주 안에 만들고 배포할 수 있는 플랫폼인 안드로이드로 진행했습니다. 2 주 안에 배포하고 행사 참여자들과 주변 사람들에게 피드백을 받았는데, 그때 받았던 피드백을 My Muse List에 반영했습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7126b37-5dc5-400c-8311-ec1701323435/Untitled.png

안드로이드 앱 화면 1

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d468515a-43cb-4002-b053-a62ee9ae5089/Untitled.png

안드로이드 앱 화면 2

드디어 개발 시작

사이드 프로젝트의 목적 중 하나가 '모던 웹 앱을 개발해보기'라서 프론트엔드는 React, 백엔드는 Java Spring Boot와 MongoDB, 회원 관리는 Firebase Authentication을 이용하여 개발했습니다. 서비스는 회원 가입이 없고 등록된 정보만 조회하는 1차 버전, 사용자가 회원 가입한 후에 정보 등록 및 관리 가능한 2차 버전으로 나누어 개발했습니다.

1차 버전 Front-end

우선 더미 데이터를 가지고 ReactMaterial UI로 페이지 레이아웃과 컴포넌트들을 만들었습니다. 프로젝트 초반엔 React로 개발한다기보다 Material UI로 개발한다는 느낌이 강했습니다. 어느 정도 시간이 지나 Material UI에 익숙해지고 나니 코드의 일관성도 생기고 프로젝트 구조도 잡혔습니다. Material UI를 쓰니 큰 힘을 안 들이고도 그럴듯한 UI가 만들어져서 좋았습니다.

느꼈던 또 다른 장점은 서버에서 가져온 데이터를 보여주기 위해서 동적으로 요소를 생성하고 돔을 구성하지 않아도 되는 점입니다. jQuery를 사용할 때는 데이터를 요청하고, 응답받아서 콜백 함수에 데이터를 넘겨주고, 콜백 함수는 받아온 데이터를 이용해서 createElement로 시작하는 장황한 코드로 돔을 구성하는 작업을 기본적으로 해야 했는데, React는 상태가 변경됨에 따라 데이터를 어떻게 보여 줄지 레이아웃을 잡으면 알아서 컴포넌트를 만들고 렌더링 해주니 편했습니다.

각 메뉴를 클릭해서 페이지를 이동하는 느낌을 주기 위해서 React Router를 이용했습니다. 나중에 배포할 때 알았는데, 브라우저의 주소 표시줄에는 하위 디렉토리가 표시됐지만 실제로는 그 디렉토리로 이동한 게 아니기 때문에 페이지를 새로고침하면 원하는 페이지로 이동할 수 없었습니다. Nginx로 배포할 때 설정 파일에서 location 블록에 try_files $uri /index.html; 을 추가해서 그 문제를 해결했습니다.