무한 맵 기반 단어 찾기 게임, 어떻게 만들었을까?

words.zip은 전통적인 단어 찾기 게임과 달리, 모든 글자를 저장하지 않고 프로시저럴 맵 생성(Procedural Map Generation) 방식을 사용한다. 이는 MurMurHash를 활용하여 좌표를 해싱하고, 해시 결과에 따라 글자를 결정하는 방식이다. 이로 인해 대역폭, 저장 공간, 복잡성, 클라이언트 지연 시간을 줄일 수 있다. 특히 오프라인 환경에서도 맵 탐색이 가능하다는 장점이 있다.

단어 제출 및 저장을 위해 Firestore를 사용하며, 이를 통해 실시간 협업 기능을 구현한다. 제출된 단어는 128x128 크기의 청크(Chunk) 단위로 저장되며, 각 단어는 시작 위치와 방향 정보를 담고 있다. 이러한 데이터 격리 아키텍처(Data Isolation Architecture)를 통해 Firestore 읽기 횟수를 줄이고, 실시간 구독(Realtime Subscription) 성능을 향상시킨다.

가장 큰 성능 향상은 OffscreenCanvas를 Web Worker 내에서 활용한 데서 비롯되었다. 청크 단위로 렌더링된 이미지를 캐싱하여 재사용함으로써, 팬(Pan) 또는 줌(Zoom) 시 부드러운 사용자 경험을 제공한다. Web Worker를 통해 렌더링 작업을 백그라운드로 처리하여 메인 스레드의 부하를 줄이고, 입력 처리 및 카메라 움직임의 지연을 방지한다.

단어의 경로를 좌표 대신 방향 정보로 인코딩하여 청크(Chunk)의 크기를 줄이고, 렌더링 성능을 향상시켰다. 예를 들어, `[3, 3, 1]`과 같은 방향 정보를 사용하여 단어의 모양을 표현하고, 이를 기반으로 draw Image를 활용하여 하이라이트된 단어를 렌더링한다. 이러한 방식은 렌더링 시 캐싱(Caching) 효율을 높여 성능을 개선한다.