Three.js로 멀티플레이 탱크 게임 제작

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

작성자는 Three.js로 100종 이상의 차량과 16개 맵을 포함한 브라우저 멀티플레이어 탱크 게임을 만들었습니다. Claude Code와 Codex를 다중 에이전트 파이프라인에 연결하고, AGENTS.md에 단위·고정 60Hz·결정론적 권위 로직·차량별 품질 기준을 기록해 세션 간 일관성을 유지했습니다. 차량 작업은 구현 에이전트, 렌더링 critic, 검증 orchestrator로 나눴으며, WebSocket 네트워크와 물리 기반 파괴, 현가장치, 탄도와 모듈 시스템까지 포함했습니다. 작성자는 기능 검증에는 실행 가능한 불변 조건을 쓰고 시각 품질에는 렌더링과 스크린샷 비교를 별도로 적용해야 한다고 했습니다.

실용적 조언

장기간 이어지는 에이전트 작업에서는 중요한 설계 결정과 단위를 대화 기록이 아니라 저장소의 AGENTS.md 및 하위 시스템 지침 파일에 남기는 방식이 적합합니다. 새 세션이 같은 규칙을 읽은 뒤 작업을 이어갈 수 있어 이전 대화의 재구성 부담을 줄입니다. 고정 60Hz, 결정론적 권위 로직, 실행 가능한 실패 조건처럼 확인 가능한 규칙을 함께 기록해야 지침이 실제 검증으로 이어집니다.
차량처럼 독립적으로 나눌 수 있는 작업은 특정 프로필이나 가족 파일의 소유권을 한 에이전트에 배정하고 별도의 critic이 렌더링 결과를 확인하는 편이 안전합니다. 구현 에이전트는 기하와 검사, 스크린샷 생성을 맡고 critic은 비율, 클리핑, 표면, 주행 장치와 식별 가능한 세부 요소를 확인합니다. 마지막에는 orchestrator가 게이트를 다시 실행하고 검증된 파일만 커밋해야 병렬 변경의 충돌을 줄일 수 있습니다.
시각적 품질을 확보하려면 텍스트 기반 코드 리뷰에만 의존하지 말고 렌더링 결과를 검사하는 반복 루프를 구축해야 합니다. 변경 사항을 렌더링하고 스크린샷을 비교한 뒤 측정값과 품질 게이트를 다시 확인하면 탱크 비율 왜곡이나 카메라 문제처럼 이미지에서 즉시 드러나는 결함을 포착할 수 있습니다. 테스트는 시스템 불변 조건과 실패 조건을 확인하는 데 사용하고, 시각적 판단은 별도의 비교 절차로 운영하는 구성이 글의 경험과 일치합니다.

섹션별 상세

작성자는 Three.js 기반의 브라우저 탱크 게임을 100종 이상의 차량과 16개 맵으로 구성했으며, 차량마다 장갑 구역, 내부 모듈, 승무원 위치와 히트박스를 두었습니다. 물리 기반 파괴와 실제 현가장치를 적용해 포탑이 분리되어 날아가는 결과까지 처리하고, WebSocket 기반 멀티플레이어에서 비공개 방과 LAN 로비를 지원합니다. 게임 규모와 구현 범위를 구체적인 차량 수, 맵 수, 네트워크 방식으로 제시한 점이 단순한 프로토타입 공개와 구별됩니다.

작성자는 Claude Code와 Codex를 장기간 이어지는 다중 에이전트 개발 파이프라인에 투입하되, 아키텍처와 차량별 동작을 직접 결정하고 렌더링 결과를 검토했습니다. 저장소의 AGENTS.md와 하위 시스템별 지침 파일에 미터·초·라디안 단위, 고정 60Hz, 결정론적 권위 로직, 차량별 기하·장갑·모듈·출시 기준을 기록해 새 에이전트가 과거 대화 없이 작업을 재개하도록 했습니다. 차량은 bounded family 단위로 나누고, 구현 에이전트와 시각 critic, 검증 및 커밋을 맡은 orchestrator를 분리해 병렬 작업의 충돌과 미검증 변경을 줄였습니다.

작성자는 시각적 품질에는 일반적인 테스트만으로 부족하다고 판단하고 변경, 렌더링, 검사, 측정, 게이트 재실행의 순환을 사용했습니다. 에이전트가 생성한 스크린샷과 브라우저 실행 결과를 비교해 뒤틀린 비율, 클리핑, 누락된 표면, 주행 장치, 카메라 구도를 확인했으며, 텍스트 리뷰만으로는 이런 문제를 놓쳤다고 했습니다. 반면 각 시스템에는 구체적인 불변 조건과 실행 가능한 실패 조건을 두자 Claude Code의 신뢰성이 높아졌다고 밝혀 기능 검증과 시각 검증을 서로 다른 절차로 구분했습니다.

작성자는 병렬 에이전트가 엄격한 소유권 규칙 없이 같은 파일을 수정하거나 오염된 작업 트리에서 자산을 만들 수 있다고 했습니다. 이를 막기 위해 파일별 담당 범위와 격리된 Git worktree를 사용하고, 차량별 에이전트가 관련 검사와 스크린샷을 마친 뒤 critic과 orchestrator의 확인을 거친 파일만 커밋했습니다. 이 운영 방식은 다중 에이전트 수를 늘리는 것보다 변경 경계와 검증 절차를 먼저 고정하는 접근에 가깝습니다.

용어 해설

고정 시간 간격 시뮬레이션(Fixed-step Simulation): — 게임 물리와 판정 로직을 일정한 시간 간격으로 반복 실행하는 방식입니다. 이 글에서는 60Hz 주기를 사용해 이동, 현가장치, 탄도와 서버 판정을 일관되게 처리합니다.
서버 권위 구조(Server Authority): — 멀티플레이어 게임에서 서버가 최종 상태와 판정 권한을 갖는 구조입니다. 클라이언트 예측을 함께 사용하더라도 실제 게임 결과는 서버의 권위 로직을 기준으로 확정됩니다.
결정론적 시뮬레이션(Deterministic Simulation): — 같은 입력과 초기 상태가 주어지면 실행 환경이나 반복 횟수와 관계없이 같은 결과를 내는 시뮬레이션입니다. 글에서는 권위 로직에 이 조건을 적용했습니다.
Git worktree: — 하나의 Git 저장소에서 여러 작업 디렉터리를 분리해 병렬 작업을 진행하는 기능입니다. 글에서는 각 에이전트의 파일 소유권을 격리해 변경 사항과 생성 자산의 충돌을 막는 데 사용했습니다.
시각적 비교 검증(Visual Comparison): — 렌더링 결과를 캡처한 뒤 이전 결과나 품질 기준과 비교해 형태와 화면 구성을 검증하는 방법입니다. 글에서는 텍스트 테스트가 놓친 탱크 비율 왜곡과 카메라 문제를 찾는 데 활용했습니다.

언급된 도구

Claude Code추천

게임의 장기 다중 에이전트 개발 파이프라인에서 시스템과 차량 구현, 테스트, 렌더링 검증을 지원했습니다.

Codex중립

Claude Code와 함께 장기 다중 에이전트 개발 파이프라인에 사용했습니다.

Three.js중립

브라우저에서 실행되는 멀티플레이어 탱크 게임의 기반으로 사용했습니다.

Git worktrees추천

병렬 에이전트의 작업 디렉터리와 변경 사항을 격리하는 데 사용했습니다.

언급된 리소스

DemoTank Gallery

DemoClaude of Tanks

문서Claude of Tanks Trailer and Docs

GitHubClaude-of-Tanks