바이브코딩으로 만드는 나만의 게임과 학습 도구

5차시 / 전체 6차시

계정 인증과 클라우드 데이터베이스 구축하기

내 데이터베이스를 만들어 연결한다

5계정 인증과 클라우드 데이터베이스 구축하기

오늘의 흐름 · 45분

00~06분왜 로그인이 필요한가
06~18분내 파이어베이스 프로젝트
18~24분설정값과 도메인 등록
24~36분로그인 붙이고 올리기
36~45분보안 규칙 — 오늘의 핵심

시간은 안내일 뿐입니다. 막히는 사람이 많으면 실습 시간을 늘립니다.

5계정 인증과 클라우드 데이터베이스 구축하기

지난 시간 만든 도구

집에서는 비어 있습니다

주소는 어디서나 열리는데, 적어 둔 내용은 학교 컴퓨터에만 있습니다.
어디서나 같은 내용을 보려면 두 가지가 필요합니다.

5계정 인증과 클라우드 데이터베이스 구축하기

오늘 붙일 두 가지

🖥️ 학교 PC 💻 집 노트북 📱 휴대폰 🔐 구글 로그인 내가 누구인지 ☁️ 인터넷에 저장 내 계정 자리에 적어 둠 어느 기기로 들어와도 같은 계정이면 같은 내용
로그인이 '나'를 확인하고, 클라우드가 내 계정 자리에 내용을 적어 둡니다.
5계정 인증과 클라우드 데이터베이스 구축하기

오늘은

내 데이터베이스를 만듭니다

남의 서버를 빌려 쓰는 게 아니라,
내 이름으로 된 데이터베이스를 직접 만들어 연결합니다.

5계정 인증과 클라우드 데이터베이스 구축하기

만들 구조

내 파이어베이스 프로젝트 🔑 Authentication 구글 로그인 내가 누구인지 확인 🗄️ Firestore 데이터베이스 내용을 적어 두는 곳 내 도구 todo.html 어느 기기든 같은 내용 프로젝트는 내 구글 계정으로 만듭니다 — 내 데이터베이스입니다 만들자마자는 누구나 읽고 쓸 수 있는 상태입니다. 규칙을 반드시 바꾸세요
프로젝트 하나 안에 로그인과 데이터베이스가 함께 들어 있습니다.
5계정 인증과 클라우드 데이터베이스 구축하기

프로젝트 만들기

console.firebase.google.com에 영재원 계정으로 로그인하고 프로젝트 추가를 누릅니다. 이름은 영문으로, 애널리틱스는 꺼도 됩니다.

파이어베이스 프로젝트 만들기 화면
5계정 인증과 클라우드 데이터베이스 구축하기

프로젝트 안에서 할 일 네 가지

1
로그인 켜기Authentication → Google 사용 설정
2
데이터베이스Firestore → 만들기 → 테스트 모드
3
설정값 복사⚙️ → 웹 앱 추가 → firebaseConfig
4
도메인 등록Authentication → Settings → 내 주소 추가

4번을 빠뜨리면 로그인 창이 아예 열리지 않습니다. 가장 많이 놓치는 단계입니다.

5계정 인증과 클라우드 데이터베이스 구축하기

내 주소를 등록하기

Authentication → Settings → 승인된 도메인에 내아이디.github.io를 추가합니다. https://와 뒤의 저장소 이름은 빼고 도메인만 넣습니다.

console.firebase.google.com — Authentication
5계정 인증과 클라우드 데이터베이스 구축하기

이제 직접

12분, 로그인 붙이기

내 설정값을 복사해 프롬프트에 함께 넣고,
코드를 받아 내 저장소에 올리세요.

5계정 인증과 클라우드 데이터베이스 구축하기

안 될 때 화면에 뜨는 말

  • unauthorized-domain — 내 주소를 승인된 도메인에 안 넣었음
  • popup-blocked — 브라우저가 로그인 창을 막음. 주소창 오른쪽 확인
  • permission-denied — 규칙이 막음. 저장 위치 확인
  • api-key-not-valid — 설정값을 잘못 붙여넣음

캔버스 미리보기에서는 로그인 창이 안 뜰 수 있습니다. 내 주소에서 확인하세요.

5계정 인증과 클라우드 데이터베이스 구축하기

가장 중요한 9분

보안 규칙 쓰기

지금 여러분의 데이터베이스는 누구나 읽고 쓸 수 있는 상태입니다.
테스트 모드로 만들었기 때문입니다.

5계정 인증과 클라우드 데이터베이스 구축하기

규칙이 하는 일

🙋 나 🧑 다른 친구 🛡️ 보안 규칙 내 것은 나만 점수는 모두 공개 삭제는 아무도 못 함 🔒 내 할 일 · 내 시간표 나만 읽고 쓸 수 있음 🏆 게임 점수 · 작품 목록 모두가 보되, 내 기록만 내가 고침 막힘
이 규칙이 없으면 주소를 아는 누구나 내 기록을 지울 수 있습니다.
5계정 인증과 클라우드 데이터베이스 구축하기

규칙을 한 줄씩 읽어 봅시다

  • 내 할 일은 나만 읽고 쓴다
  • 로그인하지 않은 사람은 아무것도 못 한다
  • 지우기는 아무도 못 한다
  • 그 외의 모든 곳은 막혀 있다

워크벤치에서 규칙을 복사해 Firestore → 규칙 탭에 붙여넣고 게시를 누릅니다.

5계정 인증과 클라우드 데이터베이스 구축하기

함께 지킬 것

  • 저장되는 것은 계정 번호와 내가 적은 내용뿐입니다
  • 남에게 알려지면 곤란한 내용은 적지 않습니다
  • 내 데이터는 내가 지울 수 있습니다 — 내 프로젝트니까요
  • 저장을 반복문 안에 넣으면 순식간에 수만 번 기록됩니다 — 주의
5계정 인증과 클라우드 데이터베이스 구축하기

다음 시간

전시관을 엽니다

친구들이 내 게임을 하고, 점수가 랭킹에 올라갑니다.

1 / 16 🏠 홈 🛠️ 워크벤치 1차시2차시3차시4차시6차시