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으로 앱을 빠르게 게시하는 방법을 제공합니다.
Firebase Studio에서 자연어, 이미지, 그리기 도구를 사용하여 앱을 미세 조정하고 코드를 직접 수정하고 변경사항을 롤백하고 앱을 게시하며 성능을 모니터링할 수 있습니다.
시작하기
App Prototyping agent를 시작하려면 다음 단계를 수행합니다.
Google 계정에 로그인하고 Firebase Studio를 엽니다.
AI로 앱 프로토타입 제작 필드에 앱 아이디어를 자연어로 설명합니다.
원하는 경우 이미지를 추가하여 프롬프트를 포함합니다. 이미지는 앱의 이상적인 사용자 플로우 다이어그램이거나 Firebase Studio에서 준수할 색 구성표일 수 있습니다. 이미지 크기는 최대 3MiB입니다.
AI로 프로토타입 제작을 클릭합니다.
App Prototyping agent는 제안된 앱 이름, 핵심 기능, 스타일 가이드라인을 제공하는 앱 청사진을 반환합니다.
청사진을 검토합니다. 개선사항과 변경사항을 위해 Gemini에 프롬프트를 작성하고 청사진을 직접 수정할 수 있습니다.
맞춤설정을 클릭하고 청사진을 직접 수정합니다. 수정한 후 저장을 클릭합니다.
채팅 창의 설명... 필드에 명확한 질문과 맥락을 추가합니다. 이미지를 추가로 업로드할 수도 있습니다.
청사진을 승인하면 이 앱에 프로토타입 제작을 클릭합니다.
Gemini는 청사진에서 코드를 생성하고 검토할 수 있는 웹 미리보기를 자동으로 반환합니다.
앱에서 AI를 사용하는 경우 Gemini API 키를 추가하거나 생성하라는 메시지가 표시됩니다. 자동 생성을 클릭하면 Firebase Studio에서 Firebase 프로젝트와 Gemini API 키를 자동으로 프로비저닝합니다.
초기 앱이 생성되면 다음을 수행할 수 있습니다.
앱 검토 및 상호작용: 코드 생성이 완료되면 앱 미리보기가 표시됩니다. 미리보기와 직접 상호작용하여 테스트할 수 있습니다. 앱 미리보기에서 자세히 알아보세요.
자연어를 사용하여 테스트 및 반복: 앱을 철저히 테스트하고 App Prototyping agent를 사용하여 만족할 때까지 코드와 청사진을 반복합니다.
Prototyper mode, you can also use the following helpful features:에서
주석 추가를 클릭하여 미리보기 창에 직접 그립니다. 사용 가능한 도형, 이미지, 텍스트 도구와 선택적 텍스트 프롬프트를 사용하여 App Prototyping agent에서 변경하려는 사항을 시각적으로 설명합니다.
선택을 클릭하여 특정 요소를 선택하고 App Prototyping agent의 안내를 입력합니다. 이렇게 하면 특정 아이콘, 버튼, 텍스트 또는 기타 요소를 빠르게 타겟팅할 수 있습니다. 이미지를 클릭하면 Unsplash에서 스톡 이미지를 검색하고 선택할 수도 있습니다.
코드에서 직접 디버그 및 반복:
코드로 전환을 클릭하여 Code 뷰를 엽니다. 여기에서 모든 앱 파일을 확인하고 코드를 직접 수정할 수 있습니다. Prototyper mode at any time.로 다시 전환할 수 있습니다.Code 뷰에서는 다음과 같은 유용한 기능도 사용할 수 있습니다.
Firebase Studio의 기본 제공 디버깅 및 보고 기능을 사용하여 앱을 검사, 디버그, 감사합니다.
Firebase의 Gemini를 사용하는 AI 지원: 코드 내에서 인라인 또는 대화형 채팅 사용(둘 다 기본적으로 사용 가능) 대화형 채팅을 사용하면 문제를 진단하고 해결 방법을 제공하며 앱을 더 빠르게 수정하는 데 도움이 되는 도구를 실행할 수 있습니다. 채팅에 액세스하려면 작업공간 하단에 있는 sparkGemini를 클릭합니다.
Firebase App Hosting으로 앱 게시: 게시를 클릭하여 앱을 App Hosting에 게시합니다.
앱 및 AI 기능 모니터링 및 최적화: App Hosting의 모니터링 가능성으로 웹 앱의 성능과 사용량을, Genkit의 Firebase 원격 분석으로 생성형 AI 흐름을 모니터링합니다. 웹 앱 모니터링에서 자세히 알아보세요.