Transformers.js를 활용해 브라우저에서 직접 실행되는 ML 기반 스케치 게임(Doodle Dash) 구현으로 서버 레이턴시 없이 초당 60회 이상의 예측 처리

Context

Google의 Quick, Draw! 게임은 서버 기반 신경망 추론으로 인한 네트워크 레이턴시를 피할 수 없다. 브라우저 환경에서도 리얼타임 ML 모델을 실행할 수 있는 방식이 필요했다.

Technical Solution

• apple/mobilevit-small(5.6M 파라미터, 약 20MB)을 Google Quick, Draw! 데이터셋으로 파인튜닝: Hugging Face의 Transformers, Trainer, TrainingArguments 활용
• 파인튜닝된 PyTorch 모델을 ONNX 형식으로 변환: Optimum 라이브러리와 Transformers.js 리포지토리의 convert 스크립트 사용
• Transformers.js를 React + Vite 프로젝트에 통합: @xenova/transformers 패키지 설치 및 pipeline API로 image-classification 작업 수행
• Web Workers API를 활용해 추론을 별도 스레드에서 실행: 메인 스레드의 UI 렌더링과 드로잉 제스처 처리를 블로킹하지 않음
• 게임 로직 최적화: 초기 n개의 잘못된 레이블의 모델 스코어를 감소시키되, n값을 시간 경과에 따라 증가, 그리고 345개 클래스 중 유사하거나 모호한 레이블(barn vs house, bat 등) 제거하여 300개 이상으로 필터링

Impact

초당 60회 이상의 실시간 예측 처리 달성, 서버 레이턴시 없음.

Key Takeaway

경량 Vision Transformer(MobileViT) 모델을 ONNX로 변환해 브라우저에서 실행하면, 서버 왕복 없이 실시간 추론이 가능하다. Web Workers를 통한 스레드 분리는 복잡한 ML 추론이 UI 반응성에 미치는 영향을 차단하는 필수 패턴이다.