가이드

HTML5 게임 웹사이트 호스팅: 업로드, 삽입, 문제 해결

정적 게임 폴더를 위한 실전 안내입니다. 어디에 올리고, 어떻게 열고, 페이지에 어떻게 넣고, 시작되지 않을 때 무엇을 확인하는지 설명합니다.

판다 Polarzinho가 서버에서 빛나는 관을 통해 게임 상자를 밀어 보내고 있으며, 그 끝의 브라우저 창에는 떠 있는 섬이 나오는 게임이 보입니다.

HTML5 게임을 호스팅하는 방법을 한 문장으로 말하면 이렇습니다. game/ 폴더 안의 내용을 정적 파일을 제공하는 웹 호스트에 업로드하고, 하위 폴더를 있는 그대로 유지한 채, 그 폴더의 주소를 브라우저에서 여는 것입니다. 저희 마켓플레이스의 모든 에디션에서 바로 호스팅할 수 있는 game/ 폴더는 그대로 실행됩니다. PHP, 데이터베이스, 빌드 단계, 계정이 필요 없으므로 호스트는 플레이어의 브라우저에 파일을 전달하기만 하면 됩니다.

모든 것이 순조로울 때는 이것이 작업의 전부입니다. 이 글은 그렇지 않은 날을 다룹니다. 빈 화면, 404 오류, MIME 타입 메시지, 아무것도 보여 주지 않는 iframe 같은 경우입니다. 저희는 이 템플릿을 판매하므로, 자사 패키지를 위한 현장 매뉴얼로 읽어 주십시오. 저희는 Gridspark와 Velvet Pool 사본을 임시 로컬 서버에서 제공해 보았고, Gridspark를 여러 방식으로 일부러 망가뜨려 보았으며, 다른 에디션의 공개 매뉴얼도 읽었습니다. 설명이 저희 테스트가 아니라 매뉴얼에서 온 경우에는 그렇게 밝혀 두었습니다.

HTML5 게임 호스팅에 실제로 필요한 것

정적 호스트는 파일을 저장해 두었다가 요청이 오면 브라우저에 전달합니다. 게임을 실행하는 것은 호스트가 아니라 플레이어의 브라우저입니다. 그래서 저희 에디션의 요구 사항이 그토록 단순합니다. 최신 브라우저, HTTP 또는 HTTPS로 정적 파일을 제공하는 호스트가 필요하고, 플레이하는 데 PHP, 데이터베이스, 계정은 필요 없습니다. game/ 폴더는 이미 빌드되어 있으므로 게시하는 데 npm이나 빌드 단계가 필요하지 않습니다.

시작하기 전에 알아 둘 한계가 두 가지 있습니다. 일부 에디션에는 정적이지 않은 선택형 구성 요소가 있습니다. Zabum과 Ricopop은 PHP 7.4 이상과 쓰기 가능한 폴더가 필요한 선택형 리더보드를 제공하며, TypeScript 에디션(Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z, Zabum)은 소스를 수정하고 다시 빌드하려는 경우에만 Node.js가 필요하며 버전은 각 매뉴얼에 나와 있습니다. Velvet Pool, Puttide, Ricopop, Gridspark는 일반 JavaScript로 제공되어, 수정한 내용과 업로드하는 파일 사이에 컴파일 단계가 없습니다. 제공된 그대로 게임을 게시하는 데에는 이 중 어느 것도 필요하지 않습니다. 또한 호스팅 자체는 구매에 포함되지 않습니다. 스토어 약관은 호스팅과 구매자 서버에 대한 설치를 작업 전에 견적을 드리는 별도 서비스로 분류하며, 지원은 제공된 파일의 설치와 사용에 관한 문의를 다룹니다.

올라가는 것과 컴퓨터에 남는 것은 다음과 같습니다.

  • game/ 안의 모든 것을 업로드합니다. index.html, 스크립트, 스타일, 이미지, 사운드, 글꼴입니다.
  • source/(수정 가능한 개발자용 사본), documentation/(매뉴얼), ZIP 파일 자체는 제외합니다. Zabum 매뉴얼은 source/를 실수로 업로드하는 것을 main.tsx 같은 404 오류의 원인으로 꼽습니다.
  • 패키지에 포함된 서드파티 라이선스 고지문은 약관이 요구하는 대로 제품과 함께 보관하십시오.

예시로 사용하는 에디션 Gridspark 보기

HTML5 게임 호스팅: ZIP에서 플레이 가능한 페이지까지 가장 짧은 길

이 단계들은 Velvet Pool, Puttide, Gridspark, Sunset Rally 매뉴얼의 설치 장을 따르며, 테스트 후 저희가 추가한 확인 사항이 더해졌습니다. 가장 자주 서비스하고 망가뜨려 본 에디션이기 때문에 Gridspark를 예시로 삼았습니다.

  1. 컴퓨터에서 패키지의 압축을 풉니다. game/(게시할 폴더), source/(수정 가능한 사본), documentation/(매뉴얼)이 있습니다.
  2. 필수는 아니지만 부담 없는 단계로 로컬에서 테스트합니다. game/ 안에서 터미널을 열고 python -m http.server 8765를 실행한 뒤 http://localhost:8765/에 접속합니다. 거기서 플레이되면 파일은 정상이며, 이후의 문제는 호스트에 있습니다.
  3. 지금 최종 주소를 정합니다. 예를 들면 https://your-site.example/games/gridspark/입니다. 게임 내부 경로가 상대 경로이므로 하위 폴더도 동작하며, Gridspark 매뉴얼은 public_html/games/gridspark/를 제안합니다.
  4. 호스트의 파일 관리자나 FTP 클라이언트로 game/의 내용을 그 폴더에 업로드하고, 모든 하위 폴더를 그대로 유지합니다. index.html은 한 단계 더 깊은 곳이 아니라 그 폴더 바로 안에 있어야 합니다.
  5. 마지막 슬래시를 포함해 https로 폴더 주소를 엽니다. Gridspark에서는 시작 화면을 탭하고(브라우저는 오디오를 허용하기 전에 터치나 클릭을 기다립니다) 플레이를 누릅니다.
  6. 한 번 움직인 뒤 페이지를 새로고침하여 메뉴에 이어하기가 나타나는지 확인합니다. 브라우저가 해당 주소에 대해 진행 상황을 저장하고 있다는 증거입니다.
  7. 사이트에서 그 폴더로 링크를 걸거나 페이지에 삽입합니다(아래 iframe 부분 참조).

완성된 Gridspark 폴더에는 index.html, style.css, gridspark.config.js, src/, assets/가 나란히 있으며, 매뉴얼은 이들을 함께 두라고 안내합니다. 다른 에디션은 구성이 다르지만(Velvet Pool에는 스타일 시트 하나 대신 css/와 assets/가 있습니다) 규칙은 같습니다. 폴더를 받은 그대로 업로드하십시오.

index.html을 더블클릭하면 빈 페이지가 나오는 이유

저희가 열어 본 에디션은 코드를 ES 모듈로 불러오는데, 브라우저는 file:// 주소에서 모듈을 불러오지 않습니다. Chromium에서 Gridspark를 디스크에서 직접 열었더니 어둡고 빈 화면이 나왔습니다. 콘솔에는 스크립트가 CORS 정책에 의해 차단되었다는 메시지가 나왔고, 사유는 "Cross origin requests are only supported for protocol schemes"(http, https 등)였습니다. 같은 폴더를 로컬 웹 서버로 제공하자 시작 화면이 바로 나타났습니다. Velvet Pool, Puttide, Sunset Rally, Gridspark 매뉴얼은 모두 같은 말을 합니다. 게임을 file://에서 열지 마십시오.

  • 동작하지 않음: file:///C:/Users/you/games/gridspark/index.html
  • 동작함: 로컬 테스트 서버의 http://localhost:8765/ 또는 호스트의 https://your-site.example/games/gridspark/.

저희는 Chromium에서만 테스트했습니다. 매뉴얼은 이 차단을 일반적인 브라우저가 하는 일로 설명하므로, 어디서나 그렇다고 가정하고 계획하십시오.

iframe으로 페이지에 게임 삽입하기

이미 있는 페이지 안에 게임을 보여 주려면 iframe이 업로드한 폴더를 가리키게 하십시오. 저희가 테스트한 태그는 다음과 같습니다.

<iframe src="https://your-site.example/games/gridspark/" title="Gridspark" allow="fullscreen; autoplay" width="960" height="540" style="border:0"></iframe>

  • src: https와 마지막 슬래시를 포함한 폴더의 전체 주소.
  • title: 짧은 이름. 스크린 리더가 프레임을 설명할 때 사용합니다.
  • allow="fullscreen; autoplay": 매뉴얼은 필요한 경우 iframe에서 전체 화면과 자동 재생을 허용하라고 안내합니다. 저희 테스트에서 이 속성이 없는 다른 주소의 프레임은 전체 화면이 비활성화되었고, Gridspark는 전체 화면 버튼을 그냥 숨겼습니다. 오래된 allowfullscreen 속성도 allow와 같은 결과였습니다. 페이지와 같은 주소의 프레임은 어느 쪽이든 전체 화면이 가능합니다.
  • sandbox 속성은 쓰지 않습니다. sandbox="allow-scripts"만 쓰면 Gridspark가 시작되지 않았습니다. 프레임의 출처가 null이 되어 브라우저가 게임 자체의 스크립트를 차단했고 로컬 스토리지가 보안 오류를 냈습니다. allow-same-origin을 추가하면 동작하지만, MDN은 같은 출처의 프레임에서 이 조합이 보호를 없앤다고 경고하므로, 직접 호스팅하는 게임에서는 sandbox를 빼십시오.

휴대폰에 맞는 크기로 만들기

고정된 16:9 상자는 데스크톱에서는 맞아 보이지만 휴대폰에서는 맞지 않습니다. 너비 390px에서 aspect-ratio 16/9인 iframe은 높이가 219px뿐이어서 Gridspark의 메뉴가 일일 챌린지 버튼 아래에서 잘렸습니다. 프레임의 높이를 화면 높이의 4분의 3인 75svh로 주자 메뉴 전체가 보였습니다. 페이지 자체에도 viewport 메타 태그가 필요합니다. 저희가 열어 본 패키지 여섯 개는 모두 자체 index.html에 이를 갖고 있으며, 그래서 직접 열었을 때 게임이 화면에 맞게 조절됩니다.

나란히 놓인 두 휴대폰 화면. 각각 iframe 안에 Gridspark 시작 메뉴가 있는 페이지를 보여 줍니다. 왼쪽은 메뉴가 잘리는 낮은 16:9 프레임, 오른쪽은 메뉴 전체가 보이는 높은 프레임입니다.
같은 게임, 같은 휴대폰 너비. 왼쪽: 16:9 iframe. 오른쪽: 높이 75svh의 프레임.

게임은 주변 페이지 없이도 자체 주소에서 동작하므로, 그 주소를 여는 일반 링크는 언제나 유효한 대안입니다.

같은 방식으로 삽입되는 3D 에디션 Velvet Pool 보기

WordPress와 기타 사이트 빌더

폴더를 호스팅하는 일과 페이지에 보여 주는 일은 별개의 작업이며, WordPress에서는 서로 다른 두 도구를 씁니다. 아래 내용은 모두 WordPress 문서와 개발자 레퍼런스에서 온 것이며, 저희가 WordPress를 직접 실행해 본 것은 아닙니다.

  1. 호스트의 파일 관리자나 FTP로 사이트의 폴더 트리에 폴더를 업로드합니다(예: WordPress 폴더 옆의 games/ 폴더). 미디어 라이브러리를 통해서는 안 됩니다. 사용자에게 unfiltered_html 권한이 없으면 WordPress 코드가 허용 업로드 형식에서 .html과 .js를 제거합니다.
  2. 페이지를 건드리기 전에 폴더의 주소를 단독으로 엽니다. WordPress가 문서화한 기본 Apache 규칙은 일치하는 파일이나 폴더가 없을 때만 요청을 index.php로 보내므로(!-f와 !-d 조건이 그것을 검사합니다), 업로드한 폴더는 있는 그대로 제공됩니다.
  3. 사용자 지정 HTML 블록에 iframe을 추가합니다. WordPress 문서에 따르면 unfiltered_html 권한이 없는 사용자(예를 들어 기여자)가 글을 저장하면 iframe 태그가 제거됩니다. 저장 후 프레임이 사라진다면 누가 페이지를 편집했는지 확인하십시오.

다른 사이트 빌더와 CMS: 테스트해 보지 않았으며 어느 것에 대해서도 단정하지 않습니다. 게임에는 어디서나 두 가지가 필요합니다. 업로드한 폴더를 둘 장소와 iframe을 받아들이는 삽입 요소입니다. 빌더가 둘 중 하나도 제공하지 않는다면, 정적 파일을 제공하는 어느 곳에든 폴더를 호스팅하고 그 주소로 링크하십시오.

시작되지 않을 때: 문제 해결 목록

무엇이든 바꾸기 전에 브라우저의 개발자 도구(대부분의 데스크톱 브라우저에서 F12)를 열어 콘솔과 네트워크 탭을 보십시오. 아래의 각 실패는 그곳에 빨간 줄을 남기며, 그 안의 파일 이름이 대개 원인을 가리킵니다.

빈 화면

다음 순서로 확인하십시오. 주소가 http:// 또는 https://로 시작하는지, 콘솔에 빨간 줄이 없는지, 파일 이름의 대소문자가 정확히 유지되었는지, 그리고 3D 에디션이라면 WebGL2를 사용할 수 있는지입니다(Velvet Pool 매뉴얼은 하드웨어 가속을 켜라고 안내합니다). Linux 호스트는 Game.js와 game.js를 서로 다른 두 파일로 취급하지만 Windows는 그렇지 않으므로, PC에서 동작하던 폴더가 업로드 후 깨질 수 있습니다. Velvet Pool과 Zabum 매뉴얼은 모두 대소문자에 대해 경고합니다.

src/main.js, 글꼴, 이미지에 대한 404

폴더의 일부가 도착하지 않았거나 한 단계 더 깊은 곳에 도착한 것입니다. index.html, style.css, 설정 파일만 업로드하여 재현해 보았는데, 화면은 빈 채로 남았고 네트워크 탭에는 src/main.js와 모든 글꼴에 대한 404가 나열되었습니다. 빠진 폴더를 업로드하거나, index.html이 여는 주소에 오도록 내용을 한 단계 위로 옮기십시오. 이미지나 사운드가 없거나 손상된 경우 Zabum 매뉴얼은 FTP를 바이너리 또는 자동 모드로 쓰거나, ZIP을 업로드한 뒤 호스트의 파일 관리자에서 압축을 푸는 방법을 제안합니다. 404는 파일이 없다는 뜻이며 MIME 문제가 아닙니다.

스타일이 적용되지 않고 거대한 아이콘이 보이는 페이지

재작성이나 깔끔한 URL 설정이 마지막 슬래시 없이 폴더를 제공하면 상대 경로가 한 단계 위로 해석됩니다. 리다이렉트 없이 폴더 페이지를 반환하는 테스트 서버로 재현했습니다. 브라우저는 /games/gridspark/ 안의 파일 대신 /games/style.css와 /games/src/main.js를 요청해 404를 받았고, 메뉴는 원시 버튼과 지나치게 큰 아이콘으로 그려졌습니다. 폴더에는 끝 슬래시를 붙여 링크하거나 index.html을 직접 가리키십시오.

스타일이 적용되지 않은 회색 버튼과 지나치게 큰 검은색 아이콘이 있는 흰 페이지를 보여 주는 브라우저 창. 스타일 시트가 없는 Gridspark 메뉴입니다.
리다이렉트하지 않는 서버에서 마지막 슬래시 없는 주소로 연 Gridspark: 스타일 시트도 스크립트도 없습니다.

모듈 스크립트의 MIME 타입 오류

저희 테스트에서 콘솔에는 이렇게 나왔습니다. Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". 브라우저는 모듈 스크립트에 엄격합니다. 매뉴얼은 서버가 .js 파일을 JavaScript MIME 타입으로, .wasm을 application/wasm으로 보내야 한다고 하며, Sunset Rally 매뉴얼은 .mjs를 추가합니다. 네트워크 탭에서 각 파일의 Content-Type을 볼 수 있습니다. 저희가 열어 본 빌드에서 모듈은 .js 파일입니다. 직접 .mjs 파일을 추가했는데 오래된 Apache 설정이 이를 매핑하지 않는다면, 저희 사이트도 쓰는 .htaccess의 한 줄로 해결됩니다.

AddType text/javascript .mjs

테스트 머신의 Apache 2.4.62 타입 표는 이미 js와 mjs를 text/javascript로, wasm을 application/wasm으로 매핑하고 있으므로 기본 설치에서는 이 줄이 필요 없습니다. 다른 서버는 자체 표를 유지하므로 운영하는 분께 문의하십시오.

CORS 정책에 의한 차단

다른 주소에서 불러오는 모듈 스크립트와 글꼴은 그 주소에서 Access-Control-Allow-Origin 헤더를 보내야 합니다. 저희 테스트에서는 한 포트의 페이지가 다른 포트의 모듈 스크립트를 불러오지 못하다가, 두 번째 서버가 헤더를 보내자 불러왔습니다. 실제 해결책은 평범합니다. 게임 파일을 하나의 주소의 한 폴더에 모아 두는 것이며, 패키지가 그렇게 만들어져 있습니다. 다른 사이트의 iframe에 게임을 삽입하는 데에는 CORS가 필요 없습니다. iframe은 게임의 주소를 그냥 불러오기 때문입니다. 삽입 안에서 나는 CORS 오류는 대개 앞서 설명한 sandbox 속성에서 옵니다.

https 페이지의 혼합 콘텐츠

https로 제공되는 페이지는 http로 스크립트나 iframe을 불러올 수 없습니다. 브라우저가 둘 다 차단하며, MDN은 글꼴과 fetch 요청도 차단 대상으로 꼽습니다. iframe의 src와 직접 입력한 모든 전체 주소에 https://를 사용하십시오. 게임 자체의 파일은 상대 경로를 쓰므로 열어 본 주소의 스킴을 따릅니다. https 주소가 아예 열리지 않는다면 먼저 호스트 패널에서 인증서를 활성화하십시오.

iframe이 “연결을 거부했습니다”라고 표시됨

저희 테스트에서 Chromium은 첫 번째 따옴표 안에 차단된 프레임의 주소와 함께 이 줄을 기록했습니다. Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 게임을 호스팅하는 서버가 그 헤더를 보내고 있었습니다. SAMEORIGIN은 같은 주소에서의 삽입만 허용하고 DENY는 어떤 삽입도 허용하지 않으며, Content-Security-Policy 헤더의 frame-ancestors 규칙도 비슷한 역할을 합니다. 게임 폴더에 대한 헤더를 바꾸거나 페이지와 게임을 하나의 주소에서 제공하십시오.

처음에 소리가 나지 않음

브라우저는 첫 탭이나 클릭 전까지 오디오를 차단하며, 그래서 Gridspark는 탭하여 시작하는 화면으로 열립니다. 한 번 탭한 뒤 볼륨과 브라우저의 권한을 확인하십시오.

바로 호스팅할 수 있는 빌드가 있는 골프 에디션 Puttide 보기

반쯤 옛 버전이 제공되지 않게 게임 업데이트하기

브라우저는 스크립트를 캐시하므로, 업로드한 뒤에도 본인이나 플레이어가 여전히 옛 게임을 보고 있을 수 있습니다. Gridspark 매뉴얼은 이렇게 규칙을 정합니다. 수정한 내용을 백업하고, 플레이 가능한 파일을 한 세트로 교체하고, 테스트하고, 호스트가 옛 모듈을 캐시한다면 강력 새로고침을 합니다. 옛 모듈과 새 모듈을 섞지 마십시오. 서로를 불러오는 작은 파일 여러 개로 이루어진 게임은 중간까지만 업데이트하면 안 되는 대상입니다.

서비스 워커가 있는 에디션은 자체 캐시를 유지합니다. Zabum은 PWA이므로 업데이트 후 강력 새로고침(Ctrl 또는 Cmd + Shift + R)을 하십시오. 오디오 파일을 교체했다면 sw.js의 캐시 이름을 바꾸고(매뉴얼의 예시는 zabum-v5에서 zabum-v6) 그 파일을 업로드하십시오. 사이트가 CDN 뒤에 있다면 CDN 캐시도 비우십시오. 저희가 읽은 매뉴얼 중 PWA는 Zabum뿐이며, Velvet Pool과 Puttide 매뉴얼은 자사 게임이 설치형 오프라인 앱이 아니라고 분명히 밝힙니다.

파일을 교체하기 전에 변경 이력을 읽고, 수정한 것은 모두 사본을 보관하십시오. 저장 데이터는 업로드하는 폴더가 아니라 각 플레이어의 브라우저에 있으므로, 파일을 교체해도 삭제되지 않습니다.

선택형 PHP 리더보드가 있는 PWA 에디션 Zabum 보기

진행 상황이 저장되는 곳, 그리고 브라우저를 비우면 생기는 일

이 에디션들에는 계정도 서버 데이터베이스도 없습니다. 설정, 언어, 진행 중인 플레이, 개인 최고 기록은 브라우저의 로컬 스토리지에 있으며 Polar Games로는 아무것도 전송되지 않습니다. Gridspark 매뉴얼은 키를 gridspark.standalone.v1.*로 명시하며, 한 번 움직인 뒤에 저희는 gridspark.standalone.v1.best와 gridspark.standalone.v1.save를 확인했습니다.

이어하기 버튼, 새 게임 링크, 일일 챌린지 버튼, 저장된 최고 점수 3,257이 표시된 Gridspark 메인 메뉴.
다시 방문하면 메뉴에 이어하기와 저장된 최고 점수가 나옵니다. 둘 다 브라우저에서 읽어 옵니다.

스토리지는 폴더가 아니라 주소(프로토콜, 호스트, 포트)에 귀속됩니다. 세 가지 방법으로 확인했습니다. 같은 주소의 다른 폴더에 둔 Gridspark 사본은 같은 저장 값을 읽었습니다. 127.0.0.1 대신 localhost로 연 같은 게임은 빈 상태로 시작했고, 다른 포트의 같은 주소도 마찬가지였습니다. Zabum 매뉴얼은 http와 https, www와 non-www, 하위 도메인이 각각 별도의 스토리지를 가진다고 덧붙입니다.

  • 사이트 데이터나 쿠키를 지우면 저장된 게임과 기록이 삭제됩니다. 시크릿 창에서는 진행 상황이 세션 동안만 유지될 수 있으며, 스토리지가 차단되어도 게임은 계속 실행됩니다.
  • 다른 브라우저나 다른 기기에서는 처음부터 시작합니다. 동기화도 로그인할 계정도 없습니다.
  • 주소를 바꾸면 모두 초기화됩니다. http에서 https로, www에서 non-www로, 새 도메인으로 바꾸는 경우입니다.
  • 같은 주소의 다른 폴더로 게임을 옮기면 저장 데이터는 유지됩니다. Gridspark 테스트에서 확인했습니다.

링크를 공유하기 전의 테스트 체크리스트

  1. 플레이어가 쓰는 브라우저에서 최종 주소를 엽니다. Chromium 기반(Chrome 또는 Edge), Firefox, Safari입니다. 저희 테스트는 Chromium에서만 진행했으므로, 이 목록은 직접 실행해 보셔야 합니다.
  2. 실제 휴대폰에서 먼저 게임의 자체 주소로, 그다음 페이지 안에서 두 방향 모두 열어 봅니다.
  3. 개발자 도구에서 연결 속도를 제한하고 첫 로딩을 지켜봅니다. 로컬 서버에서 압축 없이 제공한 Gridspark는 시작 화면에 이르기까지 약 0.5MB와 26개 요청이 필요했습니다. Chromium을 1.6Mbit/s와 지연 150ms로 제한했을 때 화면은 약 3초 뒤에 나타났습니다. 저희 사본에서 game/ 폴더 전체는 약 3.4MB이며, Velvet Pool은 약 7.3MB, Puttide는 약 15MB입니다. 오래된 휴대폰이 힘들어한다면 Zabum 매뉴얼은 호스트가 gzip이나 brotli로 파일을 압축하는지 확인하라고 제안합니다.
  4. 한 번 움직이고 새로고침하여 이어하기와 최고 점수가 있는지 확인합니다.
  5. 한 번 탭하고 오디오가 시작되는지 확인합니다. 첫 탭 전의 무음은 정상입니다.
  6. 시크릿 창을 엽니다. 창을 닫을 때 진행 상황을 잊더라도 게임은 계속 실행되어야 합니다.
  7. 첫 로딩에서 콘솔과 네트워크 탭을 읽습니다. 빨간 줄도 404도 없어야 합니다.
  8. 삽입된 상태에서 전체 화면 버튼이 나타나는지, 휴대폰에서 프레임이 충분히 높은지 확인합니다.

자주 묻는 질문

HTML5 게임을 호스팅하려면 PHP, 데이터베이스, 특별한 서버가 필요한가요?

제공된 상태의 저희 에디션에는 필요하지 않습니다. 정적이므로 game/ 폴더를 HTTP 또는 HTTPS로 파일을 제공하는 호스트에 업로드하여 열면 됩니다. Zabum과 Ricopop의 선택형 리더보드에는 PHP 7.4 이상과 쓰기 가능한 폴더가 필요합니다.

index.html을 그냥 더블클릭해도 되나요?

안 됩니다. 브라우저가 file://에서 게임 모듈을 차단하여 페이지가 빈 채로 남습니다. 호스트든 python -m http.server 8765 같은 로컬 테스트 서버든, http 또는 https 주소를 통해 게임을 여십시오.

HTTPS가 필요한가요?

매뉴얼은 공개 호스팅에 HTTPS를 쓰라고 안내합니다. Zabum 매뉴얼은 홈 화면에 추가하려면 HTTPS가 필요하다고 하며, https 페이지는 혼합 콘텐츠로 차단되기 때문에 http iframe을 삽입할 수 없습니다.

WordPress 페이지에 게임을 추가하려면 어떻게 하나요?

호스트의 파일 관리자나 FTP로 폴더를 업로드하고, 주소를 열어 플레이되는지 확인한 뒤, 사용자 지정 HTML 블록에 iframe을 추가하십시오. unfiltered_html 권한이 없는 사용자는 iframe이 제거되므로, 페이지를 편집하는 사람의 역할을 확인하십시오.

진행 상황은 어디에 저장되며, 플레이어가 브라우저 데이터를 지우면 어떻게 되나요?

주소별로 브라우저의 로컬 스토리지에 저장됩니다. 사이트 데이터를 지우면 삭제되고, 다른 브라우저나 기기에서는 비어 있는 상태로 시작하며, 도메인을 바꾸거나 http와 https를 오가면 초기화됩니다. 계정은 없고 저희에게 전송되는 것도 없습니다.

Polar Games가 게임을 대신 호스팅해 주나요?

아니요. 스토어는 파일을 판매합니다. 지원은 파일의 설치와 사용에 관한 문의를 다루며, 호스팅과 구매자 서버에 대한 설치는 작업 전에 견적을 드리는 별도 서비스입니다.

다음 단계

웹사이트에 올릴 HTML5 게임을 아직 고르는 중이시라면, 각 상품 페이지에 요구 사항이 나와 있고 매뉴얼이 링크되어 있으며 결제 전에 데모를 플레이해 볼 수 있습니다. 먼저 매뉴얼의 설치 장을 읽으십시오. 이 글의 작업을 할 때 사용하게 될 페이지입니다.

HTML5 게임 템플릿 둘러보기