Google AI Studio의 빌드 모드

이 페이지에서는 Google AI Studio의 빌드 모드를 사용하여 nano banana 및 Live API와 같은 Gemini의 최신 기능을 테스트하는 앱을 빠르게 빌드 (또는 바이브 코딩)하고 배포하는 방법을 설명합니다.

시작하기

Google AI Studio의 빌드 모드에서 바이브 코딩을 시작합니다. 다음과 같은 몇 가지 방법으로 빌드를 시작할 수 있습니다.

프롬프트로 시작: 빌드 모드에서 입력 상자를 사용하여 빌드하려는 항목의 설명을 입력합니다. AI 칩을 선택하여 이미지 생성 또는 Google 지도 데이터와 같은 특정 기능을 프롬프트에 추가합니다. 음성 텍스트 변환 버튼을 사용하여 원하는 내용을 말할 수도 있습니다.
'I'm Feeling Lucky' 버튼: 창의적인 아이디어가 필요하면 'I'm Feeling Lucky' 버튼을 사용하세요. Gemini가 프로젝트 아이디어가 포함된 프롬프트를 생성하여 시작할 수 있도록 도와줍니다.
갤러리에서 프로젝트 리믹스: 앱 갤러리에서 프로젝트를 열고 앱 복사를 선택합니다.

프롬프트를 실행하면 필요한 코드와 파일이 생성되고 앱의 실시간 미리보기가 오른쪽에 표시됩니다.

프롬프트를 실행하면 AI Studio에서 웹 앱을 만듭니다. 기본적으로 React 웹 앱이 생성되지만 설정 메뉴에서 Angular 앱을 만들도록 선택할 수 있습니다. 오른쪽 미리보기 창에서 코드 탭을 선택하면 생성된 코드를 볼 수 있습니다.

다음은 참고할 파일입니다.

geminiService.ts: 이 파일에는 프롬프트 구성부터 Gemini API 호출, 응답 파싱에 이르기까지 앱의 기본 로직이 포함되어 있습니다. 이 파일에서 기본 프롬프트를 수정하거나 빌드 모드에서 Gemini와 대화형으로 채팅하여 구성요소 기능을 직접 수정할 수 있습니다. 이 파일의 코드는 GenAI TS SDK를 사용하여 Gemini API와 상호작용합니다.

Google AI Studio에서 웹 애플리케이션의 초기 코드를 생성하면 프로젝트를 계속 진행할 수 있는 두 가지 기본 옵션이 있습니다. AI Studio에서 빌드 또는 외부에서 개발입니다.

Google AI Studio 환경 내에서 직접 애플리케이션을 계속 개선하고 확장할 수 있습니다.

Gemini로 반복: 빌드 모드의 채팅 패널을 사용하여 Gemini에 수정, 새 기능 추가, 스타일 변경을 요청합니다. 예를 들어 '사용자에게 알림을 보내는 버튼을 추가해 줘' 또는 '색상 구성표를 파란색과 흰색으로 변경해 줘'라고 요청할 수 있습니다.
코드를 직접 수정: 미리보기 패널에서 코드 탭을 열어 실시간으로 수정합니다. 개발 중에 버전 관리를 활용하기 위해 프로젝트를 GitHub에 저장할 수 있습니다.

고급 워크플로의 경우 코드를 내보내고 원하는 환경에서 작업할 수 있습니다.

로컬에서 다운로드 및 개발: 생성된 코드를 ZIP 파일로 내보내고 코드 편집기로 가져옵니다. 이렇게 하면 익숙한 도구, 빌드 시스템, 로컬 버전 관리 관행을 사용하여 초기 프로토타입을 넘어 계속 빌드할 수 있습니다.
GitHub에 푸시: 코드를 GitHub 저장소에 푸시하여 기존 개발 및 배포 프로세스와 통합합니다.

Google AI Studio에는 빌드 프로세스를 직관적이고 시각적으로 만들 수 있는 여러 기능이 포함되어 있습니다.

주석 모드: 주석 모드를 사용하면 앱의 모양을 변경하는 코드를 작성하는 대신 앱 UI의 일부를 강조 표시하고 원하는 변경사항을 설명할 수 있습니다. 예를 들어 구성요소를 선택하고 '이 버튼을 파란색으로 만들어 줘' 또는 '이 이미지가 왼쪽에서 슬라이드되도록 애니메이션을 적용해 줘'라고 입력할 수 있습니다. 채팅에 추가를 선택하면 주석이 추가된 앱의 스크린샷과 함께 프롬프트가 생성됩니다.
앱 공유: 다른 사용자와 공동작업하거나 내 작품을 선보이기 위해 내 작품을 공유할 수 있습니다.
앱 갤러리: 앱 갤러리는 프로젝트 아이디어의 시각적 라이브러리를 제공합니다. Gemini로 할 수 있는 작업을 둘러보고, 애플리케이션을 즉시 미리 보고, 리믹스하여 나만의 애플리케이션을 만들 수 있습니다.

애플리케이션이 준비되면 AI Studio에서 바로 배포할 수 있습니다. 배포 옵션은 다음과 같습니다.

Google Cloud Run: 애플리케이션을 확장 가능한 서비스로 배포합니다. 사용량에 따라 Google Cloud Run 요금이 적용될 수 있습니다.
GitHub: 프로젝트를 GitHub 저장소로 내보내 기존 개발 및 배포 워크플로에 통합합니다.

이 섹션에서는 Google AI Studio에서 빌드 모드를 사용할 때의 중요한 제한사항을 설명합니다.

API 키 보안 및 노출

공유 앱의 코드는 앱을 보는 모든 사용자에게 표시됩니다. 앱 코드에 실제 API 키를 직접 사용하지 마세요.
기본적으로 앱은 API 키에 자리표시자 (예: process.env.GEMINI_API_KEY)를 사용합니다. 사용자가 AI Studio 내에서 공유 앱을 실행하면 AI Studio가 프록시 역할을 하여 자리표시자를 최종 사용자의 API 키로 대체하므로 키가 비공개로 유지됩니다.

앱 공개 상태 및 공유

앱은 Google Drive에 저장되며 Google Drive의 권한 모델을 상속받으므로 기본적으로 비공개입니다.
공유 권한: 다른 사용자와 앱을 공유하는 경우 다음 사항이 적용됩니다.
- 공유된 사용자는 코드를 확인하고 자신의 용도로 앱을 포크할 수 있습니다.
- 수정 권한이 부여된 공유 사용자는 앱의 코드를 수정할 수 있습니다.

AI Studio 외부 배포

공개 URL을 위해 Cloud Run에 앱을 배포할 수 있지만 이 설정은 모든 사용자의 Gemini API 호출에 API 키를 사용합니다.
- JavaScript 앱은 클라이언트 측에서 실행되므로 데이터 유출이나 오용을 방지하기 위해 API 키에 최소한의 액세스 권한만 부여해야 합니다. 예를 들어 동일한 프로젝트의 다른 파일 검색 스토어는 이 메커니즘을 통해 사용자에게 액세스할 수 있습니다.
안전한 외부 배포: AI Studio 외부에서 앱을 안전하게 실행하려면 (예: zip 파일을 다운로드한 후) API 키를 사용하는 로직을 서버 측 구성요소로 이동하여 최종 사용자에게 키가 노출되지 않도록 해야 합니다. Cloud Run을 사용하여 배포하는 경우에는 필요하지 않습니다.
키 노출 경고: 클라이언트 측 환경에서 자리표시자를 실제 API 키로 바꾸는 것은 키가 모든 사용자에게 표시되므로 적극 권장되지 않습니다.

도구 및 기능 지원