앱 프로토타이핑 에이전트를 사용하여 풀 스택 웹 앱 개발, 게시, 모니터링

이 가이드에서는 App Prototyping agent를 사용하여 Firebase에서 Gemini를 통해 풀 스택 앱을 빠르게 개발하고 게시하는 방법을 보여줍니다. 자연어 프롬프트를 사용하여 사진 또는 브라우저 내 카메라에서 식품을 식별하고 식별된 재료가 포함된 레시피를 제공하는 Next.js 앱을 생성합니다. 그런 다음 앱을 미세 조정하고 개선하여 궁극적으로 Firebase App Hosting에 게시합니다.

이 가이드를 진행하면서 사용할 다른 기술은 다음과 같습니다.

1단계: 앱 생성

Google 계정에 로그인하고 Firebase Studio를 엽니다.
AI로 앱 프로토타입 만들기 필드에 빌드하려는 앱에 관한 설명을 입력합니다. 이미지 기반 레시피 앱을 만드는 이 솔루션의 경우 다음과 같은 프롬프트를 사용하여 카메라, 생성형 AI를 사용하는 앱의 프로토타입을 만들 수 있습니다.
```
Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.
```
도움말: 프롬프트와 함께 표시할 이미지를 업로드할 수도 있습니다. 예를 들어 앱에서 사용하려는 색 구성표가 포함된 이미지를 업로드하고 Firebase Studio에 이를 사용하도록 지시할 수 있습니다. 이미지 크기는 3MiB 미만이어야 합니다.
AI로 프로토타입 제작을 클릭합니다.

Gemini는 프롬프트를 기반으로 앱 블루프린트를 생성하여 제안된 앱 이름, 필수 기능, 스타일 가이드라인을 반환합니다.
청사진을 검토하고 몇 가지 사항을 변경합니다. 예를 들어 다음 옵션 중 하나를 사용하여 제안된 앱 이름이나 색상 구성표를 변경할 수 있습니다.
- 맞춤설정을 클릭하고 블루프린트를 직접 수정합니다. 변경한 후 저장을 클릭합니다.
- 채팅 창의 설명... 필드에 명확한 질문과 맥락을 추가합니다. 이미지를 추가로 업로드할 수도 있습니다.
이 앱의 프로토타입 만들기를 클릭합니다. Gemini가 앱 코딩을 시작합니다. 앱 설명에 생성형 AI가 필요한 기능이 설명되어 있으므로 Gemini에서 Gemini API 키를 묻는 메시지를 표시합니다.
자체 Gemini API 키를 추가하거나 자동 생성을 클릭하여 Gemini API 키를 생성합니다.

중요: 자동 생성을 선택하면 App Prototyping agent가 Firebase Studio 워크스페이스의 이름과 일치하는 접두사로 Firebase 프로젝트를 대신 만들고 프로젝트에 새 Gemini API 키를 만듭니다. 또한 Firebase Studio 작업공간 내에 .env 파일로 키를 저장합니다. 언제든지 새 프로젝트에 액세스하려면 페이지 상단의 프로젝트 이름을 클릭합니다. 나중에 Gemini API 키에 액세스하여 복사하거나 삭제하려면 Google Cloud 콘솔을 사용하세요.

2단계: 테스트, 수정, 디버그, 반복

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

앱 검토 및 상호작용: 코드 생성이 완료되면 앱의 미리보기가 표시됩니다. 미리보기와 직접 상호작용하여 테스트할 수 있습니다.
자연어를 사용하여 앱 반복: 채팅 인터페이스를 계속 사용하여 Gemini에게 기능을 추가하고 앱을 수정해 달라고 요청합니다.
앱 테스트: 앱 미리보기 창에서 다양한 음식을 보여주는 이미지를 업로드하여 앱이 재료를 식별하고 레시피를 제공하는 기능을 테스트합니다. 원하는 경우 Code 뷰를 사용하여 Firebase Studio 공개 미리보기를 통해 일시적으로 앱을 공개적으로 공유할 수 있습니다.
코드에서 직접 디버그 및 반복: Switch to Code(코드로 전환)를 클릭하여 Code 보기를 엽니다. 여기에서 모든 앱 파일을 확인하고 코드를 직접 수정할 수 있습니다. Prototyper mode at any time.로 다시 전환할 수 있습니다.

Code 뷰에서는 다음과 같은 유용한 기능도 사용할 수 있습니다.
- Firebase Studio의 기본 제공 디버깅 및 보고 기능을 사용하여 앱을 검사, 디버그, 감사합니다.
- Firebase에서 Gemini를 사용하는 AI 지원: 코드 내 인라인 또는 대화형 채팅 (둘 다 기본적으로 사용 가능) 대화형 채팅을 사용하면 문제를 진단하고, 해결 방법을 제공하고, 앱을 더 빠르게 수정하는 데 도움이 되는 도구를 실행할 수 있습니다. 채팅에 액세스하려면 작업공간 하단에서 sparkGemini를 클릭합니다.

(선택사항) 3단계: App Hosting로 앱 게시하기

앱을 테스트하고 만족하면 Firebase App Hosting를 사용하여 웹에 게시할 수 있습니다.

App Hosting를 설정하면 Firebase Studio에서 Firebase 프로젝트를 만들고 Cloud Billing 계정 연결 단계를 안내합니다.

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

게시를 클릭하여 새 Firebase 프로젝트를 만들고 App Hosting 설정을 시작합니다. 앱 게시 창이 표시됩니다.

중요: Gemini API 키를 자동으로 생성하지 않은 경우 게시를 클릭하면 Firebase Studio가 대신 Firebase 프로젝트를 프로비저닝합니다. 페이지 상단의 프로젝트 이름을 클릭하여 Firebase 프로젝트에 액세스할 수 있습니다.
Firebase 프로젝트 단계에서 자동으로 생성된 Firebase 프로젝트의 이름을 확인한 다음 다음을 클릭합니다.
Cloud Billing 계정 연결 단계에서 다음 중 하나를 선택합니다.
- Firebase 프로젝트에 연결할 Cloud Billing 계정을 선택합니다.
- Cloud Billing 계정이 없거나 새 계정을 만들려면 Cloud Billing 계정 만들기를 클릭합니다. 그러면 Google Cloud 콘솔이 열리며 여기에서 새로운 셀프서비스 Cloud Billing 계정을 만들 수 있습니다. 계정을 만든 후 Firebase Studio로 돌아가 Cloud Billing 연결 목록에서 계정을 선택합니다.
다음을 클릭합니다. Firebase Studio는 결제 계정을 Workspace와 연결된 프로젝트에 연결합니다. 이 프로젝트는 Gemini API 키를 자동 생성했을 때 또는 게시를 클릭했을 때 생성됩니다. 그런 다음 App Hosting는 Google Cloud에서 앱의 완전 관리형 환경을 설정합니다.

중요: 결제 계정을 연결하면 프로젝트가 무료 Spark 요금제에서 사용한 만큼만 지불하는 Blaze 요금제로 업그레이드됩니다. Firebase Studio 가격 책정에서 자세히 알아보세요.
첫 번째 출시 만들기를 클릭합니다. Firebase Studio는 App Hosting 출시를 시작합니다. 완료하는 데 최대 10분이 걸릴 수 있습니다. 백그라운드에서 어떤 일이 일어나고 있는지 자세히 알아보려면 App Hosting 빌드 프로세스를 참고하세요.

도움말: 지금 출시를 만들고 싶지 않다면 나중에 출시 만들기를 클릭하면 됩니다.
출시가 완료되면 App Hosting 관찰 가능성을 기반으로 하는 URL 및 앱 통계와 함께 앱 개요가 표시됩니다. Firebase에서 생성된 도메인 대신 커스텀 도메인(예: example.com 또는 app.example.com)을 사용하려면 Firebase Console에서 커스텀 도메인을 추가하면 됩니다.

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

(선택사항) 4단계: 앱 모니터링

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

출시 만들기를 클릭하여 새 버전의 앱을 출시합니다.
앱 방문에서 앱 링크를 공유하거나 앱을 직접 엽니다.
총 요청 수 및 최신 출시 상태를 비롯하여 지난 7일 동안의 앱 실적 요약을 검토합니다. 세부정보 보기를 클릭하여 Firebase 콘솔에서 더 많은 정보에 액세스합니다.
지난 24시간 동안 앱이 수신한 요청 수를 HTTP 상태 코드별로 분류한 그래프를 확인합니다.

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

App Hosting 출시 관리 및 모니터링에 대한 자세한 내용은 출시 및 버전 관리를 참고하세요.

(선택사항) 5단계: 배포 롤백

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

게시된 사이트를 롤백하려면 다음 단계를 따르세요.
1. Firebase 콘솔에서 App Hosting를 엽니다.
2. 앱의 백엔드를 찾아 보기를 클릭한 다음 출시를 클릭합니다.
3. 롤백할 배포 옆에 있는 더보기 를 클릭한 다음 이 빌드로 롤백을 선택하고 확인합니다.
출시 및 버전 관리에서 자세히 알아보세요.
웹에서 App Hosting 도메인을 삭제하려면 다음 단계를 따르세요.
1. Firebase 콘솔에서 App Hosting를 열고 Firebase Studio 앱 섹션에서 보기를 클릭합니다.
2. 백엔드 정보 섹션에서 관리를 클릭합니다. 도메인 페이지가 로드됩니다.
3. 도메인 옆에 있는 더보기 를 클릭한 다음 도메인 사용 중지를 선택하고 확인합니다.
이렇게 하면 웹에서 도메인이 삭제됩니다. App Hosting 백엔드를 완전히 삭제하려면 백엔드 삭제의 안내를 따르세요.

(선택사항) 6단계: 배포된 기능에 Genkit 모니터링 사용

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

Genkit에서 모니터링을 설정하려면 Genkit AI 흐름에 원격 분석을 추가한 다음 Firebase 콘솔에서 결과를 확인합니다.

1단계: Firebase Studio의 Genkit 흐름 코드에 원격 분석 추가

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

아직 Code 뷰가 아닌 경우 코드로 전환을 클릭하여 엽니다.
package.json를 확인하여 설치된 Genkit 버전을 확인합니다.
터미널 (Ctrl-Shift-C 또는 macOS의 경우 Cmd-Shift-C)을 엽니다.
터미널 내부를 클릭하고 package.json 파일과 일치하는 버전을 사용하여 Firebase 플러그인을 설치합니다. 예를 들어 package.json의 Genkit 패키지가 1.0.4이면 다음 명령어를 실행하여 플러그인을 설치해야 합니다.
```
npm i --save @genkit-ai/firebase@1.0.4
```
탐색기에서 src > ai > flows를 펼칩니다. Genkit 흐름이 포함된 TypeScript 파일이 하나 이상 flows 폴더에 표시됩니다.
흐름 중 하나를 클릭하여 엽니다.

도움말: 파일의 prompt 섹션을 확인하세요. 이 섹션을 수동으로 수정하여 Gemini의 응답을 미세 조정할 수 있습니다.
파일의 가져오기 섹션 하단에 다음을 추가하여 FirebaseTelemetry를 가져오고 사용 설정합니다.
```
import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();
```
도움말: Genkit의 고급 원격 분석 옵션에 관해 자세히 알아보려면 고급 구성을 참고하세요.

2단계: 권한 설정

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

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

Google Cloud IAM 콘솔을 열고 프로젝트를 선택한 다음 앱 호스팅 서비스 계정에 다음 역할을 부여합니다.
- 모니터링 측정항목 작성자 (roles/monitoring.metricWriter)
- Cloud Trace 에이전트 (roles/cloudtrace.agent)
- 로그 작성자 (roles/logging.logWriter)
App Hosting에 앱을 다시 게시합니다.
게시가 완료되면 앱을 로드하고 사용을 시작합니다. 5분이 지나면 앱에서 원격 분석 데이터 로깅을 시작해야 합니다.

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

원격 분석이 구성되면 Genkit는 모든 흐름의 요청 수, 성공 여부, 지연 시간을 기록하고, 각 흐름에 대해 안정성 측정항목을 수집하고, 세부 그래프를 표시하고, 캡처된 트레이스를 로깅합니다.Genkit

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

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

Genkit는 다음 안정성 측정항목을 컴파일합니다.
- 총 요청 수: 흐름에서 수신한 총 요청 수입니다.
- 성공률: 성공적으로 처리된 요청의 비율입니다.
- 95번째 백분위수 지연 시간: 흐름의 95번째 백분위수 지연 시간으로, 요청의 95% 가 처리되는 데 걸리는 시간입니다.
- 토큰 사용량:
  - 입력 토큰: 프롬프트에서 모델에 전송된 토큰 수입니다.
  - 출력 토큰: 응답에서 모델에 의해 생성된 토큰 수입니다.
- 이미지 사용:
  - 입력 이미지: 프롬프트에서 모델로 전송된 이미지 수입니다.
  - 출력 이미지: 응답에서 모델이 생성한 이미지 수입니다.
안정성 측정항목을 펼치면 세부적인 그래프를 사용할 수 있습니다.
- 시간 경과에 따른 요청 볼륨
- 시간 경과에 따른 성공률
- 시간 경과에 따른 입력 및 출력 토큰
- 시간 경과에 따른 지연 시간 (95번째 및 50번째 백분위수)

Genkit에서 Genkit에 대해 자세히 알아보세요.

다음 단계

Firebase Studio 워크스페이스에서 앱을 개발하는 방법을 알아보세요.
Firebase Studio의 AI 지원에 관해 자세히 알아보세요.