GSP643

개요

릴리는 12년 전에 Pet Theory 동물병원 체인을 시작했습니다. 지난 몇 년 동안 Pet Theory 동물병원 체인은 급격히 성장했습니다. 기존의 일정 예약 시스템은 증가된 로드를 처리하거나 고객이 직접 방문 일정을 예약할 수 없으므로 릴리는 IT 부서의 패트릭과 컨설턴트인 루비에게 쉽게 확장 가능한 클라우드 기반 시스템을 빌드해 달라고 요청합니다. 이 실습에서는 사용자가 실시간으로 정보를 기록하고 방문 일정을 예약할 수 있는 완전한 Firebase 웹 앱을 빌드해 봅니다.

아키텍처

이 다이어그램은 사용할 서비스에 대한 개요와 이러한 서비스가 서로 연결되는 방식을 보여줍니다.

목표

이 실습에서는 다음 작업을 수행하는 방법을 배웁니다.

• Firestore 보안을 구성하여 서버 측 인증 및 승인을 자동화합니다.
• 웹 앱에 Google 로그인 기능을 추가합니다.
• 사용자가 연락처 정보를 추가할 수 있도록 데이터베이스를 구성합니다.
• 사용자가 방문 일정을 예약할 수 있게 하는 코드를 살펴보고 배포합니다.
• Firebase의 실시간 업데이트를 웹 앱에서 살펴봅니다.

기본 요건

이 실습은 중급 수준이며 Cloud 콘솔 및 셸 환경에 익숙하다는 가정하에 진행됩니다. Firebase 사용 경험이 있으면 도움이 되지만 필수는 아닙니다. 이 실습을 시작하기 전에 다음 실습을 완료하는 것이 좋습니다.

• Firestore 데이터베이스로 데이터 가져오기

파일 편집에도 익숙해야 합니다. 자주 사용하는 텍스트 편집기(nano, vi 등) 또는 상단 리본에서 찾을 수 있는 Cloud Shell의 코드 편집기를 실행할 수 있습니다.

준비가 되면 아래로 스크롤하여 아래 단계에 따라 실습 환경을 설정하세요.

Firebase 백엔드

루비가 패트릭에게 이메일을 보냅니다.

루비, 소프트웨어 컨설턴트	패트릭님, 안녕하세요. 지난주에는 정말 수고 많으셨습니다. 병원 데이터가 Firestore로 마이그레이션되었다니 기쁘네요. 이제 Firebase를 사용하여 Pet Theory 웹사이트를 호스팅해야 할 것 같습니다. 루비
패트릭, IT 관리자	루비님, 안녕하세요. Firebase 호스팅에 대해서는 들어본 적이 없는데 어떤 이점이 있나요? 어떻게 시작하면 되죠? 패트릭
루비, 소프트웨어 컨설턴트	패트릭님, 안녕하세요. Firebase 호스팅은 서버리스여서 관리할 인프라가 없다는 주요 이점이 있습니다. 보안 규칙도 애플리케이션에 기본 제공되므로 고객 데이터를 처리할 때 발생하는 문제를 최소화하기 위해 권한을 제한할 수 있죠. '사용한 만큼만 지불'하는 모델인 Firebase는 Pet Theory의 사용 사례에 적합한 포괄적인 모바일 개발 플랫폼입니다. 루비
패트릭, IT 관리자	루비님, 안녕하세요. Firebase를 사용하면 제가 맡고 있는 업무의 큰 부분인 보안 및 인프라 관리가 훨씬 쉬워질 것 같네요. 유휴 상태인 서버에는 비용이 청구되지 않는다는 점도 흥미롭고요. 패트릭

루비는 패트릭에게 이메일로 몇 가지 배경 정보를 보내고 두 사람은 회의를 열어 주요 활동을 결정합니다. 이 회의에서는 패트릭이 진행해야 할 다음 작업을 결정합니다.

• Firebase 프로젝트 구성
• 보안 정책 수립
• Firestore CLI를 Google Cloud 프로젝트에 추가

이제 패트릭을 도와 이러한 작업을 완료하세요.

작업 1. Firebase 애플리케이션 등록

시크릿 창을 열고 Firebase Console로 이동합니다.

요청 시 다음을 입력합니다.

• 사용자 이름:
• 비밀번호:

참고: 라벨이 지정된 Firebase 프로젝트가 프로비저닝되었습니다. 이 프로젝트를 선택하여 Console에 액세스합니다.

1. 메시지가 표시되면 Firebase 이용약관에 동의하고 계속을 클릭합니다.

2. 프로젝트 개요 페이지에서 + 앱 추가를 클릭한 다음 웹 아이콘을 선택합니다.

3. '앱 닉네임'에 관한 메시지가 표시되면 Pet Theory를 입력합니다.

4. 또한 이 앱의 Firebase 호스팅을 설정하세요 옆의 체크박스를 선택합니다.

5. 사이트 드롭다운에서 새로운 사이트 만들기를 선택하거나 프로젝트 ID(실습 세부정보에 안내된 정보)와 일치하는지 확인합니다

6. 앱 등록 버튼을 클릭합니다.

7. 이후 단계(Firebase SDK 추가, Firebase CLI 설치, Firebase 호스팅에 배포)에서 다음 또는 Console로 이동을 클릭하여 기본 대시보드로 돌아갑니다.

이제 Firebase 애플리케이션이 구성되었습니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

Firebase 앱 등록

작업 2. Firebase 제품 사용 설정

Firebase 인증

Firebase Console에서 Firebase 인증을 설정하여 사용자가 Google 계정으로 로그인할 수 있도록 합니다.

1. 왼쪽 탐색 메뉴에서 인증을 클릭합니다(고정되지 않은 경우 프로젝트 바로가기 또는 제품 카테고리 > 보안에서 찾을 수 있음).

2. 처음인 경우 시작하기를 클릭합니다.

3. 로그인 방법 탭의 제공업체 목록에서 Google을 선택합니다.

4. 구성 대화상자에서 사용 설정 전환 버튼을 클릭합니다.

5. 드롭다운 메뉴에서 지원 이메일을 선택하고 저장을 클릭합니다.

6. 승인을 위한 커스텀 도메인을 추가하려면 인증 페이지 상단의 설정 탭을 클릭합니다.

7. 설정 창의 왼쪽 메뉴에서 승인된 도메인을 선택합니다.

8. 도메인 추가 버튼을 클릭합니다.

9. 다음 도메인을 입력합니다(필요한 경우 프로젝트 ID로 바꿈).

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. 추가 버튼을 클릭합니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

Firebase 인증 설정

Firebase Firestore

다음으로 Firestore 데이터베이스를 설정합니다.

1. 왼쪽 탐색 메뉴의 데이터베이스 및 스토리지에서 Firestore를 클릭합니다.

2. Cloud Firestore 방문 페이지에서 데이터베이스 만들기 버튼을 클릭합니다.

3. 1단계: 버전 선택에서 Standard 버전을 선택하고 다음을 클릭합니다.

4. 2단계: 데이터베이스 ID 및 위치에서 적절한 위치(예: nam5 또는 기본값 수락)를 선택하고 다음을 클릭합니다.

5. 3단계: 구성에서 테스트 모드에서 시작을 선택하고 만들기를 클릭합니다.

6. 데이터베이스가 프로비저닝되면 규칙 탭을 클릭합니다.

7. 인증된 사용자가 자신의 데이터를 읽고 쓸 수 있도록 보안 규칙을 다음으로 바꿉니다.

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

게시를 클릭하여 변경사항을 Firebase에 배포합니다.

이제 Firebase 인증 및 Firestore를 설정했습니다. 백엔드 구성이 완료되었습니다.

Firebase Localhost

여러분은 패트릭을 도와 웹 개발자가 코드를 배포할 수 있는 Firebase 호스팅 환경을 설정했습니다.

하지만 패트릭은 Firebase 인증을 사용 설정하거나 Firebase에 코드를 배포해 본 적이 없어서 루비에게 도움을 요청하는 이메일을 보냅니다.

패트릭, IT 관리자	루비님, 안녕하세요. 알려주신 모든 팁에 감사드립니다. Firebase 환경 설정은 모두 완료된 것 같습니다. 다음으로 웹사이트 개발자의 코드를 배포해야 하는데요. 코드 배포에 필요한 게 무엇인지 그리고 이제 무엇을 해야 하는지 알려주실 수 있을까요? 패트릭
루비, 컨설턴트	패트릭님, 안녕하세요. 다행입니다. 애플리케이션을 실행하고 다음 기능을 추가하는 방법을 보내 드릴게요. 로그인을 위한 웹 인증 설정 기능 프로필 페이지에 고객 세부정보를 기록하는 기능 예약을 위한 셀프서비스 포털을 구축하는 기능 루비
패트릭, DevOps 엔지니어	루비님, 안녕하세요. 처리할 작업이 꽤 많겠네요. 새로운 기능을 추가할 때마다 구조적 변경이 필요할까요? 업데이트를 확인하는 데 걸리는 시간도 상당하겠네요. 패트릭
루비, 컨설턴트	패트릭님, 안녕하세요. 까다로운 작업은 대부분 Firebase 라이브러리로 처리할 수 있어요. Firebase에는 localhost를 백엔드 Firebase 프로젝트에 연결하는 데 도움이 되는 훌륭한 명령줄 도구가 있거든요. `firebase init` 명령어로 Firebase에 사용할 제품을 알려주세요. 프로젝트가 설정되면 명령줄에서 `firebase deploy`를 호출하기만 하면 됩니다. 루비
패트릭, IT 관리자	루비님, 안녕하세요. 정말 안심이 되네요. Firebase 호스팅이 점점 좋아집니다. :-) 패트릭

작업 3. 저장소를 클론하고 종속 항목을 설치합니다.

이 작업에서는 Cloud Shell과 Cloud Shell 편집기를 사용하여 애플리케이션 코드를 클론하고 필요한 Node.js 패키지를 설치합니다.

1. Firebase Console에 사용 중인 동일한 시크릿 창에서 새 탭을 열고 Google Cloud 콘솔로 이동한 다음, 메시지가 표시되면 서비스 약관에 동의합니다.

2. Google Cloud 콘솔 툴바에서 Cloud Shell 활성화를 클릭합니다.

3. Cloud Shell 터미널에서 다음 명령어를 실행하여 Cloud Storage 버킷에서 실습 파일을 복사합니다.

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. 코드를 보고 편집하려면 Cloud Shell 툴바에서 편집기 열기 버튼을 클릭합니다.

5. Cloud Shell 편집기에서 파일 탐색기의 pet-theory/lab02 폴더로 이동합니다.

6. Cloud Shell 편집기에서 터미널을 열거나 기존 Cloud Shell 터미널을 사용하고 lab02 디렉터리로 변경합니다.

   cd pet-theory/lab02

7. 다음 명령어를 실행하여 Node.js 패키지를 설치합니다.

   npm install 참고: Cloud Shell 환경에는 Node.js와 npm이 사전 설치되어 있습니다.

이제 애플리케이션을 백엔드 Firebase 프로젝트에 연결할 준비가 되었습니다.

작업 4. Firebase 액세스 승인

IDE에서 Firebase를 연결하고 애플리케이션을 배포합니다.

1. 다음 명령어를 입력하여 Firebase 프로젝트 액세스를 승인합니다.

   firebase login --no-localhost

   참고:

   Firebase에서는 로컬 환경을 승인하여 Firebase 프로젝트에 연결하려고 시도합니다. 따라서 적절한 사용자 인증 정보로 이 작업을 쉽게 수행할 수 있도록 브라우저 활동을 시크릿 창에서 실행해야 합니다.

2. Y를 입력하여 Firebase의 Gemini 기능을 사용 설정합니다.

3. Firebase에서 오류 보고 정보를 수집할 수 있는지 묻는 메시지가 표시되면 Y를 입력하고 Enter 키를 누릅니다.

4. 생성된 URL을 클릭하여 동일한 시크릿 창에서 다른 탭을 엽니다.

5. 실습 계정을 선택한 다음 허용을 클릭합니다.

6. 계속하려면 예, 방금 이 명령어를 실행했습니다를 클릭합니다.

7. 예, 세션 ID입니다를 클릭하여 세션 ID를 확인합니다.

8. 생성된 액세스 코드를 복사하여 Cloud Shell 프롬프트 승인 코드 입력:에 붙여넣은 다음 Enter 키를 누릅니다.

다음과 유사한 응답이 출력됩니다.

출력 예시:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net

참고:

이 시점에서 localhost가 백엔드 Firebase 프로젝트에 연결됩니다.

이제 Firebase가 연결되고 승인되었습니다. 다음 단계는 사용할 Firebase 제품을 초기화하는 것입니다.

작업 5. Firebase 제품 초기화

IDE에서 Firebase에 필요한 제품을 알립니다.

1. 현재 작업 디렉터리에서 새 Firebase 프로젝트를 초기화합니다.

   firebase init

   참고:

   이 명령어를 실행하면 프로젝트 디렉터리와 Firebase 제품을 설정하는 방법에 대한 단계별 안내를 확인할 수 있습니다. 이 폴더에 설정하고 싶은 Firebase CLI 기능을 선택합니다. 화살표 키를 사용하여 목록에서 위아래로 이동합니다. 스페이스바를 사용하여 제품 옵션을 선택합니다.

2. 다음 제품을 선택합니다.

   • Firestore
   • 호스팅

3. 화살표 키와 스페이스바를 사용하여 Firestore 및 호스팅을 선택합니다. 셸이 다음과 일치하는지 확인한 다음 Enter 키를 누릅니다.

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. 나머지 단계에 따라 Firebase를 구성합니다.

   • 아래쪽 화살표 키를 눌러 기존 프로젝트 사용으로 이동 후 Enter 키를 누릅니다.
   • 목록에서 프로젝트 ID를 선택한 다음 Enter 키를 누릅니다.
   • N 키를 누른 다음 ENTER 키를 눌러 firestore.rules 파일을 유지합니다.
   • N 키를 누른 다음 ENTER 키를 눌러 firestore.indexes.json 파일을 유지합니다.
   • Enter 키를 눌러 공개 디렉터리를 유지합니다.
   • index.html 파일에 대한 다시 쓰기를 허용하지 않도록 N 키를 누른 다음 ENTER 키를 누릅니다.
   • 'GitHub로 자동 빌드 및 배포를 설정하시겠습니까?'라는 메시지에서 N 키를 누른 다음 ENTER 키를 누릅니다.
   • 404.html 파일을 덮어쓸지를 묻는 메시지가 나타나면 N을 입력합니다.
   • index.html 파일을 덮어쓸지를 묻는 메시지가 나타나면 N을 입력합니다.
   • Firebase용 에이전트 기술을 설치할지 묻는 메시지가 표시되면 Y를 누른 다음 Enter 키를 누릅니다.

   출력 예시:

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

이제 로컬 구성이 완료되었습니다.

작업 6. Firebase에 배포

이 단계에서는 Cloud Shell에서 계속 진행합니다. 코드 편집기의 pet-theory/lab02 폴더에 있는지 확인합니다.

1. firebase.json을 수정하고 hosting 섹션을 site 키로 업데이트합니다.

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. 터미널을 열고 사이트 ID 값을 사용하여 Firebase 애플리케이션을 배포합니다. 예를 들면 다음과 같습니다.

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   출력:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. 생성된 호스팅 URL(.web.app과 유사해야 함)을 클릭하여 새 시크릿 탭에서 엽니다.

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   중요:

   개인 사용자 인증 정보는 이 실습에서 인증으로 사용해서는 안 됩니다. 계정을 사용하여 Google 로그인을 진행하세요.

4. Google 계정으로 로그인 버튼을 클릭합니다.

   참고:

   브라우저가 지원되지 않거나 서드 파티 쿠키 및 데이터가 사용 중지되었다는 오류가 나타날 경우 사용 중인 브라우저에 쿠키가 사용 설정되었는지 확인해야 합니다.

   

   Chrome에서 URL 탭의 맨 오른쪽에 있는 눈 모양 아이콘을 클릭하고 팝업의 파란색 링크를 따라 이동합니다. 사이트가 작동하지 않나요?라는 링크를 클릭하여 쿠키를 수락하도록 브라우저 설정을 업데이트합니다.

5. 제공된 사용자 이름(예: )으로 로그인합니다. 다음 페이지가 열립니다.

   

   Pet Theory처럼 규모가 작은 회사에는 이를 위한 리소스나 기술 역량이 부족합니다. 이 경우 애플리케이션 사용자가 기존 Google 계정(또는 다른 ID 공급업체)을 사용해 로그인하도록 하는 것이 좋습니다.

   참고:

   비밀번호 관리는 매우 까다로운 작업이며, 회사가 추가적인 위험에 노출되는 결과로 이어질 수도 있습니다. 그리고 사용자는 사용자 ID와 비밀번호를 추가로 만들고 싶어 하지 않습니다.

사용자가 Google 인증을 사용하여 예약 앱에 액세스할 수 있도록 코드를 배포했습니다.

작업 7. 웹 앱에 고객 페이지 추가

터미널로 돌아가서 편집기를 사용하여 public 폴더에서 파일을 봅니다.

1. public/customer.js 파일을 열고 다음 코드를 복사하여 붙여넣습니다.

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. public/styles.css 파일을 열고 다음 코드를 붙여넣습니다.

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. 터미널 명령줄에서 다음 명령어를 실행합니다.

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   출력:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. 애플리케이션 탭에서 CMD+Shift+R(Mac) 또는 Ctrl+Shift+R(Windows) 키를 눌러 페이지를 강제로 새로고침합니다. 간단한 페이지 새로고침으로는 필요한 업데이트가 표시되지 않습니다.

   

5. 고객 정보를 입력합니다. 가상의 이름과 전화번호를 입력합니다.

   고객 이름:

   John

   고객 전화번호:

   98473757454

6. 프로필 저장을 클릭합니다.

7. Firebase Console로 돌아갑니다.

8. 빌드 > Firestore 데이터베이스를 클릭하여 저장된 프로필 정보를 봅니다.

   

9. 웹 앱 페이지로 돌아가서 예약 링크를 클릭합니다. 아직 예약 코드를 배포하지 않았으므로 빈 페이지가 표시됩니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

웹 앱에 고객 페이지 추가

정말 유용한 기능입니다.

Firestore는 사용자가 새로고침하거나 다시 로드하지 않아도 클라이언트(웹 앱 및 기본 모바일 앱)를 실시간으로 업데이트해 줍니다.

수고하셨습니다

이번 실습에서는 Firebase를 사용하여 강력한 서버리스 웹 애플리케이션을 만들어 보았습니다. Firebase 프로젝트를 만들고 구성한 후 Firestore 보안을 추가하여 서버 측 인증 및 승인을 자동화했습니다. 그런 다음 웹 앱에 Google 로그인 기능을 추가하고 사용자가 연락처 정보와 예약을 추가할 수 있도록 데이터베이스를 구성했습니다. 마지막으로, 사용자가 방문 일정을 예약할 수 있게 하는 코드를 살펴본 후 배포했으며, 웹 앱에서 Firebase의 실시간 업데이트를 확인했습니다. 학습자 여러분은 이제 이 학습 과정에서 추가적인 실습을 진행할 준비가 되었습니다.

다음 단계/더 학습하기

• Google Cloud - 서버리스란?

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2026년 5월 31일

실습 최종 테스트: 2026년 5월 31일

Copyright 2026 Google LLC. All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.