Why? 어드벤처 — 아들에게 3D 픽셀 RPG를 만들어 줬습니다

예림당 「Why?」 시리즈 100권을 한 게임에 담고 싶었습니다. 아들이 직접 걸어 다니며 궁금이(호기심)를 쫓고, NPC를 만나 퀴즈를 풀고 배지를 모으는 브라우저 3D 복셀 교육 RPG입니다. 순수 HTML/CSS/JS 한 페이지에 Three.js로 만들었고, v5부터는 외부 에셋이 0개라 100% 오프라인에서도 돌아갑니다.

 

 

 

아들이 저에게 물었습니다. "아빠, 나 3D 게임 만들어줘." 저는 그동안 화면을 몇 번 보여줬던 터라 용기를 얻은 모양입니다. 2D 게임이라도 만드는 건 오래 걸리는 일인데, 3D는 처음부터 막연했습니다. 다만 아이에게 줄 게임이라 골랐습니다. 왜냐면, 그때 아들이 읽고 있던 책이 예림당 「Why?」 시리즈였기 때문입니다. 100권짜리 자연·사회 지식 백과를, 아이가 책장을 넘기던 것처럼 걸으며 훑게 하면 좋겠다고 생각했습니다. 그래서 시작한 프로젝트가 「Why? 어드벤처」입니다.

 

활짝 웃으며 만들어 주는 게 아니라, 재미는 기본이고 학습이 본체가 되는 게 게임입니다. 아들이 마음껏 헤매고 부딪치다가, "아 이거였구나" 하고 스스로 깨닫는 순간을 계속 만들고 싶었습니다.

프로젝트 소개 — "호기심 → 현장 체험 → 전문가 만남 → 퀴즈 복습"

「Why?」 시리즈의 글쓰기 구조는 사실상 게임 설계에 딱 맞습니다. 책은 매 사례마다 "왜 그럴까?" 하는 호기심으로 시작해, 현장으로 데려가고, 전문가가 설명해 주고, 마지막에 퀴즈로 확인합니다. 저는 이 네 단계를 그대로 플레이 루프로 번역했습니다. 아이가 걸어 다니면 마을 곳곳에 궁금이(호기심을 상징하는 캐릭터)와 NPC가 있고, 만나서 대화하고, 3지선다 퀴즈를 풀고, 배지를 모으는 구조입니다.

 

 

이 게임이 아이에게 "교육 게임"으로 다가가게 만드는 본질은, 세 가지 원칙을 지켰기 때문입니다.

 

첫째, 벌점이 없는 학습입니다. 오답을 눌러도 절대 지면이 아니라, 정답이 무엇이고 왜 그런지 해설을 반드시 보여주고 다시 도전하게 합니다. 점수가 깎이거나 게임이 끝나는 일이 없으니 아이는 부담 없이 틀릴 수 있습니다. 틀려도 괜찮다는 걸 체험하게 하는 게, 지식 백과를 읽힐 때보다 오히려 더 강력한 동기라고 생각합니다.

 

둘째, 몸으로 배우는 것입니다. 화산, 연못, 시장, 궁궐, 천문대 같은 장소 자체가 교재입니다. 화산에 가면 분화구가 보이고, 연못에는 다리가 있고, 시장에는 상인이 퀴즈를 냅니다. 교과서에서 "화산은 이렇게 생겼습니다" 하고 읽는 대신, 아이가 실제로 걸어가서 발밑 지형을 구경하며 배웁니다.

 

셋째, 부모가 확인할 수 있는 성장입니다. 배웠던 사실은 전부 📖 지식노트에 기록됩니다. 아들은 몇 문제를 풀었고, 어떤 배지를 모았고, 어떤 걸 알게 됐는지가 남아서, 부모가 게임을 한 뒤 화면만 펼쳐 보면 "오늘 이런 걸 배웠구나" 하고 바로 확인할 수 있습니다.

 

"3D인데 픽셀" — 핵심 기술 트릭

3D를 처음 만드는 데다 아이 게임이다 보니, 화면이 너무 Realistic하게 다가가기보다는 레고나 픽셀처럼 삐죽삐죽한 게 좋겠다고 느꼈습니다. 그래서 세 가지 트릭을 썼습니다.

 

첫째, 저해상도 픽셀 업스케일입니다. 렌더러를 화면의 절반 해상도(w*0.5, h*0.5)로 돌리고, CSS의 image-rendering: pixelated로 그 화면을 크게 붙여 보여줍니다. 큰 화면을 작은 해상도로 붙여 보여주는 건, 480p TV를 크게 틀면 화면이 격자처럼 보이는 것과 비슷합니다. 덕분에 3D인데 레트로 픽셀 연출이 되고, 동시에 화면을 절반으로만 계산하니 GPU 부담이 1/4로 줄어 성능이 크게 좋아졌습니다. 저사양 기기나 모바일에서도 어렵지 않게 돌아갑니다.

 

둘째, 모든 텍스처를 절차 생성했습니다. 표면 무늬(텍스처)를 외부 이미지 파일로 받지 않고, 캔버스 64px에 스페클 노이즈(점성 잡음)만 뿌려서 잔디·모래·물·나무를 직접 그렸습니다. 마치 대리석 벽지를 통째로 사는 대신 소금·후추 뿌린 입자 무늬를 손으로 뿌린 것과 비슷합니다. 그래서 외부 이미지 에셋이 단 하나도 없습니다.

 

셋째, 복셀 캐릭터 팩토리입니다. makePerson(cfg) 하나로 파라메트릭하게 캐릭터를 찍어냅니다. 머리색, 안경, 수염, 모자 조합만 바꾸면 주인공 2명과 NPC 여러 명이 뽑힙니다. 캐릭터 모델링을 하나씩 만들어야 하는 수고를 훨씬 줄였고, 덕분에 캐릭터가 다양해졌습니다.

 

버전별 진화 — v1에서 v5.1까지

아이를 태워 테스트하다 보니, "이건 재미없는데", "이건 왜 이렇게 어려워" 같은 피드백이 계속 쏟아졌습니다. 그래서 제가 직접 게임을 설계하고 아이가 플레이하며 고치는 방식으로 다섯 번을 크게 개편했습니다.

 

v1 — 게임 탄생. 분수와 광장, 천문대, 화산, 궁궐, 시장, 연못, 과수원, 진료소가 있는 오픈월드 마을이 생겼습니다. NPC와 대화 → 3지선다 퀴즈 → 오답에도 해설 → 재도전하는 루프를 만들었고, 배지 6종을 모으면 지식 마스터(왕관)를 줍니다. WebAudio로 칩튠 BGM을 온더플라이로 만들어 내니 외부 오디오 파일도 0개였습니다. 터치 조이스틱으로 모바일도 지원하고 localStorage에 자동 저장됩니다.

 

v2 — 피드백 반영. 이모지로 그리던 얼굴을 캔버스 픽셀아트 초상화로 전면 교체했습니다 (캐릭터 13종). 실시간 미니맵과 간판 한글을 다듬고, 궁금이를 F키로 2타 때려 기절시키고 퀴즈로 대결하는 공격 시스템과 슬라임 추격 AI를 넣었습니다. 세계 마을 존과 NPC 3명을 추가해 배지가 6→9개, 퀴즈 19→38개로 늘었습니다. 밤·별·달·별똥별과 하늘 올려다보기까지 넣어 Safari도 대응했습니다.

 

 

v3 — 콘텐츠 대확장. 퀴즈 96개, 배지 12개, NPC 10명, 궁금이 4종 20마리, 표지판 16개로 불어났습니다. 얼음 마을❄️, 공룡 계곡🦴, 전통 과학원📜을 추가했고, 역사 슬라임 8문제와 보너스 별도 넣었습니다.

 

 

v4 — 인트로와 스테이지 시스템. 별 파티클 시네마틱 인트로와 캐릭터 선택을 만들고, 스테이지 7개(궁금 마을→인체→수학→건강→똥→교통→넌센스)를 연쇄 해금 방식으로 바꿨습니다. 스테이지마다 테마 방과 전환 시네마틱, 학습 스택 UI까지 생겨서 퀴즈 132개, 배지 18개, NPC 16명이 됐습니다. 여기서부터 "하루치 분량"이라는 감각이 확실히 잡히기 시작했습니다.

 

 

v4.1 — 인트로 개편. 시작 버튼을 어떤 화면에서든 항상 띄우고, 스테이지 카드를 팝업화하고, 진행 초기화 기능을 붙였습니다. 아이가 게임을 어디서 새로 시작할지 혼란스러워하는 걸 고쳤습니다.

 

v5 — 오프라인 완비 & 실험·날씨·한글 콘텐츠. 코드를 정비해 데드코드를 제거하고 game.js에 섹션 배너 16개를 나눠 달고 git 관리를 시작했습니다. 그리고 외부 에셋 0개를 달성했습니다. Three.js r128과 Gaegu/Jua 폰트(한글 자모 서브셋 woff2 3종)를 전부 로컬에 벤더링해, 어디에도 인터넷 없이 돌아갑니다. 세이브 가드를 붙여 구버전·손상 세이브에서도 안전하게 복구됩니다. 콘텐츠로는 화산 베이킹소다 실험(소다→식초→대폭발+화면 흔들림), 비가 8~12분 주기로 내렸다 그치면 7색 무지개가 뜨고 우주 박사가 퀴즈를 내는 날씨 시스템, 거→달→할로 자모를 조합하는 훈민정음 퍼즐을 넣었습니다. 얼음 마을은 상시 눈발이 내립니다.

 

 

v5.1 — 치명적 버그 수정. 여기서 재미난 사고(제 실수)가 하나 있었습니다. 스테이지 방들이 문 없이 4면 폐벽으로 만들어졌고, 방 내부 전체가 콜라이더라서 걸어서 들어갈 수가 없었습니다. 가장 문제인 건 교통 박물관이 공룡 계곡을 덮어버려서, 고생물학자 NPC가 벽에 갇히고 마을 퀘스트가 진행이 안 됐습니다. 그래서 모든 방에 폭 4.4짜리 문을 내고, 충돌영역을 벽 두께로만 죽여 도보 진입이 되게 했으며, 교통 박물관을 비어 있던 남동 부지로 옮겨 공룡 계곡을 해방시켰습니다. 아이가 "왜 여기 들어가면 안 돼?" 하고 물어봐서 잡은 버그였습니다.

100% 오프라인 & 검증

마지막으로 이 게임을 이렇게 확신할 수 있게 된 건, Playwright 헤드리스로 정주행 검증을 돌렸기 때문입니다. CDN을 차단해 외부 요청이 0건인 상태에서도 게임이 구동됐고, 타이틀→캐릭터 선택→게임 시작, WASD 이동·점프·카메라, NPC 퀴즈 3연속 정답으로 배지 수여, 오답 처리, 궁금이 배틀→기절→ 대결, 상인 퀘스트 풀사이클, 화산 실험 3단계→폭발→별, 비→무지개→퀴즈, 훈민정음 3단계, 6개 방 문 도보 통과와 벽 차단, 저장/새로고침 복원까지 전부 확인했고 페이지 에러는 0건이었습니다.

 

세이브는 localStorage에 자동 저장되어 별·배지·지식·퀘스트·캐릭터·음악·스테이지를 기억합니다. 가상 조이스틱과 점프/대화/공격 버튼으로 모바일에서도 즐길 수 있습니다.

 

마무리

이 게임이 정말 잘 만든 게임인지는 아들이 말해줍니다. "아빠, 오늘 화산이랑 공룡 다 갔다 왔어!" 이 말을 들을 때마다 시스템 설계보다 더 기분이 좋았습니다. 브라우저 한 페이지에, 모바일에서도, 인터넷 없이도 돌아가는 교육 RPG. 아이가 지식을 "외우는" 게 아니라 "걸어 다니며 배우는" 게임이 되도록 다듬은 게 이 프로젝트의 전부였습니다.

 

원치 않는 사실을 짓어내서 이야기를 꾸미진 않았습니다. 그래서 이 글은 이 게임의 설계·기술·버그 투쟁을 그대로 옮긴 것입니다. 다음에 만들 게임은, 아마 "우주선은 왜 하늘로 가는 걸까" 같은 어려운 주제가 되지 않을까 싶습니다.