Luna Whale AI Web Class · Lesson 01

Firebase로 홈페이지 등록하기 Web Publish

Big Idea

AI가 만든 웹페이지는 내 컴퓨터 안에만 있으면 친구가 볼 수 없습니다. Firebase Hosting은 웹 파일을 인터넷 주소에 올려 주는 서비스입니다. 오늘은 프로젝트 만들기, 웹 앱 등록, 설정 코드 확인, Hosting 배포 흐름을 배웁니다.

Goal내 홈페이지를 공개 주소로 연결하기

OutputFirebase 프로젝트와 Hosting 주소 이해

Rule어느 프로젝트에 배포하는지 먼저 확인

Check주소, 이미지, 링크, 모바일 화면 검사

학생이 완성한 웹사이트를 클라우드로 배포해 인터넷 주소에서 확인하는 수업 이미지 — Web Publish파일 · 클라우드 · 공개 주소 · 점검

먼저 그림으로 봅니다

Firebase 배포는 명령어를 외우는 일이 아니라, 내 파일이 공개 주소로 연결되는 흐름입니다. 콘솔과 점검표를 먼저 봅니다.

Firebase 콘솔 웹 앱 등록 화면 예시 — Console프로젝트와 웹 앱 등록

홈페이지 공개 전 점검표 — Publish Check주소 · 이미지 · 링크 · 모바일

1. 홈페이지 등록이란 무엇인가요?

등록은 “내 웹 파일을 인터넷에서 볼 수 있게 주소와 연결하는 일”입니다.

내 컴퓨터

나만 볼 수 있는 파일입니다. 친구가 주소로 들어올 수 없습니다.

Firebase 프로젝트

웹 파일을 올릴 온라인 공간입니다. 프로젝트 이름과 주소가 생깁니다.

Hosting 주소

배포 뒤 생기는 공개 주소입니다. 예: 프로젝트이름.web.app

2. 먼저 Firebase 프로젝트를 만듭니다

Firebase Console에서 새 프로젝트를 만들고, 홈페이지용 이름을 정합니다.

Firebase 프로젝트 화면 예시 — Console프로젝트 개요에서 시작

교사용 설명

Firebase Console에 접속합니다.
프로젝트 추가를 누릅니다.
프로젝트 이름을 영어로 짧게 정합니다.
Google Analytics는 수업에서는 꺼도 됩니다.

3. 웹 앱을 등록합니다

프로젝트 안에서 웹 아이콘을 눌러 “이 프로젝트에 웹사이트를 붙이겠다”고 알려줍니다.

헷갈리는 말

Firebase 프로젝트를 만들었으니 홈페이지가 바로 올라간다.

정확한 말

프로젝트를 만든 뒤 웹 앱을 등록하고, Hosting 설정과 배포까지 해야 주소에서 보입니다.

4. 설정 코드는 주소표입니다

Firebase가 알려주는 firebaseConfig는 이 웹이 어느 프로젝트를 사용할지 알려 주는 표입니다.

주의할 점

firebaseConfig는 웹 앱 연결 정보입니다.
관리자 비밀번호나 서비스 계정 키와 다릅니다.
AI에게 줄 때는 민감한 관리자 키를 섞지 않습니다.

5. Hosting은 파일을 올리는 장소입니다

HTML, CSS, JS, 이미지 파일을 Firebase Hosting에 올리면 공개 주소가 생깁니다.

HTML

페이지 내용과 구조입니다.

CSS

색, 글자, 배치 규칙입니다.

JS / 이미지

탭, 버튼 행동, 사진과 아이콘입니다.

6. 터미널 흐름을 읽습니다

명령어를 외우기보다 로그인, 연결, 배포의 순서로 이해합니다.

Firebase CLI 흐름 — CLI Flowlogin · init · deploy

firebase login
firebase init hosting
firebase deploy

수업 설명: 실제 프로젝트에서는 배포 전 프로젝트 이름과 폴더 위치를 반드시 확인합니다.

7. 초기화 질문은 이렇게 이해합니다

firebase init hosting은 몇 가지 질문으로 내 폴더와 Firebase 프로젝트를 연결합니다.

프로젝트 선택

어느 Firebase 프로젝트에 올릴지 고릅니다.

public 폴더

올릴 웹 파일이 들어 있는 폴더를 말합니다. 보통 public 또는 현재 폴더입니다.

SPA 질문

처음 수업의 정적 홈페이지는 보통 No로 이해해도 됩니다.

8. 공개 전에는 꼭 검사합니다

주소가 생겼다고 끝이 아닙니다. 방문자가 볼 화면을 확인해야 합니다.

홈페이지 공개 점검표 — Checklist주소 · 이미지 · 링크 · 모바일

검사 문장

“방금 배포한 주소를 열어 봤을 때 첫 화면 제목, 이미지, 버튼 링크, 모바일 화면이 정상인지 확인하고 문제를 목록으로 적어줘.”

9. AI에게 배포 도움을 요청하는 법

AI에게 명령할 때는 현재 상황, 파일 구조, 오류 문장을 함께 줍니다.

나는 Firebase Hosting으로 정적 홈페이지를 올리고 싶어.
현재 파일은 index.html, style.css, script.js, images 폴더야.
초심자라서 한 번에 한 단계씩 설명해줘.
먼저 Firebase 프로젝트 생성, 웹 앱 등록, Hosting 초기화, 배포 전 검사 순서로 안내해줘.
오류가 생기면 오류 문장을 보고 다음 행동만 알려줘.

10. AI 코딩 도구에게 묻는 법

클로드 코드, 코덱스, 커서 같은 도구에는 “한 번에 다 해줘”보다 “3단계씩 안내하고 확인 후 다음으로”가 가장 쉽습니다.

좋은 질문의 4요소

내 수준: 초등학생도 이해할 정도
현재 상태: 파일이 있는지, Firebase 계정이 있는지
진행 방식: 한 번에 3단계씩
멈춤 규칙: 각 단계 끝나면 확인받기

나는 코딩 초보야.
AI로 만든 홈페이지를 Firebase에 등록해서 공개하고 싶어.
초등학생도 알아들을 수 있게 설명해줘.
한 번에 3단계씩만 안내하고, 내가 완료했다고 말하면 다음 3단계로 넘어가줘.
각 단계마다 “어디를 눌러야 하는지 / 무엇을 입력해야 하는지 / 끝나면 무엇을 확인해야 하는지”를 써줘.
오류가 나오면 내가 복사한 오류 문장을 보고 다음 행동 하나만 알려줘.

11. 공식 문서를 함께 봅니다

수업 자료는 공식 문서와 연결합니다. 화면이 바뀌면 공식 문서 기준으로 다시 확인합니다.

Firebase Web Setup프로젝트 생성과 웹 앱 등록, SDK 설정 공식 가이드 Hosting QuickstartFirebase Hosting 초기화와 배포 공식 가이드 Firebase CLICLI 설치, 로그인, 배포 명령 공식 문서

12. 오늘의 산출물

오늘은 완벽한 배포보다 “등록과 배포 흐름을 설명할 수 있는 것”이 목표입니다.

수업 중 정리

프로젝트 이름

웹 앱 닉네임

Hosting 주소

공개 전 점검 4가지

다음 수업 준비

내 홈페이지 주제

첫 화면 문장

필요한 이미지 목록

버튼 링크 목록

Firebase로 홈페이지 등록하기 Web Publish

먼저 그림으로 봅니다

1. 홈페이지 등록이란 무엇인가요?

내 컴퓨터

Firebase 프로젝트

Hosting 주소

2. 먼저 Firebase 프로젝트를 만듭니다

교사용 설명

3. 웹 앱을 등록합니다

4. 설정 코드는 주소표입니다

주의할 점

5. Hosting은 파일을 올리는 장소입니다

HTML

CSS

JS / 이미지

6. 터미널 흐름을 읽습니다

7. 초기화 질문은 이렇게 이해합니다

프로젝트 선택

public 폴더

SPA 질문

8. 공개 전에는 꼭 검사합니다

검사 문장

9. AI에게 배포 도움을 요청하는 법

10. AI 코딩 도구에게 묻는 법

좋은 질문의 4요소

11. 공식 문서를 함께 봅니다

12. 오늘의 산출물

수업 중 정리

다음 수업 준비

Firebase로 홈페이지 등록하기

등록은 주소와 연결하는 일입니다

큰 흐름

터미널 명령 흐름

용어 설명

공개 전 점검하기

주소가 생겨도 바로 끝내지 않습니다

확인할 것

클로드 코드·코덱스·커서에게 묻는 법

용어 설명