01. 실시간 캔버스 협업 엔진 CRDT
50명 이상의 동시 편집자 간의 오브젝트 변경을 충돌 없이 병합하고, 부분 업데이트를 60fps 이상으로 동기화합니다.
← 프로젝트 목록으로 돌아가기
RoleFullstack Lead
Timeline6 Months · 2024
PlatformWeb & PWA
Team5 Members
-45%RENDERING LATENCY
99.98%WEBSOCKET AVAILABILITY
120 FPSCANVAS SYNCHRONIZATION
01. Background & core mission
분산 환경에서 레이턴시 없는 동시성 보장
원격 협업이 일상화되면서 시각적 워크스페이스는 수평 확장성과 실시간 동기화를 함께 요구합니다. FlowSync는 접속자 수가 증가해도 일관된 반응성을 유지하는 것을 핵심 과제로 삼았습니다.
Core Mission
충돌 없는 CRDT 기반 동기화와 튜닝된 렌더링 파이프라인으로 브라우저 워크스페이스의 한계를 다시 정의합니다.
충돌 없는 CRDT 기반 동기화와 튜닝된 렌더링 파이프라인으로 브라우저 워크스페이스의 한계를 다시 정의합니다.
02. Core modules architecture
3가지 핵심 모듈 설계와 구현
02. 지능형 푸시 알림 파이프라인 KAFKA
이벤트 디바운싱 알고리즘으로 연속 액션과 다중 발송을 제어하고 사용자 행동을 기반으로 우선순위를 동적으로 계산합니다.
03. 모바일 오프라인 퍼스트 모드 INDEXEDDB
네트워크 지연을 감지하면 IndexedDB 로컬 상태로 전환하고 연결 복구 즉시 자동 충돌 병합을 수행합니다.
03. Engineering challenges
기술적 병목 극복 과정
챌린지 1 — 동시 접속 50인 초과 시 웹소켓 O(N²) 브로드캐스팅 비용
전체 세션에 이벤트를 재전송하는 구조에서 메시지 중복과 렌더링 지연이 급격히 늘어났습니다.
해결: Spatial Partitioning과 Room 기반 관심 영역 분할로 평균 메시지 fan-out 68% 감소
챌린지 2 — 대규모 캔버스 드래그 시 브라우저 Garbage Collection 스파이크
짧은 수명의 좌표 객체가 반복 생성되며 약 150~300ms의 메인 스레드 블로킹이 발생했습니다.
해결: TypedArray 객체 풀과 프레임 단위 배치 업데이트로 p99 프레임 시간 16ms 이하 달성