네이티브 앱 게임의 문제
스토어 등록에 2-7일, 심사 리젝 가능성, 30% 수수료. 하이퍼캐주얼 게임은 수명이 짧아서 이 사이클이 치명적입니다.
광고 A/B 테스트를 하려면 빌드를 바꿔가며 스토어에 올려야 합니다. 한 번 테스트에 일주일씩 걸리면 경쟁에서 밀립니다.
광고 A/B 테스트를 하려면 빌드를 바꿔가며 스토어에 올려야 합니다. 한 번 테스트에 일주일씩 걸리면 경쟁에서 밀립니다.
WebGL이 바꾸는 것
WebGL 게임은 URL 하나로 즉시 플레이되죠. 설치 과정이 없으니 광고에서 게임까지의 전환율이 네이티브 대비 3-5배 높다는 데이터가 있습니다.
업데이트는 서버 배포로 끝납니다. 오늘 버그를 고쳐서 내일 모든 유저에게 적용 가능하죠.
업데이트는 서버 배포로 끝납니다. 오늘 버그를 고쳐서 내일 모든 유저에게 적용 가능하죠.
퍼블리셔들이 WebGL을 쓰는 이유
슈퍼센트 같은 하이퍼캐주얼 퍼블리셔는 빠른 검증이 생명예요. 처음에 좀 헷갈리는데 게임 컨셉을 영상으로 만들어 광고를 돌리고, 반응이 좋으면 실제 개발에 들어갑니다.
WebGL이면 프로토타입을 바로 플레이어블 광고로 쓸 수 있죠. 영상이 아닌 실제 게임을 광고에 넣는 거죠. CPI(설치당 비용) 측정이 훨씬 정확해집니다.
WebGL이면 프로토타입을 바로 플레이어블 광고로 쓸 수 있죠. 영상이 아닌 실제 게임을 광고에 넣는 거죠. CPI(설치당 비용) 측정이 훨씬 정확해집니다.
엔진별 WebGL 지원 현황
Unity WebGL은 가장 성숙한 옵션이지만 빌드 크기가 큽니다. 최소 10-15MB는 나옵니다. 하이퍼캐주얼에는 과한 편입니다.
PlayCanvas는 웹 네이티브 엔진예요. 빌드 크기가 1-3MB로 작고 로딩이 빠릅니다. HTML5 Canvas + JS로 직접 만드는 방법도 있지만 생산성이 떨어집니다.
PlayCanvas는 웹 네이티브 엔진예요. 빌드 크기가 1-3MB로 작고 로딩이 빠릅니다. HTML5 Canvas + JS로 직접 만드는 방법도 있지만 생산성이 떨어집니다.
JavaScript
// 엔진별 WebGL 빌드 크기 비교 (간단한 2D 게임 기준)
//
// | 엔진 | 빌드 크기 | 초기 로딩 (4G) | 특징 |
// |--------------|----------|--------------|------------------|
// | Unity WebGL | 10-15MB | 3-5초 | 풀 기능, 무거움 |
// | PlayCanvas | 1-3MB | 0.5-1초 | 웹 네이티브, 가벼움 |
// | Phaser 3 | 0.5-2MB | 0.3-0.8초 | 2D 특화, JS |
// | Three.js | 0.5-1MB | 0.3-0.5초 | 3D 라이브러리 |
// | Raw Canvas | <0.5MB | <0.3초 | 직접 구현 필요 |성능은 괜찮은가
2024년 기준 모바일 브라우저의 WebGL 2.0 지원율은 95% 이상입니다. 저사양 기기에서도 2D 캐주얼 게임은 60fps가 나옵니다.
물론 AAA급 3D 게임은 아직 어렵습니다. 하지만 하이퍼캐주얼, 퍼즐, 방치형 게임은 WebGL로 충분합니다.
물론 AAA급 3D 게임은 아직 어렵습니다. 하지만 하이퍼캐주얼, 퍼즐, 방치형 게임은 WebGL로 충분합니다.
즉시 A/B 테스트의 위력
WebGL의 진짜 강점은 테스트 속도예요. 게임 밸런스를 서버에서 바꾸고, 유저 그룹별로 다른 버전을 보여줄 수 있습니다.
네이티브 앱이면 빌드 두 개를 올려서 스토어 심사를 기다려야 해요. WebGL이면 URL 파라미터 하나로 분기가 가능하죠.
네이티브 앱이면 빌드 두 개를 올려서 스토어 심사를 기다려야 해요. WebGL이면 URL 파라미터 하나로 분기가 가능하죠.
JavaScript
// URL 기반 A/B 테스트 예시
const params = new URLSearchParams(window.location.search);
const variant = params.get('v') || 'A';
// 서버에서 밸런스 데이터 로드
const config = await fetch(`/api/config?variant=${variant}`);
const balance = await config.json();
// 게임에 적용
game.setDifficulty(balance.difficulty);
game.setRewardMultiplier(balance.rewardMultiplier);
// 결과 추적
analytics.track('game_start', { variant, timestamp: Date.now() });Flutter 허브앱 + WebGL 조합
Flutter 앱을 게임 런처로 쓰고 실제 게임은 WebGL로 돌리는 구조를 실험하고 있습니다. 경험상 로비, 상점, 소셜 기능은 Flutter가 훨씬 빠르게 만들 수 있어요.
게임 코어만 WebView로 로드하면 네이티브 앱의 UX와 WebGL의 배포 유연성을 모두 얻을 수 있어요.
게임 코어만 WebView로 로드하면 네이티브 앱의 UX와 WebGL의 배포 유연성을 모두 얻을 수 있어요.
남은 과제
오디오 재생이 브라우저마다 다릅니다. iOS Safari는 유저 인터랙션 없이 소리를 재생할 수 없습니다. 진동 피드백도 제한적입니다.
오프라인 지원도 과제입니다. Service Worker로 캐싱하면 어느 정도 가능하지만 네이티브만큼 안정적이지는 않죠. 그래도 웹 플랫폼은 매년 빠르게 발전하고 있죠.
오프라인 지원도 과제입니다. Service Worker로 캐싱하면 어느 정도 가능하지만 네이티브만큼 안정적이지는 않죠. 그래도 웹 플랫폼은 매년 빠르게 발전하고 있죠.