Three.js Game Skills: 코딩 에이전트가 만든 브라우저 게임을 점수표로 검증하는 스킬 9종

9bow · 9월 15, 2026, 9:00오전

Three.js Game Skills 소개

코딩 에이전트에게 브라우저 게임을 만들어 달라고 하면 대체로 무언가는 돌아갑니다. 문제는 그 다음입니다. 화면에는 회색 정육면체가 떠 있고 HUD는 숫자를 나열한 사각형 카드이며, 에이전트는 "게임이 완성되었습니다" 라고 보고합니다. 사람이 브라우저를 열어 보고 나서야 무엇이 부족한지 알게 되고, 그 간극을 말로 설명해 다시 지시하는 왕복이 반복됩니다. 에이전트가 자기 결과물을 스스로 판정할 기준을 갖고 있지 않기 때문에 생기는 일입니다.

이번에 소개할 Three.js Game Skills 는 그 기준을 스킬 안에 넣어 둔 프로젝트입니다. Three.js 브라우저 게임 제작에 필요한 역할을 9개 스킬로 나누고, 그중 threejs-game-director 하나를 진입점으로 두어 나머지를 상황에 맞게 불러 쓰게 합니다. 저자는 Majid Manzarpour이며, Codex와 Claude Code 두 러너가 같은 SKILL.md 묶음을 공유합니다. 특정 모델이나 유료 API 키를 요구하지 않습니다.

이 프로젝트에서 눈여겨볼 부분은 스킬이 결과를 스스로 채점하고 실패 조건을 미리 정해 두었다는 점입니다. 10개 항목을 0점에서 3점으로 매기는 시각 품질 점수표가 있고, 점수와 무관하게 걸리면 프리미엄으로 인정하지 않는 자동 실패 조건이 따로 있습니다. 여기에 브라우저 스크린샷, 캔버스 픽셀 지표, 봇 플레이 기록 같은 증거를 함께 요구해서, 에이전트가 "잘 만들었습니다" 라고 말하는 대신 측정값을 내놓게 합니다.

Three.js Game Skills와 다른 게임 생성 도구의 차이

에이전트로 웹 게임을 만드는 도구는 이미 여럿 나와 있고, 갈리는 지점은 에이전트를 감싸는 프레임워크를 새로 만드는가, 기존 러너에 스킬만 얹는가입니다. 세 가지 접근을 비교하면 다음과 같습니다:

접근 방식	형태	실행 환경	결과 검증
Three.js Game Skills	9개 스킬 묶음 설치	Codex와 Claude Code 그대로	10개 항목 점수표, 자동 실패 조건, 측정 지표
전용 에이전트 프레임워크	별도 실행 프레임워크	프레임워크가 정한 환경	프레임워크가 정의한 완료 조건
단일 게임 + 검증 하네스	완성된 게임 한 편과 검사 도구	해당 저장소의 구성	그 게임에 맞춘 품질 하네스

이 가운데 두 번째 줄에는 OpenGame처럼 프롬프트 하나로 플레이 가능한 웹 게임을 끝까지 만드는 프레임워크가, 세 번째 줄에는 Claude of Duty처럼 단일 프롬프트로 만든 브라우저 게임과 그 품질 검증 하네스를 함께 공개한 저장소가 해당합니다. Three.js Game Skills는 새 실행 환경을 만드는 대신 이미 쓰고 있는 러너의 스킬 디렉토리에 파일을 복사하는 방식을 택했고, 그래서 설치와 제거가 디렉토리 단위로 끝납니다.

Three.js Game Skills는 누구에게 맞는가

Codex나 Claude Code를 이미 쓰고 있고 브라우저 게임을 만들어 보려는 개발자라면, 별도 도구를 익히지 않고 스킬만 설치해서 바로 시작할 수 있습니다. 게임을 처음 만드는 경우에도 Vite와 TypeScript, Three.js로 구성된 스캐폴드가 스킬 안에 들어 있어 빈 폴더에서 시작할 수 있고, 결정론적 테스트 훅과 시드 고정 난수 생성기가 함께 들어 있어 에이전트가 같은 화면을 다시 만들어 낼 수 있습니다.

반대로 Three.js가 아닌 엔진으로 게임을 만들려는 사람에게는 이 스킬 묶음이 맞지 않습니다. 스캐폴드와 검사 도구, 점수표의 기준이 모두 브라우저 캔버스와 Three.js 렌더러를 전제로 하고 있습니다. 저장소가 직접 적어 둔 한계도 함께 봐야 합니다. 헬퍼 테스트는 모의 응답을 쓰기 때문에 통과해도 시각 품질이 나아졌다는 근거가 되지 못하고, 백그라운드 도구와 서브에이전트, 비동기 실행 같은 기능은 러너가 제공하는 것이지 스킬 설치로 켜지는 것이 아닙니다.

Three.js Game Skills의 9가지 스킬

디렉터 스킬은 요청의 성격에 따라 어느 전문 스킬을 읽을지 정하고, 통합과 최종 검증은 직접 맡습니다. 각 스킬이 담당하는 단계는 다음과 같습니다:

스킬	담당
`threejs-game-director`	진입점, 범위와 품질 기준 판단, 전문 스킬 라우팅, 작업 위임, 증거 취합
`threejs-gameplay-systems`	설계 개요, 핵심 루프, 레벨, 엔티티, 입력, 카메라, 물리 선택, 게임 감각
`threejs-aaa-graphics-builder`	시각 품질 점수표, 기술 아트 예산, 셰이더와 머티리얼, VFX, 렌더 마감
`threejs-game-ui-designer`	HUD, 메뉴, 오버레이, 반응형과 터치 UI, 아이콘, 안전 영역
`threejs-debug-profiler`	검은 화면, 런타임 오류, 로딩 문제, 모바일 버그, 성능 프로파일링
`threejs-qa-release`	브라우저 QA, 스크린샷, 캔버스 픽셀 지표, 봇 플레이, 프로덕션 빌드
`threejs-3d-generator`	Tripo API 기반 텍스트와 이미지의 3D 변환, 텍스처, 리깅, 애니메이션
`threejs-image-generator`	Gemini 기반 콘셉트 아트, 텍스처, 데칼, 스카이, 아이콘, GUI 아트
`threejs-audio-generator`	ElevenLabs 기반 효과음, 앰비언스, UI 사운드, 음성과 대사

디렉터 스킬은 사용자가 요청한 범위를 기준선으로 삼습니다. "작은 아케이드 게임을 만들어 줘" 는 전체 프리미엄 파이프라인을 돌리라는 요청이 아니므로 요청한 범위의 좋은 결과물을 만들고 멈추고, "프리미엄", "AAA", "덜 기본적으로" 같은 표현이 들어오면 첫 플레이 가능 버전으로는 완료가 아니라고 판정합니다. 작업을 나눌 때는 리드 한 명에 작업자 두 명까지를 기본으로 두고, 각 작업자에게 파일 소유권과 입출력 계약, 수용 기준을 따로 줍니다.

Three.js Game Skills의 시각 품질 점수표

점수표는 아트 디렉션, 히어로와 플레이어, 장애물과 적, 보상과 상호작용 요소, 월드와 환경, 머티리얼과 텍스처, 조명과 렌더, VFX와 모션, UI와 HUD, 성능 증거의 10개 항목으로 나뉩니다. 각 항목은 0점(자리표시 또는 증거 없음)부터 3점(쇼케이스)까지이고, 기준과 실패 조건은 다음과 같습니다:

프리미엄은 모든 항목이 2점 이상이고 평균이 2.3점 이상일 때, 쇼케이스는 2점 미만인 항목이 없고 여섯 개 이상이 3점이며 평균이 2.7점 이상일 때입니다. 채점 대상은 타이틀 화면이나 모델만 놓인 쇼룸 화면이 아니라 실제로 플레이 중인 화면의 스크린샷이어야 하고, 모바일이 대상에 포함되면 모바일 화면도 함께 채점합니다.

점수를 매기는 사람마다 기준이 달라지는 문제는 저장소가 보정용 기준 이미지 세 장을 패키지에 넣는 방식으로 다뤘습니다. 아래 두 장이 그중 양 끝에 해당합니다:

왼쪽은 1점 기준으로, 기본 도형인 플레이어와 픽업이 평평하고 성긴 아레나에 놓여 있고 HUD는 기능만 표시합니다. 오른쪽은 2.5점에서 3점 기준으로, 층이 쌓인 월드가 플레이 중이고 히어로의 실루엣이 읽히며 이벤트 VFX와 일관된 HUD가 있습니다. 저장소는 이 두 장을 나란히 두고 "scene-3 보다 scene-1 에 가깝게 읽히면, 코드를 아무리 많이 넣었더라도 1점에서 2점" 이라고 적어 두었습니다.

한편 점수와 무관하게 걸리면 프리미엄이 아닌 자동 실패 조건도 따로 있습니다. 실제 입력으로 플레이되지 않거나 플레이 중 스크린샷이 없는 경우, 히어로 자산이 다듬지 않은 기본 도형에 발광 효과만 얹은 경우, HUD가 대부분 사각형 통계 카드인 경우, 안개와 어둠, 블룸, 파티클이 없는 지오메트리를 대신하는 경우, UI가 플레이 경로를 가리거나 대상 화면에서 글자가 잘리는 경우, 그리고 큰 그래픽 작업 뒤에 렌더러 진단이 없는 경우가 여기 해당합니다.

Three.js Game Skills가 요구하는 증거

점수표가 주관을 좁히는 장치라면, 증거 목록은 그 점수가 실제 실행에서 나왔는지를 확인하는 장치입니다. 완성된 게임에 대해 스킬이 모으도록 되어 있는 자료는 프로덕션 빌드 결과, 로컬 브라우저 실행, 브라우저 콘솔과 페이지 오류 확인, Playwright 스크린샷, 캔버스의 비어 있지 않은 픽셀 검사와 측정 지표, 데스크톱과 모바일 화면 검사, 주요 조작 경로의 상호작용 검사입니다. 좁은 수정에는 관련된 부분만 적용하고 전체 릴리즈 감사를 돌리지 않습니다.

캔버스 검사 도구는 조언용 지표를 함께 내놓고, 저장소는 각 지표가 낮을 때 무엇에 대한 반증인지까지 적어 두었습니다. 색 엔트로피가 약 3.0비트 아래이거나 지배 색상 비율이 약 0.6을 넘으면 성기고 평평한 화면이라는 뜻이라 월드와 머티리얼 항목이 2점을 넘기 어렵고, 에지 밀도가 약 0.04 아래면 기본 도형 위주이거나 빈 화면이라는 신호이며, 휘도 대비가 약 60 아래면 안개와 어둠으로 눌린 화면이라 조명 항목의 반증이 됩니다. 다만 저장소는 이 값을 올리려고 노이즈나 파티클을 더하지 말라고 명시하면서, 의도적으로 깔끔한 구성은 낮게 측정되는 것이 정상이라고 덧붙였습니다.

이러한 기준을 거쳐 저자가 공개한 데모는 다섯 편이며, 각각 브라우저에서 바로 실행해 볼 수 있습니다. Neon Ridge Drift, Championship Snooker Arena, Starship Dogfight, Tide Singer, Ripcore입니다.

Three.js Game Skills 설치와 사용

설치는 skills 명령줄 도구로 스킬 전체를 러너별 전역 디렉토리에 넣는 방식입니다:

npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y

설치한 skills 도구가 위 대상 중 하나를 지원하지 않으면 저장소를 받아 포함된 설치 스크립트를 쓰면 됩니다. --codex 는 ~/.codex/skills, --claude 는 ~/.claude/skills, --all 은 양쪽 모두를 대상으로 하며, 같은 이름의 스킬은 --force 없이는 건너뜁니다:

./install.sh --codex
./install.sh --claude
./install.sh --all

설치한 뒤에는 빈 프로젝트 폴더나 개선하려는 기존 Three.js 게임 폴더에서 러너를 열고, 원하는 결과와 디렉터 스킬 이름을 함께 적어 요청합니다. Claude Code에서는 /threejs-game-director 로, Codex에서는 $threejs-game-director 로 부르거나 프롬프트 안에서 이름을 적기만 해도 됩니다. 저장소가 제시하는 요청 예시는 다음과 같습니다:

Use threejs-game-director to build a premium futuristic tower defense game from scratch.
Automatically use the relevant gameplay, graphics, UI, asset generation, audio, debug,
and QA skills. Build a playable loop first, then iterate until it passes browser,
mobile, visual, UI, performance, and release checks.

핵심 Three.js 스킬은 유료 API 키 없이 동작하고, 외부 자산을 생성하고 싶을 때만 키를 넣습니다. 3D 모델 생성은 Tripo의 TRIPO_API_KEY, 이미지 생성은 Gemini의 GEMINI_API_KEY, 오디오 생성은 ElevenLabs의 ELEVENLABS_API_KEY 를 각각 셸 프로필에 넣고 터미널을 다시 열면 됩니다. 키가 없거나 크레딧이 소진되면 디렉터가 절차적 생성과 로컬 자산으로 계속 진행하고 그로 인해 생긴 제약을 보고합니다. 에이전트 프로세스는 보통 사용자의 셸 프로필을 물려받지 않으므로, 디렉터 스킬에는 프로필을 읽어 키의 유무만 출력하는 확인 스크립트가 들어 있습니다:

# Claude Code
bash ~/.claude/skills/threejs-game-director/scripts/probe_asset_credentials.sh
# Codex
bash ~/.agents/skills/threejs-game-director/scripts/probe_asset_credentials.sh

이 스크립트는 TRIPO_API_KEY=SET 또는 MISSING 형태로만 출력하고 키 값 자체는 절대 표시하지 않습니다. 저장소는 API 키를 커밋하거나 브라우저에서 실행되는 게임 코드에 넣지 말라고 따로 경고하고 있습니다.

Three.js Game Skills의 라이선스

Three.js Game Skills는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

Three.js Game Skills 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 초안을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 댓글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임은 이런 글들을 한국어로 정리해 나누고 있습니다. 회원으로 가입하시면 주요 글들을 이메일로 보내드리고, 텔레그램(Telegram)과 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다.

아래쪽에 좋아요를 눌러주시면 다음 글을 정리하는 데 힘이 됩니다~