App Prototyping agent를 사용하여 풀 스택 웹 앱 개발, 게시, 모니터링

이 가이드에서는 App Prototyping agent를 사용하여 Firebase의 Gemini를 통해 풀 스택 앱을 빠르게 개발하고 게시하는 방법을 보여줍니다. 자연어 프롬프트를 사용하여 로그인한 사용자가 제공한 사진이나 브라우저 내 카메라에서 음식을 식별하고 식별된 식재료가 포함된 레시피를 생성하는 Next.js 앱을 생성합니다. 그런 다음 사용자는 검색 가능한 데이터베이스에 레시피를 저장할 수 있습니다.

그런 다음 앱을 미세 조정 및 개선한 후 Firebase App Hosting에 게시합니다.

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

1단계: 앱 생성

Google 계정에 로그인하고 Firebase Studio를 엽니다.
AI로 앱 프로토타입 제작 필드에 다음 프롬프트를 입력합니다. 그러면 브라우저 카메라와 생성형 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.
```
도움말: 최상의 결과를 얻으려면 프롬프트를 최대한 구체적으로 작성하세요. 원하는 기능, 사용자 워크플로, 데이터 요구사항을 포함하세요. 원하는 경우 프롬프트 개선을 클릭하여 Gemini에게 초기 프롬프트를 다듬어 달라고 요청합니다. 또한 AI를 사용한 가장 효과적인 개발 프로세스는 반복적이며 개발자는 Gemini와 공동작업하여 기능을 계속해서 미세 조정하고 추가할 수 있습니다. 효과적인 프롬프트 작성에 대해 자세히 알아보세요.
원하는 경우 프롬프트와 함께 사용할 이미지를 업로드합니다. 예를 들어 앱에서 사용하려는 색 구성표가 포함된 이미지를 업로드하고 이를 사용하라고 Firebase Studio에 지시할 수 있습니다. 이미지 크기는 3MiB 미만이어야 합니다.
AI로 프로토타입 제작을 클릭합니다.

앱 프로토타입 제작 에이전트는 프롬프트를 기반으로 앱 청사진을 생성하여 제안된 앱 이름, 필수 기능, 스타일 가이드라인을 반환합니다.
청사진을 검토합니다. 필요한 경우 몇 가지 사항을 변경합니다. 예를 들어 다음 옵션 중 하나를 사용하여 제안된 앱 이름이나 색 구성표를 변경할 수 있습니다.
- 맞춤설정을 클릭하고 청사진을 직접 수정합니다. 수정한 후 저장을 클릭합니다.
- 채팅 창의 설명... 필드에 명확한 질문과 맥락을 추가합니다. 이미지를 추가로 업로드할 수도 있습니다.
이 앱의 프로토타입 제작을 클릭합니다.

중요: Gemini는 그럴듯해 보이지만 실제로는 잘못된 출력을 생성할 수 있습니다. Google의 관점을 반영하지 않는 부정확한 정보를 응답으로 표시할 수 있습니다. Gemini의 모든 출력을 사용 전에 미리 검사하고 생성된 코드를 테스트하지 않은 상태로 프로덕션에서 사용하지 마세요. 채팅에 개인 식별 정보(PII) 또는 사용자 데이터를 입력하지 마세요.
앱 프로토타입 제작 에이전트가 앱 코딩을 시작합니다.
- 앱에서 AI를 사용하기 때문에 Gemini API 키를 추가하거나 생성하라는 메시지가 표시됩니다. 자동 생성을 클릭하면 App Prototyping agent에서 Firebase 프로젝트와 Gemini API 키를 자동으로 프로비저닝합니다.
중요: 자동 생성을 선택하면 App Prototyping agent에서 대신 Firebase Studio 작업공간 이름과 일치하는 프리픽스로 Firebase 프로젝트를 만들고 프로젝트에 새 Gemini API 키를 만듭니다. 또한 .env 파일의 Firebase Studio 작업공간 내에 키를 저장합니다. 언제든지 새 프로젝트에 액세스하려면 페이지 상단에 있는 프로젝트 이름을 클릭하세요. 나중에 Gemini API 키에 액세스하여 복사하거나 삭제하려면 Google Cloud 콘솔을 사용하세요.

2단계: 테스트, 미세 조정, 디버그, 반복

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

앱 검토 및 상호작용: 코드 생성이 완료되면 앱 미리보기가 표시됩니다. 미리보기와 직접 상호작용하여 테스트할 수 있습니다. 앱 미리보기에서 자세히 알아보세요.
Cloud Firestore 및 Firebase Authentication 추가: 반복 단계에서 App Prototyping agent에게 Cloud Firestore 및 Firebase Authentication을 사용하여 사용자 인증 및 데이터베이스를 추가해 달라고 요청할 수 있습니다. 예를 들어 다음과 같은 프롬프트로 사용자가 레시피를 저장하고 다운로드할 수 있도록 합니다.
```
Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.
```
도움말: 앱 프로토타입 제작 에이전트는 초기 앱 청사진이 아닌 반복 단계에서 앱에 Cloud Firestore 및 Firebase Authentication을 추가할 수 있습니다.
오류 발생 시 수정: 대부분의 경우 App Prototyping agent에서 발생한 오류를 수정하라는 메시지가 표시됩니다. 오류 수정을 클릭하여 수정을 시도합니다.

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

도움말: Gemini는 추론을 설명하지만, 실행하기 전에 계획을 설명하도록 요청할 수도 있습니다.
자연어를 사용하여 테스트 및 반복: 앱을 철저히 테스트하고 App Prototyping agent를 사용하여 만족할 때까지 코드와 청사진을 반복합니다.

Prototyper view, you can also use the following features:에서
- 주석 추가를 클릭하여 미리보기 창에 직접 그립니다. 사용 가능한 도형, 이미지, 텍스트 도구와 선택적 텍스트 프롬프트를 사용하여 App Prototyping agent에서 변경하려는 사항을 시각적으로 설명합니다.
- 선택을 클릭하여 특정 요소를 선택하고 App Prototyping agent의 안내를 입력합니다. 이렇게 하면 특정 아이콘, 버튼, 텍스트 또는 기타 요소를 빠르게 타겟팅할 수 있습니다. 이미지를 클릭하면 Unsplash에서 스톡 이미지를 검색하고 선택할 수도 있습니다.
원하는 경우 미리보기 링크 공유를 클릭하여 Firebase Studio 공개 프리뷰를 통해 일시적으로 앱을 공개적으로 공유할 수 있습니다.
Firebase 프로젝트 만들기: 다음과 같은 경우 앱 프로토타입 제작 에이전트가 사용자를 대신하여 Firebase 프로젝트를 프로비저닝합니다.
- Gemini API 키 자동 생성
- 앱을 Firebase 프로젝트에 연결하도록 요청
- Cloud Firestore 또는 Firebase Authentication과 같은 Firebase 서비스에 앱을 연결하는 데 도움 요청
- 게시 버튼을 클릭하고 Firebase App Hosting을 설정합니다.
작업공간에 연결된 Firebase 프로젝트를 변경하려면 대신 사용할 프로젝트 ID로 App Prototyping agent에 프롬프트를 작성하세요. 예를 들어 'ID가 <your-project-id>인 Firebase 프로젝트로 전환해 줘'라고 작성합니다.
앱을 테스트하고 Cloud Firestore 데이터베이스 규칙 확인: 앱 미리보기 창에서 다양한 음식을 보여주는 이미지를 업로드하여 식재료를 식별하고 레시피를 생성하고 저장하는 앱 기능을 테스트합니다.

다른 사용자로 로그인하여 레시피 생성: 인증된 사용자가 비공개 레시피를 볼 수 있고 모든 사용자가 공개 레시피를 볼 수 있는지 확인합니다.

App Prototyping agent에 Cloud Firestore를 추가해 달라고 요청하면 Cloud Firestore 데이터베이스 규칙을 작성하고 배포합니다. Firebase Console에서 규칙을 검토합니다.
코드에서 직접 디버그 및 반복: 코드로 전환을 클릭하여 Code 뷰를 엽니다. 여기에서 모든 앱 파일을 확인하고 코드를 직접 수정할 수 있습니다. Prototyper mode at any time.로 다시 전환할 수 있습니다.

Code 뷰에서는 다음과 같은 유용한 기능도 사용할 수 있습니다.
- Firebase Studio의 기본 제공 디버깅 및 보고 기능을 사용하여 앱을 검사, 디버그, 감사합니다.
- Gemini를 코드 내 인라인에서 사용하거나 Gemini 대화형 채팅을 통해 AI 어시스턴스를 사용할 수 있습니다(둘 다 기본적으로 사용 가능). 대화형 채팅을 사용하면 문제를 진단하고 해결 방법을 제공하며 앱을 더 빠르게 수정하는 데 도움이 되는 도구를 실행할 수 있습니다. 채팅에 액세스하려면 작업공간 하단에 있는 sparkGemini를 클릭합니다.
  
  참고: App Prototyping agent로 만든 앱은 기본적으로 Prototyper chat in Code view. To use Gemini interactive chat Gemini에서 +를 클릭한 다음 새 채팅을 선택합니다. Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- 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에 대해 자세히 알아보세요.

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

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

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

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

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

중요: Gemini API 키를 자동으로 생성하지 않았거나 App Prototyping agent에 Firebase 프로젝트를 만들라고 프롬프트를 작성하지 않은 경우 게시를 클릭하면 Firebase Studio에서 대신 Firebase 프로젝트를 프로비저닝합니다. 페이지 상단에 있는 프로젝트 이름을 클릭하여 Firebase 프로젝트에 액세스할 수 있습니다.
Firebase 프로젝트 단계에서 App Prototyping agent에는 작업공간과 연결된 Firebase 프로젝트가 표시됩니다. Firebase 프로젝트가 아직 없으면 App Prototyping agent에서 새 프로젝트를 만듭니다. 다음을 클릭하여 계속합니다.
Cloud Billing 계정 연결 단계에서 다음 중 하나를 선택합니다.
- Firebase 프로젝트에 연결할 Cloud Billing 계정을 선택합니다.
- Cloud Billing 계정이 없거나 새 계정을 만들려면 Cloud Billing 계정 만들기를 클릭합니다. 그러면 Google Cloud 콘솔이 열리며 여기에서 새로운 셀프서비스 Cloud Billing 계정을 만들 수 있습니다. 계정을 만든 후 Firebase Studio로 돌아가 Cloud Billing 연결 목록에서 계정을 선택합니다.
다음을 클릭합니다. Firebase Studio는 결제 계정을 작업공간과 연결된 프로젝트에 연결합니다. 이 프로젝트는 Gemini API 키를 자동 생성했을 때 또는 게시를 클릭했을 때 생성됩니다.

중요: Firebase App Hosting을 사용하려면 Cloud Billing 계정이 필요합니다. 결제 계정을 Firebase 프로젝트에 연결하면 프로젝트가 사용한 만큼만 지불하는 Blaze 요금제로 자동 업그레이드되고 Gemini API와 기타 Firebase 및 Google Cloud 서비스 사용량이 유료 등급으로 업그레이드됩니다. 무료 할당량을 초과하는 유료 서비스 사용량에 대한 요금이 청구됩니다. App Hosting 비용 이해, Firebase 가격 책정, Gemini Developer API 가격 책정에서 자세히 알아보세요.
서비스 설정을 클릭합니다. 앱 프로토타입 제작 에이전트가 Firebase 서비스를 프로비저닝하기 시작합니다.
지금 게시를 클릭합니다. Firebase Studio는 Firebase 서비스를 설정한 후 App Hosting 출시를 시작합니다. 이는 완료하는 데 최대 몇 분이 걸릴 수 있습니다. 백그라운드에서 어떤 일이 일어나고 있는지 자세히 알아보려면 App Hosting 빌드 프로세스를 참조하세요.

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

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

(권장) 4단계: 게시된 앱 테스트

게시가 완료되고 앱이 Firebase에 배포되면 Cloud Firestore 및 Firebase Authentication을 프로덕션에서 테스트할 수 있습니다.

Firebase Console에서 Cloud Firestore 및 Firebase Authentication 데이터 보기

게시 후 Firebase Console에서 앱의 실시간 데이터를 확인할 수 있습니다.

실시간 Cloud Firestore 데이터베이스를 보려면 Firebase Console을 열고 탐색 메뉴에서 빌드 > Firestore 데이터베이스를 선택합니다.

여기에서 저장된 데이터를 검사하고, 보안 규칙을 보고 테스트하고, 색인을 만들 수 있습니다. Cloud Firestore에서 자세히 알아보세요.
실시간 Firebase Authentication 데이터를 보려면 Firebase Console을 열고 탐색 메뉴에서 빌드 > 인증을 선택합니다.

여기에서 인증 구성과 앱 사용자를 검사할 수 있습니다. Firebase Authentication에서 자세히 알아보세요.

프로덕션에서 Cloud Firestore 규칙 테스트

앱을 게시한 후 프로덕션 환경에서 Cloud Firestore 보안 규칙을 다시 테스트해야 합니다. 이렇게 하면 승인된 사용자가 데이터에 액세스할 수 있고 승인되지 않은 액세스로부터 데이터를 보호할 수 있습니다.

다음 방법을 모두 사용하여 규칙을 테스트할 수 있습니다.

애플리케이션 테스트: 배포된 애플리케이션과 상호작용하여 다양한 사용자 역할 또는 상태에 대해 다양한 데이터 액세스 패턴(읽기, 쓰기, 삭제)을 트리거하는 작업을 수행합니다. 이 실제 테스트를 통해 규칙이 실제로 올바르게 적용되는지 확인할 수 있습니다.
규칙 플레이그라운드: 타겟팅된 검사의 경우 Firebase Console에서 규칙 플레이그라운드를 사용합니다. 이 도구를 사용하면 프로덕션 규칙을 사용하여 Cloud Firestore 데이터베이스에 대한 요청(읽기, 쓰기, 삭제)을 시뮬레이션할 수 있습니다. 사용자 인증 상태, 데이터 경로, 작업 유형을 지정하여 규칙에서 의도한 대로 액세스를 허용하거나 거부하는지 확인할 수 있습니다.

참고: 게시 프로세스 중에 또는 Firebase CLI를 사용하여 보안 규칙을 배포하면 프로젝트 디렉터리에 정의된 규칙이 Firebase Console에 있는 기존 규칙을 덮어씁니다. 따라서 Firebase Console로 보안 규칙을 정의하거나 수정하는 경우에는 프로젝트 디렉터리에 정의된 규칙도 업데이트해야 합니다.
단위 테스트: 보다 포괄적인 테스트를 위해 보안 규칙에 대한 단위 테스트를 작성할 수 있습니다. Firebase Local Emulator Suite에서 제공하는 Firebase Studio 미리보기 백엔드를 사용하면 프로덕션 규칙의 동작을 시뮬레이션하여 이러한 테스트를 로컬에서 실행할 수 있습니다. 이는 복잡한 규칙 로직을 확인하고 다양한 시나리오의 노출 범위를 확인하는 강력한 방법입니다. 배포 후에는 에뮬레이터를 사용하는 단위 테스트가 예상대로 작동하고 모든 시나리오를 다루는지 다시 확인해야 합니다.