하지만 코딩 아키텍처를 많이 배웠습니다

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

TL;DR

게시자는 자동 전투 시뮬레이션 게임의 첫 버전에서 game.js가 5,000줄까지 커진 뒤 Claude와 함께 V3 구조로 리팩터링하며 코딩 아키텍처를 익혔습니다. 재구축 과정에서 장면별 중복 코드를 재사용 가능한 JavaScript 조각으로 통합하고, Claude가 게임을 직접 확인할 수 있는 Headless Systems와 별도 Probe Tests를 마련했습니다. 핸드오프 파일 대신 코딩 중 함께 갱신되는 체크리스트를 사용하고 UI에는 Debug Grid를 추가해 토큰 낭비와 CSS 문제를 줄였습니다. 게시자는 회전하는 사다리꼴 UI처럼 학습 데이터에서 패턴을 찾기 어려운 기능이 복잡도보다 새로움 때문에 더 어렵다는 규칙을 얻었으며, Paper Arena Battle Simulator에 지뢰와 Ragdoll Physics를 추가할 계획입니다.

실용적 조언

반복해서 쓰는 게임 기능은 장면마다 복사하지 말고 에디터와 매치에서 공유하는 재사용 가능한 JavaScript 조각으로 분리하는 편이 좋습니다.
작업 상태를 별도 Handoff Files로 나중에 정리하기보다 코딩 중 갱신되는 체크리스트로 관리하면 추가 생성 단계와 오래된 문서 문제를 줄일 수 있습니다.
Claude가 화면을 직접 열어야 하는 작업은 Headless Systems와 별도 Probe Tests로 바꾸고, CSS 배치는 Debug Grid를 사용해 기준선을 제공하는 방식이 유용합니다.

섹션별 상세

게시자는 보드게임과 그래픽 디자이너로서 자동 전투 시뮬레이션 게임을 만들었고, 첫 버전의 game.js가 5,000줄까지 늘어나면서 구조적 문제가 커졌다고 설명했습니다. V3 재구축에서는 각 장면이 같은 기능을 따로 보유하던 방식을 버리고, 에디터와 매치에서 함께 쓰는 재사용 가능한 JavaScript 조각으로 기능을 묶었습니다. 이 변화는 코드 중복과 Claude가 처리해야 할 불필요한 토큰을 줄이는 방향으로 이어졌습니다.

게시자는 Claude가 게임을 직접 확인할 수 있도록 Headless Systems를 구성해 화면을 열거나 스크린샷을 찍는 절차를 없앴습니다. Claude용 Debuggers와 자신이 사용할 디버거를 별도로 만들고, Probe Tests를 production 코드와 분리해 실험용 검증이 실제 시스템과 섞이지 않게 했습니다. 이러한 구조는 게임 상태를 빠르게 확인하고 수정 결과를 반복 검증하는 작업 흐름을 뒷받침했습니다.

기존 Handoff Files는 Claude에게 별도 단계로 작성하도록 요청해야 해서 추가 토큰과 생성 과정이 필요했지만, 게시자는 이를 체크리스트로 바꿨습니다. 체크리스트는 코딩과 동시에 갱신되므로 작업 완료 시점의 상태와 어긋날 가능성이 낮고, 문서를 만들기 위한 추가 호출도 줄어듭니다. 게시자가 얻은 핵심은 문서화를 별도 산출물로 미루기보다 구현 과정에 포함하는 편이 에이전트 기반 개발에 적합하다는 점입니다.

UI 작업에서는 Claude가 CSS를 제대로 처리하지 못하는 문제가 있어 Debug Grid를 도입했습니다. 가장 어려웠던 기능은 UI에 회전하는 사다리꼴을 배치하는 일이었으며, 게시자는 이 문제가 학습 데이터에서 대응 패턴을 찾기 어려운 기능이기 때문이라고 해석했습니다. 그 결과 게시자는 기능의 난이도를 코드 복잡도보다 기존 사례에서 벗어난 정도인 새로움으로 판단하고, 이전에 없던 메커니즘을 별도 위험 요소로 계획하게 됐습니다.

이미지 분석

Screenshot
화면 중앙에는 실시간 전투 구역과 생존·사망 인원, 진행 시간이 표시되며, 하단 미니맵은 전장의 위치 정보를 제공합니다. 게시자가 설명한 UI 중심 게임 구조와 캐릭터 상태 추적, 전투 진행 관리가 실제 플레이 화면에 함께 드러납니다.
Paper Arena Battle Simulator의 자동 전투 화면으로, 여러 캐릭터의 상태와 장비가 왼쪽 목록에 표시되고 오른쪽에는 처치 순위가 나타납니다.

용어 해설

헤드리스 시스템(Headless Systems): — 화면을 직접 열거나 스크린샷을 촬영하지 않고도 게임 로직을 실행하고 상태를 확인하는 구조입니다. Claude가 시각적 조작 없이 게임을 관찰하고 테스트할 수 있게 해 디버깅과 반복 작업의 토큰 사용을 줄이는 데 쓰였습니다.
프로브 테스트(Probe Tests): — 운영 코드와 분리된 별도 테스트를 통해 게임 시스템의 특정 동작이나 상태를 확인하는 방식입니다. 게시자는 이 테스트를 production 코드와 분리해 실험과 검증이 실제 게임 로직을 직접 오염시키지 않도록 구성했습니다.
디버그 그리드(Debug Grid): — UI 요소의 위치와 배치를 점검하기 위해 화면에 기준선을 제공하는 도구입니다. CSS 구조를 Claude가 정확히 다루기 어려웠기 때문에 그리드를 추가해 인터페이스 배치 문제를 눈에 보이는 기준으로 확인했습니다.
핸드오프 파일(Handoff Files): — 작업 상태와 다음 단계를 정리해 후속 작업자나 에이전트에게 전달하는 문서입니다. 이 글에서는 파일을 별도 단계로 생성해야 하고 내용이 쉽게 오래된다는 이유로, 코딩 과정에서 갱신되는 체크리스트로 대체했습니다.

언급된 도구

Claude중립

게임 코드의 리팩터링, 디버깅, 체크리스트 갱신, Headless Systems를 통한 게임 상태 확인에 사용됐습니다.

언급된 리소스

DemoPaper Arena Battle Simulator