music place 프로젝트 소개

MusicPlace 프로젝트에서 저는 안드로이드 스튜디오를 이용한 애플리케이션 개발, MySQL을 활용한 데이터베이스 설계, Spring Security와 JWT를 기반으로 한 보안 구현, 그리고 WebSocket과 Redis를 활용한 스트리밍 서비스의 영상 공유 기능을 담당했다.

 

music place 프로젝트의 주제는 자신의 취향을 반영한 음악 플레이 리스트를 다른 사람과 공유하고 함께하고 싶다는 생각에서 출발하게 되었다.

프로젝트를 진행하면서 와이어프레임, 목업, ERD, Flowchart를 이용해 설계를 했다. 일정 관리는 설계를 진행하는 초기에는 설계 자료를 같이 공유하기 편하게 노션을 이용해서 스케줄과 일정을 공유했고, 개발이 시작된 이후에는 Jira를 이용하여 문제점과 개발 상황을 공유했다.

https://walnut-house-238.notion.site/Music-Place-6746d1c724494ccc8b3fdbe0c8dd9c51?pvs=4

캡스톤 디자인 - Music Place | Notion

 

 

 

로그인은 Spring Security와 JWT를 이용하여 토큰을 가지고 있는 사람만 애플리케이션을 사용할 수 있도록 하였다.

https://youtu.be/fozFClM607s?si=q1A9bs7VdK2ECcL-

 

로그인 이후 가장 처음 나오는 화면은 공개 플레이리스트 목록이다. 이 화면에서는 다른 사용자들이 공개로 설정한 플레이리스트를 보고, 댓글 쓰기, 팔로우 등록을 할 수 있다. 이 화면에서 작성된 정보는 MySQL에 저장된다.

https://youtu.be/X1W0PmOPTrU?si=g77YM66uH08nfL6h

 

두 번째 화면은 유튜브 음악 검색 기능을 가지고 있다. 이 화면에서는 유튜브 api를 사용해 데이터를 불러오고, 검색을 하지 않은 상황에서는 인기 목록을 불러오고, 검색을 하면 검색어를 포함한 음악 목록을 불러온다.

https://youtu.be/pbPBoztUkos?si=dsEROPDoBjrT9KcG

 

사용자가 음악을 저장할 수 있는 플레이리스트를 만들 수 있다. 플레이리스트를 생성할 때 제목, 커버 이미지, 설명, 공개 여부를 설정할 수 있다. 또한 이미 만들어진 플레이리스트의 수정 버튼을 클릭하면 공개 여부, 설명, 커버 이미지, 음악 삭제 등의 수정을 할 수 있다. 이 화면에서 생성, 수정, 삭제되는 데이터는 MySQL에 저장된다.

https://youtu.be/BMHPkE00yKM?si=-svy_AnexPafXnJL

 

 

스트리밍 방 제목, 설명을 작성하고 새로운 방을 만들면 이 방에 uuid를 이용한 id가 생성된다. 

스트리밍 방 목록에서 마음에 드는 방을 클릭하고 들어오면 채팅과 호스트가 공유하는 유튜브 영상을 볼 수 있다. 

이때 스트리밍 방의 정보는 MySQL에 들어가고, 채팅과 스트리밍 영상은 Redis를 이용해 사용자들이 주고받을 수 있다.

https://youtu.be/HD-MfsgSAMM?si=uYMvHEJNjs50Ed8w

 

자신이 생성한 플레이리스트의 개수, 팔로워의 수를 볼 수 있다. 이때 팔로잉을 클릭하면 내가 팔로우하고 있는 사람의 목록을 볼 수 있다.

프로필 창에서 프로필 편집 버튼을 클릭하면 자신의 프로필 사진, 이메일, 별명, 이름을 수정할 수 있다. 또한 탈퇴를 클릭하면 MySQL에서 논리적 삭제로 등록되어 일정 시간이 지나면 삭제된다. 로그아웃을 하면 현재 가지고 있는 JWT 토큰이 만료되고 로그인 화면으로 넘어간다. 

https://youtu.be/nMqB9vZF3yY?si=AyxRkoMDvpGLwEuI

 

프로젝트 아키텍처에서 보는 것과 같이 백엔드는 spring 프로젝트를 jar 파일로 만들어서 mysql과 redis를 함께 도커 컨테이너로 gcp에 배포하였다. 프런트엔드는 apk 파일로 만들어서 다운로드하여 사용할 수 있도록 만들었다.

apk로 만든 프로젝트를 git releases에 추가하여 베타테스터들이 링크를 클릭하면 다운로드할 수 있도록 하였다.

이때 소정의 상품을 제공하며 테스터들을 모집했고, 구글폼을 이용해 이용 후기를 조사했다.

베타테스터들의 의견을 반영하여, 향후 알고리즘 기반 음악 추천, 플레이리스트 자동 재생, 프라이빗 개인 및 단체 채팅 등 다양한 기능을 추가할 계획이다.

 

https://github.com/CapstoneDesign-MusicPlace/Music-Place_frontend

GitHub - CapstoneDesign-MusicPlace/Music-Place_frontend

https://github.com/CapstoneDesign-MusicPlace/Music-Place_backend

GitHub - CapstoneDesign-MusicPlace/Music-Place_backend

 

후기

이번 프로젝트를 진행하면서 Spring Security, JWT를 이용한 인증, Websocket, redis를 이용한 스트리밍 서비스, Git Actions, Docker을 사용한 배포는 처음 사용하는 기술이었다. 

Spring security에서 내가 만든 user entity에 따라 id를 사용하고 싶어서 UserDetails 말고 CustomUserDetails를 만들어서 사용해 봤다. 또한 Websocket과 redis를 사용하면서 영상 주소를 채팅과 따로 주고받을 수 있도록 하고 싶었는데, 계속 오류가 발생해서 결국 채팅에 영상 주소를 같이 보낼 수 있도록 만들어서, 애플리케이션에서 호스트만 영상 데이터를 보낼 수 있도록 만들었다. Git Actions, Docker을 사용한 배포는 당시에는 어려웠지만 지금 생각하면 충분히 할만하다는 생각이 든다.

처음에는 어떻게 해야 할지 막막했지만, 막상 해보니 성취감을 느꼈고, 이를 통해 다른 프로젝트도 충분히 할 수 있다는 자신감과 용기를 얻었다.