Google AI Studio - Build 앱 : GitHub와 Vercel에 배포하는 방법 (비개발자용)
안녕하세요. 민트베어🍀🧸 입니다.
오늘 포스팅에서는 구글 빌드로 만든 앱을 Vercel로 온라인 배포하는 방법을 다룹니다.
구글 빌드에서 기본 제공되는 앱배포(Deploy)로 공개해도 되지만 버전업 관리나 개별 도메인으로 브랜딩된 UR로 이용하기 위해 Vercel 을 이용하곤 합니다.
아래 포스팅에 대한 자세한 내용은 오늘 4주차 시간에 다루겠습니다.
잠깐만요, 시작 전에 : API 키를 “누가 쓰고, 누가 결제”할지 먼저 정하세요
여러분 구글 빌드로 만든 앱을 Vercel 공개를 하기로 결정했다면
여러분 외에 또 다른 많은 사람들이 사용하기를 바라는 것이고
그러면 AI를 사용하는 과정에서 작든 크든 API 비용이 분명히 발생하게 됩니다.
여러분의 선택이 배포 방식과 비용 책임을 완전히 가르니, 아래 A와 B 중에서 하나를 선택하세요.
A) 운영자 키(내 API키)로 모두 사용 : Vercel에 내 API 키를 등록하면, 사용자들이 이미지 생성할 때도 전부 내 키로 호출됩니다. 즉 사용량/과금이 내 쪽으로 쌓입니다. (월말 신용카드 일괄 청구)
B) 사용자 각자 자기 키로 사용 (BYOK: Bring Your Own Key) : Vercel에 개발자의 키를 등록하지 않고, 앱에서 사용자가 각각 자기 키를 입력하게 해서 그 키로만 사용하게 할 수 있습니다. / 대신 “웹페이지에 키를 입력”하는 구조가 되므로 안내/설계가 꼭 필요합니다.
주의. Google은 운영 환경에서 클라이언트(브라우저)에 키를 노출하지 말라고 경고합니다. → Google AI for Developers
참고. Google AI Studio - 프로젝트 생성과 API키 등록 방법은 AI스튜디오빌드 2주차 영상 참고.
처음 사용자라면 꼭 체크할 5가지 (비개발자를 위한 사고 예방 가이드)
GitHub 저장소를 Private(비공개)로 만들기(필수)
“진짜 API 키 문자열”이 코드/파일에 들어가 있지 않은지 GitHub 검색으로 확인하기
Vercel에 내 API 키를 넣는다면 “Environment Variables”로만 넣고, 빌드 코드에 직접 적지 않기
Vercel에서 환경변수(키) 바꿨으면 반드시 Redeploy(재배포)하기
공개 앱(A안: 내 키)이라면 : 최소한의 남용 방지(로그인/횟수 제한/간단한 잠금) 기능 넣을 것을 권장
앱 개발 내용에 개인정보나 기업기밀 등 중요사항이 포함되지 않도록 설계. 노하우와 같은 중요한 데이터는 구글시트나 파이어베이스 DB 등으로 연결
지금부터 순서대로 따라하시면 됩니다.
1단계: Build에서 GitHub로 내보내기(코드를 온라인 폴더에 넣기)
실행 순서
AI Studio - Build에서 앱 열기 - 앱 개발
“GitHub에 동기화(Push to GitHub)” 버튼 클릭
GitHub 로그인/권한 승인(처음 1회)
“New repository(새 저장소)” 선택 → 이름 입력 → Private 선택(필수) → 완료
주의. 위 GitHub Sync - Visibiliy 에서 만약 [Public] 선택하면 모든 코드와 파일이 공개됩니다.
GitHub에서 파일 목록이 보이면 하단에서 “Stage and commit all changes" 버튼 클릭
여기까지 진행되었다면 GitHub에 파일이 업로드 된 것입니다.
2단계: Vercel에서 배포(“GitHub 폴더를 연결해서” 사이트 주소 만들기)
이후 Vercel 에서 나오는 “Import Git Repository”는 “별도의 업로드나 다운로드”가 아니라, “연결”입니다. 연결하면 GitHub에 업데이트가 올라갈 때마다 자동 배포가 됩니다.
실행 순서
Vercel 로그인 → New Project
Import Git Repository 구역에서 GitHub 선택
권한 승인 : Authorize Vercel + All repositories + Install
Authorize Vercel : GitHub에 업로드한 내 앱 파일에 Vercel이 접근하도록 허용합니다.
All repositories (권장): 앞으로 만들 모든 프로젝트를 Vercel로 편하게 배포하고 싶을 때 선택 (편리)
Only select repositories (선택) : 보안을 위해 딱 이 프로젝트만 Vercel에 연결하고 싶을 때 선택.
저장소 목록에서 내 앱 저장소 선택 → Import
Deploy 클릭
잠깐, Deploy 페이지에서 마지막에 설정하는 [Project Name]이 도메인 URL의 앞 주소(########-rho.vercel.app)가 됩니다.
잠깐, 만약 여기에서 내 API 키를 등록하고 싶다면(비용 발생해도 된다면), Deploy 버튼 누르지 말고 아래 3단계로 이동.
잠깐, 위에 [Vite]는 Google AI Studio에서 코드를 짜줄 때 가장 효율적이고 빠른 Vite 방식에 맞춰서 모든 설계도를 작성해 주었고, Vercel 에서도 그 방식을 활용하겠다는 의미입니다.
Deploy 완료되면
…vercel.app주소가 생김
간단한 앱들은 여기까지만 진행하셔도 충분히 안정적으로 배포 및 활용가능합니다.
이후 단계는 배포 중 에러가 발생했거나, 비용이 발생되도록 설계되어 API키를 등록하셔야 하는 경우 입니다.
.
3단계 : 기본 에러 해결
2단계 배포시, 배포가 완료되지 못하고 가끔 이렇게 에러가 발생하곤 합니다.
그러면 문제 메시지를 복사해서 Google AI Studio - Build 에 붙여넣어 물어보고 해결해달라고 요청해요.
GitHub와 Vercel 에서 배포하려니 아래와 같은 에러 메시지가 발생했습니다.해결하고 다음 진행해야 하는 방법을 비개발자 대상으로 쉽게 알려주세요.
이후 구글 빌드에서 개선된 것으로 보이면
다시 GitHub 내보내기 - Vercel 배포 단계를 다시 수행합니다.
4단계: API 키 설정 (가장 중요한 비용 이슈)
A안: “내 키로 모두 사용” (Vercel에 API 키 등록)
모든 사용자가 이미지 생성할 때 내 API 키를 사용하게 하는 경우 ( 경고! → 비용 발생 )
실행 순서
Vercel 프로젝트 → Settings → Environment Variables
Name(이름): 코드가 요구하는 이름 그대로(예:
GEMINI_API_KEY)Value(값): 내 API 키 붙여넣기 ( API키 등록 방법은 AI스튜디오빌드 2주차 영상 참고)
저장 후 Redeploy(재배포) 꼭 1번
주의 : 공개 앱에서 내 키를 쓰면 남용/과금 위험이 커서, 최소한 “사용 제한 장치”를 권장합니다.
B안: “사용자 각자 자기 키로 사용”(Vercel에 내 키 없이 운영 가능)
두 가지의 방법이 가능합니다. “앱에 API 키 입력창을 미리 만들어 두면” 누구나 자기 키로 사용할 수 있어요.
B-1) 가장 쉬운 방식(데모/소규모용): 사용자가 입력한 키로 브라우저에서 바로 호출
장점: 서버 설정이 단순, 내 키/내 과금 없음
단점: Google은 운영 환경에서 클라이언트에 키를 두는 걸 금지 수준으로 경고합니다(키가 추출될 수 있음). 사용자가 본인 키를 입력하는 구조라도, 사용자는 “웹페이지에 키를 넣는 리스크”를 감수해야 합니다.
B-2) 조금 더 안전한 방식(추천): 사용자 키를 “요청할 때만” Vercel 서버 기능에 전달해서 중계 호출
장점: 앱 화면 코드에 키가 섞여 남을 가능성을 줄이고, 서버에서만 호출하도록 만들기 쉬움
단점: 그래도 사용자가 서비스에 키를 입력하는 건 맞으니, “서버에 저장하지 않음/로그에 남기지 않음” 안내와 구현이 필요
BYOK를 할 때 권장 UX(비개발자 관점)
설정(톱니) 버튼 → “내 API 키 입력”
기본은 “저장 안 함(새로고침하면 사라짐)”
선택으로 “이 기기에서만 기억하기(로컬 저장)” 토글
화면 어딘가에 “현재: 내 키로 사용 중 / 운영자 키로 사용 중” 표시되게 설정
5단계: package.json이 없는 경우(“왜 하얀 화면이지?” 대처)
GitHub에서 package.json이 없으면 보통 둘 중 하나입니다.
정적 사이트(HTML 파일 중심)라서 빌드 없이 올려야 함
내보내기 결과가 완전한 웹앱 형태가 아니어서 Vercel이 뭘 실행할지 모름
가장 쉬운 확인
GitHub에서
index.html이 보이면: 정적 사이트로 배포 가능성이 큼index.html도 없고 구성도 애매하면: Build에서 다시 GitHub 내보내기를 시도하는 게 빠른 경우가 많습니다
정적 사이트일 때 Vercel에서 할 일
“어느 폴더를 사이트로 내보낼지”만 맞추는 게 핵심입니다(필요 시 Output Directory 설정). Vercel은 빌드 설정을 조정할 수 있습니다.
배포 후 문제 해결 3줄 체크
“키가 없다고” 나오면: Vercel 환경변수 이름이 코드와 정확히 같은지 + 재배포 했는지
“이미지 생성만 실패”하면: 키가 클라이언트로 노출되는 구조인지(운영 환경 경고)
“공개 앱인데 내 키 사용”이면: 최소한 사용 제한/모니터링을 넣기(키 보안 권장사항)
용어 정리
GitHub 저장소(repo): 내 앱 파일을 넣어두는 온라인 폴더
Vercel 배포(Deploy): 그 폴더를 웹사이트 주소로 공개하는 것
Import: 다운로드가 아니라 “연결”한다는 의미
Environment Variables(환경변수): 코드에 비밀값(API 키)을 쓰지 않고 Vercel 설정 화면에 넣는 방식(바꾸면 재배포 필요)
Redeploy(재배포): 환경변수 변경 사항을 새 배포에 반영하는 동작
BYOK: 사용자가 자기 API 키를 가져와서 쓰는 방식
4주간 수고하셨습니다. 부디 즐거운 바이브코딩 되셨기를 바랍니다.
또 자주 만나요 😄
2026 민트베어 스튜디오 / Visual Director 민트베어
https://litt.ly/mintbear
