Start Screen

지난 주말에 나온 결과물을 공유합니다. 제 아들(10세)과 사촌(10세)은 게임을 아주 좋아하는데, 제가 지난 몇 달 동안 다양한 작은 도우미들을 바이브코딩 (vibecoding) 하는 것을 보고 자신들도 "게임을 만들 수 있는지" 물어보았습니다.

저는 당연히 이것이 한 번에 뚝딱 나오는 해결책이 아니라는 점을 설명했습니다. 먼저 자리에 앉아 게임을 계획하고, 게임이 어떤 모습이어야 하는지, 어떤 느낌이어야 하는지 등을 적어 내려가야 한다고 말해주었습니다.

그래서 아이들은 에셋 (assets), 장애물, 디자인 스타일, 게임이 진행될 세계관, 시각적 요소 등을 계획했습니다. 네온 시티를 배경으로 하는 3레인 엔들리스 러너 (endless runner) 게임입니다. 로봇을 피하고, 레이저를 점프하며, 코인을 획득합니다. 그들만의 색깔을 입힌 Subway Surfers 스타일입니다.

저는 Claude Code를 사용하여 프롬프팅 (prompting)을 담당했습니다. 디자인에 대한 요구 사항은 아이들이 냈습니다. 아이들은 테스트를 하고, 버그를 찾아내고, 계속해서 무언가를 요구하며 세계관을 점점 더 구체화했습니다. 길을 따라 늘어선 광고판, 건물 사이를 날아다니는 자동차, 슬로 모션 (slow-mo) 사망 시퀀스 등 더 많은 것들이 추가되었습니다.

저를 감동시킨 것은 코드 부분이 아니라, 아이들이 자신들이 실제로 발명한 무언가에 몇 시간 동안 몰입해 있는 모습을 지켜보는 것이었습니다.

처음에 제 아들은 지루해하지 않고 저와 함께 6시간 동안 내리 앉아 있을 수 있을 것이라고 생각했지만, 3시간이 지나자 가끔은 지루할 수도 있다는 것을 인정했습니다. 그래서 게임이 이미 플레이 가능한 상태였기에, 테스트용 데스크톱 컴퓨터 한 대와 모바일 기기 한 대를 주었습니다. 그러자 아이들은 능동적인 베타 테스터 (beta testers)로 전환되었습니다. 무엇이 어떤 느낌인지, 어떻게 작동해야 하는지에 대해 끊임없이 의견을 주었습니다.

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

.. 그리고 리더보드 (leaderboard)에 이름을 올리는 것도 잊지 마세요!

데스크톱과 모바일 모두에서 작동합니다.

Stack/Workflow:

• Three.js (단일 HTML 파일, 빌드 단계 없음, CDN을 통한 importmap 사용)
• Vanilla JS, 약 4000줄
• API를 위한 Vercel serverless functions (리더보드 + 플레이 카운터)
• 저장소로 Upstash Redis 사용 (리더보드를 위한 sorted set)
• 백엔드에서의 Rate limiting (속도 제한) + CORS + 비속어 필터 (profanity filter)
• 로고, 경고 스플래시(warning splash), 빌보드 광고를 위한 Higgsfield
• 배경 음악을 위한 Suno
• Three.js에서 절차적 (procedurally)으로 생성된 3D 에셋 (상자, 원기둥, 몇 개의 구체)

초기 디자인 작업