게임·미디어 제작Games & media

web-game-asset-reality-check

웹 게임 빌드에서 타입 검사기가 못 보는 문제를 잡습니다. 번들되지 않은 폰트, 런타임 CDN 의존, 헤드리스 크롬의 페이지 오류입니다.

어떤 문제를 푸나The problem

빌드는 타입 검사를 통과하고도 번들에 없는 폰트 파일을 가리키거나, 오프라인에서 막히는 CDN에서 폰트를 불러오거나, 비동기 콜백 안에서 'Phaser is not defined'를 던질 수 있습니다.

font_check.py는 @font-face의 각 url()이 실제로 빌드 안에 있는지, 첫 번째 글꼴에 @font-face가 있는지, 외부 스타일시트·@import가 없는지 검사합니다. pageerror_smoke.mjs는 헤드리스 크롬으로 페이지를 열어 uncaught 오류와 실패한 요청을 잡습니다.

이런 분께 맞습니다Who it is for

AI가 만든 웹 게임을 오프라인에서도 확실히 돌아가게 출시하려는 개발자.

무엇을 하나What it does

측정할 CSS·HTML이 없으면 깨끗함이 아니라 측정 불가(종료 코드 3)입니다.
@font-face가 가리키는 파일이 없으면 다른 폰트 파일이 있어도 실패합니다.
pageerror_smoke.mjs [--wait 밀리초] URL|파일은 pageerror, console.error, 실패한 요청에서 실패합니다.
페이지를 열 수 없거나 Playwright가 없으면 종료 코드 3입니다.

직접 돌려 본 출력Real output

저장소의 examples 폴더를 실행한 결과입니다.

$ bash examples/demo.sh
# A page whose font is bundled and declared
$ python3 scripts/font_check.py tests/fixtures/good
font files: pixel.woff2; @font-face families: ['pixel']
ok: declared fonts exist and nothing loads from a runtime CDN
[exit 0]

# A page that imports its font from a CDN at runtime
$ python3 scripts/font_check.py tests/fixtures/bad_cdn
font files: none; @font-face families: none
style.css: first-choice font 'vt323' has no @font-face in the build (dead declaration)
style.css: runtime external dependency https://fonts.googleapis.com/css2?family=VT323 (breaks offline / blocked CDN / file://)
[exit 1]

# A font named first in CSS but never declared with @font-face
$ python3 scripts/font_check.py tests/fixtures/bad_undeclared
font files: none; @font-face families: none
style.css: first-choice font 'press start 2p' has no @font-face in the build (dead declaration)
[exit 1]

알아둘 한계Limits

스모크 검사는 npm install playwright와 Chromium 다운로드가 필요합니다.
폰트와 런타임 오류만 봅니다. 이미지, 오디오, 캔버스 텍스트는 보지 않습니다.

받아서 쓰기Get it

# 저장소를 받습니다
git clone https://github.com/Kein-chronicle/web-game-asset-reality-check.git

# Claude Code 스킬로 쓰려면 이 폴더 이름으로 받습니다
git clone https://github.com/Kein-chronicle/web-game-asset-reality-check.git ~/.claude/skills/web-asset-reality-check

정보Info

분류Category: 게임·미디어 제작Games & media
형태Type: 명령줄 도구Command-line tool
라이선스License: MIT
필요한 것Requires: Node.js 22 이상, Python 3.10 이상, Playwright(pageerror_smoke.mjs를 쓸 때)
저장소Repository: web-game-asset-reality-check
토픽Topics: web-development game-development testing playwright fonts smoke-test phaser claude-skills

2026-10-18 기준: 저장소의 테스트를 로컬에서 실행해 통과했고, 예제 출력은 저장소의 examples 폴더를 실제로 실행한 결과입니다.