뱅크샐러드 공식 블로그 | 메인 · 2026. 01. 15.

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

AI 엔지니어링 브리핑

게임 엔진 없이도 React, DOM, Lottie 같은 웹 기술만으로 캐릭터 꾸미기와 애니메이션이 있는 모바일 웹뷰 게임을 만들고 성능 문제까지 해결한 경험을 소개합니다.

문제 & 배경

문제 & 배경: 익숙하지 않은 게임 엔진을 새로 배우지 않고도 많은 캐릭터 조합과 애니메이션을 구현해야 했고, iOS 웹뷰에서는 화면 깜빡임과 배터리 소모·발열 문제까지 발생했습니다.

기술 & 해결책

기술 & 해결책: Lottie JSON의 이미지 경로를 실행 중에 바꿔 하나의 애니메이션 파일로 여러 캐릭터 조합을 표현하고, 이미지 레이어는 background-image로 합쳤으며, 글자 효과와 움직임은 레이아웃 재계산이 적은 opacity·CSS 애니메이션 중심으로 구현했습니다.

교훈 & 주의점

교훈 & 주의점: 익숙한 웹 기술도 충분히 게임에 활용할 수 있지만, 모바일에서는 기기별 렌더링 차이와 성능을 반드시 확인하고 자주 바뀌는 상태를 작은 컴포넌트로 분리해 불필요한 화면 갱신을 줄여야 합니다.

내용이 비슷해요

내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.