JYP Garden

Google AI Studio + Firebase로 실제 웹앱 구축·배포

Properties1
tagsgoogle-ai-studio, firebase, hostinger, 웹앱구축, 백엔드, 인증, firestore, storage, 보안규칙, 풀스택, knowledge

10 min read

Google AI Studio + Firebase로 실제 웹앱 구축·배포

채널: Metics Media 영상 길이: 42분 원본 제목: How to Build & Launch REAL Web Apps (Google AI + Firebase) 데모 앱: ClientVault (프리랜서·디자이너용 클라이언트 파일 포털)

요약

Google-AI-Studio로 프런트엔드를 생성하고 Firebase로 실제 작동하는 백엔드(인증·데이터베이스·파일 저장소)를 연결한 뒤 Hostinger에 배포하는 풀스택 튜토리얼. yt-GafKHfVDqOk-구글AI스튜디오-웹사이트-Hostinger-배포가 배포 단계에 초점이었다면, 이 영상은 백엔드 통합과 관리자 권한 구성까지 다루어 “정적 데모”가 아닌 실사용 가능한 SaaS급 앱을 만드는 전 과정을 시연한다.

핵심 프레임워크 두 가지:

  1. AI웹앱-프롬프트-4부분-공식: 무엇/기능/디자인/백엔드 4섹션 프롬프트 작성 공식
  2. AI웹앱-백엔드-4핵심요소: 인증·DB·파일 저장소·UI 연결

핵심 아이디어

  • 모든 실사용 웹앱의 백엔드는 인증 + 데이터베이스 + 파일 저장소 + UI 연결 4요소로 환원된다 (AI웹앱-백엔드-4핵심요소)
  • AI Studio 프롬프트는 무엇/기능/디자인/백엔드 4부분으로 구조화할 때 결과 품질이 크게 향상된다 (AI웹앱-프롬프트-4부분-공식)
  • 빌드 직후 프런트엔드를 만지기 전에 Firebase 콘솔에서 백엔드 설정을 먼저 확인해야 후속 변경 시 덮어쓰기로 인한 손실을 막을 수 있음
  • Firebase 백엔드 변경 후에는 반드시 AI Studio에 “무엇을 바꿨는지” 컨텍스트를 알려줘야 코드 정합성이 유지됨
  • 앱 작동 검증은 AI웹앱-테스트수정-워크플로우 — 테스트 → 문제 기록 → 프롬프트당 한 문제씩 수정
  • 첫 번째 생성 계정을 관리자 계정으로 지정하면 관리자-대시보드-패턴의 진입점이 됨
  • Firestore 보안 규칙은 AI Studio가 자동 동기화하지만 Storage 보안 규칙은 수동 동기화 필요 — 관리자가 다른 사용자 파일을 볼 권한이 누락되기 쉬운 함정
  • Firebase Blaze 플랜은 “유료 구독”이 아닌 사용량 기반 요금제 — 무료 한도(5GB 저장, 1GB/일 다운로드, 5만 읽기/일)가 학습·개발 단계에는 충분

백엔드 구축 워크플로우 (단계별)

1단계: AI Studio 프롬프트 작성 (4부분 공식)

[무엇] 앱 이름 + 한두 문장 기능 설명
[기능] 필요한 페이지·버튼·기능 나열 + "그 외 작동에 필요한 기능 자동 추가" 라인
[디자인] 색상, 레이아웃, 전반적 느낌 (간단해도 됨)
[백엔드] 사용자 인증, 데이터베이스, 파일 저장소, 보안 규칙 명시

빌드 클릭 → AI Studio가 디자인 옵션 제시 → 선택 → Firebase 활성화 팝업 클릭 → 자동 프로비저닝

2단계: Firebase 콘솔에서 백엔드 검증 (console.firebase.google.com)

2-1. Authentication

  • Security → Authentication → Sign-in method
  • AI Studio는 Google 로그인만 자동 활성화 → 대부분의 앱에 필요한 Email/Password 수동 활성화
  • “Add new provider” → Email/Password → Enable → Save

2-2. Storage

  • Database & Storage → Storage
  • 첫 접속 시 Blaze 플랜 업그레이드 요청 (결제 계정 등록 필수)
  • “Create Cloud Billing Account” → 정보 입력 → “Start for free”
  • $10 선결제 = Google 결제 수단 확인용 + 무료 체험 크레딧으로 환급
  • 예산 설정 ($5 등 낮은 금액) = 사용량 임박 시 이메일 알림 (안전장치)
  • 기본 버킷 위치 = 무료 옵션 선택 → 프로덕션 모드 → Create

3단계: AI Studio에 백엔드 변경 알림 (정합성 확보)

Firebase 콘솔에서 다음을 설정했습니다:
1. 로그인 제공업체로 Email/Password 인증 활성화
2. 프로덕션 모드에서 기본 버킷으로 Firebase Storage 설정

앱의 파일 업로드 기능이 Firebase Storage에 완전히 연결되어 있는지,
회원가입과 로그인 모두에서 Email/Password 인증 흐름이 올바르게
작동하는지 확인해 주세요.

백엔드 변경할 때마다 이 패턴 사용 — AI Studio가 코드 정합성 검증

4단계: 앱 테스트 (4핵심요소 검증)

검증 항목방법
인증가입 → 로그아웃 → 재로그인 → 데이터 유지 확인
DB재로그인 후 이전 데이터 그대로 보이는지
파일 저장업로드 → 다운로드 → 삭제
UI 연결모든 버튼·페이지가 백엔드와 정상 통신하는지

문제 발견 시 → AI Studio 프롬프트로 한 번에 한 문제씩 수정 (AI웹앱-테스트수정-워크플로우)

5단계: 관리자 대시보드 추가

  1. Firebase 콘솔 → Authentication → Users → 첫 계정의 User ID 복사
  2. AI Studio 프롬프트 (영상 가이드 템플릿 사용) — User ID를 본인 것으로 치환
  3. AI Studio가 관리자 뷰 자동 생성 + Firestore 보안 규칙에 isAdmin == <user_id> 추가

6단계: Storage 보안 규칙 수동 동기화 (⚠️ 중요)

Firestore 규칙은 자동, Storage 규칙은 수동 동기화

  1. Firebase 콘솔 → Storage → Rules
  2. 기존 규칙 전체 삭제
  3. 가이드 제공 규칙 붙여넣기 → User ID 치환
  4. Publish

7단계: GitHub 저장 + Hostinger 배포

이후 단계는 yt-GafKHfVDqOk-구글AI스튜디오-웹사이트-Hostinger-배포와 동일:

  • AI Studio Settings → GitHub → Create repo → Stage & commit
  • Hostinger 비즈니스 플랜 → Node.js web app → Vite 프리셋
  • 환경변수 3종 등록 (Gemini_API_key, Google_API_key, Vite_Gemini_API_Key)
  • Deploy

8단계: 변경 사이클

AI Studio에서 수정 → GitHub commit → Hostinger 자동 재배포 (몇 분)

주요 사실 (Facts)

  • ClientVault 데모는 의도적으로 단순하지만 4핵심요소가 모두 필수인 앱으로 선정됨 (학습 최적화)
  • Firebase Blaze 플랜 무료 한도: 5GB 저장 / 1GB 다운로드/일 / 50,000 읽기/일
  • Hostinger 비즈니스 플랜 = Node.js 관리형 앱 5개 + GitHub 자동 연동
  • 환경변수는 같은 Gemini API 키를 3가지 변수명으로 등록 (템플릿 호환성)
  • 영상 길이 42분, 한국어 자동번역 자막 사용 (원본 영어)

트러블슈팅

문제원인해결
파일 업로드 실패프런트-Storage 연결 누락AI Studio에 “파일 업로드가 작동하지 않습니다” 프롬프트 → 자동 수정
관리자가 다른 사용자 파일을 못 봄Storage 보안 규칙 미동기화Firebase 콘솔에서 Storage Rules 수동 업데이트
관리자 대시보드에 사용자 안 보임Firestore 보안 규칙에 User ID 누락AI Studio에 “Firebase 보안 규칙이 업데이트되었는지 확인하세요” 프롬프트
배포 후 AI 기능 작동 안 함환경변수 누락Hostinger에 Gemini API 키 3변수명 등록

관련 노트

Entities

Concepts

Sources

그래프 뷰