🔄 Realtime Collaboration Stack

여러 사용자가 동시에 작업할 수 있는 실시간 협업 애플리케이션 구축
"Build the next Figma, Notion, or Google Docs" - 실시간 동기화의 모든 것

🎯 이 스택이 적합한 경우

✅ 추천하는 경우

• 동시 편집이 핵심 기능 (문서, 디자인, 코드)
• 실시간 커서와 presence 표시 필요
• 오프라인 지원과 충돌 해결 필수
• 낮은 지연시간 (< 100ms) 요구사항
• 협업이 제품의 핵심 가치

❌ 다른 스택을 고려해야 할 경우

• 단순 채팅만 필요 → Firebase Realtime DB
• 일방향 스트리밍 → WebRTC + Media Server
• 턴제 협업 → 일반 CRUD + 알림

🧩 핵심 구성요소

실시간 동기화 엔진

// Yjs + Socket.io 기반 협업 엔진 import * as Y from 'yjs'; import { Server } from 'socket.io'; import { bindSocketIO } from 'y-socket.io'; import Redis from 'ioredis'; class CollaborationServer { private docs = new Map<string, Y.Doc>(); private redis = new Redis.Cluster([...]); constructor(io: Server) { io.on('connection', (socket) => { socket.on('join-document', async (docId: string) => { // 문서 로드 또는 생성 const doc = await this.loadOrCreateDocument(docId); // 방 참가 socket.join(docId); // 현재 상태 동기화 const state = Y.encodeStateAsUpdate(doc); socket.emit('sync-initial', state); // Presence 업데이트 this.updatePresence(docId, socket.id, 'joined'); // Yjs 바인딩 bindSocketIO(doc, socket, { gcEnabled: true, pingInterval: 30000 }); }); // 커서 위치 브로드캐스트 socket.on('cursor-position', (data) => { socket.to(data.docId).emit('remote-cursor', { userId: socket.userId, position: data.position, selection: data.selection }); }); }); } private async loadOrCreateDocument(docId: string): Promise<Y.Doc> { if (this.docs.has(docId)) { return this.docs.get(docId)!; } const doc = new Y.Doc(); // Redis에서 문서 상태 로드 const savedState = await this.redis.get(`doc:${docId}`); if (savedState) { Y.applyUpdate(doc, Buffer.from(savedState, 'base64')); } // 변경사항 자동 저장 doc.on('update', async (update) => { const state = Y.encodeStateAsUpdate(doc); await this.redis.set( `doc:${docId}`, Buffer.from(state).toString('base64'), 'EX', 86400 // 24시간 TTL ); }); this.docs.set(docId, doc); return doc; } } 

CRDT 기반 데이터 구조

// 협업 가능한 데이터 타입 정의 interface CollaborativeDocument { // Yjs 타입 매핑 content: Y.Text; // 텍스트 편집기 shapes: Y.Array<Shape>; // 도형 (Figma-like) comments: Y.Map<Comment>; // 댓글 metadata: Y.Map<any>; // 메타데이터 } // React 컴포넌트에서 사용 function CollaborativeEditor({ documentId }: Props) { const [doc, setDoc] = useState<Y.Doc>(); const [provider, setProvider] = useState<WebsocketProvider>(); const [awareness, setAwareness] = useState<Awareness>(); useEffect(() => { // Yjs 문서 초기화 const ydoc = new Y.Doc(); const wsProvider = new WebsocketProvider( 'ws://localhost:1234', documentId, ydoc ); // Awareness (presence) 설정 const awareness = wsProvider.awareness; awareness.setLocalState({ user: currentUser, cursor: null, selection: null }); // 원격 사용자 추적 awareness.on('change', (changes) => { const users = Array.from(awareness.getStates().entries()) .map(([clientId, state]) => ({ clientId, ...state.user, cursor: state.cursor })); setRemoteUsers(users); }); setDoc(ydoc); setProvider(wsProvider); setAwareness(awareness); return () => { wsProvider.destroy(); }; }, [documentId]); return ( <div className="editor-container"> <RemoteCursors users={remoteUsers} /> <Editor doc={doc} awareness={awareness} /> </div> ); } 

WebRTC P2P 레이어

// P2P 연결로 서버 부하 감소 class P2PNetwork { private peers = new Map<string, RTCPeerConnection>(); private dataChannels = new Map<string, RTCDataChannel>(); async connectToPeer(peerId: string, offer?: RTCSessionDescriptionInit) { const pc = new RTCPeerConnection({ iceServers: [{ urls: ['stun:stun.l.google.com:19302'] }] }); // 데이터 채널 생성 if (!offer) { const channel = pc.createDataChannel('yjs', { ordered: true, maxRetransmits: 3 }); this.setupDataChannel(peerId, channel); } pc.ondatachannel = (event) => { this.setupDataChannel(peerId, event.channel); }; // ICE 후보 교환 pc.onicecandidate = (event) => { if (event.candidate) { this.signaling.send({ type: 'ice-candidate', target: peerId, candidate: event.candidate }); } }; this.peers.set(peerId, pc); // Offer/Answer 교환 if (offer) { await pc.setRemoteDescription(offer); const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); return answer; } else { const offer = await pc.createOffer(); await pc.setLocalDescription(offer); return offer; } } private setupDataChannel(peerId: string, channel: RTCDataChannel) { channel.onopen = () => { console.log(`P2P connection established with ${peerId}`); // Yjs 동기화 시작 this.syncWithPeer(peerId); }; channel.onmessage = (event) => { // Yjs 업데이트 적용 const update = new Uint8Array(event.data); Y.applyUpdate(this.doc, update); }; this.dataChannels.set(peerId, channel); } } 

오프라인 지원 & 충돌 해결

// IndexedDB를 사용한 로컬 영속성 class OfflineSync { private db: IDBDatabase; private syncQueue: SyncOperation[] = []; async saveLocal(docId: string, update: Uint8Array) { const tx = this.db.transaction(['documents'], 'readwrite'); const store = tx.objectStore('documents'); // 현재 상태 가져오기 const existing = await store.get(docId); const doc = new Y.Doc(); if (existing) { Y.applyUpdate(doc, existing.state); } // 업데이트 적용 Y.applyUpdate(doc, update); // 저장 await store.put({ id: docId, state: Y.encodeStateAsUpdate(doc), lastModified: Date.now(), pendingSync: !navigator.onLine }); } async syncWhenOnline() { if ('serviceWorker' in navigator && 'SyncManager' in window) { const registration = await navigator.serviceWorker.ready; await registration.sync.register('sync-documents'); } } // Service Worker에서 실행 self.addEventListener('sync', async (event) => { if (event.tag === 'sync-documents') { event.waitUntil(this.syncPendingDocuments()); } }); } 

💰 인프라 비용 분석

| 컴포넌트 | 최소 구성 | 표준 구성 | 대규모 | |----------|-----------|-----------|---------| | 서버 (Node.js) | $40/월(2 vCPU, 4GB) | $160/월(4 vCPU, 16GB) | $640/월(16 vCPU, 64GB) | | Redis Cluster | $50/월 | $200/월 | $800/월 | | PostgreSQL | $25/월 | $100/월 | $400/월 | | 로드밸런서 | $20/월 | $20/월 | $100/월 | | CDN (100GB) | $10/월 | $50/월 | $200/월 | | TURN 서버 | $20/월 | $80/월 | $320/월 | | 총계 | ~$165/월 | ~$610/월 | ~$2,460/월 |

동시 접속자 수용량

• 최소: ~1,000명
• 표준: ~10,000명
• 대규모: ~50,000명

🚀 구현 로드맵

Phase 1: 기본 실시간 동기화 (2주)

# 프로젝트 설정 mkdir realtime-collab && cd realtime-collab npm init -y npm install express socket.io yjs y-websocket y-indexeddb npm install -D typescript @types/node # 기본 서버 구조 src/ ├── server/ │ ├── index.ts # Express + Socket.io │ ├── collaboration.ts # Yjs 서버 │ └── persistence.ts # Redis 저장 ├── client/ │ ├── hooks/ # React 훅 │ ├── components/ # UI 컴포넌트 │ └── lib/ # Yjs 클라이언트 └── shared/ └── types.ts # 공통 타입 

Phase 2: Presence & Awareness (1주)

// 실시간 커서 구현 interface UserPresence { id: string; name: string; color: string; cursor: { x: number; y: number } | null; selection: Range | null; lastSeen: number; } function usePresence(awareness: Awareness) { const [users, setUsers] = useState<Map<number, UserPresence>>(); useEffect(() => { const updateUsers = () => { const states = awareness.getStates(); const userMap = new Map(); states.forEach((state, clientId) => { if (state.user) { userMap.set(clientId, { ...state.user, cursor: state.cursor, selection: state.selection, lastSeen: Date.now() }); } }); setUsers(userMap); }; awareness.on('change', updateUsers); updateUsers(); // 커서 위치 업데이트 const updateCursor = (e: MouseEvent) => { awareness.setLocalStateField('cursor', { x: e.clientX, y: e.clientY }); }; document.addEventListener('mousemove', updateCursor); return () => { document.removeEventListener('mousemove', updateCursor); }; }, [awareness]); return users; } 

Phase 3: 성능 최적화 (2주)

// 1. 디바운싱 & 스로틀링 const debouncedUpdate = useMemo( () => debounce((update: Uint8Array) => { provider.ws.send(update); }, 100), [provider] ); // 2. 선택적 동기화 class SelectiveSync { private visibleNodes = new Set<string>(); syncVisibleOnly(doc: Y.Doc, viewport: Viewport) { const nodes = this.getNodesInViewport(doc, viewport); // 뷰포트에 들어온 노드만 동기화 nodes.forEach(node => { if (!this.visibleNodes.has(node.id)) { this.subscribeToNode(node); this.visibleNodes.add(node.id); } }); // 뷰포트 밖 노드 구독 해제 this.visibleNodes.forEach(nodeId => { if (!nodes.find(n => n.id === nodeId)) { this.unsubscribeFromNode(nodeId); this.visibleNodes.delete(nodeId); } }); } } // 3. 압축 & 배치 처리 const compressionMiddleware = (socket: Socket) => { const updateQueue: Uint8Array[] = []; setInterval(() => { if (updateQueue.length > 0) { const compressed = pako.deflate( Y.mergeUpdates(updateQueue) ); socket.emit('batch-update', compressed); updateQueue.length = 0; } }, 50); // 50ms 배치 }; 

Phase 4: P2P & 확장성 (2-3주)

// Hybrid 아키텍처: 서버 + P2P class HybridSync { private serverConnection: WebSocket; private p2pNetwork: P2PNetwork; private syncStrategy: 'server' | 'p2p' | 'hybrid' = 'hybrid'; async initialize() { // 서버 연결 this.serverConnection = new WebSocket('wss://server.com'); // P2P 네트워크 구축 this.p2pNetwork = new P2PNetwork(); // 룸의 피어 목록 받기 const peers = await this.getRoomPeers(); // 가까운 피어와 P2P 연결 const nearbyPeers = await this.findNearbyPeers(peers); for (const peer of nearbyPeers) { await this.p2pNetwork.connectToPeer(peer.id); } } // 동기화 전략 선택 sync(update: Uint8Array) { switch (this.syncStrategy) { case 'p2p': // P2P로만 동기화 (서버 부하 최소) this.p2pNetwork.broadcast(update); break; case 'server': // 서버로만 동기화 (안정성 최대) this.serverConnection.send(update); break; case 'hybrid': // P2P 우선, 서버는 백업 this.p2pNetwork.broadcast(update); this.debouncedServerSync(update); break; } } } 

🏗️ 아키텍처 패턴

이벤트 소싱 + CQRS

// 모든 변경사항을 이벤트로 저장 interface CollaborationEvent { id: string; type: 'INSERT' | 'DELETE' | 'FORMAT' | 'MOVE'; userId: string; timestamp: number; data: any; position: number; } class EventStore { async appendEvent(docId: string, event: CollaborationEvent) { await this.db.query( `INSERT INTO events (doc_id, event_id, type, user_id, data, timestamp) VALUES ($1, $2, $3, $4, $5, $6)`, [docId, event.id, event.type, event.userId, event.data, event.timestamp] ); // 읽기 모델 업데이트 (비동기) this.updateReadModel(docId, event); } async getHistory(docId: string, from?: Date, to?: Date) { const events = await this.db.query( `SELECT * FROM events WHERE doc_id = $1 AND timestamp BETWEEN $2 AND $3 ORDER BY timestamp`, [docId, from, to] ); return events.rows; } } 

확장 가능한 아키텍처

 ┌─────────────┐ │ Load Balancer│ └──────┬──────┘ │ ┌──────────────┴──────────────┐ │ │ ┌──────▼──────┐ ┌──────▼──────┐ │ Node.js │ │ Node.js │ │ Socket.io │◄────────────►│ Socket.io │ └──────┬──────┘ Redis └──────┬──────┘ │ Pub/Sub │ └──────────┬──────────────────┘ │ ┌──────▼──────┐ │Redis Cluster│ │ (Session) │ └──────┬──────┘ │ ┌──────▼──────┐ │ PostgreSQL │ │(Persistence)│ └─────────────┘ 

🔄 기술 대안

실시간 동기화 라이브러리

| 라이브러리 | 장점 | 단점 | 적합한 경우 | |-----------|------|------|------------| | Yjs | CRDT 기반, 확장 가능 | 학습 곡선 | 복잡한 협업 | | ShareJS | 간단한 API | 유지보수 중단 | 레거시 | | OT.js | OT 알고리즘 | 복잡한 구현 | 텍스트 편집기 | | Automerge | 강력한 CRDT | 무거움 | 오프라인 우선 |

백엔드 스택 옵션

# Node.js 스택 (추천) backend: language: TypeScript framework: Express + Socket.io crdt: Yjs persistence: Redis + PostgreSQL # Elixir 스택 (고성능) backend: language: Elixir framework: Phoenix channels: Phoenix Channels persistence: PostgreSQL + Mnesia # Go 스택 (확장성) backend: language: Go framework: Gin + Melody crdt: Custom implementation persistence: Redis + CockroachDB 

🏆 성공 사례

Figma

• 기술: C++ (렌더링) + WebAssembly + CRDTs
• 특징: 브라우저에서 실행되는 디자인 도구
• 성과: 실시간 협업의 표준

Notion

• 기술: React + WebSocket + 자체 동기화 엔진
• 특징: 블록 기반 편집기
• 규모: 수백만 동시 사용자

Miro

• 기술: Canvas API + WebSocket + Redis
• 특징: 무한 캔버스 화이트보드
• 성능: 100명+ 동시 협업

📚 필수 학습 자료

CRDT 이론

• CRDT Primer
• Yjs Documentation
• Building Collaborative Apps

실시간 시스템

• Socket.io Documentation
• WebRTC for Beginners
• Scaling WebSockets

사례 연구

• How Figma Multiplayer Works
• Building Google Docs

💬 실무자 조언

"CRDT vs OT 선택이 중요해요. 텍스트는 OT가 간단하지만, 복잡한 데이터는 CRDT가 답입니다." - @realtime_expert

"처음부터 P2P 하지 마세요. 서버 기반으로 안정화시킨 다음 P2P로 최적화하는 게 맞습니다." - @collaboration_dev

"오프라인 지원은 처음부터 설계하세요. 나중에 추가하면 아키텍처 다시 짜야 해요." - @offline_first

"성능보다 중요한 건 일관성입니다. 데이터 손실이나 충돌은 사용자 신뢰를 잃는 지름길이에요." - @data_integrity_advocate

⚡ 성능 최적화 팁

렌더링 최적화

// React 18 Concurrent Features 활용 function CollaborativeCanvas() { const [isPending, startTransition] = useTransition(); const handleRemoteUpdate = useCallback((update) => { // 낮은 우선순위로 렌더링 startTransition(() => { applyUpdate(update); }); }, []); // Virtual Scrolling for 대용량 문서 return ( <VirtualList height={800} itemCount={items.length} itemSize={50} overscan={5} > {({ index, style }) => ( <div style={style}> <CollaborativeItem item={items[index]} /> </div> )} </VirtualList> ); } 

네트워크 최적화

// 적응형 동기화 주기 class AdaptiveSync { private latency = 0; private syncInterval = 100; adjustSyncRate() { if (this.latency < 50) { this.syncInterval = 50; // 빠른 네트워크 } else if (this.latency < 150) { this.syncInterval = 100; // 보통 } else { this.syncInterval = 200; // 느린 네트워크 } } } 

🚨 주의사항

보안

• WebSocket에 인증 미들웨어 필수
• XSS 방지를 위한 입력 검증
• Rate limiting으로 DoS 방어
• E2E 암호화 고려 (민감한 데이터)

확장성

• Sticky Session 또는 Redis Adapter
• 수평 확장을 위한 상태 분리
• 마이크로서비스로 기능 분리
• 지역별 엣지 서버 배포

마지막 업데이트: 2025-01-28
기여하기: GitHub에서 편집