AI 디지털 혁신

Firebase로 나만의 웹 앱 만들기 (3부)

shinypeace 2025. 6. 19. 20:10

앱 공개하고 추가기능 아이디어 더하기

구글 위스크 이미지

 

세상에 공개하고 추가 기능 더하기

안녕하세요! Firebase로 나만의 웹 앱 만들기 시리즈의 마지막 3부입니다. 지난 1부에서는 Firebase의 개념을 알아보았고, 2부에서는 실제로 동작하는 귀여운 실시간 방명록 앱을 함께 만들어 보았습니다.
혹시 1, 2부를 놓치셨다면 먼저 보고 오시는 것을 추천해 드려요!

지금까지 우리는 내 컴퓨터에서만 열어볼 수 있는 HTML 파일을 가지고 있었습니다. 이번 3부에서는 드디어 이 방명록을 전 세계 누구나 접속할 수 있는 실제 웹사이트 주소(URL)로 만드는 '배포' 과정을 알아보고, 우리가 만든 방명록에 어떤 재미있는 기능들을 더 추가할 수 있을지 아이디어를 살펴보며 시리즈를 마무리하겠습니다.

⚙️ 배포를 위한 사전 준비 (내 컴퓨터를 Firebase와 연결하기)

우리가 만든 HTML 파일을 인터넷 세상에 올리려면, 내 컴퓨터에서 Firebase에게 "이 파일 좀 인터넷에 올려줘!" 라는 명령을 내려야 합니다. 이 명령을 내리기 위해 딱 한 번만 몇 가지 도구를 설치하는 과정이 필요합니다.

  1. Firebase 회원가입 및 로그인: 당연히 Firebase 콘솔에서 구글 계정으로 회원가입 및 로그인이 되어 있어야겠죠?
  2. Node.js 설치: 내 컴퓨터에서 npm이라는 명령어를 사용하기 위해 필요한 프로그램입니다. Node.js 공식 홈페이지(https://nodejs.org/ko/)에서 LTS 버전을 다운로드하여 설치해주세요. 설치 과정에서 특별히 바꿀 것 없이 계속 'Next'를 눌러주시면 됩니다.
  3. Firebase Tools 설치: Node.js가 설치되었다면, 컴퓨터의 '터미널' 또는 '명령 프롬프트(CMD)'를 열어 아래 명령어를 입력해주세요. 내 컴퓨터에 Firebase 관련 도구를 설치하는 과정입니다.
  4. npm install -g firebase-tools
  5. Firebase 로그인: 위 설치가 끝나면, 같은 터미널 창에서 아래 명령어로 내 컴퓨터와 Firebase 계정을 연결합니다. 브라우저 창이 열리면서 로그인하라는 안내가 나올 거예요.
  6. firebase login

자, 이제 모든 준비가 끝났습니다!

🚀 Firebase Hosting으로 나만의 링크 만들기

이제 내가 만든 방명록 HTML 파일을 인터넷에 올려 고유한 주소를 만들어 보겠습니다.

  1. 내 컴퓨터 바탕화면에 my-guestbook 같은 프로젝트 폴더를 만들고, 2부에서 만들었던 index.html 파일을 그 안에 넣어주세요.
  2. 터미널을 열어 cd 명령어로 방금 만든 프로젝트 폴더로 이동합니다.
  3. 폴더 안에서 firebase init hosting 명령어를 실행하고, 나타나는 질문에 아래와 같이 답변합니다.
    • Are you ready to proceed? (진행할까요?) -> Yes
    • Please select an option: (옵션을 고르세요) -> Use an existing project (기존 프로젝트 사용)
    • Select a default Firebase project... (프로젝트 선택) -> 내가 1부에서 만들었던 Firebase 프로젝트를 선택합니다.
    • What do you want to use as your public directory? (공개 폴더 이름은?) -> public 이라고 그대로 두고 엔터.
    • Configure as a single-page app...? (싱글 페이지 앱으로 설정할까요?) -> No
    • Set up automatic builds and deploys with GitHub? (깃허브와 연동할까요?) -> No
  4. 위 과정이 끝나면 내 프로젝트 폴더 안에 public이라는 폴더가 새로 생깁니다. 내가 만든 index.html 파일을 이 public 폴더 안으로 옮겨주세요. (만약 안에 이미 다른 파일이 있다면 지우고 내 파일을 넣으세요.)
  5. 모든 준비가 끝났습니다. 터미널에 마지막 마법의 주문을 외쳐주세요!
  6. firebase deploy

배포가 완료되면 터미널에 Hosting URL: https://... 와 같은 나만의 링크가 나타납니다. 이 링크를 친구에게 공유해보세요!

번외편: CMD 명령어 & 트러블슈팅 완전 정복

배포 과정에서 몇 가지 오류를 겪으셨나요? 괜찮아요! 누구나 겪는 일이랍니다. 우리가 사용했던 명령어들과 흔한 문제 해결법을 깔끔하게 정리해 드릴게요.
1. "npm" 또는 "firebase" 명령어를 찾을 수 없어요!

  • 'npm'은(는) 내부 또는 외부 명령... 메시지가 나온다면?
    • 원인: Node.js가 제대로 설치되지 않았거나, 컴퓨터가 Node.js의 위치를 모르는 경우입니다.
    • 해결: Node.js 공식 홈페이지에서 LTS 버전을 다시 설치해주세요. 설치 후에는 반드시 모든 터미널(CMD) 창을 껐다가 다시 켜야 합니다!
  • 'firebase'은(는) 내부 또는 외부 명령... 메시지가 나온다면?
    • 원인: npm install -g firebase-tools 과정에서 문제가 있었거나, Node.js 설치 후 터미널을 다시 시작하지 않은 경우입니다.
    • 해결: 터미널을 관리자 권한으로 실행한 뒤, npm install -g firebase-tools 명령어를 다시 한번 입력해보세요. 그리고 터미널을 껐다가 다시 켜는 것, 잊지 마세요!

2. firebase init hosting 질문, 다시 한번 정리!
가장 헷갈리는 부분이죠. 각 질문의 의미와 정답을 다시 한번 살펴볼게요.

  • What do you want to use as your public directory? -> public
    • "인터넷에 올릴 파일들을 어떤 폴더에 담을 건가요?" 라는 질문입니다. 보통 public이라는 이름을 그대로 사용합니다.
  • Configure as a single-page app...? -> No
    • "모든 주소를 index.html로 연결할까요?" 라는 질문인데, 우리는 파일이 하나뿐이므로 No로 답하는 것이 간단합니다.
  • File public/index.html already exists. Overwrite? -> No
    • "public 폴더에 index.html이 이미 있는데, 내가 만든 기본 파일로 덮어쓸까요?" 라는 함정 질문입니다. 여기에 Yes를 하면 애써 만든 방명록이 사라지니, 반드시 **No**를 선택해야 합니다.

3. 배포했는데 왜 똑같은 페이지만 보일까요?

  • 원인: 십중팔구 브라우저 캐시(Cache) 문제입니다. Firebase에는 새로운 파일이 잘 올라갔지만, 내 브라우저가 예전의 "환영합니다" 페이지 모습을 기억하고 있어서 계속 그 페이지만 보여주는 것입니다.
  • 해결:
    • 강력 새로고침: 방명록 페이지에서 Ctrl + Shift + R 키를 동시에 누릅니다. (Mac은 Cmd + Shift + R)
    • 시크릿 모드: 가장 확실한 방법입니다. 브라우저의 시크릿 모드(사생활 보호 모드)로 새 창을 열고 링크에 접속해보세요.

이 가이드만 있으면, 앞으로 어떤 프로젝트를 배포하든 자신감이 생길 거예요!

✨ 우리 방명록, 어떻게 더 발전시킬 수 있을까? (기능 아이디어)

현재 우리 방명록은 익명으로 글을 쓰고, 내가 쓴 글을 수정/삭제하며, 관리자 비밀번호로 전체 초기화를 할 수 있습니다. 여기서 어떤 기능을 더 추가해볼 수 있을까요?

  • 관리자 전용 페이지: 지금은 prompt 창으로 간단하게 비밀번호를 묻지만, 아예 '관리자 로그인' 기능을 만들어 관리자만 접속할 수 있는 페이지를 만들 수 있습니다. 여기서는 모든 글을 관리하거나 공지사항을 띄울 수 있겠죠?
  • 비밀번호로 글 수정/삭제: 지금은 익명 로그인 ID로 '내 글'을 구분하지만, 글을 쓸 때 각 글마다 비밀번호를 설정하게 할 수도 있습니다. 그러면 브라우저를 껐다 켜도 비밀번호만 알면 누구나 글을 수정하거나 삭제할 수 있게 됩니다. (이미 코드에 반영되어 있음)
  • 이미지 업로드 기능: Firebase의 'Storage' 기능을 활용하면, 글뿐만 아니라 사진도 함께 올릴 수 있는 방명록을 만들 수 있습니다. 여행 사진을 올리고 글을 남기면 더 멋지겠죠?
  • 댓글 기능: 글마다 댓글을 달 수 있는 기능을 추가해볼 수도 있습니다. Firestore의 데이터 구조를 조금 더 복잡하게 설계하면 충분히 구현 가능합니다.
  • 소셜 로그인: 지금은 익명 로그인이지만, **'Authentication'**에서 구글, 페이스북, 깃허브 등 소셜 로그인 기능을 활성화하면 사용자들이 자신의 소셜 계정으로 로그인해서 글을 남기게 할 수도 있습니다.

시리즈를 마치며

총 3회에 걸쳐 Firebase의 매력을 알아보고, 직접 나만의 웹 앱을 만들어 세상에 공개하는 과정까지 함께했습니다. 복잡한 서버 코딩 없이도 아이디어만 있다면 이렇게 쉽고 빠르게 실제 작동하는 서비스를 만들 수 있다는 점이 Firebase의 가장 큰 장점입니다.
여기서 멈추지 마시고, 오늘 알아본 추가 기능 아이디어들을 직접 구현해보면서 Firebase와 더 친해져 보시는 건 어떨까요? 여러분만의 멋진 프로젝트를 만들어보시길 응원합니다!