1. 개요
이 Codelab에서는 음악 플레이어가 통합된 복고풍 스네이크 게임인 '스네이크 & 비트' 웹 애플리케이션을 빌드합니다. Gemini를 사용하여 네온 미학이 적용된 단일 파일 React 애플리케이션을 생성한 다음 버전 관리하고 Cloud Run에 배포합니다.
실습할 내용
- 빌드 및 프롬프트: Google AI Studio의 '빌드' 모드를 사용하여 단일 프롬프트에서 작동하는 게임을 생성합니다.
- 시스템 지침으로 미세 조정: 향후 수정에 사용할 지속적인 페르소나를 설정하여 AI의 '분위기 확인'을 수행합니다.
- GitHub에 저장: AI Studio에서 직접 새 저장소를 부트스트랩합니다.
- Cloud Run에 배포: 클릭 한 번으로 게임을 Google Cloud Run에 배포합니다.
학습할 내용
- Google AI Studio의 빌드 모드를 사용하여 앱을 신속하게 프로토타입으로 만드는 방법
- 시스템 안내를 사용하여 반복 중에 일관된 '코딩 분위기'를 유지하는 방법
- Google AI Studio를 GitHub 및 Cloud Run에 연결하는 방법
필요한 항목
- Chrome 웹브라우저
- Gmail 계정
- 결제가 사용 설정된 Cloud 프로젝트
- Gemini API 키
- GitHub 계정
2. 시작하기 전에
- Google Cloud 콘솔의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.
- Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요 .
3. 빌드 및 프롬프트 (핵심)
먼저 전체 애플리케이션을 한 번에 빌드합니다. Google AI Studio에 로그인하고 빌드 인터페이스에 있는지 확인합니다.
- 빌드 프롬프트 입력: 다음 세부적인 프롬프트를 채팅 상자에 붙여넣습니다.
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- 모델 선택: 오른쪽 설정 패널에서 Gemini 3.0 Pro (또는 최신 미리보기 모델)가 선택되어 있는지 확인하여 가장 빠른 코드 생성을 지원합니다.
- 실행: 빌드를 누릅니다 (또는 Cmd + Enter 누름).
- 미리보기: Gemini가 코드를 생성하고 일반적으로 오른쪽에서 실시간 미리보기를 렌더링합니다 (아래 참고).
4. 주석, 이미지, 음성으로 수정
시각적 변경사항을 말로 설명하기 어려운 경우가 있습니다. 주석 모드를 사용하면 앱 미리보기에 그림을 그려 비전을 즉시 전달할 수 있습니다.
주석 모드 사용
- 주석 모드 활성화: AI Studio 인터페이스 (왼쪽 패널 또는 미리보기 창의 하단 툴바 확인)에서 주석 또는 미세 조정 도구를 선택합니다.
- 앱 마크업:
- 그리기: 상자 도구를 사용하여 점수 카운터 주위에 직사각형을 그립니다.
- 댓글: 상자에 연결된 프롬프트를 입력합니다.'이 글꼴을 더 크게, 디지털 방식으로, 글리치하게 만들어 줘'
- 스케치: 화살표 도구를 사용하여 재생/일시중지 버튼을 가리킵니다.
- 댓글: '이 아이콘을 빛나는 네온 아이콘으로 변경해 줘'라고 입력합니다.
- 반복: '채팅에 추가'를 클릭한 다음 프롬프트 보내기를 누릅니다. Gemini는 시각적 표시와 텍스트 명령어를 해석하여 코드를 업데이트합니다.
- 확인: 미리보기 업데이트를 실시간으로 확인합니다. 이제 시각적 피드백이 코드에 반영됩니다.
음성 입력 (The Spoken Vibe)
때로는 '분위기'를 글로 쓰는 것보다 말로 표현하는 것이 더 쉽습니다.
- 작업: 입력창에서 마이크 아이콘 (+ 버튼 옆)을 클릭합니다.
- '뱀의 애니메이션이 너무 느려. 속도를 높여 꼬리가 빛나는 흔적을 남기게 해 줘'라고 말했습니다.
- 전송: Gemini가 음성을 텍스트로 변환하고 변경사항을 적용합니다.
5. 시스템 요청 사항 설정 및 다시 빌드
일반 프롬프트와 달리 시스템 안내는 전체 세션 동안 지속됩니다. 코딩 표준, 명명 규칙 또는 변경해서는 안 되는 특정 시각적 페르소나를 정의하는 데 가장 적합합니다.
- 고급 설정 열기: Google AI Studio 인터페이스 (빌드 모드)에서 시스템 요청 사항 상자를 찾습니다. 표시되지 않으면 채팅 패널의 상단 또는 측면에 있는 설정 (톱니바퀴 아이콘) 또는 고급 설정을 클릭합니다.
- '분위기' 요청 사항 추가: 다음 요청 사항을 텍스트 상자에 붙여넣습니다. 다음은 게임의 '글리치 아트' 페르소나를 정의합니다.
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- 변경 트리거: 시스템 안내를 변경해도 코드가 자동으로 다시 작성되지는 않습니다. Gemini에 이러한 새 규칙을 적용하도록 지시해야 합니다.
- 설정 패널을 닫습니다.
- 채팅/프롬프트 입력에 '새 시스템 요청 사항을 엄격하게 따르도록 애플리케이션 UI를 재빌드해 줘'라고 입력합니다.
- '실행 / 전송'을 클릭합니다.
- 업데이트 확인: Gemini가 변경사항을 인식합니다.
6. GitHub에 저장
파일을 다운로드하고 명령줄과 씨름하는 대신 내장된 GitHub 통합을 사용하여 저장소를 즉시 부트스트랩합니다.
- 통합 찾기: Google AI Studio 인터페이스의 상단 툴바에서 다운로드 및 배포 아이콘 사이에 있는 GitHub 아이콘을 찾습니다.
- 계정 연결: 아이콘을 클릭합니다. 처음 사용하는 경우 Google AI Studio에서 GitHub 계정에 액세스하도록 승인하라는 메시지가 표시됩니다.
- 저장소 만들기: '아래 정보를 입력하여 저장소를 만드세요'라는 제목의 대화상자가 표시됩니다.
- 저장소 이름: 이름을 입력합니다(예: 'React로 생성된 AI 뱀 게임'
- 저장소 설명: 저장소 설명을 입력합니다.
- 공개 상태: 쉽게 공유할 수 있도록 '공개' 또는 '비공개'를 선택합니다.
- GitHub로 푸시: 'Git 저장소 만들기' 버튼을 클릭합니다.
7. Cloud Run에 배포
이제 애플리케이션이 준비되어 GitHub에 저장되었으므로 Cloud Run에 배포해 보겠습니다.
- 배포 시작: 아래에 강조 표시된 버튼을 클릭합니다. 이 버튼은 AI Studio 페이지의 오른쪽 상단에 있습니다.
- 프로젝트 선택: 'Cloud 프로젝트 선택' 드롭다운을 클릭하고 드롭다운에서 프로젝트를 선택합니다.
- 문제 해결: 드롭다운에서 프로젝트를 찾을 수 없는 경우 '프로젝트 가져오기'를 클릭하고 '프로젝트 가져오기' 창에서 프로젝트를 선택합니다.
- 결제 확인: 프로젝트를 선택하면 프로젝트에 결제가 사용 설정되어 있는지 확인됩니다. '시작하기 전에' 섹션에서 결제 계정을 프로젝트에 연결했으므로 이 인증은 자동으로 통과됩니다.
- 배포: 앱 배포 버튼을 클릭하고 애플리케이션이 Cloud Run에 배포될 때까지 기다립니다. 참고: Cloud Run 서비스 이름은 자동으로 생성됩니다.
- 배포는 몇 분 안에 완료되며 앱 URL이 표시됩니다. URL을 클릭하면 배포된 웹 애플리케이션이 인터넷에 실시간으로 표시됩니다.
8. 삭제
이 게시물에서 사용한 리소스의 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 따르세요.
- Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다.
- 프로젝트 목록에서 삭제할 프로젝트를 선택하고 '삭제'를 클릭합니다.
- 대화상자에서 프로젝트 ID를 입력한 후 종료를 클릭하여 프로젝트를 삭제합니다.
9. 축하합니다
축하합니다. AI Studio에서 애플리케이션의 바이브 코딩을 완료하고 Cloud Run에 배포했습니다.
AI Studio는 애플리케이션을 개발하고 테스트하는 데 적합한 플랫폼으로, 사용자가 디자인을 즉시 시각화할 수 있습니다.
AI Studio와 Cloud Run의 원활한 통합을 통해 사용자는 애플리케이션을 Google Cloud에 직접 손쉽게 배포할 수 있습니다. Cloud Run을 활용하면 인프라 관리의 복잡성과 오버헤드를 추상화하여 서버리스 환경의 모든 고유한 이점을 누릴 수 있습니다.