MAKING · 제작기
갓생 라이더 제작기: 배달 게임이 길 잇기 퍼즐이 되고, 모드가 넷이 되기까지
1월에 만든 배달 탭 게임을 5월에 길 잇기 퍼즐로 다시 만들고, 사흘 뒤 9분 사이에 모드 세 개를 더 붙였습니다. 그 직후 운영 배포가 세 번 연달아 실패한 이유와, 성공한 배포 뒤에 나타난 빈 화면까지 커밋과 배포 기록으로 돌아봤습니다.
갓생 라이더는 배달 라이더가 주인공인 모바일 웹게임입니다. 저장소의 운영 브랜치(main)에는 커밋이 38개 있고, 기간으로는 2026년 1월 25일부터 5월 9일까지입니다. 그런데 이 넉 달은 고르게 쓰이지 않았습니다. 1월에 하루, 2월에 하루, 그리고 석 달을 건너뛴 뒤 5월에 사흘. 그 사흘 동안 게임은 장르가 바뀌고, 모드가 넷으로 늘었습니다. 이 글은 그 기록을 따라간 제작기입니다. 1월의 커밋 9개는 사용자 계정으로, 5월 이후의 기능 커밋 22개는 Claude Code가 작성자로 남아 있습니다.
1월: 배달 탭 게임
첫 버전은 1월 25일 오후, 두 시간 반 사이에 커밋 8개로 만들어졌습니다. Next.js 위에 게임 엔진 Phaser를 올리고, 장면(Scene) 하나에 게임을 담았습니다. 코드를 보면 배달을 하며 골드를 모으고, 무언가에 부딪히면 "배달 실패! 충돌했습니다", 끝까지 가면 "배달 완료!"가 뜨는 구조입니다. 배달 상자를 가지고 있으면 골드가 두 배가 되는 장치도 있었습니다. 커밋 제목은 "최초", "속도 수정", "로직 개선", "기능 개선", "시간 세팅"처럼 짧습니다.
2월 1일 "업데이트" 커밋을 끝으로 저장소는 석 달 동안 조용했습니다. 왜 멈췄는지, 왜 다시 시작했는지는 기록에 없습니다.
5월 6일: 길 잇기 퍼즐로 다시 태어나다
5월 6일 아침, 커밋 제목은 "경로 연결 타일 퍼즐로 코어 게임플레이 교체 + 모바일 웹 전용 리뉴얼"입니다. 게임의 중심이 통째로 바뀌었습니다.
- 새 규칙 — 격자 위의 도로 타일을 탭해서 돌려, 음식점에서 손님 집까지 길을 잇습니다.
- 풀 수 있는 판만 — 타일의 연결 방향을 비트로 표현하고, 너비 우선 탐색(BFS)으로 길이 이어졌는지 판정하며, 판을 만들 때부터 풀이가 있도록 생성합니다.
- 덜어내기 — 1월의 탭 미니게임과 그 데이터 훅을 지우고, 저장 데이터는 골드·레벨·최고 기록·탈것만 남겼습니다.
- 모바일 전용 — 화면 안전 영역, 터치 동작, 화면 크기에 맞춰 늘어나는 게임 캔버스까지 휴대폰 세로 화면에 맞췄습니다.
그날 하루에만 커밋이 열일곱 개(합치기 포함) 이어집니다. 한 시간이 안 돼서 난이도를 다시 짰습니다. 원래 5×7 판에서 시작하던 것을 4×4 판, 직선과 커브만, 60초로 시작하게 바꾸고, 레벨이 오를수록 T자·십자 타일과 장애물이 나오며 시간이 줄어들게 했습니다. 커밋에는 "기존 5x7부터 시작하던 가파른 난이도를 튜토리얼급에서 시작하도록 재설계"라고 적혀 있습니다.
이어서 들어간 것들은 이렇습니다.
- 힌트 — 정답과 다르게 놓인 타일 하나를 노란 빛으로 깜빡여 줍니다. 나중에는 힌트와 함께 시간 10초도 더해 주도록 바뀌었습니다.
- 시간 초과 벌칙 — 시간 안에 못 이으면 레벨에 비례한 골드를 잃습니다.
- 레벨 기록과 다시 하기 — 깬 레벨마다 최고 골드를 기록하고, 아무 레벨이나 골라 다시 할 수 있습니다.
- 탈것별 도로 테마 — 도보는 보도블록, 자전거는 녹색 자전거길, 자동차는 황색 중앙선이 있는 차도로 타일 무늬가 바뀝니다.
- 개인정보처리방침과 오픈소스 라이선스 페이지
같은 날 저녁의 작은 수정 하나는 사람의 눈이 무엇을 보는지 보여 줍니다. 도보 라이더를 발자국 두 개 모양의 아이콘으로 그렸더니 "우주선 같다"는 피드백이 있었다고 커밋에 적혀 있습니다. 머리, 몸통, 흔드는 팔다리로 된 막대 사람을 직접 그려 바꿨고, 자전거 아이콘을 같이 쓰던 킥보드에도 바퀴 두 개와 손잡이가 있는 전용 아이콘을 따로 그렸습니다.
그림이 안 떠서 게임이 안 뜨던 버그
아이콘을 바꾼 직후, "배달 시작"을 눌러도 게임 화면이 뜨지 않았습니다. 커밋은 원인을 이렇게 설명합니다. 아이콘 SVG를 퍼센트 인코딩한 데이터 주소(data:image/svg+xml;charset=utf-8,%3Csvg…)로 불러왔는데, 일부 환경에서 Phaser의 로더가 이걸 처리하지 못하고 무한히 기다렸습니다. 그림 불러오기 단계(preload)가 끝나지 않으니 게임을 만드는 단계(create)로 넘어가지 못하고, 화면은 빈 채로 남았습니다.
해결은 같은 그림을 base64로 인코딩한 주소(data:image/svg+xml;base64,…)로 바꾸는 것이었습니다. 브라우저와 서버 양쪽에서 같은 결과가 나오도록 인코딩 방법도 나눠 두었습니다. 오류 메시지 없이 "기다리기만 하는" 실패는, 화면이 비었다는 증상만 남기고 원인을 숨긴다는 점에서 찾기 까다로운 종류입니다.
5월 9일: 9분 사이에 모드 셋
사흘 뒤인 5월 9일 오전, 갓생 라이더는 "여러 미니게임을 고르는 게임"이 됩니다. 먼저 9시 45분, 모드를 여러 개 담을 틀이 들어갔습니다. 모드 목록과 설명을 한 곳에 모으고, 기존 퍼즐을 그 안의 "경로 잇기 퍼즐" 모드로 옮기고, 저장된 진행도도 모드별로 나누어 자동으로 옮겼습니다. 첫 화면은 큰 "배달 시작" 버튼 하나에서 모드 카드 그리드로 바뀌었습니다.
그리고 9시 49분부터 54분까지, 5분 사이에 모드 세 개가 차례로 합쳐졌습니다.
- 박스 던지기 — 화면을 당겼다 놓아 배달 상자를 포물선으로 던져 건물 옥상에 맞힙니다. 30초 동안 최대한 많이.
- 도시 질주 — 세 차선을 자동으로 달리며 좌우로 피하고, 위로 밀어 점프, 아래로 밀어 슬라이드합니다. 속도는 점점 빨라집니다.
- 음식 매칭 — 치킨·피자·라면·주먹밥·고추 다섯 가지 음식 타일로 하는 3매치 퍼즐. 연쇄로 한 단계 더 터질 때마다 보상 배수가 0.4씩 올라갑니다.
다섯 번째 "라이더 서바이벌"은 "준비 중" 카드로 남아 있습니다.
배포가 세 번 실패하고, 성공한 뒤에 화면이 비었다
여기서부터는 배포 기록이 이야기를 이어 갑니다. 모드를 하나씩 합칠 때마다 운영 배포가 자동으로 시작됐는데, 9시 49분, 52분, 54분의 배포가 세 번 연달아 실패(ERROR)했습니다.
13분 뒤의 수정 커밋이 원인을 적었습니다. 서버에서 페이지를 미리 그리는 단계에서 "window is not defined" 오류가 났습니다. 모드 목록 파일이 모드 설명과 함께 게임 장면 코드까지 불러오고 있었고, 첫 화면 → 모드 목록 → 장면 → Phaser로 이어지는 불러오기 사슬이 생겼습니다. Phaser는 불러오는 순간 브라우저의 window를 찾는데, 서버에는 window가 없습니다. 그래서 목록을 두 파일로 나눴습니다. 첫 화면은 Phaser가 없는 "설명" 파일만 보고, 장면 파일은 브라우저에서만 불러오는 게임 부품에서만 쓰게 했습니다.
10시 7분, 배포는 성공(READY)했습니다. 그런데 이번에는 모드 카드를 누르면 화면이 빈 채로 멈췄습니다. 5분 뒤의 커밋은 원인을 "추정"으로 적었습니다. 게임 부품 안에서 두 개의 효과(useEffect)가 같은 장면을 한 번은 등록하며 시작하고, 한 번은 다시 시작해서 꼬였을 가능성, 그리고 Phaser를 내려받는 동안 아무 표시가 없어 "빈 화면"으로 보였을 가능성입니다. 효과를 하나로 합치고, 모드나 레벨이 바뀌면 게임 부품을 통째로 새로 만들게 하고, 내려받는 동안 "게임 불러오는 중…"을 띄웠습니다. 10시 13분의 배포가 운영 브랜치의 마지막 배포입니다.
돌아보면 배포 실패 세 번은 오히려 안전한 실패였습니다. 실패한 배포는 서비스에 올라가지 않으니, 그동안 사용자는 5월 6일 저녁의 정상 버전을 보고 있었습니다. 더 까다로운 쪽은 성공한 배포 뒤의 빈 화면이었습니다. 빌드는 통과했지만 게임은 열리지 않았습니다.
그 뒤
저장소에는 6월 18일에 만들어진 브랜치가 하나 더 있습니다. 커밋 제목은 "외계인 돌파 배달 매치3 전투 모드 추가 및 테마 리브랜딩"입니다. 이 브랜치는 운영 브랜치에 합쳐지지 않아서 지금 서비스에는 나오지 않습니다.
돌아보며
갓생 라이더의 기록에서 눈에 띄는 것은 속도와 그 대가입니다. 9분 사이에 모드 틀과 모드 셋이 들어갔고, 그 셋은 각각 400~500줄짜리 게임 장면입니다. 하지만 모드를 담는 틀을 바꾼 순간 서버 쪽 빌드가 깨졌고, 그걸 고치자 브라우저 쪽에서 화면이 비었습니다. 둘 다 각 모드의 게임 규칙과는 상관없는, 부품을 어떻게 불러오고 언제 시작하느냐의 문제였습니다. 빠르게 늘린 만큼, 늘어난 것들을 묶는 틀이 먼저 흔들렸다는 기록입니다.
KKflow의 다른 게임 제작기는 최후의 파도, 스택 타워, 스위트 소트 잼에 있습니다. 웹게임을 휴대폰에 설치하는 방법은 PWA 글에 정리했습니다.