이 가이드에서는 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.AI로 프로토타입 제작을 클릭합니다.
Gemini는 프롬프트를 기반으로 앱 청사진을 생성하여 제안된 앱 이름, 필수 기능, 스타일 가이드라인을 반환합니다.
청사진을 검토하고 몇 가지 사항을 변경합니다. 예를 들어 다음 옵션 중 하나를 사용하여 제안된 앱 이름이나 색 구성표를 변경할 수 있습니다.
맞춤설정을 클릭하고 청사진을 직접 수정합니다. 수정한 후 저장을 클릭합니다.
채팅 창의 설명... 필드에 명확한 질문과 맥락을 추가합니다. 이미지를 추가로 업로드할 수도 있습니다.
앱 프로토타입 제작을 클릭합니다. Gemini에서 앱을 코딩합니다. 앱 설명에 생성형 AI가 필요한 기능이 설명되어 있으므로 Gemini에서 Gemini API 키를 입력하라는 프롬프트를 작성합니다.
자체 Gemini API 키를 추가하거나 자동 생성을 클릭하여 Gemini API 키를 생성합니다.
2단계: 테스트, 미세 조정, 디버그, 반복
초기 앱이 생성된 후에는 테스트, 미세 조정, 디버그, 반복할 수 있습니다.
앱 검토 및 상호작용: 코드 생성이 완료되면 앱 미리보기가 표시됩니다. 미리보기와 직접 상호작용하여 테스트할 수 있습니다.
자연어를 사용하여 앱 반복: 채팅 인터페이스를 계속 사용하여 Gemini에게 기능을 추가하고 앱을 미세 조정해 달라고 요청합니다.
앱 테스트: 앱 미리보기 창에서 다양한 음식을 보여주는 이미지를 업로드하여 식재료를 식별하고 레시피를 제공하는 앱 기능을 테스트합니다. 원하는 경우 Code 뷰를 사용하여 Firebase Studio 공개 미리보기를 통해 일시적으로 앱을 공개적으로 공유할 수 있습니다.
코드에서 직접 디버그 및 반복:
코드로 전환을 클릭하여 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 설정을 시작합니다. 앱 게시 창이 표시됩니다.
Firebase 프로젝트 단계에서 자동으로 생성된 Firebase 프로젝트의 이름을 확인한 후 다음을 클릭합니다.
Cloud Billing 계정 연결 단계에서 다음 중 하나를 선택합니다.
Firebase 프로젝트에 연결할 Cloud Billing 계정을 선택합니다.
Cloud Billing 계정이 없거나 새 계정을 만들려면 Cloud Billing 계정 만들기를 클릭합니다. 그러면 Google Cloud 콘솔이 열리며 여기에서 새로운 셀프서비스 Cloud Billing 계정을 만들 수 있습니다. 계정을 만든 후 Firebase Studio로 돌아가 Cloud Billing 연결 목록에서 계정을 선택합니다.
다음을 클릭합니다. Firebase Studio는 결제 계정을 작업공간과 연결된 프로젝트에 연결합니다. 이 프로젝트는 Gemini API 키를 자동 생성했을 때 또는 게시를 클릭했을 때 생성됩니다. 그런 다음 App Hosting은 Google Cloud에서 앱의 완전 관리형 환경을 설정합니다.
첫 번째 출시 만들기를 클릭합니다. 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 Console에서 더 많은 정보에 액세스합니다.
- 지난 24시간 동안 앱에서 수신한 요청 수를 HTTP 상태 코드별로 분류한 그래프를 봅니다.
앱 개요 패널을 닫은 경우 언제든지 게시를 클릭하여 다시 열 수 있습니다.
출시 및 버전 관리에서 App Hosting 출시 관리 및 모니터링을 자세히 알아보세요.
(선택사항) 5단계: 배포 롤백
앱의 연속 버전을 App Hosting에 배포한 경우 이전 버전 중 하나로 롤백할 수 있습니다. 삭제할 수도 있습니다.
게시된 사이트를 롤백하려면 다음 안내를 따르세요.
앱의 백엔드를 찾아 보기를 클릭한 후 출시를 클릭합니다.
롤백할 배포 옆에 있는 더보기 를 클릭한 후 이 빌드로 롤백을 선택하고 확인합니다.
출시 및 버전 관리에서 자세히 알아보세요.
웹에서 App Hosting 도메인을 삭제하려면 다음 안내를 따르세요.
Firebase Console에서 App Hosting을 열고 Firebase Studio 앱 섹션에서 보기를 클릭합니다.
백엔드 정보 섹션에서 관리를 클릭합니다. 도메인 페이지가 로드됩니다.
도메인 옆에 있는 더보기 를 클릭한 후 도메인 사용 중지를 선택하고 확인합니다.
이렇게 하면 웹에서 도메인이 삭제됩니다. App Hosting 백엔드를 완전히 삭제하려면 백엔드 삭제의 안내를 따르세요.
(선택사항) 6단계: 배포된 기능에 Genkit 모니터링 사용
AI 플로우 코드에 원격 분석을 사용 설정하여 Genkit 기능 단계, 입력, 출력을 모니터링할 수 있습니다. Genkit의 원격 분석 기능을 사용하면 AI 흐름의 성능과 사용량을 모니터링할 수 있습니다. 이 데이터를 통해 개선할 영역을 파악하고 문제를 해결하고 성능과 경제성이 개선될 수 있도록 프롬프트와 흐름을 최적화하고 시간 경과에 따른 흐름 사용량을 추적할 수 있습니다.
Genkit에서 모니터링을 설정하려면 원격 분석을 Genkit AI 흐름에 추가한 후 Firebase Console에서 결과를 봅니다.
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폴더에 표시됩니다.흐름 중 하나를 클릭하여 엽니다.
파일의 가져오기 섹션 하단에 다음을 추가하여
FirebaseTelemetry를 가져오고 사용 설정합니다.import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
2단계: 권한 설정
Firebase Studio는 Firebase 프로젝트를 설정할 때 필요한 API를 자동으로 사용 설정했지만 개발자가 App Hosting 서비스 계정에 권한을 제공해야 합니다.
권한을 설정하려면 다음 안내를 따르세요.
Google Cloud IAM 콘솔을 열고 프로젝트를 선택한 후 App Hosting 서비스 계정에 다음 역할을 부여합니다.
- 모니터링 측정항목 작성자(
roles/monitoring.metricWriter) - Cloud Trace 에이전트(
roles/cloudtrace.agent) - 로그 작성자(
roles/logging.logWriter)
- 모니터링 측정항목 작성자(
App Hosting에 앱을 다시 게시합니다.
게시가 완료되면 앱을 로드하고 사용합니다. 5분 후 앱에서 원격 분석 데이터를 로깅해야 합니다.
3단계: Firebase Console에서 생성형 AI 기능 모니터링
원격 분석이 구성되면 Genkit은 모든 플로우에 대한 요청 수, 성공 여부, 지연 시간을 기록하고 Genkit은 각 특정 플로우에 대한 안정성 측정항목을 수집하고 세부 그래프를 보여주며 캡처된 trace를 로깅합니다.
Genkit으로 구현된 AI 기능을 모니터링하려면 다음 안내를 따르세요.
5분 후 Firebase Console에서 Genkit을 열고 Genkit의 프롬프트와 응답을 검토합니다.
Genkit은 다음 안정성 측정항목을 컴파일합니다.
- 총 요청 수: 플로우에서 수신한 요청 총개수입니다.
- 성공률: 성공적으로 처리된 요청의 비율입니다.
- 95번째 백분위수 지연 시간: 플로우의 95번째 백분위수 지연 시간으로, 요청의 95%가 처리되는 데 걸리는 시간입니다.
토큰 사용량:
- 입력 토큰: 프롬프트에서 모델로 전송된 토큰 수입니다.
- 출력 토큰: 모델에서 응답에 생성한 토큰 수입니다.
이미지 사용량:
- 입력 이미지: 프롬프트에서 모델로 전송된 이미지 수입니다.
- 출력 이미지: 모델에서 응답에 생성한 이미지 수입니다.
안정성 측정항목을 펼치면 세부적인 그래프가 제공됩니다.
- 시간 경과에 따른 요청 볼륨
- 시간 경과에 따른 성공률
- 시간 경과에 따른 입력 및 출력 토큰 수
- 시간 경과에 따른 지연 시간(95번째 및 50번째 백분위수)
Genkit에서 Genkit을 자세히 알아보세요.
다음 단계
- Firebase Studio 작업공간에서 앱을 개발하는 방법 알아보기
- Firebase Studio의 AI 지원 자세히 알아보기