AI로 웹 기반 비디오 게임 출시

1. 소개

개요

오늘날 AI를 사용한 빌드는 어디에서 시작될까요? 대부분의 경우 간단한 쿼리 또는 프로토타입으로 시작됩니다. Google AI Studio는 Gemini 모델로 구동되는 코드 생성을 사용하여 풀 스택 웹 애플리케이션을 설계, 테스트, 빌드할 수 있는 강력한 빌드 모드 (흔히 '바이브 코딩'이라고 함)를 제공합니다.

이 Codelab에서는 이벤트 소싱 (게임 작업을 일련의 이벤트로 유지하여 플레이어가 경기 기록을 보고 이전 턴으로 돌아갈 수 있도록 함) 및 사용자 로그인을 위한 Firebase 인증 이 포함된 Firestore 데이터베이스를 사용하여 턴 기반 웹 기반 비디오 게임을 빌드합니다. AI Studio 에이전트는 모든 백엔드 서비스를 구성하고 프런트엔드, 이벤트 소싱 로직, 데이터베이스 상호작용 코드를 작성합니다. 앱이 완성되면 클릭 한 번으로 Cloud Run 에 바로 배포합니다.

실습할 내용

• Google AI Studio에 턴 기반 멀티플레이어 비디오 게임 웹 애플리케이션의 프로토타입을 만들도록 프롬프트합니다.
• 공유 가능한 짧은 게임 코드 또는 참여 링크를 지원하여 친구가 동일한 경기에 연결할 수 있도록 구현합니다.
• 이벤트 소싱 패턴으로 Firestore 데이터베이스 스토리지를 구현하여 경기 기록을 추적하고 게임플레이 시간 이동 (턴 실행취소 또는 다시 실행)을 허용합니다.
• Firebase 통합을 구성하고 사용 설정하여 Firestore 데이터베이스를 프로비저닝하고 Google 로그인 인증을 설정합니다.
• 대화형 미리보기 샌드박스에서 애플리케이션을 테스트합니다.
• Google AI Studio UI에서 직접 Cloud Run에 애플리케이션을 배포합니다.

학습할 내용

• Google AI Studio의 빌드 모드를 사용하여 자연어로 풀 스택 게임 서비스를 빠르게 프로토타입하는 방법
• Cloud Firestore를 사용하여 게임 기록을 저장하는 이벤트 소싱 아키텍처 패턴을 구현하는 방법
• Google AI Studio에서 Firebase Firestore 및 인증 통합을 자동으로 구성하는 방법
• AI Studio 애플리케이션을 Cloud Run에서 서버리스 컨테이너로 배포하는 방법
• Firebase Console 내에서 데이터베이스 기록 및 보안 상태를 검사하는 방법

2. 프로젝트 설정

AI Studio를 실행하기 전에 계정 상태 및 필수사항을 확인하세요.

Google 계정 및 등급 정보

1. Google 계정이 없는 경우 Google 계정을 만듭니다.
   • 팁: 가능하면 이 실습에 개인 Google 계정을 사용하세요. 그룹, 회사 또는 학교 계정은 실험용 기능 또는 클라우드 통합을 사용 중지하는 Workspace 정책을 적용할 수 있습니다.
2. 배포의 결제 세부정보를 검토합니다.
   • Google Cloud 스타터 등급: 전체 Google Cloud 결제 계정을 설정하지 않고도 선택한 리전에서 최대 2개의 풀 스택 애플리케이션을 무료로 게시할 수 있습니다.
   • 표준 배포: 기존 유료 Google Cloud 프로젝트에 연결하고 스토리지 한도, CPU 리소스, API를 확장합니다.

3. AI Studio 빌드 모드에서 턴 기반 비디오 게임 만들기

애플리케이션 셸을 만들고 AI 코드 어시스턴트에 보안, 게임플레이 로직, 이벤트 소싱된 지속성 레이어를 빌드하도록 프롬프트합니다.

1. Google AI Studio 앱 패널로 이동하고 새 앱을 클릭합니다.
2. 채팅 프롬프트 상자에 턴 기반 비디오 게임 애플리케이션에 대한 설명을 입력합니다.

   Build a web-based, turn-based Tic-Tac-Toe game using
   Firebase as a backend. Users must be able to securely sign in
   using Google Sign-In, start a new game match, make moves, and play
   against an AI player or another user. Any algorithm used for the
   game opponent AI should use simple algorithms like min/max and the
   app should not make any calls to an LLM like the Gemini API. To
   support multiplayer matches, the application must generate a short
   game code or share link that players can easily copy and send to a
   friend to join the match. Use Firestore and an event sourcing
   pattern to save a history of every move (turn) as a separate event
   document in a subcollection under the game document. The
   application must reconstruct the current game state by replaying
   these events, and must allow users to view previous turns and opt
   to restore/roll back the game to a prior turn's state.
   

   이 링크를 클릭하면 프롬프트 상자가 자동으로 채워집니다.
3. 빌드 를 클릭하여 애플리케이션 생성 프로세스를 시작합니다.

AI Studio 에이전트는 데이터베이스 스토리지 및 보안 사용자 로그인의 필요성을 인식하면 자동화된 Firebase 구성 흐름을 트리거합니다.

1. 약 1분 후에 작업공간에 Firebase 사용 설정 통합 카드가 표시됩니다.
2. Firebase 사용 설정 버튼을 클릭하여 서비스 약관을 확인하고 동의합니다.
3. 에이전트가 백그라운드 설정을 실행합니다. 내부:
   • Firestore 데이터베이스 인스턴스가 프로비저닝됩니다.
   • Google 로그인이 사용 설정된 Firebase 인증이 사용 설정됩니다.
   • 서비스 계정 구성이 설정됩니다 (예: API 인증 정보가 포함된 src/lib/firebase.ts 만들기).
   • 기본 보안 경계 (사용자 격리 규칙)가 포함된 firestore.rules가 추가됩니다.

4. 테스트한 다음 위 과정을 반복합니다.

서비스를 라이브로 실행하기 전에 대화형 미리보기에서 유효성 검사를 실행합니다.

1. Google AI Studio 내에서 미리보기 창을 엽니다.
2. 로그인 버튼을 클릭하여 샌드박스 Google 로그인 인증을 트리거합니다.
   • 오류 수정 관련 참고사항: 생성 또는 테스트 중에 보안 규칙 불일치로 인해 런타임 문제, 컴파일 오류 또는 Firestore 권한 실패가 발생할 수 있습니다. 이 경우 AI Studio는 채팅에 수정 버튼을 표시하여 에이전트에게 문제를 자동으로 진단하고 해결하도록 요청할 수 있습니다.
   
3. 로그인한 후 새 게임 경기를 시작하고 생성된 짧은 게임 코드 또는 공유 링크를 복사한 후 이를 사용하여 경기에 참여할 수 있는지 확인합니다.
4. 여러 번 이동하고 경기 기록이 올바르게 렌더링되는지 확인합니다.
5. 경기의 이전 턴으로 돌아가 봅니다. 보드 또는 상태가 업데이트되어 게임플레이 기록의 과거 시점을 반영하고 해당 상태로 복원하거나 롤백할 수 있는지 확인합니다.
6. 스타일 또는 동작을 변경하려면 채팅 창을 통해 에이전트에게 지시합니다. 예:
   • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
   • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
7. 에이전트가 코드베이스를 업데이트할 때까지 기다리고 미리보기 브라우저에서 업데이트를 확인합니다.

5. Cloud Run에 배포

프로토타입이 완전히 작동하면 Cloud Run에서 공개 서비스로 배포합니다.

1. Google AI Studio의 오른쪽 상단에서 게시 버튼을 클릭하여 배포 마법사를 시작합니다.
2. 시작하기 를 클릭하여 Google Cloud 프로젝트를 구성합니다.
   • 타겟 Google Cloud 프로젝트 드롭다운이 작업공간과 연결한 프로젝트와 일치하는지 확인합니다.
   • AI Studio는 Cloud Run 인스턴스의 고유 서비스 식별자를 자동으로 생성합니다.
   • 선택적으로 배포 구성의 일부로 커스텀 .ai.studio URL 프리픽스 (예: your-portfolio-name.ai.studio)를 지정할 수 있습니다.
3. 처음 배포하고 표준 Google Cloud 매개변수를 사용하는 경우 조직 유형을 지정하고 결제 세부정보를 제공하라는 메시지가 표시될 수 있습니다.
4. 앱 게시 를 클릭합니다.
5. 컨테이너 빌드, 컨테이너 등록, 서비스 배포 단계는 백그라운드에서 진행됩니다. 이 프로세스는 일반적으로 2~4분 내에 완료됩니다.
6. 배포가 완료되면 생성된 앱 URL 을 복사하고 브라우저 탭에서 라이브 애플리케이션 링크를 방문합니다.
7. 브라우저에서 라이브 웹 애플리케이션을 테스트합니다.

6. Firebase Console에서 검사

내부에서 데이터 스키마와 사용자가 어떻게 추적되는지 확인합니다.

1. Firebase Console로 이동합니다.
2. AI Studio 라벨이 있거나 수동으로 바인딩한 프로젝트 ID가 있는 프로젝트를 선택합니다.
3. 왼쪽 탐색창에서 빌드 > Firestore 데이터베이스 를 선택합니다.
   • 애플리케이션에서 만든 데이터베이스 컬렉션 및 문서를 봅니다.
   • 각 문서에 활성 사용자 인증 정보와 일치하는 소유자 ID가 있는지 확인합니다.
4. Firestore 패널에서 보안 탭을 선택하여 확인된 문서 소유자에 대한 읽기 및 쓰기 권한을 제한하는 자동 생성된 보안 지시어를 검토합니다.
5. 보안 > 인증 으로 이동하여 로그인 테스트 중에 채워진 활성 사용자 인증 정보 목록을 확인합니다.

7. 삭제

예상치 못한 청구 요금을 방지하거나 작업공간 리소스를 정리하려면 다음 단계를 따르세요.

1. Google AI Studio에서 앱 페이지로 이동합니다.
2. 그리드 또는 목록에서 애플리케이션을 찾습니다.
3. 휴지통 아이콘을 클릭하여 앱 상태를 삭제하고 Cloud Run에서 서비스 게시를 취소합니다.
4. 표준 프로젝트를 사용하여 배포했고 모든 리소스를 완전히 종료하려면 Google Cloud 콘솔 프로젝트 설정으로 이동하여 기본 프로젝트를 삭제합니다.

8. 결론

수고하셨습니다 Google AI Studio에서 직접 턴 기반 비디오 게임을 설계, 개발, 배포했습니다.

이 링크를 방문하여 빌더 여정 완료 배지를 받으세요.

여정을 계속하려면 다음 실습을 위해 goo.gle/builders로 이동하세요.

자세히 알아보기

• Firestore 보안 규칙 가이드
• Cloud Run 문서
• Google AI Studio에서 앱 빌드