Clawd Jump, 에이전틱 게임 개발

Claude Code의 마스코트 Clawd가 코인을 모으고 가시를 피해 깃발까지 갑니다. 엔진도 레벨도 손으로 짜지 않습니다, superpowers 워크플로로 Claude에게 시켜서 만듭니다.

이 캡스톤을 마치면 다음 네 가지를 설명할 수 있고, 다시 만들 수 있습니다.

이 캡스톤은 새 기술을 가르치지 않습니다. Ch1~6에서 배운 것을 실전 배치합니다.

M1 설계가 이 구조로 수렴하도록 방향을 잡아 주는 구현 지도입니다. 계획이 이상하게 흐르면 여기로 돌아와 대조하세요.

[게임 루프]  requestAnimationFrame, 매 프레임 (dt 기반)
Input(키 상태) ──> Update: 물리(G, JUMP_V, 코요테/버퍼) ──> 충돌(타일 AABB, X축 → Y축 순서)
                        │                                        │
Render(카메라 추적, 도트 스프라이트, HUD) <──────────────────────+

[배포 경로]  단 한 번, cdk deploy
index.html ──> S3(비공개 버킷) <── OAC ── CloudFront ──> 세상의 브라우저

Level 200의 핵심 구분입니다: 게임은 매 프레임 도는 루프이고 배포는 한 번 굳히는 파이프라인입니다. 루프 안에서는 dt(프레임 간격)로 물리를 계산해야 화면 주사율이 달라도 같은 손맛이 납니다.

프로젝트 폴더와 배포용 CDK 뼈대, 그리고 로컬 미리보기 방법을 준비합니다. Bedrock 키는 필요 없습니다.

aws sts get-caller-identity --query Account --output text
node -v && jq --version && npx cdk --version

mkdir -p ~/capstone/clawd-jump && cd ~/capstone/clawd-jump
[ -f cdk.json ] || npx cdk init app --language typescript
(npx cdk bootstrap > /tmp/bootstrap.log 2>&1 &)
git config user.name "capstone" && git config user.email "capstone@lab.local"
mkdir -p frontend
git add -A && git commit -m "chore: scaffold" 2>/dev/null || true

게임은 Phase마다 브라우저로 확인합니다. code-server 환경에서는 정적 서버를 띄우고 프록시 경로로 접근하는 방식이 가장 간단합니다.

cd ~/capstone/clawd-jump/frontend && python3 -m http.server 8000

브라우저 주소창의 code-server URL 끝에 /proxy/8000/을 붙여 접속합니다. 아직 index.html이 없으니 빈 목록만 보이면 성공입니다.

게임 스펙 7개 조항을 superpowers에 넘겨 설계와 Phase 계획을 뽑습니다. Clawd 픽셀 배열이 프롬프트에 들어 있습니다.

이 미션의 바탕 학습: Ch1의 세션 운용과 Capstone Setup의 superpowers 워크플로.

cd ~/capstone/clawd-jump && claude

/superpowers:brainstorming 다음 요구사항으로 "Clawd Jump"를 설계하자.
1) 순수 HTML5 Canvas + vanilla JS 단일 파일 게임: frontend/index.html 하나, 외부 라이브러리 금지,
   640x360 논리 해상도(픽셀아트, image-rendering: pixelated), requestAnimationFrame 60fps
2) 주인공은 Clawd, 아래 12x8 픽셀 배열을 그대로 렌더한다(셀 크기 3px, 좌우 반전 지원):
   const CLAWD = [
     ".AAAAAAAAAA.",
     ".AAAAAAAAAA.",
     ".AABAAAABAA.",
     "AAAAAAAAAAAA",
     "AAAAAAAAAAAA",
     ".AAAAAAAAAA.",
     "..A.A..A.A..",
     "..A.A..A.A.."
   ];
   const PALETTE = { A: "#D97757", B: "#14130F" };
3) 조작: ArrowLeft/Right 이동, Space 점프. 중력과 AABB 충돌, 코요테 타임 0.1초, 점프 버퍼 0.1초
4) 레벨은 타일 문자열 맵(타일 16px): X=지형, C=코인, ^=가시, F=깃발(골), 화면보다 넓게 만들고 카메라가 Clawd를 따라간다
5) 게임플레이: 코인 카운트 HUD, 가시에 닿으면 시작점 리스폰, 깃발 도달 시 CLEAR 화면과 재시작(R)
6) 구현 순서는 Phase 1(엔진: 루프, 입력, 물리, Clawd 렌더) → Phase 2(레벨, 충돌, 카메라) → Phase 3(코인, 가시, 깃발, HUD) → Phase 4(CDK로 S3 + CloudFront 배포)
7) 시간 제약 2시간: 단위 테스트 생략, 각 Phase는 브라우저 수동 플레이로 검증을 갈음한다. 이 게임은 Bedrock을 쓰지 않는다
결정이 필요하면 이 범위 안에서 최소한으로만 물어봐.

브레인스토밍 후 /superpowers:write-plan으로 계획을 만들고, Phase 4개 구성을 확인해 승인하세요. worktree로 이동해 작업이 시작됩니다.

게임 루프, 입력, 중력과 점프, 그리고 Clawd가 화면에 서 있는 것까지가 이 Phase의 전부입니다.

이 미션의 바탕 학습: Ch1의 지시 → 실행 → 검증 루프. 여유가 있다면 Ch2의 code-reviewer 서브에이전트에게 물리/충돌 코드 리뷰를 맡겨 보세요.

/superpowers:execute-plan Phase 1(엔진)만 구현하고 멈춰줘. 640x360 캔버스, 게임 루프, 좌우 이동과 점프(코요테 타임 0.1초, 점프 버퍼 0.1초), 임시 바닥 하나, 그리고 요구사항 2)의 CLAWD 픽셀 배열 렌더(정지 시 2프레임 다리 애니메이션이면 더 좋다). 끝나면 실행 방법을 알려줘.

cd frontend && python3 -m http.server 8000

const G = 1500, JUMP_V = -420, MOVE = 160;   // px/s 기준
let coyote = 0, jumpBuf = 0;
function step(dt) {
  coyote = onGround ? 0.1 : Math.max(0, coyote - dt);
  jumpBuf = keys.jump ? 0.1 : Math.max(0, jumpBuf - dt);
  if (jumpBuf > 0 && coyote > 0) { vy = JUMP_V; coyote = 0; jumpBuf = 0; }
  vy += G * dt;
  x += vx * dt;  y += vy * dt;   // 이후 AABB 충돌 해소
}

타일 맵과 카메라, 그리고 코인/가시/깃발까지. 게임이 게임이 되는 구간입니다.

이 미션의 바탕 학습: Ch2의 병렬 감각. 레벨 배열을 설계하는 동안 코인/가시 로직 보강을 서브에이전트로 병행할 수 있습니다.

/superpowers:execute-plan Phase 2(레벨과 카메라)만 구현해줘. 요구사항 4)의 타일 문자열 맵(16px)과 AABB 타일 충돌, 화면 2~3배 폭 레벨, Clawd를 따라가는 카메라(레벨 경계 클램프)까지.

/superpowers:execute-plan Phase 3(게임플레이)을 구현해줘. C 코인(먹으면 카운트, HUD 좌상단), ^ 가시(닿으면 시작점 리스폰), F 깃발(닿으면 CLEAR 오버레이와 R 재시작), 코인 전부 먹고 깃발이면 PERFECT 표기.

레벨을 직접 그리고 싶다면 이런 문자열 아트를 프롬프트에 붙이세요. 한 글자가 타일 하나입니다.

....................................................
..........C.C..............C.C.....................
.....XXX........XX..^^..XXXX....C...........F......
X.........C..........................XX....XXX.....
XXXX...XXXXX...XXXXXXXXXXXXXX...XXXXXXXX..XXXXXXXXXX

S3 + CloudFront로 세상에 공개합니다. 이 캡스톤의 deploy는 .env 로드가 필요 없습니다(Bedrock 미사용).

이 미션의 바탕 학습: Ch1의 검증 루프가 배포 스모크(curl 200)로 확장됩니다. 자동화가 궁금하면 Ch5의 헤드리스 패턴이 다음입니다.

/superpowers:execute-plan Phase 4(배포)를 구현해줘. CDK 단일 스택: S3 버킷(비공개) + CloudFront(OAC) + BucketDeployment로 frontend/를 서빙, 리전 ap-northeast-2, RemovalPolicy DESTROY, 출력에 CloudFront URL.

npx cdk deploy --require-approval never --outputs-file cdk-outputs.json
URL=$(jq -r '.[] | to_entries[] | select(.key|test("Url|Domain";"i")) | .value' cdk-outputs.json | head -1)
echo "$URL" && curl -s -o /dev/null -w "%{http_code}\n" "$URL"

https://d1a2b3c4d5e6f7.cloudfront.net
200

브라우저로 URL을 열어 한 판 클리어하고, Slack 채널에 URL을 공유하세요. 서로의 레벨을 플레이해 보는 것까지가 개장입니다.

개장까지 마쳤다면 이제 게임을 내 것으로 만드는 시간입니다. 아래 강화 카드 중 끌리는 것을 골라 하나씩 주문하세요, 전부 해도 좋고 하나만 해도 좋습니다. 요령은 같습니다: 한 번에 하나, 플레이해 보고, 마음에 들면 커밋.

점프를 더 높게, 혹은 더 경쾌하게. 물리 상수 세 개가 손맛의 전부입니다.

점프 손맛을 튜닝하자. JUMP_V를 지금보다 20% 강하게, 대신 G(중력)도 함께 올려서
"높이 뜨지만 떨어질 땐 시원하게"를 만들어줘. 최고점 근처에서 잠깐 머무는 느낌(정점 감속)도 살짝.
코요테 타임과 점프 버퍼는 유지. 바꾼 상수는 표로 before/after를 보여줘.

Clawd 대신 내 캐릭터로. 도트 배열만 갈면 주인공이 바뀝니다.

주인공을 교체하자. 지금의 12x8 두 색 도트 배열 방식을 유지하되,
새 캐릭터(예: 주황 몸통에 초록 모자를 쓴 고양이)를 3색 팔레트로 디자인해서 바꿔줘.
걷기 2프레임과 점프 1프레임 포즈도 배열로 추가하고, 프레임 전환은 이동 중에만.

깃발이 끝이 아니게. 2탄, 3탄으로 이어지는 레벨 진행을 붙입니다.

스테이지 2를 추가하자. 레벨을 배열의 배열로 일반화하고, 깃발에 닿으면
"STAGE CLEAR → 다음 스테이지" 흐름으로 이어줘. 2탄은 1탄보다 발판 간격이 넓고
가시가 많은 구성으로 새로 설계하고, 마지막 스테이지의 깃발에서만 ALL CLEAR를 띄워줘.
상단 HUD에 현재 스테이지 표시(1-1, 1-2)도 추가.

긴장감은 적에게서 나옵니다. 순찰형 몬스터 하나면 게임이 달라집니다.

순찰형 악당을 추가하자. 발판 위를 좌우로 오가는 몬스터(가장자리에서 방향 전환),
옆으로 닿으면 리스폰, 위에서 밟으면 처치되고 살짝 튕겨 오르게(밟기 반동).
도트는 주인공과 같은 방식의 작은 배열로 디자인하고, 스테이지마다 2~3마리 배치.
처치 수를 HUD의 코인 옆에 표시해줘.

여기부터는 정해진 카드가 없습니다. 당신이 게임 디자이너입니다. 플레이하며 아쉬웠던 것, 어릴 때 좋아했던 게임에서 훔치고 싶은 것 하나를 골라, 위 카드들처럼 직접 요구사항을 써서 주문하세요. 아이디어가 필요하면: 이동 발판, 대시(더블 탭), 배경 패럴랙스, 점프/코인 효과음, 타임어택 모드, 부서지는 블록, 숨겨진 보너스 방, 보스 스테이지.

내 게임에 [내가 원하는 기능]을 추가하자. 규칙:
1) 동작: [언제, 어떻게 발동하고 무엇이 일어나는지 한두 문장]
2) 손맛: [속도/높이/타이밍처럼 느낌을 좌우하는 요소와 원하는 감각]
3) 화면: [플레이어에게 어떻게 보이는지, HUD/이펙트/도트]
4) 기존 조작과 물리(코요테 타임, 점프 버퍼)는 깨지 않는다
구현 전에 이 규칙을 네 계획으로 다시 말해주고, 승인하면 진행해.

요구사항을 내 언어로 쓰는 것이 이 카드의 진짜 미션입니다. 동작/손맛/화면 세 칸을 채우는 순간, 당신은 바이브가 아니라 설계로 게임을 키우고 있는 겁니다.

지금까지 만든 것은 결과물입니다. 이 옵션은 그 결과물을 만든 작업 환경, 즉 하네스 (CLAUDE.md, hooks, skills, commands, agents)를 표준 구조로 성숙시키고(project-init), 그 품질을 6개 차원(정확성, 안전성, 완전성, 실행 가능성, 일관성, 검증 가능성)에서 채점받는(harness-eval) 단계입니다. superpowers의 3단(brainstorm, write-plan, execute-plan) 뒤에 4단 성숙화와 5단 평가를 붙이는 셈입니다. 캡스톤 공통의 마무리 의식입니다.

이 미션의 바탕 학습: Ch4의 훅과 스킬을 팀 자산으로 승격하는 감각, 그리고 Reference 3의 플러그인 생태계.

claude plugin marketplace add https://github.com/whchoi98/project-init
claude plugin install project-init@project-init
claude plugin marketplace add https://github.com/whchoi98/harness-eval
claude plugin install harness-eval@harness-eval
claude plugin list

설치 후 새 Claude 세션을 시작하세요, superpowers 때와 같은 규칙입니다.

/project-init:init-project .

게임 프로젝트의 하네스는 아직 얇습니다(단일 index.html과 CDK 스택). 기존 프로젝트 감지 모드가 있는 것은 보존하고, 없는 것(문서 스캐폴딩, 시크릿 스캔 훅, /review 커맨드, 테스트 골격 등)만 채웁니다. CLAUDE.md가 이미 있으면 덮어쓰기 전에 물어봅니다. 끝나면 이어서:

/project-init:sync-docs

## Sync Report
### Quality Scores (Before -> After)
| ./CLAUDE.md           | D (48) | B (82) | +34 |
| ./frontend/CLAUDE.md  | F (10) | C (61) | +51 |
### Changes Made
- Files created: 4 / Files updated: 2 / Runbooks missing: 1

/harness-eval:quick

{"mode": "quick", "scores": {"overall": 7.0, "grade": "B"}, "checklist": {"pass": 12, "warn": 3, "fail": 1}}

이 캡스톤의 비자명한 지식은 점프의 손맛입니다. "왜 G=1500이고 코요테 타임이 0.1초인가"를 CLAUDE.md의 패턴으로 기록해 두면 sync-docs 점수가 오르고, 다음에 이 저장소를 여는 Claude가 같은 감각으로 튜닝합니다. 여유가 있다면 결정을 기록으로 남기세요:

/add-adr jump-feel-tuning
/add-runbook clawd-jump-deploy