Gemini로 아동용 게임을 Vibe-code하고 Firebase로 게시하세요.

29분 남음

이 Codelab 정보

최종 업데이트: 5월 13, 2025

작성자: Riccardo Carlesso

1. 소개

2025년 3월 25일, Google은 Gemini 2.5를 출시했습니다. 이번 출시에서 가장 기억에 남는 점은 누구나 '고급 코딩' 기능을 사용해 볼 수 있었다는 점입니다[ 동영상].

이 Codelab에서는 일반적인 프롬프트에서 시작하여 원하는 대로 맞춤설정하는 간단한 아동용 앱인 '바이브 코딩'에 대해 알아봅니다. p5.js에서 앱을 테스트합니다. 마지막으로 이러한 변경사항을 Firebase 호스팅에 푸시합니다. 가장 놀라운 점은 현재 전체 스택이 무료라는 것입니다.

학습할 내용

Gemini 2.5를 사용하여 게임 앱을 바이브 코딩합니다.
p5js.org에서 코드 테스트
프롬프트 / 앱을 반복하고 미세 조정하는 방법
Firebase에서 정적 애플리케이션을 호스팅하는 방법

이 Codelab에서는 AI 생성 코드를 사용합니다. 이는 비결정론적이므로 출력이 저자에게 알려지지 않으므로 이 Codelab에는 가이드라인이 포함되어 있습니다. 또한 이 코드는 프로덕션에서 사용하지 마세요.

이 Codelab이 마음에 든다면 깔끔하고 통합된 분위기의 코딩 환경을 제공하는 🔥 Firebase 스튜디오를 확인해 보세요.

2. 기본 요건

이 Codelab은 두 단계로 진행됩니다.

웹 전용 개발. 이 모드에서는 코딩 능력이 필요하지 않으며 가장 재미있게 즐길 수 있습니다. 이를 위해 Gemini UI ( gemini.google.com)와 p5.js를 사용합니다.
로컬 코딩 환경 이때 약간의 코딩 / 스크립트 작성 기술과 npm / npx 및 vscode 또는 IntelliJ와 같은 로컬 편집기의 설치 및 사용이 필요합니다. 이 두 번째 부분은 선택사항이며 친구와 가족이 모바일 또는 컴퓨터에서 애플리케이션을 플레이할 수 있도록 애플리케이션을 유지하려는 경우에만 필요합니다.

1단계의 유일한 기본 요건은 브라우저와 컴퓨터 (대형 화면이 도움이 됨)입니다. 2단계에 대한 자세한 내용은 계속 읽어보세요.

Gemini UI

gemini.google.com은 최신 Gemini 모델을 모두 사용해 보고 나만의 이미지와 동영상을 만들 수 있는 멋진 플랫폼입니다. Google 지도, 호텔/항공편/리뷰와 같은 Google 통합 기능이 탑재되어 있어 다음 휴가를 계획하는 데 유용합니다.

도움말: 코딩에 관심이 있다면 LLM 상호작용 (예: 이미지 만들기)의 프로토타입을 만들고 페이지에서 바로 Python 코드를 가져올 수 있는 유사한 인터페이스인 AI 스튜디오도 사용해 보세요.

p5.js

p5.js는 예술가, 디자이너, 교육자 등 누구나 창의적인 코딩을 이용할 수 있도록 지원하는 무료 오픈소스 JavaScript 라이브러리입니다. Processing 언어를 기반으로 하며 웹브라우저에서 코드를 사용하여 대화형 시각 자료와 대화형 콘텐츠를 만드는 과정을 간소화합니다.

로컬 코딩[선택사항]

애플리케이션을 유지하려면 추가 설정이 필요합니다.

로컬 코드 편집기 ( Visual Studio Code, IntelliJ 등)
코드를 유지하는 git 계정 ( github / gitlab / bitbucket)
로컬에 설치된 npm (npx 또는 이와 동등한 기술을 통해 사용자 공간에 있는 것이 더 좋음)

또한 나중에 Firebase 계정을 설정합니다.

다음과 같은 코딩 기술도 필요합니다.

npm 패키지를 설치할 수 있는 기능
파일 시스템과 상호작용할 수 있는 기능 (폴더 및 파일 만들기)
git (git add, git commit, git push)와 상호작용할 수 있는 기능

어려운 점이 있으면 LLM이 큰 도움이 될 수 있습니다. 예를 들어 'Gemini 2.0 flash' 또는 이에 상응하는 모델을 사용하여 추천을 가져올 수 있습니다. 그래도 너무 어렵다면 2단계를 완전히 건너뛰어도 됩니다. 1단계는 충분히 보상을 제공해야 합니다.

3. 첫 번째 게임을 만들어 보겠습니다.

gemini.google.com을 열고 코드 지원 모델(예: 2.5)을 선택합니다. 이 선택사항은 이용 가능 여부, 비용, 날짜에 따라 다를 수 있습니다. 이 글을 작성하는 시점에서 가장 좋은 선택은 다음과 같습니다.

Gemini 2.5 Flash (더 빠른 반복)
Gemini 2.5 Pro (더 나은 출력)

Gemini 모델에 대한 자세한 내용은 여기를 참고하세요.

첫 번째 게임 프롬프트

이 동영상에서 볼 수 있듯이 초기 프롬프트는 다음과 같이 간단할 수 있습니다.

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

원하는 대로 맞춤설정할 수 있습니다.

중세 / 미래 / 사이버펑크 설정
이모티콘이 많나요, 아니면 특정 이모티콘이 하나만 있나요?
노란색이나 다양한 보라색 색조를 좋아합니다.
자녀가 유니콘이나 공룡, 포켓몬을 좋아할 수도 있습니다.

프롬프트를 브라우저에 붙여넣으면 Gemini가 생각하는 것을 볼 수 있습니다.Gemini 2.5는 사고 모델이므로 시간이 지남에 따라 변화를 관찰할 수 있는 여러 작업을 시작합니다. 변경되는 드롭다운을 클릭하여 어떤 일이 일어나고 있는지 확인하거나 결과가 나오기를 기다릴 수 있습니다.

완료되면 작동하는 JavaScript가 생성됩니다.

이제 상단의 복사 버튼을 클릭할 수 있습니다.

p5.js에서 게임 테스트하기

이제 게임을 테스트해 보겠습니다.

여기에서 p5.js 편집기를 엽니다. https://editor.p5js.org/
기존 sketch.js 코드를 선택하여 삭제합니다.
코드를 붙여넣으세요.

페이지가 다음과 같이 표시됩니다.

마지막으로 재생 버튼을 누릅니다.

이제 코드가 작동하거나 실패하는 두 가지 상황이 발생할 수 있습니다. 두 가지 경우에 따라 안내를 따르세요.

코드가 실패함
첫 번째 시도에서 코드가 작동합니다.

다음 두 단락에서 두 조건을 모두 관리하는 방법을 살펴보겠습니다.

(케이스 1) 코드가 실패합니다.

이와 같은 오류가 발생하면 복사하여 Gemini에 붙여넣기만 하면 됩니다. 코드를 수정해 드리겠습니다.

(케이스 2) 코드가 작동합니다.

코드가 작동하면 페이지 오른쪽 끝에 시각적 게임이 표시됩니다.

👏 축하합니다. 첫 번째 AI 게임을 실행하고 계십니다.

참고: 코드가 있는 동안 앱은 브라우저에서만 작동합니다. 가족과 친구에게 앱을 보여주려면 호스팅 솔루션이 필요합니다. 다행히 좋은 옵션이 있습니다. 계속 읽어 보세요.

이제 다음 단계를 진행할 준비가 되었습니다.

추가 반복

이제 코드가 손상될 경우를 대비해 코드를 저장할 차례입니다. 원하는 경우 한 번 반복할 수 있습니다. 예를 들어 작성자가 슈퍼 마리오의 이중 점프를 좋아한다면 다음과 같이 추가할 수 있습니다.

The game is great, thanks! Please allow for my character to double jump.

원하는 대로 조정할 수 있습니다. 점수를 높이기 위해 캐릭터 이름을 저장하거나 시간이 지남에 따라 속도를 높여 난이도를 높이는 등의 작업을 할 수 있습니다. 프롬프트는 영어로만 제공됩니다.

도움말: Gemini는 적용해야 하는 변경사항만 제공하는 경향이 있습니다 (예: XYZ 함수의 변경사항). 다음과 같이 업데이트된 전체 코드를 대신 표시하도록 프롬프트를 설정할 수 있습니다.

"Please give me the entire updated code, not just the changed function"

. 이렇게 하면 텍스트를 더 쉽게 잘라내고 붙여넣을 수 있습니다.

주의사항

Gemini 채팅을 북마크에 추가할 수 있습니다. 'p5js my first game'으로 이름을 바꾸거나 Gemini의 퍼머링크(예: " https://gemini.google.com/app/abcdef123456789')를 적어두면 나중에 사용할 수 있습니다.

4. 이 코드를 로컬에서 실행해 보겠습니다.

이 시점에서 다음을 확인할 수 있습니다.

작동하는 코드가 포함된 열려 있는 Gemini 브라우저 창
작동하는 게임이 있는 p5.js 브라우저 창
npm가 설치된 로컬 코딩 환경

이 부분이 Codelab에서 가장 어려운 부분입니다. 약간의 기본적인 코딩 경험이 필요합니다.

종속 항목 설치

npm 및 node가 누락된 경우 nvm과 같은 버전 관리자를 통해 npm를 설치하는 것이 가장 좋습니다 . 운영체제의 설치 안내를 따릅니다.

또한 코딩 IDE를 사용하고 있다고 가정합니다. 스크린샷과 예시에서는 Visual Studio Code를 사용하지만 다른 IDE를 사용해도 됩니다.

로컬 환경 설정

이제 나만의 파일 구조를 만들 수 있습니다.

설정 스크립트는 설명을 위해 제공됩니다. 폴더와 파일을 만들어 수동으로 이 작업을 수행할 수 있습니다.

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

최종 폴더 구조는 다음과 같습니다.

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

여기에서도 찾을 수 있습니다.

이제 좋아하는 코드 편집기 (예: code my-first-vibecoding-project/)를 열고 editor.p5js.org의 콘텐츠를 public/ 아래의 3개 파일에 붙여넣습니다.

README.md ← 여기에 Gemini 채팅 퍼머링크를 넣을 수 있으며 앱이 출시되면 앱의 방문 페이지를 여기에 넣습니다.
PROMPT.md ← 여기에서 모든 프롬프트를 H2 문단으로 구분하여 추가할 수 있습니다. 특정 프롬프트를 제공한 이유를 설명하려면 프롬프트를 백틱 3개로 묶으세요 ( 예).
**public/index.html** ← 여기에 HTML 코드 복사
**public/sketch.js** ← 여기에 JS 코드 복사
**public/style.css** ← 여기에 CSS 코드 복사

공개 폴더는 맞춤 PNG와 같은 추가 애셋을 호스팅할 수 있습니다.

5. Firebase 설정 및 배포

Firebase 설정 (처음만 해당)

머신에 npm가 설치되어 있어야 합니다.

터미널에서 다음 중 하나를 입력합니다 (둘 다 작동함).

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

이제 firebase 명령어를 호출할 수 있습니다. 문제가 있는 경우 공개 문서를 따르세요.

Firebase 초기화

이 섹션에서는 Firebase 호스팅을 설정합니다. 매우 간단한 흐름이지만 처음에는 익숙해지는 데 시간이 걸릴 수 있습니다.

파일이 포함된 public/ 디렉터리 바로 위에 있는 디렉터리에 있는지 확인합니다. 등록정보 (ls -al 또는 dir)는 다음과 같이 표시됩니다.

$ ls 
PROMPT.md
README.md
public/

[1단계] 콘솔에서 firebase init를 입력합니다.

커서를 아래로 이동하여 '호스팅: ..'으로 이동한 다음 스페이스바를 입력한 후 Enter 키를 누릅니다. (이유가 무엇인가요? 객관식 문제이므로 선택하고 다음 페이지로 이동해야 합니다.
[2단계] 이제 기존 프로젝트를 선택하거나 (옵션 1) 새 프로젝트를 만들 수 있습니다 (옵션 2).

참고: 기존 Cloud 프로젝트가 있는 경우 Firebase 프로젝트가 아닐 수 있습니다. Firebase 프로젝트는 GCP 프로젝트의 하위 집합입니다. Firebase 프로젝트로 만들려면 추가 작업이 필요하며 (옵션 3)이 바로 이 작업을 위한 것입니다.
결정하지 못한 경우 '새 프로젝트 만들기'를 사용하고 'p5js-YOURNAME-YOURAPP'과 같은 이름을 추가합니다(예: 'p5js-riccardo-tetris').

[3단계] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Enter 키를 누릅니다.

[4단계] ? What do you want to use as your public directory? (public)
Enter 키를 누릅니다 (public/를 의도적으로 설정함).

[5단계] ? Configure as a single-page app (rewrite all urls to /index.html)? No
Enter 키를 누릅니다 (아니요).

[6단계] ? Set up automatic builds and deploys with GitHub? No
Enter 키를 누릅니다. - 아니요

[7단계] ? File public/index.html already exists. Overwrite? (y/N)
Enter 키를 누릅니다 (아니요).
경고 오류가 발생할 수 있습니다. 새 index.html을 덮어쓰면 p5js와 호환되지 않습니다.

모든 것이 제대로 작동하면 다음과 같이 표시됩니다.

이 작업으로 인해 몇 개의 파일이 생성되었습니다.

.firebaserc
.gitignore
firebase.json
public/404.html

특히 .firebaserc에는 다음과 같이 프로그래매틱 방식으로 가져올 수 있는 프로젝트 ID가 있어야 합니다. cat .firebaserc | jq .projects.default -r

경고: index.html을 확인합니다. 16줄보다 길거나 firebase라는 단어가 포함된 경우 p5js 파일을 실수로 덮어썼습니다. 괜찮습니다. git 또는 p5js 편집기에서 이전 index.html을 가져오세요.

로컬 테스트

피드백 루프 지연 시간을 줄이려면 먼저 로컬에서 시도해 보세요.

이를 위해 Firebase팀에서 제공하는 강력한 CLI 모음을 사용해 보세요. 예를 들면 다음과 같습니다.

$ firebase emulators:start

푸시하기 전에 로컬에서 테스트할 수 있도록 포트 5000 ( http://127.0.0.1:5000/)에서 웹서버를 시작합니다.

Firebase에 배포하기

이제 마지막 명령어를 실행합니다.

$ firebase deploy

이렇게 하면 여러 작업이 트리거됩니다. 마지막 몇 줄은 다음과 같이 표시됩니다.

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

그러면 호스팅 URL이 표시됩니다. 직접 해보기

배포가 성공했지만 빈 페이지가 표시되거나 배포가 손상된 경우 다음과 같은 조치를 취할 수 있습니다.

브라우저의 '개발자 도구'를 열고 오류를 찾은 다음 다음과 같은 프롬프트를 사용하여 Gemini에게 오류를 수정해 달라고 요청합니다.

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ 반복하세요.

이 단계를 원하는 만큼 반복할 수 있습니다. 결과가 만족스러울 때까지 계속 프롬프트를 표시할 수 있습니다.

다음 사항에 유의해야 합니다.

반복 루프는 Gemini > p5.js > Gemini 루프에서 Gemini > 로컬 호스트 > 클라우드 런에 배포 > 브라우저에서 앱 테스트 (새로고침 누르기)보다 훨씬 빠릅니다.
프롬프트와 코드 모두 버전 관리에 git을 사용합니다. 프롬프트 N으로 돌아가서 N을 코딩할 수 있습니다. 특히 푸시하는 모든 sketch.js를 git 커밋해야 합니다. 감지되지 않은 버그가 있을 수 있기 때문입니다.

일부 게임은 키보드에서는 잘 작동하지만 마우스나 휴대전화의 탭으로는 잘 작동하지 않습니다. 이때 코드를 개선하면 좋습니다.

6. 프롬프트 팁

이미 여러 게임을 제작한 경험을 바탕으로 몇 가지 팁을 전해 드립니다.

프롬프트 버전 지정

원래 프롬프트에 오류가 있을 수 있습니다. git 버전이 있습니다. 다음과 같은 몇 가지 코드 경로가 있습니다.

결과가 마음에 들고 후속 하위 프롬프트로 Gemini를 반복하려면 모든 프롬프트를 추적하는 것이 좋습니다 (프롬프트 1,2,3 - 3장 예시 1 - example2).
prompt1로 만든 앱이 중요하지 않다면 프롬프트를 완성하고 코드를 삭제한 후 수정된 코드 (prompt 1 v1, prompt1 v2, prompt1 v3 등)로 다시 시작하는 것이 좋습니다.

물론 두 가지 접근 방식을 혼합할 수도 있습니다.

모바일 기능

만드는 게임에 따라 사용자와 상호작용이 필요할 수 있습니다. 이 상호작용에는 키보드가 필요한가요? 아니면 화면을 탭하기만 하면 사용할 수 있나요 (예: 휴대기기)? 프롬프트에서 이 점을 명시해야 합니다. 키보드에 몇 가지 버튼을 만들어야 할 수도 있습니다 (테트리스 3D 예 참고). 모바일 호환성 문제에 관한 dungemoji도 참고하세요.

Gemini에 JavaScript 오류 / 스크린샷 직접 의견 보내기

Gemini는 p5js와의 상호작용을 볼 수 없으므로 모든 JavaScript 오류를 Gemini에 붙여넣어야 합니다. Gemini는 다중 모드이므로 UI 변경사항이 있는 경우 (예: 제목을 작게 만들거나 점수를 낮추는 경우) 게임의 스크린샷을 첨부할 수도 있습니다. 코딩 피드백이 이렇게 재미있었던 적이 없습니다.

7. 수고하셨습니다

🎉 Codelab을 완료하셨습니다. 축하합니다.

Gemini로 게임을 만드는 것이 얼마나 쉬운지, Firebase가 게임을 유지하고 다른 사용자와 공유할 수 있는 간편한 호스팅 솔루션을 제공하는 방법을 알아봤습니다.

학습한 내용

Gemini 2.5를 통해 게임을 만듭니다.
Firebase에 배포

이제 👥 자랑할 시간입니다. LinkedIn 또는 트위터에서 #VibeCodeAGameWithGemini 해시태그를 사용하여 최신 게임 (your-project.web.app)을 공유해 보세요 (LinkedIn에서 작성자를 태그할 수도 있음). 이를 통해 이 Codelab의 인기를 파악하고 유사한 Codelab을 더 많이 작성할 수 있습니다.

더 많은 혜택을 받고 싶습니다.

추가 리소스를 찾고 있다면 다음 게임과 메시지를 확인하세요.

주말에 Gemini 2.5 및 p5.js로 어린이용 게임 5개를 코딩해 보세요. 이 도움말에서는 6가지 예를 통해 게임의 분위기 코딩에 대한 사고 과정을 안내합니다.
palladius/genai-googlecloud-scripts (앱 10개 - 코드 및 프롬프트가 포함된 GitHub 저장소): 테트리스, 팩맨, 4인용 연결 게임, 향수를 불러일으키는 Rogue 클론까지 제공됩니다. 여기에는 이러한 모든 게임의 프롬프트가 포함되어 있습니다. 좋아하는 음악을 선택하고 프롬프트를 조정하여 분위기를 내보세요.

오늘 해본 작업이 너무 번거로워 보이면 🔥 Firebase 스튜디오를 사용해 보세요. 아이디어 > 프롬프트 > 코드 > 앱 루프가 모두 단일 브라우저 창에 포함되어 있습니다.

만들 수 있는 샘플 게임은 다음과 같습니다.

최종 게임은 다음과 같이 표시될 수 있습니다.

3D 테트리스
언어 게임
불량 클론
팩맨 클론

다시 한번 말씀드리지만 영어로만 작성하실 수 있습니다.

🎉 즐겁게 코딩하세요.

오류 신고