프론트엔드
React랑 Lottie로 게임을 만든다고요?
두줄요약
React와 Lottie만으로 웹뷰 게임을 구현한 사례를 공유했습니다. iOS 깜빡임, 리플로우, 배터리 소모를 줄인 최적화 방법도 함께 정리했습니다.
핵심 내용
- 게임 엔진 대신 React, DOM, Lottie로 웹뷰 게임을 구현한 사례
- Lottie JSON 레이어 경로를 런타임에 교체해 캐릭터 조합을 하나의 파일로 처리한 방식
- iOS 웹뷰 깜빡임, 타이핑 리플로우, 배터리·발열 문제를 중심으로 한 최적화 경험
해결 방법
- 이미지 레이어를 img 쌓기 대신 background-image로 전환해 iOS 렌더링 불안정 완화
- 타이핑 효과를 문자 추가가 아닌 opacity 변경으로 구현해 레이아웃 재계산 최소화
- CSS 애니메이션, translate3d, 상태 분리로 메인 스레드 부담과 불필요한 리렌더링 감소