Search
Duplicate

[안티 그래비티(Antigravity)] 2.배포 with Firebase

목차(클릭하세요)
구글이 만든 안티 그래비티(=Antigravity)와 구글이 만든 파이어베이스(=FireBase)가 만나면? - 안티 그래비티(=Antigravity)가 딜러+힐러라면 - 파이어베이스(=FireBas는 서포터!!!

1. 고민_서비스 배포는 어떻게?

1-1. 하나의 생태계에서 프론트엔드와 벡엔드의 만남

안티그래비티 (아이돌): 춤추고 노래하며 실제로 퍼포먼스(기능 구현)를 보여주는 주인공.
파이어베이스 (기획사): 무대(호스팅)를 설치해주고, 팬레터(데이터)를 관리해주는 소속사.
Antigravity (UI 설계) ↓ 원클릭 연동 Firebase (데이터/인증/호스팅) ↓ 자동 최적화 Google Cloud (확장)
JSON
복사

핵심 요약표

구분
Google Antigravity (IDE)
Google Firebase (BaaS)
결합 시너지
정의
AI 에이전트 기반 자율 개발 환경
서버리스 백엔드 인프라 플랫폼
완전 자동화된 풀스택 개발
주요 역할
코드 작성, 테스트, UI 생성 (프론트)
DB, 인증, 호스팅 제공 (백엔드)
개발자 없는 1인 유니콘 기업 가능
핵심 가치
"무에서 유를 창조" (Creation)
"유를 영속적으로 관리" (Management)
아이디어에서 배포까지 10분 컷

1-2. 대표적인 배포 방법

항목
Firebase
AWS
GitHub
초기 설정
5-10분
1-2시간
DB 미지원
학습 난이도
무료 한도
충분함
복잡함
무제한(정적)
실시간 DB
내장
별도 설정
인증 시스템
원클릭
복잡함
배포 속도
1분
10-30분
1분
firebase가 유리한 이유: 트래픽이 많지 않으면 무료 호스팅 가능
22년 6월 기준, 파이어베이스는 무료호스팅으로 10GB, 일 360MB의 데이터를 전송할 수 있음

1-3.구글 파이어베이스 기반 배포 시작을 위한 사전 준비

사전 준비: firebase 가입
이후 콘솔로 이동
콘솔이란? 파이어베이스에서 제공하느 기능을 직접 설정하고 살펴보는 페이지

2. 모든걸 Agent에게 시키기

[가정] fire base를 전혀 모른다고 가정하고 안티그래비티의 Agent의 도움을 받아 배포하기

2-1. Agent에게 물어보기

이페이지를 firebase를 통해 배포하고 싶어. 순서와 설정방법을 정확하게 알려주고, 너가 해줄 수 있는 부분은 자동으로 하되 나한테 설명을 한 다음에 진행해야 해
Plain Text
복사
[결과] Firebase 배포 전체 과정

1단계: Firebase CLI 설치 확인 및 설치

Firebase CLI가 설치되어 있는지 확인하고, 없으면 설치합니다.

2단계: Firebase 로그인

Firebase 계정으로 로그인합니다.

3단계: Firebase 프로젝트 초기화

현재 디렉토리를 Firebase 호스팅 프로젝트로 설정합니다.

4단계: Firebase 설정 파일 구성

firebase.json 및 .firebaserc 파일을 생성합니다.

5단계: 배포

Firebase에 실제로 배포합니다.
[Agent와의 역할 분담]

안티그래비가 자동으로 해주는 부분

Firebase CLI 설치 확인
Firebase 설정 파일 생성 (firebase.json)
배포 명령어 실행

사용자가 직접 해야 하는 부분

 Firebase 로그인: 브라우저에서 Google 계정 인증 필요
 Firebase 프로젝트 선택: Firebase Console에서 프로젝트를 미리 만들어두거나, CLI에서 선택

2-2. Firebase CLI설치

Firebase CLI 설치를 위해서는 먼저 Node.js 설치가 완료되어야 함
Node.js 공식 홈페이지(nodejs.org)**에 접속하여, LTS (Recommended for most users) 버전을 다운로드 후 설치
Node.js가 잘 설치되었는지 터미널에서 다음 명령어2개가 잘 작동되는지 확인
# Node.js 런타임 버전 확인 node -v # 출력 예시: v20.10.0 # NPM (패키지 관리자) 버전 확인 npm -v # 출력 예시: 10.2.3
Bash
복사
[에러 발생시]
만약 powershell관련 에러가 발생한다면?
PowerShell을 관리자 권한으로 실행한 후:
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Bash
복사
RemoteSigned: 로컬에서 작성한 스크립트는 실행 가능, 인터넷에서 다운받은 스크립트는 서명 필요
안전하면서도 npm 사용에 문제없는 설정
Firebase CLI 설치 확인 명령어를 통해 설치 유무 확인
firebase -V
Bash
복사
만약, 설치가 되어있지 않다면?
터미널에 다음 명령어 입력하여 firebase관련 툴 설치하기
npm install -g firebase-tools
Plain Text
복사

2-3. Agent가 해주는 부분

Firebase 설정과 관련 셋팅파일을 만들어줌

2-4. 사용자가 셋팅할 부분

Step 1: Firebase 프로젝트 생성

2."프로젝트 추가" 클릭 후 프로젝트 이름 입력 (예: test-web-anti-image)
3.
Google Analytics 설정 (선택사항, 건너뛰어도 됨)
4.
프로젝트 ID를 메모하세요 (예: test-web-anti-image-12345)
프로젝트 개요→ 프로젝트 설정→ 일반에서 프로젝트ID확인 가능

Step 2: 프로젝트 ID 설정

1 .Firebase Console에서 확인한 프로젝트 ID를 .firebaserc 파일에 입력
현재 .firebaserc 파일의 "YOUR_PROJECT_ID_HERE" 부분을 실제 프로젝트 ID로 변경
{ "projects": { "default": "test-web-anti-image-12345" } }
JSON
복사

Step 3: Firebase 로그인

1.
터미널에서 다음 명령어를 실행하세요:
firebase login
Bash
복사
2.
브라우저가 열리면 다음 사항을 물어보면 묻지도 따지지도 말고 Y입력
옵션
입력값
기능 및 특징
추천 대상
Enable (활성화)
y (또는 엔터)
AI 기능 통합 (MCP Server) Firebase CLI가 안티그래비티와 같은 AI IDE와 소통하며, 에러 발생 시 원인을 AI가 분석해주거나 자연어 명령을 이해할 수 있게 됨.
사용자님 (AI 활용 선호) 더 똑똑한 터미널 환경을 원할 때.
Disable (비활성화)
n
기본 CLI 모드 AI 기능 없이 전통적인 명령어 입력 방식만 사용함. 데이터 전송을 원치 않을 때 선택.
보안/폐쇄망 환경 외부 통신을 최소화해야 할 때.
3.
Google 계정으로 로그인 후 허용을 눌러 최종적으로 아래 브라우저가 띄어지면 성공!

Step 4: 배포 실행

모든 설정이 완료되면, 로컬에서 먼저 배포해보기
firebase serve
Bash
복사
로컬 서버 실행 중단: ctrl +c
다음 명령어로 최종 배포
firebase deploy
Bash
복사
이런 메시지가 뜬다면 배포 완료

2-5. last_배포 완료후 호스팅 설정확인

파이어베이스의 호스팅 상태확인을 위해 호스팅 페이지로 이동
우리가 확인해야 하는 건 무엇인가?
무료 호스팅 상태인가를 봐야지!
무료 호스팅 = Spark Plan

2-6. 재배포 과정

Firebase 재배포 절차 가이드

Firebase에 배포된 웹사이트의 코드를 수정하고 다시 배포하는 과정은 매우 간단

1단계: 코드 수정

원하는 파일을 수정.

2단계: 로컬에서 테스트 (선택사항)

배포 전에 로컬에서 변경사항을 확인하고 싶다면?
위와 동일하게 터미널에서 확인 가능
firebase serve
Bash
복사
다음 명령어로 최종배포
firebase deploy
Bash
복사

3. FireBase 셋팅 후 연결하기

[가정] fire base를 어느 정도 다룰줄 안다고 가정하고, 배포 하기
특히 이번 프로젝트에서는 fireBase의 DataBase기능을 활용하기 때문에 사전 설정이 더욱 중요

3-1. 게시판 샘플 제작을 위한 프롬프트

모빈사이트에서 ‘FAQ’스타일의 게시판을 검색하여 해당 디자인을 기반으로 한 게시판을 바이브 코딩하려고 함
게시판이므로 DB기능은 필수
익명게시판의 형태이지만, 관리자는 누가 글을 썻는지 알수 있도록 셋팅하는 것이 이번 미션의 포인트
[예시 프롬프트]
firebase를 활용해 교내 익명 게시판을 만들꺼야. 1. 게시판이므로 DB기능은 필수 2.익명게시판의 형태이지만, 관리자는 누가 글을 썻는지 알수 있도록 셋팅 3. 디자인은 심플하되, 고급스럽고,트렌디 하게 4. 게시판 디자인은 아래 주소 참고 https://mobbin.com/sites/sections/3e53622a-7362-45de-9711-f7eee5ce3e8b?utm_source=copy_link&utm_medium=link&utm_campaign=section_sharing 먼저 코드작성하지 말고 1.파이어베이스 설정을 한뒤 2. 설계명세서를 나에게 제시한뒤 3. 코드 작성 시작
Plain Text
복사

3-2. Firebase 설정 가이드

A. Firebase 프로젝트 생성

2.
"프로젝트 추가" 클릭
3.프로젝트 이름 입력 (예: "school-anonymous-board")
4. .Google Analytics 설정 (선택사항) 후, 프로젝트 생성 완료

B. Firebase Authentication 설정

1.
Firebase Console → Authentication → 시작하기
2.
로그인 방법 탭에서 이메일/비밀번호 활성화
3.
활성화 후 저장버튼 클릭
4.
(선택) Google 로그인도 활성화 가능
최종적으로 로그인 제공업체로 2가지가 셋팅되어있다면 준비 완료

C. Firestore Database 설정

1.
Firebase Console → Firestore Database → 데이터베이스 만들기
2.
strandard버전 선택 후, DB저장 위치는 서울을 선택
3.
프로덕션 모드로 시작 (보안 규칙은 나중에 설정)
4.
데이터베이스 생성완료 되었다면 데이터베이스의 ‘규칙’을 클릭

D. Firebase 보안 규칙 설정 (중요!)

Firestore Database → 규칙 탭에서 다음 규칙 적용
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // 게시글 컬렉션 match /posts/{postId} { // 모든 사용자가 읽기 가능 allow read: if true; // 로그인한 사용자만 작성 가능 allow create: if request.auth != null; // 작성자 본인만 수정/삭제 가능 allow update, delete: if request.auth != null && request.auth.uid == resource.data.authorId; } // 관리자 전용 - 사용자 정보 조회 match /users/{userId} { allow read: if request.auth != null && get(/databases/$(database)/documents/admins/$(request.auth.uid)).data.isAdmin == true; allow write: if request.auth != null && request.auth.uid == userId; } // 관리자 목록 match /admins/{adminId} { allow read: if request.auth != null && request.auth.uid == adminId; allow write: if false; // 관리자는 Firebase Console에서 직접 추가 } } }
JavaScript
복사

E. 웹 앱 등록 및 구성 정보 가져오기

1.
Firebase Console → 프로젝트 설정 ( 아이콘)
2."내 앱" 섹션에서 웹 앱 추가 (</>)
3.
앱 닉네임 입력 (예: "익명게시판")
4.Firebase 구성 객체 복사 (다음과 같은 형태)

3-3.바이브 코딩 시작

SDK설정 및 구성 객체에 대한 코드를 복사하여 주면 보다 편리하게 초기 셋팅이 완료되어 있음
코드 완성도가 부족하더라도 배포후 수정한다는 마음가짐으로 다음 프롬프트를 입력
이제 firebase과 연동하여 실제 배포를 하려고 해. 단계별로 알려줘 혹시 firebase init명령어 터미널에서 실행해야 하니?
Plain Text
복사
1.
Firebase CLI 설치
2.
Firebase 로그인
3.
Firebase 프로젝트 연결
4.
firebase.json 설정 파일 준비
5.
firestore.rules 보안 규칙 준비
이후 배포를 위해
firebase deploy
Plain Text
복사
배포후 실제 사용을 해봐야 발생하는 디버깅도 있음
디버깅으로 인한 코드 수정후에 반영을 위해서는 재배포 필요
특히, 브라우저 화면 만으로는 코드 수정이 어려울 경우 개발자 도구의 콘솔 화면결과를 활용한 디버깅을 추천
2.
브라우저 콘솔 확인 (F12 → Console 탭)
[실제 배포 주소]
코드가 완성되면 이후 ‘ 관리자 계정 설정’을 추가로 진행하면됨

관리자 계정 왜 필요한가?

관리자는 일반 사용자와 달리:
모든 게시글의 실제 작성자 정보를 볼 수 있고
부적절한 게시글을 삭제할 수 있고
공지사항을 지정할 수 있기에
이를 위해 Firestore에 "이 사람은 관리자다"라는 정보를 저장해야 함!

3-4. 관리자 계정 설정 프로세스(바이브 코딩 완료후 가장 마지막에 진행)

파이어베이스의 ‘authentication’에서 사용자 계정 확인 삭제 및 관리자 계정 설정을 위한 UDI 설정 가능

1단계: 관리자 계정 회원가입이 끝났다면

2단계: 관리자 UID 확인

Firebase Console에서:
1.
Authentication 메뉴 클릭
2.
Users 탭에서 방금 가입한 계정 찾기
3.
사용자 UID 복사
예시: 이메일: admin@school.com UID: kR7mP9nQ2XYz8vB4cD1eF6gH
Plain Text
복사

3단계: Firestore에 관리자 컬렉션 생성

1.
데이터베이스 화면에서 "+ 컬렉션 시작" 버튼 클릭
컬렉션의 이름은 ‘ admins’로 설정
2.
컬렉션 ID 입력 후 다음 클릭
3.
첫 번째 문서 추가:
문서 ID: (2단계에서 복사한 UID 붙여넣기)
(예시)kR7mP9nQ2XYz8vB4cD1eF6gH
Plain Text
복사
필드 추가:
필드 이름
유형
isAdmin
boolean
true
email
string
admin@school.com
이런 형태로 컬렉션을 작성하고 저장 클릭
4.
최종적으로 관리자 계정과 일반계정이 잘 작동하는지 체크
[일반 계정]게시글에 대한 삭제 권한이 없음
[관리자 계정]게시그렝 대한 삭제 권한 존재
만약 오류가 발생했다면 데이터베이스의 컬렉션 이름을 다시 확인해보자~
컬렉션의 이름이 admin이 아니라 admins