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

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

안녕하세요! 오늘은 코딩 경험이 전혀 없는 분들도 따라 할 수 있는 '나만의 웹 앱 만들기' 프로젝트를 시작해보려 합니다. 학생들이 학교생활 속에서 긍정적인 활동을 기록하고, 선생님이 포인트를 주며 격려하는 간단한 '세계시민활동' 앱을 함께 만들어 볼 거예요.

최종 목표는 학생들이 휴대폰이나 컴퓨터로 접속해서 활동 사진과 글을 올리고, 자신의 등급과 점수를 확인하는 것입니다. 오늘은 그 첫 단계로, 앱이 작동할 땅을 마련하고 집의 뼈대를 세우는 작업을 해볼게요!

우리가 만들 마법의 도구, Firebase

서버니, 데이터베이스니 하는 어려운 말들은 잠시 잊으셔도 괜찮습니다. 우리는 구글이 만든 'Firebase(파이어베이스)'라는 아주 편리한 도구를 사용할 거예요. Firebase는 우리 앱이 회원가입, 로그인, 데이터 저장, 사진 저장 같은 복잡한 기능들을 서버 없이도 쉽게 구현할 수 있도록 도와주는 마법 상자랍니다. 대부분의 기능이 넉넉하게 무료로 제공되니 비용 걱정도 없어요!

1단계: Firebase 프로젝트 만들기 (우리 앱의 '땅' 사기)

가장 먼저, 우리 앱이 살아갈 공간인 Firebase 프로젝트를 만들어야 합니다.

1. Firebase 콘솔 사이트로 이동해서 구글 계정으로 로그인해주세요.
2. '프로젝트 추가' 버튼을 누르고, 프로젝트 이름을 정해주세요. (예: citizen-badge 또는 우리반챌린지)
3. '이 프로젝트에서 Google 애널리틱스 사용'은 지금은 체크를 해제하고 넘어가도 괜찮습니다.
4. 프로젝트가 만들어지면, 메인 화면에서 웹 앱을 의미하는 </> 아이콘을 클릭하세요.
5. 앱 닉네임을 정하고 '앱 등록' 버튼을 누릅니다. 'Firebase 호스팅 설정'은 지금 선택하지 않으셔도 됩니다.
6. 다음 단계에서 firebaseConfig 라는 코드가 보일 거예요. 이것이 바로 우리 앱의 고유한 '주소'입니다. 이 코드를 복사해서 메모장 같은 곳에 잘 보관해주세요. 나중에 꼭 필요합니다!

 

2단계: 앱의 핵심 기능 켜기 (전기, 수도, 가스 연결하기)

이제 막 마련한 땅에 우리 집이 쓸 전기, 수도, 가스를 연결하는 단계입니다.

Firebase 콘솔 왼쪽 메뉴에서 아래 기능들을 찾아 활성화해주세요.

1. Authentication (인증): '시작하기'를 누르고, 로그인 제공업체 목록에서 **'이메일/비밀번호'**를 찾아 '사용 설정'으로 바꿔주세요. 사용자들이 아이디와 비밀번호로 가입하고 로그인할 수 있게 해주는 기능입니다.
2. Firestore Database (데이터베이스): '데이터베이스 만들기'를 클릭하고, 보안 규칙은 **'테스트 모드에서 시작'**을 선택하세요. 게시글, 사용자 정보, 포인트 등이 저장될 '파일 캐비닛' 역할을 합니다.
3. Storage (스토리지): '시작하기'를 누르고 기본 설정을 완료해주세요. 학생들이 올리는 사진 파일이 보관될 '사진 앨범'입니다.

3단계: HTML 파일 만들기 (집의 '설계도' 그리기)

이제 컴퓨터에 global.html (또는 원하는 이름) 파일을 만들고, 아래 코드를 그대로 복사해서 붙여넣어 주세요. 이 코드는 우리 앱의 전체적인 구조와 디자인을 담당하는 뼈대입니다.

    
    
    
      
        // Firebase 전문가 불러오기
        import { initializeApp } from "<a href=https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js>https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js</a>";
        // ... (다른 import 구문들)

        // 1단계에서 복사해 둔 우리 앱의 '주소'를 여기에 붙여넣으세요!
        const firebaseConfig = {
          apiKey: "여러분의-API-키",
          authDomain: "여러분의-프로젝트.firebaseapp.com",
          projectId: "여러분의-프로젝트-ID",
          storageBucket: "여러분의-프로젝트.appspot.com",
          messagingSenderId: "숫자-ID",
          appId: "앱-ID"
        };
        
        // Firebase 앱 초기화
        const app = initializeApp(firebaseConfig);

    ```firebaseConfig` 객체 부분에는 1단계에서 복사해 두었던 **본인의 프로젝트 정보**를 정확하게 붙여넣어야 합니다. 이 부분이 틀리면 앱이 Firebase와 연결되지 않아요! --- ### **미리보는 앱 관리 꿀팁 (선생님 필독!)** 앱을 운영하다 보면 학생의 계정을 관리하거나, 잘못 올라온 게시물을 삭제해야 할 때가 생기겠죠? Firebase 콘솔에서 모든 것을 직접 관리할 수 있답니다. * **학생 계정 관리 (비밀번호 재설정 / 계정 삭제)** * **방법:** Firebase 콘솔 > **Authentication** 메뉴로 이동합니다. * 학생들의 이메일 주소 목록이 보일 거예요. 관리하고 싶은 학생 계정의 맨 오른쪽에 있는 점 세 개(⋮) 메뉴를 누르면 '비밀번호 재설정'이나 '계정 삭제'를 할 수 있습니다. '비밀번호 재설정'을 누르면 해당 학생의 이메일로 비밀번호를 바꿀 수 있는 링크가 전송됩니다. * **게시물/사진 삭제하기** * **1. 사진 파일 삭제:** Firebase 콘솔 > **Storage** 메뉴로 갑니다. `posts/default-citizen-app/` 폴더로 들어가면 학생들이 올린 사진 파일들이 보일 거예요. 여기서 원하지 않는 사진을 선택해서 삭제할 수 있습니다. * **2. 게시글 데이터 삭제:** 사진을 지워도 글은 그대로 남아요! 글까지 완전히 지우려면 Firebase 콘솔 > **Firestore Database** 메뉴로 가세요. `artifacts` -> `default-citizen-app` -> `public` -> `data` -> `posts` 순서로 들어가서, 삭제하고 싶은 게시글 문서를 찾아 통째로 삭제해주시면 됩니다. 이런 관리 기능은 2탄에서 앱을 완성한 뒤에 사용하시게 될 거예요. 미리 알아두시면 훨씬 편리하겠죠? --- 자, 여기까지 하셨다면 정말 대단해요! 우리는 앱이 살아갈 땅을 사고, 핵심 기능을 연결한 뒤, 집의 뼈대까지 세웠습니다. 아직은 아무 기능도 작동하지 않는 텅 빈 집이지만, 가장 중요한 기초 공사는 모두 끝났습니다. **다음 2탄에서는 자바스크립트라는 마법 주문으로 회원가입, 로그인, 글쓰기 기능을 실제로 움직이게 만들고, 모두가 접속할 수 있는 진짜 인터넷 주소로 세상에 공개하는 방법을 알아보겠습니다!**