CAPSTONE E / PRESS START / 135 MIN

Clawd Jump, 에이전틱 게임 개발

Claude Code 캐릭터로 만드는 슈퍼마리오풍 플랫포머

요구사항이 눈에 보이는 프로젝트만큼 에이전틱 코딩 훈련에 좋은 것이 없습니다. 점프가 뜨는지, 충돌이 새는지, 화면이 즉시 답을 줍니다. superpowers 워크플로로 게임 엔진부터 레벨, 배포까지 밀어붙이고, 마지막에 CloudFront URL을 Slack에 올려 서로 플레이합니다. 이 캡스톤은 Bedrock을 쓰지 않으므로 API 키가 필요 없습니다.

소요 시간 135분 미션 5개 + DoD 산출물 플레이 가능한 URL Update 2026.07
MISSION BRIEFING

주인공은 Clawd

숙지

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

이 도트가 공식 캐릭터 데이터입니다. 12x8 그리드, 오렌지 #D97757와 잉크 #14130F 두 색. 설계 프롬프트에 픽셀 배열로 포함되어 있으니 그대로 쓰면 됩니다.

규칙, A~D와 동일 ① 파일을 손으로 짜지 말고 Claude에게 시켜서 만든다 ② 각 Phase의 DoD를 통과해야 다음으로 ③ 막히면 "막힐 때 열어보기"의 힌트를 쓴다. 구현 경로는 자유입니다.
MISSION 00

사전 준비

10분

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

Terminal, 전체 복사
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
1로컬 미리보기 통로 확인

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

Terminal, 미리보기 서버
cd ~/capstone/clawd-jump/frontend && python3 -m http.server 8000

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

프록시가 안 열린다면 끝의 슬래시(/proxy/8000/)를 빠뜨리지 않았는지, 서버가 frontend 폴더에서 떠 있는지 확인하세요. 그래도 막히면 미리보기 없이 진행하고 Phase 4 배포 후 CloudFront URL로 한 번에 확인해도 됩니다.
2claude-hud 설치, 상태줄 HUD
Claude 세션 입력, 전체 복사
/plugin marketplace add jarrodwatts/claude-hud
/plugin install claude-hud@claude-hud
/reload-plugins
/claude-hud:setup

설치가 끝나면 세션 하단 상태줄에 모델, 컨텍스트 사용량, 세션 상태가 표시됩니다. 긴 캡스톤에서 컨텍스트가 얼마나 남았는지 한눈에 보이므로, Phase 사이에 정리 시점을 잡기 좋습니다.

CHECKPOINT
MISSION 01

설계, 브레인스토밍

15분

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

Terminal (~/capstone/clawd-jump)
cd ~/capstone/clawd-jump && claude
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을 쓰지 않는다
결정이 필요하면 이 범위 안에서 최소한으로만 물어봐.
자동화 옵션, auto mode 세션에 auto mode on을 선언해 두면 superpowers가 brainstorming → write-plan → execute-plan의 단계 전환과 승인 대기를 자동으로 이어 갑니다. 시간이 빠듯할 때 유용합니다. 단계마다 직접 검토하려면 기본(수동)을 유지하고, 되돌리려면 auto mode off입니다.

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

CHECKPOINT
MISSION 02

Phase 1, 엔진

30분

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

Claude 세션 입력
/superpowers:executing-plans Phase 1(엔진)만 구현하고 멈춰줘. 640x360 캔버스, 게임 루프, 좌우 이동과 점프(코요테 타임 0.1초, 점프 버퍼 0.1초), 임시 바닥 하나, 그리고 요구사항 2)의 CLAWD 픽셀 배열 렌더(정지 시 2프레임 다리 애니메이션이면 더 좋다). 끝나면 실행 방법을 알려줘.
Terminal, 미리보기
cd frontend && python3 -m http.server 8000
관찰 포인트 점프의 손맛은 상수 셋의 균형입니다: 중력(초당 가속), 점프 초속도, 코요테 타임. 붕 뜬다 싶으면 중력을 키우고, 발이 미끄러지면 마찰을 넣어 달라고 말로 주문하세요. 수치를 직접 고치는 게 아니라 느낌을 말하면 Claude가 수치를 찾는 것, 그게 이 랩의 연습입니다.
막힐 때 열어보기, 물리 핵심 힌트
물리 상수와 점프 (참고 조각)
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 충돌 해소
}
DEFINITION OF DONE
MISSION 03

Phase 2 + 3, 레벨과 게임플레이

50분

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

Claude 세션 입력, Phase 2
/superpowers:executing-plans Phase 2(레벨과 카메라)만 구현해줘. 요구사항 4)의 타일 문자열 맵(16px)과 AABB 타일 충돌, 화면 2~3배 폭 레벨, Clawd를 따라가는 카메라(레벨 경계 클램프)까지.
Claude 세션 입력, Phase 3
/superpowers:executing-plans 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
이 미션의 3대 함정 ① 키를 눌러도 반응이 없다 = 캔버스 밖 포커스이거나 스크롤에 먹힌 것, keydown을 window에 걸고 Space의 기본 스크롤은 preventDefault. ② 벽에 끼거나 모서리에서 떨림 = 충돌 해소를 축별로(X 먼저, Y 다음) 분리. ③ 코인이 안 먹힌다 = 타일 좌표와 픽셀 좌표 혼동, 충돌은 픽셀 AABB로 통일.
DEFINITION OF DONE
MISSION 04

Phase 4, 배포와 개장

30분

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

Claude 세션 입력
/superpowers:executing-plans Phase 4(배포)를 구현해줘. CDK 단일 스택: S3 버킷(비공개) + CloudFront(OAC) + BucketDeployment로 frontend/를 서빙, 리전 ap-northeast-2, RemovalPolicy DESTROY, 출력에 CloudFront URL.
Terminal, 배포와 스모크
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을 공유하세요. 서로의 레벨을 플레이해 보는 것까지가 개장입니다.

Claude 세션 입력, 플레이 후 즉석 튜닝
점프가 낮아 조정 좀 해줘

플레이 감각이 곧 요구사항입니다. 이렇게 한 줄로 지시하면 Claude가 점프 물리 값을 찾아 고칩니다. 수정 후 npx cdk deploy --require-approval never로 재배포하고 새로고침해 손맛을 다시 확인하세요.

DEFINITION OF DONE
OPTION

하네스 엔지니어링, 작품을 성숙시키고 등급을 받다

+15분 옵션

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

1플러그인 2종 설치
Terminal, 전체 복사
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 때와 같은 규칙입니다.

2성숙화, /init-project와 /sync-docs
Claude 세션 입력 (새 세션, worktree에서)
/init-project .

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

Claude 세션 입력
/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
3평가, /harness-eval로 등급 받기
Claude 세션 입력
/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가 같은 감각으로 튜닝합니다. 여유가 있다면 결정을 기록으로 남기세요:

Claude 세션 입력
/add-adr jump-feel-tuning
/add-runbook clawd-jump-deploy
시간과 신뢰 가드 잔여 시간이 빠듯하면 설치와 /harness-eval:quick(30초 체크리스트)만으로 충분합니다, /init-project는 17단계라 수 분이 걸립니다. /harness-eval:standard의 동적 분석은 대상 프로젝트의 훅과 테스트를 실제로 실행합니다. 방금 본인이 만든 프로젝트라 안전하지만, 남의 저장소를 평가할 때는 --static-only 플래그가 예의이자 안전입니다.
OPTION DONE, 진행률 미집계

미션 종료

게임은 에이전틱 코딩의 최고 훈련장입니다. 요구가 눈에 보이고, 피드백이 즉각적이니까요.

가져가는 것내용
느낌을 말로 주문하기"점프가 붕 뜬다"를 수치 튜닝으로 번역하는 것은 Claude의 일, 판정은 사람의 일
Phase 단위 검증 루프브라우저 수동 플레이도 훌륭한 검증, 핵심은 Phase마다 멈추고 확인하는 리듬
같은 배포 패턴S3 + CloudFront + BucketDeployment는 A, C, D와 동일한 근육, 이제 눈 감고도
OPTION, Bedrock 레벨 생성기 (선택, API 키 필요) CapstoneA의 ~/capstone/.env 방식으로 Bearer 키를 로드했다면, Converse 호출로 "난이도 상승 곡선을 가진 60타일 폭 레벨 문자열"을 생성해 맵으로 붙여 넣는 확장을 시도해 보세요. 프롬프트에 타일 규칙(X, C, ^, F)과 폭을 명시하는 것이 요령입니다.
NEXT

포털로

다른 캡스톤(A Ship It, B Self-Heal, C Grand Open, D Grounded)도 같은 리듬입니다. 워크샵 포털에서 다음 미션을 고르세요.