firebase 바이브 코딩으로 챌린지앱 만들기(2)

코딩 1도 몰라도 괜찮아! 우리 반만의 챌린지 앱 만들기 (2탄)

안녕하세요! 지난 1탄에서는 Firebase 프로젝트를 만들고, HTML로 앱의 뼈대를 세우는 작업을 했습니다. 오늘은 드디어 이 뼈대에 살을 붙여 앱을 실제로 살아 움직이게 만드는 시간입니다!

로그인, 회원가입, 글쓰기, 사진 올리기, 선생님의 승인 기능까지! 자바스크립트 코드로 모든 기능을 완성하고, 마지막으로 우리 앱을 진짜 인터넷 주소로 세상에 공개하는 방법까지 함께 알아볼게요.

 

4단계: 보안 규칙 설정하기 (우리 집 '현관문'과 '규칙' 만들기)

본격적으로 기능을 만들기 전, 아주 중요한 작업이 있습니다. 바로 우리 앱의 '보안 규칙'을 정하는 일이에요. 이 규칙이 없으면 아무나 우리 집에 들어와 데이터를 망가뜨릴 수 있어요.

1. 데이터베이스(Firestore) 규칙 설정

• Firebase 콘솔 > Firestore Database > 규칙(Rules) 탭으로 이동하세요.
• 기존 코드를 모두 지우고 아래 코드로 교체한 뒤 **'게시'**를 누르세요.
  • 의미: 로그인한 사용자(request.auth != null)는 누구나 데이터를 읽고 쓸 수 있다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

2. 사진 저장소(Storage) 규칙 설정

• Firebase 콘솔 > Storage > 규칙(Rules) 탭으로 이동하세요.
• 마찬가지로 기존 코드를 아래 코드로 교체하고 **'게시'**를 누르세요.
  • 의미: 로그인한 사용자(request.auth != null)는 누구나 파일을 올리고 볼 수 있다.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

5단계: 자바스크립트로 기능 만들기 (앱에 '마법 주문' 걸기)

이제 1탄에서 만들었던 global.html 파일의 <script type="module"> 태그 안을 채워나갈 시간입니다. 우리가 함께 완성했던 앱 코드의 <script> 태그 안 내용을 모두 복사해서 붙여넣어 주세요. (이전 대화의 완성된 코드를 사용하세요!)

이 코드가 바로 회원가입, 글쓰기, 승인 등 모든 실제 기능을 담당하는 '마법 주문'입니다.

6단계: 교사 계정 설정하기 (선생님께 '마스터키' 드리기)

우리 앱은 코드가 특정 사용자를 선생님으로 인식해야 '승인/반려' 버튼이 나타납니다.

1. 완성된 앱을 브라우저에서 열고, 선생님이 사용하실 이메일과 비밀번호로 직접 회원가입을 해주세요.
2. 가입 후, 다시 Firebase 콘솔의 Authentication 메뉴로 갑니다.
3. 방금 가입한 선생님 계정이 목록에 보일 거예요. 해당 계정의 '사용자 UID' 값을 복사하세요. (알파벳과 숫자로 된 긴 문자열입니다.)
4. 이제 코드에서 아래 부분을 찾아서, 복사한 UID를 붙여넣어 주세요.

const TEACHER_UID = "여기에_복사한_선생님_UID를_붙여넣으세요";

이제 이 계정으로 로그인하면, 선생님에게만 보이는 관리자 기능이 활성화됩니다!

7단계: 세상에 공개하기! (Firebase 호스팅으로 배포)

지금까지는 내 컴퓨터에서만 앱을 볼 수 있었죠. 이제 모두가 쓸 수 있는 진짜 인터넷 주소를 만들 차례입니다. 조금 낯설 수 있는 '터미널' 작업을 할 거지만, 그대로 따라만 하시면 됩니다!

1. 준비 작업 (내 컴퓨터에 딱 한 번만)

• Node.js 설치: Node.js 공식 사이트에서 LTS 버전을 받아 설치해주세요.
• Firebase 도구 설치: 컴퓨터의 터미널(윈도우는 명령 프롬프트 또는 cmd, 맥은 터미널)을 열고 아래 명령어를 입력하세요.
• npm install -g firebase-tools

2. 배포 과정

1. Firebase 로그인: 터미널에 firebase login을 입력하고, 인터넷 창이 열리면 구글 계정으로 로그인해주세요.
2. 프로젝트 폴더로 이동: 가장 중요! 터미널에서 cd 명령어를 이용해 global.html 파일이 있는 폴더(예: my-website)로 이동해야 합니다.
   • 예시: cd C:\Users\사용자명\Desktop\my-website
3. 프로젝트 연결: 해당 폴더 안에서 firebase init을 입력하고, 나타나는 질문에 아래와 같이 답변해주세요.
   • Are you ready to proceed? -> Y
   • Which Firebase features...? -> 방향키와 스페이스바로 Hosting 선택 후 Enter
   • Please select an option: -> Use an existing project 선택
   • Select a default Firebase project... -> 본인의 프로젝트 이름(citizen-badge) 선택
   • What do you want to use as your public directory? -> public 이라고 그냥 Enter
   • Configure as a single-page app? -> N
   • Set up automatic builds...? -> N
   • File public/index.html already exists. Overwrite? -> 절대 안됨! N
4. 배포!: 이제 마지막 명령어입니다. 터미널에 아래와 같이 입력하세요.
5. firebase deploy ```✔ Deploy complete!` 메시지가 나오면 성공입니다! 바로 아래 **`Hosting URL:`** 에 있는 주소가 바로 여러분의 앱 주소입니다. 이 주소로 접속하면 아래와 같은 성공 화면이 보일 거예요!

이제 public 폴더 안에 있는 index.html 파일을 여러분이 만든 global.html의 내용으로 바꾸고 다시 firebase deploy를 하면, 여러분의 앱이 진짜로 나타납니다!

마치며

축하합니다! 여러분은 직접 기획하고, 개발하고, 배포까지 마친 하나의 완벽한 웹 앱을 갖게 되셨습니다. 이 과정을 통해 꼭 개발자가 아니더라도 누구나 자신만의 아이디어를 현실로 만들 수 있다는 자신감을 얻으셨기를 바랍니다.

이제 이 앱을 기반으로 점수 체계를 바꾸거나, 새로운 레벨을 추가하거나, 디자인을 바꿔보는 등 자유롭게 여러분만의 앱으로 발전시켜 나가보세요!