클로드 게임 개발 로그: 에이전트 기반 Three.js 개발 교훈과 기술 스택

에이전트 기반 게임 개발 워크플로우

게임 개발 경험이 없는 웹 개발자가 2주 동안 직접 코드를 작성하지 않고 Claude AI만을 사용하여 LUMINAL이라는 Three.js 라인 라이더 게임을 구축해 왔습니다. 이 개발자는 인내심과 Claude 5x 또는 20x 구독이 있다면 누구나 몇 달 안에 품질 좋은 게임을 제작할 수 있다고 보고합니다.

핵심 개발 관행

• Git 전략: 충돌을 피하기 위해 Git 워크트리를 사용하고, 개발 브랜치를 유지하며, 기능 브랜치에서만 작업하세요. 기능이 완료되면 AI 세션을 닫고 새로운 세션을 시작하세요.
• TypeScript & 테스팅: TypeScript를 일찍 도입하고 단위 테스트를 조기에 작성하세요. 컨텍스트가 사용 가능한 동안 모든 계획에 테스트를 포함시키세요. 정기적으로 테스트를 감사하고 종단 간 테스트를 지연시키지 마세요.
• 인프라 인식: Claude에게 반복적인 작업을 요청할 때를 식별하고, 품질 보증이 반복되기 전에 공유 인프라를 구축하세요.
• 도구 통합: 기술 구축 및 브레인스토밍을 위해 Superpowers 플러그인을 사용하고, 코드 검토, 명세서 작성 및 대상 UI 조정(이미지 기반 UI 피드백에 Claude보다 더 나음)을 위해 $20 Codex 구독을 활용하세요.
• 터미널 설정: 다른 설정보다 WARP 터미널을 권장합니다.

AI 한계 해결

AI는 색상 팔레트, 블룸 수준, 절차적 사운드 디자인과 같은 주관적인 문제에 어려움을 겪습니다. 해결책: Claude가 블룸, 색상 맵, 절차적 사운드와 같은 매개변수를 위한 수백 개의 관리자 전용 슬라이더와 토글을 구축하게 하고, 구성을 AI로 다시 피드백하기 위한 JSON 내보내기/가져오기 기능을 포함시키세요.

자원 활용

모든 것을 처음부터 구축하기보다 기존 자원을 사용하세요: 21st.dev, CodePen, Sketchfab 및 커뮤니티 자산.

개발 지혜

• 버그 수정보다 더 빠르게 구축할 수 있습니다. 너무 많은 것을 너무 빨리 추가하면 몇 주 동안의 다듬기와 브라우저 테스트로 이어집니다.
• 다운타임에는 Workflowy와 같은 도구를 사용하여 계획을 세우세요. Claude나 사용 제한을 기다리는 동안 ChatGPT/Codex로 구체화할 20-30개의 계획/생각/버그 수정 사항을 준비하세요.
• 즉각적인 수익화보다 학습과 재미에 집중하세요.

기술 스택

• 핵심: TypeScript, Three.js, Vite
• 백엔드: Firebase (인증, RTDB, Firestore, 호스팅, 클라우드 함수)
• 게임 서버: ws WebSocket 라이브러리가 있는 Node.js
• 테스팅/린팅: Vitest + ESLint
• 네트코드: WebSocket 릴레이(Cloudflare Workers)를 통한 입력 델타만 동기화하는 결정론적 록스텝 시뮬레이션. 시드된 RNG + 프레임 해시 비동기화 감지를 사용하여 클라이언트 간 일관된 상태를 유지합니다. 재연결에 대한 작업이 더 필요합니다.

게임 URL: https://luminal.live/ ("여전히 버그 투성이"로 설명됨)