Gemini 사이트 배포

Gemini가 만든
프로토타입 배포

Gemini가 생성한 HTML 페이지, React 프로토타입, 정적 프런트엔드 결과물을 검토, 공유, 커스텀 도메인 출시가 가능한 실제 HTTPS 사이트로 게시하세요.

절차 확인
Gemini
AI
React 프로토타입입니다. npm 패키지를 사용한다면 배포 전에 빌드하고, API key는 프런트엔드 번들에서 제외하세요.
App.tsxReact
import React from 'react';
export default function App() {
return <div className="bg-slate-950">...
}
생성된 파일을 아래에 놓으세요

어떤 Gemini 결과물이 정적 배포에 맞나요?

Gemini는 한 대화 안에서 프런트엔드 코드, 앱 로직, API 예시를 함께 만들 수 있습니다. DeployPages는 그중 정적 프런트엔드 부분을 게시하는 대상입니다.

HTML 랜딩 페이지

index.html과 참조된 CSS, JavaScript, 이미지, 폰트를 업로드하세요. 단순 생성 페이지에는 가장 빠른 경로입니다.

React 프로토타입

Gemini가 React 컴포넌트나 Vite 프로젝트를 만들었다면 빌드 후 생성된 정적 출력 폴더를 업로드하세요.

Gemini API 데모

프런트엔드는 여기서 게시하되 비밀 키가 필요한 Gemini API 호출은 백엔드나 서버리스 함수 뒤로 옮기세요.

문서와 제품 목업

Gemini 도움으로 만든 문서, 제품 페이지, 내부 데모, 검토 프로토타입의 정적 결과물을 실제 URL로 공유할 수 있습니다.

Gemini 결과물을 세 단계로 라이브 사이트로

01
01

프런트엔드 생성

Gemini에 정적 페이지, 프로토타입, 랜딩 페이지, React 인터페이스를 요청하고 필요한 파일과 의존성을 나열하게 하세요.

02
02

배포 가능한 결과물 준비

단순 HTML은 바로 저장하고, React/Vite 결과물은 업로드 전에 dist 같은 정적 폴더로 빌드하세요.

03
03

업로드하고 점검

정적 파일을 DeployPages에 올린 뒤 라이브 URL에서 route, 이미지, 콘솔 오류, 외부 API 호출을 확인하세요.

Gemini 빌드를 노출하기 전 검토

생성된 프로토타입은 준비된 것처럼 보여도 임시 문구, 깨진 자산, 클라이언트에 노출되는 안전하지 않은 비밀값을 포함할 수 있습니다.

API key 안전

비밀 Gemini API key나 서비스 인증 정보를 브라우저 코드에 넣지 마세요. 보호된 호출은 백엔드에서 처리합니다.

빌드 결과물

React 또는 Vite 프로젝트는 원본 소스나 node_modules가 아니라 빌드된 출력 폴더를 배포하세요.

자산 확인

상상으로 만든 파일명과 임시 이미지를 실제 파일이나 안정적인 호스팅 URL로 교체하세요.

브라우저 QA

배포된 사이트를 모바일과 데스크톱에서 열고 콘솔 오류, 주요 링크, 폼을 테스트하세요.

자주 생기는 Gemini 배포 문제

Fix 01

프로토타입에 Gemini API key가 필요합니다

API 호출을 백엔드나 서버리스 엔드포인트로 옮기세요. 정적 프런트엔드는 비밀 API key를 안전하게 숨길 수 없습니다.

Fix 02

React 코드가 브라우저 준비 상태가 아닙니다

의존성을 설치하고 빌드 명령을 실행하세요. 번들링 후 생성된 dist/build 폴더를 업로드합니다.

Fix 03

생성된 자산이 없습니다

Gemini에 전체 파일 트리를 요청한 뒤 참조된 이미지, 아이콘, 스타일시트, 폰트를 모두 만들거나 교체하세요.

Fix 04

폼이나 로그인 흐름이 동작하지 않습니다

정적 호스팅은 UI를 렌더링할 수 있습니다. 제출, 인증, 데이터베이스, 보호된 작업은 백엔드 서비스가 필요합니다.

Gemini 배포 FAQ

긴 multi-file Gemini 프로젝트도 업로드할 수 있나요?

네. Gemini가 여러 프런트엔드 파일을 만들었다면 단일 파일만 올리지 말고 프로젝트 구조를 유지한 전체 폴더를 업로드하세요.

생성 코드에 오류가 있으면 어떻게 하나요?

로컬에서 코드를 고치거나 Gemini에 수정 버전을 요청한 뒤 수정된 빌드를 다시 업로드하세요. DeployPages는 첫 결과물에 묶어 두지 않습니다.

어떤 프런트엔드 스택을 지원하나요?

최종 결과가 정적 빌드라면 HTML, React, Vue, 대부분의 브라우저 실행 프런트엔드 결과물을 게시할 수 있습니다.

Gemini API 앱도 여기서 배포할 수 있나요?

프런트엔드는 배포할 수 있지만 비밀 Gemini API 호출은 백엔드나 서버리스 엔드포인트 뒤에 두어야 합니다. 브라우저 코드에 비밀 키를 노출하지 마세요.

Gemini가 Next.js 앱을 만들었다면요?

서버 기능이 필요 없다면 정적 사이트로 export하고 out 디렉터리를 업로드하세요. SSR, API route, middleware는 서버 실행 환경이 필요합니다.