Building a Game with React and Lottie

The gamification service "Work Hard, Kim BankSal" was built for a webview using only React, DOM, and Lottie, without a game engine. Phaser.js and Pixi.js were also considered, but given the learning curve and schedule risk, the team chose to solve the problem with technologies they were already familiar with.

The biggest challenge was character customization. With the number of combinations of elements like hair, clothes, and glasses continuing to grow, it was unrealistic to create a separate animation for every possible case. So the team chose to manipulate the assets array of the Lottie JSON at runtime. By setting up a layer naming convention and only changing the asset.p path, a single Lottie file could represent a wide variety of combinations.

During rendering, an issue arose on iOS webview where the screen would flicker and fully reload when the hairstyle list button was pressed. It turned out that stacking img elements with absolute inset-0 object-cover caused performance problems on some iOS devices, and switching to background-image-based rendering resolved the flickering and stuttering.

On mobile webviews, 60FPS alone wasn't enough, and battery consumption and heat also had to be considered. For the text typing effect, instead of adding text one character at a time, all the text was rendered upfront and only its opacity was changed, reducing layout recalculation. For elements that needed movement, CSS animation was prioritized over JavaScript animation to lower the burden on the main thread.

Additionally, translate3d and will-change were used to take advantage of GPU layers, and frequently changing state like coins was separated into its own component to reduce unnecessary re-renders. Cases requiring complex physics engines or 3D are different, but the team concluded that web technologies alone can cover a surprisingly wide range of areas.