Google Calendar Day View가 프론트엔드 60% 중심 설계로 500M 사용자에게 Drag-Resize-실시간 동기화를 제공한다

Context

기존 캘린더 시스템은 폴링 기반 통신으로 500M 사용자가 1초마다 빈 요청을 보내는 문제에 직면했다. RRULE 규칙을 매번 데이터베이스에 저장하면 중복 데이터가 폭발적으로 증가하고, Drag-Resize 작업에서 React 재렌더링이 발생하면 프레임 드롭이 불가피했다.

Technical Solution

• PostgreSQL 클러스터로 ACID 이벤트 저장소를 구축하여 동시 편집의 정합성을 보장한다
• Redis WebSocket 세션 라우팅으로 5M 동시 연결을 관리하고 사용자를 실시간 채널에 매핑한다
• Kafka 메시징으로 공유 캘린더 팬아웃 알림을 처리하여 N명의 협업자에게 변경 사항을 전파한다
• 클라이언트 측 그리디 컬럼 패킹 알고리즘으로 오버랩 이벤트 레이아웃을 O(n log n) 복잡도로 계산한다
• UTC로만 시간을 저장하여 DST 변환 문제를 클라이언트 렌더링 단계로 격상시킨다

Impact

167K writes/sec 처리 용량 확보, Drag 작업 시 60fps 프레임률 유지, 협업자 화면 업데이트 지연 1초 이내 달성

Key Takeaway

Drag-Resize 시 React를 우회하여 DOM을 직접 변형하고 DROP 시 한 번만 상태를 커밋하면 프레임 드롭 없이 반응성 있는 UX를 구현할 수 있다