앱 프로토타입 제작 에이전트 시작하기

Firebase Studio에는 자연어, 이미지, 그리기 도구를 포함한 멀티모달 프롬프트를 사용하여 빠르게 프로토타입을 제작하고 AI 기반 웹 앱을 생성할 수 있게 해주는 웹 기반 인터페이스가 포함되어 있습니다. 이 에이전트는 Next.js 앱을 지원하며 향후 다른 플랫폼과 프레임워크도 지원될 예정입니다.

App Prototyping agent는 생성형 AI를 사용하여 풀 스택 에이전트 웹 앱을 개발, 테스트, 반복, 게시하는 간소화된 노 코드 개발 플로우입니다. 개발자는 선택적 이미지와 함께 자연어로 앱 아이디어를 설명하면 에이전트에서 앱 청사진, 코드, 웹 미리보기를 생성합니다. 풀 스택 앱 개발과 게시를 지원하기 위해 Firebase Studio는 다음 서비스를 자동으로 프로비저닝할 수 있습니다.

• 앱에서 AI를 사용하는 경우: Firebase Studio는 Genkit 흐름 기능을 사용하여 Gemini와 함께 작동하도록 Gemini Developer API를 앱에 추가합니다. 자체 Gemini API 키를 사용하거나 Firebase Studio에서 Firebase 프로젝트와 Gemini API 키를 자동으로 프로비저닝하게 할 수 있습니다.

• 앱을 웹에 게시하려는 경우: Firebase Studio는 프로젝트를 만들고 Firebase App Hosting으로 앱을 빠르게 게시하는 방법을 제공합니다.

중요: App Prototyping agent가 Gemini API 키 및 기타 Firebase 서비스를 설정하면 작업공간과 연결할 새 Firebase 프로젝트가 생성됩니다. 현재 App Prototyping agent 뷰에서 게시할 때 연결할 수 있는 유일한 프로젝트입니다. GitHub에 코드를 체크인하고 App Hosting 백엔드를 만들어 다른 Firebase 프로젝트에 게시할 수 있습니다. 코드 뷰를 사용하여 Firebase 서비스를 통합할 수도 있습니다.

Firebase Studio에서 자연어, 이미지, 그리기 도구를 사용하여 앱을 미세 조정하고 코드를 직접 수정하고 변경사항을 롤백하고 앱을 게시하며 성능을 모니터링할 수 있습니다.

참고: App Prototyping agent를 사용하면 Next.js로 웹 앱을 빌드할 수 있습니다. 다른 플랫폼과 프레임워크도 곧 지원될 예정입니다.

시작하기

App Prototyping agent를 시작하려면 다음 단계를 수행합니다.

1. Google 계정에 로그인하고 Firebase Studio를 엽니다.

2. AI로 앱 프로토타입 제작 필드에 앱 아이디어를 자연어로 설명합니다.

   예를 들어 다음과 같은 프롬프트를 입력하여 레시피 생성 앱을 만들 수 있습니다.

   Use secure coding practices to create an error-free web app that lets
   users upload a photo or take a picture with their browser
   camera. The app identifies the food in the picture and generates a
   recipe and accompanying image that includes that food.
   
   If no food product is identified, generate a random dessert recipe.
   

   도움말: 최상의 결과를 얻으려면 프롬프트를 최대한 구체적으로 작성하세요. 원하는 기능, 사용자 워크플로, 데이터 요구사항을 포함하세요. 또한 AI를 사용한 가장 효과적인 개발 프로세스는 반복적이며 개발자는 Firebase에서 Gemini와 공동작업하여 기능을 계속해서 미세 조정하고 추가할 수 있습니다. 효과적인 프롬프트 작성에 대해 자세히 알아보세요.

3. 원하는 경우 프롬프트와 함께 사용할 이미지를 업로드합니다. 예를 들어 앱에서 사용하려는 색 구성표가 포함된 이미지를 업로드하고 이를 사용하라고 Firebase Studio에 지시할 수 있습니다. 이미지 크기는 3MiB 미만이어야 합니다.

4. AI로 프로토타입 제작을 클릭합니다.

   Gemini는 프롬프트를 기반으로 앱 청사진을 생성하여 제안된 앱 이름, 필수 기능, 스타일 가이드라인을 반환합니다.

5. 청사진을 검토합니다. 필요한 경우 몇 가지 사항을 변경합니다. 예를 들어 다음 옵션 중 하나를 사용하여 제안된 앱 이름이나 색 구성표를 변경할 수 있습니다.

   • 맞춤설정을 클릭하고 청사진을 직접 수정합니다. 수정한 후 저장을 클릭합니다.

   • 채팅 창의 설명... 필드에 명확한 질문과 맥락을 추가합니다. 이미지를 추가로 업로드할 수도 있습니다.

6. 이 앱의 프로토타입 제작을 클릭합니다.

   중요: Firebase의 Gemini는 그럴듯해 보이지만 실제로는 잘못된 출력을 생성할 수 있습니다. Google의 관점을 반영하지 않는 부정확한 정보를 응답으로 표시할 수 있습니다. Gemini의 모든 출력을 사용 전에 미리 검사하고 생성된 코드를 테스트하지 않은 상태로 프로덕션에서 사용하지 마세요. 채팅에 개인 식별 정보(PII) 또는 사용자 데이터를 입력하지 마세요.

7. 앱 프로토타입 제작 에이전트가 앱 코딩을 시작합니다.

   • 앱에서 AI를 사용하는 경우 Gemini API 키를 추가하거나 생성하라는 메시지가 표시됩니다. 자동 생성을 클릭하면 App Prototyping agent에서 Firebase 프로젝트와 Gemini API 키를 자동으로 프로비저닝합니다.
   중요: 자동 생성을 선택하면 App Prototyping agent에서 대신 Firebase Studio 작업공간 이름과 일치하는 프리픽스로 Firebase 프로젝트를 만들고 프로젝트에 새 Gemini API 키를 만듭니다. 또한 .env 파일의 Firebase Studio 작업공간 내에 키를 저장합니다. 언제든지 새 프로젝트에 액세스하려면 페이지 상단에 있는 프로젝트 이름을 클릭하세요. 나중에 Gemini API 키에 액세스하여 복사하거나 삭제하려면 Google Cloud 콘솔을 사용하세요.

테스트, 미세 조정, 디버그, 반복

초기 앱이 생성된 후에는 테스트, 미세 조정, 디버그, 반복할 수 있습니다.

• 앱 검토 및 상호작용: 코드 생성이 완료되면 앱 미리보기가 표시됩니다. 미리보기와 직접 상호작용하여 테스트할 수 있습니다. 앱 미리보기에서 자세히 알아보세요.

• 오류 발생 시 수정: 대부분의 경우 App Prototyping agent에서 발생한 오류를 수정하라는 메시지가 표시됩니다. 오류 수정을 클릭하여 수정을 시도합니다.

  자동으로 수정하라는 메시지가 표시되지 않는 오류가 발생하면 오류와 관련 컨텍스트(예: 'Firebase 초기화 코드의 이 오류를 수정해 주시겠어요?')를 채팅 창에 복사하여 Gemini로 전송합니다.

  도움말: Gemini는 추론을 설명하지만, 실행하기 전에 계획을 설명하도록 요청할 수도 있습니다.

• 자연어를 사용하여 테스트 및 반복: 앱을 철저히 테스트하고 App Prototyping agent를 사용하여 만족할 때까지 코드와 청사진을 반복합니다.

  Prototyper mode, you can also use the following features:에서

  • 주석 추가를 클릭하여 미리보기 창에 직접 그립니다. 사용 가능한 도형, 이미지, 텍스트 도구와 선택적 텍스트 프롬프트를 사용하여 App Prototyping agent에서 변경하려는 사항을 시각적으로 설명합니다.

  • 선택을 클릭하여 특정 요소를 선택하고 App Prototyping agent의 안내를 입력합니다. 이렇게 하면 특정 아이콘, 버튼, 텍스트 또는 기타 요소를 빠르게 타겟팅할 수 있습니다. 이미지를 클릭하면 Unsplash에서 스톡 이미지를 검색하고 선택할 수도 있습니다.

  원하는 경우 미리보기 링크 공유를 클릭하여 Firebase Studio 공개 프리뷰를 통해 일시적으로 앱을 공개적으로 공유할 수 있습니다.

• 코드에서 직접 디버그 및 반복: 코드로 전환을 클릭하여 Code 뷰를 엽니다. 여기에서 모든 앱 파일을 확인하고 코드를 직접 수정할 수 있습니다. Prototyper mode at any time.로 다시 전환할 수 있습니다.

  Code 뷰에서는 다음과 같은 유용한 기능도 사용할 수 있습니다.

  • Firebase Studio의 기본 제공 디버깅 및 보고 기능을 사용하여 앱을 검사, 디버그, 감사합니다.

  • Firebase의 Gemini를 사용하는 AI 지원: 코드 내에서 인라인 또는 대화형 채팅 사용(둘 다 기본적으로 사용 가능) 대화형 채팅을 사용하면 문제를 진단하고 해결 방법을 제공하며 앱을 더 빠르게 수정하는 데 도움이 되는 도구를 실행할 수 있습니다. 채팅에 액세스하려면 작업공간 하단에 있는 sparkGemini를 클릭합니다.

  • Firebase Local Emulator Suite에 액세스하여 데이터베이스 및 인증 데이터를 확인합니다. 작업공간에서 에뮬레이터를 열려면 다음 단계를 따르세요.

    1. 코드로 전환을 클릭하고 Firebase Studio 확장 프로그램(Ctrl+',Ctrl+' 또는 macOS의 경우 Cmd+',Cmd+')을 엽니다.

    2. 백엔드 포트로 스크롤하여 펼칩니다.

    3. 포트 4000에 해당하는 작업 열에서 새 창에서 열기를 클릭합니다.

• 생성형 AI 기능 성능 테스트 및 측정: Genkit 개발자 UI를 사용하여 Genkit AI 플로우를 실행하고, 테스트, 디버그, 다양한 모델과 상호작용, 프롬프트 미세 조정 등을 할 수 있습니다.

  Genkit 개발자 UI에서 Genkit 플로우를 로드하고 테스트를 시작하려면 다음 단계를 따르세요.

  1. Firebase Studio 작업공간의 터미널에서 다음 명령어를 실행하여 Gemini API 키를 소싱하고 Genkit 서버를 시작합니다.

      npm run genkit:watch
     

  2. Genkit 개발자 UI 링크를 클릭합니다. Genkit 개발자 UI가 플로우, 프롬프트, 삽입기, 사용 가능한 다양한 모델이 포함된 새 창으로 열립니다.

  Genkit 개발자 도구에서 Genkit 개발자 UI에 대해 자세히 알아보세요.

Firebase App Hosting으로 앱 게시

앱을 테스트하고 작업공간에서 만족스러운 결과를 얻은 후 Firebase App Hosting을 사용하여 웹에 게시할 수 있습니다.

중요: Firebase App Hosting을 사용하려면 Cloud Billing 계정이 필요합니다. 결제 계정을 Firebase 프로젝트에 연결하면 프로젝트가 사용한 만큼만 지불하는 Blaze 요금제로 자동 업그레이드되고 Gemini API와 기타 Firebase 및 Google Cloud 서비스 사용량이 유료 등급으로 업그레이드됩니다. 무료 할당량을 초과하는 유료 서비스 사용량에 대한 요금이 청구됩니다. App Hosting 비용 이해, Firebase 가격 책정, Gemini Developer API 가격 책정에서 자세히 알아보세요.

App Hosting을 설정하면 Firebase Studio에서 자동으로 Firebase 프로젝트를 만들고 (Gemini API 키를 자동 생성하여 아직 프로젝트가 생성되지 않은 경우) Cloud Billing 계정 연결 단계를 안내합니다.

앱을 게시하려면 다음 단계를 따르세요.

1. 게시를 클릭하여 Firebase 프로젝트를 설정하고 앱을 게시합니다. 앱 게시 창이 표시됩니다.

   중요: Gemini API 키를 자동으로 생성하지 않은 경우 게시를 클릭하면 Firebase Studio에서 대신 Firebase 프로젝트를 프로비저닝합니다. 페이지 상단에 있는 프로젝트 이름을 클릭하여 Firebase 프로젝트에 액세스할 수 있습니다.

2. Firebase 프로젝트 단계에서 App Prototyping agent에는 작업공간과 연결된 Firebase가 표시됩니다. Gemini API 키 생성 중에 프로젝트가 생성되지 않은 경우 새 프로젝트가 자동으로 생성됩니다. 다음을 클릭하여 계속합니다.

3. Cloud Billing 계정 연결 단계에서 다음 중 하나를 선택합니다.

   • Firebase 프로젝트에 연결할 Cloud Billing 계정을 선택합니다.

   • Cloud Billing 계정이 없거나 새 계정을 만들려면 Cloud Billing 계정 만들기를 클릭합니다. 그러면 Google Cloud 콘솔이 열리며 여기에서 새로운 셀프서비스 Cloud Billing 계정을 만들 수 있습니다. 계정을 만든 후 Firebase Studio로 돌아가 Cloud Billing 연결 목록에서 계정을 선택합니다.

4. 다음을 클릭합니다. Firebase Studio는 결제 계정을 작업공간과 연결된 프로젝트에 연결합니다. 이 프로젝트는 Gemini API 키를 자동 생성했을 때 또는 게시를 클릭했을 때 생성됩니다.

   중요: Firebase App Hosting을 사용하려면 Cloud Billing 계정이 필요합니다. 결제 계정을 Firebase 프로젝트에 연결하면 프로젝트가 사용한 만큼만 지불하는 Blaze 요금제로 자동 업그레이드되고 Gemini API와 기타 Firebase 및 Google Cloud 서비스 사용량이 유료 등급으로 업그레이드됩니다. 무료 할당량을 초과하는 유료 서비스 사용량에 대한 요금이 청구됩니다. App Hosting 비용 이해, Firebase 가격 책정, Gemini Developer API 가격 책정에서 자세히 알아보세요.

5. 서비스 설정을 클릭합니다. 앱 프로토타입 제작 에이전트가 Firebase 서비스를 프로비저닝하기 시작합니다.

6. 지금 게시를 클릭합니다. Firebase Studio는 Firebase 서비스를 설정합니다. 이는 완료하는 데 최대 몇 분이 걸릴 수 있습니다. 백그라운드에서 어떤 일이 일어나고 있는지 자세히 알아보려면 App Hosting 빌드 프로세스를 참조하세요.

   도움말: 지금 게시하지 않으려면 나중에 게시를 클릭하면 됩니다.

7. 게시 단계가 완료되면 App Hosting 모니터링 가능성을 기반으로 하는 URL 및 앱 통계와 함께 앱 개요가 표시됩니다. Firebase에서 생성된 도메인 대신 커스텀 도메인(예: example.com 또는 app.example.com)을 사용하려면 Firebase Console에서 커스텀 도메인을 추가하면 됩니다.

도움말: 게시 중에 오류가 발생하면 게시 후 '앱 게시 실패' 오류가 표시됨에서 게시 오류를 찾고 수정하는 방법을 알아보세요.

App Hosting에 대한 자세한 내용은 App Hosting 및 작동 방식 이해를 참조하세요.

Firebase App Check 및 reCAPTCHA Enterprise로 앱 보호

Firebase 또는 Google Cloud 서비스를 앱에 통합한 경우 Firebase App Check를 사용하면 승인되지 않은 클라이언트가 Firebase 리소스에 액세스하는 것을 방지하여 앱 백엔드를 악용으로부터 보호할 수 있습니다. Google 서비스(Firebase 및 Google Cloud 서비스 포함)와 자체 커스텀 백엔드와 모두 호환되므로 리소스를 안전하게 보호할 수 있습니다.

백엔드 리소스를 악용으로부터 보호하기 위해 공개적으로 게시하는 앱에 App Check를 추가하는 것이 좋습니다.

이 섹션에서는 App Prototyping agent로 만든 웹 앱에 reCAPTCHA Enterprise를 사용하여 Firebase Studio 내에서 App Check를 설정하는 방법을 안내합니다. 하지만 Firebase 서비스를 구현하고 맞춤 제공자를 구현할 수 있는 모든 앱 내에서 App Check를 설정할 수 있습니다. Firebase App Check에서 자세히 알아보세요.

reCAPTCHA Enterprise는 최대 10,000회의 평가를 무료로 제공합니다.

1단계: 앱에 reCAPTCHA Enterprise 설정

1. Google Cloud 콘솔의 reCAPTCHA Enterprise 섹션을 엽니다.

2. Google Cloud 콘솔 프로젝트 선택기에서 Firebase 프로젝트 이름을 선택합니다.

3. reCAPTCHA Enterprise API를 사용 설정하라는 메시지가 표시되면 사용 설정합니다.

4. 시작하기를 클릭하고 reCAPTCHA 사이트 키의 표시 이름을 추가합니다.

5. 기본 웹 애플리케이션 유형 키를 수락합니다.

6. 도메인 추가를 클릭하고 도메인을 추가합니다. App Hosting 도메인(예: studio--PROJECT_ID.REGION.hosted.app)과 앱에서 사용 중이거나 사용할 계획인 모든 커스텀 도메인을 추가합니다.

7. 다음 단계를 클릭합니다.

8. reCAPTCHA 테스트를 사용하시겠어요?를 선택하지 않은 상태로 둡니다.

9. 키 만들기를 클릭합니다.

10. 키 ID를 복사하여 저장하고 App Check 구성으로 이동합니다.

2단계: App Check 구성

1. Firebase Console을 열고 탐색 메뉴에서 빌드 > 앱 체크를 클릭합니다.

2. 시작하기를 클릭한 다음 앱 옆에 있는 등록을 클릭합니다.

3. ReCAPTCHA를 클릭하여 펼치고 reCAPTCHA Enterprise용으로 생성한 키 ID를 붙여넣습니다.

4. 저장을 클릭합니다.

3단계: 코드에 App Check 추가

1. Firebase Studio로 돌아가 Code 뷰에서 생성한 사이트 키를 .env 파일에 추가합니다.

   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

2. Firebase 구성이 아직 .env에 저장되어 있지 않으면 다음과 같이 가져옵니다.

   • Firebase Console에서 프로젝트 설정을 열고 앱에 해당하는 섹션에서 찾습니다.

   • Code 뷰의 터미널에서 다음을 실행합니다.

     1. Firebase에 로그인: firebase auth login
     2. 프로젝트 선택: firebase use FIREBASE_PROJECT_ID
     3. Firebase 구성 가져오기: firebase apps:sdkconfig

3. 다음과 같이 .env 파일에 구성을 추가합니다.

   NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

4. 앱 코드에 App Check를 추가합니다. Gemini에 앱에 reCAPTCHA Enterprise가 포함된 App Check를 추가하도록 요청하거나('reCAPTCHA Enterprise'를 지정하고 다시 한번 확인하세요) App Check 초기화의 단계를 따르세요.

5. App Hosting에 사이트를 다시 게시합니다. Firebase 기능을 테스트하여 데이터를 생성해 보세요.

6. Firebase Console에서 빌드 > 앱 체크를 열어 App Check가 요청을 수신하는지 확인합니다.

7. 클릭하여 Firebase 서비스를 검사합니다. 요청이 수신되는지 확인한 후 시행을 클릭하여 App Check를 시행합니다.

8. Firebase Authentication에 대해 인증 및 시행을 반복합니다.

App Check에 앱을 등록한 후 App Check가 일반적으로 유효한 것으로 분류하지 않는 환경에서 앱을 실행하려는 경우(예: 개발 중 로컬에서 또는 지속적 통합(CI) 환경에서) 실제 증명 제공자 대신 App Check 디버그 제공자를 사용하는 앱의 디버그 빌드를 만들 수 있습니다. 웹 앱에서 디버그 제공자와 함께 App Check 사용에서 자세히 알아보세요.

앱 모니터링

Firebase Studio의 앱 개요 패널에서는 앱에 대한 주요 측정항목과 정보를 제공하므로 App Hosting의 기본 제공 모니터링 가능성 도구를 사용하여 웹 앱 성능을 모니터링할 수 있습니다. 사이트가 출시되면 게시를 클릭하여 개요에 액세스할 수 있습니다. 이 패널에서 다음을 수행할 수 있습니다.

• 게시를 클릭하여 새 버전의 앱을 출시합니다.
• 앱 방문에서 앱 링크를 공유하거나 앱을 직접 엽니다.
• 요청 총개수와 최신 출시 상태를 포함하여 지난 7일 간의 앱 성능 요약을 검토합니다. 세부정보 보기를 클릭하여 Firebase Console에서 더 많은 정보에 액세스합니다.
• 지난 24시간 동안 앱에서 수신한 요청 수를 HTTP 상태 코드별로 분류한 그래프를 봅니다.

앱 개요 패널을 닫은 경우 언제든지 게시를 클릭하여 다시 열 수 있습니다.

출시 및 버전 관리에서 App Hosting 출시 관리 및 모니터링을 자세히 알아보세요.

배포 롤백

앱의 연속 버전을 App Hosting에 배포한 경우 이전 버전 중 하나로 롤백할 수 있습니다. 삭제할 수도 있습니다.

• 게시된 사이트를 롤백하려면 다음 안내를 따르세요.

  1. Firebase Console에서 App Hosting을 엽니다.

  2. 앱의 백엔드를 찾아 보기를 클릭한 후 출시를 클릭합니다.

  3. 롤백할 배포 옆에 있는 더보기 를 클릭한 후 이 빌드로 롤백을 선택하고 확인합니다.

  출시 및 버전 관리에서 자세히 알아보세요.

• 웹에서 App Hosting 도메인을 삭제하려면 다음 안내를 따르세요.

  1. Firebase Console에서 App Hosting을 열고 Firebase Studio 앱 섹션에서 보기를 클릭합니다.

  2. 백엔드 정보 섹션에서 관리를 클릭합니다. 도메인 페이지가 로드됩니다.

  3. 도메인 옆에 있는 더보기 를 클릭한 후 도메인 사용 중지를 선택하고 확인합니다.

  이렇게 하면 웹에서 도메인이 삭제됩니다. App Hosting 백엔드를 완전히 삭제하려면 백엔드 삭제의 안내를 따르세요.

배포된 기능에 Genkit 모니터링 사용

AI 플로우 코드에 원격 분석을 사용 설정하여 Genkit 기능 단계, 입력, 출력을 모니터링할 수 있습니다. Genkit의 원격 분석 기능을 사용하면 AI 흐름의 성능과 사용량을 모니터링할 수 있습니다. 이 데이터를 통해 개선할 영역을 파악하고 문제를 해결하고 성능과 경제성이 개선될 수 있도록 프롬프트와 흐름을 최적화하고 시간 경과에 따른 흐름 사용량을 추적할 수 있습니다.

Genkit에서 모니터링을 설정하려면 원격 분석을 Genkit AI 흐름에 추가한 후 Firebase Console에서 결과를 봅니다.

중요: Genkit Monitoring은 유료 서비스인 Google Cloud Logging, Metrics, Trace에 작성된 원격 분석 데이터를 사용합니다. 가격 책정 세부정보와 무료 등급 한도를 알아보려면 Google Cloud Observability 가격 책정 페이지를 참조하세요.

1단계: Firebase Studio에서 Genkit 플로우 코드에 원격 분석 추가

코드에서 모니터링을 설정하려면 다음 안내를 따르세요.

1. 아직 Code 뷰가 아니면 코드로 전환을 클릭하여 엽니다.

2. package.json을 확인하여 설치된 Genkit 버전을 확인합니다.

3. 터미널(Ctrl-Shift-C 또는 macOS의 경우 Cmd-Shift-C)을 엽니다.

4. 터미널 내부를 클릭하고 package.json 파일과 일치하는 버전을 사용하여 Firebase 플러그인을 설치합니다. 예를 들어 package.json의 Genkit 패키지가 1.0.4이면 다음 명령어를 실행하여 플러그인을 설치해야 합니다.

   npm i --save @genkit-ai/firebase@1.0.4

5. 탐색기에서 src > ai > flows를 펼칩니다. Genkit 흐름이 포함된 TypeScript 파일 하나 이상이 flows 폴더에 표시됩니다.

6. 흐름 중 하나를 클릭하여 엽니다.

   도움말: 파일의 prompt 섹션을 확인하세요. 이 섹션을 직접 수정하여 Gemini의 응답을 미세 조정할 수 있습니다.

7. 파일의 가져오기 섹션 하단에 다음을 추가하여 FirebaseTelemetry를 가져오고 사용 설정합니다.

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

   도움말: Genkit의 고급 원격 분석 옵션을 자세히 알아보려면 고급 구성을 참조하세요.

2단계: 권한 설정

Firebase Studio는 Firebase 프로젝트를 설정할 때 필요한 API를 자동으로 사용 설정했지만 개발자가 App Hosting 서비스 계정에 권한을 제공해야 합니다.

권한을 설정하려면 다음 안내를 따르세요.

1. Google Cloud IAM 콘솔을 열고 프로젝트를 선택한 후 App Hosting 서비스 계정에 다음 역할을 부여합니다.

   • 모니터링 측정항목 작성자(roles/monitoring.metricWriter)
   • Cloud Trace 에이전트(roles/cloudtrace.agent)
   • 로그 작성자(roles/logging.logWriter)

2. App Hosting에 앱을 다시 게시합니다.

3. 게시가 완료되면 앱을 로드하고 사용합니다. 5분 후 앱에서 원격 분석 데이터를 로깅해야 합니다.

3단계: Firebase Console에서 생성형 AI 기능 모니터링

원격 분석이 구성되면 Genkit은 모든 플로우에 대한 요청 수, 성공 여부, 지연 시간을 기록하고 Genkit은 각 특정 플로우에 대한 안정성 측정항목을 수집하고 세부 그래프를 보여주며 캡처된 trace를 로깅합니다.

Genkit으로 구현된 AI 기능을 모니터링하려면 다음 안내를 따르세요.

1. 5분 후 Firebase Console에서 Genkit을 열고 Genkit의 프롬프트와 응답을 검토합니다.

   Genkit은 다음 안정성 측정항목을 컴파일합니다.

   • 총 요청 수: 플로우에서 수신한 요청 총개수입니다.
   • 성공률: 성공적으로 처리된 요청의 비율입니다.
   • 95번째 백분위수 지연 시간: 플로우의 95번째 백분위수 지연 시간으로, 요청의 95%가 처리되는 데 걸리는 시간입니다.

   • 토큰 사용량:

     • 입력 토큰: 프롬프트에서 모델로 전송된 토큰 수입니다.
     • 출력 토큰: 모델에서 응답에 생성한 토큰 수입니다.

   • 이미지 사용량:

     • 입력 이미지: 프롬프트에서 모델로 전송된 이미지 수입니다.
     • 출력 이미지: 모델에서 응답에 생성한 이미지 수입니다.

   안정성 측정항목을 펼치면 세부적인 그래프가 제공됩니다.

   • 시간 경과에 따른 요청 볼륨
   • 시간 경과에 따른 성공률
   • 시간 경과에 따른 입력 및 출력 토큰 수
   • 시간 경과에 따른 지연 시간(95번째 및 50번째 백분위수)

Genkit에서 Genkit을 자세히 알아보세요.

도움말: 시작부터 게시된 웹 앱 모니터링에 이르기까지 App Prototyping agent를 사용한 전체 애플리케이션 수명 주기에 대한 둘러보기는 Firebase Studio를 사용하여 풀 스택 웹 앱 개발, 게시, 모니터링을 참조하세요.

다음 단계

• Firebase Studio를 사용하여 풀 스택 웹 앱 개발, 게시, 모니터링
• 템플릿이나 솔루션이 있는 프레임워크로 애플리케이션 개발