이 페이지는 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 Extensions를 사용하여 언어를 처리하는 방법
Firebase용 Cloud Functions를 사용하여 언어 모델의 증강 컨텍스트를 구성하는 방법
JavaScript를 사용하여 Firebase Extensions에서 생성된 출력에 액세스하는 방법

필요한 사항

원하는 브라우저(예: 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 Extensions를 구성 및 설치하고 웹 앱 내에 결과를 표시합니다.
보너스: Firebase 로컬 에뮬레이터 도구 모음	원하는 경우 클라우드의 여러 실시간 Firebase 서비스에 연결하는 대신 로컬 에뮬레이터 도구 모음을 사용하여 로컬에서 앱을 실행할 수 있습니다.
보너스: Firebase 호스팅	원하는 경우 Firebase 호스팅을 사용하여 웹 앱을 제공할 수 있습니다 (GitHub 저장소 없이).
보너스: Firebase App Hosting	원하는 경우 간소화된 새 Firebase App Hosting을 사용하여 동적 Next.js 웹 앱 (GitHub 저장소에 연결됨)을 제공할 수 있습니다.

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 Console에 로그인합니다.
프로젝트 만들기를 클릭한 후 프로젝트 이름 (예: AI Extensions Codelab)을 입력합니다.
Firebase 프로젝트에 자동으로 할당된 프로젝트 ID를 기억합니다 (또는 수정 아이콘을 클릭하여 선호하는 프로젝트 ID 설정). 나중에 Firebase CLI에서 Firebase 프로젝트를 식별하려면 이 ID가 필요합니다. ID를 잊어버린 경우 나중에 언제든지 프로젝트 설정에서 확인할 수 있습니다.
계속을 클릭합니다.
메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
이 Codelab에서는 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 다음 계속을 클릭합니다.

Firebase 요금제 업그레이드

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

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

또한 Firebase 프로젝트에서 결제가 사용 설정된 경우 Google AI 또는 Vertex AI 중 어떤 제공업체를 선택하든 확장 프로그램에서 Gemini API를 호출할 때마다 요금이 청구됩니다. Google AI 및 Vertex AI 가격 책정에 대해 자세히 알아보세요.

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

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

Firebase 프로젝트에 웹 앱 추가

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

Firebase 프로젝트에 생성된 웹 앱

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

Firebase 인증 설정

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

Cloud Firestore 설정

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

Firebase용 Cloud Storage 설정

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

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

5. 'Gemini API를 사용하는 챗봇 빌드' 확장 프로그램 설정

'Gemini API를 사용하는 챗봇 빌드' 확장 프로그램 설치

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

'Gemini API를 사용하는 챗봇 빌드' 확장 프로그램 사용해 보기

이 Codelab의 목표는 웹 앱을 통해 '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/app/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 파일을 엽니다.
아래로 스크롤하여 77번 행 또는 그 근처에 있는 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.

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

보너스: Firebase 로컬 에뮬레이터 도구 모음을 사용하여 웹 앱 실행

Firebase 로컬 에뮬레이터 도구 모음을 사용하면 웹 앱의 대부분의 기능을 로컬에서 테스트할 수 있습니다.

터미널에서 웹 앱의 루트에 있는지 확인합니다.
다음 명령어를 실행하여 Firebase 로컬 에뮬레이터 모음을 설치한 후 실행합니다.
```
firebase init emulators
firebase emulators:start
```

7. '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의 소스 코드에는 이미지를 업로드하고 Firestore 문서에 URL을 쓰는 코드가 이미 제공되어 있습니다.

'Gemini API를 사용하는 멀티모달 태스크' 확장 프로그램 설치

'Gemini API를 사용하는 멀티모달 태스크' 확장 프로그램'으로 이동합니다.
Firebase Console에 설치를 클릭합니다.
Firebase 프로젝트를 선택합니다.
확장 프로그램 구성 섹션이 표시될 때까지 다음 > 다음 > 다음을 클릭합니다.
1. Gemini API 제공업체 메뉴에서 Google AI의 Gemini API를 사용할지 아니면 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. 나머지 설정은 모두 기본값으로 둡니다.
확장 프로그램 설치를 클릭하고 확장 프로그램이 설치될 때까지 기다립니다.

'Gemini API를 사용하는 멀티모달 태스크' 확장 프로그램 사용해 보기

이 Codelab의 목표는 웹 앱을 통해 '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를 입력합니다. 유형 상자에서 불리언을 선택합니다. 값 상자에서 true를 선택합니다.
저장을 클릭하고 몇 초 정도 기다립니다.

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

웹 앱의 이미지 갤러리 사용

브라우저에서 로컬에서 실행 중인 Friendly Conf 웹 앱이 있는 탭으로 돌아갑니다.
갤러리 탐색 탭을 클릭합니다.
업로드된 이미지와 AI 생성 설명이 포함된 갤러리가 표시됩니다. 앞서 Storage 버킷의 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 프로젝트 내의 앱 호스팅으로 이동합니다.
시작하기 > GitHub에 연결을 클릭합니다.
GitHub 계정과 저장소를 선택합니다. 다음을 클릭합니다.
배포 설정 > 루트 디렉터리에서 소스 코드가 있는 폴더의 이름을 입력합니다 (package.json가 저장소의 루트 디렉터리에 없는 경우).
실제 브랜치의 경우 GitHub 저장소의 기본 브랜치를 선택합니다. 다음을 클릭합니다.
백엔드의 ID를 입력합니다 (예: chatbot).
완료 및 배포를 클릭합니다.

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

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

9. 결론

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

확장 프로그램 설치 및 구성

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

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

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

AI 기반 웹 앱 빌드

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

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

또한 웹 앱은 'Gemini API를 사용한 멀티모달 작업' 확장 프로그램을 사용하여 업로드된 이미지의 이미지 설명을 자동으로 생성했습니다.

다음 단계

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