픽셀 아트 JRPG 제작하기: Claude Code를 활용한 개발자의 워크플로우와 기술 스택

한 개발자가 Claude Code를 사용하여 완전한 픽셀 아트 JRPG인 '바케마치(Bakemachi)'를 제작한 경험을 공유했습니다. 이 게임은 일본어 학습을 위해 설계되었으며, 대부분의 핵심 게임플레이 요소가 구현된 플레이 가능한 데모를 포함하고 있습니다.

프로젝트 상세

게임에는 오버월드 탐험, 상호작용형 어휘가 포함된 NPC 대화, 미니 게임, 전투 시스템, 퀘스트 추적 기능이 있으며, 터치, 키보드, 컨트롤러 입력을 모두 지원합니다. 플레이 가능한 데모는 약 10-15분 정도 진행되며, https://bakemachi-steam-demo-production.up.railway.app/에서 접근할 수 있습니다('새 게임'을 클릭하여 시작).

기술 스택

• 프론트엔드: Vite + React + TypeScript
• 게임 엔진: Phaser 3가 게임 캔버스 처리(타일 기반 이동, 스프라이트, 애니메이션)
• 상태 관리: Zustand가 Phaser와 React 간 연결
• UI: React가 모든 오버레이 렌더링(대화, 메뉴, HUD, 전투, 미니 게임)
• 에셋: 대부분 수제 또는 구매, 일부 '픽셀 아트' 에셋은 Nano Banana로 생성

Claude Code 작업 흐름

개발자는 전체 프로젝트에 Claude Code(Opus 4.6)를 사용했으며, 자신은 게임 개발자가 아니며 이번이 첫 게임이라고 언급했습니다. 작업 흐름은 다음과 같았습니다:

• 자연어로 요구사항 설명
• Claude의 코드 출력 검토
• 플레이테스트
• 결과 기반 반복

Claude Code 주요 관찰 사항

• 복잡한 변경: Claude는 다중 파일 변경을 효과적으로 처리했으며, 예를 들어 스토어, 컴포넌트, 설정, Phaser 장면 등 약 8개 파일에 걸친 전투 시스템 추가를 처음 시도에서 올바른 아키텍처로 구현했습니다.
• 컨텍스트 관리: Opus 4.6는 이전 버전보다 긴 컨텍스트에서 더 나은 성능을 보였습니다. 개발자는 claude.md와 progress.md 파일을 유지하여 원활한 세션 전환을 가능하게 했습니다.
• 디버깅: Claude는 시각적 버그의 스크린샷이나 설명이 제공되면 코드를 추적하고 문제를 빠르게 수정하는 디버깅에 탁월합니다. 그러나 요소 위치 지정과 같은 미세한 프론트엔드 작업에는 때때로 어려움을 겪습니다.

개발자는 게임을 Steam, iOS, Android에 출시할 계획이며, 게임과 Claude Code 작업 흐름에 대한 피드백을 구하고 있습니다.