코드 한줄 안보고 Godot 로 벽돌깨기 게임 만들어서 배포하기

소개

안녕하세요, 24기 게임메이커스 스터디에 참여하게된 프론트엔드 개발자 이구구입니다. 첫 글을 적게되어 두근두근하네요.

첫 OT 수업에서 명령어 한줄만으로도 테트리스가 뿅 완성되길래 정말 신기하더라고요. 그래서 이왕이면 첫주에 간단한 게임 하나를 만들어서 배포까지 해보자 하고 만들어봤습니다.

게임 컨셉은 스와이프 벽돌깨기 + 덱빌딩(?)입니다.

만들기 쉬운 tier-1 목록에 벽돌깨기가 있었는데, 예전에 모바일로 스와이프 벽돌깨기를 재밌게 했던 기억이 있어서 바로 만들수 있을것 같았습니다. 그렇다고 아예 똑같은걸 만들고 싶진 않았는데요. 제가 좋아하는 하데스 라는 게임이 있는데, 그 게임의 은혜 시스템 처럼 일정 라운드마다 강화 개념을 넣어봤습니다. 덱빌딩이라고 말하긴 애매할수도 있을것 같은데 적당한 용어를 모르겠네요 ㅎㅎ

⬇⬇ [선택! 벽돌깨기] 지금 바로 play 하세요 ⬇⬇
https://brick-pick-web.vercel.app/

진행 방법

대부분 클로드코드를 사용해서 만들었습니다. 중간에 수정을 너무 많이 하는 바람에 제가 무의식적으로 세션을 클리어해버려서 첫 프롬프트를 찾을수가 없네요 ㅜㅜ 다음부턴 미리미리 기록으로 남기겠습니다.

처음에 아래 3가지로 시작했습니다.

ballz 형태 + 일정 라운드마다 강화하는 선택지를 제시하는 게임을 Godot 엔진을 사용해서 만들거라는 것 (스와이프 벽돌깨기 컨셉을 전달하기 위해 검색해봤더니 ballz 가 원형이더라고요)
중독성, 도파민이 있는 게임일 것
구체적인건 나와 인터뷰해서 정할 것

그리고 인터뷰를 통해 기본 게임구조를 잡고 GAME_DESIGN.md 파일을 뽑았고, 그 뒤엔 해당 파일을 바탕으로 전체 게임을 구현했습니다. 인터뷰가 끝난 뒤 코드 작성 -> 게임 실행까지 10분이 안걸렸던것 같습니다.

그 이후엔 아래 단계로 진행했습니다.

게임 플레이하며 밸런스 조절
디자인 수정
BGM 및 음향효과 추가
게임 메뉴 추가 : 도움말, 음향 설정 등
랭킹 시스템 / 피드백 시스템 추가
Godot 에서 export 로 index.html 뽑기
github 업로드 및 vercel 연결 배포
supabase 연결 : 랭킹 / 피드백 db 연결

시행착오 1. 밸런스 조절

처음에는 제가 플레이할때 재밌어야 다른 사람도 재밌다! 라는 생각으로 직접 하나하나 플레이를 했습니다.

원래 5라운드마다 강화 선택지, 보스 라운드마다 보너스 강화 선택지를 줬더니 게임이 도저히 안끝나더라고요. 그래서 수동으로 점점 혜택을 줄였습니다.

그 뒤에는 이제 선택지마다의 밸런스 문제가 있었는데요. 특정 선택지를 선택하면 게임이 너무 쉬워지고, 어떤 선택지는 골라봐야 있으나마나했습니다. 선택지가 랜덤으로 뜨다보니 테스트가 어려웠습니다.

"지금 폭발 선택지를 고르면 게임이 너무 쉬워지는것 같은데 전체적으로 밸런스 확인좀 해줘"

그러자 클로드가 알아서 tests 폴더와 balance.gd 파일을 만들더니 알아서 반복을 통해 현재 문제점을 분석해줬습니다. 그 뒤에도 변경 사항이 있을때마다 밸런스 파일을 한번 돌리기만 하면 조절해야할 내용을 바로 확인할수 있었습니다.

역시 이런 노가다는 진작 AI 시켜야하는데 제가 어리석었습니다.

시행착오 2. 구린 디자인

아무래도 AI 가 처음 만들어내는 디자인은 AI 티가 팍팍나서, 선택 후 고도화를 하기 위해 일단 3가지 테마를 만들어달라고 했습니다.

AI 가 나름대로 네온, 파스텔, 픽셀 스타일로 만들어줬는데 정말 세 개 다 눈뜨고 못봐줄 지경이었습니다. 캡쳐가 없는게 너무 아쉽네요.

이런저런 다른 게임 캡처도 넣어보고, 색상도 지시해보고 했는데 디자인이 전혀 나아지지 않아서 클로드 디자인을 켰습니다.

벽돌깨기 게임 ui 디자인 초안을 잡아보려고 하는데, 색상이나 형태에 대해 다양한 시안을 뽑아보고싶어.
일반적인 네온 느낌은 제외하고 독특한 디자인들을 뽑아볼수 있을까?
참고로 게임 자체는, ballz 형태로 공 여러개를 한번에 쏘는데(벽돌도 사라지기 위한 충돌 횟수가 벽돌에 적혀있고 그 숫자가 라운드가 갈수록 증가함) 중간중간 선택지를 통해 업그레이드(로그라이크)하는 벽돌깨기야.

그리고 여기서 한번 더 아래를 돌려서 최종 시안을 결정했습니다.

1a 와 1e 가 맘에 들어. 해당 스타일과 비슷한 계열로 3가지를 더뽑아볼 수 있을까요? 그 중 하나는 블럭에 얼굴 표정이 있었으면 합니다. (간단한 눈, 입 형태로 충돌시 찡그림)

한국 모바일 게임 앱 디자인 ios 앱 디자인 ios 앱 디자인 ios 앱 디자인 ios

결과는 대만족!

시행착오 3. BGM 넣기

원래 노래를 넣어야한다는걸 생각을 못했었는데, 단톡방에서 토옵이님이 올려주신 테트리스 게임을 플레이했는데 배경음이 굉장히 좋은게 인상깊었습니다. SUNO 를 사용하셨다고 하시더군요.

SUNO 에 바로 가입해서 노래를 만들어봤는데 퀄리티는 좋지만 다운로드는 바로 크레딧을 결제하라고 하더군요 ㅠㅠ

그렇게 쓰지 못한 노래.. https://suno.com/s/UY0yOw1BC9ZvUiyt

https://suno.com/s/UY0yOw1BC9ZvUiyt

다른 노래 만들어주는 AI 가 있을까 해서 찾다가 제가 사용한건 ~~google 의 MusicFX~~ flowmusic 입니다.

musicfx 공식 사이트 들어가면 flowmusic 으로 들어가지길래 전 여기가 musicfx 인줄 알았는데 원래 무료로 운영하던게 종료되고 flowmusic 쪽으로 이전된것 같더라고요. 유료 플랫폼이라서 처음 주는 무료 크레딧까지만 쓰고 이별해야겠습니다.

현재 BGM은 아래 프롬프트로 만들었습니다(프롬프트는 gemini 한테 추천받았습니다.)

casual arcade game BGM, upbeat marimba, bright 120 bpm loop, video game chiptune

그 외에도 혹시 좋은 음악 생성 AI 플랫폼 아시는 분들은 추천 부탁드립니다!

시행착오 4. 배포

처음엔 Godot 게임을 어떻게 배포해야하는지 이해가 잘 안가서 헤맸습니다. 결국 이것도 전부 클로드가 가이드 해주긴 했지만요. 중요한게 export template 을 먼저 다운로드 해야하더라고요.

저는 웹에 배포할거였어서 웹 템플릿을 전부 다운 받았습니다.

[Editor > Manage Export Templates..]

다운받은 뒤에는 [Project > Export...] 들어가셔서, 원하는 path 로 index.html 을 뽑아주시면 됩니다.

경로를 build/web/index.html 로 뽑아놔서 실제로 vercel 배포도 해당 경로로 연결했습니다.

그 뒤는 문제 없었고, Supabase 연결도 claude 통해 진행했습니다. 게임 진행하고 점수도 남길 수 있고 피드백도 남길 수 있으니 많은 관심 부탁드립니다 ㅎㅎ 버그 제보 해주셔도 좋습니다.

결과와 배운 점

결과 쓰라길래 다시 한번더 홍보.. ㅋㅋ

⬇⬇ [선택! 벽돌깨기] 지금 바로 play 하세요 ⬇⬇
https://brick-pick-web.vercel.app/

사실 처음 스터디를 시작하면서,

그래도 코드를 아예 안보진 않겠지, godot 에 대해 좀 공부해봐야하지 않나?

했지만, 정말 아무것도 모르고 아무것도 안보고 게임이 완성되어서 재밌었습니다. 이렇게 금방 만들수 있는것을! 역시 뭐든 항상 실천이 중요하다는걸 다시 깨달았습니다.

다음은 스토리가 있는 게임을 만들어보고 싶은데, 남은 기간동안 가능한 스케일이 어느정도일지 좀 고민해봐야할것 같습니다.

[26.10.05 19:54] ~~플레이가 누적될시 메모리 문제로 재시작되는 이슈가 있어 수정중입니다.~~ 폰트 캐시 이슈가 있었어서 수정 배포 완료했습니다.

📢 AI스터디는 24기를 끝으로 방학에 들어가요