Google AI Studio에서 풀스택 앱 개발

Google AI Studio는 이제 풀스택 개발을 지원해서 클라이언트 측 프로토타입을 넘어서는 애플리케이션을 만들 수 있어요. 서버 측 런타임을 사용하면 비밀(secrets)을 관리하고 외부 API에 연결하며 실시간 멀티플레이어 경험도 구축할 수 있어요.

출처: 원문

본문

서버 측 런타임(Server-side runtime)

Google AI Studio 앱은 이제 서버 측 구성 요소(Node.js)를 포함할 수 있어요. 이를 통해 다음을 할 수 있어요:

서버 측 로직 실행: 클라이언트에 노출되면 안 되는 코드를 실행해요.
npm 패키지 사용: Antigravity Agent가 방대한 npm 생태계의 패키지를 설치하고 사용할 수 있어요.
비밀(secrets) 처리: API 키와 자격 증명을 안전하게 사용해요.

npm 패키지 사용하기

npm install을 직접 실행할 필요는 없어요. 그저 에이전트에게 패키지가 필요한 기능을 추가해 달라고 요청하면, 에이전트가 설치와 import를 처리해요.

예시: > "외부 API에서 데이터를 가져오려면 axios를 사용해 줘."

비밀(secrets)을 안전하게 관리하기

서버 측 코드와 비밀 관리 덕분에 이제 세상과 상호작용하는 앱을 만들 수 있어요.

Gemini API 키

Gemini API를 사용하는 새 앱을 만들면 AI Studio가 GEMINI_API_KEY를 서버 측 비밀로 자동 구성해요 — 수동 설정은 필요 없어요. 이 키는 Settings의 Secrets 패널에서 확인할 수 있어요. 앱의 Gemini API 호출은 이 키를 사용해 서버 측 코드에서 이루어지므로 브라우저에 절대 노출되지 않아요.

서드파티 API 키

다른 서비스에는 API 키를 수동으로 추가할 수 있어요:

서드파티 API: Stripe, SendGrid 또는 커스텀 REST API 같은 서비스에 연결해요.
데이터베이스: 세션 너머로 데이터를 저장하기 위해 외부 데이터베이스(예: Supabase, Firebase, MongoDB Atlas를 통한)에 연결해요.

실제 앱을 만들 때는 Twilio, Slack, 데이터베이스처럼 API 키가 필요한 서드파티 서비스에 연결해야 하는 경우가 많아요. 다음 단계로 키를 수동으로 추가할 수 있어요:

비밀 추가: Google AI Studio의 Settings 메뉴로 가서 Secrets 섹션을 찾아요.
키 저장: 여기에 API 키나 시크릿 토큰을 추가해요.
코드에서 접근: 에이전트가 이 비밀을 안전하게 접근하는 서버 측 코드를 작성할 수 있어요(보통 환경 변수를 통해). 이렇게 하면 클라이언트 측 브라우저에 절대 노출되지 않아요.

필요할 때 에이전트는 새 비밀이 필요하거나 프로젝트의 환경 변수에서 새 키가 감지되면 채팅에서 키를 추가하라는 카드를 표시하기도 해요.

데이터베이스·인증을 위한 Firebase 통합

Google AI Studio는 이제 Firebase 통합을 통해 앱에 데이터베이스나 인증을 쉽게 추가할 수 있어요. Antigravity Agent가 다음 서비스를 자동으로 프로비저닝하고 설정해 줄 수 있어요:

Firestore 데이터베이스: 클라이언트·서버 측 개발을 위해 데이터를 저장하고 동기화하는 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스.
Firebase Authentication: 사용자가 "Sign in with Google" 흐름으로 애플리케이션에 안전하게 로그인하도록 해요.

에이전트에게 "앱에 데이터베이스를 추가해 줘" 또는 "Google 로그인을 설정해 줘"라고 요청하기만 하면 필요한 구성과 코드 생성을 처리해 줘요.

Firebase는 무료로 시작할 수 있고, 더 많은 할당량이 필요하거나 유료 기능을 쓰고 싶을 때 유료 계정으로 확장할 수 있어요.

Google Workspace API

Google AI Studio를 사용하면 Google Workspace API에 연결하는 앱을 만들 수 있어요. 사용자의 실제 데이터(이메일, 스프레드시트, 문서, 캘린더 이벤트 등)를 앱 안에서 모두 다룰 수 있게 해줘요. 이제 Google Cloud 프로젝트를 설정하거나 OAuth를 구성하거나 API를 수동으로 관리할 필요가 없어요.

동작 방식

Workspace 통합을 추가하는 방법은 두 가지예요:

채팅 패널에서 설명하기: 하단 채팅 패널에서 원하는 것을 에이전트에게 알려주면 돼요. 예: "영수증을 내 Google 시트에 기록하는 지출 추적기를 만들어 줘" 또는 "읽지 않은 Gmail 메시지를 요약하는 대시보드를 만들어 줘."
인테그레이션 패널에서 선택하기: Build 모드 오른쪽 사이드바의 Integrations 패널을 열고 연결하려는 Workspace 앱을 활성화해요.

Workspace 앱을 추가하면 AI Studio가 자동으로:

앱에 필요한 Google API를 연결해요.
API를 호출하는 서버 측 코드를 생성해요.
앱의 최종 사용자가 자신의 데이터 접근을 승인할 수 있도록 안전한 "Sign in with Google" 흐름을 추가해요.

지원 앱

다음 Google Workspace 앱을 사용할 수 있어요:

앱	만들 수 있는 것
Google Calendar	이벤트와 캘린더 읽기, 생성, 관리
Google Chat	대화와 그룹 스페이스 읽기·상호작용
Google Docs	문서 생성, 읽기, 업데이트, 서식 지정
Google Drive	파일과 폴더 정리, 검색, 관리
Google Forms	설문 생성, 질문 업데이트, 응답 검색
Gmail	이메일 콘텐츠 읽기, 보내기, 관리
Google Keep	메모, 목록, 첨부파일 관리
Google Meet	화상 통화 예약·관리
Contacts	연락처 동기화·관리
Google Sheets	스프레드시트 데이터 읽기, 쓰기, 서식 지정
Google Slides	프레젠테이션 생성·수정
Google Tasks	작업 생성, 관리, 정리

인증과 권한

빌더로서 OAuth 클라이언트를 구성하거나 자격 증명을 관리하거나 Google Cloud 프로젝트를 설정할 필요가 없어요. AI Studio가 이 모든 것을 대신 처리해 줘요.

Workspace API가 통합된 앱은 "Sign in with Google"으로 최종 사용자를 인증해요. 사용자가 앱을 열면 로그인하고 앱이 필요한 특정 권한(예: 캘린더 읽기 전용 접근, 스프레드시트 편집 권한)을 부여하라는 메시지를 받아요. 앱은 그 사용자의 데이터만 접근해요. 각 사용자는 자신의 계정 접근을 승인해요.

예시 프롬프트

Workspace 통합을 시작하기 위한 몇 가지 아이디어예요:

"내 Google 캘린더를 읽고 각 회의에 대한 준비 이메일을 Gmail에서 초안으로 작성하는 앱을 만들어 줘."
"Google Docs를 받아 Google Slides에서 5슬라이드 요약 프레젠테이션을 생성하는 도구를 만들어 줘."
"영수증을 업로드하면 Gemini가 세부 내용을 추출하고 내 Google 시트에 새 행을 기록하는 지출 추적기를 만들어 줘."

OAuth 설정

비밀 관리의 핵심 사용 사례 중 하나는 다른 웹사이트나 앱에 연결하기 위해 OAuth를 설정하는 것이에요. 프롬프트에 OAuth 인증이 필요한 서드파티 앱 연결에 대한 지침이 포함되어 있으면 에이전트가 해당 앱의 OAuth 설정 방법을 안내해 줘요. 이 지침에는 OAuth 애플리케이션을 구성하는 데 필요한 콜백 URL이 포함되어 있어요. Settings 패널의 Integrations에서도 콜백 URL을 찾을 수 있어요.

멀티플레이어 경험 구축

풀스택 런타임은 실시간 협업 기능을 가능하게 해요.

실시간 상태: 에이전트에게 "라이브 채팅", "협업 화이트보드", "멀티플레이어 게임" 같은 기능을 만들어 달라고 요청할 수 있어요.
동기화된 세션: 서버가 상태를 관리해서 여러 사용자가 같은 애플리케이션 인스턴스와 실시간으로 상호작용할 수 있어요.

예시 프롬프트: > "플레이어들이 서로의 커서를 볼 수 있는 멀티플레이어 게임으로 만들어 줘."

멀티플레이어 앱 테스트 팁

앱을 배포하기 전에 두 가지 방법으로 멀티플레이어 모드를 테스트할 수 있어요.

Google AI Studio Build 모드에서 여러 탭으로 앱을 열어요. Build 모드에서 개발할 때 앱은 dev 컨테이너 안에 있어요. 여러 탭으로 앱을 열면 여러 플레이어가 앱을 사용하는 상황을 시뮬레이션할 수 있어요.
오른쪽 위 Share 메뉴로 앱을 다른 사람과 공유해요. 그런 다음 Share 메뉴의 Integrations 탭에서 Shared URL을 사용해 공유한 플레이어들과 앱을 사용해요.

모범 사례(Best practices)

Gemini API 호출: GEMINI_API_KEY가 서버 측 비밀로 자동 구성돼요. 이 키를 사용해 서버 측 코드에서 Gemini API 호출을 만들어요. Secrets 패널에서 확인할 수 있어요.
비밀 보안: 민감한 키에는 항상 Secrets 관리자를 사용하세요. 파일에 하드코딩하지 마세요.
관심사 분리: UI 로직은 클라이언트 측 프레임워크(React/Angular)에 두고 비즈니스 로직/데이터 처리는 서버 측에 두세요.
오류 처리: 앱이 죽지 않도록 서버 측 코드가 외부 API 호출의 오류를 견고하게 처리하는지 확인하세요.

Google AI Studio에서 풀스택 앱 개발