검색
← 모듈 로드맵

Claude로 만든 클라이밍 퍼즐 게임 사례

발행 출처 DEV · Owain Williams

클로드사례입문자

나중에 보기좋아요
공유 · 인쇄
후기댓글

Beta Blast : 알록달록한 클라이밍 홀드를 벽에 쏘아 올리고, 세 개 이상 맞추면 경로가 이어진다. 지금 바로 브라우저에서 플레이할 수 있고, 무료이며 설치가 필요 없다.

Beta Blast gameplay
Beta Blast gameplay

모든 것은 하나의 질문에서 시작했다. "Puzzle Bobble의 복제품을 만들기에 좋은 기술 스택은 뭐가 있을까?"

몇 시간 동안 대화한 뒤, 나는 완성되어 배포된 게임을 손에 넣었다. 나는 코드를 한 줄도 쓰지 않았고, 그건 괜찮다.

구성 요소

  • 🧗 끝없는 등급. V0, V1, V2처럼, 끝없이 더 어려워진다
  • 📅 데일리 볼더. 하루에 하나의 루트, 모두에게 동일하다
  • ⏱️ 서바이벌. 벽이 계속 내려오고, 음악은 빨라지며, 스테이지는 점점 더 거세진다
  • 🛠️ 루트 세터. 직접 벽을 만들고 링크로 공유할 수 있다
  • 👥 인터넷을 통한 2인 대전. 홀드를 터뜨려 상대에게 줄을 보낸다
  • 🏆 전역 리더보드 , 각 점수 옆에 클라이머 아이콘이 표시된다
  • 🧢 커스터마이즈 가능한 클라이머. 플레이하면서 비니, 셔츠, 초크백 색상이 해금된다
  • 🔌 공개 API와 한 줄짜리 임베드 , 어떤 웹사이트든 리더보드를 표시할 수 있다
The leaderboard
The leaderboard

기술 스택

구성 요소사용 기술
게임TypeScript, Phaser 3 , Vite
아트와 사운드코드로 그리거나 합성했다. 이미지나 오디오 파일은 없다.
2인 대전PeerJS(WebRTC), 따라서 게임 서버가 없다
리더보드Cloudflare Workers + D1(SQLite), 무료 요금제에서 운영
호스팅GitHub Pages와 커스텀 도메인, GitHub Actions로 배포
품질236개의 테스트, 모든 등급을 플레이해 난이도를 확인하는 봇, 그리고 모든 pull request마다 실행되는 CI

재미있었던 이유

나는 창의적인 결정을 내리고, Claude는 타이핑을 했다. 나는 테마(홀드를 쏘는 클라이머), 이름, 그리고 다음에 구현할 기능을 골랐다. Claude는 선택지를 제안하고, 그것을 만들고, pull request를 열었다. 나는 대부분 "그래, 그렇게 하자"라고만 말했다.

스스로 작업을 점검했다. 헤드리스 브라우저에서 게임을 실행하고, 자기 자신의 스크린샷을 살펴본 뒤 이상해 보이는 부분을 고쳤다. 전체 리뷰를 요청했을 때는 실제 버그, 예를 들어 실시간 매치를 종료시켜 버리는 네트워크 순간 끊김 같은 문제를 찾아내고 수정했다.

지루하지만 필수적인 부분을 처리했다. 테스트, CI, 배포, Cloudflare 설정, README와 그 안의 스크린샷까지.

안티치트는 좋은 문제였다. 점수는 브라우저에서 오기 때문에 누구나 위조할 수 있다. 이제 게임은 모든 샷을 기록하고, 서버에서 같은 엔진으로 플레이를 다시 재생해 점수를 검증할 수 있다. 무료 요금제에서는 비활성화되어 있는데, 재생 한 번에 무료 티어가 허용하는 것보다 CPU를 더 많이 쓰기 때문이다. Claude는 그걸 측정해 나에게 알려줬고, 내가 선택하게 했다. 그런 식의 트레이드오프는 인간 동료에게서도 바라는 점이다.

솔직한 이야기

  • 한 번의 프롬프트로 끝난 게 아니었다. 내가 게임을 플레이하고 방향을 잡아가며 이어진 긴 대화였다.
  • 진행하는 동안 여러 가지가 깨졌다. Pages를 켜야 했던 배포, 잘못된 보드를 열어서 비어 보였던 리더보드 같은 것들이다. 하나씩 고쳐 나갔다.
  • Claude는 실제 휴대폰 화면을 눌러 볼 수도 없고, 어떤 샷이 손맛 좋은지도 느낄 수 없다. 그 부분은 여전히 내 몫이다.

직접 해보기

🎮 플레이: https://thesecretstage.vip/Beta-Blast/

💻 코드: https://github.com/OwainWilliams/Beta-Blast

한 줄로 리더보드를 자기 사이트에 추가할 수 있다:

코드
<script src="https://thesecretstage.vip/Beta-Blast/embed.js" data-board="daily" async></script>

"이런 게 있으면 좋을 텐데"라고 생각만 하고 있던 프로젝트가 있다면, 지금이 바로 그 신호다. 대화를 시작하고, 원하는 걸 설명해 보라. 그리고 오후 한나절만에 어디까지 갈 수 있는지 확인해 보자.

이 프로젝트에 더 추가하고 싶은 기능이 많이 있다. 하나는 Umbraco 테마 버전이고, 하나는 4인 버전이며, 또 하나는 TetriNet 같은 오래된 온라인 게임에서 좋았던 다른 기능들일지도 모른다. (혹시 아직 기억하는 사람 있나?)

보고 싶은 기능이 있다면 리포지토리에 issue를 만들어 달라. 같이 이야기해 보자.

출처

  • 원문: https://dev.to/owaincodes/beta-blast-a-bouldering-bubble-shooter-built-with-claude-323b (2026-10-12 · Owain Williams)

자료 변경 기록을 불러오는 중입니다.

다음 자료를 불러오는 중입니다.

후기

아직 후기가 없습니다

직접 적용한 결과와 주의할 점을 공유하는 공간입니다.

로그인하고 후기 쓰기

참고 자료 · 도구와 릴리스 노트

댓글