01
Firebase 가입 — 5단계
⏱ 10분
구글 계정 1개만 있으면 끝. 카드 등록 불필요(무료 Spark 플랜).
1. console.firebase.google.com 접속 → 구글 로그인
2. "프로젝트 추가" 클릭 → 프로젝트 이름 입력 (예: my-portfolio-2026)
3. Google Analytics는 꺼두기 (지금은 불필요, 나중에 추가 가능)
4. 좌측 메뉴 → "Build → Hosting" → "시작하기" 클릭
5. 프로젝트 ID 메모: _______________
02
CLI 설치 + 로그인
⏱ 15분
터미널에서 한 줄씩 따라 입력. Mac은 Terminal.app, Windows는 PowerShell.
TERMINAL
$ npm install -g firebase-tools
$ firebase login
$ firebase projects:list
→ 방금 만든 프로젝트가 보이면 OK
설치 확인: firebase --version → 버전 숫자가 뜨면 OK
막힘 1: "command not found" → Node.js 먼저 설치 (nodejs.org → LTS)
막힘 2: "permission denied" → Mac은 sudo 붙이거나, Windows는 관리자 권한으로 PowerShell
03
firebase init hosting — 옵션 선택 가이드
⏱ 10분
사이트 폴더(예: 내사이트/)에서 firebase init hosting 실행. 질문 5개에 답한다.
| 질문 | 추천 답 | 이유 |
|---|
| Use an existing project? |
Yes |
방금 만든 프로젝트 선택 |
| Public directory? |
. |
현재 폴더 (점 하나). public 폴더 만들기 싫으면 이게 편함 |
| Single-page app? |
No |
정적 HTML이면 No. (React/Vue면 Yes) |
| GitHub auto-deploy? |
No |
지금은 수동. 익숙해지면 Yes로 바꾸기 |
| Overwrite index.html? |
No 🔴 |
절대 Yes 누르지 말 것! 내 사이트 덮어쓰임 |
DEPLOY
$ firebase deploy
→ Hosting URL: https://<프로젝트ID>.web.app 가 뜨면 성공 🎉
04
내 도메인 — 후보 5개 + DNS 양식
⏱ 15분
기본 URL xxx.web.app도 OK. 자기 이름·작품명 도메인 사고 싶으면 아래 후보부터.
🎯 후보 도메인 — 짧고·외우기 쉽고·검색 가능
💡 등록: Namecheap(영문, 저렴) / Cloudflare(원가, 가장 싸) / 가비아(한국, 편함). .com 기준 연 $10~12.
🔗 DNS 레코드 양식 — Firebase 연결
| TYPE | HOST | VALUE | TTL |
|---|
| A | @ | 151.101.1.195 | 3600 |
| A | @ | 151.101.65.195 | 3600 |
| CNAME | www | | |
| | | |
※ 실제 값은 Firebase Console → Hosting → "도메인 추가"에서 받음. DNS 전파 최대 48시간 걸림.
05
배포 후 점검 — 라이브 확인
CHECK
1. xxx.web.app 주소로 접속 → 내 사이트가 진짜로 뜸
2. 주소창 🔒 자물쇠 아이콘 확인 → HTTPS 자동 적용
3. 휴대폰으로 같은 주소 접속 → 모바일에서도 깨지지 않음
4. 카톡·인스타·트위터에 링크 붙여넣기 → 미리보기 카드가 잘 보임
5. 친구 1명에게 보여주기 → 첫 3초 반응 메모: __________________
6. 수정 후 재배포 → firebase deploy 한 번 더 (수정 → 저장 → 배포 사이클 익히기)
7. Firebase Console → Hosting → 배포 히스토리 확인 (롤백 가능)
8. 단톡방·인스타 스토리에 "제 사이트 만들었어요" 자랑 ✨
이번 주에 나오는 용어들. 처음 듣는 게 정상입니다. 막힐 때 사전처럼 펴서 보세요.
파이어베이스Firebase
Google의 백엔드 서비스. 호스팅·DB·인증을 무료로 제공.예: 서버 빌리지 않고 사이트 운영 가능.
호스팅Hosting
사이트 파일을 인터넷에 띄우는 서비스. xxx.web.app 무료 주소 제공.예: 책을 도서관에 진열하는 것과 비슷.
명령줄CLI · Command Line Interface
검은 화면(터미널)에서 명령어로 작업하는 방식.예: GUI(마우스)의 반대, 타자만으로 조작.
터미널Terminal
Mac/Windows에서 명령어를 치는 앱. iTerm, Terminal, PowerShell.예: 개발자의 작업 콘솔.
로그인firebase login
Firebase 계정 인증 명령어. 브라우저 창이 뜨고 Google 로그인.예: 처음 1번만 하면 됨.
배포firebase deploy
사이트 파일을 Firebase에 업로드하는 명령어. 1줄로 끝.예: 코드 수정 → deploy → 전 세계에 라이브.
도메인Domain
사이트의 주소. yourname.com 형태.예: 집 주소 같은 역할.
DNSDomain Name System
도메인 ↔ IP 주소 연결 시스템. 전화번호부와 비슷.예: yourname.com → 142.250.x.x.
SSL · HTTPSSSL · HTTPS
사이트 보안 인증서. 주소창의 자물쇠 아이콘.예: Firebase는 자동으로 발급해줌.
네임칩 · 클라우드플레어Namecheap · Cloudflare
도메인을 구매하는 사이트. 연 1~2만원대.예: .com은 보통 $10~15/년.
서브도메인Subdomain
메인 도메인 앞에 붙는 보조 주소.예: blog.yourname.com · shop.yourname.com.
웹앱 도메인.web.app
Firebase가 무료로 주는 도메인. 예: yourname.web.app.예: 자기 도메인 사기 전 임시 사용.