Google AI Studio를 사용하여 완전한 풀스택 웹 및 네이티브 Android 앱 구축 및 게시하기

설치할 SDK도, 구성할 로컬 환경도 없습니다. 오직 프롬프트 하나로 — 프로덕션 앱을 만듭니다.

"원하는 것을 설명하기"가 실제로 배포 가능한 실제 앱으로 이어지는 순간을 기다려 오셨다면 — 바로 지금이 그 순간입니다. Google AI Studio의 Build mode를 사용하면 브라우저 내에서 단순한 영어 프롬프트만으로 풀스택 웹 앱과 네이티브 Android 앱을 만들 수 있으며, Google Cloud로 원클릭 배포가 가능합니다.

이 튜토리얼은 첫 번째 프롬프트부터 라이브 웹 앱, 그리고 Google Play Store의 내부 테스트 트랙(Internal Test Track)에 게시된 Android 앱에 이르기까지의 전체 여정을 안내합니다. 우리는 **AI 제안 기능이 포함된 간단한 Task Manager(작업 관리자)**를 구축할 것입니다. 이는 플랫폼이 실제로 무엇을 할 수 있는지 보여줄 만큼 충분히 복잡하면서도, 사전 경험 없이도 따라 할 수 있을 만큼 초보자 친화적인 실용적인 앱입니다.

Google AI Studio Build Mode란 무엇인가?

Google AI Studio는 Gemini API를 사용하여 구축할 수 있는 Google의 플랫폼입니다. 내부적으로 Antigravity Agent에 의해 구동되는 Build mode는 자연어 프롬프팅을 통해 전체 앱을 생성하는 곳입니다.

기본적으로 제공되는 기능은 다음과 같습니다:

웹 앱의 경우:

React 프론트엔드 (클라이언트 측)
Node.js 서버 런타임 (보안 API 호출, 데이터베이스 연결, npm 패키지)
필요 시 Firebase 통합 (Firestore 데이터베이스 + Authentication)
Google Cloud Run으로 원클릭 배포

Android 앱의 경우:

Jetpack Compose를 사용한 프로덕션 품질의 Kotlin 코드
앱을 미리 볼 수 있는 브라우저 내 Android 에뮬레이터
실제 기기에 직접 설치할 수 있는 ADB 지원
Google Play 개발자 계정을 통한 Play Store 직접 게시

초보자를 위한 보너스: Google Cloud로의 첫 두 번의 앱 배포는 신용카드 없이 완전히 무료입니다.

우리가 만들 것

앱 아이디어: 사용자가 로그인하고, 작업을 추가하며, 작업을 우선순위 지정하거나 완료하는 방법에 대해 AI 기반 제안을 받을 수 있는 Task Manager.

이 프로젝트가 훌륭한 시작 프로젝트인 이유:

사용자 인증 (실제 환경의 요구사항)이 필요함
데이터베이스 (작업 내용의 영속성 유지)가 필요함
명확한 UI (목록, 추가, 삭제)를 갖춤
AI 계층이 진정한 가치를 더함 (Gemini를 통한 우선순위 제안)

Prerequisites (사전 요구 사항)

시작하기 전에 다음 사항이 필요합니다:

Google 계정 (무료)
브라우저 (Chrome 권장)
Android 게시를 위한 경우: Google Play 개발자 계정 (1회성 비용 $25)

이것이 전부입니다. Node.js 설치, Android Studio, 로컬 설정은 필요하지 않습니다.

Part 1: 웹 앱 구축하기

Step 1 — Google AI Studio 빌드 모드 열기

aistudio.google.com으로 이동합니다.
Google 계정으로 로그인합니다.
왼쪽 사이드바에서 Build를 클릭합니다.
중앙에 프롬프트 박스가 있는 Build 모드 인터페이스가 나타납니다.

Step 2 — 첫 번째 프롬프트 작성하기

프롬프트 박스에 앱에 대한 명확한 설명을 입력하세요. 구체적일수록 좋습니다. 더 많은 세부 정보를 제공할수록 결과물이 더 좋아집니다.

다음 프롬프트를 시도해 보세요:

풀스택 작업 관리자 (task manager) 웹 앱을 구축해줘. 사용자는 Google로 회원가입 및 로그인을 할 수 있어야 해. 로그인 후에는 제목과 설명을 포함한 작업을 추가하고, 작업을 완료로 표시하거나 삭제할 수 있어야 해. 각 작업은 ...

Tip: Gemini가 프로젝트 아이디어를 생성해주길 원한다면 "I'm Feeling Lucky" 버튼을 클릭할 수도 있습니다. 계획 없이 실험해보고 싶을 때 매우 유용합니다.

Enter를 누르거나 전송 버튼을 클릭하세요. 그러면 Antigravity Agent가 다음 작업을 수행합니다:

앱 블루프린트 (이름, 기능, 스타일) 생성
코드를 작성하기 전에 계획을 먼저 보여줌
진행하기 전에 사용자의 승인을 요청

Step 3 — 블루프린트 검토하기

AI Studio는 코드를 생성하기 전에 블루프린트를 제시합니다. 일반적으로 다음 내용을 포함합니다:

앱 이름 (예: "TaskFlow AI")
기능 목록 (인증, 작업 CRUD, AI 제안)
스타일 가이드라인 (색상, 글꼴, 레이아웃)

검토해 보세요. 색상 구성(color scheme)이나 앱 이름 등 어색한 부분이 있다면, Customize를 클릭하여 직접 수정하세요. 이는 코드 생성(code generation)이 시작되기 전, 결과물을 조절할 수 있는 마지막 쉬운 기회입니다.

만족스럽다면 Generate를 클릭하세요.

Step 4 — 에이전트가 구축하는 과정 지켜보기

이제 에이전트가 여러 파일에 걸쳐 풀스택 (full-stack) 앱을 동시에 작성할 것입니다. 다음과 같은 과정을 보게 됩니다:

앱이 형태를 갖춰감에 따라 우측의 Preview 창이 업데이트됨
Code 탭(클릭 시 확인 가능)에서 생성된 React 및 Node.js 파일 확인 가능
에이전트가 파일 의존성 (dependencies)을 관리하고 스택 전체에 변경 사항을 자동으로 전파함

이 과정은 1~3분 정도 소요됩니다. 탭을 닫지 마세요.

Step 5 — Firebase 활성화 (데이터베이스 + 인증)

초기 앱이 생성되면, 에이전트는 앱에 사용자 데이터 저장소와 인증 (authentication) 기능이 필요함을 감지합니다. 다음과 같은 프롬프트가 나타납니다:

"앱에 데이터베이스와 사용자 로그인이 필요합니다. Firebase를 활성화하시겠습니까?"

Enable Firebase를 클릭하세요. 에이전트가 자동으로 다음 작업을 수행합니다:

Firebase 프로젝트 생성
Firestore 데이터베이스 프로비저닝 (provisioning)
Google 인증 (Google Authentication) 활성화
앱의 코드베이스를 Firebase에 연결
Google 로그인 (Google Sign-In) 기능이 포함된 로그인 페이지 생성

Firebase 설정 코드를 단 한 줄도 직접 작성할 필요가 없습니다. 모든 것이 자동으로 처리됩니다.

Step 6 — 미리보기 및 반복 (Iterate)

Preview 창을 사용하여 앱을 실시간으로 테스트하세요. 다음 항목들을 시도해 보세요:

Google 계정으로 로그인하기
작업 (task) 추가하기
작업에서 "AI Suggest" 클릭하기
작업을 완료로 표시하기
작업 삭제하기

만약 작동하지 않거나 어색한 부분이 있다면, 채팅창에 후속 프롬프트를 입력하기만 하면 됩니다:

모바일에서 "AI Suggest" 버튼 텍스트가 너무 작습니다. 더 크게 만들고, AI 응답이 생성되는 동안 로딩 스피너 (loading spinner)를 추가해 주세요.

에이전트는 영향을 받는 파일만 업데이트하고 미리보기를 다시 렌더링 (re-render)합니다. 프롬프트 입력, 미리보기, 개선으로 이어지는 이 반복 루프 (iterative loop)가 바로 AI Studio로 앱을 구축하는 방식입니다.

Pro tip (전문가 팁): 미리보기 창의 **edit tool (편집 도구)**을 사용하여 앱 위에 직접 그리거나 주석을 달아, 에이전트에게 무엇을 변경해야 할지 시각적으로 지시할 수도 있습니다.

Step 7 — 웹 앱 배포 (Deploy the Web App)

앱이 마음에 든다면, **Deploy (배포)**를 클릭하세요.

AI Studio는 다음 과정을 수행합니다:

React 프론트엔드와 Node.js 백엔드를 패키징합니다.
Google Cloud Run (완전 관리형, 자동 확장)에 배포합니다.
1분 이내에 라이브 공개 URL을 제공합니다.

처음 두 번의 배포는 완전히 무료입니다. 다음과 같은 URL을 받게 됩니다:
https://taskflow-ai-xxxx.run.app

이제 공유하세요. 앱이 라이브 상태가 되었습니다.

Part 2: 네이티브 Android 앱 구축하기

이제 동일한 아이디어를 Android Studio를 설치하지 않고도 네이티브 Android 앱으로 전환해 보겠습니다.

Step 1 — Android 빌드 시작하기

Google AI Studio의 Build (빌드) 모드에서 "Build an Android app" (Android 앱 구축) 옵션을 찾으세요 (Google I/O 2026 기준 사용 가능). 해당 옵션을 선택합니다.

이제 Android 빌드 모드로 전환되며, React + Node.js 대신 Kotlin + Jetpack Compose 코드가 생성됩니다.

Step 2 — Android 앱을 위한 프롬프트 작성

모바일에 최적화된 프롬프트를 사용하세요:

Kotlin과 Jetpack Compose를 사용하여 네이티브 Android 할 일 관리(task manager) 앱을 구축해줘. 
사용자는 제목과 우선순위(높음, 중간, 낮음)를 입력하여 할 일을 추가할 수 있어야 해. 
할 일은 우선순위에 따라 정렬된 리스트로 표시되어야 하며, 각 할 일에는 스와이프하여 삭제하는 기능이 포함되어야 해. 
...

에이전트는 최신 Jetpack Compose 패턴을 사용하여 프로덕션 품질(production-quality)의 Kotlin 코드를 생성할 것입니다.

Step 3 — 브라우저 에뮬레이터에서 미리보기

코드가 생성되면, AI Studio는 **브라우저 내 Android 에뮬레이터 (in-browser Android emulator)**를 실행합니다. 다음과 같은 작업을 할 수 있습니다:

앱을 탭하며 조작하기
할 일 추가하기
스와이프하여 삭제 기능 테스트하기
Material 3 컴포넌트가 실제 Android 화면 크기에서 어떻게 렌더링되는지 확인하기

Android Studio도, 에뮬레이터 다운로드도 필요 없습니다. 브라우저에서 바로 실행됩니다.

변경이 필요한 부분이 있다면 프롬프트를 입력하세요:

플로팅 액션 버튼(floating action button, FAB)이 작은 화면에서 할 일 리스트의 마지막 항목과 겹칩니다. 마지막 항목이 항상 FAB 위로 보일 수 있도록 리스트에 하단 패딩(bottom padding)을 추가해 주세요.

Step 4 — 실제 기기에 설치하기 (선택 사항)

실제 휴대폰에서 직접 느껴보고 싶으신가요? AI Studio는 **ADB (Android Debug Bridge)**를 지원합니다:

Android 기기에서 개발자 옵션 (Developer Options) 활성화 (설정 → 휴대전화 정보 → 빌드 번호를 7번 탭하기)
USB 디버깅 (USB Debugging) 활성화
USB를 통해 휴대폰 연결
AI Studio에서 ADB를 통해 설치 (Install via ADB) 클릭

몇 초 안에 앱이 기기에 설치됩니다.

Step 5 — Google Play에 게시하기

여기서부터 정말 놀라운 기능이 시작됩니다. AI Studio는 최대 100명의 테스터와 공유할 수 있는 비공개 배포 채널인 Google Play의 **내부 테스트 트랙 (Internal Test Track)**에 직접 게시할 수 있습니다.

사전 준비 사항:

Google Play 개발자 계정 (1회성 비용 $25)
Google Play Console에서 생성된 앱 (이름과 패키지 ID만 있으면 됩니다)

AI Studio에서의 단계:

Play Store에 게시 (Publish to Play Store) 클릭
Google Play 개발자 계정 연결
Play Console에서 앱 선택
AI Studio가 서명된 APK/AAB를 생성하고 이를 내부 테스트 트랙에 업로드합니다.

완료되었습니다. 테스터들에게 Play Store를 통해 앱을 설치하라는 알림이 전송됩니다.

방금 어떤 일이 일어났는지 이해하기

플랫폼이 여러분을 대신해 처리해 준 작업들을 잠시 살펴보겠습니다:

수행한 작업	일반적으로 소요되는 시간
평이한 영어로 앱 설명하기	기술 사양서 작성
...

이 과정 중 그 어느 것도 React, Node.js, Kotlin, Jetpack Compose, Firebase SDK 설정 또는 Google Cloud 배포 파이프라인에 대한 지식을 요구하지 않았습니다. Antigravity Agent가 이 모든 것을 관리했습니다.

생성된 코드는 어떤 모습인가요?

AI Studio가 코드를 작성한다고 해서 코드를 볼 수 없다는 뜻은 아닙니다. 언제든지 Code 탭을 클릭하여 검사할 수 있습니다:

웹 앱 — Node.js 서버 스니펫 예시 (AI 생성):

// server/index.js
import express from 'express';
import { GoogleGenerativeAI } from '@google/generative-ai';
...

API 키가 서버 측에 있으며 클라이언트에 절대 노출되지 않는다는 점에 주목하세요. AI Studio는 기본적으로 이 보안 패턴을 강제합니다.

더 나은 결과를 얻기 위한 팁

초기 프롬프트(Prompt)를 구체적으로 작성하세요. 모호한 프롬프트는 일반적인 앱을 생성합니다. 색상 구성(Colour schemes), 사용자 흐름(User flows), 그리고 원하는 구체적인 기능들을 포함하세요.

청사진 검토(Blueprint review)를 활용하세요. 청사진 단계를 건너뛰지 마세요. 이는 코드 생성(Code generation) 전 가장 명확한 체크포인트입니다.

작은 단계로 반복(Iterate)하세요. 한 번의 프롬프트로 10가지를 동시에 바꾸려 하지 마세요. 한 가지를 변경하고, 미리보기(Preview)를 한 뒤, 다음 변경을 진행하세요.

생성된 코드를 읽어보세요. 초보자라 하더라도 결과물을 훑어보는 것만으로도 React 컴포넌트(Components), API 라우트(Routes), Kotlin 컴포저블(Composables)과 같은 실제 패턴을 배울 수 있습니다. 모든 빌드 과정이 무료 코딩 교육이 됩니다.

복잡한 프로젝트는 Antigravity로 내보내세요. 앱이 AI Studio의 브라우저 인터페이스가 처리하기에 버거울 정도로 커진다면, Export to Antigravity를 클릭하세요. 파일, 대화 기록, 비밀 정보(Secrets) 등 프로젝트의 전체 상태가 원활하게 전송됩니다.

알아두어야 할 제한 사항

웹 앱은 기본적으로 React + Node.js를 사용합니다. 다른 스택이 필요한 경우, Antigravity가 더 많은 유연성을 제공합니다.
Android 앱은 아직 AI Studio의 Android 빌드 모드 내에서 Firebase Auth를 지원하지 않습니다 (2026년 6월 기준). 인증(Auth)이 통합된 Android 앱을 만들려면 Antigravity 또는 Android Studio가 필요합니다.
무료 배포 할당량. 두 번의 무료 Cloud Run 배포가 제공됩니다. 그 이후에는 Cloud Run의 무료 티어(Free tier)가 적용됩니다 (트래픽이 적은 앱에는 관대하지만, 사용량을 모니터링하세요).
Firebase Studio 서비스 종료. 이전에 Firebase Studio를 사용했다면, 2026년 6월 22일에 새로운 워크스페이스(Workspace) 생성이 중단되었음을 유의하세요. 기존 프로젝트는 Google AI Studio 또는 Antigravity로 마이그레이션(Migrate)하세요.

다음 단계

여러분은 오직 브라우저에서, 오직 프롬프팅(Prompting)만으로 풀스택 웹 앱과 네이티브 Android 앱을 구축하고 배포했습니다. 이제 다음으로 나아갈 방향은 다음과 같습니다:

Google Workspace 통합 추가 — 이제 AI Studio는 Sheets, Drive, Docs를 앱 내 데이터 소스로 직접 지원합니다.
Gemini API 탐색 — 서버 코드에서 gemini-2.0-flash를 gemini-2.5-pro로 교체하여 더욱 강력한 AI 응답을 경험해 보세요.
Antigravity로 내보내기 — 팀 협업, 사용자 정의 배포 대상(deployment targets) 또는 더 깊은 코드 제어가 필요한 경우 사용하세요.
Android 앱 업그레이드 — Android Studio의 마이그레이션 에이전트(migration agent)를 사용하여 AI Studio에서 생성된 Kotlin 앱을 완전한 전문 Android 프로젝트로 전환하세요.

"앱 아이디어가 있다"와 "내 앱이 라이브 상태다" 사이의 간극은 과거에는 몇 주 단위로 측정되었습니다. 2026년의 Google AI Studio와 함께라면, 이는 몇 시간, 혹은 그보다 짧은 시간으로 측정됩니다.

aistudio.google.com에서 구축을 시작하세요. 처음 두 번의 배포는 무료입니다.

질문이 있거나 단계에서 막히셨나요? 아래에 댓글을 남겨주세요 — 기꺼이 도와드리겠습니다.

Tags: googleaistudio, beginners, webdev, android, ai