Claude를 활용해 100종 이상의 절차적 전차를 구현한 멀티플레이어 Three.js 브라우저 탱크 게임!

Three.js로 멀티플레이어 브라우저 탱크 게임을 만들었어! 어릴 때 월드 오브 탱크 블리츠를 진짜 미친 듯이 했거든. 그 특유의 분위기랑 게임 플레이, 그리고 미사일, 탐지, 장갑 도탄, 탄종 같은 복잡한 물리 엔진이랑 메커니즘을 가진 탈것을 직접 몰고 다닌다는 아이디어에 완전히 꽂혔었지.

이제 브라우저에서 바로 플레이할 수 있어!

Claude of Tanks에는 16개의 독특한 맵에서 100종이 넘는 탈것을 플레이할 수 있어. 대포를 쏘는 기본 탱크부터 기관포랑 유도 미사일을 쏘는 장갑차(AFV), 한 탄창에 엄청난 딜을 쏟아붓는 자동 장전기 탱크까지 다 있지. 탱크마다 장갑 구역, 내부 모듈, 승무원 위치, 히트박스까지 아주 디테일하게 구현했어. 특별 갤러리에서 하나씩 다 확인해 볼 수 있어: https://cot.kevinliu.studio/gallery?id=amx56&layer=modules

CoT는 물리 기반 파괴 효과를 지원해서 포탑이 공중으로 날아가거나 서스펜션이 실제로 움직이는 것도 볼 수 있어. 멀티플레이도 당연히 지원하지! 비공개 방이나 LAN 로비에서 바로 접속하면 돼.

이름에서 알 수 있듯이, 나는 긴 개발 기간 동안 Claude Code를 멀티 에이전트 개발 파이프라인으로 활용했고, Codex도 같이 썼어. 내가 전체적인 아키텍처를 잡고, 각 탈것이랑 시스템이 뭘 해야 할지 정하고, 렌더링 결과물을 검토하면서 최종 결정을 내리는 식으로 진행했지.

저장소에는 AGENTS.md 파일이랑 시뮬레이션, 탈것, 네트워킹, UI, 오디오, 효과, 월드 생성 같은 하위 시스템별 지침 파일들이 들어있어. 에이전트들이 세션마다 지켜야 할 규칙들을 여기에 다 기록해 뒀거든. 단위는 미터, 초, 라디안을 쓰고, 60Hz 고정으로 돌아가게 설정했어. 권한이 있는 로직은 무조건 결정론적(deterministic)이어야 하니까. 탈것을 수정할 때는 특정 지오메트리, 장갑, 모듈, 릴리스 게이트를 거쳐서 모델을 시각적, 기하학적으로 검증하게 만들었지.

탈것 개발할 때는 전체를 가족 단위로 묶어서 나눴어. 에이전트 하나가 특정 탈것 프로필이나 패밀리 파일을 맡아서 지오메트리를 구현하고, 관련 검사를 돌리고, 스크린샷을 생성하는 식이야. 그럼 다른 에이전트(비평가)가 렌더링된 탱크의 비율, 클리핑, 누락된 표면, 주행 장치, 세부 디테일 같은 걸 검토해. 마지막으로 오케스트레이터가 검사를 다시 돌리고 검증된 파일만 커밋했어.

더 큰 시스템들은 Claude Code의 도움을 받아서 구현하고 테스트했어:

• 고정 단계 이동, 서스펜션, 장갑, 탄도학, 모듈, 탐지 및 봇

• 비공개 방, LAN 플레이, 예측, 서버 권한을 포함한 WebSocket 멀티플레이어

• 절차적 탈것, 궤도, 마킹, 생성된 아이콘 및 기술 도면

• 파괴 가능한 소품과 잔해가 포함된 모든 생성된 전장