웹사이트를 파괴하는 스틱맨 게임을 만들었습니다
Made a "Destroy Any Website" stickman game
핵심 요약
Claude를 활용해 웹사이트를 레벨로 변환하고 파괴하는 샌드박스 게임을 개발한 사례입니다.
- 게임 기능 — 웹사이트 URL을 입력해 페이지를 레벨로 변환하고 무기로 파괴함
- 기술 스택 — TypeScript 기반의 Canvas 2D 엔진과 Cloudflare Workers/DO 활용
- Claude 활용 — 아키텍처 설계, 코드 일관성 유지, 시각 효과 및 입자 효과 튜닝
- 사용자 반응 — 2000년대 초반의 향수를 자극하는 재미있는 프로젝트라는 호평
최종 게임 프로젝트. 지난 주말 동안 내 꿈의 스틱맨 샌드박스 게임을 만들었음 (Animator Vs. Animation 광팬임).
이 게임은 기본적으로 웹사이트 URL을 입력하면 그 페이지를 레벨로 바꿔주는 파괴 샌드박스 게임임. 그다음엔 그냥 무기로 다 때려 부수면 됨 :D
기술 스택:
- 언어: 난 TS 개발자니까... TS로 엔진이랑 렌더러 직접 짰고, 간단한 Canvas 2D 사용함.
- 멀티플레이어 (진짜 됨!): Cloudflare DOs 썼음. 이거 써본 경험이 있어서 방이랑 게임 상태 동기화용으로 바로 골랐지.
- 호스팅: Cloudflare Workers. 꽤 싸고 빠름. 보통 NPM 패키지 호환성 때문에 골치 아플 때가 있는데, 여기선 많이 안 써서 그런지 Workers 런타임에서 아주 잘 돌아감.
더 궁금한 거 있으면 말해줘. 픽셀 아트 렌더링이나 FX 같은 거 할 때 쓴 꼼수들도 좀 있거든!
Claude Opus 5.5 활용법:
- 아키텍처랑 기술적 타협점 브레인스토밍. 처음에 대략적인 아이디어는 확실히 있었는데, Claude 도움받아서 구현 계획으로 싹 다듬었음.
- 디자인 패턴 일관성 유지하면서 구현하기. Opus 5.5를 생각보다 더 빡세게 굴려야 했지만, 그래도 엄청 도움 됐음.
- 예술적인 결정 내릴 때도 Claude 썼음. FX랑 파티클 효과 내 마음에 쏙 들 때까지 실시간으로 계속 수정하면서 작업함.
