React와 Lottie로 게임을 만든다고요?

웹뷰에서 게임 엔진 없이 React, DOM, Lottie만으로 게이미피케이션 서비스 **“일해라 김뱅샐”**을 만들었다. Phaser.js나 Pixi.js도 검토했지만, 러닝 커브와 일정 리스크를 고려해 익숙한 기술로 해결하는 방향을 택했다.

가장 큰 문제는 캐릭터 커스터마이징이었다. 머리, 옷, 안경 같은 요소 조합이 계속 늘어나는 상황에서 모든 경우의 수를 별도 애니메이션으로 만드는 건 비현실적이었고, 그래서 Lottie JSON의 assets 배열을 런타임에 조작하는 방식을 선택했다. 레이어 이름 규칙을 맞춰두고 asset.p 경로만 바꾸면, 하나의 Lottie 파일로 다양한 조합을 표현할 수 있었다.

렌더링 과정에서는 iOS 웹뷰에서 헤어스타일 목록 버튼을 누를 때 화면이 깜빡이며 전체가 리로드되는 문제가 발생했다. img를 absolute inset-0 object-cover로 겹쳐 쌓는 방식이 일부 iOS 디바이스에서 성능 문제를 일으킨 것으로 확인됐고, 이를 background-image 기반 렌더링으로 바꿔 깜빡임과 버벅거림을 해결했다.

모바일 웹뷰에서는 60FPS만으로는 부족했고, 배터리 소모와 발열까지 신경 써야 했다. 글자 타이핑 효과는 텍스트를 하나씩 추가하는 대신 처음부터 모두 렌더링해두고 opacity만 변경해 레이아웃 재계산을 줄였다. 움직임이 필요한 요소에는 JavaScript 애니메이션보다 CSS animation을 우선해 메인 스레드 부담을 낮췄다.

추가로 translate3d와 will-change로 GPU 레이어를 활용하고, 코인처럼 자주 바뀌는 상태는 별도 컴포넌트로 분리해 불필요한 리렌더링을 줄였다. 복잡한 물리 엔진이나 3D가 필요한 경우는 다르지만, 웹 기술만으로도 생각보다 넓은 영역을 커버할 수 있다는 결론에 도달했다.