Firebase Studio

소개

주요 기능

• 텍스트·이미지로 앱 설명 → App Prototyping agent가 프론트엔드, API, Firestore, Firebase Authentication 생성
• Figma 디자인 임포트 → Builder.io Figma 플러그인으로 코드 생성 후 브라우저에서 편집 계속
• Git 레포나 로컬 아카이브 연결 → 웹 IDE가 Hosting, Functions, Firestore와 연동해 빌드·배포 지원
• 템플릿 갤러리 열기 → Next.js·React·Angular·Vue·Go·Java·.NET·Node.js·Flutter 등 스택 바로 시작
• Firebase 내부에서 Gemini와 채팅 → 에디터 UI에서 코드·테스트·버그 수정·의존성 해결(툴 실행 지원 포함)

이런 상황에 추천

• 프로덕트 매니저가 이번 주 사용자 테스트용으로 Firestore 기반 로그인 프로토타입을 빠르게 세팅할 때
• 디자이너가 Figma 목업을 불러와 AI로 작동하는 React 스타터를 생성하고 화면을 반복 개선할 때
• 1인 창업자가 Gemini API 호출하는 AI 앱 초안을 작성해 Firebase Hosting에 배포할 때

이렇게 써보세요

1. 1
   Firestore 기반 웹 앱 프로토타입

   개발자가 채팅으로 앱 요구사항(인증, 사용자 프로필, 실시간 목록)을 설명합니다 → App Prototyping 에이전트가 프론트엔드, Firestore 스키마, Firebase 인증 규칙을 생성합니다 → 로컬 설정 없이 웹 IDE에서 Firebase Hosting으로 배포해 사용자 테스트를 진행합니다.

2. 2
   Figma 목업을 React 시작 템플릿으로 전환

   디자이너가 Figma 파일을 Builder.io 플러그인으로 내보냅니다 → Firebase Studio로 가져와 채팅으로 UI 동작을 Firestore/엔드포인트에 연결합니다 → 브라우저에서 시각적으로 반복 수정하고 실행 가능한 React 앱을 배포하거나 내보냅니다.

3. 3
   인프라 코드 없이 로그인과 서버 로직 추가

   자연어로 인증 흐름과 서버 엔드포인트를 설명하면 → 에이전트가 Firebase Authentication, Cloud Functions, API 라우트를 생성하고 Firestore에 연결합니다 → IDE에서 인증 흐름을 테스트한 뒤 준비되면 배포합니다.

4. 4
   앱에 Gemini API 통합하기

   개발자가 요약 또는 대화 같은 AI 기능과 UI 위치를 정의합니다 → IDE가 Gemini API를 호출하는 클라이언트·서버 코드와 환경변수 설정, Functions용 래퍼를 생성합니다 → 브라우저에서 테스트하고 호스팅된 시크릿/설정으로 배포합니다.

5. 5
   기존 리포지토리 가져와 브라우저에서 계속 작업

   Git 리포지토리 연결 또는 로컬 아카이브 업로드 → 코드와 Firebase Hosting, Functions, Firestore를 연동하는 설정 및 빌드 스크립트가 스캐폴딩됩니다 → Gemini 도움으로 빌드 오류를 고치고 테스트를 실행한 뒤 로컬 없이 배포합니다.

장단점

시작하는 법

1. 1 studio.firebase.google.com에 접속해 Google 계정으로 로그인
2. 2 템플릿 선택 또는 레포/Figma 파일을 임포트하고 App Prototyping agent를 엽니다
3. 3 브라우저에서 앱 미리보기를 확인하고 Firestore/Auth를 연결한 뒤 배포

가격 정보

한국어 사용 경험

The site provides a 한국어 option in the language selector, so the UI is localized; however, there's no systematic evidence about the AI assistant's responsiveness or code-generation quality specifically in Korean.