클로드코드로 미니게임 만들기

머리속에 있는 게임은 너무 막막한데, 스터디장님께서 간단한 미니게임부터 시작해보라고 말씀주셔서 예전에 즐겨했던 "위로 높이 높이 올라가는" 미니게임을 만들었어요.

아주 간단하고 유명한 방식의 게임이고 시험삼아 만들어본거라 제가 입력했던 프롬프트는 정말 간단했어요.

"게임제목은 '더 높이높이'로 하자. 뛰는 캐릭터는 귀여운 토끼캐릭터였으면 좋겠어. 캐릭터가 높이 올라갈 때마다 배경이 바뀌면 좋겠어. 처음에는 풀밭 → 나무 → 새 → 하늘 → 우주 순으로."
"그라데이션으로 서서히 섞이며 전환되는게 훨씬 좋겠다. 토끼캐릭터는 실제로 만들어진거 보고나서 고칠지말지 결정할게."
"게임이 종료되면 랭킹을 기록해주자. 종료화면에서 닉네임을 물어보고, 닉네임+점수 기록. 마지막화면에서 랭킹도 보여주고."
"발판이 배경에 묻혀서 잘 안보이네. 발판을 벽돌느낌으로 바꿔보자."

위 요청사항에 따라 클로드코드가 아래와 같은 작업을 해주었습니다.

컨셉/타이틀: "더 높이높이" — 토끼 캐릭터가 점프로 올라갈수록 풀밭→나무→새→하늘→우주로 배경이 바뀌는 하이퍼-점프 게임. 배경 전환은 그라데이션으로 서서히 블렌딩되도록 구현.

발판(플랫폼) 비주얼: 배경에 묻혀 안 보이던 문제를 벽돌 스타일로 교체해 가시성 개선.

랭킹 시스템: 게임 종료 시 닉네임 입력 → 점수 기록 → 최종 화면에 리더보드 표시. 

api/score.js(점수 제출), api/leaderboard.js(조회), lib/leaderboard.js(닉네임 sanitize, 최대 20개 항목 유지)로 서버리스 API 구성.

저장소 선택: Supabase가 아니라 Vercel Blob(@vercel/blob)을 리더보드 저장소로 사용 — leaderboard.json 파일 하나를 blob으로 put/list 해서 읽고 쓰는 단순한 구조.

스택: 순수 vanilla JS + HTML/CSS, Vercel 서버리스 함수 배포 (Phaser 같은 별도 엔진 없이 가벼운 구성).

그리고 만들어진 게임입니다.

토끼 점프 - 스크린샷

토끼의 뽀잉뽀잉하는 모션이 좋아 나름 벽돌사이를 뛰어다닐 때 손맛이 괜찮다고 생각했는데요,
스터디원님들의 제보로 PC와 모바일에서의 게임감이 굉장히 다르다는 점을 뒤늦게 알게됐습니다!

모바일에서는 토끼가 너무 가볍게 휙,휙 움직여서 플레이가 굉장히 어렵더라구요.

다음 게임을 만들 때는 모바일환경까지 고려하여 제작,테스트를 해야겠다고 생각했습니다.

다음으로 만들고있는 게임은 "붕붕보이즈"라는 미니게임입니다.

우주 테마 4스테이지 아케이드 미니게임인데요,

원래 "fish-fish"(물고기/바닷속 테마)로 기획됐다가 원하는 스타일의 픽셀아트 어드벤처 애셋을 못 구해서(Kenney.nl에 바다 팩이 없었음) 우주 테마로 리스킨하기로 결정했습니다.

일단 처음이니까 이미 만들어진 애셋을 이용해서 어떻게든 만들어볼 생각인데, 디자인이 너무 마음에 안들면 픽셀아트 제작도 해볼 생각입니다.

앞서 만들었던 "더높이높이"게임보다는 게임방식이나 구성, 그래픽이 좀 더 퀄리티있었으면 좋겠다는 제 요구에 클로드코드가 아래 2개 선택지를 제안하며, phaser을 추천하여 해당 엔진을 선택했습니다. (다만 제 지식의 부족으로 내용이 잘 이해가 안가긴합니다.ㅎ 만들다보면 알게되겠지요)

  • Canvas(저수준): 게임 루프·충돌 판정·씬 전환을 전부 손으로 구현해야 함 → 의존성 없이 가볍지만, 스테이지마다 다른 로직을 매번 처음부터 짜야 해서 개발 속도 느리고 버그 위험 높음

  • Phaser(엔진): Scene 시스템, 스프라이트 애니메이션, Arcade Physics(충돌·속도), 파티클, 입력 통합을 기본 제공 → 같은 시간 투자 대비 퀄리티가 확실히 높음

Phaser를 추천한 결정적 이유 두 가지:

  1. 4스테이지 구조와 궁합: 스테이지 하나당 Scene 하나로 깔끔하게 나뉘어서, 기획 중이던 4단계 미니게임 구성에 정확히 들어맞음

  2. 픽셀아트 렌더링 지원: pixelArt: true 옵션 하나로 확대해도 블러 없이 nearest-neighbor로 또렷하게 스케일링됨 — "귀엽고 컬러풀한 픽셀아트" 아트 방향과 바로 맞아떨어짐

게임의 뼈대는 만들어졌으나 총체적으로 그래픽이 너무 구지고, 효과음과 배경음악까지 제작해야해서 아직 갈 길이 구만리입니다.ㅎ

얼른 만들어서 소개하고, 같이 플레이 하고싶습니다. ^_^

2
2개의 답글
밀어주고 끌어주는

온·오프라인 AI 스터디

AI로 어디까지 할 수 있는지
직접 확인하실 분만 신청하세요.