Home

WebRTC 실시간 협업 서비스

2-4 명 소규모 팀을 위한 화상 회의 및 화이트보드 협업 서비스. 회원가입 없이 방 링크 공유로 즉시 시작.

프로젝트 목표

• 여러 프로토콜과 기술 스택이 협업하는 실시간 통신 시스템 구축.
• WebRTC, WebSocket, Canvas API 를 통합하여 동작하는 전체 시스템 설계 및 구현.

기능

• 웹캠/음성 화상 통화
• 실시간 공유 화이트보드
• 화면 공유

---

시스템 아키텍처

컴포넌트 구조

graph TB
    subgraph Client["Next.js Client (Browser)"]
        UI["UI Layer<br/>(React)"]
        State["State Management<br/>(Context + Hooks)"]
        subgraph Comm["Communication Layer"]
            Socket["Socket.io Client"]
            WebRTC["SimplePeer (WebRTC)"]
            Canvas["Fabric.js (Canvas)"]
        end
        UI --- Comm
        State --- Comm
    end
    subgraph Server["Express + Socket.io Server"]
        Signal["시그널링<br/>(WebRTC 연결 협상)"]
        Board["화이트보드<br/>이벤트 중계"]
        Room["방 관리<br/>(메모리 기반)"]
    end
    Socket -.WebSocket.-Server
    WebRTC -.WebRTC P2P.-Server
    Canvas -.WebSocket.-Server
%%    style Client fill:#e3f2fd
%%    style Server fill:#fff3e0
%%    style Comm fill:#f3e5f5

Loading

레이어별 책임

레이어	기술	역할
UI	Next.js + shadcn/ui	컴포넌트 렌더링, 사용자 입력 처리
상태 관리	React Context + Hooks	참가자 목록, 연결 상태, UI 상태
시그널링	Socket.io	WebRTC 연결 협상, 참가자 입퇴장
미디어 전송	SimplePeer (WebRTC)	P2P 비디오/오디오 스트림
화이트보드 동기화	Socket.io + Fabric.js	그리기 이벤트 중계 및 렌더링

---

데이터 흐름

1. 참가자 입장 시퀀스

sequenceDiagram

    participant A as Client A

    participant S as Server

    participant B as Client B

    A->>S: join room

    S->>A: room info

    B->>S: join room

    S->>B: new user

    B->>A: offer (SDP)

    A->>B: answer (SDP)

    Note over A,B: P2P 미디어 연결

Loading

SDP (Session Description Protocol: 멀티미디어 세션 파라미터를 협상하는 프로토콜)

2. 화이트보드 업데이트 흐름

sequenceDiagram

    participant A as Client A drawing

    participant S as Server

    participant B as Client B

    A->>S: draw:move<br/>(x, y, color)

    S->>B: draw:move<br/>(x, y, color)

    Note over B: render

Loading

3. 통신 프로토콜 분리

WebSocket (Socket.io)

• 시그널링: SDP/ICE 교환
• 화이트보드: 그리기 이벤트
• 메타데이터: 참가자 상태

WebRTC (P2P)

• 비디오 스트림
• 오디오 스트림
• 화면 공유 스트림

분리 이유

• 미디어: 지연 최소화 필요 → P2P 직접 전송
• 화이트보드: 순서 보장 필요 → 서버 중계

---

기술 스택 선택

프론트엔드

Next.js + shadcn/ui

• 파일 기반 라우팅
• Vercel 배포 간소화
• UI 컴포넌트 재사용

React Context + Hooks

• 전역 상태 관리
• 연결 로직과 UI 분리
• 커스텀 훅으로 재사용성 확보

백엔드

Express + Socket.io

• WebSocket 자동 폴백
• 재연결 로직 내장
• 방 기반 Event Broadcast

WebRTC

SimplePeer

• WebRTC API 추상화
• 브라우저 호환성 처리
• 시그널링과 미디어 전송 분리

화이트보드

Fabric.js

• Canvas 객체 모델
• 이벤트 시스템
• JSON 직렬화 지원

---

NAT 통과

• STUN 서버: 공개 주소 확인
• TURN 서버: P2P 실패 시 중계

---

문서

• TBD

참고 자료

• SimplePeer
• Fabric.js
• Socket.io
• MDN WebRTC