📕 프로젝트 소개

---

프로젝트 개요

• 기간 : 24.01. ~ 24.02. 5주
• 인원 : FE 4명
• 한 줄 설명 : 유저 커스텀 레이아웃, 다중 화면 공유, 협업 툴이 사용 가능한 가상 환경 내 화상 회의 웹 앱
• 링크 : Github / Site / Figma

프로젝트 배경

기존 메타버스 화상 회의 플랫폼에서 청취자는 발표자가 제공하는 일방적인 화면 외 추가 정보를 탐색하거나 참조할 수 없으며, 발표자는 청취자의 다양한 환경에 맞춰서 준비해야 하는 문제점을 개선하고자 만들었다.

프로젝트 설명

Pixtudy는 발표자의 화면을 일방적으로 공유받던 청취자들이 자유롭게 자료를 탐색하고, 발표자는 청취자의 환경에 구애받지 않고 효율적으로 자료를 공유할 수 있는 화상회의 플랫폼을 목표로 한다. Phaser와 게더 타운의 에셋을 활용한 가상환경 구축, WebRTC를 이용한 실시간 다중 영상 공유, 스크럼 보드를 통한 협업 지원 등의 기능을 통해 사용자들에게 새로운 형태의 메타버스 기반 화상 회의 경험을 제공한다.

프로젝트 기능

1. 실시간 가상 환경 플랫폼
   1. Phaser3 + 게더 타운 에셋을 이용한 가상 환경 플랫폼 구현
   2. Socket을 통한 실시간 멀티 플레이 환경 구성
2. 화상 회의 채팅 기능
   1. Mediasoup을 이용한 WebRTC 기반 SFU 방식 적용 구현
   2. 실시간 다중 화면 (최대 4개), 웹 캠, 마이크 공유를 이용한 실시간 화상 회의 구현
   3. 다중 화면 공유 시 시청자가 원하는 레이아웃, 특정 화면 확대 / 축소 기능 구현
3. 스크럼 보드를 통합 협업 툴 기능 제공
   1. Supabase RealTime을 이용한 실시간 서비스 제공
   2. 재사용 가능한 컴포넌트로 별도 페이지 및 가상 환경 (스페이스) 내부에서 이용 가능
   3. 드래그 앤 드랍 기능을 통한 사용자 경험 향상
4. 코드 컨벤션을 통한 프로젝트 관리
   1. ESLint를 활용하여 코드의 일관성 유지
   2. 코드 컨벤션 정립을 통합 프로젝트 관리

아키텍쳐

기술 스택

• 공통 및 배포 : Yarn, Git, GitHub, Vercel, AWS
• Front-End : TypeScript, Next JS, Zustand, React-Query, React-Hook-Form, Styled-Components, Framer, Socket.IO, Mediasoup, Phaser3, Joyride, React-dnd
• Back-End : Node JS, Express JS, Socket.IO, Mediasoup
• BasS : Supabase

✅ 주요 구현 사항

---

WebRTC 기술을 활용한 화상 회의 기능 구현

• WebRTC 기술 기반 화면 공유(최대 4개), 웹 캠, 마이크 공유 기능 구현

• N:M 화상회의를 Mesh 방식으로 구현 시 클라이언트 부담 ⬆️

  → SFU 방식을 이용한 Mediasoup을 이용하여 클라이언트 부담 ⬇️, 저지연성, 실시간성 확보

Space CRUD

• Supabase, React-Hook-Form, Zustand를 이용하여 Space CRUD 구현
• 스페이스 이름, 설명 길이 제한 등 유효성 검사 기능 구현

Dashboard 페이지

• SSG 방식을 이용하여 배너 슬라이드 쇼 구현
• Swiper을 이용하여 슬라이드 쇼 UX 향상

Home 페이지 스크롤 애니메이션 구현

• 컴포넌트 마운트 시점에 스크롤 임계값 계산하고, 브라우저 창 크기가 변경될 때마다 임계값 재계산
• IntersectionObserver를 이용하여 사용자의 뷰포트에 들어올 때 섹션 식별

🛠️ 트러블 슈팅

---

SSR → SSG 방식 변경으로 로딩 속도 개선 ( 2000ms → 40ms, 80%감소)

• SSR 방식으로 스페이스 정보 + 유저 스페이스 참여 여부 데이터 패칭 → 페이지 로딩 속도 저하 (2000ms)

• SSG 방식으로 스페이스 정보 패칭 + 클라이언트 참여 여부 처리 해결 → 페이지 로딩 속도 개선 (40ms)

중복 접속 방지 기능 구현

• 중복 접속 시 가상 환경을 떠났음에도 불구하고 그대로 남아있는 현상 및 여러 사용자가 가상 환경 플랫폼 내 존재하는 문제 발생
• 최초 socket 연결 시 서버 측에서 중복 접속 여부 확인
• 중복 접속 사용자는 리디렉션을 통하여 중복 접속 방지 기능 구현

싱글톤 패턴으로 멀티 Socket 문제 해결

• 화면 공유를 중단해도 다른 사용자에게 여전히 검은색 화면으로 공유되고 있는 문제 발생

  → 멀티 Socket 인스턴스로 화면 공유, 중단 이벤트가 제대로 동작하지 않는 것이 원인

• Zustand를 이용하여 싱글톤 패턴 구현으로 멀티 Socket 인스턴스 문제 해결

이벤트 위임을 통한 효율적 이벤트 처리

• 가상 환경 내 특정 키 값(’R’)에 대한 이벤트 탐지로 인한 input, textarea에 입력이 제대로 작동하지 않는 문제 발생
• 부모 요소에 focus, blur 이벤트 위임을 통해 효율적 문제 해결