카카오게임즈, 프렌즈타임 웹앱 개발기: 네이티브 대신 SPA와 Lazy Loading 적용

카카오게임즈는 실시간 가위바위보 퀴즈쇼 서비스 프렌즈타임을 웹앱으로 개발하며 겪은 기술적 도전과 해결 과정을 공개했다. 초기에는 카카오톡 게임탭 내 네이티브 구현을 고려했으나, 카카오톡의 긴 업데이트 주기가 매주 진행되는 서비스 운영과 맞지 않아 Plan B로 웹앱을 선택했다.

웹앱의 한계와 SPA 전략

웹앱은 설치 없이 링크만으로 실행 가능하다는 장점이 있지만, 모든 자원을 네트워크로 받아야 해 초기 로딩이 느리고 애니메이션 성능이 떨어지는 단점이 있다. 이를 극복하기 위해 프렌즈타임은 Single Page Application(SPA) 구조를 채택해 화면 전환 시 별도의 로딩 없이 자연스러운 이동 경험을 제공했다.

Webpack을 통한 자원 최적화

초기 구동 속도를 높이기 위해 Webpack을 활용해 정적 자원을 관리했다. 특히 Lazy Loading을 적용해 초기 번들에 포함되지 않은 모듈을 사용자가 필요로 하는 시점에 동적으로 불러오도록 구현했다. Vue.js의 dynamic import를 활용해 불필요한 초기 자원 로딩을 줄이고, webpack-bundle-analyzer로 번들 크기를 분석해 과도한 용량을 차지하는 moment.js 등 불필요한 패키지를 제거했다.

이미지 프리로드와 애니메이션 제어

대규모 동시 접속 환경에서 이미지 로딩 지연으로 인한 빈 화면을 방지하기 위해, 화면 전환 전 다음 화면에 필요한 이미지를 미리 불러오는 프리로드 전략을 사용했다. 또한 스프라이트 애니메이션 실행 시 이미지 로딩이 완료될 때까지 애니메이션을 정지시키고 정지된 이미지를 노출하는 방식으로 깨짐 현상을 방지했다. Sentry를 도입해 클라이언트 측 스크립트 오류를 실시간으로 추적하고 디버깅 효율을 높였다.