이 페이지에서는 Google AI Studio를 사용하여 Nano Banana, Live API 같은 Gemini의 최신 기능을 테스트하는 앱을 빠르게 빌드 또는 '바이브 코딩'하고 배포하는 방법을 설명합니다. 이제 Google AI Studio에서 전체 스택 런타임을 지원하므로 자연어 프롬프트를 통해 서버 측 로직, 보안 비밀 관리, npm 패키지 지원을 갖춘 강력한 애플리케이션을 빌드할 수 있습니다.
시작하기
Google AI Studio의 빌드 모드에서 바이브 코딩을 시작합니다. 다음과 같은 몇 가지 방법으로 빌드를 시작할 수 있습니다.
- 프롬프트로 시작하기: 빌드 모드에서 입력 상자를 사용하여 빌드하려는 항목을 설명합니다. AI 칩을 선택하여 이미지 생성 또는 Google 지도 데이터와 같은 특정 기능을 프롬프트에 추가합니다. 음성 텍스트 변환 버튼을 사용하여 원하는 내용을 말할 수도 있습니다.
- 'I'm Feeling Lucky' 버튼: 창의적인 아이디어가 필요하면 'I'm Feeling Lucky' 버튼을 사용하세요. Gemini가 프로젝트 아이디어가 포함된 프롬프트를 생성하여 시작할 수 있도록 도와줍니다.
- 갤러리에서 프로젝트 리믹스: 앱 갤러리에서 프로젝트를 열고 앱 복사를 선택합니다.
프롬프트를 실행하면 필요한 코드와 파일이 생성되고 앱의 실시간 미리보기가 오른쪽에 표시됩니다.
무엇이 생성되나요?
프롬프트를 실행하면 AI Studio에서 완전한 애플리케이션을 만듭니다. 기본적으로 다음을 포함할 수 있는 전체 스택 환경을 만듭니다.
- 클라이언트 측: 웹 프런트엔드 (기본값은 React)
- 서버 측: 보안 API 호출, 데이터베이스 연결, npm 패키지 사용을 허용하는 Node.js 런타임입니다.
오른쪽 미리보기 창에서 코드 탭을 선택하면 생성된 코드를 볼 수 있습니다. Antigravity Agent는 스택 전반에서 여러 파일을 지능적으로 관리하여 변경사항이 올바르게 전파되도록 합니다.
The Antigravity Agent
Antigravity Agent는 Google Antigravity의 기본 AI 기능이며, 이제 에이전트 하네스의 핵심 구성요소가 Google AI Studio의 빌드 모드 환경을 지원합니다. 전체 프로젝트의 컨텍스트를 유지하고, 여러 파일을 관리하고, 복잡한 명령어를 이해하여 강력한 풀 스택 애플리케이션을 빌드함으로써 단순한 코드 생성을 넘어섭니다.
주요 기능은 다음과 같습니다.
- 컨텍스트 인식: 이전 프롬프트 및 파일 상태의 컨텍스트를 유지합니다.
- 다중 파일 관리: 여러 파일 간의 종속 항목을 처리합니다.
- 실행 확인: 코드 업데이트를 확인하여 환각 현상을 줄입니다.
전체 스택 기능
Google AI Studio를 사용하면 최신 웹 생태계의 기능을 활용하여 클라이언트 측 프로토타입 이상의 것을 빌드할 수 있습니다.
- 서버 측 런타임 및 npm: npm 패키지의 방대한 라이브러리를 사용합니다. 에이전트가 앱에 필요한 패키지 (예: 데이터 시각화 또는 API 클라이언트를 위한 특정 라이브러리)를 자동으로 식별하고 설치합니다. 원하는 경우 특정 패키지를 요청할 수도 있습니다.
- 보안 비밀 관리: 설정 메뉴에 API 키와 보안 비밀을 안전하게 저장합니다. 이러한 값은 서버 측 코드에서 액세스할 수 있으므로 클라이언트 측 노출로부터 안전하게 보호됩니다.
- 멀티플레이어: AI Studio 내에서 직접 실시간 공동작업 환경을 구축합니다. 서버 측 런타임은 사용자가 함께 상호작용하는 데 필요한 상태와 연결을 관리합니다.
계속 빌드하세요
Google AI Studio에서 애플리케이션의 초기 코드를 생성하면 다음과 같이 계속해서 코드를 개선할 수 있습니다.
Google AI Studio에서 빌드
- Gemini로 반복: 빌드 모드의 채팅 패널을 사용하여 Gemini에게 수정, 새 기능 추가, 스타일 변경을 요청합니다.
- 코드를 직접 수정: 미리보기 패널에서 코드 탭을 열어 실시간으로 수정합니다.
외부에서 개발
고급 워크플로의 경우 코드를 내보내고 원하는 환경에서 작업할 수 있습니다.
- 로컬에서 다운로드 및 개발: 생성된 코드를 ZIP 파일로 내보내고 코드 편집기로 가져옵니다.
- GitHub에 푸시: 코드를 GitHub 저장소에 푸시하여 기존 개발 및 배포 프로세스와 통합합니다.
주요 특징
Google AI Studio에는 빌드 프로세스를 직관적이고 시각적으로 만들어 주는 여러 기능이 포함되어 있습니다.
- 풀 스택 앱 만들기 및 반복: 프롬프트만으로 풀 스택 앱을 만들고 채팅 또는 주석 모드를 통해 반복합니다. 주석 모드를 사용하면 앱 UI의 어느 부분을 강조 표시하고 원하는 변경사항을 설명할 수 있습니다.
- 앱 공유 및 배포: 다른 사용자와 창작물을 공유하여 공동작업하거나 내 작품을 선보일 수 있습니다. 그런 다음 앱이 준비되면 Cloud Run에 배포합니다.
- 앱 갤러리: 앱 갤러리는 프로젝트 아이디어의 시각적 라이브러리를 제공합니다. Gemini로 할 수 있는 작업을 둘러보고, 애플리케이션을 즉시 미리 보고, 나만의 애플리케이션으로 리믹스할 수 있습니다.
풀 스택 앱 생성 및 반복: 런타임 지원에 관한 간단한 설명, 주석 모드로 반복 공유 및 배포 - AI Studio 내에서 앱 공유 또는 Cloud Run에 배포 앱 갤러리 살펴보기
앱 배포 또는 보관처리
애플리케이션이 준비되면 다음 방법으로 배포할 수 있습니다.
- Google Cloud Run: 애플리케이션을 확장 가능한 서비스로 배포합니다. 사용량에 따라 Google Cloud Run 가격이 적용될 수 있습니다.
- GitHub: 프로젝트를 GitHub 저장소로 내보냅니다.
제한사항
이 섹션에는 Google AI Studio의 빌드 모드에 적용되는 현재 제한사항이 나와 있습니다.
API 키 보안
- 클라이언트 측: 클라이언트 측 코드에서 실제 API 키를 직접 사용하지 마세요.
- 서버 측: 보안 비밀 관리 기능을 사용하여 서버 측 런타임에서 민감한 키를 안전하게 처리합니다.
Google AI Studio 외부 배포
- 공개 URL을 위해 Cloud Run에 앱을 배포할 수 있지만 이 설정은 모든 사용자의 Gemini API 호출에 API 키를 사용합니다.
- JavaScript 앱은 클라이언트 측에서 실행되므로 데이터 유출이나 오용을 방지하기 위해 API 키에 최소한의 액세스 권한만 부여해야 합니다. 예를 들어 동일한 프로젝트의 다른 파일 검색 스토어는 이 메커니즘을 통해 사용자에게 액세스할 수 있습니다.
- 안전한 외부 배포: AI Studio 외부에서 앱을 안전하게 실행하려면 (예: zip 파일을 다운로드한 후) API 키를 사용하는 로직을 서버 측 구성요소로 이동하여 최종 사용자에게 키가 노출되지 않도록 해야 합니다. Cloud Run을 사용하여 배포하는 경우에는 필요하지 않습니다.
- 키 노출 경고: 클라이언트 측 환경에서 자리표시자를 실제 API 키로 바꾸는 것은 키가 모든 사용자에게 표시되므로 적극 권장되지 않습니다.
앱 공유 시 오류
앱을 공유했는데 최종 사용자가 공유 URL을 사용할 때 403 액세스 제한됨 오류가 발생한다면 다음 중 한 가지 이유 때문일 수 있습니다.
- 브라우저 확장 프로그램: Privacy Badger와 같은 개인 정보 보호 확장 프로그램이 앱을 차단할 수 있습니다. 오류를 방지하려면 확장 프로그램을 사용 중지하세요.
- 빌드 문제: 현재 코드에 문제가 있을 수 있습니다. 상담사에게 '현재 코드의 빌드 문제를 수정'하라고 프롬프트한 다음 URL을 다시 공유합니다.
다음 단계
- 전체 스택 앱 개발
- 앱 갤러리의 예를 참고하세요.