Pixtudy

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

프로젝트 계기

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

프로젝트 설명

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

프로젝트 기간

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

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

서비스 둘러보기

픽스터디 배포 사이트

아키텍쳐 🏗 아키텍쳐

기술스택 🛠️ 기술스택

공통 및 배포

Frontend

Backend

BaaS

주요-기술 🍀 주요 기술

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

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

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 환경에서도 스크롤 이벤트 등 여러 애니메이션을 구현할 수 있기 때문에 선택하였다.

역할 및 개발내용

FrontEnd 프로젝트를 진행 하였으며 제가 맡은 역할은 메타버스 환경 구성과 메타버스 환경 내에 멀티 플레이, 메타버스 환경 내에 글로벌 채팅, DM, GNB, 그리고 ScrumBoard를 구현하였습니다.

개발내용

Phaser3를 사용한 메타버스 환경 구현

• 프로젝트 기간과 기술 제약을 고려하여 메타버스 환경언 Phaser3 라이브러리를 선택, 적용함으로써 메타버스 플랫폼 내에서 사용자 캐릭터의 이동, 맵 탐색, 오브젝트와 충돌 처리를 실시간으로 구현하였습니다. Socket.io와 Express서버를 구축하여 멀티플레이 환경을 구축, 사용자 간의 실시간 상호작용을 가능하게 하여 몰입감 있는 사용자 경험을 제공하였습니다. 이 과정을 통해 실시간 네트워크 통신 및 게임 엔진을 활용한 처리 능력을 향상 시킬 수 있었습니다.

socket.io를 활용한 실시간 채팅 구현

• socket.io를 활용하여 실시간 텍스트 채팅 기능을 구현함으로써, 음성채팅을 사용하지 않는 사용자들의 소통 편의성을 대폭 개선했습니다. 이 프로젝트는 특히 전체 채팅 데이터를 휘발성 메모리에 저장하는 전략을 채택하여, supabase의 저장 공간을 절약할 수 있었습니다. 이같은 접근은 실시간 웹 애플리케이션에서의 효율적인 데이터 관리를 배울 수 있었습니다.

Supabase RealTime을 이용한 DM 채팅 구현

• Supabase RealTime을 이용하여 DM채팅 기능을 개발하였고, 유저 간의 비공개 1:1대화를 지원합니다. 대화 데이터는 Supabase에 안전하게 저장되고, 실시간으로 업데이트 및 반영됩니다. 이 기능은 프라이버시를 중요시하는 대화를 필요로하는 사용자의 경험을 강화할 수 있었습니다.

Supabase RealTime을 이용한 협업 툴 구현

• Supabase RealTime을 이용하여 협업 툴을 구현, 기존 화상회의 플랫폼의 불편함을 해소하고자 구현하였습니다. 재사용이 가능한 컴포넌트 개발로 가상환경, ScrumBoard페이지에서 효과적으로 사용되며, 드래그앤드랍 기능을 통해 사용자 경험을 크게 개선했습니다. 이를 통해 프로젝트 관리 및 팀 협업의 효율성을 향상시키는 결과를 가져왔습니다.

AWS를 통한 백엔드 배포

• AWS배포를 통해 실시간 채팅, 메타버스 캐릭터 이동, 음성 채팅, 웹캠 및 n:m화면 공유 기능을 포함한 소켓 기반 통신을 지원하는 Express 백엔드를 배포했습니다. AWS 배포를 통해 전반적인 AWS 배포 과정 및 SSL등록 경험을 할 수 있었습니다.

트러블슈팅

RTK에서 Zustand로 마이그레이션

• 팀원들과 회의중 RTK를 사용하고 있음에도 RTK-Query를 사용하지 않는다는 문제가 제기 되었고 이를 받아들여 RTK 대신 Zustand로 마이그레이션 하게되었습니다. 이 마이그레이션을 통해 보일러플레이트를 감사하고 기술선택시 한층 더 생각하게되는 계기가 되었습니다.

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

• 메타버스 환경에서보여지는 UI는 React Components로 구현되어있는데 input, textarea요소에 입력할 때 Phaser3의 키 이벤트와 충돌하여 input과 textarea에 충돌된 키는 입력되지 않는 문제가 발생하였습니다. 이를 input 및 textarea요소에 포커스 시 Phaser3의 키 이벤트를 비활성화하며 반대로 input 및 textarea요소에서 포커스가 사라질 때 Phaser3의 키 이벤트를 재활성화 함으로써 해결하였습니다.

ScrumBoard를 CSR로 변경

• ScrumBoard는 페이지에서만 사용하지 않고 메타버스 환경내에서도 사용가능하게 개선하기위해서 기존에 SSR에서 CSR로 변경 후 메타버스 환경내에서도 ScrumBoard 컴포넌트 재사용하여 유연성 및 재사용성을 향상시켰습니다.