Kakao Games: Friends Time Web App Development: Applying SPA and Lazy Loading Instead of Native

Kakao Games revealed the technical challenges and solutions encountered while developing Friends Time, a real-time rock-paper-scissors quiz show service, as a web app. Initially, a native implementation within the KakaoTalk game tab was considered, but KakaoTalk's long update cycle did not align with the service's weekly operations, leading to the selection of a web app as Plan B.

Web App Limitations and SPA Strategy

While web apps offer the advantage of running via a link without installation, they suffer from slow initial loading and reduced animation performance due to the need to fetch all resources over the network. To overcome this, Friends Time adopted a Single Page Application (SPA) structure, providing a seamless navigation experience without separate loading screens during page transitions.

Resource Optimization with Webpack

To improve initial startup speed, Webpack was used to manage static resources. Specifically, Lazy Loading was implemented to dynamically load modules not included in the initial bundle when needed by the user. By utilizing Vue.js dynamic imports, unnecessary initial resource loading was reduced, and webpack-bundle-analyzer was used to analyze bundle sizes, removing unnecessary packages such as moment.js that occupied excessive space.

Image Preloading and Animation Control

To prevent blank screens caused by image loading delays in large-scale concurrent access environments, a preload strategy was employed to fetch images required for the next screen before the transition. Additionally, when running sprite animations, the animation was paused until image loading was complete, displaying a static image to prevent visual glitches. Sentry was introduced to track client-side script errors in real time and improve debugging efficiency.