AI 지원을 사용하여 Firebase 서비스 통합

Antigravity, Claude Code, Codex, Cursor와 같은 AI 기반 개발 도구를 사용하여 웹 앱용 Firebase 설정을 간소화하세요.Antigravity Firebase 에이전트 스킬을 Firebase CLI 및 Firebase MCP 서버와 함께 사용하면 AI 코딩 에이전트를 코드를 작성하고, Firebase Security Rules를 구성하고 라이브 리소스를 관리할 수 있는 전문 Firebase 전문가로 전환할 수 있습니다.

이 가이드에서는 AI 코딩 에이전트를 사용하여 Cloud Firestore, Authentication, Firebase Hosting을(를) 웹 앱용으로 설정하는 방법을 설명합니다. iOS, Android, Flutter 앱에 관한 정보는 곧 제공될 예정입니다.

Firebase 에이전트 스킬 및 도구를 사용하는 이유

일반 AI 모델은 특정 프로젝트 구성 또는 오래된 정보로 인해 어려움을 겪는 경우가 많습니다. 이 툴킷은 이러한 격차를 해소합니다.

• Firebase 에이전트 스킬: 스킬은 코딩 에이전트에게 도메인 전문성을 제공합니다. 에이전트가 아키텍처를 구성하는 올바른 Firebase 권장 방법을 알 수 있도록 최신 문서와 최적의 워크플로를 제공합니다.
• Firebase MCP 서버: MCP 서버는 코딩 에이전트에게 컨텍스트 및 액세스 권한을 제공합니다. 에이전트가 활성 프로젝트 리소스, 로컬 파일, 구성을 프로그래매틱 방식으로 검사할 수 있는 표준 프로토콜을 설정합니다.
• Firebase CLI: 명령줄 인터페이스는 코딩 에이전트에게 실행 가능한 권한을 제공합니다. 데이터베이스 초기화, 사용자 인증 구성 관리, 사용자를 대신하여 코드 배포와 같은 어려운 작업을 실행하는 데 에이전트가 사용하는 실행 도구입니다.

Firebase CLI 및 Firebase MCP 서버와 함께 Firebase 에이전트 스킬을 사용하면 AI 코딩 에이전트에게 다음과 같은 추가 기능이 제공됩니다.

• 작업 실행: 코드를 작성하는 것 이상의 작업을 실행합니다. 에이전트는 서비스를 초기화하고, Authentication 사용자를 관리하고, 새 Firebase Security Rules를 배포하고, Cloud Firestore 데이터로 직접 작업할 수 있습니다.
• 최신 상태 유지: 공식 버전 인식 프롬프트를 사용하여 에이전트가 설정 작업을 안내하도록 합니다.
• 정확도 개선: 프로젝트의 환경 및 스키마에 액세스하여 더 관련성 있고 정확한 도움말을 제공합니다.
• 토큰 비용 절감: 에이전트 스킬은 특정 작업에 필요한 경우에만 자세한 문서를 로드하므로 세션 오버헤드를 최소화합니다.

에이전트 스킬 및 도구로 지원할 수 있는 Firebase 서비스는 무엇인가요?

이 가이드에서는 에이전트 스킬, Firebase CLI, Firebase MCP 서버가 함께 작동하여 이러한 서비스와 기능을 빠르게 설정하는 방법을 주로 설명합니다.

• Cloud Firestore: NoSQL 데이터베이스를 프로비저닝합니다.
• Authentication: 보안 사용자 로그인을 설정합니다.
• Firebase Security Rules: 앱의 Security Rules을(를) 생성하고 개선합니다.
• Firebase Hosting: 정적 웹 앱 배포를 위해 프로젝트를 설정합니다.

사용 가능한 항목의 전체 목록은 Firebase 에이전트 스킬의 전체 목록을 참고하세요.

일반 워크플로

다음 단계에서는 **웹 앱** 에서 Firebase 서비스를 설정하고 사용하는 방법을 설명하는 일반화된 워크플로를 설명합니다. 백그라운드에서 에이전트 스킬은 Firebase CLI 및 Firebase MCP 서버를 사용하여 이러한 작업을 완료합니다.

1단계: Firebase 에이전트 스킬 설치

대부분의 경우 단일 프롬프트로 원하는 편집기에 Firebase 에이전트 스킬을 설치할 수 있습니다.

npx skills add firebase/agent-skills --agent=antigravity

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

npx skills add firebase/agent-skills --agent=codex

npx skills add firebase/agent-skills --agent=cursor

npx skills add firebase/agent-skills

2단계: Firebase MCP 서버에 연결

많은 Firebase 에이전트 스킬이 작업에 Firebase CLI를 사용하지만 AI 코딩 에이전트를 Firebase MCP 서버에 연결하는 것이 좋습니다. 이 연결은 에이전트가 Firebase 환경과 상호작용하는 기능을 향상시켜 더 깊은 통합과 액세스를 제공합니다.

AI 지원 방법

대부분의 경우 AI 코딩 에이전트에게 Firebase MCP 서버를 설정하도록 요청할 수 있습니다. 하지만 에이전트가 어려움을 겪거나 Firebase MCP 서버가 나열되지 않는 경우 수동 방법으로 전환하세요.

수동 방법

{
  "mcpServers": {
    "firebase-mcp-server": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"],
      "disabled": false
    }
  }
}

"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

3단계: Firebase 서비스 초기화

에이전트 스킬과 도구가 설정되면 이제 자연어를 사용하여 AI 코딩 에이전트가 Cloud Firestore, Authentication, 및 Firebase Hosting를 설정하도록 할 수 있습니다.

1. 에이전트에게 서비스를 설정하도록 요청합니다. 예를 들어 다음과 같은 프롬프트를 사용할 수 있습니다.

   • 이 앱의 데이터베이스로 Cloud Firestore을(를) 설정합니다.
   • 인증을 사용하여 로그인 페이지를 빌드하고 Authentication를 업데이트하여 Security Rules 승인된 사용자만 자체 데이터를 읽고 쓸 수 있도록 합니다.
   • Firebase Hosting을 설정하고 앱을 프로덕션에 배포합니다.

2. 에이전트가 제공할 수 있는 다음과 같은 정보와 안내 단계를 검토합니다.

   1. 계획: 에이전트가 기존 코드베이스를 기반으로 전략을 제안합니다.
   2. 연결: 에이전트가 로컬 코드를 기존 Firebase 프로젝트에 연결하거나 새 Firebase 프로젝트를 만드는 데 도움을 줍니다.
   3. 리소스 초기화: 에이전트가 필요한 Firebase 라이브러리 및 구성을 코드베이스에 추가합니다.
   4. 파일 업데이트: 에이전트가 필요한 파일(예: 데이터베이스 내에서 데이터를 읽거나 쓰거나 쿼리할 수 있는 사용자를 정의하는 firestore.rules 또는 배포할 서비스와 구성 방법을 Firebase CLI에 알리는 firebase.json)을 만들고 업데이트합니다.
   5. 실행: 에이전트가 추가 구성 또는 배포 단계를 안내합니다.

AI 코딩 에이전트 프롬프트에 관한 일반적인 도움말

특히 Firebase와 같은 다면적인 통합으로 작업할 때는 AI 코딩 에이전트를 최대한 활용하려면 상호작용을 일회성 명령어가 아닌 공동작업으로 취급하세요.

구체적으로 작성하고 컨텍스트 제공

Firebase MCP 서버는 에이전트에게 프로젝트에 관한 중요한 컨텍스트를 제공하지만 명확하고 구체적인 자연어 프롬프트가 최상의 결과를 제공합니다. 모호한 요청은 피하세요.

• 모호함: "데이터베이스 오류를 수정해 줘."
• 구체적: " Cloud Firestore의 'users' 컬렉션에 쓰려고 할 때 '권한 거부됨' 오류가 발생합니다Cloud Firestore. firestore.rules를 검토하고 인증된 사용자가 자체 문서에 쓸 수 있도록 하는 수정사항을 제안해 줘.'

반복 및 수정

AI 코딩 에이전트는 복잡한 작업에 대해 처음 시도할 때 완벽한 코드를 생성하는 경우가 거의 없습니다. 답변이 정확하지 않은 경우 대화를 계속 진행하세요.

• 오류 메시지 제공: 터미널 오류 또는 콘솔 로그를 채팅에 다시 붙여넣습니다.
• 조정 요청: "이 코드는 이전 v8 SDK를 사용합니다. Firebase v9 모듈형 SDK를 사용하여 다시 작성해 줘.'
• 설명 요청: "이러한 Firebase Security Rules 사용자 데이터를 보호하는 방법을 설명해 줘."

실행하기 전에 확인

AI 코딩 에이전트는 강력하지만 실수를 하거나 '할루시네이션'(잘못된 이름의 함수 또는 서비스를 발명)을 할 수 있습니다.

• 코드 검토: 프로덕션에 배포하기 전에 항상 생성된 코드, 특히 Firebase Security Rules 및 구성 파일 (firebase.json과 같은)을 읽어보세요.
• 로컬에서 테스트: 가능한 경우 에이전트에게 변경사항을 라이브로 푸시하기 전에 로컬에서 테스트하도록 요청하세요.

MCP 연결 사용

Firebase MCP 서버는 에이전트에게 프로젝트 구조를 직접 볼 수 있도록 하므로 특정 파일을 참조하여 맞춤 구현 권장사항을 얻을 수 있습니다.

• 예: "src/web/index.html 파일을 보고 표준 Firebase 초기화 스크립트를 추가할 위치를 보여줘."

다음 단계

• 사용 가능한 모든 Firebase 에이전트 스킬의 전체 목록을 찾아보세요.
• Firebase MCP 서버에서 제공하는 사용 가능한 모든 프롬프트, 도구, 리소스의 전체 목록을 찾아보세요.
• CLI에서 제공하는 도구에 관해 자세히 알아보세요Firebase.