최근에 출시한 MDN의 프로그레시브 웹 앱 핵심 가이드를 통해 모바일 기기에서의 웹 페이지를 네이티브처럼 반응하도록 보여지고 느껴지도록 만드는것이 어느때보다 쉬워졌습니다. 하지만 게임은 어떤가요?

이 문서에서는 웹 API에 내장된 PWA 기능들을 사용하여 최신 웹 개발 환경에서 프로그레시브 웹 게임의 개념이 실용적이고 실현가능한지 확인해 볼 것입니다.

Enclave Phaser 템플릿(EPT)를 살펴봅시다. Phaser 게임 엔진을 사용해 제가 만든 HTML5 게임을 위한 무료 오픈 소스 모바일 보일러플레이트입니다. 저는 모든 Enclave 게임 프로젝트를 구축하는데 이를 직접 사용하고 있습니다.

이 템플릿은 최근 몇몇 PWA 기능들로 업그레이드되었습니다. Service Workers는 게임을 캐싱하여 오프라인에서 사용할 수 있는 기능을 제공하며, manifest 파일은 홈 화면에 설치할 수 있도록 해줍니다. 우리는 또한 알림 등에 대한 접근도 제공합니다. 이러한 PWA 기능들은 이미 템플릿에 내장되어 있으므로 여러분은 게임 개발 자체에 집중하실 수 있습니다.

우리는 이러한 기능들이 오늘날 개발자들이 갖고 있는 문제(홈 화면에 추가하는 것과 오프라인에서 동작하는 것)들을 어떻게 해결하는지 살펴볼 것입니다. 이 문서의 세 번째 파트에서는 프로그레시브 로딩의 개념에 대해 소개할 것입니다.

홈 화면에 추가

웹 게임은 모바일에서의 모든 잠재력을 보여줍니다. 특히 우리가 어떤 기능이나 개발자를 위한 지름길(shortcuts)을 만드는 경우 그렇습니다. 홈 화면에 추가 기능은 화면 배치에 대해 네이티브 게임과 경쟁할 수 있으며 모바일 기기에서 일급 객체(first class citizens)로써 동작하는 게임을 쉽게 구축할 수 있게 해줍니다.

프로그레시브 웹 앱은 이 기능을 지원하는 최신 기기에서 설치가 가능합니다. Manifest 파일을 포함하여 이 기능을 사용할 수 있습니다(아이콘, 모달(modal) 및 설치 배너는 ept.webmanifest의 정보를 기반으로 생성됩니다).

{
  "name": "Enclave Phaser Template",
  "short_name": "EPT",
  "description": "Mobile template for HTML5 games created using the Phaser game engine.",
  "icons": [
    {
      "src": "img/icons/icon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    // ...
    {
      "src": "img/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "fullscreen",
  "theme_color": "#DECCCC",
  "background_color": "#CCCCCC"
}

이것만 필요한 것은 아닙니다. 홈 화면에 추가 문서에서 모든 세부 사항에 대해 확인하시기 바랍니다.

오프라인 능력

개발자들은 종종 데스크탑 게임(또는 PC와 모니터로 공개된 모바일 친화적인 게임)을 오프라인에서 동작하도록 하는데 문제를 갖습니다. Wifi를 신뢰할 수 없는 컨퍼런스에서 게임을 시연할때 특히 어려움이 있습니다! 모범 사례는 미리 계획하고, 게임의 모든 파일을 로컬에서 사용 가능하도록하여 오프라인에서 실행할 수 있게 하는 것입니다.

오프라인 빌드는 여러분이 파일을 직접 관리해야하고, 버전을 기억해야하며 최신 패치나 이전 회의에서의 수정된 버그를 적용하거나 하드웨어 설치등을 해결해야하기 때문에 까다로울 수 있습니다. 이는 더 많은 준비와 시간을 필요로합니다.

웹 게임은 신뢰할 수 있는 연결이 갖추어졌을 때 온라인에서 처리하기가 더 쉽습니다. 브라우저에 URL을 넣기만하면 최신 버전의 게임을 지체없이 실행할 수 있습니다. 네트워크 연결이 문제입니다. 오프라인 솔루션을 갖는 것은 훌륭할 것입니다.

좋은 소식은 프로그레시브 웹 앱이 도와줄 수 있다는 것입니다. Service Worker는 자원을 캐싱하여 오프라인에서 제공할 수 있으므로 불안정한 네트워크 연결은 이전과 달리 문제가 되지 않습니다.

Enclave Phaser 템플릿안의 Service Worker 파일은 필요한 모든 것을 포함하고 있습니다. 이는 캐싱할 파일의 목록으로 시작합니다.

var cacheName = 'EPT-v1';
var appShellFiles = [
  './',
  './index.html',
  // ...
  './img/overlay.png',
  './img/particle.png',
  './img/title.png'
];

그 후 캐시에 모든 파일을 추가하는 install 이벤트를 처리합니다.

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(appShellFiles);
    })
  );
});

다음으로, 필요한 경우 캐시로부터 컨텐츠를 제공하거나 새로운 것을 추가하는 fetch 이벤트가 옵니다.

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
      return r || fetch(e.request).then(function(response) {
        return caches.open(cacheName).then(function(cache) {
          cache.put(e.request, response.clone());
          return response;
        });
      });
    })
  );
});

Service Worker 문서에서 자세한 설명을 확인하시기 바랍니다.

프로그레시브 로딩

프로그레시브 로딩은 웹 게임 게발에 많은 이점을 제공하는 흥미로운 개념입니다. 프로그레시브 로딩은 기본적으로 백그라운드에서의 레이지(lazy) 로딩입니다. 특정 API에 의존하지 않지만, PWA 접근을 따르며 좀 전에 설명했던 게임에 대한 특정 요구사항과 몇 가지 주요 기능들을 사용합니다.

게임은 리소스 측면에서 앱보다 더 무겁습니다. 작고 가벼운 게임이라고 해도 이미지부터 사운드까지 보통 5-15MB의 자원을 다운로드해야합니다. 순간적으로 이루어지기는 하지만 여전히 모든 것이 다운로드 될 때까지는 로딩 화면을 기다려야합니다. 또는, 플레이어의 연결 상태가 좋지 않을 경우 문제가 발생할 수 있습니다. 다운로드 시간이 길어질수록 게임플레이가 취소되고 탭이 닫힐 확률이 커집니다.

하지만 모든것을 다운로드하는 대신 처음에 정말로 필요한 것만 로딩하고, 나머지는 백그라운드에서 다운로드하면 어떨까요? 이 방법으로 플레이어는 게임의 메인 메뉴를 기존 방식보다 더 빠르게 보게될 것입니다. 플레이어는 게임플레이를 위한 파일들이 백그라운드에서 보이지 않게 불러오는동안 적어도 몇 초 정도는 주위를 둘러볼 것입니다. 정말 빠르게 플레이 버튼을 클릭한다고해도 다른 것들은 로딩하는 동안에 로딩 애니메이션을 보여줄 수 있습니다.

인스턴트 게임은 인기를 얻고 있으며 캐주얼 모바일 HTML5 게임을 개발하는 게임 개발자는 Facebook이나 Google플랫폼에 게임을 올려놓는 것을 고려해야합니다. 특히 초기 파일 크기와 다운로드 시간에 관련해 게임을 즉시 플레이할 수 있도록 지원할 수 있어야 하기 때문에 만족해야할 몇 가지 요구사항이 있습니다.

레이지(lazy) 로딩 기술을 사용하여, 게임은 플레이를 위해 요구되는 데이터의 양을 감안할 때 더 빠르게 느껴질 것입니다. 메인 메뉴 자원이 도착한 후에 대부분의 자원을 로딩하기 위해 미리 빌드된(pre-built) Phaser 프레임워크를 사용해 이러한 결과를 얻을 수 있습니다. 또한 link prefetch/defer 메커니즘을 사용해 여러분 스스로 JavaScript만을 사용해 구현할수도 있습니다. 프로그레시브 로딩을 구현하는 방법은 여러가지가 있습니다. 이는 프로그레시브 웹 앱의 원칙을 따르며 여러분이 선택한 특정 접근법이나 도구에 독립적인 강력한 아이디어입니다.

결론

게임 경험을 향상시킬 수 있는 방법에 대한 아이디어가 있으신가요? 웹 게임의 미래를 만들고 플레이하고 실험해보세요. 공유할 아이디어가 있으시면 여기 의견을 남겨주세요.