Firebase Studio: 풀스택 애플리케이션을 신속하게 구축하고 배포하는 AI의 클라우드 도구

11.1K 00

일반 소개

Firebase Studio는 AI를 통해 풀스택 애플리케이션의 개발 및 배포를 가속화하는 것을 핵심 목표로 하는 Google의 클라우드 기반 개발 도구입니다. 사용자는 브라우저에서 앱 프로토타이핑부터 프로덕션 환경에서의 출시까지 전체 프로세스를 완료할 수 있습니다. Gemini AI 기술을 통합하고 자연어 코드 생성을 지원하며 GitHub와 같은 리포지토리에서 프로젝트를 가져올 수 있고 Next.js, Flutter 등 다양한 기술 스택과 호환되며 프론트엔드, 백엔드, 모바일 개발 등 어떤 개발이든 Firebase Studio는 원스톱 지원을 제공합니다. 현재 프리뷰 단계에 있으며 무료로 3개의 작업 공간을 제공하며, Google 개발자 프로그램에 가입하면 10개로 늘릴 수 있고 유료 요금제를 사용하면 최대 30개까지 지원됩니다. 이 도구는 AI 애플리케이션을 빠르게 구축하려는 개인 개발자 또는 소규모 팀에 적합합니다.

Firebase Studio는 기본적으로 프로젝트 IDX 를 통해 새로운 지능형 프로그래밍 모델을 제공합니다.

Firebase Studio 지능형 프로그래밍 모드

Firebase Studio 코드 편집 모드

기능 목록

애플리케이션 프로토타이핑Next.js 프레임워크를 지원하여 자연어, 스케치 또는 템플릿으로 웹 애플리케이션을 빠르게 생성합니다.
온라인 코드 편집기프로젝트의 실시간 수정 및 가져오기를 지원하는 코드 OSS 기반 편집기입니다.
제미니 AI 어시스턴트코드 작성, 디버깅, 테스트 및 문서 생성을 지원하고 코드 컨텍스트를 이해할 수 있어야 합니다.
프로젝트 가져오기 및 내보내기GitHub, GitLab, Bitbucket에서 프로젝트 가져오기 또는 외부 소스로 내보내기 지원.
실시간 미리보기 및 테스트간편한 테스트를 위해 앱 미리보기 링크와 안드로이드 에뮬레이터를 생성합니다.
원클릭 배포파이어베이스 앱 호스팅 또는 클라우드 런을 통해 앱을 배포합니다.
환경 사용자 지정Nix 구성 파일을 사용하여 다양한 요구 사항에 맞게 개발 환경을 조정합니다.
엔드투엔드 최적화Open VSX 확장, 테스트 API 및 백엔드 기능 지원.

도움말 사용

Firebase Studio를 시작하는 방법

Firebase Studio는 로컬 설치가 필요하지 않으며 모든 작업은 브라우저에서 수행됩니다. 자세한 단계는 다음과 같습니다:

로그인 및 액세스
- 브라우저를 열고 다음 주소로 이동합니다. https://firebase.studio/.
- '로그인'을 클릭하여 Google 계정으로 로그인합니다. 계정이 없는 경우 먼저 가입하세요.
프로젝트 생성 또는 가져오기
- 신규 건설 프로젝트::
  - 로그인한 후 '새 프로젝트 만들기'를 클릭합니다.
  - '이 앱 프로토타입 만들기'를 선택하여 AI를 사용하여 프로토타입을 생성하거나 템플릿 라이브러리에서 프레임워크(예: Next.js)를 선택합니다.
- 프로젝트 가져오기::
  - "프로젝트 가져오기"를 클릭하고 GitHub, GitLab 또는 Bitbucket 리포지토리의 URL을 입력합니다.
  - 50MB 미만의 압축 파일(예: zip 또는 tar.gz)을 지원하며, 비공개 리포지토리는 승인이 필요합니다.
개발 환경 설정
- 프로젝트를 가져온 후 종속성은 기본적으로 자동으로 설치되지 않습니다. 수동으로 명령을 실행하세요:
  - Flutter 프로젝트: 터미널 유형 flutter pub get.
  - Node.js 프로젝트: 입력 npm install.
- 자동으로 설치하시겠습니까? 루트 디렉터리를 편집하여 dev.nix 파일에 종속성 스크립트를 추가합니다.

주요 기능의 작동

애플리케이션 프로토타이핑

"이 앱 프로토타이핑"을 클릭하여 프로토타이핑 모드로 들어갑니다.
"로그인 기능이 있는 쇼핑 사이트 만들기"와 같은 자연어 설명을 입력하거나 스케치를 업로드합니다.
시스템은 몇 초 만에 Next.js를 기반으로 앱을 생성합니다. 생성 후에는 '검색창 추가' 등 AI를 통해 조정할 수 있습니다.
빠른 시작을 위해 React 또는 Flutter 템플릿과 같은 템플릿 선택을 지원합니다.

AI 어시스턴트를 사용한 온라인 코드 편집

작업 영역에 들어가면 왼쪽에는 파일 트리가 있고 오른쪽에는 VS 코드와 비슷한 편집기가 있습니다.
프론트엔드 스타일이나 백엔드 로직을 조정하는 등 코드를 직접 수정할 수 있습니다.
오른쪽 하단에 있는 Gemini AI 아이콘을 클릭하고 요구 사항을 입력합니다:
- "사용자 데이터를 반환하는 API 인터페이스를 작성하세요."
- "이 코드의 기능을 설명하세요."
AI는 프로젝트에 따라 정확한 조언을 제공하고 코드를 디버그하고 리팩터링할 수도 있습니다.

실시간 미리보기 및 테스트

상단의 '미리보기' 버튼을 클릭하면 미리보기 링크와 QR 코드가 생성됩니다.
휴대폰으로 QR 코드를 스캔하거나 링크를 다른 사람들과 공유하여 테스트하세요.
모바일 환경을 시뮬레이션하기 위한 Android 에뮬레이터를 지원합니다.
코드를 수정한 후 미리 보기를 새로 고침하여 실시간 결과를 확인합니다.

원클릭 배포

"게시"를 클릭하고 Firebase 앱 호스팅 또는 클라우드 실행을 선택합니다.
언바운드 Firebase 프로젝트? 방문하세요. https://console.firebase.google.com/ 프로젝트를 만들고 연결합니다.
배포하고 도메인 이름을 얻습니다(예 your-app.web.app)를 클릭하면 애플리케이션을 실행할 준비가 완료됩니다.
사용자 지정 인프라를 사용하고 싶으신가요? 배포 방법의 수동 구성이 지원됩니다.

엔드투엔드 최적화

통과(청구서 또는 검사 등) https://open-vsx.org/ 확장 프로그램을 설치하고 API 및 백엔드를 테스트합니다.
예를 들어, 인터페이스가 데이터를 제대로 반환하는지 확인하려면 Postman 확장 프로그램을 추가하세요.
미리보기는 웹과 Android를 지원하여 플랫폼 간 일관성을 보장합니다.

추가 기능 및 참고 사항

환경 사용자 지정사설:: 사설 dev.nix를 클릭하고 특정 버전의 Node.js 또는 Python을 추가합니다.
무료 할당량미리보기 단계에서 3개의 워크스페이스를 사용할 수 있습니다. 가입 https://developers.google.com/program 유료 요금제의 경우 10개까지 늘릴 수 있으며, 최대 30개까지 늘릴 수 있습니다.
개인정보 설정설정에서 '코드 완성' 및 '코드 인덱싱'을 끄면 데이터가 AI 학습에 사용되지 않습니다.

이 단계를 통해 애플리케이션을 빌드하고 최적화하는 Firebase Studio를 빠르게 시작할 수 있습니다.

애플리케이션 시나리오

제품 아이디어의 신속한 검증
- 고객에게 보여줄 AI 채팅 도구를 만들고 싶습니다. 프로토타입 생성 기능을 사용하여 몇 분 안에 데모를 만들 수 있습니다.
전체 스택 개발 알아보기
- 초보자는 AI로 코드 템플릿을 생성하고 변경 사항을 학습하여 프런트엔드 및 백엔드 기술을 익힐 수 있습니다.
팀워크 개발
- 소규모 팀은 로컬 구성이 필요 없는 클라우드 기반 워크스페이스에서 웹 앱을 개발하고 실시간으로 협업할 수 있습니다.
라이브 임시 페이지로 이동
- 이벤트 응모 페이지를 만들고 배포 템플릿을 사용하여 몇 시간 안에 완료할 수 있습니다.

QA

Firebase Studio에 요금이 부과되나요?
- 미리 보기 단계에서는 3개의 작업 공간을 무료로 사용할 수 있습니다. 더 많은 요구 사항은 Google 개발자 프로그램에 추가하거나 비용을 지불할 수 있습니다.
프로그래밍에 대해 알고 싶으신가요?
- 필요하지 않습니다. 초보 사용자는 자연어로 코드를 생성하고 전문 사용자가 직접 편집할 수 있습니다.
어떤 기술 스택이 지원되나요?
- 프로토타입은 Next.js를 지원하며 에디터는 Flutter, Node.js 및 기타 여러 프레임워크와 호환됩니다.
모바일 앱을 테스트하는 방법은 무엇인가요?
- 내장된 Android 에뮬레이터를 사용하여 모바일에서 결과를 미리 볼 수 있습니다.