이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Gemini API용 Firebase 확장 프로그램으로 AI 기반 웹 앱 빌드

1. 시작하기 전에

Firebase 확장 프로그램을 사용하면 사전 패키징된 기능을 앱에 최소한의 코드로 추가할 수 있으며, AI 기반 기능도 추가할 수 있습니다. 이 Codelab에서는 제공된 컨텍스트와 최종 사용자 입력을 기반으로 Gemini API를 활용하여 이미지 설명, 요약, 맞춤 추천까지 생성할 수 있도록 웹 앱에 두 개의 Firebase 확장 프로그램을 통합하는 방법을 보여줍니다.

이 Codelab에서는 Firebase 확장 프로그램으로 매력적인 사용자 환경을 제공하는 AI 기반 웹 앱을 빌드하는 방법을 알아봅니다.

기본 요건

Node.js, Next.js, TypeScript에 대한 지식

학습할 내용

Gemini API용 Firebase 확장 프로그램을 사용하여 언어를 처리하는 방법
Firebase용 Cloud Functions를 사용하여 언어 모델의 증강 컨텍스트를 구성하는 방법
JavaScript를 사용하여 Firebase 확장 프로그램에서 생성된 출력에 액세스하는 방법

필요한 사항

원하는 브라우저(예: Chrome)
코드 편집기와 터미널이 있는 개발 환경
Firebase 프로젝트를 만들고 관리할 Google 계정

2. 웹 앱, Firebase 서비스, 확장 프로그램 검토

이 섹션에서는 이 Codelab에서 빌드할 웹 앱을 검토하고 사용할 Firebase 서비스와 Firebase 확장 프로그램에 대해 알아봅니다.

웹 앱

이 Codelab에서는 Friendly Conf라는 웹 앱을 빌드합니다.

Friendly Conference 직원들은 AI를 사용하여 참석자에게 즐겁고 개인화된 사용자 환경을 제공하기로 했습니다. 완성된 컨퍼런스 앱은 멀티모달 생성형 AI 모델 (대규모 언어 모델 또는 LLM이라고도 함)로 구동되는 대화형 AI 챗봇을 참석자에게 제공하며, 컨퍼런스 일정 및 주제에 맞게 일반적인 주제에 관한 질문에 답할 수 있습니다. 챗봇에는 과거 컨텍스트와 현재 날짜/시간, Friendly Conf 주제 및 일정에 관한 지식이 있으므로, 이러한 모든 컨텍스트를 응답에 반영할 수 있습니다.

Firebase 서비스

이 Codelab에서는 다양한 Firebase 서비스와 기능을 사용하며, 대부분의 시작 코드가 제공됩니다. 다음 표에는 사용할 서비스와 사용 이유가 나와 있습니다.

서비스	사용 이유
Firebase 인증	웹 앱에 Google 로그인 기능을 사용합니다.
Cloud Firestore	Cloud Firestore에 텍스트 데이터를 저장하면 Firebase 확장 프로그램에서 이를 처리합니다.
Firebase용 Cloud Storage	Cloud Storage에서 읽고 써서 웹 앱 내에 이미지 갤러리를 표시합니다.
Firebase 보안 규칙	보안 규칙을 배포하여 Firebase 서비스에 안전하게 액세스합니다.
Firebase Extensions	AI 관련 Firebase 확장 프로그램을 구성하고 설치한 후 웹 앱 내에 결과를 표시합니다.
보너스: Firebase 호스팅	원하는 경우 Firebase 호스팅을 사용하여 웹 앱을 제공할 수 있습니다 (GitHub 저장소 없음).
보너스: Firebase App Hosting	원하는 경우 새로운 간소화된 Firebase App Hosting을 사용하여 GitHub 저장소에 연결된 동적 Next.js 웹 앱을 제공할 수 있습니다.

Firebase Extensions

이 Codelab에서 사용할 Firebase 확장 프로그램은 다음과 같습니다.

확장 프로그램은 Firebase 프로젝트에서 발생하는 이벤트에 반응하므로 유용합니다. 이 Codelab에서 사용되는 두 확장 프로그램은 Cloud Firestore의 사전 구성된 컬렉션에 새 문서를 만들 때 응답합니다.

셋째, 개발 환경 설정

Node.js 버전 확인

터미널에서 Node.js 버전 20.0.0 이상이 설치되어 있는지 확인합니다.
```
node -v
```
Node.js 버전 20.0.0 이상이 없는 경우 최신 LTS 버전을 다운로드하여 설치합니다.

Codelab의 소스 코드 가져오기

GitHub 계정이 있는 경우:

github.com/FirebaseExtended/codelab-gemini-api-extensions의 템플릿을 사용하여 새 저장소를 만듭니다.

방금 만든 Codelab의 GitHub 저장소를 클론합니다.

git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions

Git이 설치되어 있지 않거나 새 저장소를 만들고 싶지 않은 경우:

GitHub 저장소를 ZIP 파일로 다운로드합니다.

폴더 구조 검토

루트 폴더에는 간소화된 안내를 사용하여 웹 앱을 실행하는 빠른 시작을 제공하는 README.md 파일이 포함되어 있습니다. 하지만 처음 학습하는 경우 Codelab에 가장 포괄적인 안내가 포함되어 있으므로 빠른 시작 대신 이 Codelab을 완료해야 합니다.

이 Codelab 전반에 걸쳐 안내된 대로 코드를 올바르게 적용했는지 확실하지 않은 경우 end git 브랜치에서 솔루션 코드를 확인할 수 있습니다.

Firebase CLI 설치

Firebase CLI가 설치되어 있고 버전이 13.6 이상인지 확인합니다.
```
firebase --version
```
Firebase CLI가 설치되어 있지만 버전이 13.6 이상이 아닌 경우 업데이트합니다.
```
npm update -g firebase-tools
```
Firebase CLI가 설치되어 있지 않으면 설치합니다.
```
npm install -g firebase-tools
```

권한 오류로 인해 Firebase CLI를 업데이트하거나 설치할 수 없는 경우 npm 문서를 참고하거나 다른 설치 옵션을 사용하세요.

Firebase에 로그인

터미널에서 codelab-gemini-api-extensions 폴더로 이동하여 Firebase에 로그인합니다.
```
cd codelab-gemini-api-extensions
firebase login
```
터미널에 이미 Firebase에 로그인되어 있다고 표시되면 이 Codelab의 Firebase 프로젝트 설정 섹션으로 건너뛰어도 됩니다.
터미널에서 Firebase가 데이터를 수집할지 여부에 따라 Y 또는 N을 입력합니다. (이 Codelab에서는 두 옵션 모두 사용 가능)
브라우저에서 Google 계정을 선택하고 허용을 클릭합니다.

4. Firebase 프로젝트 설정

이 섹션에서는 Firebase 프로젝트를 설정하고 Firebase 웹 앱을 등록합니다. 이 Codelab의 후반부에서는 샘플 웹 앱에서 사용하는 몇 가지 Firebase 서비스도 사용 설정합니다.

이 섹션의 모든 단계는 Firebase Console에서 수행됩니다.

Firebase 프로젝트 만들기

이전 단계에서 사용한 것과 동일한 Google 계정을 사용하여 Firebase 콘솔에 로그인합니다.
버튼을 클릭하여 새 프로젝트를 만든 다음 프로젝트 이름 (예: AI Extensions Codelab)을 입력합니다.
이 프로젝트 이름은 Firebase 인터페이스에서 표시 이름으로 사용되며, Firebase는 이 프로젝트 이름을 기반으로 고유한 프로젝트 ID를 자동 생성합니다. 지금 수정 아이콘을 클릭하여 원하는 프로젝트 ID를 설정할 수도 있지만 프로젝트를 만든 후에는 이 ID를 변경할 수 없습니다.

나중에 Firebase CLI에서 Firebase 프로젝트를 식별하는 데 필요하므로 프로젝트 ID를 기억해 둡니다. ID를 잊어버린 경우 나중에 언제든지 프로젝트 설정에서 확인할 수 있습니다.
계속을 클릭합니다.
메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
(선택사항) Firebase Console에서 AI 지원('Firebase의 Gemini'라고 함)을 사용 설정합니다.
이 Codelab에서는 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 다음 계속을 클릭합니다.

Firebase 요금제 업그레이드

Firebase 확장 프로그램 (및 기본 클라우드 서비스)과 Firebase용 Cloud Storage를 사용하려면 Firebase 프로젝트가 사용한 만큼만 지불하는 (Blaze) 요금제를 사용해야 합니다. 즉, Cloud Billing 계정에 연결되어 있어야 합니다.

Cloud Billing 계정에는 신용카드와 같은 결제 수단이 필요합니다.
Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧과 무료 체험판 Cloud Billing 계정을 받을 자격이 되는지 확인하세요.
이 Codelab을 이벤트의 일환으로 진행하는 경우 주최자에게 사용 가능한 Cloud 크레딧이 있는지 문의하세요.

또한 Firebase 프로젝트에서 결제를 사용 설정하면 확장 프로그램이 Gemini API에 수행하는 호출에 대해 요금이 청구됩니다(선택한 제공업체(Google AI 또는 Vertex AI)와 관계없음). Google AI 및 Vertex AI 가격 책정에 대해 자세히 알아보세요.

프로젝트를 Blaze 요금제로 업그레이드하려면 다음 단계를 따르세요.

Firebase Console에서 요금제 업그레이드를 선택합니다.
Blaze 요금제를 선택합니다. 화면에 표시된 안내에 따라 Cloud Billing 계정을 프로젝트에 연결합니다.
이 업그레이드의 일환으로 Cloud Billing 계정을 만들어야 하는 경우 업그레이드를 완료하기 위해 Firebase Console의 업그레이드 흐름으로 돌아가야 할 수 있습니다.

Firebase 프로젝트에 웹 앱 추가

Firebase 프로젝트에서 프로젝트 개요 화면으로 이동한 다음 웹을 클릭합니다.
앱 닉네임 텍스트 상자에 My AI Extensions과 같이 기억하기 쉬운 앱 닉네임을 입력합니다.
앱 등록 > 다음 > 다음 > 콘솔로 이동을 클릭합니다.
이 Codelab의 뒷부분에서 호스팅 서비스를 선택적으로 설정하므로 웹 앱 흐름에서 '호스팅'과 관련된 모든 단계를 건너뛰어도 됩니다.

Firebase 프로젝트에서 생성된 웹 앱

좋습니다. 이제 새 Firebase 프로젝트에 웹 앱이 등록되었습니다.

Firebase 인증 설정

왼쪽 탐색 창을 사용하여 인증으로 이동합니다.
시작하기를 클릭합니다.
추가 제공업체 열에서 Google > 사용 설정을 클릭합니다.
프로젝트의 공개용 이름 텍스트 상자에 유용한 이름(예: My AI Extensions Codelab)을 입력합니다.
프로젝트 지원 이메일 메뉴에서 이메일 주소를 선택합니다.
저장을 클릭합니다.

Cloud Firestore 설정

Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 Firestore 데이터베이스를 선택합니다.
데이터베이스 만들기를 클릭합니다.
데이터베이스 ID는 (default)로 설정된 채로 둡니다.
데이터베이스의 위치를 선택한 다음 다음을 클릭합니다.
실제 앱의 경우 사용자와 가까운 위치를 선택하는 것이 좋습니다.
테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 데이터베이스에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
만들기를 클릭합니다.

Firebase용 Cloud Storage 설정

Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 스토리지를 선택합니다.
시작하기를 클릭합니다.
기본 스토리지 버킷의 위치를 선택합니다.
US-WEST1, US-CENTRAL1, US-EAST1의 버킷은 Google Cloud Storage의 '항상 무료' 등급을 활용할 수 있습니다. 다른 모든 위치의 버킷은 Google Cloud Storage 가격 책정 및 사용량을 따릅니다.
테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 스토리지 버킷에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
만들기를 클릭합니다.

이 Codelab의 다음 섹션에서는 이 Codelab 전반에서 웹 앱에 사용할 두 가지 Firebase 확장 프로그램을 설치하고 구성합니다.

5. 'Build Chatbot with the Gemini API' 확장 프로그램 설정

'Build Chatbot with the Gemini API' 확장 프로그램 설치

'Build Chatbot with the Gemini API' 확장 프로그램으로 이동합니다.
Firebase Console에 설치를 클릭합니다.
Firebase 프로젝트를 선택한 다음 다음을 클릭합니다.
사용 설정된 API 및 생성된 리소스 검토 섹션에서 추천된 서비스 옆에 있는 사용 설정을 클릭한 다음 다음을 클릭합니다.
추천된 권한에 대해 허용을 선택한 다음 다음을 클릭합니다.
확장 프로그램을 구성합니다.
1. Gemini API 제공업체 메뉴에서 Google AI 또는 Vertex AI의 Gemini API를 사용할지 선택합니다. Firebase를 사용하는 개발자의 경우 Vertex AI를 사용하는 것이 좋습니다.
2. Firestore 컬렉션 경로 텍스트 상자에 users/{uid}/messages을 입력합니다.
  이 Codelab의 향후 단계에서는 이 컬렉션에 문서를 추가하면 확장 프로그램이 Gemini API를 호출합니다.
3. Cloud Functions 위치 메뉴에서 원하는 위치 (예: Iowa (us-central1) 또는 이전에 Firestore 데이터베이스에 지정한 위치)를 선택합니다.
4. 나머지 설정은 모두 기본값으로 둡니다.
확장 프로그램 설치를 클릭하고 확장 프로그램이 설치될 때까지 기다립니다.

'Build Chatbot with the Gemini API' 확장 프로그램 사용해 보기

이 Codelab의 목표는 웹 앱을 통해 'Build Chatbot with the Gemini API' 확장 프로그램과 상호작용하는 것이지만 Firebase Console에서 먼저 사용해 보면서 확장 프로그램의 작동 방식을 알아보는 것이 도움이 됩니다.

Firebase Console에서 컬렉션 users/{uid}/discussion/{discussionId}/messages 아래에 Firestore 문서가 생성될 때마다 확장 프로그램이 트리거됩니다.

Firebase Console에서 Firestore로 이동한 후 첫 번째 열에서 컬렉션 시작을 클릭합니다.
컬렉션 ID 텍스트 상자에 users을 입력하고 다음을 클릭합니다.
문서 ID 텍스트 상자에서 자동 ID를 클릭한 다음 저장을 클릭합니다.
users 컬렉션에서 컬렉션 시작을 클릭합니다.
컬렉션 ID 텍스트 상자에 messages을 입력하고 다음을 클릭합니다.
1. 문서 ID 텍스트 상자에서 자동 ID를 클릭합니다.
2. 필드 텍스트 상자에 prompt를 입력합니다.
3. 값 텍스트 상자에 Tell me 5 random fruits를 입력합니다.
저장을 클릭하고 잠시 기다립니다.

이 문서를 추가하면 확장 프로그램이 Gemini API를 호출합니다. 이제 messages 컬렉션에 추가한 문서에는 prompt뿐만 아니라 모델의 response도 쿼리에 포함됩니다.

Firestore 문서의 언어 모델 응답

messages 컬렉션에 다른 문서를 추가하여 확장 프로그램을 다시 트리거합니다.

messages 컬렉션에서 문서 추가를 클릭합니다.
문서 ID 텍스트 상자에서 자동 ID를 클릭합니다.
필드 텍스트 상자에 prompt를 입력합니다.
값 텍스트 상자에 And now, vegetables를 입력합니다.
저장을 클릭하고 잠시 기다립니다. messages 컬렉션에 방금 추가한 문서에는 이제 질문에 대한 response가 포함됩니다.

이 대답을 생성할 때 기본 Gemini 모델은 이전 질문의 기록 지식을 사용했습니다.

6. 웹 앱 설정

웹 앱을 실행하려면 터미널에서 명령어를 실행하고 코드 편집기 내에서 코드를 추가해야 합니다.

Firebase 프로젝트를 대상으로 실행되도록 Firebase CLI 설정

터미널에서 다음 명령어를 실행하여 CLI가 Firebase 프로젝트를 사용하도록 지시합니다.

firebase use YOUR_PROJECT_ID

Firestore 및 Cloud Storage의 보안 규칙 배포

이 Codelab의 코드베이스에는 이미 Firestore 보안 규칙과 Cloud Storage 보안 규칙이 작성되어 있습니다. 이러한 보안 규칙을 배포하면 Firebase 프로젝트의 Firebase 서비스가 오용으로부터 더 잘 보호됩니다.

보안 규칙을 배포하려면 터미널에서 다음 명령어를 실행합니다.
```
firebase deploy --only firestore:rules,storage
```
크로스 서비스 규칙을 사용하기 위해 Cloud Storage에 IAM 역할을 부여할지 묻는 메시지가 표시되면 Y 또는 N을 입력합니다. (이 Codelab에서는 두 옵션 모두 사용 가능)

웹 앱을 Firebase 프로젝트에 연결

웹 앱의 코드베이스는 데이터베이스, 스토리지 등에 사용할 Firebase 프로젝트를 알아야 합니다. 앱의 코드베이스에 Firebase 구성을 추가하면 됩니다.

Firebase 구성을 가져옵니다.
1. Firebase Console에서 Firebase 프로젝트 내의 프로젝트 설정으로 이동합니다.
2. 내 앱 섹션까지 아래로 스크롤한 다음 등록된 웹 앱을 선택합니다.
3. SDK 설정 및 구성 창에서 firebaseConfig const를 포함한 전체 initializeApp 코드를 복사합니다.
웹 앱의 코드베이스에 Firebase 구성을 추가합니다.
1. 코드 편집기에서 src/lib/firebase/firebase.config.js 파일을 엽니다.
2. 파일에서 모두 선택하고 복사한 코드로 바꿉니다.
3. 파일을 저장합니다.

브라우저에서 웹 앱 미리보기

터미널에서 종속 항목을 설치한 후 웹 앱을 실행합니다.
```
npm install
npm run dev
```
브라우저에서 로컬로 호스팅된 호스팅 URL로 이동하여 웹 앱을 확인합니다. 예를 들어 대부분의 경우 URL은 http://localhost:3000/ 또는 이와 유사한 URL입니다.

웹 앱의 챗봇 사용하기

브라우저에서 로컬로 실행되는 Friendly Conf 웹 앱이 있는 탭으로 돌아갑니다.
Google 계정으로 로그인을 클릭하고 필요한 경우 Google 계정을 선택합니다.
로그인하면 빈 채팅 창이 표시됩니다.
인사말 (예: hi)을 입력한 다음 보내기를 클릭합니다.
챗봇이 응답할 때까지 몇 초간 기다립니다.

앱의 챗봇이 일반적인 대답으로 응답합니다.

앱에 맞게 챗봇 전문화

모델이 앱을 사용하는 참석자를 위해 대답을 생성할 때 웹 앱의 챗봇에서 사용하는 기본 Gemini 모델이 컨퍼런스 관련 세부정보를 알아야 합니다. 이러한 대답을 제어하고 유도하는 방법은 다양하며, 이 Codelab의 하위 섹션에서는 웹 앱 사용자의 입력만 제공하는 것이 아니라 초기 프롬프트에 '컨텍스트'를 제공하여 매우 기본적인 방법을 보여줍니다.

브라우저의 웹 앱에서 채팅 기록의 메시지 옆에 있는 빨간색 'x' 버튼을 클릭하여 대화를 삭제합니다.
코드 편집기에서 src/app/page.tsx 파일을 엽니다.
아래로 스크롤하여 93번째 줄 또는 그 근처에 있는 prompt: userMsg 코드를 다음 코드로 바꿉니다.
prompt: preparePrompt(userMsg, messages),
파일을 저장합니다.
브라우저에서 실행 중인 웹 앱으로 돌아갑니다.
다시 인사말 (예: hi)을 입력한 다음 보내기를 클릭합니다.
챗봇이 응답할 때까지 몇 초간 기다립니다.

챗봇은 src/app/lib/context.md에 제공된 컨텍스트를 기반으로 한 지식으로 응답합니다. 구체적인 요청을 입력하지 않았더라도 기본 Gemini 모델은 이 컨텍스트와 현재 날짜/시간을 기반으로 맞춤 추천을 생성합니다. 이제 후속 질문을 지정하고 더 자세히 알아볼 수 있습니다.

이 확장된 컨텍스트는 챗봇에 중요하지만 웹 앱 사용자에게는 표시해서는 안 됩니다. 숨기는 방법은 다음과 같습니다.

코드 편집기에서 src/app/page.tsx 파일을 엽니다.
아래로 스크롤하여 56번째 줄 또는 그 근처에 있는 ...doc.data(), 코드를 다음으로 바꿉니다.
...prepareMessage(doc.data()),
파일을 저장합니다.
브라우저에서 실행 중인 웹 앱으로 돌아갑니다.
페이지를 새로고침합니다.

또한 과거 컨텍스트를 통해 챗봇과 대화하는 기능을 사용해 볼 수도 있습니다.

메시지 입력 텍스트 상자에 Any other interesting talks about AI?와 같은 질문을 합니다. 챗봇이 대답을 반환합니다.
메시지 입력 텍스트 상자에서 이전 질문과 관련된 후속 질문을 합니다. Give me a few more details about the last one.

챗봇은 이전에 얻은 지식을 통해 응답합니다. 이제 채팅 기록이 컨텍스트에 포함되므로 챗봇이 후속 질문을 이해합니다.

7. 'Multimodal Tasks with the Gemini API' 확장 프로그램 설정

'Gemini API를 사용한 멀티모달 작업' 확장 프로그램은 텍스트 프롬프트와 지원되는 파일 URL 또는 Cloud Storage URL이 포함된 멀티모달 프롬프트로 Gemini API를 호출합니다. Google AI Gemini API도 Cloud Storage URL을 기본 파일 URL 인프라로 사용합니다. 또한 확장 프로그램은 핸들바 변수를 지원하여 Cloud Firestore 문서의 값을 대체하여 텍스트 프롬프트를 맞춤설정할 수 있습니다.

앱에서 Cloud Storage 버킷에 이미지를 업로드할 때마다 URL을 생성하고 해당 URL을 새 Cloud Firestore 문서에 추가하여 확장 프로그램이 멀티모달 프롬프트를 생성하고 Gemini API를 호출하도록 트리거할 수 있습니다. 이 Codelab의 소스 코드에는 이미 이미지를 업로드하고 URL을 Firestore 문서에 쓰는 코드가 제공되어 있습니다.

'Multimodal Tasks with the Gemini API' 확장 프로그램 설치

'Gemini API를 사용하는 멀티모달 태스크' 확장 프로그램으로 이동합니다.
Firebase Console에 설치를 클릭합니다.
Firebase 프로젝트를 선택합니다.
확장 프로그램 구성 섹션이 표시될 때까지 다음 > 다음 > 다음을 클릭합니다.
1. Gemini API 제공업체 메뉴에서 Google AI 또는 Vertex AI의 Gemini API를 사용할지 선택합니다. Firebase를 사용하는 개발자의 경우 Vertex AI를 사용하는 것이 좋습니다.
2. Firestore 컬렉션 경로 텍스트 상자에 gallery을 입력합니다.
3. 프롬프트 텍스트 상자에 Please describe the provided image; if there is no image, say "no image"를 입력합니다.
4. 이미지 필드 텍스트 상자에 image를 입력합니다.
5. Cloud Functions 위치 메뉴에서 원하는 위치 (예: Iowa (us-central1) 또는 이전에 Firestore 데이터베이스에 지정한 위치)를 선택합니다.
6. 나머지 설정은 모두 기본값으로 둡니다.
확장 프로그램 설치를 클릭하고 확장 프로그램이 설치될 때까지 기다립니다.

'Multimodal Tasks with the Gemini API' 확장 프로그램 사용해 보기

이 Codelab의 목표는 웹 앱을 통해 'Multimodal Tasks with the Gemini API' 확장 프로그램과 상호작용하는 것이지만 Firebase Console에서 먼저 사용해 보면서 확장 프로그램의 작동 방식을 이해하는 것이 도움이 됩니다.

Firebase Console에서 컬렉션 users/{uid}/gallery 아래에 Firestore 문서가 생성될 때마다 확장 프로그램이 트리거됩니다. 그런 다음 확장 프로그램은 Cloud Firestore 문서의 Cloud Storage 이미지 URL을 가져와 Gemini API 호출에서 멀티모달 프롬프트의 일부로 전달합니다.

먼저 Cloud Storage 버킷에 이미지를 업로드합니다.

Firebase 프로젝트 내에서 스토리지로 이동합니다.
폴더 만들기를 클릭합니다.
폴더 이름 텍스트 상자에 gallery을 입력합니다.
폴더 추가를 클릭합니다.
gallery 폴더에서 파일 업로드를 클릭합니다.
업로드할 JPEG 이미지 파일을 선택합니다.

다음으로 이미지의 Cloud Storage URL을 Firestore 문서 (확장의 트리거)에 추가합니다.

Firebase 프로젝트 내에서 Firestore로 이동합니다.
첫 번째 열에서 컬렉션 시작을 클릭합니다.
컬렉션 ID 텍스트 상자에 gallery을 입력하고 다음을 클릭합니다.
컬렉션에 문서를 추가합니다.
1. 문서 ID 텍스트 상자에서 자동 ID를 클릭합니다.
2. 필드 텍스트 상자에 image를 입력합니다. 값 상자에 방금 업로드한 이미지의 저장 위치 URI를 입력합니다.
필드 추가를 클릭합니다.
필드 텍스트 상자에 published를 입력합니다. 유형 상자에서 boolean을 선택합니다. 값 상자에서 true를 선택합니다.
저장을 클릭하고 잠시 기다립니다.

이제 gallery 컬렉션에 질문에 대한 대답이 포함된 문서가 포함됩니다.

웹 앱의 이미지 갤러리 사용

브라우저에서 로컬로 실행되는 Friendly Conf 웹 앱이 있는 탭으로 돌아갑니다.
갤러리 탐색 탭을 클릭합니다.
업로드된 이미지와 AI 생성 설명 갤러리가 표시됩니다. 스토리지 버킷의 gallery 폴더에 이전에 업로드한 이미지가 있어야 합니다.
'업로드' 버튼을 클릭하고 다른 JPEG 이미지를 선택합니다.
이미지가 갤러리에 표시될 때까지 몇 초간 기다립니다. 잠시 후 새로 업로드된 이미지에 대한 AI 생성 설명도 표시됩니다.

이 기능이 구현된 방식을 보여주는 코드를 확인하려면 웹 앱의 코드베이스에서 src/app/gallery/page.tsx를 참고하세요.

8. 보너스: 애플리케이션 배포

Firebase는 웹 애플리케이션을 배포할 수 있는 여러 방법을 제공합니다. 이 Codelab에서는 다음 옵션 중 하나를 선택합니다.

옵션 1: Firebase 호스팅 - 자체 GitHub 저장소를 만들지 않고 (소스 코드가 머신에 로컬로만 저장됨) �
옵션 2: Firebase App Hosting - 자체 GitHub 저장소에 변경사항을 푸시할 때마다 자동 배포를 원하는 경우 이 옵션을 사용하세요. 이 새로운 Firebase 서비스는 동적 Next.js 및 Angular 애플리케이션의 요구사항에 맞게 특별히 빌드되었습니다.

옵션 1: Firebase 호스팅을 사용하여 배포

자체 GitHub 저장소를 만들지 않고 소스 코드를 머신에 로컬로만 저장하는 경우 이 옵션을 사용하세요.

터미널에서 다음 명령어를 실행하여 Firebase 호스팅을 초기화합니다.
```
firebase experiments:enable webframeworks
firebase init hosting
```
Detected an existing Next.js codebase in your current directory, should we use this? 프롬프트가 표시되면 Y을 누릅니다.
In which region would you like to host server-side content, if applicable? 프롬프트의 경우 기본 위치 또는 이 Codelab의 앞부분에서 사용한 위치를 선택합니다. 그런 다음 Enter (또는 macOS의 경우 return)를 누릅니다.
Set up automatic builds and deploys with GitHub? 프롬프트가 표시되면 N을 누릅니다.
다음 명령어를 실행하여 웹 앱을 호스팅에 배포합니다.
```
firebase deploy --only hosting
```

완료 앱을 업데이트하고 새 버전을 배포하려면 firebase deploy --only hosting를 다시 실행하기만 하면 Firebase 호스팅에서 앱을 빌드하고 다시 배포합니다.

옵션 2: Firebase App Hosting을 사용하여 배포

자체 GitHub 저장소에 변경사항을 푸시할 때마다 자동 배포를 원하는 경우 이 옵션을 사용하세요.

GitHub에 변경사항을 커밋합니다.
Firebase Console에서 Firebase 프로젝트 내의 App Hosting으로 이동합니다.
시작하기 > GitHub에 연결을 클릭합니다.
GitHub 계정과 저장소를 선택합니다. 다음을 클릭합니다.
배포 설정 > 루트 디렉터리에 소스 코드가 있는 폴더의 이름을 입력합니다 (package.json이 저장소의 루트 디렉터리에 없는 경우).
라이브 브랜치의 경우 GitHub 저장소의 main 브랜치를 선택합니다. 다음을 클릭합니다.
백엔드의 ID를 입력합니다 (예: chatbot).
완료 및 배포를 클릭합니다.

새 배포가 준비되는 데 몇 분 정도 걸립니다. Firebase Console의 App Hosting 섹션에서 배포 상태를 확인할 수 있습니다.

이제부터 GitHub 저장소에 변경사항을 푸시할 때마다 Firebase App Hosting이 앱을 자동으로 빌드하고 배포합니다.

9. 결론

수고하셨습니다 이 Codelab에서 많은 것을 배우셨습니다.

확장 프로그램 설치 및 구성

Firebase Console을 사용하여 생성형 AI를 사용하는 다양한 Firebase 확장 프로그램을 구성하고 설치했습니다. Firebase Extensions를 사용하면 Google Cloud 서비스 인증 또는 Firestore 및 Google Cloud 서비스와 API를 수신하고 상호작용하는 백엔드 Cloud Functions 로직을 처리하기 위해 많은 상용구 코드를 학습하고 작성할 필요가 없어 편리합니다.

Firebase Console을 사용하여 확장 프로그램 사용해 보기

코드를 바로 작성하는 대신 Firestore 또는 Cloud Storage를 통해 제공한 입력을 기반으로 이러한 생성형 AI 확장 프로그램의 작동 방식을 시간을 들여 이해했습니다. 이는 확장 프로그램의 출력을 디버깅할 때 특히 유용합니다.

AI 기반 웹 앱 빌드

Firebase 확장 프로그램을 사용하여 Gemini 모델의 몇 가지 기능에만 액세스하는 AI 기반 웹 앱을 빌드했습니다.

웹 앱에서 'Chatbot with Gemini API' 확장 프로그램을 사용하여 사용자에게 대화의 앱별 컨텍스트와 과거 컨텍스트가 포함된 대화형 채팅 인터페이스를 제공합니다. 각 메시지는 특정 사용자로 범위가 지정된 Firestore 문서에 저장됩니다.

또한 웹 앱은 'Multimodal Tasks with the Gemini API' 확장 프로그램을 사용하여 업로드된 이미지의 이미지 설명을 자동 생성했습니다.

다음 단계

Google AI Studio 또는 Vertex AI Studio에서 프롬프트를 실험하고 큰 컨텍스트 윈도우를 활용하세요.
AI 검색 증강 생성 (RAG) 검색에 대해 알아봅니다.
Genkit (새로운 AI 프레임워크 서비스)을 사용하여 기존 Firebase 앱에 챗봇을 추가하는 방법을 보여주는 자기 주도형 Codelab을 사용해 보세요.
Firestore의 유사성 검색 기능 및 PostgreSQL용 Cloud SQL에 대해 알아봅니다.
함수 호출을 사용하여 기존 앱을 호출하도록 챗봇을 학습시킵니다.