1. 소개
개요
오늘날 AI로 빌드하는 것은 어디서부터 시작해야 할까요? 대부분의 경우 간단한 쿼리나 프로토타입으로 시작합니다. Google AI Studio는 Gemini 모델로 구동되는 코드 생성을 사용하여 풀 스택 웹 애플리케이션을 설계, 테스트, 빌드할 수 있는 강력한 빌드 모드('바이브 코딩'이라고도 함)를 제공합니다.
이 Codelab에서는 영구 스토리지용 Firestore 데이터베이스와 사용자 로그인용 Firebase 인증을 사용하여 공동작업 할일 애플리케이션을 빌드합니다. AI Studio 에이전트는 모든 백엔드 서비스를 구성하고 프런트엔드 및 데이터베이스 상호작용 코드를 작성합니다. 앱이 완성되면 클릭 한 번으로 Cloud Run에 바로 배포할 수 있습니다.
실습할 내용
- Google AI Studio에 공동작업 할 일 목록 웹 애플리케이션의 프로토타입을 제작하도록 프롬프트를 입력합니다.
- Firebase 통합을 구성하고 사용 설정하여 Firestore 데이터베이스를 프로비저닝하고 Google 로그인 인증을 설정합니다.
- 대화형 미리보기 샌드박스에서 애플리케이션을 테스트합니다.
- Google AI Studio UI에서 Cloud Run으로 애플리케이션을 직접 배포합니다.
학습할 내용
- Google AI Studio의 빌드 모드를 사용하여 자연어로 풀 스택 서비스를 빠르게 프로토타입으로 만드는 방법
- Google AI Studio에서 Firebase Firestore 및 인증 통합을 자동으로 구성하는 방법
- AI Studio 애플리케이션을 Cloud Run에서 서버리스 컨테이너로 배포하는 방법
- Firebase Console에서 데이터베이스 레코드와 보안 상태를 검사하는 방법
2. 프로젝트 설정
AI Studio를 실행하기 전에 계정 상태와 기본 요건을 확인하세요.
Google 계정 및 등급 정보
- 아직 Google 계정이 없다면 Google 계정을 만드세요.
- 도움말: 가능하면 이 실습에 개인 Google 계정을 사용하세요. 그룹, 회사 또는 학교 계정에서 실험용 기능이나 클라우드 통합을 사용 중지하는 Workspace 정책을 시행할 수 있습니다.
- 배포의 결제 세부정보를 검토합니다.
- Google Cloud 스타터 등급: 전체 Google Cloud Cloud Billing 계정을 설정하지 않고도 일부 리전에서 최대 2개의 전체 스택 애플리케이션을 무료로 게시할 수 있습니다.
- 표준 배포: 기존 유료 Google Cloud 프로젝트에 연결하고 스토리지 한도, CPU 리소스, API를 확장합니다.
3. AI Studio 빌드 모드에서 할 일 앱 만들기
애플리케이션 셸을 만들고 AI 코드 어시스턴트에게 보안 및 지속성 레이어를 빌드하라고 프롬프트를 표시해 보겠습니다.
- Google AI Studio 앱 패널로 이동하여 새 앱을 클릭합니다.
- 채팅 프롬프트 상자에 할 일 애플리케이션에 대한 설명을 입력합니다.
Build a collaborative to-do list application using Firebase as a backend. Users must be able to securely sign in using Google Sign-In, view their personal tasks, add new task items, toggle status as completed, and delete tasks. The database must isolate tasks so users can only view and modify their own records. - 빌드를 클릭하여 애플리케이션 생성 프로세스를 시작합니다.
AI Studio 에이전트가 데이터베이스 저장소와 보안 사용자 로그인에 대한 필요성을 인식하면 자동화된 Firebase 구성 흐름이 트리거됩니다.
- 1분 정도 지나면 Firebase 사용 설정 통합 카드가 작업공간에 표시됩니다.
- Firebase 사용 설정 버튼을 클릭하여 서비스 약관을 확인하고 동의합니다.
- 에이전트가 백그라운드 설정을 실행합니다. 자세히 들여다보기:
- Firestore 데이터베이스 인스턴스가 프로비저닝됩니다.
- Google 로그인이 사용 설정된 상태로 Firebase 인증이 사용 설정됩니다.
- 서비스 계정 구성이 설정됩니다 (예: API 사용자 인증 정보를 포함하는
src/lib/firebase.ts만들기). - 기본 보안 경계 (사용자 격리 규칙)가 포함된
firestore.rules가 추가됩니다.
4. 테스트한 다음 위 과정을 반복합니다.
서비스를 라이브로 시작하기 전에 대화형 미리보기에서 유효성 검사를 실행하세요.
- Google AI Studio 내에서 미리보기 창을 엽니다.
- 로그인 버튼을 클릭하여 샌드박스 Google 로그인 인증을 트리거합니다.
- 오류 수정 관련 참고사항: 생성 또는 테스트 중에 보안 규칙 불일치로 인해 런타임 문제, 컴파일 오류 또는 Firestore 권한 실패가 발생할 수 있습니다. 이 경우 AI Studio의 채팅에 수정 버튼이 표시되므로 에이전트에게 문제를 자동으로 진단하고 수정하도록 요청할 수 있습니다.
- 로그인한 후 'Cloud Run 문서 검토', 'Codelab 완료' 등 여러 할 일을 추가합니다.
- 일부 작업을 완료로 전환하고 하나를 삭제하여 클라이언트 측 핸들러와 데이터베이스 상태가 올바르게 업데이트되는지 확인합니다.
- 스타일이나 동작을 변경하려면 채팅 창을 통해 에이전트에게 지시하세요. 예:
"Could you style the interface using Tailwind CSS, and add a dark mode toggle button?""Show a count of remaining incomplete tasks at the footer of the task list."
- 에이전트가 코드베이스를 업데이트할 때까지 기다리고 미리보기 브라우저에서 업데이트를 확인합니다.
5. Cloud Run에 배포
프로토타입이 완전히 작동하면 Cloud Run에 공개 서비스로 배포합니다.
- Google AI Studio의 오른쪽 상단에서 게시 버튼을 클릭하여 배포 마법사를 시작합니다.
- 시작하기를 클릭하여 Google Cloud 프로젝트를 구성합니다.
- 타겟 Google Cloud 프로젝트 드롭다운이 작업공간과 연결된 프로젝트와 일치하는지 확인합니다.
- AI Studio는 Cloud Run 인스턴스의 고유 서비스 식별자를 자동으로 생성합니다.
- 처음 배포하는 경우 표준 Google Cloud 매개변수를 사용하면 조직 유형을 지정하고 결제 세부정보를 제공하라는 메시지가 표시될 수 있습니다.
- 앱 게시를 클릭합니다.
- 컨테이너 빌드, 컨테이너 등록, 서비스 배포 단계는 백그라운드에서 실행됩니다. 이 과정은 일반적으로 2~4분 내에 완료됩니다.
- 배포가 완료되면 생성된 앱 URL을 복사하고 브라우저 탭에서 라이브 애플리케이션 링크를 방문합니다.
- 브라우저에서 라이브 웹 애플리케이션을 테스트하세요.
6. Firebase Console에서 검사
데이터 스키마와 사용자가 어떻게 추적되는지 자세히 알아보세요.
- Firebase Console로 이동합니다.
AI Studio라벨이 있거나 수동으로 바인딩된 프로젝트 ID가 있는 프로젝트를 선택합니다.- 왼쪽 탐색 창에서 빌드 > Firestore 데이터베이스를 선택합니다.
- 애플리케이션에서 만든 데이터베이스 컬렉션과 문서를 확인합니다.
- 각 문서에 활성 사용자 인증 정보와 일치하는 소유자 ID가 있는지 확인합니다.
- Firestore 패널에서 보안 탭을 선택하여 읽기 및 쓰기 권한을 인증된 문서 소유자로 제한하는 자동 생성된 보안 지침을 검토합니다.
- 보안 > 인증으로 이동하여 로그인 테스트 중에 채워진 활성 사용자 인증 정보 목록을 확인합니다.
7. 삭제
예상치 못한 요금 청구를 방지하거나 워크스페이스 리소스를 정리하려면 다음 단계를 따르세요.
- Google AI Studio에서 앱 페이지로 이동합니다.
- 그리드 또는 목록에서 애플리케이션을 찾습니다.
- 휴지통 아이콘을 클릭하여 앱 상태를 삭제하고 Cloud Run에서 서비스를 게시 취소합니다.
- 표준 프로젝트를 사용하여 배포했고 모든 리소스를 완전히 종료하려면 Google Cloud 콘솔 프로젝트 설정으로 이동하여 기본 프로젝트를 삭제하세요.
8. 결론
수고하셨습니다 Google AI Studio에서 직접 공동작업 풀 스택 웹 애플리케이션을 설계, 개발, 배포했습니다.
빌더 실습을 완료하고 배지를 획득하고 여정을 이어갈 다른 실습을 찾으려면 goo.gle/builders로 이동하세요.