1. 개요
오늘날 AI를 사용한 빌드는 어디에서 시작될까요? 대부분의 경우 내가 생각해 온 문제에 대한 솔루션을 빠르게 프로토타입으로 만들 수 있을까? 라는 간단한 질문에서 시작됩니다. 이때 Google AI Studio를 이용할 수 있습니다. 빠른 프로토타입 제작을 위한 플랫폼입니다. 이 Codelab에서는 바이브 코딩을 사용하여 간단한 웹 애플리케이션을 빌드하고 Cloud Run에 배포합니다.
기본 요건
- 웹 애플리케이션에 대한 기본적인 이해
학습할 내용
이 Codelab에서는 다음 방법을 알아봅니다.
- 바이브 코딩을 사용하여 Google AI Studio에서 간단한 웹 애플리케이션을 빌드합니다.
- 애플리케이션이 예상대로 작동하는지 테스트합니다.
- 애플리케이션을 Cloud Run에 배포합니다.
요구사항
2. 시작하기 전에
- Google 계정이 없는 경우 Google 계정을 만들어야 합니다.
- 직장 또는 학교 계정 대신 개인 계정을 사용하세요. 직장 및 학교 계정에는 이 실습에 필요한 API를 사용 설정하지 못하도록 하는 제한사항이 있을 수 있습니다.
- Google AI Studio로 이동하여 서비스 약관을 검토합니다.
- Google Cloud 스타터 등급을 사용하는 경우 전체 Google Cloud 환경 또는 결제 계정을 설정하지 않고도 단일 Cloud Run 리전에 최대 2개의 전체 스택 애플리케이션을 배포할 수 있습니다.

3. 프로토타입
Google AI Studio에서 오른쪽 상단의 설정 패널을 잠시 검토합니다. 여기에서 모델과 기본 프레임워크를 선택하고 시스템 안내를 제공할 수 있습니다.

설정이 완료되면 만들려는 애플리케이션을 설명 하고 빌드 를 클릭합니다.
Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons".
If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds.
If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.

이 설명을 기반으로 AI Studio가 웹 애플리케이션을 빌드합니다. 생성 프로세스는 2~3분 정도 걸리며, 이 과정에서 디자인 옵션을 선택하라는 메시지가 표시될 수 있습니다.

애플리케이션에 문제가 발생하면 추가 프롬프트를 입력하여 동작을 세부적으로 조정할 수 있습니다 (예: Increase the size of the snowflakes to twice their current size).
다음 이미지는 생성된 애플리케이션의 스냅샷을 보여줍니다.

4. Cloud Run에 배포
이제 애플리케이션이 준비되었으므로 Cloud Run에 배포합니다.
- 페이지 오른쪽 상단에서 게시 를 클릭합니다.

- 그러면 Google Cloud에 앱 배포 대화상자가 열립니다.

- Cloud 프로젝트 선택 드롭다운을 클릭하여 프로젝트를 선택하거나 기본 Gemini 프로젝트 를 계속 사용합니다.
- 드롭다운에서 프로젝트를 선택합니다. 프로젝트를 찾을 수 없는 경우 프로젝트 가져오기를 클릭한 후 프로젝트 가져오기 창에서 프로젝트를 선택합니다.
- 메시지가 표시되면 조직 유형으로 개인 을 선택하고 도로명 주소를 입력합니다.

- 앱 게시 를 클릭하고 애플리케이션이 Cloud Run에 배포될 때까지 기다립니다. AI Studio는 Cloud Run 서비스 이름을 자동으로 생성합니다.

- 배포에는 몇 분 정도 걸립니다. 완료되면 앱 URL 을 클릭하여 배포된 웹 애플리케이션을 엽니다.

5. 정리
이 Codelab에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 앱 게시 취소를 클릭합니다.

6. 축하합니다
축하합니다. Google AI Studio에서 웹 애플리케이션을 vibe 코딩하고 Cloud Run에 배포했습니다.
AI Studio와 Cloud Run의 통합으로 애플리케이션을 Google Cloud에 직접 배포할 수 있습니다. Cloud Run을 사용하면 서버리스 환경의 모든 이점을 누릴 수 있으며 인프라 관리의 복잡성을 추상화할 수 있습니다.
다음 단계
이 실습을 완료하셨습니다. 이제 애플리케이션 프레임워크가 준비되었으므로 다음 공식 가이드를 살펴보고 프로젝트의 기능을 확장하세요.
추천 문서 및 가이드
- 프롬프트 디자인 전략: 프롬프트 구조화, 시스템 안내 사용, 소수의 예시 구현, 출력 형식 제어의 핵심 원칙을 알아봅니다.
- Gemini API를 사용한 함수 호출: 배포를 외부 도구 및 API에 연결하여 Gemini 모델이 구조화된 데이터를 출력하고 실제 애플리케이션 로직을 트리거할 수 있도록 합니다.
- 텍스트 음성 변환 생성: Gemini API를 사용하여 음성 오디오를 생성하고, 음성 스타일을 제어하고, Google AI Studio의 음성 라이브러리를 사용하여 음성을 테스트하는 방법을 알아봅니다.