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

Antigravity, Claude Code, Codex, Cursor와 같은 AI 기반 개발 도구를 사용하여 웹 앱의 Firebase 설정을 간소화하세요. Firebase CLI 및 Firebase MCP 서버와 함께 Firebase 에이전트 스킬을 사용하면 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 서비스를 설정하고 사용하는 방법을 설명하는 일반화된 워크플로를 설명합니다. 백엔드에서 에이전트 스킬은 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.json (Firebase CLI에 배포할 서비스와 구성 방법을 알림)와 같은 필요한 파일을 만들고 업데이트합니다.
   5. 실행: 에이전트가 추가 구성 또는 배포 단계를 안내합니다.

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

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

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

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

• 모호함: '데이터베이스 오류를 수정해 줘.'
• 구체적: 'Cloud Firestore의 'users' 컬렉션에 쓰려고 하면 '권한이 거부되었습니다'라는 오류가 표시됩니다. 내 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 서버에서 제공하는 사용 가능한 모든 프롬프트, 도구, 리소스의 전체 목록을 탐색합니다.
• Firebase CLI에서 제공하는 도구에 대해 자세히 알아보기