내배캠 최종 프로젝트

Period : 2024. 01. 04 ~ 2024. 02. 08

Focus :

화상회의

메타버스 환경

화면공유

scrum board

GNB

AWS 배포

Skill :

next.js

typescript

websocket.io

webRTC

react-query

react-hook-form

zustand

styled-components

framer

mediasoup

phaser3

react-dnd

aws ec2

Pixtudy

프로젝트-소개 📜 프로젝트 소개

68747470733a2f2f7465616d7370617274612e6e6f74696f6e2e736974652f696d6167652f687474707325334125324625324670726f642d66696c65732d7365637572652e73332e75732d776573742d322e616d617a6f6e6177732e636f6d25324638336337356133392d336162612d346261342d61 (1)

프로젝트 계기

기존 메타버스 화상회의 플랫폼에서 청취자는 발표자가 제공하는 일방적인 화면 외에 추가 정보를 탐색하거나 참조할 수 없으며, 발표자는 청취자의 다양한 환경에 맞춰서 준비해야 하는 문제점이 있다. 이러한 문제점을 해결하기 위해서 프로젝트를 시작하였다.

프로젝트 설명

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

프로젝트 기간

전체 기간: '24.01.04 ~ '24.02.08. (5주)

주차별 진행사항
1주차: 프로젝트 기획 및 기술검증
2주차: MVP 모델 기능 개발
3주차: 중간발표 및 MVP 모델 완성
4주차: 유저테스트 진행 및 MVP 이후 기능 개발
5주차: 버그/오류 개선 및 최적화 진행

아키텍쳐 🏗 아키텍쳐

기술스택 🛠️ 기술스택

공통 및 배포

Yarn, Git, Github, Vercel, AWS

Frontend

Typescript, NextJS, React Hook Form, zustand, Styled Components, Framer, Socket.io, Mediasoup, webRTC, phaser, joyride, react-dnd

Backend

NodeJs, Express.js, Socket.io, Mediasoup, webRTC

BaaS

Supabase

주요-기술 🍀 주요 기술

Pixtudy에서 제공하는 주요 기술

가상환경 플랫폼
- Phaser 로 맵 및 게임 환경을 만들고, 오픈소스 메타버스 플랫폼인 게더타운의 에셋을 이용해 가상환경 플랫폼 구현.
- 사용자들의 실시간 움직임을 받거나 Space Chat, DM 등 소통환경 조성
화상 회의
- 같은 가상환경 스페이스 내에서 WebRTC 기술을 이용하여 실시간 다중 영상(최대 4개), 카메라, 마이크 공유
- 다중 영상 공유 시 시청자는 원하는 레이아웃으로 시청
- 특정 영상 축소 / 확대 가능
스크럼 보드
- 각 스페이스 별 스크럼 보드가 있어 회의 진행 중 바로 작성하여 협업 및 아이디어 공유

기술적-의사결정👨‍⚖️ 기술적 의사결정

Pixtudy 개발 과정에서 마주친 여러 선택지들과 그에 따른 결정 과정

JavaScript Superset Language

Typescript

휴먼에러를 최소화, 런타임 이전에 컴파일 단계에서 미리 에러를 캐치, 협업할 때 공통된 타입을 사용하여 프로젝트 진행함에 있어 서로 미구현 상태에서도 빠른 진행이 가능함을 장점을 두고 Typescript를 선택하였다.

State Management Libraries

React-Query

데이터 패칭, 캐싱, 동기화, 그리고 서버 상태 업데이트를 더욱 용이하게 만들어주는 라이브러리로 프로젝트의 유지 보수를 하기 쉽고, 새로운 기능을 쉽게 구축할 수 있는 장점이 있고, 개발자가 직접 구현하기 번거로운 부분을 쉽게 처리할 수 있기 때문에 선택하였다.

Zustand

Zustand는 React 애플리케이션을 위한 상태 관리 라이브러리로, 간결하고 직관적인 API를 제공하여 상태 관리를 간편하게 만든다. 작은 코드 풋프린트로 애플리케이션의 상태를 쉽게 설정, 업데이트 및 구독할 수 있으며, Redux나 MobX 같은 전통적인 상태 관리 라이브러리보다 더 간단하고 유연한 방식으로 상태를 관리할 수 있습니다. 초기에는 React-query, Redux RTK를 사용했으나 RTK에는 Redux Query가 있는데 React-query를 사용하는게 하나는 불필요한 종속성을 추가한다고 판단하여 복잡한 전역 상태 관리가 필요하지 않기에 React-query와 Zustand조합으로 바꾸었다.

Framework

NextJS

프로젝트의 특성상 클라이언트 사이드 렌더링(CSR)을 주로 사용하면서도, NextJs의 다양한 기능, 특히 SEO, 이미지 최적화, 그리고 성능 향상을 위해 랜딩페이지에 SSG를 사용했다. 이를 통해 빠른 로딩 시간을 유지하면서도 CSR의 동적인 사용자 경험도 보존할 수 있었다. NextJs는 미들웨어를 통해 로그인 여부에 따른 페이지 처리 접근을 제한할 수 있어, 보안과 사용자 권한 관리에 효과적이고 CSS-In-JS를 지원하는 pages router의 선택은 안정성과 빠른 개발 속도를 달성하는데 중점을 두었다. 이러한 결정은 NextJS의 유연한 라우팅 시스템과 풍부한 기능 세트가 프로젝트의 요구 사항을 충족시키기 때문에 선택하였다.

Metaverse environment

Phaser

가상환경을 만들기 위해 Canvas를 사용해야하는데 프로젝트 기간상 canvas로 구현하기에는 짧은 시간이라 판단하고 Phaser3를 사용하게 되었다. Phaser3는 HTML5와 JavaScript 기반의 웹 기술을 사용하여 메타버스 환경을 쉽고 빠르게 구현할 수 있으며, WebGL과 Canvas 지원으로 고성능 2D 그래픽을 제공하고, 직관적인 학습 곡선과 활발한 커뮤니티 지원을 바탕으로 개발자 친화적인 환경을 제공한다.

Conference

Socket.IO

실시간 화상 회의를 위한 transport 연결, 가상환경 내 움직임 등 실시간 통신 기능을 구현하기 위한 선택으로, 웹소켓과 폴링을 결합하여 다양한 네트워크 환경에서도 안정적인 실시간 데이터 전송을 제공한다. 또한 사용 방법이 간단하고 서버와 클라이언트 간의 빠른 양방향 통신을 가능하기 때문에 선택하였다.

Mediasoup

실시간 화상 회의 기능이 필요하며 고화질 비디오 스트리밍, 저 지연성, 높은 동시 사용자 처리 능력이 요구된다. 그렇기 때문에 SFU 기술을 선택하여 위 요구사항을 해결하고자 했고, mediasoup은 러닝커브가 높은 편에도 불구하고 타 라이브러리보다 높은 성능의 SFU를 제공하고 앞서 필요한 기능들을 모두 처리할 수 있기 때문에 선택하였다.

Express

Database

supabase

Supabase는 Firebase alternative 라는 캐치프레이즈를 내건 만큼 다양한 기능을 제공하고 모든 기능이 firebase보다 편리하고 뛰어난 BaaS 플랫폼이다. 우리 서비스는 테이블 간 Join이 많이 필요하고 user flow 에서 예상되는 데이터 수정 및 추가가 많기 때문에 NoSQL 보다는 RDBMS가 적절하다 판단했다.

Styling and animation

Styled-Components

Next.js에서 권장하는 방식인 Tailwind는 클래스 기반 스타일링으로 빠른 개발이 가능하지만, 코드 가독성이 좋지 않고 팀원들 모두 비교적 사용경험이 적다는 단점이 있었다. 다른 스타일 방식들 중 Styled-Components는 컴포넌트 단위로 간편한 스타일링을 할 수 있으며, props를 통한 다양한 동적 스타일링 가능, 러닝 커브가 없다는 장점이 있다. 프로젝트에서 다른 부분의 러닝 커브가 높기 때문에 좀 더 익숙하게 개발할 수 있고 코드 가독성이 좋은 Styled-Components를 사용하기로 결정하였다.

Framer-motion

Framer-motion은 컴포넌트 기반의 애니메이션 라이브러리로, 선언적 애니메이션을 통한 뛰어난 코드 가독성과 간단하고 직관적인 API를 통해 간편하게 애니메이션을 추가할 수 있으며, 또한, React 환경에서도 스크롤 이벤트 등 여러 애니메이션을 구현할 수 있기 때문에 선택하였다.

프로젝트 기여 내용

메타버스 환경 구현

프로젝트 기한 제약으로 canvas대신 2d 게임 엔진 선택
2d 게임 엔진 중에 가장 활발히 업데이트되고 커뮤니티가 큰 Phaser3 라이브러리로 메타버스 환경 구현
멀티플레이 기능은 서버와 양방향 통신을 위해 socket.io로 구현

실시간 양방향 채팅 서비스 구현

메타버스 환경 내 글로벌 채팅 구현

백엔드 서버와 양방향 통신을 위해 socket.io로 구현

메타버스 환경 내 DM 채팅 구현

Supabase의 RealTime을 이용하여 사용자간 1:1 DM 구현

협업 툴 구현(스크럼 보드)

기존 메타버스에 협업툴이 없어 다른 플렛폼에 의지해야하는 불편함 해소를 위한 기능
Github의 Project기능과 유사한 기능 구현
작성한 카드 드래그앤드랍으로 사용자 경험 개선
Supabase의 RealTime을 이용한 실시간 반영 구현
프로젝트 관리와 협업의 효율성 향상

RTK에서 Zustand로 마이그레이션

마이그레이션은 보일러플레이트 감소를 위해 진행
보일러플레이트 감소로 개발 생산성 증대 및 코드 간소화로 로딩속도 최적화### 트러블슈팅

트러블슈팅

메타버스 내 입력 필드와 Phaser3 키 이벤트 충돌 문제 해결

input 및 textarea 요소에 포커스 시 Phaser3의 키 이벤트 비활성화
input 및 textarea 요소에서 포커스가 사라질 때(blur) Phaser3의 키 이벤트 재활성화를 통해 입력 필드 사용 중 키 이벤트 충돌 방지

대시보드 페이징 로딩 시간

대시보드 페이지는 SSR을 통해서 배너 스페이스에 대한 정보와 해당 스페이스에 대한 유저 정보를 가져오기 때문에 매 요청마다 불필요한 서버 사이드 랜더링으로 인해 시간이 오래 걸리는 문제발생
SSG로 변경 후 배너 스페이스에 대한 정보만 가져오고 클라이언트가 해당 스페이스에 접속했는지에 대한 여부는 클라이언트 단에서 처리하여 로딩시간을 단축함.
초기 로딩 시간이 2초에서 0.4초대로 80%의 로딩시간을 개선함.

저에 대해 소개 합니다.

권 경열