소개

안녕하세요, Rabbit Hole을 만드는 Sanchez입니다. 브라우저에서 바로 돌아가는 3D 게임을 혼자 기획하고 만들고 있어요. 만들면서 부딪힌 문제와 해결한 방법은 블로그에 하나씩 정리합니다.

Rabbit Hole은 혼자 만드는 사이드 프로젝트입니다. 외부 3D 모델 없이 토끼도 효과음도 코드로 빚었고, 배경음악만 AI(Suno)로 만든 곡을 쓰는 캐주얼 러너예요.

당신은 모험가 토끼가 되어 끝없이 깊어지는 굴을 달립니다. 당근을 모으고 장애물을 피하며, 하트 세 개가 다 닳기 전까지 얼마나 깊이 내려가는지에 도전하는 캐주얼 엔드리스 러너예요. 마우스·터치·키보드로 곧바로 즐길 수 있습니다.

기술 스택은 Next.js, React Three Fiber, TypeScript입니다. 무엇을 어떻게 만들었는지, 그 과정의 삽질까지 블로그에 기록하고 있어요.

요즘 웹게임은 대개 완성된 3D 에셋을 사서 씁니다. Rabbit Hole은 반대로 토끼의 몸도, 걷고 뛰는 동작도, 효과음도 전부 코드로 절차적으로 만들었어요. 덕분에 용량이 가볍고 색·모양·모션을 실시간으로 바꿀 수 있죠. 그 과정을 블로그에 하나씩 튜토리얼로 정리하고 있습니다.

지금 브라우저에서 바로 플레이할 수 있어요. 설치도 회원가입도 필요 없습니다.

무엇을 어디까지 코드로 만들었나

이 프로젝트의 규칙은 하나였습니다 — 3D 에셋을 사지 않는다. 모카의 몸은 구와 캡슐 같은 기본 도형을 조합해 비율을 맞춰가며 만들었고, 귀가 흔들리고 뒷다리가 접히는 동작도 애니메이션 파일이 아니라 매 프레임 계산되는 값입니다. 모자·리본·스카프 같은 액세서리도 마찬가지로 코드 안에 좌표로 존재합니다.

효과음도 파일이 아니라 Web Audio API로 그때그때 합성합니다. 당근을 먹는 소리, 점프, 부딪히는 소리 모두 오실레이터와 엔벨로프 조합이에요. 배경음악만 예외로 AI(Suno)로 만든 곡 열두 개를 씁니다.

이렇게 하면 용량이 가볍고, 색이나 비율을 실시간으로 바꿀 수 있습니다. 상점에서 털색을 고르면 즉시 반영되는 것도 텍스처를 교체하는 게 아니라 값 하나를 바꾸기 때문입니다. 대신 '그럴듯하게 보이는 비율'을 손으로 찾아야 해서, 토끼 하나 만드는 데 예상보다 훨씬 오래 걸렸습니다.

어떻게 만들고 있나

기획, 3D, 물리, 사운드, 서버, 배포, 그리고 이 글까지 전부 혼자 합니다. 팀이 없으니 회의도 없지만, 잘못된 판단을 걸러줄 사람도 없습니다. 그래서 무언가를 정할 때는 되도록 게임 안에서 확인 가능한 근거를 남기려고 합니다 — 예를 들어 굴마다 중력을 다르게 준 건 설정에 맞아서이기도 하지만, 실제로 플레이 감각이 달라지는지 먼저 확인한 뒤에 남긴 결정입니다.

코드는 매번 손이 가는 부분을 조금씩 고치는 식으로 굴러갑니다. 프레임이 떨어지면 그 원인을 찾아 기록하고, 버그가 재발하면 왜 재발했는지까지 적어둡니다. 그 기록들이 블로그의 개발기 절반쯤을 차지합니다.

이 사이트는 무엇으로 유지되나

게임은 전부 무료이고 인앱 결제도 없습니다. 유료로 파는 아이템을 만들지 않기로 한 건, 결제를 넣는 순간 난이도와 보상 설계가 결제 쪽으로 기울기 때문입니다. 굴을 어렵게 만들 이유가 '더 팔기 위해서'가 되는 건 피하고 싶었습니다.

대신 서버 비용은 크지 않습니다. 정적 페이지 위주라 호스팅은 거의 무료 구간에서 돌아가고, 리더보드만 Redis를 씁니다. 사이트를 유지하는 비용은 광고와 후원으로 충당하며, 광고는 블로그와 소개 페이지 쪽에만 두고 플레이 화면은 건드리지 않습니다.

플레이하다 떠오른 의견이나 버그 제보는 언제든 문의로 보내주세요. 큰 힘이 됩니다.