카피바라 게임: 설치 없이 브라우저에서 WASD로 하는 서바이벌 미니게임을 오후에 만든 기록
카피바라 게임을 설치 없이 브라우저에서 바로 하는 서바이벌 미니게임으로 오후 한나절에 만들었습니다. 생산성 툴 사이에 잠깐 쉬어 가는 칸을 넣은 이유와 범위를 적었습니다.
툴을 연속으로 만들다 보면 화면이 전부 “생산성”으로 물듭니다. Plan Wall, Trending Finder… 유용한데, 사이트가 할 일·트렌드만 얘기하면 답답했습니다.
그래서 하루는 일부러 장난을 쳤습니다.
카피바라 서바이벌. WASD(또는 화살표)로 움직이고, P로 멈추고, 귀엽게 살아남기. 거창한 스토리보다 “잠깐 쉬고 다시 일하기”가 목적입니다. 완성된 인디 게임을 노린 게 아니라, 포트폴리오에 놀이용 한 칸을 비워 둔 셈입니다.
생산성 도구 사이에 게임을 넣었습니다#
Plan Wall이랑 Trending Finder만 두면 사이트가 도구 목록처럼 보입니다. 중간에 게임이 하나 있으면 “일하는 도구만 파는 곳”이 아니라, 만든 사람이 잠깐 놀아도 된다는 신호가 됩니다.
서비스 패널을 내려가다가 카피바라가 나오면 그걸로 충분합니다. 거창한 브랜드 선언이 아니라, 분위기 전환용 한 칸이었습니다.
오후에 정한 범위#
시간을 아끼려고 범위를 좁혔습니다.
- 브라우저에서 바로 실행 (설치 없음)
- 조작은 WASD / 방향키 중심
- 스토리·컷신·복잡한 메타 진행은 넣지 않음
- “한 판 살아남기” 감각만 남기기
완벽한 밸런스나 리더보드보다, 열자마자 움직이는지가 우선이었습니다. 귀여운 비주얼과 짧은 피드백(움직임, 일시정지)만으로도 “아, 놀이용이다”가 전달되면 성공으로 봤습니다.
플레이 방법#
- 이동: WASD / 화살표
- 일시정지: P
- 선택: 마우스 또는 방향키 + 스페이스/엔터
브라우저에서 바로 열립니다. capybara.flowoodz.com
모바일에서도 열리지만, 조작감은 데스크톱 키보드가 더 편합니다. 잠깐 머리를 식힐 때 쓰기 좋게, 로딩과 UI도 얇게 유지했습니다.
미니게임 기술 선택 메모#
이런 규모의 브라우저 게임에서 실제로 고르는 것들은 몇 개 안 됩니다.
- 캔버스 vs DOM: 움직이는 오브젝트가 몇 개뿐이면 DOM+CSS로도 충분하지만, 오브젝트가 수십 개씩 돌아다니는 서바이벌류는
<canvas>2D가 편합니다. 점수판·일시정지 메뉴 같은 UI는 반대로 DOM에 두는 게 낫습니다. - 게임 루프:
requestAnimationFrame+ delta time. 프레임당 고정 이동량으로 짜면 120Hz 모니터에서 두 배로 빨라집니다. 이동량은 항상 "초당 픽셀 × 경과 시간"으로. - 키 입력:
keydown이벤트에서 바로 움직이면 OS의 키 반복 딜레이 때문에 뚝… 뚝… 끊깁니다.keydown/keyup으로 눌린 키를 Set에 넣고 빼기만 하고, 이동 판정은 매 프레임 Set을 읽어서 합니다. WASD와 방향키를 같은 액션에 매핑해 두면 손이 어디 있든 됩니다. - 탭 전환 처리: rAF는 백그라운드 탭에서 멈춥니다. 돌아온 순간 delta가 몇 초짜리로 커져서 캐릭터가 순간이동합니다. delta에 상한을 두거나, 탭이 숨겨지면 그냥 일시정지하는 쪽이 안전합니다.
가볍게 유지한 방법#
"오후 안에"가 목표라면, 만드는 결정보다 빼는 결정이 많습니다.
- 엔진·번들러 없이 시작해도 됩니다. HTML 한 장 + 스크립트로 시작하고, 커지면 그때 옮기면 됩니다.
- 에셋은 최소로. 도형 몇 개 수준에서 시작해도 "귀엽다"는 전달됩니다.
- 모바일은 뷰포트 메타 태그와 터치 이동 정도만. 가상 패드를 정성 들여 만들기보다 화면 드래그로 방향을 잡는 쪽이 구현도 짧고 손가락이 화면을 덜 가립니다. 그래도 본진은 데스크톱 키보드라, 모바일은 "열리고 움직인다"까지만 맞췄습니다.
- 저장·리더보드·사운드 옵션은 전부 다음으로. 세이브가 없으면 세이브 버그도 없습니다.
한 판이 짧은 게임은 로딩이 곧 UX입니다. 열어서 3초 안에 못 움직이면, 쉬러 온 사람은 그냥 닫습니다.
브랜드 허브에서의 역할#
flowoodz.com 서비스 섹션에서 Plan Wall · Trending Finder 옆에 카피바라가 있습니다. 의도적으로 톤이 다른 카드입니다. 할일·트렌드 조사 다음에 게임이 오면, 스크롤하는 사람이 “이 브랜드는 실험도 한다”고 읽게 됩니다.
나중에 스테이지를 늘리거나 사운드를 다듬을 여지는 있습니다. 첫 버전에서는 “왜 여기 게임이 있지?”에만 답하면 됐습니다. 잠깐 쉬고 다시 일하러 가면 그만입니다.
완벽한 게임이 아닙니다. 그래도 귀엽게, 한 판 살아남아 보세요.