프론트엔드
React랑 Lottie로 게임을 만든다고요?
두줄요약
React·DOM·Lottie로 웹뷰 게임의 캐릭터 조합과 인터랙션을 구현한 사례를 공유했습니다. iOS 렌더링 이슈와 모바일 애니메이션 성능을 최적화한 방법을 설명합니다.
문제 상황
- 웹뷰 기반 게이미피케이션에서 게임 엔진 없이 캐릭터 커스터마이징과 애니메이션 구현 필요
- iOS 웹뷰의 이미지 레이어 깜빡임과 모바일 배터리 소모·발열 문제
해결 방법
- Lottie JSON의 assets 이미지 경로를 런타임에 교체해 단일 애니메이션 파일로 캐릭터 조합 확장
- 다중 img 레이어를 background-image 조합으로 전환해 iOS 웹뷰 리로드·깜빡임 완화
- 타이핑 효과를 opacity 전환으로 변경하고 CSS 애니메이션·translate3d 활용
성능/운영 포인트
- Reflow를 유발하는 문자열 상태 갱신 대신 최초 레이아웃 계산 후 GPU 중심 opacity 변경
- 자주 갱신되는 코인 상태를 별도 컴포넌트로 분리해 불필요한 리렌더링 축소
- CSS 애니메이션의 컴포지터 스레드 처리와 백그라운드 탭 프레임 조절 활용
적용해볼 점
- 복잡한 물리 연산·3D가 없는 인터랙션에 React, DOM, Lottie 기반 구현 검토
- 디자이너와 Lottie 레이어 네이밍 규칙 사전 합의
