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

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

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

Firebase 에이전트 스킬과 도구를 사용해야 하는 이유

AI 코딩 에이전트는 특정 프로젝트 구성이나 오래된 정보로 인해 어려움을 겪는 경우가 많습니다. 이 도구 키트는 특화된 안내(에이전트 스킬)를 두 가지 상호 보완적인 에이전트 실행 도구 (CLI 및 MCP 서버)와 결합하여 이러한 격차를 해소합니다.

• Firebase 에이전트 스킬: 코딩 에이전트에 도메인 전문 지식과 워크플로를 제공합니다. 안내 레이어인 스킬은 코드 작성을 포함하여 Firebase 작업 권장사항을 에이전트에 안내합니다. 또한 스킬은 에이전트에게 Firebase CLI 및 Firebase MCP 서버를 사용하는 시기와 방법을 알려줍니다.
• 에이전트 실행 도구:
  • Firebase CLI(명령줄 도구): 프로젝트 수명 주기 및 환경 태스크를 위한 도구를 제공합니다. 에이전트는 터미널 환경에서 CLI 명령어를 실행하여 Firebase 프로젝트에서 서비스를 설정하고, 전체 사이트 또는 백엔드 리소스를 배포하고, 로컬 에뮬레이터를 시작하는 등의 작업을 수행할 수 있습니다.
  • Firebase MCP 서버(프로그래매틱 도구 및 리소스): 실시간 검사 및 데이터 작업을 위한 도구를 제공합니다. 구조화된 도구 호출을 통해 에이전트는 프로그래매틱 방식으로 Cloud Firestore 문서를 쿼리 및 업데이트하고, Firebase Authentication 사용자를 관리하고, Security Rules를 검증하고, 실시간 로그 또는 문서를 컨텍스트로 직접 가져오는 등의 작업을 수행할 수 있습니다.

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

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

관련 Firebase 서비스

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

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

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

일반 워크플로

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

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

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

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

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
    }
  }
}

"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, Firebase 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 코딩 에이전트 프롬프트 작성을 위한 일반적인 도움말

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

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

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에서 제공하는 도구에 대해 자세히 알아보기