핵심 기능 완성
AI 프롬프트: Check if all core features are implemented and working
AI-First Engineering 과정으로 돌아가기
Antigravity 다운로드
Week 2
Backend & Infrastructure
Production의 기술적 기반
서버리스로 빠르게, AWS로 확장성 있게
이번 주 핵심 포인트
15분 만에 실시간 채팅 앱을 완성하고, Firebase vs Supabase vs AWS를 실전 비교합니다
복잡한 백엔드 선택을 데이터 기반으로 의사결정하고, Production-Ready 아키텍처를 설계하는 방법을 배웁니다. AI와 함께 Security & Performance 체크리스트를 완벽하게 적용하여 실전 배포까지 준비합니다.
학습 목표
Firebase 실전 활용 - 15분 안에 실시간 채팅 앱 완성
Firestore 실시간 리스닝, Google Authentication, Security Rules를 포함한 완전한 채팅 앱을 AI와 함께 빠르게 구현합니다.
Firebase vs Supabase vs AWS - 실전 의사결정
Setup 시간, 학습 곡선, 비용을 실제 데이터로 비교하고, 프로젝트 상황별 최적의 백엔드 선택 방법을 익힙니다.
Production-Ready 아키텍처 설계
크리에이터 콘텐츠 관리 시스템을 예시로 Firebase, Supabase, AWS 각각의 아키텍처를 설계하고 비교합니다.
Security & Performance 체크리스트 마스터
'The State of Vibe Coding'의 Production 체크리스트를 적용하여 기능 완성도, 보안, 성능, 배포 준비를 완벽하게 합니다.
세부 일정
Part 1-1 (25분)
Firebase 실전 활용 - 실시간 채팅 앱
15분 안에 Firestore, Authentication, Security Rules, 오프라인 지원을 포함한 완전한 채팅 앱 구현
- Firestore 실시간 리스닝으로 메시지 동기화
- Google Authentication 통합
- Security Rules로 사용자별 접근 제어
- 오프라인 지원으로 네트워크 끊김 대응
Part 1-2 (35분)
Firebase vs Supabase vs AWS 완전 비교
실전 의사결정을 위한 3가지 백엔드 솔루션의 상세 비교
- Setup 시간: Firebase 5분 vs Supabase 10분 vs AWS 30분+
- 학습 곡선: 각 솔루션의 러닝 커브와 문서화 품질
- 비용 비교: 무료 티어부터 스케일업까지 실제 비용 분석
- Best Use Cases: 각 솔루션이 최적인 프로젝트 유형
Part 2-1 (30분)
실전 아키텍처 설계 with AI
크리에이터 콘텐츠 관리 시스템을 3가지 방식으로 설계
- 시나리오: 크리에이터가 콘텐츠를 업로드하고 관리하는 시스템
- Firebase 아키텍처: Firestore + Storage + Functions
- Supabase 아키텍처: PostgreSQL + Storage + Edge Functions
- AWS 아키텍처: RDS + S3 + Lambda + API Gateway
- AI에게 각 아키텍처 구현 요청하는 프롬프트 예시
Part 2-2 (30분)
Security & Performance 체크리스트
Production 준비를 위한 완벽한 체크리스트 적용
- 기능 완성도: 핵심 기능, 에러 처리, 사용자 피드백
- 보안: Authentication, Authorization, Data Validation
- 성능: 로딩 속도, 반응성, 최적화
- 배포 준비: 환경 변수, 모니터링, 롤백 전략
- AI에게 각 항목 구현 요청하는 실전 프롬프트
Firebase vs Supabase vs AWS 완전 비교
Firebase
Setup5분
학습 곡선낮음
Best For빠른 MVP, 실시간 앱, 모바일 우선
장점
- 가장 빠른 시작
- 실시간 기능 기본 제공
- Google Cloud 통합
단점
- NoSQL 제약
- 복잡한 쿼리 어려움
- 비용 예측 어려움
Supabase
Setup10분
학습 곡선중간
Best ForPostgreSQL 필요, 복잡한 쿼리, Open Source 선호
장점
- PostgreSQL 기반
- 복잡한 쿼리 가능
- 오픈소스
단점
- 실시간 기능 제한적
- Firebase보다 복잡
- 커뮤니티 작음
AWS
Setup30분+
학습 곡선높음
Best For대규모 엔터프라이즈, 커스텀 요구사항, 완전한 제어
장점
- 완전한 제어
- 무한 확장성
- 다양한 서비스
단점
- 가파른 학습 곡선
- 복잡한 설정
- 비용 관리 어려움
실전 아키텍처 설계
시나리오: 크리에이터 콘텐츠 관리 시스템(크리에이터가 비디오/이미지 콘텐츠 업로드, 콘텐츠 메타데이터 관리 (제목, 설명, 태그))
Firebase Authentication (Google, Email)
Firestore: users, content, metadata 컬렉션
Firebase Storage: 비디오/이미지 파일
Cloud Functions: 썸네일 생성, 메타데이터 추출
Firebase Hosting: 프론트엔드 배포
장점
- 빠른 구현 (1-2일)
- 실시간 동기화
- 오프라인 지원
단점
- 복잡한 검색 제한
- 대용량 파일 비용
GitHub 계정 및 Repository 설정
Firebase App Hosting은 GitHub와 연동하여 자동 배포를 지원합니다. GitHub 계정이 없다면 먼저 가입하고, 프로젝트용 Repository를 생성합니다.
1
GitHub 계정 생성
GitHub는 코드를 저장하고 협업하는 플랫폼입니다. Firebase App Hosting과 연동하여 자동 배포를 설정하려면 GitHub 계정이 필요합니다.
github.com 접속 → 'Sign up' 클릭
이메일, 비밀번호, 사용자명 입력
이메일 인증 코드 입력
사용자명은 GitHub 프로필 URL(github.com/사용자명)이 됩니다.
2
새 Repository 생성
Repository(레포지토리)는 프로젝트의 모든 파일과 변경 이력을 저장하는 공간입니다. 실습용 프로젝트를 위한 새 레포지토리를 만듭니다.
GitHub 로그인 후 우측 상단 '+' 버튼 클릭
'New repository' 선택
Repository name 입력 (예: week2-firebase-chat)
Description 입력 (선택사항)
Public 또는 Private 선택
'Add a README file' 체크
'Create repository' 버튼 클릭
Private은 본인만, Public은 누구나 볼 수 있습니다. API 키 등 민감정보 보호를 위해 Private 권장.
3
내 컴퓨터에 프로젝트 가져오기
GitHub에 만든 저장소를 내 컴퓨터로 다운로드합니다.
레포지토리 페이지에서 녹색 'Code' 버튼 → 주소 복사
터미널에서 git clone [주소] 입력
cd [폴더명] 으로 폴더 진입
Git이 설치되어 있어야 합니다. Mac은 기본 설치, Windows는 git-scm.com에서 설치.
Firebase 프로젝트 설정
Week 2 실습을 위한 Firebase 환경을 구성합니다. 아래 단계를 순서대로 따라하면 15분 안에 Firebase 기반 백엔드 환경이 완성됩니다.
1
Firebase 프로젝트 생성
Firebase Console에서 새 프로젝트를 생성합니다. 프로젝트 이름은 나중에 변경할 수 없으니 신중하게 선택하세요.
Firebase Console (console.firebase.google.com) 접속
'새 Firebase 프로젝트 만들기' 클릭
프로젝트 이름 입력 (예: my-chat-app-week2)
Google Analytics 연동 여부 선택 (실습에서는 비활성화해도 무방)
'계속' 버튼 클릭 후 프로젝트 생성 완료까지 대기 (약 30초)
프로젝트 ID는 전역적으로 고유해야 합니다. 이미 사용 중인 ID라면 숫자를 추가해보세요.
2
웹앱 등록
Firebase 프로젝트에 웹 애플리케이션을 등록하고, 코드에서 사용할 설정 정보를 받습니다.
프로젝트 개요 페이지에서 '앱 추가' 또는 웹 아이콘(</>) 클릭
앱 닉네임 입력 (예: my-chat-web)
'앱 등록' 버튼 클릭
firebaseConfig 코드 복사 (apiKey, authDomain, projectId 등 포함)
프로젝트의 .env 또는 config 파일에 붙여넣기
firebaseConfig는 클라이언트에서 사용되는 공개 키입니다. 보안은 Security Rules로 처리합니다.
3
Firebase Authentication 활성화 및 Google 로그인 설정
Authentication 서비스를 활성화하고 Google 로그인 방식을 설정합니다.
좌측 메뉴에서 '빌드' → 'Authentication' 클릭
'첫 번째 로그인 방법을 추가하여 Firebase 인증 시작하기' 화면에서 'Google' 클릭
'사용 설정' 토글 활성화
'프로젝트 지원 이메일' 선택 (본인 이메일 선택)
'저장' 버튼 클릭
프로젝트 지원 이메일을 반드시 설정해야 Google 로그인이 정상 작동합니다. 이 설정을 누락하면 로그인 시 오류가 발생합니다.
4
Firestore 데이터베이스 활성화
실시간 채팅 데이터를 저장할 Firestore 데이터베이스를 생성합니다.
좌측 메뉴에서 '빌드' → 'Firestore Database' 클릭
'데이터베이스 만들기' 버튼 클릭
버전 선택: 'Standard 버전' 선택 후 '다음' 클릭
데이터베이스 위치 선택: 'asia-northeast3 (Seoul)' 권장
보안 규칙 선택: '프로덕션 모드에서 시작' 선택
'만들기' 클릭하여 생성 완료
프로덕션 모드는 기본적으로 모든 읽기/쓰기가 차단됩니다. 앱이 동작하려면 Security Rules를 설정해야 합니다. 위치(region)는 한번 설정하면 변경할 수 없습니다.
5
Firebase App Hosting 활성화
Next.js 앱을 Firebase에 배포하기 위한 App Hosting을 설정합니다. Blaze 요금제로 업그레이드가 필요합니다.
좌측 메뉴에서 '빌드' → 'App Hosting' 클릭
'프로젝트 업그레이드' 버튼 클릭
'Cloud Billing 계정 만들기' 클릭하여 결제 계정 생성
Blaze 요금제 업그레이드 완료 확인
'시작하기' 버튼 클릭하여 App Hosting 설정 시작
GitHub 계정 연결 및 Repository 선택
'Finish and deploy' 클릭
App Hosting은 Blaze (종량제) 요금제가 필요합니다. $300 무료 크레딧이 제공되며, 실습 수준에서는 비용이 발생하지 않습니다.
Google Antigravity 설치
Google Antigravity는 AI 에이전트 기반 개발 플랫폼입니다. Gemini 3 Pro 모델을 사용하여 복잡한 코딩 작업을 자율적으로 처리합니다. 베타 기간 동안 무료로 무제한 사용 가능합니다.
시스템 요구사항
- macOS, Windows, 또는 Linux
- Google 계정 (Gmail)
- 인터넷 연결
1
다운로드
공식 웹사이트에서 OS에 맞는 설치 파일 다운로드
- antigravity.google/download 접속
- macOS: Homebrew로도 설치 가능 (brew install antigravity)
- Linux: apt 패키지 매니저 지원
- Windows: 설치 파일 실행
2
설치 실행
다운로드한 설치 파일을 실행합니다
- 설치 마법사 실행
- 'Add to PATH' 옵션 체크 (터미널에서 ag 명령어 사용 가능)
- 설치 완료까지 대기
3
초기 설정
첫 실행 시 기본 설정을 진행합니다
- 테마 선택
- VS Code 사용자는 VS Code Keymap 선택 가능
- Claude Code/Claude 사용자: Import from Claude Code 또는 Import from Claude
- 새 사용자: Start fresh 선택 후 Next
4
Agent Manager 설정
개발 모드를 선택합니다
- Agent-driven (Autopilot): AI가 자동으로 코드 작성 (초보자용)
- Review-driven: AI가 매번 승인 요청
- Agent-assisted: 개발자 제어 + AI 지원 (Claude Code와 유사)
5
Google 로그인
Google 계정으로 로그인하여 AI 기능 활성화
- 우측 하단 프로필 아이콘 클릭
- Google 계정으로 로그인
- Gemini 3 Pro 모델 선택
- 베타 기간 무료 크레딧 제공
주요 기능
Editor View
VS Code와 유사한 IDE 인터페이스 + 에이전트 사이드바
Manager View
여러 에이전트를 동시에 관리하는 컨트롤 센터
다중 에이전트
5개 버그를 5개 에이전트가 동시에 처리 가능
지원 AI 모델
Gemini 2.5 Pro (기본)Claude Sonnet 4.5 (Claude Code 사용자 친숙)GPT-OSS
Gemini CLI 설치
Gemini CLI는 터미널에서 직접 Gemini AI를 사용할 수 있는 오픈소스 도구입니다. 무료 티어로 60 req/min, 1,000 req/day 사용 가능합니다.
사전 요구사항
- Node.js 18 이상 설치 (v20+ 권장)
- Google 계정 (인증용)
- 인터넷 연결
Mac 설치
$ npm install -g @google/gemini-cli
# 표준 설치 방법
$ arch -arm64 npm install -g @google/gemini-cli
# Apple Silicon (M1/M2/M3) 사용 시
$ gemini --version
# 설치 확인
권한 오류 발생 시 sudo 대신 npm 설정 변경을 권장합니다. ~/.npmrc 파일에서 prefix를 변경하세요.
Windows 설치
> npm install -g @google/gemini-cli
# PowerShell 또는 Command Prompt (관리자 권한)에서 실행
> gemini --version
# 설치 확인
> where gemini
# 설치 경로 확인
실행 정책 오류 시: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 실행
설치 없이 바로 시도
전역 설치 없이 바로 실행해볼 수 있습니다.
$ npx @google/gemini-cli
첫 실행 및 인증
- 터미널에서 gemini 입력
- 테마 선택 (light/dark)
- Google 계정으로 로그인 선택
- 브라우저에서 인증 완료
Google 계정 로그인 시 60 req/min & 1,000 req/day 무료 할당량 제공
Production 체크리스트
기능 완성도
에러 처리
AI 프롬프트: Add comprehensive error handling with user-friendly messages
로딩 상태 표시
AI 프롬프트: Implement loading indicators for all async operations
사용자 피드백
AI 프롬프트: Add toast notifications for user actions (success/error)
보안
Authentication 구현
AI 프롬프트: Implement secure authentication with JWT tokens
Authorization 체크
AI 프롬프트: Add authorization checks for all protected routes
Input Validation
AI 프롬프트: Validate all user inputs on both client and server
Security Rules
AI 프롬프트: Write Firestore security rules to protect user data
성능
초기 로딩 최적화
AI 프롬프트: Optimize initial page load with code splitting
이미지 최적화
AI 프롬프트: Implement lazy loading and responsive images
API 호출 최적화
AI 프롬프트: Add caching and debouncing for API calls
번들 사이즈 최적화
AI 프롬프트: Analyze and reduce bundle size
배포 준비
환경 변수 설정
AI 프롬프트: Set up environment variables for different environments
CI/CD 파이프라인
AI 프롬프트: Configure GitHub Actions for automated deployment
모니터링 설정
AI 프롬프트: Set up error tracking with Sentry
롤백 전략
AI 프롬프트: Document rollback procedure for failed deployments
이번 주 과제
Firebase 실시간 채팅 앱을 완성하고, 자신의 프로젝트에 맞는 백엔드를 선택하여 Production-Ready 아키텍처를 설계하세요.
과제 요구사항
- Firebase 실시간 채팅 앱 완성 (Security Rules 포함)
- 3가지 백엔드 솔루션 비교표 작성 (자신의 프로젝트 맥락에서)
- 자신의 프로젝트에 맞는 아키텍처 설계 (다이어그램 포함)
- Production 체크리스트 점검 및 미비점 개선