WEEK 03 · 2026 · CLASS II

내 사이트가
인터넷에 산다

지난주 만든 로컬 사이트를 — 오늘은 인터넷에 띄웁니다. Firebase Hosting 무료 배포 + 자기 도메인 연결 + SNS에 첫 URL 공유까지. 끝나는 순간 친구가 휴대폰으로 내 사이트를 본다.

Duration120 minutes

ToolFirebase + Namecheap

Output진짜 URL이 박힌 라이브 사이트

Phase자기 사이트 출시 (3/3)

02 / Learning Goals⏱ 5분

오늘의 학습 목표

1

Firebase 가입 + 프로젝트 생성

Google 계정으로 Firebase Console 접속, 내 사이트 전용 프로젝트 1개 만들기.

2

Firebase CLI 설치 + 로그인

터미널에서 명령어 한 줄로 deploy 가능한 환경 셋업. npm·firebase login.

3

첫 deploy → xxx.web.app

firebase init + deploy 한 번이면 내 사이트가 전세계에 공개되는 진짜 URL을 받는다.

4

도메인 연결 + SNS 공유

Namecheap·Cloudflare에서 도메인 구매 → DNS 연결 → SSL 자동 발급 → 카톡에 자랑.

03 / Concept⏱ 10분

localhost → 진짜 URL

지난주까지의 사이트는 — 내 컴퓨터에서만 보임. 더블클릭해서 Chrome에서 열린 파일은 친구에게 보낼 수 없습니다. 오늘은 그 파일을 Firebase 서버에 올려서 누구나 URL로 접근하게 만듭니다.

💻

내 컴퓨터

index.html
로컬 파일

→

🔥

Firebase 서버

deploy 1번
전세계 CDN

=

🌐

전세계 접속

xxx.web.app
+ 내 도메인

Firebase Hosting은 무료 (월 10GB 전송 / 1GB 저장). 학생 사이트는 평생 무료 한도 안. SSL(자물쇠)도 자동 발급. 도메인만 본인 카드로 ($10/년).

04 / Deploy Pattern⏱ 15분

배포 — 한꺼번에 vs 단계별

❌ 한꺼번에 배포하기

"Firebase 가입하고
도메인 사고 DNS 설정하고
SSL 발급받고 한 번에 다."

왜 안 되나? 어디서 막혔는지 추적 불가. DNS 전파 24시간 기다리다가 포기. 결과: 사이트도 안 뜨고, 도메인 돈만 날림.

✓ 단계별 배포 + 검증

1단계: Firebase 가입 → 프로젝트
2단계: CLI 설치 → login 성공
3단계: deploy → xxx.web.app 작동
4단계: 도메인 구매 → DNS 입력
5단계: SSL 자동 → SNS 공유

왜 좋나? 각 단계 끝마다 작동 확인 → 막히면 그 단계만 고침. 결과: 2시간 안에 xxx.web.app 100% 보장, 도메인은 한 명씩 도움.

💡 오늘의 비법: "xxx.web.app 먼저, 도메인은 나중" — 무료 URL부터 띄우고 → 그게 작동하면 → 그때 도메인 사도 늦지 않음.

05 / Live Build · Step 1⏱ 10분

Step 1 — Firebase 가입 + 프로젝트 생성

Google 계정 하나면 끝. console.firebase.google.com 들어가서 새 프로젝트 만들기. 결제 카드 등록 X (무료 Spark 플랜).

1

Firebase Console 접속 → 새 프로젝트

// 브라우저에서 1. console.firebase.google.com 접속 2. Google 계정으로 로그인 (지난주 W2의 Cursor 계정과 같은 게 편함) 3. "프로젝트 추가" 클릭 4. 프로젝트 이름: [내이름]-portfolio (예: minji-portfolio) → 자동으로 ID가 따라옴 (minji-portfolio-a3b21 같은 것) 5. Google Analytics — "사용 안 함" 선택 (지금은 필요 없음) 6. "프로젝트 만들기" → 30초 기다림 → 완료

💡

Hosting 메뉴 활성화

// 프로젝트 만든 후 1. 왼쪽 메뉴에서 "빌드" → "Hosting" 클릭 2. "시작하기" 버튼 클릭 3. 안내 페이지 4단계 — 일단 그냥 "다음" 4번 (CLI는 다음 슬라이드에서) 4. 기본 도메인이 보임 — 예: minji-portfolio.web.app → 이 URL이 오늘 끝에 라이브로 뜰 주소!

🎙

멘토 멘트 "카드 등록 안 시켜요. 무료 Spark 플랜은 카드 없이 가능. 학생 사이트는 평생 무료 한도 안. 만약 카드 등록하라고 나오면 — 잘못 들어간 것. '시작하기' 다시 클릭."

🔥

학생 액션 (8분) Firebase Console 접속 → 새 프로젝트 만들기 → Hosting 메뉴 활성화 → 내 xxx.web.app 주소 종이에 적어두기. 멘토가 한 명씩 화면 확인.

05 / Live Build · Step 2⏱ 10분

Step 2 — Firebase CLI 설치 + login

터미널 명령어 한 줄로 사이트를 배포할 수 있게 만드는 도구. Node.js → firebase-tools → firebase login 3단계.

2

터미널 열고 명령어 3줄 (Cursor 내장 터미널 OK)

// Cursor에서 Terminal → New Terminal (Ctrl+`) // ① Node.js 설치 확인 (없으면 nodejs.org 가서 설치) node --version // → v18.x.x 같이 나오면 OK. 안 나오면 nodejs.org → LTS 다운로드 // ② Firebase CLI 전역 설치 (1번만) npm install -g firebase-tools // → 1-2분 소요. 마지막에 "added 600+ packages" 뜨면 성공 // ③ Firebase 로그인 — 브라우저가 자동으로 열림 firebase login // → 브라우저에서 Google 계정 선택 → "허용" → 터미널에 "Success" 뜸

⚠️

자주 막히는 부분

// 🚫 "permission denied" 에러가 뜨면 (Mac) sudo npm install -g firebase-tools // → 비번 입력 // 🚫 Windows에서 npm 명령 없음 → Node.js 설치 후 터미널 완전히 껐다가 다시 켜기 // 🚫 firebase login에서 브라우저 안 열림 firebase login --no-localhost // → URL 직접 복사 붙여넣기

🎙

멘토 멘트 "터미널이 처음이라 검은 화면 무서울 수 있어요. 그냥 명령어 한 줄 한 줄 복사 붙여넣기예요. 멘트 한 줄당 엔터 한 번. 막히면 화면 그대로 두고 손 들어주세요."

⌨️

학생 액션 (8분) Cursor 터미널 열기 → node 버전 확인 → firebase-tools 설치 → firebase login. "Success" 뜨면 짝과 하이파이브. 막히면 멘토 호출.

05 / Live Build · Step 3⏱ 15분

Step 3 — firebase init + 첫 deploy

지난주 만든 폴더에서 명령어 2개. init으로 설정 파일 만들고, deploy로 한 방에 올림. 이 순간 내 사이트가 인터넷에 산다.

3

내사이트 폴더에서 init

// Cursor에서 W2 "내사이트" 폴더가 열려있는지 확인 // 터미널에서: cd ~/Desktop/내사이트 // 폴더로 이동 (이미 있으면 생략) firebase init hosting // 질문에 답하기 (↑↓ 화살표로 선택, Enter) ? Project setup → Use an existing project ? Select project → minji-portfolio-a3b21 (Step 1에서 만든 것) ? Public directory → . // 점 하나! (현재 폴더) ? Single-page app → No ? GitHub deploy → No ? Overwrite index.html? → N // 🔴 절대 Yes 누르지 말 것!

🚀

첫 deploy — 한 줄로 인터넷에 띄우기

firebase deploy // → 30초~1분 진행 후 마지막에: ✔ Deploy complete! Hosting URL: https://minji-portfolio-a3b21.web.app // 🎉 그 URL Cmd+클릭 → 브라우저 열림 → 내 사이트가 인터넷에 산다! // 친구한테 카톡으로 그 URL 보내면 — 친구 폰에서도 보임!

🎙

멘토 멘트 "Overwrite index.html을 Yes 누르면 지난주 만든 사이트가 다 사라져요! 무조건 N. 그리고 'Deploy complete!' 뜨는 순간이 인생 첫 라이브 사이트 순간이에요. 박수 한 번 치고 가요."

🚀

학생 액션 (12분) firebase init hosting → 옵션 답하기 (특히 Overwrite N!) → firebase deploy → 받은 URL을 휴대폰에 카톡으로 보내서 확인. 작동 안 하면 멘토 호출.

05 / Live Build · Step 4⏱ 15분

Step 4 — 도메인 구매 + DNS 연결

xxx.web.app는 좋지만 내 이름이 들어간 도메인이 갖고 싶음. Namecheap·Cloudflare·가비아 셋 중 하나에서 $10/년 카드 결제. 도메인 안 사도 OK (이번 주 선택).

4

도메인 사기 — Namecheap (해외카드 OK)

// 1. namecheap.com 접속 2. 검색창에 후보 입력: minjikim.com minji.dev minji.studio 3. 비어있는 것 골라 "Add to cart" → 결제 ($10-15/년) 4. 결제 후 → Dashboard → "Domain List" → "Manage" 버튼 // 또는 한국: gabia.com (한국 결제 가능) // 또는 무료 옵션: freenom.com (.tk·.ml — 추천 X, 자주 차단됨) // 또는 Cloudflare Registrar (마진 0, 가장 저렴, 카드 필요)

4b

Firebase에 도메인 연결

// 1. Firebase Console → Hosting → "도메인 연결" 클릭 2. 도메인 입력: minjikim.com (사이트 메인 도메인) 3. Firebase가 A 레코드 2개 알려줌 (151.x.x.x 같은 IP) // 4. Namecheap으로 돌아가서 → "Advanced DNS" 5. "Add New Record" → A Record 선택 Host: @ Value: [Firebase IP 1] 6. 한 번 더 → A Record Host: @ Value: [Firebase IP 2] 7. 저장 → Firebase로 가서 "확인" 버튼 8. DNS 전파 10분-24시간 기다림

🎙

멘토 멘트 "도메인은 선택이에요. 무료 xxx.web.app으로도 친구한테 자랑 가능. 사이트가 마음에 들어서 '진짜 내 거다' 싶을 때 그때 사도 늦지 않아요. 오늘 안 사도 절대 OK."

🌍

학생 액션 (12분) 도메인 살 사람만 — 후보 검색·구매·DNS 입력까지. 안 사는 사람은 xxx.web.app URL을 휴대폰에 카톡으로 친구한테 보내서 작동 확인 → Step 5 미리.

05 / Live Build · Step 5⏱ 10분

Step 5 — SSL 확인 + SNS 공유

자물쇠(🔒) 자동 발급 확인 + 인스타·카톡에 첫 URL 자랑. 오늘의 진짜 보상 — 누군가 내 사이트에 들어와서 친구가 카톡으로 "헐 진짜?" 답이 옴.

5a

SSL 자동 발급 확인 (도메인 산 사람)

// DNS 전파된 후 (10분~24시간) 1. Firebase Console → Hosting → 도메인 옆 상태 확인 "연결됨" 초록 체크 → SSL 발급 시작 2. 15분-2시간 더 기다림 (SSL Let's Encrypt 자동 발급) 3. 브라우저에서 https://minjikim.com 접속 → 주소창 왼쪽에 🔒 자물쇠 떠야 정상 // 🚫 자물쇠 X자로 뜨면 → DNS 더 기다리거나 한 번 더 deploy

📱

SNS 공유 + 모바일 확인

// 1. 휴대폰으로 URL 직접 입력 → minjikim.com 또는 minji-portfolio.web.app → 모바일 화면에서 깨지지 않는지 확인 // 2. 카톡 단톡방·인스타 스토리에 URL 공유 → 카톡 미리보기가 뜨면 더 좋음 (Open Graph) → "내가 만든 첫 사이트! 봐줘 🙏" 한 줄 // 3. 부모님·친구한테 보내기 (반응이 진짜 보상) → 댓글·좋아요 카운트 캡처해서 다음 주 자랑 OK

✓

최종 점검 5가지

□ xxx.web.app URL 휴대폰에서 작동 □ 도메인 산 사람 → 자물쇠 🔒 떠 있음 □ 모바일에서 깨지지 않음 □ 카톡·인스타에 URL 공유 완료 □ 친구 1명 이상 "봤어" 답변 받음

🎙

오늘의 마무리 "오늘이 12주 코스 중 가장 큰 분기점이에요. 이제 '내 사이트가 진짜 인터넷에 있다'는 게 사실. 다음 주부터는 디자인·인터랙션 다듬기 시작. 오늘 받은 URL 즐겨찾기 해두세요."

📱

학생 액션 (8분) 모바일에서 URL 직접 입력 → 작동 확인 → 카톡 단톡방·인스타 스토리에 URL 공유 → 친구 반응 캡처. 멘토는 한 명씩 자랑 들어주기.

10 / Checkpoint⏱ 5분

배포 점검 5가지

✅오늘 잘 됐다면

Firebase 프로젝트 1개 생성 + Hosting 활성화
firebase login "Success" 메시지 확인
xxx.web.app URL 모바일에서 작동 확인
도메인 연결 + 🔒 SSL 발급 완료 (산 사람만)
SNS 공유 + 친구 1명 이상 "봤어" 답변

⚠️자주 막히는 부분

permission denied → Mac: sudo npm / Win: 관리자 권한 터미널
Overwrite index.html? Yes 누름 → W2 사이트 복구 (지난주 코드 다시 붙여넣기)
"Deploy complete" 떴는데 사이트 빈 화면 → Public directory를 dot(.) 대신 public으로 했음. firebase init 다시
DNS 입력했는데 자물쇠 X자 → 24시간 기다리기. 안 되면 Cloudflare로 DNS 옮기기
도메인 너무 비쌈 ($50+) → 다른 확장자 (.dev .studio .me 등)

11 / Challenge⏱ 10분

배포 깊이 도전

🔀

서브도메인 분기 — blog.minjikim.com, works.minjikim.com 등으로 영역별 사이트 분리. Firebase Hosting site 추가.

난이도 ★

⚖️

GitHub Pages와 비교 — 같은 사이트를 GitHub repo에 올려 Pages로도 배포해보기. Firebase와 속도·기능 차이 체험.

난이도 ★★

▲

Vercel·Netlify 도전 — git push만으로 자동 배포되는 워크플로우. CI/CD 맛보기. Next.js 같은 프레임워크 사용 시 필수.

난이도 ★★★

12 / Student Gallery⏱ 7분

작년 친구들 작품

🎨

결과물 1

🌈

결과물 2

✨

결과물 3

🎮

결과물 4

🚀

결과물 5

🎯

결과물 6

📌 첫 학기 종료 후 학생 결과물 사진을 여기에 채울 예정입니다.

13 / Next Week⏱ 5분

다음 시간 예고

WEEK 04 · COMING UP

디자인 시스템 +
인터랙션 다듬기

이제 사이트가 인터넷에 있으니 — 진짜 내 톤으로 다듬을 차례. 색·폰트·여백·애니메이션을 한 시스템으로 묶고, 스크롤·호버 인터랙션으로 살아있는 사이트로.

PREPARE · 다음 주 준비물

오늘 받은 xxx.web.app URL (이걸 다듬을 거예요)
좋아하는 사이트 3개 스크린샷 (디자인 분석용)
메인 컬러 후보 3-5개 (인스타·핀터레스트에서 무드 모으기)
구글에서 좋아하는 한글 폰트 1-2개 미리 살펴보기 (Pretendard·Gmarket Sans 등)
친구 반응 캡처 — 다음 주 첫 5분 자랑 타임!

내 사이트가인터넷에 산다