5. 캔버스 동기화를 위한 수제 CRDT 구현기
CRDT란 Conflict-free Replicated Data Type의 약자입니다.
네트워크 지연이나 순서가 보장되지 않는 환경에서도 일관된 상태를 유지할 수 있도록 여러 컴퓨터에 걸쳐 복제되는 데이터 구조입니다.
방해꾼은 못말려 프로젝트에서 동시에 여러명이 한 캔버스에 그림을 그리고, 그 캔버스 화면을 모든 사용자가 실시간으로 동일하게 보고 있어야 하기 때문에 CRDT가 필요하다고 느껴습니다.
또한 프로젝트 차별성과 기술적인 완성도를 위해 도전적으로 직접 구현해보기를 선택해보았습니다.
CRDT 구현 방식 중에서도 구현 난이도가 낮고, 전체 상태를 교환하고 병합하는 방식인 상태 기반 CRDT를 적용한 과정을 소개합니다.
Important
CRDT 적용 후에 캔버스 동기화가 잘 되었는지 매번 직접 그리고, 육안으로 확인하기에는 번거로움이 있었습니다.
따라서 캔버스 동기화 정도를 수치로 기록하고 테스트하고자 브라우저 환경 테스트 툴을 조사해보았습니다.
Important
브라우저 환경 테스트 툴 선정 이후 CRDT 적용 전과 적용 후 어느 정도 일치율을 보이는지 확인해보았습니다.
캔버스 x, y 좌표만 주고받으며 바로 드로잉할 시 네트워크 지연이나 패킷 손실로 인해 다른 플레이어의 좌표가 누락되거나 순서가 바뀌어 불일치율이 평균 50% 이상으로 높게 나왔습니다.
LWW(Last-Write-Wins) CRDT 방식으로 Map에 모든 그리기 좌표를 누적하여 상태를 보존하였고, 불일치율이 거의 0%에 수렴하는 결과를 얻을 수 있었습니다.
Playwright를 사용해 진행한 테스트 과정을 자세하게 소개합니다.
Important