boostcampwm2023 / web07-gbs

금쪽이들의 방송 플랫폼 GBS

🔎 프로젝트 소개

GBS에서는 아프리카 TV, 트위치와 같이 실시간으로 인터넷 방송을 하거나 볼 수 있습니다.

스트리머는 OBS를 사용해서 GBS로 실시간 방송을 송출할 수 있습니다.

또한, 시청자는 방송을 보면서 채팅을 통해 다른 사람들과 실시간으로 소통할 수 있습니다.

📺 프로젝트 주소

https://gbs-live.site/

👨‍👩‍👧‍👦 팀 소개

👑 J136 정명희	J011 김경근	J158 최상원	J164 한원준
BE	BE	FE	FE
@jmhee28	@kkg5	@ChoiSangwon	@Novrule

🎤 발표 영상

⚒️ 주요 기능

메인 화면에서 현재 진행중인 방송을 볼 수 있어요!

네이버 및 구글 아이디로 간편 로그인을 할 수 있어요!

원하는 방송에 들어가 채팅을 통해 다른 시청자들과 소통할 수 있어요!

방송을 하고 싶다면 방송 비밀 키와 OBS를 연동해 GBS로 방송을 송출할 수 있어요!

🔥 기술적 도전

⏺ Storybook 적용

• 컴포넌트를 보다 잘 관리하기 위해서 Storybook을 적용했습니다.
• Storybook을 사용하면서 의존성이 낮고 재사용성이 좋은 컴포넌트를 구현하기 위해 고민 할 수 있었습니다.

⏺ 다크모드 구현

• 보다 나은 사용자 경험을 위해서 사이트 전체에 대해 다크모드를 적용했습니다.
• 다크모드를 적용하기 위해 ThemeProvider 및 Recoil를 사용하며, 전역 상태 관리에 대해 알 수 있었습니다.

⏺ 스트리밍 서비스 구현

• 스트리밍 서비스를 구현하며 RTMP, HLS 프로토콜에 대해 배울 수 있었습니다.

⏺ 간편 로그인 구현

• 사용자가 더 쉽고 빠르게 서비스에 접근할 수 있도록 OAuth를 이용한 간편 로그인을 적용했습니다.
• 간편 로그인을 구현하는 과정에서 oAuth의 동작 방식에 대해 공부할 수 있었습니다.
• 쿠키를 통한 로그인 검증을 구현하며, httpOnly나 sameSite와 같은 쿠키의 속성에 대해 배울 수 있었습니다.

⏺ 실시간 채팅 구현

• 실시간 채팅을 구현하며, Socket.io와 WebSocket에 대해 학습할 수 있었습니다.
• Clova AI의 비속어 순화 기능을 실시간 채팅에 적용해보며, Clova AI의 동작 및 사용 방법에 대해 알 수 있었습니다.

⚙️ 기술 스택

더 자세한 내용을 보고 싶으시다면 금쪽이들의 wiki나 금쪽이들의 notion를 참고해주세요!