백층 던전 (Dungeon 100)
『백층 던전의 비밀』을 읽다 잠든 2026년의 대학생 — 눈을 떠 보니 책 속 마을.
집으로 돌아가는 유일한 길, 매판 새로 만들어지는 던전을 뚫고 100층까지 내려가는 3D 로그라이크.
전부 AI(Claude Code) 페어 개발로 만들었습니다. 자매작 「두 문 러너」의 두 문 달리기가 이 게임의 보물상자 미니게임으로 통합되어 있습니다.
설치·로그인 없이 브라우저(모바일/PC)에서 바로 실행됩니다.
🎬 자동 시연 — 타이틀 화면의 "🎬 자동 시연 보기" 버튼 (약 2분, 언제든)
클릭 한 번이면 게임이 스스로 플레이하며 자막과 함께 보여줍니다: 걸어다니는 마을·촌장 대화 → 전투와 빌드 → 방 이벤트(제단·몬스터 하우스·찢어진 페이지) → 미니게임 2종 → 깊은 층 테마와 안개 → 56층의 소녀 → 보스전.
별도 설치나 쿼리 없이 항상 볼 수 있고, 새 기능이 추가되면 시연도 함께 최신입니다.
시연은 세이브와 완전히 분리되어 있어(진행 저장 안 함) 다 보고 나면 언제나 처음부터 플레이할 수 있습니다.
이 게임이 어떻게 만들어졌는지 한 문서에 정리했습니다 — AI가 자기 게임을 직접 플레이하는 검증 하네스,
사망 층 분포로 난이도를 맞추는 밸런스 봇, 매일 밤 스스로 도는 자동화 5종, 실제로 쓴 프롬프트, 그리고
데이터가 사람의 직관을 뒤집은 실측 4건. 주장마다 저장소에서 확인할 수 있는 명령·파일을 붙였습니다.
커밋 기록과 실제 대화를 근거로, 개발 기간 동안 지시하는 방식이 어떻게 달라졌는지 데이터(차트·표)로 정리한 기록.
스크린샷
| 던전 전투 (41~50층 서리 테마) | 보스 "페이지의 수호자" (30층) |
|---|
| |
화면 속 모든 것 — 던전·캐릭터·그림자·빛·소리 — 은 이미지·오디오 파일 없이 코드로 생성됩니다.
블룸·비네트 포스트프로세싱, 발밑 그림자, 절차 생성 돌결 텍스처, 잉크빛 UI까지 전부.
게임 방법
- 걸어다니는 3D 마을에서 시작 — NPC(촌장·니나·무크)와 대화하고, 던전 입구에서 던전 종류를 고르세요: 🎒 초등학교 던전(쉬운 문제) / 🧠 어른 던전(어려운 문제) / 👹 몬스터 던전(문제 대신 전투).
- 층마다 절차 생성되는 방과 복도를 탐험하며 보라색 포털을 찾아 다음 층으로. 10층마다 보스 **"페이지의 수호자"**가 포털을 봉인하고, 그 외 층은 진홍빛 수문장이 문 앞을 지킵니다.
- 이동 — 모바일: 화면 아무 곳이나 드래그(가상 스틱) · PC:
WASD/방향키. 공격은 가까운 적 자동 조준.
- 🗝️ 보물상자 = 미니게임 (던전 종류에 따라):
- 수학 던전 → 두 문 달리기: 트랙을 달리며 정답이 적힌 문을 몸으로 통과 (자매작 두 문 러너의 인게임 재현). 문마다 "여기서 받기 vs 더 달리기" — 3연속 완주 = 전설의 보물, 틀리면 전부 빈손!
- 몬스터 던전 → 몬스터 아레나: 몰려오는 무리를 뚫고 보석 3개를 주우면 같은 보상. 쓰러져도 본체는 무사 — 몇 번이고 재도전.
- 층을 돌파할 때마다 보상 카드 3택 1로 빌드를 쌓습니다 — 16종(공격력·연사·멀티샷·치명타·폭발·관통·방어·회피·흡혈·가시·탐욕 등)에 희귀도(일반/레어/전설)와 시너지 태그(공격·생존·보조)가 붙어, 같은 계열을 모을수록 그 계열이 더 자주 나옵니다. 처치 코인으로는 마을 대장간에서 영구 강화(죽어도 유지, 무한 단련)를 삽니다.
- 🕯️ 방 이벤트: 낡은 제단(체력을 바치면 보물 하나) · 몬스터 하우스(붉게 물든 방, 두 배로 몰려오는 무리와 코인 무더기) · 찢어진 페이지(두 층을 그냥 건너뛰지만 그 층의 보물은 포기).
- 📅 오늘의 던전: 날짜가 곧 시드 — 그날은 모두가 같은 맵에 도전하고, 도달 층수를 기록 카드로 인증합니다.
- 💭 보물을 얻으면 잊고 있던 집의 기억이 돌아오고, 층마다 벽의 글귀가 던전의 비밀을 속삭입니다. 5층마다 나타나는 문으로 마을에 들르면 부활 지점이 갱신되고 — 깊이 내려갈수록 마을에도 시간이 흐릅니다 (가을 → 습격 → 방벽 → 폐허와 새벽).
- 깊이 내려갈수록 몬스터·던전 색·안개도 변하고 짙어집니다. 체력이 0이 되면 마지막 마을에서 부활 — 100층 끝의 황금 문에는 엔딩(2종 + 에필로그)이 기다립니다.
로컬 실행
npm install
npm run dev # http://localhost:5175
요구 사항: Node.js 20+. npm run build 프로덕션 빌드, npm run typecheck 타입 검사.
원작 — 두 문 러너 (Two Door Runner)
보물상자 미니게임 "두 문 달리기"는 자매작 두 문 러너(초등 수학 러너, 마찬가지로 AI(Claude Code)로 제작)의 핵심 메커닉을 이 게임에 통합한 것입니다. 두 문 러너의 "정답 문을 몸으로 열며 달리는" 경험이 백층 던전 안에서 그대로 재현됩니다.
기술 스택
React 18 · TypeScript · Vite · three.js · @react-three/fiber · @react-three/postprocessing
백엔드 없음(localStorage) · 이미지·오디오·3D 모델 파일 0개 — 절차 생성 지오메트리, 시드 고정 난수(mulberry32) 기반 던전 생성, Web Audio 합성 효과음 28종 + 절차 생성 BGM 5트랙(오디오 파일 0개), 그래픽도 전부 생성 — 블룸·비네트 포스트프로세싱, 캔버스로 그린 돌결 텍스처·발밑 그림자·종이 결 UI(SVG 노이즈), 박스 지오메트리 캐릭터(걷기 애니메이션 포함). 유일한 외부 요소는 웹폰트 Jua(SIL OFL 1.1, CDN 링크) — 전체 출처·라이선스 대장은 docs/ASSETS.md.
문서
| 문서 | 내용 |
|---|
| 🤖 AI 활용 기술 문서 | 이 게임을 어떻게 만들었나 — 검증 하네스·밸런스 봇·상시 자동화·프롬프트·실측 데이터 (먼저 읽어 주세요) |
| 설계 문서 | 컨셉·스토리·시스템 상세·로드맵·절차 생성 확장 안전 규칙 |
| 리소스 대장 | 반입 규칙(3단 사다리)과 외부 요소 출처·라이선스 원장 |
| CLAUDE.md | AI의 상시 컨텍스트 — 구조·규칙·완료 노트(왜 그렇게 만들었는지) |
| 개발 일지 | 커밋·대화 기반 차트로 본 개발 과정 |
| 📦 Agentic GameDev Playbook | 이 게임에서 얻은 방법론을 Claude Code 플러그인 + MCP 서버로 추출한 공개 저장소 (MIT · 15개 장 · 의존성 0) |
