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

Context

게임 엔진 경험이 없는 웹 개발팀이 게이미피케이션 서비스 개발을 요구받았으며, Phaser.js나 Pixi.js 같은 새로운 게임 엔진 도입은 러닝 커브와 일정상 리스크가 컸습니다. 또한 캐릭터 머리, 옷, 안경 등의 조합이 매우 많아서 모든 조합마다 애니메이션 파일을 제작하는 것은 현실적이지 않았습니다.

Technical Solution

• Lottie JSON 런타임 조작을 통한 동적 캐릭터 조합: Lottie JSON의 assets 배열 내 이미지 경로(p 필드)를 동적으로 교체하여 하나의 파일로 다양한 조합 표현
• iOS 웹뷰 렌더링 성능 개선: img 태그를 background-image로 변경하여 DOM 트리 조작 대신 CSS 스타일 변경만 발생하도록 구조 변경
• 타이핑 효과 최적화: 글자를 처음부터 모두 렌더링하고 opacity만 변경하는 방식으로 매번 발생하던 Reflow 제거
• CSS 애니메이션 우선 사용: Framer Motion 대신 CSS @keyframes 사용으로 메인 스레드 부하 제거 및 백그라운드 탭에서 자동 프레임 감소
• GPU 레이어 생성 및 컴포넌트 상태 분리: translate3d와 will-change로 GPU 레이어 생성, 코인 카운터 같이 자주 업데이트되는 값을 별도 컴포넌트로 분리하여 불필요한 리렌더링 방지