어린 학습자와 인공지능 도우미가 완성된 웹페이지를 두 개의 클라우드로 보내는 모습

처음 하는 사람을 위한 자동화 안내서

말하면 만들고
확인하면 출판 완료

클로드가 HTML 준비부터 검사와 배포까지 맡고, 사용자는 로그인과 최종 확인만 하는 가장 쉬운 방법입니다

약 90%클로드가 자동 처리
2가지무료 배포 선택지
1개공통 사이트 폴더
이 안내서에서 말하는 클로드는 ‘Claude Code’입니다

일반 채팅은 설명과 HTML 작성은 잘하지만 사용자의 컴퓨터에 있는 파일 검사와 배포 명령 실행까지 자동으로 맡기기는 어렵습니다. 가장 쉬운 방법은 Claude 데스크톱 앱의 Code 탭을 사용하는 것입니다. Claude Code는 Pro·Max·Team·Enterprise 또는 Console 계정이 필요하며 무료 Claude.ai 요금제에는 포함되지 않습니다. 이 안내서의 ‘무료’는 Firebase와 Cloudflare의 호스팅 무료 범위를 뜻합니다

1부 · HTML 만들기

코드를 몰라도 시작할 수 있습니다

주제를 말하고, 화면을 보고, 고치면 됩니다

지금까지 사용해 온 가장 쉬운 방식은 처음부터 완벽한 코드를 쓰는 것이 아니라 클로드에게 초안을 만들게 하고 실제 화면을 보면서 여러 번 다듬는 것입니다

STEP 01

주제를 한 문장으로 정합니다

무엇을 누구에게 보여 줄지 먼저 정합니다

STEP 02

원하는 모습을 말합니다

표·사진·움직임·색상·인쇄 기능을 요청합니다

STEP 03

클로드가 초안을 만듭니다

index.html과 필요한 이미지 폴더를 준비합니다

STEP 04

실제 화면을 먼저 봅니다

글보다 화면을 보며 큰 방향부터 확인합니다

STEP 05

한 번에 한 가지씩 고칩니다

내용·구조·디자인·움직임 순서로 다듬습니다

STEP 06

site 폴더로 완성합니다

오류와 개인정보를 검사하고 배포 준비를 마칩니다

지금까지 잘 활용해 온 HTML 제작 노하우

로드맵과 업무계획 HTML을 여러 차례 개선해 온 방식에서 뽑은 핵심입니다

주제보다 독자를 먼저 적습니다

누가 보고 무엇을 이해하거나 실행해야 하는지 알려 주면 글의 난이도와 화면 구성이 정확해집니다

정보에 맞는 모양을 고릅니다

일정은 타임라인, 비교는 표, 실행 항목은 체크리스트, 상태는 진행률로 보여 줍니다

첫 초안은 v1이라고 생각합니다

한 번에 완성하려 하지 않고 v2·v3처럼 화면을 보며 단계적으로 발전시킵니다

수정은 큰 것부터 합니다

내용 누락, 정보 순서, 표와 도식, 색상과 여백, 움직임 순서로 고치면 되돌아가는 일이 줄어듭니다

보기만 하는 문서에서 끝내지 않습니다

체크박스와 메모와 진행 저장 기능을 넣으면 실제 업무에서 계속 사용하는 도구가 됩니다

화면과 인쇄를 함께 준비합니다

컴퓨터와 휴대전화에서 읽기 편하고 필요할 때 종이 또는 PDF로 출력되도록 요청합니다

숫자와 최신 정보에는 출처를 붙입니다

기준 날짜와 공식 자료 링크를 남기면 나중에 내용을 고칠 때도 훨씬 안전합니다

배포 파일을 따로 모읍니다

index.html과 공개 가능한 이미지만 site 폴더에 넣어 개인 파일이 인터넷에 올라가지 않게 합니다

클로드용 HTML 제작 문장을 자동으로 만드세요

아래 네 칸만 입력하고 필요한 기능을 고른 뒤 오른쪽 문장을 복사하시면 됩니다

① 만들고 싶은 내용을 입력하세요

함께 넣을 기능
② 완성된 제작 문장

        

먼저 네 단어만

어려운 용어는 이렇게 생각하세요

HTML

사용자가 만든 전시 작품입니다
글과 그림과 움직임이 들어 있습니다

호스팅

작품을 24시간 보여 주는 전시관입니다
Firebase와 Cloudflare가 이 역할을 합니다

배포

작품을 전시관으로 보내는 일입니다
클로드가 명령을 실행해 옮겨 줍니다

인터넷 주소

다른 사람이 전시관을 찾아오는 주소입니다
web.app 또는 pages.dev 형태로 받습니다

2부 · 무료 배포

한눈에 보는 전체 지도

사람은 두 번, 클로드는 다섯 번

노란 칸만 사용자가 직접 하고, 초록 칸은 클로드에게 맡기시면 됩니다

아이디어에서 인터넷 주소까지

빛이 움직이는 방향대로 따라가시면 됩니다

클로드 사용자
1
주제 말하기사용자
2
HTML 만들기클로드
3
오류 검사클로드
4
배포 준비클로드
5
계정 로그인사용자
6
인터넷 배포클로드
7
주소 확인클로드

🤖 클로드가 맡을 일

  • site 폴더와 HTML·CSS·이미지 정리
  • 링크와 화면 크기와 오류 검사
  • 배포 도구 준비와 설정 파일 작성
  • 배포 명령 실행과 주소 접속 확인
  • 나중에 수정한 내용 다시 배포

🧑 사용자가 맡을 일

  • 사이트의 주제와 이름 정하기
  • 클로드가 만든 화면 눈으로 확인
  • Google 또는 Cloudflare 계정 로그인
  • 권한 요청 내용 읽고 허용 여부 결정
  • 완성된 인터넷 주소 친구에게 공유

무료 호스팅 고르기

둘 다 좋지만 처음 목적이 다릅니다

아래 카드를 눌러 상황에 맞는 추천을 확인해 보세요

Firebase Hosting

나중에 로그인·데이터베이스 같은 Firebase 기능도 배우고 싶을 때

Google 계정 Spark 무료 요금제 web.app 주소
단순 HTML 추천

Cloudflare Pages

HTML과 사진을 빠르고 넉넉하게 전 세계에 보여 주는 일이 먼저일 때

Cloudflare 계정 Free 플랜 pages.dev 주소
한 줄 추천 : 단순 HTML 안내서·포트폴리오·소개 페이지라면 Cloudflare Pages로 시작하시고, Firebase 기능을 이어서 배우실 계획이면 Firebase Hosting을 선택하세요
비교 항목 Firebase Hosting 무료 Cloudflare Pages 무료
가장 잘 맞는 일 정적 사이트와 Firebase 생태계 입문 정적 HTML·CSS·JS 사이트 출판
기본 주소 프로젝트이름.web.app 프로젝트이름.pages.dev
무료 범위 핵심 저장 공간 10 GB와 월 데이터 전송 10 GB 정적 파일 요청 무료·무제한, 사이트당 최대 20,000개 파일
카드 등록 Spark 플랜은 결제수단 불필요 Free 플랜으로 시작 가능
클로드 자동화 Firebase CLI로 첫 배포와 재배포 Wrangler로 첫 배포와 재배포
무료 한도 초과 Spark에서는 해당 서비스가 일시 중지될 수 있음 정적 파일은 넉넉하지만 Functions는 Workers 무료 한도를 따름
꼭 기억할 점 Cloud Billing 연결과 Blaze 전환 금지 Direct Upload 프로젝트는 같은 프로젝트에서 Git 연동 방식으로 바꿀 수 없음

처음 한 번만 준비

세 가지만 준비하시면 됩니다

Windows 사용자는 Claude 데스크톱 앱의 Code 탭을 사용하는 방법이 가장 알아보기 쉽습니다

준비 02

Node.js LTS

Firebase와 Cloudflare의 배포 도구를 실행하는 데 필요합니다. 설치 후 컴퓨터를 한 번 다시 시작하시면 편리합니다

Node.js 공식 다운로드 ↗
준비 03

호스팅 계정

Firebase에는 Google 계정, Cloudflare Pages에는 Cloudflare 무료 계정을 사용합니다

Firebase ↗ Cloudflare ↗

회원가입부터 첫 사용까지 체크해 보세요

완료한 항목에 체크하시면 이 브라우저가 진행 상태를 기억합니다

Claude Code에 처음 붙여 넣을 문장
지금부터 초보자의 웹 출판 도우미 역할을 해 주세요

이 작업 폴더를 먼저 살펴보고 site라는 배포 전용 폴더를 준비해 주세요
제가 만든 HTML·CSS·JavaScript·이미지를 site 안에 빠짐없이 정리해 주세요
첫 화면 파일 이름은 반드시 index.html로 맞춰 주세요

그다음 아래 항목을 자동으로 검사해 주세요
- index.html이 정상적으로 열리는지
- 이미지와 링크가 끊기지 않는지
- 휴대전화 화면에서도 읽기 쉬운지
- 비밀번호·API 키·개인정보가 파일에 들어 있지 않은지
- site 폴더 밖의 개인 파일이 배포 대상에 섞이지 않는지

문제가 있으면 안전하게 고치고 무엇을 바꾸었는지 쉬운 말로 알려 주세요
로그인 화면이 나오거나 외부 서비스 권한이 필요할 때만 멈추고 제가 직접 하도록 안내해 주세요
결제수단 연결, 유료 요금제 전환, 유료 기능 추가는 절대 하지 말아 주세요
준비가 끝나면 Firebase Hosting과 Cloudflare Pages 중 어디에 배포할지 물어봐 주세요

배포 따라하기

서비스를 고르고 그대로 따라 하세요

각 단계가 끝나면 체크하세요. 체크 상태는 이 브라우저에 저장됩니다

1

무료 안전장치 먼저 말하기

Firebase Spark 플랜만 사용하고 Cloud Billing과 Blaze는 건드리지 않도록 클로드에게 분명히 말씀하세요

무료 한도를 넘으면 자동 결제되는 대신 사이트가 잠시 멈출 수 있습니다
2

Google 로그인은 사용자가 직접 합니다

클로드가 Firebase 로그인 명령을 실행하면 브라우저가 열립니다. 본인의 Google 계정으로 로그인하고 허용을 누르세요

비밀번호는 클로드 대화창에 적지 말고 열린 Google 로그인 화면에만 입력하세요
3

프로젝트 이름 정하기

영문 소문자와 숫자와 하이픈으로 세상에 하나뿐인 이름을 정하세요. 예시 : my-space-guide-2026

Firebase 프로젝트 ID는 나중에 바꾸기 어려우므로 개인정보 대신 사이트 주제를 넣으세요
4

클로드가 설정과 배포 진행

클로드가 firebase.json과 프로젝트 연결 파일을 만들고 site 폴더만 Firebase Hosting으로 보냅니다

완료 주소 예시 : https://프로젝트이름.web.app
5

주소를 열어 마지막 확인

클로드에게 완성 주소를 열어 응답 상태와 첫 화면을 확인하고 결과를 알려 달라고 요청하세요

오래된 화면이 보이면 새로고침하거나 잠시 뒤 다시 확인하세요
Firebase 첫 배포용 전체 문장
site 폴더의 정적 웹사이트를 Firebase Hosting에 처음 배포해 주세요

안전 조건
- Firebase Spark 무료 요금제만 사용
- Cloud Billing 연결과 Blaze 전환과 유료 기능 사용 금지
- 비밀번호나 로그인 토큰을 대화창이나 파일에 기록하지 않기
- site 폴더 밖의 파일은 배포하지 않기

진행 순서
1. Node.js와 npm이 사용 가능한지 확인
2. npx로 최신 Firebase CLI를 안전하게 실행
3. Firebase 로그인이 필요하면 로그인 명령을 실행한 뒤 제가 브라우저에서 로그인할 때까지 기다리기
4. 로그인 후 프로젝트 목록을 확인
5. 새 프로젝트가 필요하면 영문 소문자·숫자·하이픈으로 된 프로젝트 ID를 저에게 한 번 물어보기
6. 새 프로젝트를 만들 때 Firebase CLI의 projects:create 기능을 사용하고 Spark 상태 유지
7. public 대상이 site가 되도록 firebase.json을 만들고 프로젝트 연결을 설정
8. 배포 전에 site/index.html과 이미지 경로와 비밀정보 포함 여부를 다시 검사
9. Firebase Hosting만 배포
10. 배포된 web.app 주소가 정상 응답하는지 확인

중간에 선택지가 나오면 초보자에게 가장 안전한 기본값을 고르고, 결제나 권한 확대가 관련되면 반드시 멈춰서 저에게 설명해 주세요
완료하면 인터넷 주소, 실제로 한 일, 다음 수정 때 사용할 한 문장을 쉬운 말로 알려 주세요
1

Direct Upload 방식 고르기

GitHub 없이 사용자의 컴퓨터에 있는 site 폴더를 바로 올리는 가장 짧은 방법입니다

같은 Pages 프로젝트를 나중에 Git 연동 방식으로 바꿀 수는 없습니다. 필요하면 새 Git 연동 프로젝트를 만드시면 됩니다
2

Cloudflare 로그인은 사용자가 직접 합니다

클로드가 Wrangler 로그인을 실행하면 브라우저가 열립니다. 본인의 Cloudflare 계정으로 로그인하고 권한을 허용하세요

API 토큰을 만들거나 복사할 필요 없이 브라우저 로그인으로 진행하세요
3

프로젝트 이름 정하기

짧은 영문 소문자 이름을 정하세요. 이미 사용 중이면 Cloudflare가 주소에 글자를 조금 더 붙일 수 있습니다

예시 : my-first-web-guide
4

클로드가 프로젝트 생성과 배포

클로드가 Wrangler로 Pages 프로젝트를 만들고 site 폴더만 직접 업로드합니다

완료 주소 예시 : https://프로젝트이름.pages.dev
5

주소와 최신 배포 확인

클로드에게 Pages 배포 목록과 실제 주소 응답을 확인하게 하고 링크를 받으세요

사진 한 장은 25 MiB보다 작게 유지하시면 안전합니다
Cloudflare 첫 배포용 전체 문장
site 폴더의 정적 웹사이트를 Cloudflare Pages에 처음 배포해 주세요

안전 조건
- Cloudflare Free 플랜 범위만 사용
- 유료 기능과 Pages Functions와 데이터베이스는 추가하지 않기
- API 토큰과 비밀번호를 대화창이나 파일에 기록하지 않기
- site 폴더 밖의 파일은 배포하지 않기

진행 순서
1. Node.js와 npm이 사용 가능한지 확인
2. npx로 최신 Wrangler를 안전하게 실행
3. Wrangler 로그인이 필요하면 로그인 명령을 실행한 뒤 제가 브라우저에서 로그인할 때까지 기다리기
4. Direct Upload 방식으로 Pages 프로젝트 목록을 확인
5. 새 프로젝트가 필요하면 영문 소문자 프로젝트 이름을 저에게 한 번 물어보기
6. Pages 프로젝트를 만들고 production branch는 main으로 설정
7. 배포 전에 site/index.html과 이미지 경로와 비밀정보 포함 여부를 다시 검사
8. site 폴더를 Pages에 직접 배포
9. 배포 목록에서 최신 배포 상태를 확인
10. pages.dev 주소가 정상 응답하는지 확인

Direct Upload 프로젝트는 같은 프로젝트에서 Git 연동 방식으로 바꿀 수 없다는 점을 프로젝트 생성 전에 한 줄로 알려 주세요
결제나 권한 확대가 관련되면 반드시 멈춰서 저에게 설명해 주세요
완료하면 인터넷 주소, 실제로 한 일, 다음 수정 때 사용할 한 문장을 쉬운 말로 알려 주세요

두 번째부터는 더 쉽습니다

수정한 뒤 한 문장만 말씀하세요

로그인 상태가 남아 있다면 클로드가 검사부터 재배포까지 다시 이어서 처리합니다

수정 후 재배포 문장
방금 수정한 사이트를 다시 검사하고 기존 호스팅 프로젝트에 재배포해 주세요
새 프로젝트는 만들지 말고 현재 연결된 프로젝트를 그대로 사용해 주세요
site 폴더만 배포하고 유료 기능은 추가하지 말아 주세요
배포가 끝나면 기존 인터넷 주소에서 최신 내용이 보이는지 확인해 주세요

자동화는 어디까지

한 번 배포에서 자동 출판까지

처음에는 레벨 2가 가장 쉽고, 자주 수정하신다면 GitHub를 연결해 레벨 3으로 올리세요

레벨 1

클로드가 첫 배포

사이트 검사와 로그인 준비와 배포 명령을 클로드가 한 번에 처리합니다

사용자가 하는 일 : 로그인과 승인
레벨 3

GitHub 자동 출판

클로드가 GitHub에 변경 내용을 올리면 연결된 호스팅이 자동으로 새 버전을 출판합니다

사용자가 하는 일 : 최초 GitHub 연결 승인
레벨 3은 GitHub 계정이 있을 때만 선택하세요

Firebase는 기존 Hosting 설정 뒤 firebase init hosting:github로 자동 배포 파일을 만들 수 있습니다. Cloudflare는 Pages 프로젝트를 처음부터 Git Integration 방식으로 만들어야 합니다. 이미 Direct Upload로 만들었다면 기존 프로젝트를 바꾸지 말고 Git 연동용 새 Pages 프로젝트를 만드세요. GitHub와 각 서비스의 무료 사용 한도도 함께 적용됩니다

GitHub 자동 배포 설정용 문장
이 사이트를 GitHub와 연결해 무료 범위의 자동 배포를 설정하고 싶습니다

먼저 현재 배포 서비스가 Firebase Hosting인지 Cloudflare Pages인지 확인해 주세요
제 GitHub 로그인과 서비스 연결 승인이 필요할 때만 멈추고 제가 직접 하도록 안내해 주세요
비밀번호·API 토큰·서비스 계정 키를 대화창이나 저장소 파일에 노출하지 말아 주세요
유료 요금제와 결제수단은 연결하지 말아 주세요

Firebase라면
- 기존 Hosting 프로젝트와 site 배포 설정을 그대로 유지
- 공식 Firebase GitHub Action 초기화 절차를 사용
- Pull Request에는 미리보기 주소를 만들고 main 반영 때만 실제 사이트를 배포
- 생성된 workflow와 GitHub secret과 서비스 계정 권한을 검사

Cloudflare Pages라면
- 현재 프로젝트가 Direct Upload인지 Git Integration인지 먼저 확인
- Direct Upload라면 같은 프로젝트를 바꾸려 하지 말고 새 Git 연동 Pages 프로젝트가 필요하다고 알려주기
- 정적 HTML이므로 build command는 exit 0, output directory는 site로 설정
- production branch는 main, 다른 branch는 미리보기로 설정

설정 뒤 작은 문구 하나를 수정해 테스트하고 GitHub 반영부터 실제 주소 갱신까지 확인해 주세요
완료하면 제가 다음부터 클로드에게 말할 한 문장만 마지막에 보여 주세요

꼭 지킬 안전 규칙

클로드가 작업해도 최종 열쇠는 사용자가 관리하세요

✅ 해도 되는 것

  • 파일 정리와 오류 검사 맡기기
  • 공식 배포 도구 실행 맡기기
  • 명령과 변경 내용을 읽고 승인하기
  • 공개해도 되는 사진만 site에 넣기
  • 완성 주소를 새 창에서 직접 확인하기

🚫 하면 안 되는 것

  • 비밀번호를 클로드 대화창에 적기
  • API 키와 주민번호를 HTML에 넣기
  • 모르는 유료 전환 화면을 바로 승인하기
  • 컴퓨터 전체 폴더를 배포 대상으로 고르기
  • 저작권 확인 없이 인터넷 사진을 배포하기

막혔을 때

오류 문장을 그대로 클로드에게 보여 주세요

로그인 창이 열리지 않습니다

기본 브라우저가 열릴 수 있도록 허용하고 클로드에게 로그인 명령을 다시 실행해 달라고 요청하세요. 원격 환경이라면 Firebase는 no-localhost 방식이 필요할 수 있습니다

프로젝트 이름을 이미 사용 중이라고 나옵니다

이름 뒤에 주제와 연도 또는 짧은 숫자를 붙여 다시 시도하세요. 예시 : animal-guide-2026-51

배포는 되었는데 흰 화면만 보입니다

site 폴더 바로 안에 index.html이 있는지, 이미지와 스크립트 경로가 site 기준 상대 경로인지 클로드에게 검사해 달라고 요청하세요

수정했는데 이전 화면이 보입니다

새로고침을 하고 잠시 기다린 뒤 다시 확인하세요. 그래도 같으면 클로드에게 최신 배포 목록과 실제 배포 폴더가 site인지 확인해 달라고 요청하세요

무료 이용 상태인지 다시 확인하고 싶습니다

Firebase 콘솔에서는 프로젝트가 Spark인지 확인하고 Cloud Billing을 연결하지 마세요. Cloudflare 대시보드에서는 Workers & Pages의 Free 플랜과 사용량을 확인하세요. 한도는 바뀔 수 있으므로 아래 공식 문서를 함께 확인하세요

복사했습니다