[DISMU] WebSocket을 활용한 공용 플레이리스트 구현 (nest, next)
[DISMU] WebSocket을 활용한 공용 플레이리스트 구현 (nest, next)
👋 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 글을 진짜 오랜만에 올리게 되었는데요. 최근에 여러 프로젝트를 제작하면서 개인 공부에 집중하다 보니 블로그 작성하는 주기가 조금
blog.juyear.dev
이전 글 읽으러 가기!
👋 소개
안녕하세요! 대학생 개발자 주이어입니다.
오늘은 제가 최근에 제작하여 내부 테스트를 진행중인 DISMU 프로젝트에 대해서 간단히 소개하고 기능 및 사용 기술도 같이 소개해 드리려고 합니다.
그럼 바로 시작하도록 하겠습니다.
🛠️ 기술 스택
- Frontend : Next.js, ts, html, css
- 기본적인 웹사이트 제작 및 UI 구현 - Backend : NestJS, Python
- NestJS: API 중앙화 및 Next.js와 직접적인 통신
- Python : discord bot 제작 FastAPI 서버 구축 - DataBase : PostgreSQL
- 데이터베이스 설계 및 CRUD 작업 수행 - ORM : Prisma
- NestJS에서 DB를 효율적이고 안전하게 다루기 위해서 사용 - API : Discord Oauth
- discord 계정으로 간편하게 로그인할 수 있도록 사용 - Cloud / Storage : Firebase Storage
- 사용자가 업로드한 노래 및 사진 파일을 저장하기 위해 사용 - Server : Vercel, Railway
- Vercel : 프론트 배포용
- Railway : 백엔드 및 데이터베이스 배포용 - 기타
- Uvicorn : FastAPI 서버 실행에 사용
- FFmpeg : 노래 인코딩 및 처리에 사용
🧩 기능 및 페이지 소개
1. 🏠 메인 페이지
먼저 사이트를 접속하면 가장 먼저 나오는 메인 페이지 입니다.
(현재 친구들과 내부 테스트를 진행중이기 때문에, 문제가 될만한 사진은 가려둔 상태입니다.)
디자인은 pinterest와 spotify플랫폼을 참고하여 제작하였습니다.
가장 위에는 인기순으로 아티스트가 나오며, 그 다음으로 인기 노래와 최신 노래가 리스트 형식으로 보여집니다.
2. 🔑 디스코드 로그인
오른쪽 위에 있는 로그인 버튼을 클릭하면, 디스코드 계정으로 간편하게 로그인할 수 있으며,
로그인이 완료되면 오른쪽 사진과 같이 디스코드 프로필과 함께 로그아웃 버튼이 활성화 됩니다.
사용자 정보는 discord_oauth에서 얻은 session정보를 활용하여 api 요청을 통해 가져왔습니다.
3. 🌐 실시간 통신 기반의 플레이리스트
가장 핵심 기능 중 하나인 실시간 통신 기반의 서버 플레이리스트 입니다.
현재 서버 음성통화방에 참여되어 있다면 누구나 수정할 수 있으며,
websocket 기반으로 수정되는 플레이리스트가 실시간으로 공유됩니다.
기존 UI의 부재로 수정 및 삭제가 불편했던 노래봇의 단점을 보완한 부분이었습니다.
기타 기능
- 음성통화방에 참여하고 있지 않다면 수정 및 삭제 불가 (discord api로 확인)
- 노래 썸네일에 360도 돌아가는 애니메이션을 추가하여 음반 형식의 느낌을 줌
- 추가한 노래에 사용자 썸네일을 넣어 누가 추가했는지 알아볼 수 있는 UI 제공
- 메인 화면 뿐만 아니라 모든 화면에 플레이리스트를 넣어 접근성을 높임
4. 👤 프로필 페이지
2번에 소개했던 로그인 후 나오는 사용자 썸네일을 클릭하면 위와 같은 프로필 페이지로 이동됩니다.
자신이 업로드한 노래와 "좋아요"를 누른 노래, "좋아요"를 누른 아티스트를 확인할 수 있습니다.
5. 🎵 노래 업로드
프로필 페이지에 있는 "곡 업로드" 버튼을 클릭하면 나오는 modal 입니다.
노래 업로드에 필요한 노래 커버, 노래 파일, 노래 제목을 입력받으며, Firebase Storage와 PostgreSQL에 저장됩니다.
Firebase Storage에 직접적인 파일이 저장되며, PostgreSQL에는 저장된 파일의 URL이 저장됩니다.
6. 🎶 노래 페이지 & 아티스트 페이지
위 두 페이지는 각각 노래 상세 페이지, 아티스트 상세 페이지 입니다.
두 페이지 모두 하트 기능을 제공하며, 클릭할 경우 프로필 페이지에서 "좋아요"누른 노래 및 아티스트에서 확인할 수 있습니다.
7. 🤖 디스코드 봇 노래 재생
노래는 DISMU 노래 봇에서 재생되며, 플레이리스트에 노래를 추가하면 자동으로 초대되어 노래가 재생됩니다.
bot의 경우 Python으로 제작되었으며, nest서버와 통신 및 프론트 렌더링 정보 공유 등을 위해서 FastAPI로 서버를 구축하였습니다.
기타. 🗄️ 데이터베이스 사진
데이터베이스는 위와 같이 구현되어 있습니다.
- Artist : 아티스트 정보를 저장 (Song 데이터와 1:m 구조)
- User : 유저 정보를 저장 (Song 데이터와 n:m 구조, Artist 데이터와 n:m 구조)
- Song : 노래 정보를 저장
- Playlist : 각 서버 플레이리스트 정보를 저장 (PlaylistSong 데이터와 1:m 구조)
- PlaylistSong : 플레이리스트에 추가된 각 노래 정보를 저장
각 테이블의 상세 정보를 적어보았습니다.
🚀 추후 목표 및 마무리
글 제목에도 넣었듯이 UI를 제공하는 디스코드 노래봇 뿐만 아니라 AI 노래 플랫폼까지 개발하는 것이 현재의 목표입니다.
최근에 AI의 발전으로 노래마저 AI가 만들어주고 있고, 이를 이용한 컨텐츠가 생각보다 활발하게 이루어지고 있습니다.
하지만 이를 위한 공유 플랫폼이나, 저작권 보호와 관련된 서비스가 아직 없는 것으로 보였고, 이 부분을 DISMU가 대신할 수 있지 않을까 생각하였습니다.
물론 이건 현재의 제 실력으로 만들기에는 서버 최적화, 대규모 트래픽 처리, 서버 비용과 같은 물리적인 문제점 등 아직 부족한 점이 많기에 쉽지 않을 것이라고 생각하고 있습니다.
하지만 이러한 생각을 통해 앞으로 어느 방향으로 더 성장해 나가야 하는지 확인할 수 있고, 이렇게 현재 시장을 분석한 프로젝트를 계속해서 만들다 보면, 제 실력이 성장했을 때 결국은 성과를 내는 프로젝트를 만들 수 있을 것이라고 생각하고 있습니다.
자, 지금까지 DISMU 프로젝트에 대해서 소개를 진행하였습니다.
내부 배포가 아닌 실제 배포까지 이루어질지는 확신할 수 없지만, 위에서 말했듯 이번 프로젝트를 통해 저는 조금 더 성장했다고 생각하고 있습니다.
지금까지 제 프로젝트에 관심을 가지고 읽어주신 분들 모두 감사드리며, 저는 다음 글로 또 찾아오도록 하겠습니다.
KYT CODING COMMUNITY Discord 서버에 가입하세요!
Discord에서 KYT CODING COMMUNITY 커뮤니티를 확인하세요. 24명과 어울리며 무료 음성 및 텍스트 채팅을 즐기세요.
discord.com
KYT CODING COMMUNITY 가입하기!
'[Projects] > [DISMU]' 카테고리의 다른 글
| [DISMU] WebSocket을 활용한 공용 플레이리스트 구현 (nest, next) (2) | 2025.10.05 |
|---|
