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

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

구글 위스크 이미지

 

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

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

• [1부: Firebase란 무엇일까? 다시보기: Firebase로 나만의 웹 앱 만들기 (1부) ]
• [2부: 실시간 방명록 앱 만들기 다시보기: Firebase로 나만의 웹 앱 만들기 (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와 더 친해져 보시는 건 어떨까요? 여러분만의 멋진 프로젝트를 만들어보시길 응원합니다!