배포 대백과

도키피디아 v1.0

Where It Goes Live

다 만들었습니다.
이제 어디에 올릴까요.

내 컴퓨터에서는 잘 돌아갑니다. 그런데 동료 교사에게 주소 하나로 보여 주려면 어딘가에 올려야 합니다. 올리는 곳은 공짜가 많지만 공짜의 조건이 저마다 다릅니다. 어떤 곳은 한도를 넘으면 사이트를 멈추고, 어떤 곳은 카드에서 돈을 빼 갑니다.

기준일 2026-08-28 · 요금·한도는 공식 문서 조회값 · 무료 요금제 기준

00 — Before You Read

배포는 파일을 남의 컴퓨터에 두는 일입니다

거창한 말처럼 들리지만 하는 일은 단순합니다. 내 컴퓨터에 있던 파일을 항상 켜져 있는 남의 컴퓨터에 복사해 두고 누구나 주소로 찾아올 수 있게 여는 것입니다.

npm run dev로 띄운 localhost:3000은 내 컴퓨터 안에서만 보입니다. 같은 학교 선생님도 못 봅니다. 노트북을 닫으면 사라집니다. 배포는 그 파일을 24시간 켜져 있는 회사 서버에 올려 내주소.vercel.app 같은 주소를 받는 일입니다.

먼저 짚을 다섯 낱말

정적 사이트 static site

미리 만들어 둔 HTML·CSS·이미지를 그대로 내려 주는 사이트입니다. 방문자가 누구든 같은 파일을 받습니다. 대백과 한 장짜리 문서, 학급 안내 페이지가 여기 해당합니다. 가장 싸고 가장 안 터집니다.

빌드 build

내가 쓴 소스를 브라우저가 읽을 수 있는 형태로 바꾸는 과정입니다. npm run build가 그것입니다. 결과물이 dist나 build 폴더에 쌓입니다. 배포되는 건 소스가 아니라 이 결과물입니다.

서버리스 함수 serverless function

서버 한 대를 통째로 빌리지 않고 함수 하나만 올려 두는 방식입니다. 요청이 올 때만 잠깐 깨어나 답하고 잠듭니다. API 키를 숨겨야 할 때 여기에 둡니다. 이 문서에서 몇 번이고 다시 나옵니다.

미리보기 배포 preview deployment

고친 내용을 본 주소에 반영하기 전에, 임시 주소로 먼저 띄워 확인하는 기능입니다. 실수를 본 사이트에 그대로 밀어 넣지 않게 막아 줍니다. 요즘은 대부분 무료로 줍니다.

환경변수 environment variable

소스에 직접 적기 곤란한 값을 밖에 빼 두고 이름으로 불러 쓰는 장치입니다. .env 파일이나 배포 사이트 설정 화면에 넣습니다. 이름과 달리 자동으로 숨겨 주지는 않습니다. 10장에서 자세히 다룹니다.

이 문서가 답하는 것 ① 배포 사이트마다 뭐가 다른가 ② 내 API 키는 어디에 두어야 안 새는가 ③ 무료 한도를 넘으면 정지인가 청구인가 ④ 학생 자료가 들어간 것도 올려도 되는가 ⑤ 나는 결국 어디에 올려야 하는가.
다루지 않는 것 도메인 구입 절차와 DNS 설정, 각 사이트의 클릭 순서는 다루지 않습니다. 화면은 자주 바뀌고 공식 안내가 더 정확합니다. 이 문서는 고르는 기준에 집중합니다.

01 — Four Ways

네 갈래의 올리기

사이트 이름부터 외우면 헷갈립니다. 어떻게 올라가는가로 먼저 나누면 나머지가 정리됩니다. 같은 회사가 두 갈래를 다 제공하기도 합니다.

Git Connected

깃 연동형

깃허브 저장소를 한 번 연결해 두면 그다음부터는 푸시할 때마다 알아서 빌드하고 올립니다. 손댈 일이 없습니다.

Vercel · Netlify · Cloudflare · GitHub Pages · Render

Command Line

명령어형

내 컴퓨터에서 명령어 한 줄을 칩니다. 그 순간의 폴더 내용이 그대로 올라갑니다. 저장소가 없어도 됩니다.

Firebase Hosting · Surge

Drag and Drop

끌어다 놓기형

빌드된 폴더를 브라우저 화면에 끌어다 놓으면 끝납니다. 계정도 없이 되는 곳이 있습니다. 한 번 보여 주고 말 때 씁니다.

Netlify Drop · Vercel 웹 업로드

Inside Google

구글 계정형

구글 계정 안에서 만들고 그 안에서 공개합니다. 파일이 밖으로 나가지 않습니다. 접근 범위를 계정 단위로 잠글 수 있습니다.

Apps Script 웹앱

교사 입장에서 갈리는 지점

깃 연동형은 고치는 일이 잦을 때 훨씬 편합니다. 수업 자료를 계속 손보면 여기가 맞습니다. 반대로 한 번 올리고 끝날 자료라면 저장소를 만드는 수고가 아깝습니다. 명령어형이나 끌어다 놓기형이 빠릅니다.

구글 계정형은 성격이 다릅니다. 공개하지 않으면서 나눠 주고 싶을 때 쓰는 거의 유일한 무료 수단입니다. 학생 개별 열람 페이지처럼 아무나 보면 안 되는 것이 여기 해당합니다.

한 가지 정정 Firestore는 배포하는 곳이 아니라 데이터베이스입니다. 파이어베이스에서 화면을 올리는 것은 Firebase Hosting이고 데이터를 담아 두는 것이 Firestore와 Realtime Database입니다. 이 문서는 앞의 것을 7장, 뒤의 것을 8장에서 나눠 다룹니다.

02 — Head to Head

정면 비교표

느낌이 아니라 공식 문서로 확인한 것만 담았습니다. 전부 무료 요금제 기준이고 조회일 2026-08-28입니다. 표가 화면보다 넓으면 옆으로 밀어 보세요.

표 A — 어떻게 올라가나

따져볼 것 Vercel Netlify Cloudflare GitHub Pages Firebase Hosting
푸시하면 자동 배포 됨됨됨됨 안 됨
명령어로 직접 올림
미리보기 배포 브랜치·PR마다Deploy Preview개수 제한 없음 없음미리보기 채널
명령어로 만듦
깃 없이 올리기 웹에서 업로드끌어다 놓기Wrangler 명령 저장소가 곧 배포명령어 한 줄
빌드를 대신 해 주나 해 줌해 줌
운영 배포 1회 15크레딧		 해 줌
월 500회		 Actions로 내 컴퓨터에서
빌드해 올림
서버 기능
(키를 숨길 자리)		 FunctionsFunctionsWorkers 없음 Hosting만으로는 없음
App Hosting은 Blaze 필요
커스텀 도메인·HTTPS 무료무료무료
100개까지		 무료무료
되돌리기 직전 1개만
Pro는 임의 선택		 배포 이력에서배포 이력에서 커밋을 되돌려
다시 배포		릴리스 이력에서

← 옆으로 밀 수 있습니다

표 B — 환경변수·보안·요금

따져볼 것 Vercel Netlify Cloudflare GitHub Pages Firebase Hosting
환경변수 설정 화면 있음있음Workers에 있음 없음
Actions 시크릿은 별개		 없음
정적 파일만 올라감
환경별로 다른 값 운영·미리보기·개발
브랜치별 덮어쓰기		 운영·미리보기·브랜치·로컬 Worker 단위로 나눔 해당 없음해당 없음
비밀값 취급 암호화 저장 비밀값 표시 가능
범위 지정은 Pro 이상		 넣고 나면 다시 못 읽음 해당 없음해당 없음
무료로 비공개 배포 미리보기만 잠김
운영 도메인은 유료		 비밀번호 보호는
Pro 이상		 Access로 로그인
무료 요금제 있음		 Enterprise Cloud만 없음
무료 한도 전송 100GB
함수 호출 100만
CPU 4시간		 월 300크레딧
대역폭 20크레딧/GB		 정적 파일 요청은
무료·무제한
Workers는 10만 요청/일		 1GB·월 100GB
둘 다 여유 있는 기준		 저장 10GB
전송 360MB/일
한도를 넘으면 배포가 멈춤 멈춤
무료는 자동 충전 없음		 정적은 과금 없음 깃허브가 연락 Blaze면 청구
전송 $0.15/GB

← 옆으로 밀 수 있습니다

무료 요금제의 상업적 사용 Vercel Hobby는 비상업 개인 용도로만 쓸 수 있습니다. 공식 문서가 이렇게 적었습니다. "Hobby teams are restricted to non-commercial personal use only." 게다가 상업적 사용의 범위가 넓습니다. 결제 받기, 상품·서비스 광고, 사이트 제작이나 호스팅의 대가를 받는 것, 광고 게재, 그리고 후원 요청까지 포함합니다. 연수 강사료를 받고 만든 자료를 여기 올리는 것이 걸릴 수 있으니 애매하면 Cloudflare나 GitHub Pages를 쓰는 편이 마음 편합니다. 2026-08-28 조회
표를 줄이면 키를 숨겨야 하면 Vercel·Netlify·Cloudflare. 많이 볼까 걱정되면 Cloudflare. 비공개로 두고 싶으면 Cloudflare Access. 한 장짜리 문서면 GitHub Pages로 충분합니다. Firebase Hosting은 전송 한도가 하루 360MB라 자료를 널리 뿌리는 용도에는 좁습니다.

03 — Vercel

Vercel Next.js를 만든 회사

Next.js를 만든 회사가 운영합니다. Next.js로 만든 것을 올릴 거라면 설정이 거의 필요 없습니다. 대신 무료 요금제에 비상업 조건이 붙습니다.

한 줄 정체깃허브를 연결하면 알아서 빌드하고 올려 주는 곳. 프레임워크를 자동으로 알아봅니다.
첫 배포저장소 연결 → 프레임워크 자동 인식 → 푸시할 때마다 배포. 클릭 세 번이면 끝납니다.
무료로 어디까지전송 100GB · 함수 호출 100만 · CPU 4시간 · 이미지 변환 5천 회.
수업 자료 규모면 넘길 일이 드뭅니다.
환경변수운영·미리보기·개발을 나눠 넣습니다. 브랜치마다 다른 값을 줄 수도 있습니다. vercel env pull로 내 컴퓨터에 받아 옵니다.
비공개로 두기무료로는 미리보기 주소만 잠깁니다. 본 주소는 열려 있습니다. 비밀번호를 걸려면 Enterprise이거나 Pro에 월 $150 기능을 더해야 합니다.
되돌리기무료 요금제는 직전 배포 하나로만 돌아갑니다. 여러 단계 거슬러 가려면 Pro가 필요합니다.

가장 자주 걸리는 것

무료 요금제의 상업적 사용 금지가 생각보다 넓습니다. 공식 문서는 상업적 사용을 "프로젝트 제작에 관여한 누구든 금전적 이득을 얻는 배포"로 정의합니다. 광고를 달거나 결제를 받는 것뿐 아니라 사이트를 만들어 주고 돈을 받는 경우, 그리고 후원을 요청하는 경우까지 들어갑니다. 학교 안내 페이지나 수업 자료는 대개 문제가 없지만, 외부 강의료를 받고 만든 결과물을 올린다면 한 번 생각해 볼 지점입니다.

또 하나. 환경변수는 새로 배포할 때부터 적용됩니다. 값을 고쳐도 이미 올라간 배포는 그대로입니다. 키를 바꿨는데 안 바뀐다면 다시 배포했는지부터 확인하세요.

이럴 때 고릅니다
  • Next.js로 만들었을 때. 설정이 거의 없습니다
  • 브랜치별 미리보기를 자주 볼 때
  • API 키를 서버 쪽에 숨겨야 할 때
이럴 땐 피합니다
  • 대가를 받고 만든 결과물을 올릴 때
  • 본 주소를 비공개로 잠가야 할 때
  • 방문이 갑자기 몰릴 수 있는 자료일 때

근거 — Fair Use Guidelines · Environment variables · Deployment Protection · Instant Rollback 2026-08-28 조회

04 — Netlify

Netlify 끌어다 놓기가 되는 곳

빌드된 폴더를 브라우저에 끌어다 놓기만 해도 주소가 나옵니다. 입문자에게 가장 친절합니다. 다만 요금 계산 방식이 1년 사이에 두 번 바뀌었습니다.

한 줄 정체깃 연동과 끌어다 놓기를 둘 다 주는 곳. 폼·함수 같은 부가 기능이 많습니다.
첫 배포저장소를 연결하거나 dist 폴더를 화면에 끌어다 놓습니다. 계정 없이도 임시 주소가 나옵니다.
무료로 어디까지월 300크레딧. 운영 배포 1회에 15, 대역폭 1GB에 20, 웹 요청 1만 건에 2가 나갑니다.
환경변수운영·미리보기·브랜치·로컬을 나눠 넣습니다. 비밀값으로 표시할 수 있지만 적용 범위 지정과 팀 공유는 Pro 이상입니다.
비공개로 두기대시보드의 비밀번호 보호는 Pro 이상입니다. 무료로 하려면 _headers 파일에 기본 인증을 직접 적어야 합니다.
되돌리기배포 이력이 남습니다. 예전 배포 주소는 내용이 바뀌지 않으므로 그대로 다시 살릴 수 있습니다.

크레딧이라는 셈법

예전에는 대역폭 100GB, 빌드 300분처럼 항목별로 한도가 있었습니다. 지금은 300크레딧 하나로 묶여 있고 무엇을 쓰든 거기서 깎입니다. 그래서 같은 300이라도 쓰는 방식에 따라 남는 양이 크게 다릅니다.

대역폭만 쓴다고 치면 1GB에 20크레딧이니 대략 15GB가 한 달치입니다. 반대로 자료를 자주 고쳐 하루에 한 번씩 배포하면 배포만으로 한 달에 450크레딧이라 한도를 넘습니다. 이 계산은 공식 요율에서 나온 것이지만 어림값이니 실제 사용량은 대시보드에서 보세요.

알아 둘 이력 2025년 9월 4일에 크레딧 방식으로 바뀌었고, 2026년 4월 14일에 요율이 다시 조정됐습니다. 이때 대역폭이 1GB당 10크레딧에서 20크레딧으로 올랐습니다. 같은 300크레딧으로 살 수 있는 양이 절반이 된 셈입니다. 그전에 만든 계정은 예전 방식을 유지하는 경우가 있으니 내 계정이 어느 쪽인지 먼저 확인하세요.

무료 요금제에는 자동 충전이 없습니다. 크레딧이 떨어지면 거기서 멈춥니다. 갑자기 청구서가 날아오지 않는다는 뜻이라 요금 사고 측면에서는 오히려 안전합니다.

이럴 때 고릅니다
  • 깃허브를 아직 안 쓰는데 일단 올려 보고 싶을 때
  • 문의 폼처럼 부가 기능을 붙이고 싶을 때
  • 예기치 않은 청구가 절대 없어야 할 때
이럴 땐 피합니다
  • 하루에도 여러 번 고쳐 올릴 때. 배포마다 크레딧이 나갑니다
  • 이미지·영상이 많아 대역폭이 클 때
  • 비밀번호를 무료로 걸고 싶을 때

근거 — Credit-based pricing plans · Environment variables · Deploy overview 2026-08-28 조회

05 — Cloudflare

Cloudflare 많이 봐도 돈이 안 나가는 곳

교사에게 가장 유리한 한 줄이 여기 있습니다. 정적 파일 요청은 무료이고 개수 제한이 없습니다. 자료가 갑자기 퍼져도 청구서가 오지 않습니다.

한 줄 정체전 세계에 서버를 깔아 둔 회사가 남는 자리를 내주는 형태. 그래서 전송 비용을 안 받습니다.
첫 배포저장소를 연결하면 푸시할 때마다 배포됩니다. 명령어로 올리려면 npx wrangler를 씁니다.
무료로 어디까지정적 파일 요청은 무료·무제한. 서버 기능(Workers)은 하루 10만 요청, 호출당 CPU 10밀리초. 빌드는 월 500회.
환경변수평문 변수와 비밀값을 나눠 둡니다. 비밀값은 npx wrangler secret put으로 넣고, 넣은 뒤에는 다시 볼 수 없습니다.
비공개로 두기Cloudflare Access를 앞에 세우면 로그인이나 일회용 번호를 요구할 수 있습니다. 무료 요금제가 있습니다.
되돌리기배포 목록에서 예전 것을 골라 되돌립니다. 성공한 운영 배포만 대상이 됩니다.

Pages와 Workers, 뭐가 다른가

Cloudflare에는 이름이 둘 있어 처음에 헷갈립니다. Pages는 정적 사이트를 올리는 서비스로 먼저 나왔고, Workers는 서버 기능을 돌리는 서비스였습니다. 지금은 Workers가 정적 파일까지 다룰 수 있게 되어 2026년 3월 기준으로 정적 파일·서버 렌더링·커스텀 도메인에서 Pages와 같은 수준이 됐습니다.

회사는 새로 시작하는 프로젝트에 Workers를 권합니다. 다만 Pages도 계속 지원되고 강제로 옮기라는 안내는 없습니다. 이미 Pages로 잘 돌고 있다면 그대로 두어도 됩니다. 옛 방식인 Workers Sites만 폐기됐으니 그건 쓰지 마세요.

비밀값은 한 번만 보입니다 wrangler secret put으로 넣은 값은 대시보드에서도 명령어로도 다시 읽을 수 없습니다. 불편해 보이지만 화면 공유나 스크린샷으로 키가 새는 사고를 원천적으로 막아 줍니다. 값을 잊었다면 새로 발급받아 덮어씁니다. 평문 변수 쪽에는 민감한 값을 넣지 말라고 공식 문서가 못 박습니다.
Access 요금 확인 Cloudflare Access는 무료 요금제가 있고 인원 한도가 붙습니다. 인원수는 요금 페이지에서 직접 확인하세요. 이 문서는 조회 시점에 공식 문서에서 숫자를 확정하지 못해 적지 않았습니다. Zero Trust 요금 페이지
이럴 때 고릅니다
  • 연수 자료처럼 몇 명이 볼지 모를 때
  • 사진·영상이 많아 전송량이 클 때
  • 동료에게만 보여 주고 싶을 때
이럴 땐 피합니다
  • 설정할 곳이 많아 처음이 어려울 때
  • 파일이 2만 개를 넘거나 한 파일이 25MiB를 넘을 때
  • 하루에 빌드를 스무 번 넘게 돌릴 때

근거 — Workers 요금 · Pages 한도 · Workers 시크릿 · Pages에서 Workers로 · Pages 되돌리기 2026-08-28 조회

06 — GitHub Pages

GitHub Pages 저장소가 곧 사이트

따로 가입할 곳이 없습니다. 깃허브 저장소 설정에서 켜기만 하면 그 저장소가 그대로 사이트가 됩니다. 대신 무료 계정에서는 저장소가 공개여야 합니다.

한 줄 정체깃허브가 저장소 내용을 그대로 웹에 띄워 주는 기능. 별도 서비스가 아니라 깃허브의 한 기능입니다.
첫 배포저장소 Settings에서 Pages를 켜고 어느 브랜치를 쓸지 고릅니다. 몇 분 뒤 주소가 나옵니다.
무료로 어디까지사이트 1GB · 대역폭 월 100GB · 빌드 시간당 10회 · 배포 10분 제한. 대역폭과 빌드는 여유 있게 보는 기준입니다.
환경변수없습니다. 정적 파일만 올라갑니다. Actions 시크릿을 빌드에 쓸 수는 있지만, 그러면 값이 결과물에 박힙니다.
비공개로 두기발행된 사이트를 비공개로 만들려면 GitHub Enterprise Cloud가 필요합니다. 개인 요금제로는 방법이 없습니다.
되돌리기전용 버튼이 없습니다. 커밋을 되돌리고 다시 배포하는 방식입니다.

공개 저장소라는 조건

공식 문서는 이렇게 적었습니다. Pages는 GitHub Free에서 공개 저장소에만, GitHub Pro·Team·Enterprise에서는 공개와 비공개 저장소 모두에 쓸 수 있습니다. 무료 계정이라면 저장소를 공개로 두어야 하고 그 말은 소스와 커밋 이력이 전부 남에게 보인다는 뜻입니다.

여기서 사고가 납니다. .env를 한 번이라도 커밋했다면 나중에 지워도 이력에 남아 검색됩니다. 키를 노리는 자동 프로그램이 공개 저장소를 계속 훑고 있습니다. 실수를 알았다면 파일을 지우는 게 아니라 키를 즉시 새로 발급받는 것이 유일한 복구입니다.

한 가지 더 방문자의 IP 주소가 기록되고 보관됩니다. 깃허브에 로그인했든 안 했든 마찬가지입니다. 학생이 접속하는 페이지를 여기 두려 한다면 알고는 있어야 할 사실입니다.
이럴 때 고릅니다
  • HTML 한 장짜리 자료를 올릴 때
  • 이미 깃허브를 쓰고 있어 추가 가입이 귀찮을 때
  • 공개해도 아무 문제 없는 내용일 때
이럴 땐 피합니다
  • API 키가 필요한 기능이 들어갈 때. 숨길 자리가 없습니다
  • 소스를 공개하고 싶지 않을 때
  • 학생 개인정보가 조금이라도 들어갈 때

근거 — GitHub Pages limits · What is GitHub Pages · Changing the visibility of your site 2026-08-28 조회

07 — Firebase

Firebase 구글의 한 묶음

Firebase는 서비스 하나가 아니라 묶음입니다. 화면을 올리는 Hosting, 서버 렌더링까지 맡는 App Hosting, 데이터를 담는 Firestore·Realtime Database가 각각 다릅니다. 이 장은 앞의 둘을 다루고, 데이터는 8장에서 봅니다.

한 줄 정체구글 계정으로 시작하는 배포. 로그인·데이터베이스·알림까지 같은 콘솔에서 붙일 수 있습니다.
첫 배포firebase init으로 폴더를 잡고 firebase deploy를 칩니다. 저장소가 없어도 됩니다.
무료로 어디까지저장 10GB · 전송 하루 360MB. 커스텀 도메인과 SSL은 무료에 포함됩니다.
환경변수Hosting 자체에는 없습니다. 빌드된 정적 파일만 올라갑니다. 키를 숨기려면 Cloud Functions나 App Hosting을 붙여야 합니다.
비공개로 두기Hosting에는 접근 제한 기능이 없습니다. 주소를 아는 사람은 누구나 봅니다. 잠그려면 앱 안에서 로그인을 직접 구현해야 합니다.
되돌리기콘솔의 릴리스 이력에서 예전 버전을 골라 되돌립니다. 누가 언제 올렸는지도 남습니다.

하루 360MB라는 벽

무료 요금제에서 가장 먼저 부딪히는 숫자입니다. 저장 용량은 10GB로 넉넉한데 내보내는 양이 하루 360MB입니다. 3MB짜리 페이지라면 하루 120번 열면 끝입니다. 학급용 도구처럼 정해진 인원이 쓰는 것에는 충분하지만, 연수 자료를 널리 뿌리는 용도로는 좁습니다. 그런 자료는 Cloudflare 쪽이 맞습니다.

Blaze로 올리면 성격이 바뀝니다 결제 계정을 붙인 Blaze 요금제에서는 무료분을 넘어도 멈추지 않고 초과분이 청구됩니다. 전송은 1GB당 $0.15, 저장은 1GB당 $0.026입니다.
더 중요한 건 이것입니다. 공식 문서가 "예산과 예산 알림은 사용량이나 요금을 제한하지 않습니다"라고 적었습니다. 알림은 알려 줄 뿐 막아 주지 않고, 알림이 오기까지 며칠 걸릴 수도 있습니다. Blaze를 쓴다면 알림과 별개로 지출 상한을 따로 걸어 두세요. 2026-08-28 조회

App Hosting은 다른 물건입니다

이름이 비슷해 헷갈리는데, App Hosting은 Next.js나 Angular처럼 서버가 필요한 앱에 씁니다. 깃허브 저장소를 직접 연결하고 "커밋 하나면 새 버전이 나갑니다"라고 공식 문서가 설명합니다. Hosting과 달리 푸시하면 자동으로 배포됩니다.

대신 Blaze 요금제가 반드시 필요합니다. 무료로는 쓸 수 없습니다. 깃 연동이 필요해서 여기로 온 것이라면 무료인 Vercel이나 Cloudflare를 먼저 보는 편이 낫습니다.

이럴 때 고릅니다
  • 로그인·데이터베이스를 같이 쓸 때
  • 학급 인원 정도가 쓰는 도구일 때
  • 이미 구글 계정으로 다 하고 있을 때
이럴 땐 피합니다
  • 많은 사람에게 자료를 뿌릴 때. 하루 360MB입니다
  • 무료로 깃 연동을 원할 때
  • 청구가 절대 나면 안 될 때. 상한을 안 걸면 그대로 나갑니다

근거 — Firebase 요금 · Hosting 문서 · 릴리스 관리 · App Hosting · 예상 못 한 요금 피하기 2026-08-28 조회

08 — Backend and Database

백엔드 데이터를 담아 두는 곳

출석·설문·기록처럼 저장해 두어야 하는 것이 생기면 화면만 올려서는 안 됩니다. 데이터를 담는 곳이 따로 필요합니다. 여기서 교사가 실제로 만나는 것은 사실상 둘입니다.

따져볼 것 Firestore · Realtime Database Supabase
무엇을 담나 문서 형태의 데이터. 실시간 반영이 쉽습니다 표 형태의 데이터(PostgreSQL). 로그인·파일 보관도 함께 줍니다
브라우저가 직접 붙나 붙습니다. 그렇게 설계됐습니다 붙습니다. 공개용 키를 브라우저에 두고 씁니다
그럼 뭐가 막아 주나 보안 규칙 하나뿐입니다 행 수준 보안(RLS)입니다. 표마다 켜야 합니다
기본값이 안전한가 테스트 모드를 고르면 누구나 읽고 덮어씁니다 RLS를 안 켜면 공개용 키만으로 다 보입니다
무료 한도 Spark 요금제에 무료분이 있습니다
항목별 수치는 요금 페이지 확인		 활성 프로젝트 2개 · 500MB · 전송 5GB
파일 1GB · 월 이용자 5만
안 쓰면 멈추나 안 멈춥니다 1주 쉬면 자동으로 멈춥니다
직접 다시 켤 수 있습니다
카드 등록 Spark는 불필요 · Blaze는 필요 무료 요금제는 불필요
지출 상한 직접 걸어야 합니다 유료 요금제는 기본으로 켜져 있습니다

← 옆으로 밀 수 있습니다

이 장에서 가장 중요한 문장 둘 다 브라우저가 데이터베이스에 직접 붙습니다. 중간에 걸러 주는 서버가 없습니다. 그래서 규칙을 잘못 두면 주소만 아는 사람이 전체 데이터를 읽거나 지울 수 있습니다.
  • 파이어베이스 공식 문서 — "Firebase Security Rules are the only safeguard blocking access for malicious users." 보안 규칙이 유일한 방벽이라는 뜻입니다
  • 같은 문서 — "if you deploy your app, it's publicly accessible — even if you haven't launched it." 아직 알리지 않았어도 올린 순간 공개입니다
  • 데이터베이스를 만들 때 테스트 모드를 고르면 공식 설명이 이렇습니다. "allows anyone to read and overwrite your data"
  • Supabase 공식 문서 — 공개용 키는 "Safe to expose online"이지만 그건 "enable Row Level Security on all tables"를 했을 때의 이야기입니다
학생 이름·연락처·성적이 들어가는 데이터라면 규칙부터 잠그고 시작하세요. 나중에 하겠다는 생각이 사고로 이어집니다. 2026-08-28 조회
비밀 키는 브라우저에 두지 않습니다 Supabase에는 키가 두 종류입니다. 공개용 키는 브라우저에 두어도 되지만, secret 계열 키는 행 수준 보안을 전부 건너뛰고 모든 데이터에 접근합니다. 공식 문서가 "Never expose your secret keys publicly. Your data is at risk."라고 적었습니다. 웹페이지·공개 문서·소스 코드 어디에도 넣지 말라는 뜻입니다. 파이어베이스도 관리자 권한 키는 같습니다.

서버를 통째로 빌리는 쪽

파이썬 스크립트를 계속 돌린다거나 직접 만든 서버를 띄워야 한다면 성격이 다른 곳으로 갑니다. 다만 이쪽은 무료가 거의 없습니다. 교사 입장에서 먼저 알아 둘 것은 그 사실입니다.

  • Railway — 무료 요금제는 월 $1어치 크레딧으로 아주 작은 것만 돌아갑니다. 처음 한 번 $5어치를 주고, 실제로 쓰려면 월 $5짜리 Hobby 요금제로 올라갑니다
  • Fly.io — 무료 할당이 없고 쓴 만큼 냅니다. 모든 조직에 카드 등록이 필요합니다. 켜 둔 시간만큼 초 단위로 계산되고 꺼 둔 것도 저장 공간 값은 나갑니다

서버가 꼭 필요한 게 아니라면 여기까지 오지 않아도 됩니다. API 키를 숨기는 정도라면 서버리스 함수 하나면 충분합니다(10장).

근거 — Firebase 보안 규칙 · Firestore 시작하기 · Supabase 요금 · Supabase API 키 · Railway 요금제 · Fly.io 요금 2026-08-28 조회

09 — Other Options

그 밖의 선택지

앞의 다섯 곳으로 대부분 해결됩니다. 다만 특정 상황에서만 유독 잘 맞는 곳이 몇 군데 있습니다.

One Command

Surge

폴더에서 surge를 치면 끝입니다. 저장소도 빌드 설정도 없습니다. 계정 만들기까지 명령창 안에서 끝납니다.

한 번 보여 주고 말 자료에

Git Connected

Render

푸시하면 자동 배포되고 PR마다 미리보기를 만듭니다. 인증서는 무료로 발급·갱신됩니다. 도메인은 낮은 요금제에서 2개까지입니다.

서버까지 한곳에서 굴리고 싶을 때

TypeScript First

Deno Deploy

깃허브를 연결하면 자동 배포되고 PR마다 미리보기 주소가 생깁니다. 배포 하나의 총 용량은 1GB, 메모리는 512MB까지입니다.

타입스크립트로 작은 서버를 붙일 때

Inside Google

Apps Script 웹앱

구글 계정 안에서 만들고 그 안에서 공개합니다. 누가 볼 수 있는지를 계정 단위로 정할 수 있습니다.

아무나 보면 안 되는 것에

Apps Script 웹앱을 따로 보는 이유

앞의 어떤 곳도 무료로 비공개 배포를 잘 해 주지 못했습니다. Apps Script는 그 자리를 메웁니다. 파일이 교사 개인 구글 계정 밖으로 나가지 않고, 배포할 때 두 가지를 고릅니다.

  • 누구 자격으로 실행할까 — 나로 실행하면 방문자가 내 권한으로 자료를 읽습니다. 접속한 사람으로 실행하면 각자 자기 권한만큼만 봅니다
  • 누가 접근할 수 있나 — 나만, 또는 정해진 범위 안의 사람만으로 좁힐 수 있습니다

학생별 개별 열람 페이지처럼 내용은 나눠 줘야 하는데 공개는 안 되는 경우에 이 조합이 잘 맞습니다. 대신 만드는 방식이 일반 웹 개발과 달라 익숙해지는 데 시간이 듭니다.

근거 — Render 정적 사이트 · Deno Deploy 한도 · Apps Script 웹앱 · Surge 2026-08-28 조회

10 — Environment Variables

환경변수는 숨김 상자가 아닙니다

이 장 하나만 읽고 나머지를 넘겨도 됩니다. 배포에서 나는 사고의 절반이 여기서 나옵니다. 키를 환경변수에 넣었으니 안전하다는 생각이 사고의 출발점입니다.

무슨 일이 벌어지나

.env에 키를 적고 코드에서 불러 쓰면 소스에는 키가 안 보입니다. 여기까지는 맞습니다. 그런데 npm run build를 하는 순간 그 값이 결과물 안에 글자 그대로 박힙니다. 그 결과물이 배포되고 브라우저는 그걸 통째로 내려받습니다. 누구나 열어 볼 수 있습니다.

공식 문서가 뭐라고 적었나 Vite — "VITE_* variables should not contain sensitive information such as API keys. The values of these variables are bundled into your source code at build time."
VITE_로 시작하는 변수에는 API 키 같은 민감한 정보를 넣지 말라는 뜻입니다. 빌드할 때 소스에 박힌다고 이유까지 적어 두었습니다.

Next.js — NEXT_PUBLIC_이 붙은 변수는 빌드할 때 자바스크립트 결과물에 그대로 새겨집니다. 접두사가 없는 변수는 서버에서만 쓰입니다. 2026-08-28 조회

접두사는 경고문입니다. VITE_나 NEXT_PUBLIC_을 붙이는 행위 자체가 "이 값을 브라우저로 보내겠다"는 선언입니다. 그런데 브라우저에서 부르려면 접두사를 붙여야 하니 초보자는 안 되면 접두사를 붙여 해결하게 되고 그 순간 키가 공개됩니다.

그럼 키는 어디에 두나

브라우저가 아니라 서버가 부르게 하면 됩니다. 서버리스 함수가 그 자리입니다. 브라우저는 내 함수에게 부탁하고 함수가 키를 들고 진짜 API에 다녀와서 결과만 돌려줍니다. 키는 함수 안에만 있습니다.

새는 방식
  • 브라우저 → 제미나이 API
  • 키가 브라우저 코드 안에 있어야 함
  • 개발자도구를 열면 그대로 보임
  • 남이 내 키로 요금을 씀
안 새는 방식
  • 브라우저 → 내 함수 → 제미나이 API
  • 키는 함수 쪽 환경변수에만
  • 브라우저 코드에는 함수 주소만 남음
  • 함수에서 사용량 제한도 걸 수 있음
서버가 없는 곳은 GitHub Pages·Surge·Firebase Hosting 단독으로는 함수를 둘 자리가 아예 없습니다. 이런 곳에 올리면서 유료 API를 쓰려면 방법은 셋뿐입니다. ① 키가 필요 없는 기능만 넣기 ② 함수가 있는 곳으로 옮기기 ③ 사용자가 자기 키를 직접 입력하게 만들기. ③은 실제로 쓰이는 방식입니다. 키가 그 사람 브라우저에만 남고 내 요금이 나가지 않습니다.

지금 새고 있는지 확인하기

이미 배포한 것이 있다면 3분이면 확인됩니다.

  1. 배포된 주소를 브라우저로 엽니다

    내 컴퓨터의 localhost가 아니라 실제 배포 주소여야 합니다.

  2. F12를 눌러 개발자도구를 엽니다

    Network 또는 소스 탭으로 갑니다.

  3. 내 키의 앞 6~8글자를 검색합니다

    키 전체를 붙여 넣지 말고 앞부분만 씁니다. 검색창에 남으면 그것도 위험합니다.

  4. 결과가 나오면 이미 샌 것입니다

    파일을 고치는 걸로 끝나지 않습니다. 키를 새로 발급받아야 합니다.

이미 샜다면 ① 해당 키를 즉시 폐기하고 새로 발급받습니다. 노출된 키는 되돌릴 수 없습니다.
② 결제가 붙은 키였다면 사용 내역을 확인합니다.
③ .env를 커밋했다면 파일만 지워도 이력에는 남습니다. 저장소를 비공개로 돌린다고 해결되지 않습니다.
④ 새 키는 서버리스 함수 쪽에만 둡니다. 같은 자리에 다시 넣으면 같은 일이 반복됩니다.

11 — Security

아무나 못 보게, 아무나 못 읽게

배포는 인터넷 전체에 공개하는 행위입니다. 링크를 안 알려 줬다는 것은 보호가 아닙니다. 주소는 검색에 잡히고 자동으로 훑고 다니는 프로그램도 있습니다.

먼저 받아들일 사실

브라우저에서 도는 코드는 전부 보입니다. 저장소를 비공개로 해도 소용없습니다. 배포되는 건 소스가 아니라 결과물인데, 그 결과물은 방문자 컴퓨터로 내려갑니다. 숨길 방법이 없습니다.

그래서 보안은 보이지 않게 하는 일이 아니라 보여도 문제없게 만드는 일입니다. 키는 서버 쪽에, 데이터는 규칙 뒤에, 개인정보는 아예 올리지 않는 것이 그 방법입니다.

사이트 자체를 잠그려면

방법무료인가어떤 상황에
Cloudflare Access 무료 요금제 있음
인원 한도는 요금 페이지 확인		 정해진 사람에게만 열고 싶을 때. 로그인이나 일회용 번호를 요구합니다
Apps Script 웹앱 액세스 설정 무료 구글 계정 기준으로 범위를 좁힐 때. 학생 개별 열람에 잘 맞습니다
Netlify _headers 기본 인증 직접 설정 간단한 비밀번호 한 겹이면 충분할 때
Vercel 비밀번호 보호 Enterprise 또는
Pro에 월 $150 추가		 무료로는 미리보기 주소만 잠깁니다
GitHub Pages 비공개 사이트 Enterprise Cloud만 개인 요금제로는 방법이 없습니다
앱 안에서 직접 로그인 구현 직접 만듦 Firebase Hosting처럼 잠금 장치가 없는 곳에서

← 옆으로 밀 수 있습니다

학생 개인정보 — 절대 규칙 이름·연락처·성적·출결·상담 기록이 들어간 것은 공개 호스팅에 올리지 않습니다. 비밀번호를 걸어도 마찬가지입니다. 비밀번호는 실수로 풀릴 수 있고 링크는 전달됩니다.
  • 꼭 웹으로 나눠 줘야 한다면 Apps Script 웹앱처럼 교사 계정 안에서 끝나는 방식을 씁니다
  • 계산이나 정리만 필요하다면 내 컴퓨터에서 도는 형태로 만듭니다. 배포하지 않아도 됩니다
  • 어쩔 수 없이 올려야 한다면 이름 대신 번호나 가명으로 바꾸고 본인 확인은 다른 경로로 합니다
데이터베이스를 쓴다면 규칙부터 잠그고 시작합니다(8장). 나중에 잠그겠다는 계획은 대체로 지켜지지 않습니다.
시연과 스크린샷 발표 자료나 안내문에 넣을 화면에는 실제 학생 이름을 쓰지 않습니다. 홍길동, 010-0000-0000 같은 더미 데이터를 씁니다. 캡처는 지웠다고 생각해도 발표 파일·메신저·클라우드에 오래 남습니다.

흔한 오해 셋

"링크를 안 알려 주면 안전하다"

주소는 여러 경로로 알려집니다. 브라우저 확장, 공유 기록, 검색 로봇, 인증서 발급 기록까지. 주소를 모른다는 것은 보호 수단이 아닙니다.

"저장소가 비공개니 코드도 안 보인다"

배포된 결과물은 저장소와 별개로 공개됩니다. 브라우저가 받아 가야 화면이 뜨기 때문입니다. 저장소 공개 여부와 배포물 노출은 다른 이야기입니다.

"키를 코드에 안 적었으니 괜찮다"

빌드하면 값이 결과물에 박힙니다. 소스에 안 적은 것과 결과물에 없는 것은 다릅니다. 10장의 확인 절차로 직접 검색해 보세요.

"아직 아무한테도 안 알렸다"

파이어베이스 공식 문서가 이렇게 적었습니다. "if you deploy your app, it's publicly accessible — even if you haven't launched it." 올린 순간부터 공개입니다.

12 — When the Bill Comes

무료 한도를 넘으면

무료 요금제를 고를 때 봐야 할 것은 한도의 크기가 아닙니다. 넘었을 때 멈추느냐 청구되느냐입니다. 이 둘은 성격이 완전히 다릅니다.

두 종류가 있습니다

멈추는 쪽 — 사고가 나도 돈은 안 나감
  • Vercel 무료 — 배포가 멈춥니다
  • Netlify 무료 — 크레딧이 떨어지면 멈춥니다. 자동 충전이 없습니다
  • GitHub Pages — 여유 있게 보다가 깃허브가 연락합니다
  • Supabase 무료 — 프로젝트가 일시정지됩니다
  • Cloudflare 정적 파일 — 애초에 전송 과금이 없습니다
청구되는 쪽 — 카드에서 빠져나감
  • Firebase Blaze — 무료분을 넘으면 그대로 청구
  • Fly.io — 무료 할당 없이 쓴 만큼
  • Railway 유료 요금제 — 사용량 기준
  • Vercel·Netlify 유료 요금제 — 초과분 과금

결제수단을 등록하는 순간 성격이 바뀝니다. 무료 요금제를 쓰다가 기능이 필요해 카드를 붙이면 그때부터는 멈추는 쪽이 아니라 청구되는 쪽이 됩니다. 파이어베이스에서 Blaze로 올리는 것이 대표적입니다.

예산 알림은 막아 주지 않습니다 가장 많이 오해하는 부분입니다. 파이어베이스 공식 문서가 이렇게 적었습니다. "Budgets and budget alerts do not cap your usage or charges." 예산과 예산 알림은 사용량이나 요금을 제한하지 않습니다. 같은 문서가 비용이 발생하고 알림이 오기까지 며칠 걸릴 수 있다고 덧붙였습니다.

막는 것은 지출 상한입니다. 알림과 별개 기능이고 별도로 걸어야 합니다. 공식 문서도 함수나 App Hosting을 쓴다면 지출 상한을 함께 설정하라고 강하게 권합니다. 2026-08-28 조회

실제로 나는 사고 셋

  1. 사진을 원본 그대로 올렸다

    수업 사진 200장을 줄이지 않고 올리면 한 장이 5MB씩 잡힙니다. 한 사람이 다 훑으면 1GB입니다. Firebase 무료는 하루 360MB라 세 명이면 그날치가 끝납니다. 올리기 전에 이미지를 줄이세요.

  2. 함수가 자기를 다시 부른다

    데이터가 바뀌면 실행되는 함수가 다시 데이터를 바꾸면 끝없이 돕니다. 무료면 한도에서 멈추지만 청구되는 요금제라면 하룻밤에 액수가 커집니다. 함수를 붙일 때 지출 상한을 먼저 거세요.

  3. 공개 저장소에 키를 올렸다

    공개 저장소를 훑는 자동 프로그램이 있습니다. 키를 주워 가면 내 계정으로 남이 API를 씁니다. 요금뿐 아니라 그 사용 내역도 내 이름으로 남습니다.

사고를 줄이는 네 가지 ① 필요할 때까지 카드를 등록하지 않습니다. 멈추는 쪽이 훨씬 안전합니다
② 카드를 걸었다면 지출 상한부터 겁니다. 알림만으로는 부족합니다
③ 전송량이 걱정되면 Cloudflare에 둡니다. 정적 파일은 전송 과금이 없습니다
④ 이미지·영상은 올리기 전에 줄입니다. 대역폭 문제의 대부분이 여기서 나옵니다

13 — Your Call

나는 어디에 올리나

위에서부터 네 가지만 물으면 대개 답이 나옵니다. 앞의 질문일수록 중요합니다. 첫 질문에서 걸리면 나머지는 볼 필요가 없습니다.

배포처를 고르는 네 가지 질문 순서도 학생 이름·성적 같은 개인정보가 들어가나? 예 공개 호스팅에 안 올림 Apps Script 또는 내 컴퓨터 아니오 브라우저에서 유료 API 키를 부르나? 예 서버 함수가 있는 곳 Vercel · Netlify · Cloudflare 아니오 깃허브에 코드가 있나? 아니오 Surge 명령 한 줄 또는 끌어다 놓기 예 몇 명이 볼지 가늠이 안 되나? 예 Cloudflare 정적 파일은 전송 과금 없음 아니오 Vercel · Netlify · GitHub Pages 어느 쪽이든 무난합니다

Vercel을 고를 때는 대가를 받고 만든 결과물이 아닌지 한 번 더 확인하세요(3장). GitHub Pages는 무료 계정에서 저장소가 공개여야 한다는 조건이 붙습니다(6장).

올리기 전 점검표

여덟 개를 다 켜지 못했다면 올리기 전에 해결하세요. 올린 뒤에 고치는 것보다 훨씬 쌉니다.

여덟 개가 다 켜졌다면 올려도 됩니다. 특히 네 번째와 여섯 번째는 나중에 하겠다고 미루면 대체로 안 하게 되는 항목입니다.
시리즈 안내 키를 어디서 어떻게 발급받는지는 API키 대백과, 저장소·커밋·푸시는 깃허브 대백과, 어떤 화면에서 작업할지는 작업환경 대백과에 있습니다. 이 문서는 올리는 곳만 다뤘습니다.

＋ — Reference

레퍼런스

숫자는 자주 바뀝니다. 결제나 도입을 결정하기 전에는 아래 공식 페이지를 직접 여세요.

배포 플랫폼

환경변수와 키

데이터베이스 보안과 요금

그 밖

＋ — Sources

자료 출처

이 문서의 사실은 2026년 8월 28일에 각 사 공식 문서로 확인했습니다. 무료 한도와 요금 정책은 몇 달 단위로 바뀌므로, 결제나 도입을 결정하기 전 원문을 다시 확인하시길 권합니다.

확인 방식

본문의 모든 수치와 인용은 각 회사의 공식 문서에서 가져왔습니다. 블로그나 요약 사이트의 값은 쓰지 않았습니다. 공식 문서에서 확정하지 못한 값은 적지 않고, 확인이 필요하다고 표시했습니다. Cloudflare Access의 무료 인원수가 그 예입니다.

주요 인용

  • Vercel "Hobby teams are restricted to non-commercial personal use only." — Fair Use Guidelines
  • Vite "VITE_* variables should not contain sensitive information such as API keys." — Env Variables and Modes
  • Firebase "Firebase Security Rules are the only safeguard blocking access for malicious users." / "if you deploy your app, it's publicly accessible — even if you haven't launched it." — 보안 규칙 기초
  • Firebase "Budgets and budget alerts do not cap your usage or charges." — 예상 못 한 요금 피하기
  • Supabase "Never expose your secret keys publicly. Your data is at risk." / "enable Row Level Security on all tables" — API 키
  • GitHub Pages는 GitHub Free에서 공개 저장소에만 제공됩니다 — What is GitHub Pages

참고할 법령

  • 개인정보 보호법 제28조의8 개인정보의 국외 이전. 이 문서에 나오는 서비스는 대부분 국외 사업자입니다
  • 초·중등교육법 제30조의6 학생 관련 자료 제공의 제한

법령 해석이 필요한 사안은 소속 기관의 개인정보 보호 담당자에게 확인하시기 바랍니다.

이 문서에서 가장 빨리 낡을 곳 ① 무료 한도 수치 전반 ② Netlify 크레딧 요율(1년 새 두 번 바뀌었습니다) ③ Cloudflare의 Pages와 Workers 통합 진행 상황 ④ Vercel의 상업적 사용 정의와 잠금 기능 요금 ⑤ Firebase Spark·Blaze 요율. 이 다섯을 다음 점검에서 가장 먼저 다시 봅니다.