풀어쓰는 사회학 AI

홈
가이드

Firebase Hosting 첫 배포 | 구글 계정이면 5분 — 교사용 무료 웹 호스팅 가이드

📌 이 글 요약

  • Firebase Hosting은 구글이 만든 무료 웹 호스팅 서비스입니다.
  • 구글 계정만 있으면 5분 만에 내 HTML 교구를 인터넷에 배포할 수 있어요.
  • GitHub Pages보다 빠르고, 나중에 데이터베이스(Firestore)까지 연동할 수 있습니다.
  • 배포 후 주소: https://프로젝트명.web.app

GitHub Pages랑 뭐가 다르냐고요? Firebase는 더 빠르고, 나중에 데이터베이스 연동도 됩니다.

"HTML 교구를 만들었는데, GitHub Pages 말고 다른 방법은 없나?" 이런 생각이 들었다면 정확히 맞는 글입니다. Firebase Hosting은 구글이 운영하는 무료 웹 호스팅인데, 속도가 빠르고 확장성이 좋아요. 지금은 HTML만 올리더라도, 나중에 학생 응답을 저장하거나 로그인 기능을 붙이고 싶을 때 Firebase 안에서 다 해결됩니다.

구글 계정이 있으면 바로 시작할 수 있어요. 가입 절차도 없습니다.

Firebase가 뭔가요?

Firebase는 구글이 만든 앱 개발 플랫폼입니다. 여러 기능 중 하나가 Hosting인데, 이게 바로 HTML 파일을 인터넷에 올려주는 무료 서비스예요.

  • 무료 요금제(Spark Plan)로도 충분합니다. 월 10GB 전송, 저장 1GB — 교구용으로는 넉넉해요.
  • 전 세계 CDN에서 배포되어 로딩이 매우 빠릅니다.
  • HTTPS가 자동 적용되어 학교 네트워크에서도 차단 없이 접속돼요.
  • 나중에 Firestore(데이터베이스), Authentication(로그인) 같은 기능을 추가할 수 있습니다.

한 마디로, "지금은 GitHub Pages처럼 쓰되, 나중에 더 많은 걸 할 수 있는 플랫폼"이라고 보면 됩니다.

GitHub Pages vs Firebase Hosting

항목 GitHub Pages Firebase Hosting
가격 무료 무료 (Spark Plan)
배포 속도 1~2분 ⚡ 수 초
CDN 속도 빠름 ⚡ 더 빠름 (구글 글로벌 CDN)
배포 방법 웹에서 드래그앤드롭 터미널 명령어 1줄
HTTPS 자동 자동
데이터베이스 ❌ 불가 ✅ Firestore 연동
로그인 기능 ❌ 불가 ✅ Firebase Auth
롤백(되돌리기) Git 이력으로 가능 ✅ 콘솔에서 원클릭
웹 주소 사용자명.github.io/저장소 프로젝트명.web.app

결론: 지금 당장 HTML만 올리고 싶다면 둘 다 좋습니다. 하지만 나중에 학생 데이터를 저장하거나, 로그인 기능을 붙이고 싶다면 Firebase가 훨씬 유리합니다. 같은 플랫폼 안에서 다 되거든요.

Step 1. Firebase Console 접속

별도 가입이 필요 없습니다. 구글 계정으로 바로 로그인하면 돼요.

✅ 따라하기

  1. console.firebase.google.com에 접속합니다.
  2. 구글 계정으로 로그인합니다. (학교 구글 계정도 OK)
  3. "Firebase에 오신 것을 환영합니다" 화면이 나오면 성공입니다.

💡 Tip: 학교에서 발급받은 Google Workspace 계정(@school.edu 형태)도 사용 가능합니다. 단, 관리자가 Firebase 접근을 차단해 둔 경우에는 개인 Gmail을 사용하세요.

Step 2. 프로젝트 생성

Firebase에서 "프로젝트"는 내 교구들을 담는 폴더 같은 개념입니다. 하나만 만들면 됩니다.

✅ 따라하기

  1. "프로젝트 만들기" 버튼을 클릭합니다.
  2. 프로젝트 이름을 입력합니다.
    추천: my-teaching-tools — 이 이름이 나중에 웹 주소에 들어갑니다.
  3. "Google 애널리틱스" 설정 화면이 나옵니다. 꺼도 됩니다. (교구 배포에는 필요 없어요)
    토글을 끄고 "프로젝트 만들기"를 누르면 더 빨리 생성됩니다.
  4. 잠시 기다리면 "새 프로젝트가 준비되었습니다" 메시지가 나타납니다.
  5. "계속"을 클릭하면 프로젝트 대시보드로 이동합니다.

⚠️ 프로젝트 이름 주의사항
프로젝트 이름은 영문 소문자, 숫자, 하이픈만 사용하세요.
my-teaching-tools ← 좋음
나의교구모음 ← 한글은 주소가 깨져 보일 수 있음

Step 3. Hosting 설정

프로젝트가 만들어졌으니, 그 안에서 Hosting 기능을 켜야 합니다.

✅ 따라하기

  1. 프로젝트 대시보드 좌측 메뉴에서 "빌드(Build)"를 클릭합니다.
  2. 펼쳐진 하위 메뉴에서 "Hosting"을 클릭합니다.
  3. "시작하기" 버튼을 클릭합니다.
  4. 안내 화면이 나오는데, 이건 다음 단계에서 할 거예요. 일단 확인만 하고 넘어갑니다.

Step 4. Firebase CLI 설치

Firebase는 GitHub Pages와 다르게, 터미널(명령 프롬프트)에서 명령어를 입력해 배포합니다. 그래서 Firebase CLI(명령줄 도구)를 먼저 설치해야 해요.

💡 "터미널이 뭔지 모르겠어요" — 걱정 마세요. 명령어 두 줄만 복사-붙여넣기하면 됩니다.

✅ 따라하기

  1. Node.js가 설치되어 있어야 합니다.
    아직 없다면 nodejs.org에서 LTS 버전을 다운로드해 설치하세요. (다음-다음-완료 누르면 끝)
  2. 터미널(Windows: PowerShell / Mac: Terminal)을 엽니다.
  3. 아래 명령어를 복사해서 붙여넣고 Enter를 누릅니다:
$ npm install -g firebase-tools

설치가 끝나면, 구글 계정으로 로그인합니다:

$ firebase login

브라우저가 열리면서 구글 로그인 화면이 나타납니다. 로그인하고 "허용"을 누르면 터미널에 "Success! Logged in as ..." 메시지가 나와요.

⚠️ Windows에서 오류가 나는 경우
'npm'은(는) 내부 또는 외부 명령이 아닙니다 오류가 나오면 Node.js 설치가 안 된 것입니다.
nodejs.org에서 LTS 버전을 설치한 후 터미널을 새로 열어서 다시 시도하세요.

Step 5. 배포하기

이제 진짜 마지막 단계입니다. 내 HTML 파일을 Firebase에 올립니다.

✅ 따라하기

  1. 내 교구 파일이 들어 있는 폴더로 이동합니다.
    예: 바탕화면에 my-tools 폴더를 만들고 HTML 파일을 넣어 두세요.
  2. 그 폴더에서 터미널을 열고 아래 명령어를 입력합니다:
$ firebase init hosting

몇 가지 질문이 나옵니다. 아래처럼 답하세요:

질문 답변
Use an existing project? Use an existing project 선택 → 방금 만든 프로젝트 선택
What do you want to use as your public directory? public (기본값 그대로 Enter)
Configure as a single-page app? N (No)
Set up automatic builds with GitHub? N (No)

초기화가 끝나면 public 폴더가 자동으로 생깁니다. 이 폴더 안에 내 HTML 파일을 넣으세요.

my-tools/
  ├─ firebase.json
  ├─ .firebaserc
  └─ public/
      ├─ index.html ← 기본 파일 (덮어써도 됨)
      └─ quiz-game.html ← 내 교구 파일을 여기에!

파일을 넣었으면, 배포 명령어 딱 한 줄을 입력합니다:

$ firebase deploy

몇 초 후, 터미널에 이런 메시지가 나타납니다:

✔ Deploy complete!

Hosting URL: https://my-teaching-tools.web.app

🎉 배포 완료!

이 주소를 브라우저에 입력하면 내 교구가 열립니다. 전 세계 어디서든 접속 가능합니다.

배포 결과 확인

배포한 사이트의 주소 규칙은 간단합니다:

https://프로젝트명.web.app/파일이름.html

예시:

  • 프로젝트 이름: my-teaching-tools
  • 파일 이름: quiz-game.html

→ 접속 주소: https://my-teaching-tools.web.app/quiz-game.html

public 폴더에 index.html을 넣어두면 https://my-teaching-tools.web.app만으로도 접속됩니다.

💡 알아두면 좋은 팁

firebase deploy 한 줄이면 업데이트 끝

교구를 수정했나요? public 폴더의 파일을 수정한 후 터미널에서 firebase deploy만 다시 입력하면 몇 초 만에 즉시 반영됩니다. GitHub Pages처럼 1~2분 기다릴 필요가 없어요.

  • 롤백(되돌리기): Firebase Console → Hosting에서 이전 배포 버전을 클릭하면 원클릭으로 이전 상태로 되돌릴 수 있습니다. 실수로 잘못 배포해도 안심이에요.
  • 여러 교구 올리기: public 폴더에 HTML 파일을 여러 개 넣으면 각각 다른 주소로 접속 가능합니다.
  • 커스텀 도메인: Firebase Console에서 나만의 도메인(예: tools.example.com)도 연결할 수 있어요.
  • 미리보기 배포: firebase hosting:channel:deploy preview를 사용하면 임시 주소로 먼저 확인한 후 정식 배포할 수 있습니다.

🎯 전체 흐름 정리

Step 1Firebase Console 접속 (구글 로그인)
Step 2프로젝트 생성 (my-teaching-tools)
Step 3Hosting 설정 (Build → Hosting → 시작하기)
Step 4Firebase CLI 설치 & 로그인
Step 5firebase init → public 폴더에 HTML 넣기 → firebase deploy

GitHub Pages가 "드래그앤드롭의 편리함"이라면, Firebase는 "터미널 한 줄의 속도감"입니다. 처음 설정만 해두면 이후로는 firebase deploy 한 줄이면 끝이에요. 그리고 나중에 데이터베이스, 로그인, 실시간 채팅 같은 기능이 필요해지면 — Firebase 안에서 다 해결됩니다.

다음 글에서는 Firebase에 Firestore 데이터베이스를 연결해서 학생 응답을 저장하는 방법을 다루겠습니다.

현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.