배포하고 공유하기
1. 배포는 이미 배웠습니다
게임도 결국 Vite 프로젝트라서, Part 2-5에서 배운 GitHub Actions(CI/CD) 방식 그대로입니다.
> 이 프로젝트를 GitHub Actions로 GitHub Pages에 자동 배포되게 설정해줘.
base 경로 설정도 잊지 말아줘.
저장소 Settings → Pages에서 Source를 GitHub Actions로 선택하고, "커밋하고 push해줘"를 요청하면 몇 분 뒤 게임 URL이 생깁니다. 기억 안 나는 부분은 Part 2-5를 다시 펴 보세요.
2. 게임이라서 추가로 챙길 것
페이지와 달리 게임은 파일이 무겁고, 플레이어의 기기가 다양합니다. 배포 후 이것들을 점검하세요.
2.1 로딩 화면
캐릭터 GLB와 음악 파일은 용량이 커서, 접속하면 몇 초간 하얀 화면이 보일 수 있습니다. 처음 온 사람은 고장난 줄 알고 나갑니다.
> 에셋이 로드되는 동안 "로딩 중... %" 진행률이 보이는 로딩 화면을 만들어줘.
다 로드되면 시작 화면으로 넘어가게 해줘.
용량 자체를 줄일 수도 있습니다: "GLB와 오디오 파일 용량을 확인하고, 너무 크면 줄이는 방법을 적용해줘."
2.2 모바일 대응
친구에게 URL을 보내면 십중팔구 폰으로 엽니다. 그런데 폰에는 키보드가 없죠.
> 모바일에서 접속하면 화면 왼쪽 아래에 가상 조이스틱을 띄워서
캐릭터를 조작할 수 있게 해줘.
UI 글자와 버튼도 모바일 화면 크기에 맞게 조정해줘.
내 폰으로 접속해 직접 플레이해 보세요. 조이스틱 위치나 크기가 어색하면 그대로 요청해 다듬습니다.
2.3 공개 전 마지막 점검
- 게임 제목·클리어 문구에 오타는 없나요?
- 크레딧 표기: Meshy 무료 플랜 모델(CC BY), 무료 효과음 등 출처 표기가 필요한 에셋을 시작 화면 하단이나 크레딧 화면에 적었나요?
- 시크릿 창에서 URL을 열어 처음 온 사람의 눈으로 한 판 해보세요.
3. 공유하기
완성된 게임 URL, 혼자 보기 아깝습니다.
- QR 코드로 만들어 보세요: "이 URL로 접속하는 QR 코드 이미지를 만들어줘". 발표 자료나 명함, 포트폴리오에 붙이기 좋습니다.
- 친구·가족에게 보내고 최고 기록 경쟁을 붙이세요. "다시하기" 버튼이 빛을 보는 순간입니다.
- 피드백이 오면 게임은 계속 자랍니다. 수정하고 "커밋하고 push해줘". 자동으로 새 버전이 배포됩니다.
바이브 코딩 팁
피드백 중에 "이런 기능 있으면 좋겠다"는 전부 메모해 두세요. 그게 여러분의 다음 업데이트 목록이고, 포트폴리오에 쓸 "사용자 피드백 기반 개선" 스토리가 됩니다.
4. 강의를 마치며
여러분은 이 강의에서 세 개의 결과물을 인터넷에 올렸습니다.
- 3D 자기소개 페이지: 첫 바이브 코딩, 첫 Three.js
- 3D 상품 소개 페이지: 진짜 모델, 진짜 프로젝트, 첫 배포
- 나만의 3D 게임: 기획부터 재료 생성, 제작, 배포까지 전 과정
그리고 결과물보다 중요한 것을 얻었습니다. "만들고 싶은 것을 분해하고, AI에게 정확히 요청하고, 결과를 판단하고, 다듬는 능력". 이건 Three.js 밖에서도 통하는 능력입니다. 웹 서비스를 만들 때도, 앱을 만들 때도 방식은 같습니다.
4.1 다음에 만들어볼 것들
- 게임에 스테이지 2를 추가해 보세요 (밤의 공원, 더 빠른 타이머)
- 자기소개 페이지에 내 게임 캐릭터를 세워 보세요. 세 결과물이 하나로 연결됩니다
- 전혀 다른 장르에 도전해 보세요. 기획서 쓰고, 단계로 쪼개고, 하나씩. 방법은 이미 알고 있습니다
완주를 축하합니다. 여러분의 다음 "만들고 싶은 것"을 응원합니다! 🎮