광밤
광밤
Moderator
🏅 AI 마스터
🎖️ 마스터 파트너
🚀 SNS 챌린지 달성자
☕ 커피챗 오픈

Claude Code로 Godot 게임 itch.io 배포하기: 웹 공개까지 1시간 컷

itch.io에 올린 AX 서바이벌 커버, AI 일은 쏘고 사람 일은 몸으로 받는 90초 판단 슈팅 게임

Godot 게임 itch.io 배포는 웹으로 내보낸 파일을 zip 하나로 올리면 끝나요. 링크만 있으면 누구나 브라우저에서 바로 플레이할 수 있어요. 저는 고도(Godot) 게임을 클로드 코드(Claude Code)와 함께 실작업 33분 만에 공개했고, 썸네일까지 1시간 안에 끝냈어요. 2026년 10월 2일, Godot 4.7 기준 기록이에요.

1부에서는 문과생이 88분 만에 슈팅 게임 "AX 서바이벌"을 만든 과정을 썼어요. 근데 만들어 놓고 보니 제 맥북에서만 돌아가는 게임이더라고요. 교육장에서 참여자들이 링크만 눌러서 바로 하게 하려면 배포가 필요했어요.

1부 글: https://www.gpters.org/nocode/post/claude-codero-godot-2d-geim-mandeulgi-gieobgyoyugyong-syuting-geim-88bun-fQSJdEuiTLNLMsg

배포는 네 단계면 끝나요

저는 지피터스에서 기업 대상 AX 교육과 B2B 사업을 총괄하고 있어요. 이 글의 시간과 용량 숫자는 전부 제 세션 기록에서 직접 잰 거예요.

고도 게임 웹 배포 4단계, 템플릿 설치, Web으로 내보내기, zip으로 묶기, itch.io에 올리기

itch.io는 인디 게임을 올리고 공유하는 사이트예요. 웹 게임은 설치 없이 페이지 안에서 바로 실행돼요. 제가 클로드 코드에게 처음 보낸 요청은 이랬어요.

사례글 2부로 배포 프로세스를 튜토리얼처럼 다루면 좋겠어.배포할 수 있도록 단계적으로 진행해보자!

클로드 코드는 배포 방식 네 가지를 비교해 보여줬고, 저는 "웹 링크 (itch.io)"를 골랐어요. 참여자가 아무것도 설치하지 않아도 되는 방식이라서요.

1단계: 익스포트 템플릿 설치 (1.28GB)


고도(Godot) 에디터로는 게임을 만들고 테스트까지만 할 수 있어요. 다른 사람에게 배포할 때는, 그 사람이 사용할 컴퓨터나 휴대폰에서 게임을 실행해 줄 파일이 필요해요. 이를 미리 준비해 둔 것이 익스포트 템플릿이에요. - 플랫폼별 엔진이 다 들어 있어서 1.28GB나 돼요.

한국사이트 스크린샷

에디터 메뉴의 편집기 → 익스포트 템플릿 관리 → 다운로드 및 설치를 누르면 돼요. 저는 클로드 코드가 터미널로 받아서 정해진 폴더에 넣어 줬어요. 폴더 이름이 에디터 버전과 글자 하나까지 같아야 인식된다는 점만 기억하면 돼요.

2단계: Web으로 내보내기, 그리고 한글이 전부 네모로

내보내기 설정에서 Web을 추가하고 두 가지만 챙기면 돼요.

  • 스레드 지원(Thread Support)은 끄기: 켜면 서버에 특수 보안 설정이 필요해서 검은 화면이 뜰 수 있어요

  • 시작 시 캔버스 포커스는 켜기: 방향키를 눌렀을 때 페이지가 스크롤되지 않아요

여기서 한 번 망했어요. 브라우저로 열어 보니 한글이 전부 네모(□)로 나왔거든요.

고도 웹 내보내기 후 브라우저에서 한글이 전부 네모 상자로 깨진 AX 서바이벌 시작 화면

원인은 폰트였어요. 맥에서 실행할 땐 고도가 맥의 한글 폰트를 몰래 빌려 쓰는데, 브라우저는 보안상 그걸 막아요. 그래서 웹으로 내보내는 순간에만 한글이 깨져요.

해결은 폰트 파일을 게임 안에 넣는 거예요. 무료로 배포할 수 있는 나눔스퀘어 폰트(640KB)를 프로젝트 기본 폰트로 지정했더니 바로 고쳐졌어요.

나눔스퀘어 폰트를 내장한 뒤 브라우저에서 한글이 정상으로 보이는 AX 서바이벌 시작 화면

3단계: zip으로 묶기 (39.6MB에서 11.9MB로)

내보내면 파일이 9개 생겨요. 그중 index.html이 들어 있게 통째로 zip 하나로 묶으면 돼요. 원본은 39.6MB인데 zip으로 묶으니 11.9MB가 됐어요. 대부분이 엔진 파일이라 압축이 잘 돼요.

작은 함정이 하나 있었어요. 빌드 폴더가 프로젝트 안에 있으면 고도가 빌드 결과물을 게임 재료로 착각해서 찌꺼기 파일을 만들어요. 빌드 폴더에 .gdignore라는 빈 파일을 하나 두면 고도가 그 폴더를 건드리지 않아요.

4단계: itch.io에 올리기

itch.io에 가입하고 Upload new project를 누른 뒤, 아래 네 칸만 정확히 맞추면 돼요.

  • Kind of project: HTML (처음엔 Downloadable이라 꼭 바꿔야 해요)

  • Uploads: zip을 올리고 "This file will be played in the browser"에 체크

  • Viewport dimensions: 960 × 540 (itch.io 페이지 폭에 맞는 크기)

  • Embed options: 전체화면 버튼은 켜고 SharedArrayBuffer는 끄기

처음엔 Draft로 저장하고, 직접 플레이해 본 뒤 Public으로 바꾸면 돼요.

제 PC에서만 안 되던 WebGL2 에러

올리고 나서 제 브라우저로 열었더니 영어 에러가 떴어요. "WebGL2가 없어서 실행할 수 없다"는 내용이었어요. 클로드 코드가 공개 페이지를 직접 열어 보니 거기선 게임이 잘 돌아갔어요. 게임 문제가 아니라 제 크롬의 그래픽 가속이 꺼져 있던 거예요.

그때 이런 걱정이 들어서 클로드 코드에게 물었어요.

나와 동일한 이슈를 겪을때,설정 가이드가 필요하지 않을까?

그래서 WebGL2가 꺼진 브라우저에서는 영어 에러 대신 한국어 해결 방법이 뜨게 바꿨어요. 교육장 PC에서 참여자가 막혀도 화면만 보고 스스로 풀 수 있어요.

WebGL2가 꺼진 브라우저에서 뜨는 한국어 안내, 크롬 그래픽 가속 켜기와 카카오톡 내장 브라우저 대처법

버전 관리: butler로 명령 한 줄 업로드

게임을 고칠 때마다 웹에서 zip을 지우고 다시 올리는 건 번거로워요. itch.io 공식 업로드 도구 butler를 쓰면 명령 한 줄로 끝나요. 첫 업로드에서 39.59MB 중 바뀐 부분 11.96MB만 보냈어요(69.79% 절약).

이제 버전은 세 곳이 같은 숫자를 써요. 게임 시작 화면 오른쪽 아래의 v1.1 표시, 내 폴더의 개발 기록, itch.io Devlog 글이에요.

itch.io 공개 페이지에서 실행 중인 AX 서바이벌, 시작 화면 오른쪽 아래에 v1.1 버전 표시

막힌 곳이 하나 더 있었어요. 클로드 코드 입력창에서 butler 로그인을 하면 "stdin is not a terminal" 에러가 나요. 브라우저 승인을 기다리는 명령이라 맥의 터미널 앱에서 따로 실행해야 해요. 하나 더, 홈브루(Homebrew)로 butler를 설치하면 이름만 같은 다른 앱이 깔려요.

1시간 컷, 숫자로

이번 세션 기록에서 제가 직접 잰 숫자예요.

  • itch.io 공개: 실작업 33분 (한글 깨짐과 WebGL 안내까지 고친 시점)

  • 썸네일 완성: 실작업 1시간 안 (53분 시점에 다음 작업으로 넘어감)

  • butler 버전 관리까지 전부: 실작업 76분 (시계로는 140분, 30분 넘는 공백 제외)

  • 제가 보낸 요청: 14번

  • 막혀서 방법을 바꾼 곳: 3번 (한글 깨짐, WebGL2 에러, butler 로그인)

  • 웹 빌드 용량: 39.6MB, zip으로 11.9MB

  • 자동 테스트: 22개 항목 전부 통과 유지

따라 해 보세요: 배포 요청 프롬프트

  1. 고도 게임 폴더에서 터미널로 claude를 실행해요.

  2. 아래 프롬프트를 보내요.

  3. 클로드 코드가 브라우저로 직접 열어 확인한 화면을 받아 보고, 한글이 깨졌는지 꼭 봐 달라고 해요.

  4. itch.io 가입과 업로드 체크박스는 직접 해요.

내가 만든 고도(Godot) 게임을 itch.io에 웹으로 배포하고 싶어. 익스포트 템플릿 설치부터 단계별로 진행해 줘. 설치 명령은 실행 전에 보여주고, 웹으로 내보낸 뒤에는 브라우저로 열어서 한글이 깨지지 않는지 캡처로 확인해 줘.

🎮 게임은 지금 https://fe63.itch.io/ax-survival 에서 바로 해 볼 수 있어요. 다음엔 강사가 카드 문장을 바꿔서 교육 주제마다 다른 카드로 돌려 볼 수 있게 만들 계획이에요~

👉 3부에서는 이 게임에 모두가 함께 겨루는 온라인 랭킹을 붙였어요. 3부: Claude Code로 Godot 게임 온라인 랭킹 만들기, 우리 반끼리 겨루는 TOP 10

2
7개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 아침,
읽고 바로 써먹을 AI 소식만