YouViCo에서 실시간 협업을 구축한 방법

TL;DR

실시간 협업에는 폴링 대신 WebSocket 연결, 누가 보고 있는지 표시하는 프레즌스 추적, 여러 리뷰어를 같은 상태로 유지하는 댓글 동기화, 그리고 동시 편집을 위한 충돌 해결이 필요합니다. 우리는 전송 계층에 Socket.io, 상태 관리에 Redis, 충돌 없는 동기화에 operational transformation을 사용해 시스템을 구축했습니다. 핵심 트레이드오프는 WebSocket의 복잡성 대 폴링의 단순성입니다. 크리에이터와 리뷰어가 즉각적인 피드백을 기대하기 때문에 결국 WebSocket이 승리했습니다.

왜 실시간이 중요한가

전통적인 영상 리뷰에서 피드백은 일괄 처리 방식입니다. 크리에이터가 업로드하면 리뷰어들이 각자 따로 시청하고, 피드백은 몇 시간 뒤에야 도착합니다. 크리에이터는 그 피드백을 바탕으로 작업을 반복합니다.

실시간 협업은 이 판도를 바꿉니다. 크리에이터가 업로드하면 여러 리뷰어가 동시에 시청하고, 댓글이 즉시 나타납니다. 크리에이터는 피드백이 실시간으로 올라오는 모습을 보면서 시청 중에 Slack에서 논의할 수도 있습니다. 반복 작업이 더 빠르게 이루어집니다.

기술적 비용도 있습니다. 실시간 시스템은 복잡합니다. 그럼에도 우리가 폴링 대신 WebSocket을 선택한 이유는 사용자 경험이 그 복잡성을 정당화하기 때문입니다.

WebSocket 대 폴링 트레이드오프

폴링 방식 (더 단순함)

// Client polls server every 2 seconds
setInterval(async () => {
	const comments = await fetch('/api/comments?videoId=' + videoId);
	updateCommentUI(comments);
}, 2000);

장점: 단순하고, 서버 상태가 필요 없으며, 프록시 환경에서도 동작합니다. 단점: 2초의 지연, 끊임없는 네트워크 요청, 동시 사용자가 1만 명을 넘어가면 발생하는 확장 문제.

WebSocket 방식 (복잡하지만 더 우수함)

// Client connects once, receives updates instantly
const socket = io('https://youvico.com');
socket.on('commentAdded', (comment) => {
	updateCommentUI(comment);
});

장점: 100ms 미만의 지연, 양방향 통신, 동시 사용자 10만 명 이상으로 확장 가능. 단점: 상태를 유지하는 연결, 네트워크 및 메모리 오버헤드, 로드 밸런서 같은 인프라가 필요함.

우리는 WebSocket을 선택했습니다. 피드백 도구에서는 즉각적인 피드백이 중요합니다. 크리에이터는 2초의 지연을 곧바로 알아차리고 도구가 고장 난 것처럼 느낍니다. 100ms의 지연은 즉각적으로 느껴집니다.

핵심 교훈

실시간 협업은 YouViCo 제품의 핵심입니다. 이를 제대로 구현하기까지 수개월의 반복 개선과 운영 환경 스케일링이 필요했습니다.