부스트캠프 캠퍼들을 위한 공간 기반 협업 플랫폼
모여라, 모여주세요 — 하나의 공유된 디지털 공간에서 함께 학습하고 협력하세요.
온라인 환경에서의 부족한 공간감, 분산된 협업 도구 문제를 해결하기 위해 태어난 서비스입니다.
Moyo는 2D 가상 공간에서 아바타를 이동하며 자연스럽게 만남을 만들고, 화상회의 · 코드 편집 · 화이트보드 · 채팅을 하나의 공간에서 제공합니다.
| 문제 | 설명 |
|---|---|
| 부족한 공간감 | 온라인에서는 우연한 만남이나 소그룹 대화가 어려워 자연스러운 관계 형성이 힘듭니다. |
| 분산된 협업 도구 | 회의, 코드, 화이트보드가 여러 도구에 흩어져 있어 잦은 앱 전환으로 주당 약 4시간의 생산성 손실이 발생합니다. |
처음 접속하면 Shepherd.js 기반 단계별 튜토리얼이 자동으로 시작됩니다. 미니맵, 이동, 채팅, 노크 등 주요 기능을 하나씩 안내받으며 자연스럽게 서비스에 적응할 수 있습니다.
화면 좌측 하단의 미니맵으로 전체 공간 구조와 현재 위치를 한눈에 파악할 수 있습니다. M키 또는 클릭으로 확대 지도를 열면 각 영역의 이름을 확인하고 빠르게 탐색할 수 있습니다.
사이드바에서 원하는 공간을 선택하면 EasyStar.js 길찾기 알고리즘으로 아바타가 해당 공간의 문 앞까지 자동으로 이동합니다. 이동 중 방향키를 누르면 즉시 수동 조작으로 전환됩니다.
아바타를 조작해 다양한 공간(로비, 데스크존, 회의실, 세미나실, 모각코, 식당)을 자유롭게 이동할 수 있습니다.
데스크존에서 다른 캠퍼의 자리를 노크하여 1:1 대화를 요청할 수 있습니다. 상태 표시로 방해 없는 소통이 가능합니다.
| 상태 | 의미 |
|---|---|
| 🟢 Available | 대화 가능 |
| 🔴 Focusing | 집중 중 (방해 금지) |
| 🟠 Talking | 대화 중 |
LiveKit 기반 고품질 화상 회의로, 회의실과 세미나실에서 실시간 소통이 가능합니다.
Monaco Editor + Yjs 기반 협업 코드 편집기로, 여러 명이 동시에 같은 코드를 수정할 수 있습니다.
TLDRAW 기반 실시간 화이트보드로, 아이디어를 함께 그리고 공유하세요.
공유 타이머와 스톱워치로 함께 시간을 관리하며 학습할 수 있습니다.
공간 내 채팅으로 빠르게 메시지를 주고받을 수 있습니다.
로비에서 같은 그룹(contact)에 속한 유저들이 가까이 모이면, 자동으로 초록색 점선 경계가 그려져 그룹 영역을 시각적으로 표시합니다. Convex Hull 알고리즘으로 자연스러운 경계를 실시간 렌더링합니다.
식당 공간에서 이미지를 업로드하고 다른 캠퍼들과 공유할 수 있습니다. 좋아요 기능과 이미지 뷰어를 지원하며, AWS S3 기반으로 이미지를 관리합니다.
세미나실에서 호스트가 연단(Lectern) 에 올라가면 발표자 모드가 활성화됩니다. 소회의실(Breakout Room) 기능으로 참가자들을 여러 그룹으로 나눌 수 있으며, 랜덤 배정 또는 자유 선택이 가능합니다.
moyo/
├── apps/
│ ├── client/ # React + Phaser 프론트엔드
│ │ └── src/
│ │ ├── app/ # 앱 셸, 라우팅, 프로바이더
│ │ ├── pages/ # 페이지 컴포넌트
│ │ ├── features/ # 기능 모듈 (FSD 아키텍처)
│ │ ├── widgets/ # 재사용 UI 위젯
│ │ ├── entities/ # 도메인 모델 & 스토어
│ │ └── shared/ # 공통 유틸, 타입, 설정
│ │
│ └── server/ # NestJS 백엔드
│ └── src/
│ ├── auth/ # GitHub OAuth 인증
│ ├── game/ # 방 & 플레이어 상태 관리
│ ├── knock/ # 노크 기능
│ ├── livekit/ # 화상 회의
│ ├── meeting/ # 회의실
│ ├── yjs/ # 실시간 협업 편집
│ ├── tldraw/ # 화이트보드 동기화
│ ├── timer/ # 타이머
│ └── stopwatch/ # 스톱워치
│
└── packages/
└── shared/ # 공유 타입 & 상수
- Node.js v20 이상
- pnpm v10 이상
# 1. 레포지토리 클론
git clone https://github.com/boostcampwm2025/web13-isj-dle.git
cd web13-isj-dle
# 2. 의존성 설치
pnpm install
# 3. shared 패키지 빌드
pnpm -F @shared/types build
# 4. 개발 서버 실행
pnpm dev:client # 클라이언트
pnpm dev:server # 서버ISJ — ISXJ 들이 모인 팀 | Do 행동하고 · Learn 배우고 · Evolve 성장한다
 |
 |
 |
 |
|---|---|---|---|
 |
 |
 |
 |
| 김민영 | 박은지 | 임승우 | 주민찬 |
| J038 | J115 | J230 | J258 |
| @minyeong981 | @eunji0 | @swoo0514 | @MinChanJu |
Moyo © 2025 Team ISJ-DLE. All rights reserved.
