---
title: "Three.js Game Skills: 코딩 에이전트가 만든 브라우저 게임을 점수표로 검증하는 스킬 9종"
creative_title: "\"완성했습니다\" 대신 점수표를 내미는 게임 제작 AI"
source: https://discuss.pytorch.kr/t/three-js-game-skills-9/11916
repository: https://github.com/majidmanzarpour/threejs-game-skills
author: Majid Manzarpour
license: MIT
original_published: 2026-09-15
created: 2026-09-16
curated_by: "다비(davi.kr) https://davi.kr/"
tags: [Three.js, Claude Code, Codex, Agent Skills, 브라우저 게임, 품질 검증]
purpose: "코딩 에이전트로 브라우저 게임을 만들 때 결과물을 숫자로 검증하는 스킬 묶음을 이해하고, 수업과 실무에 바로 적용한다"
---

URL: https://discuss.pytorch.kr/t/three-js-game-skills-9/11916

# "완성했습니다" 대신 점수표를 내미는 게임 제작 AI

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

> 문서 목적: AI 에이전트가 만든 게임이 "진짜 잘 만들어졌는지" 숫자로 확인하는 방법을 알고, 바로 따라 해 볼 수 있게 정리합니다.
> 정리: [다비(davi.kr)](https://davi.kr/)

---

## 한눈에 요약

- Three.js Game Skills는 Codex와 Claude Code에 설치하는 **스킬 9개 묶음**입니다. 진입점인 `threejs-game-director`가 나머지 8개를 상황에 맞게 불러 씁니다.
- 에이전트가 "완성했습니다"라고 말로 끝내지 못하게 합니다. Playwright 스크린샷, 캔버스 픽셀 지표, 봇 플레이 기록 같은 증거를 내야 합니다.
- 시각 품질 점수표는 10개 항목을 각각 0~3점으로 매깁니다.

| 등급 | 통과 조건 |
|---|---|
| 프리미엄 | 모든 항목 2점 이상, 평균 2.3점 이상 |
| 쇼케이스 | 2점 미만 항목 없음, 3점 항목 6개 이상, 평균 2.7점 이상 |

- 점수와 상관없이 탈락하는 자동 실패 조건이 있습니다. 실제 플레이 중 스크린샷이 없거나, 주인공이 기본 도형에 발광만 얹은 모양이거나, HUD가 사각형 숫자 카드 위주면 프리미엄이 아닙니다.
- 캔버스 지표 경고선: 색 엔트로피 약 3.0비트 미만, 지배 색상 비율 약 0.6 초과, 에지 밀도 약 0.04 미만, 휘도 대비 약 60 미만.
- 기본 스킬은 유료 API 키 없이 동작합니다. 3D 모델(Tripo), 이미지(Gemini), 소리(ElevenLabs)는 키를 넣었을 때만 생성합니다.
- MIT 라이선스, GitHub 스타 약 2.0k, 포크 205, 커밋 10개 (2026-09-16 확인).

---

## 쉬운 설명

AI에게 "게임 만들어 줘"라고 하면 뭔가 돌아가긴 합니다. 그런데 막상 열어 보면 회색 네모 하나가 떠 있고, AI는 "다 만들었어요"라고 말합니다. AI가 스스로 "이게 잘 만든 건지" 판단할 기준이 없기 때문입니다.

Three.js Game Skills는 AI에게 **채점표와 제출 서류**를 함께 쥐여 줍니다. 게임을 실제로 켜서 사진을 찍고, 화면 색이 얼마나 다양한지 숫자로 재고, 로봇이 대신 게임을 플레이해 본 기록을 남기게 합니다. 시험 볼 때 "잘 풀었어요"가 아니라 답안지를 내야 점수를 받는 것과 같습니다. Three.js는 웹 브라우저에서 3D 그래픽을 그리는 자바스크립트 도구입니다.

---

## 활용 방법

### 1단계: 설치 (명령 1줄)

Claude Code 사용자:

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

Codex 사용자:

```bash
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y
```

`skills` 도구가 대상을 지원하지 않으면 저장소를 받아 `./install.sh --claude` 또는 `./install.sh --codex`를 실행하십시오. 두 방식을 동시에 쓰지 마십시오. 같은 스킬이 두 곳에 중복 설치됩니다.

### 2단계: 작은 게임부터 요청

빈 폴더에서 러너를 열고 범위를 좁혀 요청하십시오. 디렉터 스킬은 "작은 게임" 요청이면 그 범위에서 멈추고, "프리미엄", "AAA"가 들어가면 전체 검증을 돌립니다. 첫 시도는 작게 잡아 시간과 토큰을 아끼십시오.

```plaintext
/threejs-game-director 로 간단한 3D 공 피하기 게임을 만들어 줘.
플레이 가능한 루프를 먼저 만들고, 실제 플레이 중 스크린샷과
시각 품질 점수표(10개 항목)를 함께 제출해 줘.
```

### 3단계: 점수표로 개선 반복

- 점수표에서 2점 미만 항목만 골라 "이 항목을 2점 이상으로 올려 줘"라고 지시하십시오.
- 매 회차 스크린샷을 직접 열어 확인하십시오. 점수는 AI가 스스로 매긴 값입니다.
- 외부 자산을 쓰려면 먼저 키 확인 스크립트를 실행하십시오. 값은 출력하지 않고 SET 또는 MISSING만 보여 줍니다.

```bash
bash ~/.claude/skills/threejs-game-director/scripts/probe_asset_credentials.sh
```

### 상황별 활용

| 상황 | 바로 할 일 |
|---|---|
| AI 코딩 강의 데모 | 같은 게임을 스킬 없이 1회, 스킬 켜고 1회 만들어 점수표 차이를 비교 시연 |
| 기존 Three.js 게임 개선 | 게임 폴더에서 디렉터를 부르고 "현재 점수표부터 채점"을 먼저 요청 |
| 다른 엔진(Unity, Godot) 사용 | 스킬 설치 대신 10개 항목 점수표와 자동 실패 조건만 체크리스트로 차용 |
| 에이전트 검증 체계 설계 | "말 대신 증거 제출" 구조를 자기 스킬의 완료 조건 작성에 참고 |

### 하지 말 것

- 캔버스 지표를 올리려고 노이즈나 파티클을 억지로 넣지 마십시오. 저장소가 직접 금지합니다. 깔끔한 화면은 지표가 낮게 나오는 것이 정상입니다.
- API 키를 커밋하거나 브라우저 게임 코드에 넣지 마십시오.

---

## 전문가 의견 (사실 기반)

### 강점

- 완료 기준을 수치로 명시했습니다. 프리미엄 평균 2.3점, 쇼케이스 평균 2.7점처럼 통과선이 분명해서 "대충 괜찮음"을 걸러냅니다.
- 채점 기준을 맞추는 보정용 기준 이미지 3장을 패키지에 넣었습니다. 1점 화면과 2.5~3점 화면을 나란히 두고 비교하게 합니다.
- 설치와 제거가 폴더 복사 단위로 끝납니다. 새 프레임워크를 배울 필요가 없습니다.
- 시드 고정 난수와 결정론적 테스트 훅이 들어 있어 같은 화면을 다시 만들 수 있습니다.
- 키가 없으면 절차적 생성으로 계속 진행하고 제약을 보고합니다.

### 한계와 주의점

- 자기 채점 구조입니다. 게임을 만든 에이전트가 같은 점수표로 스스로 채점하므로 외부 검증이 아닙니다. 최종 판단은 사람이 스크린샷을 보고 내려야 합니다.
- 캔버스 지표는 저장소 스스로 "조언용"으로 규정했습니다. 품질 보증 수치로 쓰면 안 됩니다.
- 헬퍼 테스트는 모의 응답을 씁니다. 저장소가 "통과해도 시각 품질 향상의 근거가 아니다"라고 직접 밝혔습니다.
- 설치 경로 설명이 원문 글과 README가 다릅니다. 포럼 글은 Codex 경로를 `~/.codex/skills`로 소개하지만, README 기준 npx 공개 설치는 `~/.agents/skills`이고 `~/.codex/skills`는 install.sh의 레거시 경로입니다. install.sh로 설치했다면 키 확인 스크립트 경로도 바꿔서 실행해야 합니다.
- "유료 키 불필요"는 스킬 기준입니다. Codex, Claude Code 자체 이용 요금과 Tripo, Gemini, ElevenLabs 생성 크레딧은 별도입니다.
- 커밋 10개의 초기 단계 저장소입니다. 규칙과 경로가 바뀔 가능성이 높습니다.
- 데모 5편(Neon Ridge Drift 등)에 든 시간, 비용, 사람의 수정 정도는 공개 자료에서 확인되지 않습니다.
- Three.js 전용입니다. 스캐폴드, 검사 도구, 점수표 모두 브라우저 캔버스와 Three.js 렌더러를 전제로 합니다.
- 원문 포럼 글은 GPT 초안을 바탕으로 작성되었다고 스스로 밝혔습니다. 세부 내용은 GitHub README로 교차 확인하십시오.

### 관련 기록 (트렌드 T)

- Godogen: 화면을 보고 스스로 고치는 게임 제작 파이프라인. Godot, Bevy, Babylon.js 등 여러 엔진 지원.
- img2obj: 사진을 Three.js 절차적 코드로 재구성하고 2층 구조로 채점하는 Codex 플러그인.

### 확인한 것과 추론한 것

- 확인: 스킬 9종 구성, 점수표 등급 조건, 캔버스 지표 경고선, 설치 명령, API 키 3종, MIT 라이선스, 스타 약 2.0k와 포크 205와 커밋 10개, 데모 5편 링크 (포럼 글과 GitHub README 대조).
- 추론: Tripo, ElevenLabs로 만든 자산의 상업적 이용 조건은 각 서비스 약관을 따릅니다. MIT는 스킬 코드에만 적용되므로 상업 배포 전 약관을 따로 확인하십시오.

---

## Bottom Line

AI가 만든 결과물을 "말"이 아니라 "스크린샷과 점수"로 검사하게 만드는 설계가 이 프로젝트의 가치입니다. 점수는 AI의 자기 평가라는 점을 기억하고, 사람의 눈으로 최종 확인하는 절차를 반드시 남기십시오. 오늘 30분을 떼어 설치 명령 1줄을 실행하고, 작은 게임 1건으로 첫 점수표를 받아 보십시오. 지금 당장 시작하십시오.

---

원문: [PyTorchKR](https://discuss.pytorch.kr/t/three-js-game-skills-9/11916) | 저장소: [GitHub](https://github.com/majidmanzarpour/threejs-game-skills) | 정리: [다비(davi.kr)](https://davi.kr/)