싸리질러 🎤🎵

Notion

https://www.notion.so/7e19bc36f9f54413b33dc1a2f0d3ef46

프로젝트 산출물 모음 zip : https://cobalt-time-afa.notion.site/ba6a3798bcc6430cb031a28cf3b69089?v=79113827ed244f4bb68b8f7cc45da991

프로젝트명 : 싸리질러(ssarijileo)

팀원 : 길상욱, 김명준, 김소윤, 김태학, 이수민, 서예지

프로젝트 기간 : 2023.01.03 ~ 2021.02.17

프로젝트 소개 : 본 프로젝트는 webRTC를 활용해 온라인 화상 노래방 서비스를 제공하는 웹 사이트 제작을 목적으로 한다.

개발환경

Back-end

Front-end

DB

Dev-Ops

협업 tool

주요기능

• 소셜 로그인
• webRTC와 web Audio API를 활용한 실시간 화상 노래방 환경 제공
• 3가지 노래방 모드
  • 일반 노래방
    • 예약한 노래에 대한 MR과 가사 제공
    • 녹화 기능
  • 가사 맞추기
    • 예약자와 청자의 화면 분기를 나눠서 제공
    • 예약자는 랜덤으로 배치된 가사를 보고 노래를 부름
    • 청자는 노래의 가사를 제공받고 예약자의 정답 여부에 대한 버튼 클릭
  • 퍼펙트 스코어
    • 푸리에 변환을 활용해 사용자의 노래 음정 표출
    • 실시간 음정 정확도를 스코어로 제공
• 자체 랭킹
• 노래 초성 검색
• 다크모드
• SSE를 활용한 실시간 알림
• SSR과 SEO 최적화 적용

화면구현

< 메인 페이지 >

비회원 - 라이트모드☀️🌞

비회원 - 다크모드🌑🌚

< 로그인 >

회원 - 라이트모드☀️🌞

회원 - 다크모드🌑🌚

< 인기차트 페이지 >

- 라이트모드☀️🌞

- 다크모드🌑🌚

< 마이뮤직 페이지 >

- 라이트모드☀️🌞

- 다크모드🌑🌚

< 노래자랑 페이지 >

- 라이트모드☀️🌞

- 다크모드🌑🌚

< 친구요청 - SSE >

< 노래방 >

- 일반노래방

- 퍼펙트스코어

- 가사맞추기

노래 부르는 참가자

일반 참가자

< 녹화 >

- 녹화모드

- 녹화 게시글 등록

< 시스템 아키텍처 >