[바이브 코딩] 코딩 몰라도 OK! Google AI Studio와 Antigravity로 'Gemini Runner' 게임 배포하기
오늘은 Google AI Studio와 Antigravity를 활용해, 직접 코드를 한 줄도 짜지 않고 오픈 소스 게임을 내 입맛대로 수정하고 배포까지 성공한 과정을 공유하려 합니다.
이른바 '바이브 코딩(Vibe Coding)'! AI와 대화하며 물 흐르듯 개발하는 경험, 함께 보시죠.
1. 프로젝트 시작: 게임 소스 가져오기
먼저 Google AI Studio에 접속해서 만들고 싶은 프로젝트를 탐색했습니다. Games 갤러리를 둘러보던 중, 레트로한 감성의 Gemini Runner라는 3D 게임이 눈에 띄더군요.
- Google AI Studio > Games > Gemini Runner 선택
- 바로 GitHub로 소스를 내보내고(Export), 로컬 환경으로 Clone 받았습니다.
이제 내 컴퓨터에 게임 소스 코드가 준비되었습니다.
2. AI 에이전트(Antigravity)와의 협업
여기서부터는 AI 에이전트인 Antigravity가 활약할 차례입니다. 저는 개발 환경 설정을 잘 모르지만, Antigravity에게 자연어로 명령을 내렸습니다.
"언어는 한국어로 설정해줘" "Clone 받은 소스 바로 실행해줘"
Gravity가 계획을 수립하고 패키지를 설치(npm install)하더니 실행을 시도합니다. 그런데...
🚨 문제 발생: 화면이 안 나옴 (Blank Screen)
브라우저를 띄웠는데 까만 화면만 나오고 게임이 실행되지 않는 문제가 발생했습니다. 당황하지 않고 다시 AI에게 요청했습니다.
"화면 안 나오는 문제 해결해줘"
AI가 스스로 원인을 분석하고 코드를 수정하더니, 몇 분 만에 "Wow! 해결됐어" 라는 자막과 함께 게임 화면이 정상적으로 출력되었습니다! (이때의 희열이란!)
3. 커스터마이징: 한글화 & 아이콘 제작
게임이 실행됐으니 이제 제 스타일대로 바꿔볼 차례입니다.
- 한글 패치: "게임 언어를 한국어로 변경해줘"라고 하니, 메뉴와 UI 텍스트가 순식간에 한글로 바뀌었습니다.
- 아이콘 생성: 밋밋한 기본 아이콘 대신, "앱 아이콘 만들어줘"라고 요청했습니다. AI가 게임 분위기에 맞는 멋진 아이콘을 생성해서 바로 적용해주더군요.
4. 배포의 험난한 여정과 해결
로컬에서만 게임을 즐길 수는 없죠. 친구들에게 공유하기 위해 웹 호스팅(GitHub Pages) 배포를 시도했습니다.
- 배포 파일 생성: 빌드 명령을 통해 배포용 정적 파일을 생성했습니다.
- GitHub Repository 생성 & Push: 새 저장소를 만들고 코드를 업로드했습니다.
- GitHub Pages 설정: 웹사이트로 접근할 수 있게 페이지 기능을 켰습니다.
🚨 또 다시 위기: 404 에러
설레는 마음으로 배포된 주소에 접속했는데 404 Not Found 에러가 떴습니다. 하지만 저에겐 바이브 코딩 파트너가 있죠.
"배포 실행하면 오류 해결해줘"
Antigravity가 경로 설정 문제 등을 파악하고 소스를 수정한 뒤, 다시 커밋과 푸시를 진행했습니다. 잠시 후...
5. 최종 결과: Gemini Runner 런칭!
드디어 배포가 완료되었습니다!
- 한국어 완벽 적용
- 커스텀 아이콘 적용
- 웹 브라우저에서 즉시 플레이 가능
직접 코드를 분석하고 수정했다면 며칠이 걸렸을 작업을, AI와 대화하듯이 진행하니 불과 15분 남짓한 시간에 끝낼 수 있었습니다.
마지막으로 게임을 플레이하며 프로젝트를 마무리했습니다. 개발 지식이 깊지 않아도 아이디어만 있다면 무엇이든 만들 수 있는 세상이 왔네요. 여러분도 Google AI Studio와 Antigravity로 나만의 앱 만들기에 도전해 보세요!
6. 소스/게임플레이
GitHub - djai32521/geminirunner_src: geminirunner_src
geminirunner_src. Contribute to djai32521/geminirunner_src development by creating an account on GitHub.
github.com
- gemini runner 게임 플레이 :
https://djai32521.github.io/grun
네온 제미니 러너
djai32521.github.io
📌 사용 툴: Google AI Studio, Antigravity, GitHub, VS Code 🏷 태그: #GoogleAIStudio #Antigravity #GeminiRunner #바이브코딩 #AI개발 #노코딩