Claude를 사용해 아버지의 잃어버린 게임을 복원하고 레딧에 포팅했더니 첫날 350명 이상이 플레이했습니다!

혹시 도움 될까 싶어서 내 경험 좀 공유해 봄.

1. 내가 만든 거
   X-Squares는 우리 아빠가 2000년대 초반에 만든 퍼즐 게임인데, 어릴 때 이거 하면서 진짜 재밌게 놀았거든. 근데 원본 파일이 어디 갔는지 사라져서, Claude Code 써가지고 요즘 웹 게임으로 다시 만들어봤음.

타일을 돌려서 같은 색깔 모서리를 "X" 모양으로 맞추면 타일이 터지고, 위에 있던 타일들이 떨어지면서 콤보가 터지는 방식임. 다들 똑같은 판으로 기록 경쟁하는 데일리 모드도 있고, 시간 제한 안에 점수 채우는 보물찾기 모드, 퍼즐 모드 같은 것도 있음. 무료니까 한번 해봐. 어릴 때 추억이 담긴 게임이라 더 많은 사람들이랑 같이 하고 싶어서 만든 것도 있음.

2. 배운 점
   Claude 이 새끼 퍼즐 만드는 건 진짜 개판이더라. 너무 어렵거나 아니면 3살짜리도 한 번 클릭하면 끝나는 수준으로만 만들어대서 중간이 없음. 생각해보니까 타일 하나당 회전이 4개고, 순서도 중요하고, 타일 떨어지는 연쇄 작용까지 고려하면 경우의 수가 너무 많아서 AI가 추론하기엔 무리인 듯. 그래서 Claude한테 퍼즐 만들라고 닥달하는 대신, 내가 직접 시행착오 겪으면서 퍼즐 만들 수 있게 '퍼즐 메이커 모드'를 짜달라고 했음. Claude가 직접 못 하는 일이라도, 그걸 할 수 있게 도구를 만들어줄 순 있다는 걸 다시 한번 깨달음.

Claude가 디자인 감각이 좋은 것도 아니고 뭐가 재밌는지 직관적으로 아는 것도 아니라서, 플레이 테스트가 진짜 중요했음. 20년 전 게임 방식을 그대로 모바일로 가져오니까 영 아니더라고. 초반 버전 해본 사람들이 너무 어렵다고 해서 판 크기를 확 줄이고 난이도도 다시 맞췄음. 그리고 다들 게임 설명은 읽지도 않고 왜 안 되냐고 짜증 내길래, 강제로 튜토리얼 거치게 바꿨음. 보물찾기 모드에서 소리 알림 타이밍 조절하거나 시인성 개선 같은 것도 다 피드백 받아서 고친 거임.

3. Claude 활용법 + 스택

• 게임: Vite + React + TypeScript, SVG 타일 렌더링, requestAnimationFrame 게임 루프를 쓴 useReducer 상태 모델. 게임 엔진이랑 X 모양 감지/점수 계산 로직은 Claude가 다 짰음.

• 리더보드 + 백엔드: Vercel 서버리스 함수랑 Upstash Redis 써서 고득점 기록 저장함(데일리 보드 포함). Claude Code 프로젝트 몇 번 하면서 Vercel 써봤는데 진짜 개쩜. 왜 이게 무료인지 아직도 이해가 안 감.

• 분석 대시보드: 관리자용 대시보드 만들어서 플레이어 증가 추이나 참여도(일간/주간/월간 활성 유저, 모드별 플레이 횟수 등) 확인 중.

• 레딧 포팅: Devvit(레딧 앱 플랫폼)으로 옮기는 건 4시간 정도 걸렸음. React 코드베이스 그대로 재사용해서 소스 하나로 관리함. Claude 시켜서 레딧 유저네임 자동으로 리더보드에 올라가게 설정했고, r/XSquares에 댓글이나 글 쓰면 최고 점수 기반으로 유저 플레어 달아주게도 해놨음.
  레딧에서 플레이하고 리더보드 확인해봐: r/XSquares
  웹 버전: (리더보드는 따로 돌아감)