서비스명 : 러플리 (Luvpli)

playlist 공유 플랫폼

러플리는 자신이 좋아하는 음악들로 구성한 플레이리스트를 생성해 공유할 수 있는 플레이리스트 공유 플랫폼입니다. 러플리는 접근성이 좋은 유튜브를 활용하여 개인이 플레이리스트를 생성하고, 서로 공유하고, 자신의 플레이리스트를 사람들과 같이 들으며 실시간 소통할 수 있는 서비스입니다.

러플리에서는 채팅방에서 플레이리스트를 같이 들으며 실시간으로 소통할 수 있고, 서로의 플레이리스트를 북마크하거나 좋아요를 누르는 방식, 맘에 드는 DJ를 팔로우하는 것으로 상호작용이 가능합니다.

자신의 플레이리스트가 좋아요를 많이 받거나, 자신을 팔로우 한 사람이 많아질수록 러플리 랭킹에 반영이 되고 인기 DJ가 될 수 있습니다!

기술스택

아키택쳐

서비스한 기능

실시간 채팅방

채팅방에서 플레이리스트를 관리하기 위해 Youtube Iframe Player API를 편리하게 사용 가능한 라이브러리인 react-youtube를 사용했다. 유튜브 플레이리스트를 핸들링 하는 여러가지 메서드(재생, 이전 곡 재생, 다음 곡 재생, 음소거 등)은 Youtube API 공식 문서를 참조했다.
채팅방에서의 실시간 채팅은 Spring에서 제공하는 WebSocket, Stomp를 사용해서 구현했다. Message Broker를 사용하여 pub으로 지정한 Publisher URL에서 발행한 메시지를 sub으로 지정한 Subscriber URL으로 전달해주는 형식이다. Sub URL에 다수의 클라이언트가 들어와도 클라이언트 각각의 Queue가 생성되어 모두 동일한 메시지를 수신받을 수 있다.

플레이리스트

플레이리스트 생성시 유튜브 영상 링크를 이용하여 플레이 리스트에 들어갈 영상들의 정보를 가져온다.이 것을 이용하여 플레이리스트 썸네일 videoId등을 추출하여 방의 음악을 재생할때 사용한다.

랭킹

랭킹은 최초에 Redis의 zSetoperator를 이용해서 구현했었다. 하지만 웹소켓을 사용하는 것이 프리티어 EC2에게는 버거웠는지 CPU 사용률이 70%를 넘어가 서버가 멈춰버리는 현상이 자주 발생해서 서버의 부하를 최대한 줄이고자 In-Memory DB인 Redis가 아니라 RDS에 랭킹정보를 저장해서 구현했다. JPA의 findAllByOrderBy~Desc를 사용했다. 또한, @Scheduled 애너테이션을 사용해서 1시간마다 랭킹정보를 갱신시켜 우리가 음원사이트에서 보는것처럼 1시간별로 랭킹을 최신화했다.

검색

유저는 유저명으로, 플레이리스트와 채팅방은 카테고리, 제목, 유저명으로 검색할 수 있도록 했다. JPA의 findBy~Containing을 주로 사용해서 구현했다.

돌아보면서

팀장으로 프로젝트의 많은 부분에 참여를 했고 서로 코드 리뷰를 했지만, 아직 WebSocket과 Stomp에 대한 부분은 이해가 부족하다고 많이 느꼈다. 그 외에도 멘토님께서 DB index, 쿼리 플랜 등 시도해봤으면 좋겠다고 말씀하신 것이 많이 있었는데 프로젝트 마감에 급급해서 해내지 못했다. 프로젝트는 끝났지만 나의 레포지토리에서 가다듬고 발전시켜야겠다.