랜딩페이지에 미니게임을 붙였다 — WILD RUN, 네 번의 배포로 다듬은 눈길 썰매 게임
틱톡 광고에서 본 Sled Surfers 한 장을 던지고 '이런 간단한 거 하나 만들어볼까'로 시작했다. v1은 도형이라 조잡했고, v2에서 이모지 스프라이트와 눈 파티클로 갈아엎었고, v3에서 점프·부스터·물웅덩이·좌우 건물·코인 캐릭터 언락까지 붙였다. 그 사이 '오브제가 안 보인다', '점프하면 넘어가야지', '가격 반값' 피드백을 받아 그때그때 배포했다. 라이브러리 0, 13KB에서 23KB 사이의 단일 HTML 캔버스 게임. 만든 사람이 브라우저로 직접 못 해봤다는 게 이 빌드의 유일한 맹점이었고, 그걸 배포-피드백 루프로 메웠다.
참고 이미지 한 장에서 시작한 게임
시작은 스크린샷 한 장이었다. 틱톡 피드에 뜬 CrazyLabs의 Sled Surfers — 펭귄이 튜브를 타고 눈 덮인 도심 도로를 내려가며 차와 나무를 피하는 3D 엔드리스 러너. "우리 랜딩페이지에 이런 간단한 게임 하나 만들어볼까?" 한 줄이 명세의 전부였다.
진짜 3D 클론은 랜딩페이지에 안 맞는다. 무겁고, 로딩 느리고, 목적(잠깐 붙잡아두는 재미)에 과하다. 그래서 방향을 먼저 못 박았다 — 핵심 재미만 담은 가벼운 단일 HTML 캔버스 게임. 원근감 있는 내리막 도로를 2D 캔버스로 그려서 느낌만 살리고, 라이브러리는 쓰지 않는다.
v1 → v2 → v3, 네 번의 배포
v1은 솔직히 조잡했다. 도로는 사다리꼴, 장애물은 색깔 사각형, 캐릭터는 파란 타원에 검은 원이었다. 물리(원근 투영·차선·충돌·속도 증가)는 다 돌았지만 "너무 조잡하다 ㅋㅋㅋ"는 피드백이 정확했다.
v2에서 겉을 통째로 갈아엎었다. 도형을 이모지 스프라이트로 바꿨다. 🐧 펭귄이 튜브를 타고, 장애물은 🚗🚙🌲⛄🪨. 눈 파티클 70개가 계속 내리고, 길옆으로 나무와 건물이 원근으로 지나가며 속도감을 만든다. 코인은 반짝이는 골드 원, 먹으면 파티클이 팡 터진다. 이모지 스프라이트는 에셋 없이 귀여운 그림을 얻는 가장 싼 방법이었다.
v3에서 게임을 게임답게 만들었다. 점프(낮은 장애물은 넘고 높은 건 피하는 전략), ⚡부스터(잠깐 무적으로 뚫고 나가기), 물웅덩이, 창문 달린 좌우 건물들로 만든 도심 거리, 숨쉬듯 들썩이고 목도리가 펄럭이는 캐릭터. 그리고 카트라이더에서 빌려온 코인 상점 — 🐧 기본에서 곰·여우·판다·토끼·호랑이·산타·로봇을 코인으로 언락한다. 한 판에 모은 코인이 다음 판에도 쌓인다.
배포가 곧 플레이테스트였다
이 빌드의 유일한 맹점은 분명했다 — 만든 쪽이 브라우저로 직접 게임을 해볼 수 없다. 문법과 로직은 검증할 수 있어도 "손맛"은 확인할 방법이 없다. 그래서 매 버전을 바로 사이트에 배포하고, 폰에서 실제로 해본 피드백으로 다음 버전을 만들었다.
- "오브제가 너무 투명해서 안 보여" → 모든 스프라이트에 어두운 그림자 테두리를 넣어 밝은 눈밭에서 뜨게 했다. 딱 9줄.
- "점프하면 장애물을 넘어가야 하는데 그건 아니네?" → 공중에 뜬 동안 모든 장애물을 통과하도록 고쳤다. 2줄.
- "아이템 가격이 너무 비싸" → 캐릭터 값을 전부 반값으로.
각 피드백은 정확히 그것만 고치고 바로 배포했다. 큰 리팩터 대신 작은 진단과 즉시 반영의 반복. 결과물은 라이브러리 0, 파일 하나로 도는 캔버스 게임이다.
남은 것
지금은 /game.html에 독립 페이지로 살아 있다. 랜딩 히어로에 바로 박을지, 전용 페이지로 링크할지는 실사용 데이터를 보고 정한다. 사운드, 능력별 캐릭터(속도·자석), 데일리 챌린지, 리더보드가 다음 후보다. 하지만 그건 이 게임이 실제로 사람을 붙잡아두는지 확인한 뒤의 이야기다.
작은 게임 하나지만, 참고 이미지 한 장에서 배포되는 제품까지 가는 데 오간 건 결국 같은 루프였다 — 만들고, 내보내고, 실제로 써본 피드백으로 다시 만들기.