부스트캠프에서는 월요일마다 "기술 공유"를 진행하여, 원하는 주제로 발표하고 공유하는 시간을 가졌습니다. 이 시간이 매우 유익했지만, 발표를 준비하고 참여하는 시간이 한정적이라고 느꼈습니다.
"시간에 구애받지 않고 누구나 지식을 나눌 수 있는 플랫폼이 있다면 어떨까?"
"각자의 전문성과 경험을 더욱 자유롭게 공유할 수 있다면 좋지 않을까?"
1️⃣ 실시간으로 발표자와 참여자가 즉각적인 피드백과 질문이 가능한 양방향 소통 환경
2️⃣ 모든 참여자가 카메라, 마이크, 화면 공유를 제어하고 활용할 수 있는 환경
3️⃣ 부스트캠프의 모든 캠퍼들이 동시에 접속할 수 있는 안정적인 환경
최대한 많은 인원을 안정적으로 수용하고, 참가자 간 상호작용을 원활히 하기위해 다음과 같은 핵심 기술을 선택하였습니다.
- 통신 지연 시간이 적고 별도의 플러그인 없이 사용할 수 있는 WebRTC
- 선택적으로 스트림에 대한 수신을 결정하여 부하를 관리할 수 있는 SFU 구조
- 세밀한 로직을 직접 설계할 수 있고, 스트림에 대한 로우 레벨의 제어가 가능한 MediaSoup
- 원하는 만큼 많은 인원을 수용할 수 있어요.
- 마이크, 카메라, 화면 공유를 끄고 킬 수 있어요.
- 참가자가 많아지면 페이지네이션이 가능해요.
- 크게 보고 싶은 화면을 클릭해서 고정할 수 있어요.
- 발표자는 원할 때 티클을 종료할 수 있어요.
- 개설된 티클 목록을 확인할 수 있어요.
- 최신순, 오래된순, 신청자순으로 정렬하여 볼 수 있어요.
- 진행 예정인 티클과 종료된 티클을 필터링하여 볼 수 있어요.
- 무한 스크롤로 티클 목록을 빠르게 로딩해요.
- 티클을 소개하기 위한 필수적인 정보를 입력하여 게시할 수 있어요.
- 각 입력에 대해 정확한 유효성 검증이 적용돼요.
- 진행 예정인 티클과 종료된 티클을 필터링하여 볼 수 있어요.
- 개설한 티클에 대해 신청자 목록을 확인할 수 있어요.
- 티클 시작하기 또는 티클 참여하기를 통해 실시간 지식 공유에 접속할 수 있어요.
- 실시간 티클을 진행하면서 AI 음성 요약 버튼으로 녹음을 시작할 수 있어요.
- 티클이 종료되면 대시보드에서 요약본을 확인할 수 있어요.
TICLE 프로젝트의 핵심 기술인 'WebRTC'와 'Mediasoup'에 대해 5명 팀원 모두가 학습 정리를 진행하였습니다.
최대한 많은 유저가 들어와 화상 서비스를 이용하는 것을 목적으로 하는 만큼 소켓 이벤트, 기존 할당된 자원에 대한 관리를 진행하며 최대한 적은 자원으로 나은 환경을 제공하기 위해 최적화를 진행하였습니다.
비슷하게 '생긴' 세가지 공통 컴포넌트를 구현하면서 컴포넌트 분리와 통합의 기준에 대해 고찰했습니다. 결국 '좋은 컴포넌트'란 결국 '사용하기 편한' 컴포넌트여야 한다는 결론을 내렸습니다.
Tanstack Router를 활용해 탭 기반 대시보드를 구현하기 위해 여러 라우팅 방식을 검토하여 pathless route를 활용한 중첩 라우팅 구조를 채택했습니다.
로그인이 필요한 페이지 접근 시 사용자 경험을 개선하기 위해, 로그인 완료 후 원래 접속하려던 페이지로 자연스럽게 돌아가도록 구현했습니다. 이 과정에서 발생한 인증 상태 확인과 페이지 리다이렉션의 타이밍 문제를 Tanstack Router의 beforeLoad 옵션으로 해결하여, 더 나은 인증 플로우를 구축할 수 있었습니다.
nestjs에서 response 형식을 어떻게 통일할 수 있을까? 인증은 어떤곳에서 처리해야 할까? Middleware vs Guard vs Interceptor vs Pipe를 비교해 보았습니다.
로그인 성공 후 JWT를 쿠키에 넣은 뒤 redirection을 하여 클라이언트에서 쿠키를 조작할 수 없었습니다. 클라이언트 단일로 로그아웃이 불가능하여 쿠키 옵션에 대해 공부하며 로그아웃 기능을 구현했습니다.
강의 AI 요약 기능을 위하여 회의실의 음성을 저장해야합니다 mediasoup의 transport에 대해 간단히 학습하고 ffmpeg을 활용하여 음성저장 기능을 구현하였습니다.
네이버 클라우드 플랫폼의 Object Storage 업로드 부터 api 연결까지 정리해 보았습니다.
| 분야 | 기술 |
|---|---|
| 공통 |   |
| 프론트엔드 |    |
| 백엔드 |    |
| 데브옵스 |    |
| 지석호 | 심은서 | 노종빈 | 이지은 | 황성하 |
 |
 |
 |
 |
 |
| @seoko97 | @simeunseo | @begong313 | @Jieun1ee | @Fixtar |
| Web FE·BE | Web FE | Web BE | Web BE | Web BE |