Firebase Studio에는 자연어, 이미지, 그리기 도구를 비롯한 다중 모드 프롬프트를 사용하여 AI 기반 웹 앱을 빠르게 프로토타입하고 생성할 수 있는 웹 기반 인터페이스가 포함되어 있습니다. 이 상담사는 Next.js 앱을 지원하며 향후 다른 플랫폼과 프레임워크도 지원할 계획입니다.
앱 프로토타이핑 에이전트는 생성형 AI를 사용하여 풀 스택 에이전트 웹 앱을 개발, 테스트, 반복, 게시하는 간소화된 노 코드 개발 흐름입니다. 개발자가 이미지(선택사항)를 포함하여 자연어로 앱 아이디어를 설명하면 에이전트가 앱 블루프린트, 코드, 웹 미리보기를 생성합니다. 풀 스택 앱의 개발 및 게시를 지원하기 위해 Firebase Studio는 다음 서비스를 자동으로 프로비저닝할 수 있습니다.
- 앱에서 AI를 사용하는 경우: Firebase Studio는 Genkit 흐름의 기능을 사용하여 Gemini와 함께 작동하도록 Gemini Developer API를 앱에 추가합니다. 자체 Gemini API 키를 사용하거나 Firebase Studio가 Firebase 프로젝트와 Gemini API 키를 프로비저닝하도록 할 수 있습니다.
- 웹에 앱을 게시하려는 경우: Firebase Studio는 프로젝트를 만들고 Firebase App Hosting를 사용하여 앱을 빠르게 게시하는 방법을 제공합니다.
Firebase Studio에서 자연어, 이미지, 그리기 도구를 사용하여 앱을 수정하고, 코드를 직접 수정하고, 변경사항을 롤백하고, 앱을 게시하고, 성능을 모니터링할 수 있습니다.
시작하기
App Prototyping agent를 시작하려면 다음 단계를 따르세요.
Google 계정에 로그인하고 Firebase Studio를 엽니다.
AI로 앱 프로토타입 만들기 입력란에 앱 아이디어를 자연어로 설명합니다.
원하는 경우 프롬프트에 이미지를 추가합니다. 앱의 이상적인 사용자 흐름 다이어그램이거나 Firebase Studio가 준수할 색 구성표일 수 있습니다. 이미지는 최대 3MiB까지 가능합니다.
AI로 프로토타입 제작을 클릭합니다.
앱 프로토타이핑 에이전트는 제안된 앱 이름, 핵심 기능, 스타일 가이드라인을 제공하는 앱 블루프린트를 반환합니다.
청사진을 검토합니다. Gemini에 개선사항과 변경사항을 요청하고 블루프린트를 직접 수정할 수 있습니다.
맞춤설정을 클릭하고 블루프린트를 직접 수정합니다. 변경한 후 저장을 클릭합니다.
채팅 창의 설명... 필드에 명확한 질문과 맥락을 추가합니다. 이미지를 추가로 업로드할 수도 있습니다.
청사진을 승인하면 앱 프로토타입 만들기를 클릭합니다.
Gemini는 블루프린트에서 코드를 생성하고 검토할 수 있는 웹 미리보기를 반환합니다.
앱에서 AI를 사용하는 경우 Gemini API 키를 추가하거나 생성하라는 메시지가 표시됩니다. 자동 생성을 클릭하면 Firebase Studio에서 Firebase 프로젝트와 Gemini API 키를 프로비저닝합니다.
초기 앱이 생성되면 다음 작업을 할 수 있습니다.
앱 검토 및 상호작용: 코드 생성이 완료되면 앱의 미리보기가 표시됩니다. 미리보기와 직접 상호작용하여 테스트할 수 있습니다. 앱 미리보기에서 자세히 알아보세요.
자연어를 사용하여 테스트 및 반복: 앱을 철저히 테스트하고 App Prototyping agent를 사용하여 만족할 때까지 코드와 블루프린트를 반복합니다.
코드에서 직접 디버그 및 반복:
Switch to Code(코드로 전환)를 클릭하여 Code 보기를 엽니다. 여기에서 모든 앱 파일을 확인하고 코드를 직접 수정할 수 있습니다. Prototyper mode at any time.로 다시 전환할 수 있습니다.Code 뷰에서는 다음과 같은 유용한 기능도 사용할 수 있습니다.
Firebase Studio의 기본 제공 디버깅 및 보고 기능을 사용하여 앱을 검사, 디버그, 감사합니다.
Firebase에서 Gemini를 사용하는 AI 지원: 코드 내 인라인 또는 대화형 채팅 (둘 다 기본적으로 사용 가능) 대화형 채팅을 사용하면 문제를 진단하고, 해결 방법을 제공하고, 앱을 더 빠르게 수정하는 데 도움이 되는 도구를 실행할 수 있습니다. 채팅에 액세스하려면 작업공간 하단에서 sparkGemini를 클릭합니다.
Firebase App Hosting로 앱 게시: 게시를 클릭하여 앱을 App Hosting에 게시합니다.
앱 및 AI 기능 모니터링 및 최적화: App Hosting의 관측 가능성으로 웹 앱의 성능 및 사용량을 모니터링하고 Genkit의 Firebase 원격 분석으로 생성형 AI 흐름을 모니터링합니다. 웹 앱 모니터링에서 자세히 알아보세요.
다음 단계
- Firebase Studio를 사용하여 풀 스택 웹 앱을 개발, 게시, 모니터링합니다.
- 템플릿 또는 솔루션이 있는 모든 프레임워크로 애플리케이션을 개발합니다.