Keystroke 타임스탬프 기반 Ghost Racer 구현 및 상태 동기화 최적화

Context

단순 타이핑 속도 측정을 넘어 사용자별 정밀한 성취도 분석과 실시간 멀티플레이어 경험 제공을 목표로 함. 특히 단순 결과값이 아닌 타이핑 과정의 시계열 데이터를 복원하여 Ghost Racer로 재현하는 구조적 설계가 필요했음.

Technical Solution

• Keystroke별 발생 시점(ms)과 누적 글자 수를 쌍으로 기록하는 타임스탬프 배열 구조 설계
• 게임 루프 내 Binary Search를 활용해 현재 경과 시간과 가장 인접한 Keystroke 인덱스를 탐색함으로써 O(n) 복잡도의 Ghost 진행률 계산
• State 내에 중복 저장되던 Derived Data(내 차량의 진행률)를 제거하고, Render 단계에서 실시간 변수를 직접 참조하는 계산 방식으로 변경하여 State Sync 버그 해결
• Socket.io 기반의 Bidirectional Communication을 통해 상대방의 Progress 정보만 선택적으로 수신하는 효율적 브로드캐스팅 구조 채택
• 정밀도 향상을 위해 전체 정확도가 아닌 Character 단위의 Error Tracking 로직을 구현하여 특정 키의 병목 지점 분석 가능하게 설계