코딩을 못 해서 Claude와 함께 130KB짜리 HTML 탱크 게임을 만들었습니다.
I can't code. I vibecoded a full 1v1 tank game into one 130KB HTML file over hundreds of iterations.
핵심 요약
코딩 지식 없이 AI와 수백 번의 반복 작업을 통해 브라우저 기반 1v1 탱크 게임을 개발한 과정과 교훈을 공유합니다.
- 개발 방식 — 프레임워크 없이 Claude를 활용해 작은 기능을 하나씩 추가하며 개발함
- 디버깅 전략 — 버전 간 차이점 비교와 실기기 테스트를 통해 모바일 환경의 오류를 해결함
- 기술적 난관 — 재귀적 오디오 노드와 비효율적인 네온 효과 렌더링 문제를 최적화함
- 핵심 역량 — 코드를 직접 짜지 않아도 문제 해결을 위한 논리적 사고와 끈기가 중요함
[블록 1/14] Vibe Tanks는 브라우저에서 실행되는 탑다운 1v1 탱크 결투 게임입니다. HTML 파일 하나, 프레임워크 없음, 의존성 없음, 빌드 단계 없음. 게임 자체는 보여주기 쉬운 부분입니다. 공유할 가치가 있는 건 바로 그 워크플로우입니다. https://www.hammeranvilbrew.com/vibetanks?utm_source=r_vibecoding
[블록 2/14] 도구:
[블록 3/14] 모든 코드는 브라우저 내 Claude 사용. 렌더링은 Canvas 2D. 매치가 치열해질수록 빨라지는 사운드트랙은 Web Audio. 호스팅은 Cloudflare Pages. 이게 전체 스택의 전부입니다.
[블록 4/14] 실제로 효과가 있었던 과정:
[블록 5/14] - 한 번에 작은 기능 하나만 명시하세요. 절대 "더 좋게 만들어"라고 하지 마세요. 항상 단일하고 테스트 가능한 변경 사항이어야 합니다.
[블록 6/14] - 매번 전체 파일을 전달받고, 이전 버전과 차이점(diff)을 확인하세요.
[블록 7/14] - 변경 전마다 바이트 단위로 동일한 백업을 유지하세요. AI는 조용히 버그를 심어두며, 롤백만이 당신을 구할 수 있는 유일한 방법입니다.
[블록 8/14] - 데스크톱뿐만 아니라 실제 휴대폰에서 모든 빌드를 테스트하세요. 제가 겪은 대부분의 오류는 모바일 전용이었고 데스크톱에서는 전혀 보이지 않았습니다.
[블록 9/14] - 실패한 것은 거부하고, 다시 명시하고, 다시 진행하세요. 수백 번 반복했습니다.
[블록 10/14] 어렵게 배운 점들:
[블록 11/14] - 자기 재귀적인 오디오 컴프레서 노드가 며칠 동안 성능을 망쳤습니다. 프레임 루프를 계측하여 긴 프레임을 추적한 끝에야 겨우 찾아냈습니다.
[블록 12/14] - 네온 광채(glow) 효과가 매 프레임마다 재계산되면서 휴대폰 성능을 저하시켰습니다. 해결책은 광채를 오프스크린 스프라이트에 한 번 렌더링하고 매 프레임마다 그 이미지를 찍어내는 것이었습니다. 같은 모습이지만 비용은 훨씬 적게 듭니다.
[블록 13/14] - 단일 파일에서는 전역 이름 충돌이 치명적입니다. 최상위 이름을 추가하기 전에 항상 확인하세요.
[블록 14/14] AI가 코드를 작성합니다. 실제 작업은 방향 설정, 테스트, 그리고 포기하지 않는 것입니다.
