Google AI Studio 애플리케이션 배포 전체 가이드: 코드 내보내기 + 저가 API 연동 실전 튜토리얼

저자 주: Google AI Studio Build 모드 앱 배포의 전체 과정을 자세히 설명합니다. 코드를 로컬 IDE로 내보내고, APIYI와 같은 저가형 API 중계 서비스를 연결하여 개발 비용을 획기적으로 낮추는 방법을 알아보세요.

Google AI Studio 앱 배포는 많은 개발자분들이 궁금해하시는 부분이죠. AI Studio의 Build 모드를 사용하면 자연어로 React나 Angular 앱을 빠르게 만들 수 있지만, 공식 API 가격이 다소 높다는 점이 고민이 될 수 있습니다. 어떻게 하면 비용을 낮출 수 있을까요?

핵심 가치: 이 글을 다 읽고 나면 AI Studio 앱의 전체 배포 프로세스를 마스터하게 됩니다. 코드를 로컬 IDE로 내보내고 저가형 API 중계 서비스를 연결하여 개발 비용을 50%에서 최대 80%까지 절감하는 노하우를 배워보세요.

AI Studio 앱 배포 핵심 요점

왜 코드를 내보내서 중계 API를 연결해야 할까요?

Google AI Studio 온라인 개발은 매우 편리하지만, 결정적인 문제가 하나 있습니다. 바로 공식 정가 API를 사용해야 한다는 점입니다.

Gemini API 공식 가격 (2026년 1월 기준):

API 호출량이 많은 앱의 경우 비용이 빠르게 누적될 수 있습니다. 이때 APIYI(apiyi.com)나 wentuo.ai와 같은 API 중계 서비스를 이용하면 훨씬 저렴한 가격으로 이용할 수 있습니다.

진짜 문제는: AI Studio 온라인 편집기에서는 API 요청 주소를 직접 수정할 수 없다는 것입니다. 따라서 코드를 Cursor나 VS Code 같은 로컬 IDE로 내보낸 뒤, 설정을 수정해서 배포하는 것이 가장 합리적인 해결책입니다.

AI Studio 앱 배포 1단계: Build 모드에서 앱 만들기

Build 모드 시작하기

1. aistudio.google.com에 접속하세요.
2. 왼쪽 내비게이션 바에서 "Build"를 클릭합니다.
3. "Create new app"을 선택하세요.
4. 만들고자 하는 앱의 기능을 자연어로 설명합니다.

프롬프트 예시:

텍스트를 입력하면 Gemini API를 호출해 지정된 언어로 번역해 주는 AI 번역 앱을 만들어줘.
한국어, 영어, 중국어, 일본어 4개 국어 상호 번역을 지원해야 해.
인터페이스는 깔끔하고 현대적인 다크 테마로 구성해줘.

Build 모드 특징

Build 모드는 다음과 같은 전체 프로젝트 구조를 자동으로 생성합니다.

• geminiService.ts: API 호출 로직 담당
• 컴포넌트 파일: UI 화면 코드
• 설정 파일: 프로젝트 의존성 및 환경 설정

팁: Build 모드에서 생성된 코드는 GenAI TypeScript SDK를 사용하여 Gemini API를 호출합니다. 코드를 내보낸 후에는 다른 API 엔드포인트로 쉽게 수정할 수 있습니다.

AI Studio 앱 배포 2단계: 코드를 로컬로 내보내기

AI Studio 온라인 에디터에서는 API 요청 주소를 직접 수정할 수 없는데요. 이것이 바로 우리가 코드를 로컬로 내보내야 하는 가장 중요한 이유입니다.

내보내기 방법 1: ZIP 다운로드

1. Build 모드 화면 우측 상단의 "Download" 버튼을 클릭합니다.
2. "Download as ZIP"을 선택하세요.
3. 로컬 폴더에 압축을 풉니다.
4. Cursor나 VS Code 같은 IDE로 프로젝트를 엽니다.

내보내기 방법 2: GitHub로 푸시하기

1. 우측 상단의 GitHub 아이콘을 클릭합니다.
2. 처음 사용하는 경우 OAuth 권한 승인이 필요합니다.
3. "Create new repository"를 선택하거나 기존 저장소로 푸시합니다.
4. 로컬에서 저장소를 clone 하여 개발을 이어갑니다.

내보내기 방법 3: 코드 스니펫 가져오기

간단한 앱이라면 API 호출 코드만 직접 가져올 수도 있습니다.

1. "Get code" 버튼을 클릭합니다.
2. 언어 선택: Python / JavaScript / REST API
3. 코드를 복사해서 사용자 프로젝트에 붙여넣습니다.

내보낸 프로젝트 로컬에서 실행하기

# ZIP 압축 해제 후 프로젝트 디렉토리로 이동
cd your-ai-studio-app

# 의존성 패키지 설치
npm install

# 개발 서버 실행
npm run dev

이제 프로젝트가 로컬 환경에서 실행됩니다. 이 단계에서는 여전히 기존의 API Key와 공식 엔드포인트를 사용합니다.

AI Studio 앱 배포 3단계: 저렴한 API 중계 플랫폼 연동하기

비용을 절감하기 위한 핵심 단계입니다. APIYI(apiyi.com) 연동을 예로 들어 설명해 드릴게요.

API 호출 파일 찾기

내보낸 프로젝트에서 geminiService.ts 또는 이와 유사한 API 호출 파일을 찾으세요. 전형적인 코드 구조는 다음과 같습니다.

// 원본 코드 - 공식 API 사용
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

중계 플랫폼 API로 수정하기

APIYI와 같은 중계 플랫폼은 보통 OpenAI 형식을 지원합니다. 다음과 같이 수정해 보세요.

// 수정 후 - APIYI 중계 플랫폼 사용
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "your-apiyi-key",  // APIYI에서 발급받은 키로 교체
    baseURL: "https://vip.apiyi.com/v1"  // APIYI 엔드포인트
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // 모델 이름은 동일하게 유지
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - 전체 수정 버전
import OpenAI from "openai";

// APIYI 중계 플랫폼 설정
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "your-apiyi-key",
    baseURL: "https://vip.apiyi.com/v1"
});

// 번역 함수 예시
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `당신은 전문 번역가입니다. 텍스트를 ${targetLang}(으)로 번역하고 번역 결과만 반환하세요.`;

    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: text }
        ],
        max_tokens: 2000
    });

    return response.choices[0].message.content || "";
}

// 공통 대화 함수
export async function chat(
    messages: { role: string; content: string }[]
): Promise<string> {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: messages as any,
        max_tokens: 4000
    });

    return response.choices[0].message.content || "";
}

환경 변수 설정

API 키를 안전하게 보관하기 위해 .env 파일을 생성합니다.

# .env 파일
APIYI_KEY=your-apiyi-api-key

보안 팁: API 키를 코드에 직접 입력하거나 공개 저장소에 올리지 마세요. 항상 환경 변수를 통해 민감한 정보를 관리해야 합니다.

AI Studio 앱 배포 API 중계 플랫폼 비교

왜 API 중계 플랫폼을 선택해야 할까요?

1. 비용 우위: 동일한 호출량에도 비용을 50%~80%까지 낮출 수 있습니다.
2. 인터페이스 통합: OpenAI 형식을 지원하므로, 모델을 바꿔도 코드를 수정할 필요가 없습니다.
3. 접속 안정성: 국내 망과 직접 연결되어 VPN 없이도 빠르고 안정적으로 접속됩니다.
4. 다양한 모델 지원: 하나의 키로 Gemini, GPT, Claude 등 다양한 모델을 호출할 수 있습니다.

추천: APIYI(apiyi.com)에 가입하여 API 키를 발급받아 보세요. 무료 테스트 크레딧을 제공하며, Gemini 전 시리즈 모델을 지원합니다.

AI Studio 앱 배포 4단계: 배포 및 출시

코드 수정이 완료되었다면, 여러 가지 배포 방식을 선택할 수 있어요.

방식 1: Vercel에 배포하기 (추천)

# Vercel CLI 설치
npm install -g vercel

# 로그인 및 배포
vercel login
vercel

Vercel 콘솔에서 환경 변수 APIYI_KEY를 설정해 주세요.

방식 2: Cloud Run에 배포하기

AI Studio는 Google Cloud Run으로의 원클릭 배포를 지원해요:

1. 오른쪽 상단의 "Deploy" 버튼을 클릭합니다.
2. Google Cloud 프로젝트를 선택합니다.
3. 환경 변수를 구성합니다.
4. 배포를 확인합니다.

참고: Cloud Run 배포 시에는 여전히 AI Studio의 API Key가 사용돼요. 만약 APIYI 중계 API를 사용하고 싶다면, 먼저 코드를 내보내서 수정한 후 수동으로 배포하는 것을 추천합니다.

방식 3: 자체 서버에 배포하기

# 프로덕션 버전 빌드
npm run build

# PM2 등의 도구를 사용하여 실행
pm2 start npm --name "ai-app" -- start

AI Studio 앱 배포 자주 묻는 질문(FAQ)

AI Studio 애플리케이션 배포 전체 프로세스 요약

요약

Google AI Studio 애플리케이션 배포의 핵심 포인트는 다음과 같아요.

1. Build 모드: 자연어를 사용하여 React/Angular 애플리케이션을 빠르게 생성할 수 있습니다.
2. 코드 내보내기: ZIP 다운로드나 GitHub 푸시를 통해 로컬 개발 환경으로 코드를 가져옵니다.
3. API 교체: baseURL와 Key를 수정하여 중계 플랫폼에 연결합니다.
4. 비용 최적화: APIYI와 같은 중계 플랫폼을 활용하면 비용을 50%에서 최대 80%까지 절감할 수 있습니다.

AI Studio는 정말 강력한 온라인 개발 플랫폼이에요. 코드 내보내기 기능과 API 중계 플랫폼을 잘 결합하면, 빠른 프로토타이핑과 저비용 배포라는 환상적인 조합을 완성할 수 있습니다.

Gemini API를 안정적으로 사용하고 싶다면 apiyi.com(APIYI)을 추천드려요. 무료 테스트 크레딧은 물론, OpenAI 호환 인터페이스와 다양한 대규모 언어 모델의 통합 호출 기능을 제공하고 있어 매우 편리합니다.

📚 참고 자료

1. Google AI Studio Build 모드 문서: 공식 Build 모드 사용 가이드

   • 링크: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • 설명: Build 모드 기능 및 코드 내보내기에 대한 상세 소개

2. Gemini API 요금 페이지: 공식 API 가격 정보

   • 링크: ai.google.dev/gemini-api/docs/pricing
   • 설명: 각 모델별 최신 요금 및 무료 할당량

3. AI Studio에서 Cloud Run으로 배포하기 튜토리얼: Google 공식 Codelab

   • 링크: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • 설명: Google Cloud로 한 번에 배포하는 전체 프로세스

4. 로컬에서 AI Studio 프로젝트 실행하기 가이드: 커뮤니티 튜토리얼

   • 링크: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • 설명: 코드를 내보낸 후 로컬에서 개발하는 상세 단계

작성자: 기술팀
기술 교류: 댓글을 통해 자유롭게 의견을 나누어 주세요. 더 많은 자료는 APIYI apiyi.com 기술 커뮤니티에서 확인하실 수 있습니다.