아이들과 함께 게임 만들기, 정말 재밌네요!

주말 동안 만든 결과물을 공유합니다. 10살 된 제 아들과 조카가 게임을 좋아해서, 제가 지난 몇 달간 Claude로 여러 도우미를 만드는 걸 보고는 "우리도 게임을 만들 수 있냐"고 물어보더군요.

물론 한 번에 뚝딱 되는 건 아니라고 설명해 줬죠. 먼저 앉아서 게임을 기획하고, 어떤 게임을 만들고 싶은지, 어떻게 보이고 어떤 느낌일지 등을 적어보라고 했습니다.

그래서 아이들이 직접 에셋, 장애물, 디자인 스타일, 배경 세계관, 외형 등을 정했습니다. 네온 도시를 배경으로 한 3레인 무한 러닝 게임이죠. 로봇을 피하고, 레이저를 점프해서 넘고, 코인을 먹는 방식입니다. 아이들만의 감성을 담은 Subway Surfers 같은 게임이죠.

프롬프팅은 제가 Claude Code로 처리했고, 디자인 결정은 아이들이 했습니다. 아이들은 테스트하고, 버그를 찾고, 계속 새로운 기능을 요구하며 세계관을 점점 더 구체화했습니다. 길가에 광고판을 세우고, 건물 사이로 날아다니는 차를 넣고, 슬로우 모션으로 죽는 연출까지 추가했죠.

저를 놀라게 한 건 코딩 부분이 아니었습니다. 아이들이 자신들이 직접 만든 것에 몇 시간 동안 집중하는 모습이었죠.

처음에는 제 아들이 저와 6시간 동안 지루해하지 않고 앉아 있을 수 있을 거라 생각했지만, 3시간이 지나자 가끔은 지루할 수도 있다는 걸 인정하더군요. 그래서 게임이 어느 정도 플레이 가능해졌을 때, 테스트용 데스크톱 한 대와 휴대폰 한 대를 주고 아이들을 액티브 베타 테스터로 전환했습니다. 덕분에 게임의 느낌이나 작동 방식에 대해 끊임없이 피드백을 받을 수 있었죠.

원하신다면 플레이해보세요: https://megarun.app

...그리고 리더보드에 이름 남기는 것도 잊지 마세요!

데스크톱과 모바일 모두 지원합니다.

스택/워크플로우:

* Three.js (단일 HTML 파일, 빌드 단계 없음, CDN을 통한 importmap)
* Vanilla JS, 약 4000줄
* API용 Vercel 서버리스 함수 (리더보드 + 플레이 카운터)
* 저장소로 Upstash Redis 사용 (리더보드용 정렬 세트)
* 백엔드에 속도 제한(Rate limiting) + CORS + 욕설 필터 적용
* 로고, 경고 화면, 광고판 생성에 Higgsfield 사용
* 배경 음악에 Suno 사용
* Three.js에서 절차적으로 생성된 3D 에셋 (상자, 원통, 구체 몇 개)