React, Lottie로 웹 게임을? 뱅크샐러드 프론트엔드 개발 비법 공개!
React, DOM, Lottie를 활용하여 웹뷰 환경에서 게임을 개발, 웹 게임 엔진 미사용(Web Game Engine Unused)이라는 차별점
Lottie JSON을 런타임에 조작하여 캐릭터 커스터마이징(Character Customization)의 유연성을 확보, 애니메이션 조합(Animation Combination)의 효율성 증대
iOS 웹뷰 렌더링(iOS Webview Rendering) 문제 해결을 위해 `img` 대신 `background-image` 사용, 화면 깜빡임(Screen Flickering) 현상 개선
타이핑 효과(Typing Effect) 최적화를 위해 `opacity` 조절, Reflow(Reflow) 최소화를 통해 성능 향상
CSS 애니메이션(CSS Animation)과 `translate3d`를 활용하여 배터리 소모(Battery Consumption) 감소 및 GPU 레이어(GPU Layer) 활용
Lottie JSON 조작을 통한 캐릭터 커스터마이징
본문에서는 Lottie JSON 파일의 구조를 분석하여 런타임에 이미지 에셋 경로를 동적으로 변경하는 방식으로 캐릭터 커스터마이징(Character Customization) 기능을 구현했다.
Lottie JSON은 이미지 에셋을 `assets` 배열 내 경로로 관리, 이 경로를 자바스크립트(JavaScript)로 변경
레이어 네이밍 규칙(Layer Naming Rule)을 통해 디자이너와 개발자 간 협업 효율 증대
JSON 조작(JSON Manipulation)을 통해 하나의 Lottie 파일로 다양한 조합 표현 가능
결과적으로 애니메이션 리소스(Animation Resource) 관리 효율성을 높이고, 유연한 캐릭터 조합을 가능하게 했다.
iOS 웹뷰 렌더링 성능 최적화
iOS 웹뷰에서 화면 깜빡임(Screen Flickering) 문제를 해결하기 위해 `img` 태그 대신 `background-image`를 사용했다.
`img` 태그는 `absolute inset-0 object-cover` 스타일 적용 시 iOS에서 성능 문제 발생
`background-image`는 스타일 변경만 발생, DOM 트리(DOM Tree) 재구성이 불필요
CSS를 활용하여 이미지 로딩 및 렌더링 최적화
이러한 방식으로 렌더링 성능(Rendering Performance)을 개선하고, 부드러운 사용자 경험을 제공했다.
타이핑 효과 최적화: Reflow 최소화
글자 타이핑 효과 구현 시 Reflow(Reflow)를 최소화하여 성능을 향상시켰다.
초기 렌더링(Initial Rendering): 모든 글자를 렌더링 후 `opacity` 조절
`opacity` 변경은 GPU에서 처리, 메인 스레드(Main Thread) 부하 감소
`useState`를 사용하여 상태 관리
결과적으로 부드러운 애니메이션(Smooth Animation)을 구현하고, 성능 저하(Performance Degradation)를 방지했다.
CSS 애니메이션 활용과 GPU 레이어 생성
CSS 애니메이션(CSS Animation)을 활용하여 배터리 소모(Battery Consumption)를 줄이고, `translate3d`를 사용하여 GPU 레이어(GPU Layer)를 생성했다.
CSS 애니메이션은 브라우저 컴포지터 스레드(Compositor Thread)에서 처리, 메인 스레드(Main Thread) 영향 최소화
백그라운드(Background) 전환 시 자동 프레임 감소 및 애니메이션 중지
`translate3d`를 사용하여 GPU 레이어 생성, 렌더링 성능 향상
이러한 최적화를 통해 모바일 환경(Mobile Environment)에서 부드럽고 효율적인 애니메이션을 구현했다.
컴포넌트 분리를 통한 불필요한 리렌더링 방지
코인 카운터(Coin Counter)와 같이 자주 업데이트되는 값을 별도 컴포넌트로 분리하여 불필요한 리렌더링(Unnecessary Re-rendering)을 방지했다.
상태 분리(State Separation): 변경 빈도가 높은 값은 별도 컴포넌트로 관리
`React.memo` 또는 `useMemo`를 활용하여 리렌더링 최적화
불필요한 리렌더링 방지를 통해 성능 개선
결과적으로 UI 렌더링 성능(UI Rendering Performance)을 향상시키고, 사용자 경험을 개선했다.
