주제를 한 문장으로 정합니다
무엇을 누구에게 보여 줄지 먼저 정합니다
처음 하는 사람을 위한 자동화 안내서
클로드가 HTML 준비부터 검사와 배포까지 맡고, 사용자는 로그인과 최종 확인만 하는 가장 쉬운 방법입니다
일반 채팅은 설명과 HTML 작성은 잘하지만 사용자의 컴퓨터에 있는 파일 검사와 배포 명령 실행까지 자동으로 맡기기는 어렵습니다. 가장 쉬운 방법은 Claude 데스크톱 앱의 Code 탭을 사용하는 것입니다. Claude Code는 Pro·Max·Team·Enterprise 또는 Console 계정이 필요하며 무료 Claude.ai 요금제에는 포함되지 않습니다. 이 안내서의 ‘무료’는 Firebase와 Cloudflare의 호스팅 무료 범위를 뜻합니다
코드를 몰라도 시작할 수 있습니다
지금까지 사용해 온 가장 쉬운 방식은 처음부터 완벽한 코드를 쓰는 것이 아니라 클로드에게 초안을 만들게 하고 실제 화면을 보면서 여러 번 다듬는 것입니다
무엇을 누구에게 보여 줄지 먼저 정합니다
표·사진·움직임·색상·인쇄 기능을 요청합니다
index.html과 필요한 이미지 폴더를 준비합니다
글보다 화면을 보며 큰 방향부터 확인합니다
내용·구조·디자인·움직임 순서로 다듬습니다
오류와 개인정보를 검사하고 배포 준비를 마칩니다
로드맵과 업무계획 HTML을 여러 차례 개선해 온 방식에서 뽑은 핵심입니다
누가 보고 무엇을 이해하거나 실행해야 하는지 알려 주면 글의 난이도와 화면 구성이 정확해집니다
일정은 타임라인, 비교는 표, 실행 항목은 체크리스트, 상태는 진행률로 보여 줍니다
한 번에 완성하려 하지 않고 v2·v3처럼 화면을 보며 단계적으로 발전시킵니다
내용 누락, 정보 순서, 표와 도식, 색상과 여백, 움직임 순서로 고치면 되돌아가는 일이 줄어듭니다
체크박스와 메모와 진행 저장 기능을 넣으면 실제 업무에서 계속 사용하는 도구가 됩니다
컴퓨터와 휴대전화에서 읽기 편하고 필요할 때 종이 또는 PDF로 출력되도록 요청합니다
기준 날짜와 공식 자료 링크를 남기면 나중에 내용을 고칠 때도 훨씬 안전합니다
index.html과 공개 가능한 이미지만 site 폴더에 넣어 개인 파일이 인터넷에 올라가지 않게 합니다
아래 네 칸만 입력하고 필요한 기능을 고른 뒤 오른쪽 문장을 복사하시면 됩니다
배포하기 전에 아래 여덟 가지만 확인하세요
실전 수정 순서 : 내용 누락 → 정보 순서 → 표와 도식 → 색상과 여백 → 움직임 → 모바일과 인쇄
먼저 네 단어만
사용자가 만든 전시 작품입니다
글과 그림과 움직임이 들어 있습니다
작품을 24시간 보여 주는 전시관입니다
Firebase와 Cloudflare가 이 역할을 합니다
작품을 전시관으로 보내는 일입니다
클로드가 명령을 실행해 옮겨 줍니다
다른 사람이 전시관을 찾아오는 주소입니다
web.app 또는 pages.dev 형태로 받습니다
한눈에 보는 전체 지도
노란 칸만 사용자가 직접 하고, 초록 칸은 클로드에게 맡기시면 됩니다
빛이 움직이는 방향대로 따라가시면 됩니다
무료 호스팅 고르기
아래 카드를 눌러 상황에 맞는 추천을 확인해 보세요
나중에 로그인·데이터베이스 같은 Firebase 기능도 배우고 싶을 때
HTML과 사진을 빠르고 넉넉하게 전 세계에 보여 주는 일이 먼저일 때
| 비교 항목 | 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 탭을 사용하는 방법이 가장 알아보기 쉽습니다
Claude 데스크톱 앱을 설치하고 로그인한 뒤 Code 탭에서 작업 폴더를 여세요
공식 데스크톱 시작 안내 ↗Firebase와 Cloudflare의 배포 도구를 실행하는 데 필요합니다. 설치 후 컴퓨터를 한 번 다시 시작하시면 편리합니다
Node.js 공식 다운로드 ↗Firebase에는 Google 계정, Cloudflare Pages에는 Cloudflare 무료 계정을 사용합니다
Firebase ↗ Cloudflare ↗완료한 항목에 체크하시면 이 브라우저가 진행 상태를 기억합니다
Google 계정 준비부터 web.app 주소 확인까지 진행합니다
완료 기준 : 주소가 프로젝트이름.web.app 형태로 열리면 첫 사용이 끝난 것입니다
무료 계정 생성부터 pages.dev 주소 확인까지 진행합니다
완료 기준 : 주소가 프로젝트이름.pages.dev 형태로 열리면 첫 사용이 끝난 것입니다
지금부터 초보자의 웹 출판 도우미 역할을 해 주세요 이 작업 폴더를 먼저 살펴보고 site라는 배포 전용 폴더를 준비해 주세요 제가 만든 HTML·CSS·JavaScript·이미지를 site 안에 빠짐없이 정리해 주세요 첫 화면 파일 이름은 반드시 index.html로 맞춰 주세요 그다음 아래 항목을 자동으로 검사해 주세요 - index.html이 정상적으로 열리는지 - 이미지와 링크가 끊기지 않는지 - 휴대전화 화면에서도 읽기 쉬운지 - 비밀번호·API 키·개인정보가 파일에 들어 있지 않은지 - site 폴더 밖의 개인 파일이 배포 대상에 섞이지 않는지 문제가 있으면 안전하게 고치고 무엇을 바꾸었는지 쉬운 말로 알려 주세요 로그인 화면이 나오거나 외부 서비스 권한이 필요할 때만 멈추고 제가 직접 하도록 안내해 주세요 결제수단 연결, 유료 요금제 전환, 유료 기능 추가는 절대 하지 말아 주세요 준비가 끝나면 Firebase Hosting과 Cloudflare Pages 중 어디에 배포할지 물어봐 주세요
배포 따라하기
각 단계가 끝나면 체크하세요. 체크 상태는 이 브라우저에 저장됩니다
Firebase Spark 플랜만 사용하고 Cloud Billing과 Blaze는 건드리지 않도록 클로드에게 분명히 말씀하세요
클로드가 Firebase 로그인 명령을 실행하면 브라우저가 열립니다. 본인의 Google 계정으로 로그인하고 허용을 누르세요
영문 소문자와 숫자와 하이픈으로 세상에 하나뿐인 이름을 정하세요. 예시 : my-space-guide-2026
클로드가 firebase.json과 프로젝트 연결 파일을 만들고 site 폴더만 Firebase Hosting으로 보냅니다
클로드에게 완성 주소를 열어 응답 상태와 첫 화면을 확인하고 결과를 알려 달라고 요청하세요
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 주소가 정상 응답하는지 확인 중간에 선택지가 나오면 초보자에게 가장 안전한 기본값을 고르고, 결제나 권한 확대가 관련되면 반드시 멈춰서 저에게 설명해 주세요 완료하면 인터넷 주소, 실제로 한 일, 다음 수정 때 사용할 한 문장을 쉬운 말로 알려 주세요
GitHub 없이 사용자의 컴퓨터에 있는 site 폴더를 바로 올리는 가장 짧은 방법입니다
클로드가 Wrangler 로그인을 실행하면 브라우저가 열립니다. 본인의 Cloudflare 계정으로 로그인하고 권한을 허용하세요
짧은 영문 소문자 이름을 정하세요. 이미 사용 중이면 Cloudflare가 주소에 글자를 조금 더 붙일 수 있습니다
클로드가 Wrangler로 Pages 프로젝트를 만들고 site 폴더만 직접 업로드합니다
클로드에게 Pages 배포 목록과 실제 주소 응답을 확인하게 하고 링크를 받으세요
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으로 올리세요
사이트 검사와 로그인 준비와 배포 명령을 클로드가 한 번에 처리합니다
사용자가 하는 일 : 로그인과 승인수정 뒤 “기존 프로젝트에 다시 배포해 주세요”라고 말하면 검사와 업로드를 반복합니다
사용자가 하는 일 : 완성 화면 확인클로드가 GitHub에 변경 내용을 올리면 연결된 호스팅이 자동으로 새 버전을 출판합니다
사용자가 하는 일 : 최초 GitHub 연결 승인Firebase는 기존 Hosting 설정 뒤 firebase init hosting:github로 자동 배포 파일을 만들 수 있습니다. Cloudflare는 Pages 프로젝트를 처음부터 Git Integration 방식으로 만들어야 합니다. 이미 Direct Upload로 만들었다면 기존 프로젝트를 바꾸지 말고 Git 연동용 새 Pages 프로젝트를 만드세요. 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 반영부터 실제 주소 갱신까지 확인해 주세요 완료하면 제가 다음부터 클로드에게 말할 한 문장만 마지막에 보여 주세요
꼭 지킬 안전 규칙
막혔을 때
기본 브라우저가 열릴 수 있도록 허용하고 클로드에게 로그인 명령을 다시 실행해 달라고 요청하세요. 원격 환경이라면 Firebase는 no-localhost 방식이 필요할 수 있습니다
이름 뒤에 주제와 연도 또는 짧은 숫자를 붙여 다시 시도하세요. 예시 : animal-guide-2026-51
site 폴더 바로 안에 index.html이 있는지, 이미지와 스크립트 경로가 site 기준 상대 경로인지 클로드에게 검사해 달라고 요청하세요
새로고침을 하고 잠시 기다린 뒤 다시 확인하세요. 그래도 같으면 클로드에게 최신 배포 목록과 실제 배포 폴더가 site인지 확인해 달라고 요청하세요
Firebase 콘솔에서는 프로젝트가 Spark인지 확인하고 Cloud Billing을 연결하지 마세요. Cloudflare 대시보드에서는 Workers & Pages의 Free 플랜과 사용량을 확인하세요. 한도는 바뀔 수 있으므로 아래 공식 문서를 함께 확인하세요
공식 문서 확인