💻 부스트 캠프 출석 관리 | 🤝 실시간 네트워킹 | 👥 네부캠 All-in-One
1️⃣ 부스트캠프의 베이스캠프가 슬랙, 부스트코스, zoom 등 여러 개로 나누어져 있어서 다양한 링크와 출석 관리에 불편함을 느꼈습니다.
2️⃣ 소통을 위해 zoom에 "라운지"라는 공간이 존재하지만 많은 캠퍼들이 잘 사용하지 않아서 캠퍼들 간의 실시간 소통이 어려웠습니다.
이런 불편함을 해소하기 위해 하나의 플랫폼에서 출석 관리부터 소통, 그리고 링크 및 자료 아카이브까지 한 번에 관리할 수 있는 서비스를 기획하게 되었습니다.
1️⃣ 캠퍼들은 코어타임 시간에 실시간 방송을 키면서 부스트 캠프 활동에 참여할 수 있습니다.
2️⃣ 화면공유 on/off, 캠 on/off, 마이크 on/off 기능으로 캠퍼들이 보다 자유로운 방송을 할 수 있도록 돕습니다.
3️⃣ 별도의 송출 소프트웨어 없이 서비스 내에서 방송 송출과 화면 배치 과정이 자동으로 이루어져 캠퍼들이 부담없이 방송할 수 있는 환경을 제공합니다.
4️⃣ 캠퍼들은 서로의 방송을 시청하면서 실시간으로 서로의 학습 경험을 공유할 수 있습니다.
1️⃣ 캠퍼들은 채팅을 통해 실시간으로 소통할 수 있습니다.
2️⃣ 방송 송출창과 시청창 모두 채팅 기능을 제공하여 방송중인 캠퍼와 시청하는 캠퍼 모두 자유롭게 지식을 공유하고 유대감을 쌓을 수 있습니다.
1️⃣ 실시간 녹화 기능을 제공하여 코어타임 학습 중 기억하고 싶은 순간을 기록할 수 있습니다.
2️⃣ 방송 중 기록한 녹화본들은 출석 내역에서 확인하며 스스로의 학습 경험을 돌아볼 수 있습니다.
1️⃣ 캠퍼는 마이페이지에서 본인의 출석 내역을 한 눈에 확인할 수 있습니다.
2️⃣ 코어타임 시간 내에 송출되는 방송 시간을 기반으로 자동으로 캠퍼들의 출석이 관리됩니다.
1️⃣ 캠퍼들은 메인페이지에서 여러개로 나누어진 베이스캠프를 한 번에 모아서 관리할 수 있습니다.
2️⃣ 자유롭게 하이퍼링크를 등록하여 맞춤형 온라인 베이스 캠프를 구성할 수 있습니다.
- WebRTC와 Mediasoup을 활용해 실시간 송출 및 시청 환경을 구축
- 브라우저에서 간편하게 방송을 시작하고 종료할 수 있도록 UI/UX 개선
- Canvas API를 활용해 방송 화면을 실시간으로 커스터마이징
- 두 개의 스트림을 합친 Canvas를 캡처한 스트림을 송출하는 방식
- WebRTC 스트림의 화질을 상황에 따라 조정하여 최적의 사용자 경험을 제공
- 해상도, 비트레이트, 프레임레이트를 유동적으로 설정해 화질 변경
- Mediasoup과 FFmpeg을 활용하여 실시간 스트리밍 중 썸네일을 생성하고, 녹화본을 저장
- 녹화된 자료는 Object Storage에 저장하고, 스트리밍 종료 후에도 확인 가능
🙇♀️ 프로젝트의 개발 일지에 대한 더 자세한 사항은 개발 일지 view All 및 위키를 참고해 주세요!
- 문제: WebM 영상을 HLS로 실시간 변환하면서 CPU 사용량이 급격히 증가해 스트리밍 품질 및 녹화 영상에 문제가 발생.
- 해결: 실시간 변환 대신 WebM 원본 저장 후, CPU 부하가 낮을 때 큐를 통해 순차적으로 HLS 변환을 수행.
- 문제: Chrome의 정책상 음소거되지 않은 영상은 사용자 상호작용(클릭, 탭 등)이 없으면 자동으로 재생되지 않음
- 해결: muted 속성을 사용해 초기에 음소거 상태로 비디오를 자동 재생하고, 사용자에게 음소거 해제 버튼을 제공하여 수동으로 소리를 켤 수 있도록 구현.
- 문제: GitHub Actions에서 Docker 이미지를 빌드하는 데 시간이 과도하게 소요됨
- 해결: BuildKit을 활성화하고 type=gha로 Docker 레이어 캐시를 저장 및 재사용하여 빌드 시간 단축
🙇♀️ 프로젝트의 트러블 슈팅에 대한 더 자세한 사항은 트러블 슈팅 view All 및 위키를 참고해 주세요!
- 고민 이유: 기존 Git Flow 전략에서 Release 브랜치를 사용하는 것이 효율적인지 의문. CI/CD 자동화 과정에서 불필요한 브랜치 관리로 복잡성이 증가할 우려.
- 결론: Release 브랜치를 생략하고
develop브랜치에서 주요 검증 후main에 직접 배포하도록 결정.
- 고민 이유: Redis와 같은 영구 저장소 대신 인메모리를 사용하는 것이 적절한지 논의.
- 결론: 성능 최적화와 낮은 지연 시간을 위해 인메모리 방식을 채택.
🙇♀️ 프로젝트의 고민에 대한 더 자세한 사항은 고민 view All 및 위키를 참고해 주세요!
저희 서비스의 전반적인 흐름도를 확인 할 수 있습니다.
저희 서비스의 인프라 구축 환경을 한 눈에 보실 수 있습니다.
| 분야 | 기술 스택 |
|---|---|
| 공통 |    |
| FE |   |
| BE |     |
| 인프라 |     |
| 김광현 | 백지연 | 전희선 | 한승헌 |
|---|---|---|---|
 |
 |
 |
 |
| @g00hyun | @zero0205 | @huiseon37 | @seungheon123 |
| BE | FE | BE | BE |