기획

📌 프로젝트 개요

• 프로젝트명: Cam’ON
• 목표: 캠퍼들이 출석 관리와 소통을 할 수 있는 실시간 스트리밍 기반의 온라인 커뮤니티 플랫폼을 제공하여 원활한 네트워킹을 돕습니다.

👥 출석부 관리부터 소통까지! 네부캠 캠퍼들을 위한 온라인 학습 및 네트워킹 플랫폼.**

🔍 문제 정의

• 캠퍼들은 온라인 베이스캠프가 나누어져 있어서 다양한 자료와 링크를 관리해야 하는 불편함이 있으며, 출석 확인과 소통을 원활히 하는 데 어려움을 겪고 있습니다.
• 소통을 위해 라운지라는 공간이 존재 하지만 zoom 이라는 플랫폼 특성 상 부담을 느껴 많은 캠퍼들이 잘 사용하고 있지 않습니다.

🎯 타겟 사용자

• 부스트캠프 캠퍼: 온라인 학습 환경에서 편리하게 출석을 관리하고, 캠퍼들 간 원활한 소통을 원하는 사용자를 타겟으로 합니다.

---

🎯 서비스 목표

• 네부캠 캠퍼들이 출석을 쉽게 관리하고 소통할 수 있는 커뮤니티 공간 제공
• 사용자 친화적 UI/UX를 통해 캠퍼들이 적극적으로 참여할 수 있는 공간 조성

---

⭐ 핵심 기능

📺 실시간 방송 및 출석 관리

• 캠퍼들이 ‘체크인’ 버튼을 누르면 방송 시작, ‘체크아웃’ 버튼을 누르면 방송 종료가 됩니다.
• 방송 시작과 종료 시간을 기반으로 출석 시간을 기록하며, 이를 각 캠퍼들이 보고 출석 상태를 쉽게 확인할 수 있습니다.

💬 네트워킹 및 소통

• 캠퍼들이 서로의 방송을 볼 수 있으며, 각 방송에서 채팅을 통해 실시간으로 소통할 수 있습니다.
• 방송 시청 중 필요한 경우 캠퍼의 프로필과 소셜 링크를 볼 수 있어 추가적인 네트워킹이 가능합니다.

---

📄 페이지 구성

🏠 홈페이지

• 방송 미리보기 창이 나열되며 방송 상태, 캠퍼 ID, 시청자 수, 분야 등의 정보를 제공합니다.
• 캠퍼는 특정 캠퍼의 방송을 검색하거나 분야별 필터링이 가능합니다.
• 캠퍼는 체크인 체크아웃 버튼을 통해 방송을 시작하고 중단할 수 있습니다.
• 방송이 시작되면 방송 설정 pip 화면을 통해 현재 방송 제목과 화면, 캠, 음성 상태를 조절할 수 있습니다.

📹 개인 방송 페이지

• 캠퍼는 실시간으로 송출되는 방송을 시청할 수 있습니다. 방송 제목, 분야, 캠퍼 정보 등이 표시됩니다.
• 화면 및 화상 공유 기능을 사용하여 현재 캠퍼가 어떤 활동을 하는지 보여줄 수 있습니다.
• 캠퍼들은 채팅창을 통해 방송 중 소통할 수 있습니다.

🧑‍💼 개인 정보 페이지 (마이페이지)

• 캠퍼의 기본 정보, 출석 상황, 소셜 링크가 제공되며, 필요 시 정보를 업데이트할 수 있습니다.
• 캠퍼는 출석 현황을 개인 정보 페이지에서 확인할 수 있습니다.

---

🛠️ 기술 스택

🖥️ 프론트엔드

• React
• Typescript
• Tailwind
• WebRTC

🔗 백엔드

• NestJS
• Typescript
• WebRTC

💾 데이터베이스

• MySQL

---

📈 확장 목표

• 타겟 확장 : 부스트 캠프 운영진 및 마스터
  • 관리자 페이지를 추가하여 부스트캠프 운영진이 캠퍼들의 출석을 관리 및 감독할 수 있음
  • 미션, 활동 안내 사항 또한 한 번에 모아 볼 수 있는 공간 제공
  • 월, 수에 존재하는 마스터 클래스 또한 서비스에서 진행할 수 있도록 제공
• AI 도입
  • 채팅 비속어 필터링
  • 인물 감지 시스템 : 코어타임 참석 여부 확인 및 화상 공유 배경 설정