Claude Code + Firebase 한방 배포 | 명령어 하나로 교구 제작부터 배포까지

Claude Code에서 교구 만들고, 같은 터미널에서 firebase deploy 치면 끝. 진짜 한방입니다.

이전 글에서 Claude Code로 교구를 만들고, Firebase Hosting에 배포하는 방법을 각각 다뤘습니다. 그런데 솔직히, 두 글을 왔다 갔다 하면서 따라하기 번거롭지 않으셨나요?

오늘은 Claude Code와 Firebase를 하나의 터미널에서 연결하는 실전 워크플로우를 보여드리겠습니다. 교구를 만들고, 테스트하고, 전 세계에 배포하는 것까지 — 창 하나에서 전부 끝납니다.

왜 Claude Code + Firebase 조합인가?

교구를 만드는 도구와 배포하는 도구가 따로 놀면 불편합니다. Claude Code에서 만든 HTML 파일을 폴더에서 찾아서 Firebase Console에 올리고... 수정할 때마다 이 과정을 반복해야 하죠.

그런데 둘 다 터미널(명령줄)에서 동작합니다. 이 말은 곧, 같은 창에서 연달아 실행할 수 있다는 뜻이에요.

특히 교구를 수정할 때 차이가 큽니다. "버튼 색 바꿔줘" → Claude Code가 수정 → firebase deploy → 학생들이 보는 화면이 바로 업데이트. 수정부터 반영까지 30초면 됩니다.

사전 준비: 3가지만 설치하세요

이미 설치되어 있다면 건너뛰세요. 하나라도 빠지면 안 되니 확인만 해주세요.

#	도구	설치 방법	확인 명령어
1	Node.js	nodejs.org에서 LTS 버전 다운로드 → 설치	node --version → v20 이상이면 OK
2	Firebase CLI	터미널에서 npm install -g firebase-tools	firebase --version → 13 이상이면 OK
3	Claude Code	터미널에서 npm install -g @anthropic-ai/claude-code	claude --version → 버전 번호가 나오면 OK

firebase login

브라우저가 열리면서 구글 로그인 화면이 나옵니다. 로그인하면 터미널에 "Success! Logged in as 이메일" 메시지가 뜹니다. 이후로는 다시 로그인할 필요 없습니다.

node --version && firebase --version && claude --version

세 줄 모두 버전 번호가 나오면 준비 완료입니다.

실전 워크플로우: 5단계로 끝

mkdir ~/Desktop/quiz-tool
cd ~/Desktop/quiz-tool

바탕화면에 quiz-tool 폴더가 생깁니다. 교구 파일과 Firebase 설정이 모두 이 폴더에 들어갑니다.

같은 터미널에서 Claude Code를 실행합니다.

claude

Claude Code가 시작되면 교구를 요청합니다.

> 통합사회 인권 단원 OX퀴즈 교구를 만들어줘.
  문제 10개, 타이머 30초, 점수 표시.
  파일명은 index.html로 해줘.
  다 만들면 테스트해보고 문제 있으면 알려줘.

Claude Code가 교구를 만들었으면 /exit로 나옵니다. (또는 Ctrl + C)

> /exit

Claude Code를 나왔으니, 이제 같은 터미널에서 Firebase 초기화를 합니다.

firebase init hosting

몇 가지 질문이 나옵니다. 이렇게 답하세요:

질문	답변
Use an existing project or create a new one?	Use an existing project (이전에 만든 거 선택) 또는 Create a new project
What do you want to use as your public directory?	. (점 하나 입력 — 현재 폴더를 그대로 사용)
Configure as a single-page app?	No
Set up automatic builds with GitHub?	No
File ./index.html already exists. Overwrite?	No (절대 No! Claude Code가 만든 파일을 덮어쓰면 안 됩니다)

배포 전에 내 컴퓨터에서 먼저 확인하고 싶다면:

firebase serve

터미널에 http://localhost:5000 주소가 나옵니다. 브라우저에서 열면 교구가 보여요. 확인이 끝나면 Ctrl + C로 종료합니다.

firebase deploy

10~20초 후, 터미널에 이런 메시지가 나옵니다:

✅ Deploy complete!

Hosting URL: https://my-quiz-tool.web.app

이 URL을 학생들에게 공유하면 됩니다. 끝입니다. 진짜로요.

링크를 카톡으로 보내도 되고, QR코드로 만들어도 되고, 학급 게시판에 올려도 됩니다. 학생은 별도 설치 없이 브라우저에서 바로 교구를 사용할 수 있습니다.

교구 수정하고 재배포하기 (30초)

배포 후에 "버튼 색이 마음에 안 든다", "문제를 하나 더 추가하고 싶다" — 이런 상황이 생기겠죠. 이때가 바로 이 조합의 진가가 발휘되는 순간입니다.

# 1. Claude Code 실행
claude

# 2. 수정 요청
> 시작 버튼 색을 파란색으로 바꾸고, 문제 끝나면 "한 번 더 풀기" 버튼 추가해줘

# 3. Claude Code 나오기
> /exit

# 4. 재배포 (이 한 줄이면 끝!)
firebase deploy

초기화(firebase init)는 처음 한 번만 하면 됩니다. 이후로는 수정 → firebase deploy만 반복하면 돼요. 30초면 학생들이 보는 화면이 업데이트됩니다.

> 수정 다 됐으면 firebase deploy 실행해줘

Claude Code가 터미널 명령을 실행할 권한이 있다면, 교구 수정부터 배포까지 Claude Code 안에서 전부 끝납니다. 진정한 한방이죠.

💡 자동화 팁: 더 빠르게 하는 방법들

1. 배포 스크립트 만들기

매번 명령어를 입력하기 귀찮다면, 배포 스크립트를 만들어두세요.

# deploy.sh (맥/리눅스) 또는 deploy.bat (윈도우)

echo "배포를 시작합니다..."
firebase deploy --only hosting
echo "배포 완료!"

이후로는 ./deploy.sh (맥) 또는 deploy.bat (윈도우) 한 번이면 끝입니다.

2. 여러 교구를 한 프로젝트에서 관리하기

교구마다 새 프로젝트를 만들 필요 없습니다. 폴더 구조만 잘 잡으면 하나의 Firebase 프로젝트에서 여러 교구를 관리할 수 있어요.

my-tools/
  ├─ index.html          ← 메인 페이지 (교구 목록)
  ├─ ox-quiz/
  │     └─ index.html   ← OX퀴즈
  ├─ card-match/
  │     └─ index.html   ← 카드 매칭 게임
  └─ timeline/
        └─ index.html   ← 연표 정리

배포하면 이런 주소가 됩니다:

• https://my-tools.web.app/ — 교구 목록
• https://my-tools.web.app/ox-quiz/ — OX퀴즈
• https://my-tools.web.app/card-match/ — 카드 매칭
• https://my-tools.web.app/timeline/ — 연표 정리

3. Claude Code에게 폴더 구조까지 맡기기

> 새 교구를 만들어줘. 주제는 민주주의 발전 과정 연표.
  card-match 폴더 안에 index.html로 만들어줘.
  기존 메인 index.html에도 이 교구 링크를 추가해줘.

Claude Code가 폴더를 만들고, 교구를 생성하고, 메인 페이지에 링크까지 추가합니다. 그 다음 firebase deploy 한 번이면 전부 배포 완료.

🔧 트러블슈팅: 이런 에러가 나왔다면

#	증상	원인	해결
1	firebase: command not found	Firebase CLI가 설치 안 됨	npm install -g firebase-tools 실행
2	Error: No project active	Firebase 프로젝트가 연결 안 됨	firebase init hosting을 다시 실행하고 프로젝트 선택
3	배포는 되는데 빈 화면	index.html이 없거나, public 폴더 경로가 잘못됨	firebase.json에서 "public": "."인지 확인
4	Error: Failed to get Firebase project	Firebase 로그인이 만료됨	firebase login으로 다시 로그인
5	index.html이 Firebase 기본 페이지로 덮어써짐	firebase init 때 Overwrite에 Yes 누름	Claude Code에게 "index.html 다시 만들어줘" 요청

{
  "hosting": {
    "public": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

"public": "." — 현재 폴더를 배포한다는 뜻입니다. 이게 "public"으로 되어 있으면 public 폴더를 만들고 거기에 index.html을 넣어야 합니다.

오늘 배운 것 정리

1. 사전 준비: Node.js + Firebase CLI + Claude Code 설치 (최초 1회)
2. 프로젝트 초기화: firebase init hosting (프로젝트당 1회)
3. 교구 생성: Claude Code에서 index.html 생성
4. 배포: firebase deploy (이 한 줄이면 끝!)
5. 수정 → 재배포: Claude Code로 수정 → firebase deploy (30초)

핵심은 이겁니다. Claude Code는 교구를 만드는 도구, Firebase는 배포하는 도구. 둘 다 터미널에서 돌아가니까 자연스럽게 연결됩니다. 어렵게 생각할 것 없어요. 만들고 → 배포하고 → 수정하고 → 재배포하고. 이 루프가 30초 안에 돌아간다는 게 이 조합의 강점입니다.

Claude Code와 Firebase 조합으로 교구를 배포해 보셨나요? 경험이나 궁금한 점을 댓글로 남겨주세요! 같이 배우면 더 빠르게 익힐 수 있습니다. 😊