[개발하는남자 핸즈온 플러터] 챕터9 Firebase 프로젝트 연동 mcp로 자동화 - 최신화

개요

안녕하세요 개발하는남자 개남입니다. 지난 포스트에 이어서 핸즈온 플러터 챕터 9장을 리뷰하겠습니다. 이번 장에서는 Firebase 연동하는 부분입니다. 이 부분에서 리뷰라 할 것이 딱히 없습니다. 책에 기록된 대로 순차적으로 진행하면 되기 때문입니다. 우선 GitHub 소스코드 기준으로 소스코드 최신화(플러터 버전에 맞는 의존성 정리)를 하고, 새로운 방식으로 Firebase 연동을 해보려고 합니다. 바로 MCP에 대해서 살펴보고 Firebase MCP Server를 활용하여 프로젝트 연동을 AI에게 시켜서 연동이 잘 되는지를 확인하는 방법을 알아보겠습니다.

💡 참고
이 포스트를 순차적으로 따라가기 위해서는 이전 포스트의 최신화가 되어 있어야 합니다.
즉, chapter09 브랜치가 chapter08 브랜치 수정사항을 Merge된 상태여야 합니다.

소스코드 : https://github.com/sudar-life/bamtol_market_clone_coding
브랜치 정보 : chapter09
플러터 버전 : Flutter 3.32.5
Dart 버전 : Dart 3.8.1

1. 소스코드 최신화(의존성 정리)

1-1 pubspec.yaml

이번에 새로 추가된 라이브러리 버전을 최신화에 맞춰 버전을 올리도록 하겠습니다.

기존코드

firebase_core: ^2.5.0
firebase_auth: ^4.2.6
cloud_firestore: ^4.3.2
firebase_storage: ^11.0.11

변경코드

firebase_core: ^3.12.0
firebase_auth: ^5.6.1
cloud_firestore: ^5.6.4
firebase_storage: ^12.4.3

---

1-2 settings.gradle

기존코드

plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "8.3.0" apply false
    id "org.jetbrains.kotlin.android" version "1.8.10" apply false
}

변경코드

plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "8.3.0" apply false
    id "org.jetbrains.kotlin.android" version "1.8.10" apply false
    id "com.google.gms.google-services" version "4.4.0" apply false // 추가
}

---

1-3 app/build.gradle

plugins 수정

기존코드

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'dev.flutter.flutter-gradle-plugin'
}

변경코드

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.gms.google-services' //추가
    id 'dev.flutter.flutter-gradle-plugin'
}

dependencies 수정

기존코드

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

변경코드

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation platform('com.google.firebase:firebase-bom:33.1.1') // 추가
}

Firebase BOM이란? (com.google.firebase:firebase-bom)

BOM은 Bill of Materials의 줄임말로, 여러 Firebase 라이브러리들의 버전을 통합 관리하는 도구입니다. 주요 목적: 버전 충돌 방지: 여러 Firebase 라이브러리 간의 호환성 보장 버전 관리 단순화: 각 라이브러리마다 개별 버전을 지정할 필요 없음 안정성 향상: Google에서 테스트된 호환 가능한 버전 조합 제공합니다.

BOM 사용 전 vs 후

BOM 사용 전

implementation 'com.google.firebase:firebase-analytics:21.3.0'
implementation 'com.google.firebase:firebase-auth:22.1.1'
implementation 'com.google.firebase:firebase-firestore:24.7.0'

BOM 사용 후 (통합 버전관리)

implementation platform('com.google.firebase:firebase-bom:33.1.1')
implementation 'com.google.firebase:firebase-analytics' // 생략
implementation 'com.google.firebase:firebase-auth'      // 생략
implementation 'com.google.firebase:firebase-firestore' // 생략

MCP란?

MCP(Model Context Protocol)는 Anthropic에서 개발한 AI 모델과 외부 도구 간의 표준화된 통신 프로토콜입니다. 이 프로토콜을 통해 AI 모델이 다양한 외부 서비스와 직접 상호작용할 수 있게 됩니다.

MCP의 장점

1. 개발 효율성 향상

기존 방식: 개발자가 직접 API 문서를 읽고 코드 작성
MCP 방식: AI가 자연어 명령으로 직접 API 호출

2. 오류 감소

• 표준화된 프로토콜로 인한 일관성 보장
• AI의 자동 오류 처리 및 재시도 메커니즘
• 타입 안전성 및 검증 기능

3. 확장성

• 새로운 도구 추가 시 기존 코드 변경 불필요
• 플러그인 방식의 모듈화된 구조
• 다양한 서비스와의 통합 가능

Firebase MCP Server

Firebase MCP Server는 Firebase의 다양한 서비스를 MCP 프로토콜로 노출하는 서버입니다.

지원 서비스:

• Firebase Authentication: 사용자 인증 관리
• Cloud Firestore: NoSQL 데이터베이스 작업
• Firebase Storage: 파일 업로드/다운로드
• Firebase Functions: 서버리스 함수 실행
• Firebase Analytics: 사용자 행동 분석

주요 기능:

// 기존 방식 (수동 코드 작성)
const auth = getAuth();
const user = await createUserWithEmailAndPassword(auth, email, password);

// MCP 방식 (AI가 자연어로 처리)
("Firebase에 이메일 test@example.com과 비밀번호 123456으로 새 사용자를 생성해줘");

MCP 사용 전 vs 후 비교

기존 개발 방식:

1. Firebase 문서 읽기 (30분)
2. 설정 파일 작성 (20분)
3. 코드 구현 (60분)
4. 테스트 및 디버깅 (40분)
   총 소요 시간: 150분

MCP 활용 방식:

1. AI에게 자연어로 요구사항 설명 (2~3분)
2. AI가 자동으로 설정 및 구현 (5분)
3. 결과 확인 및 미세 조정 (15분)
   총 소요 시간: 약 25분

실제 MCP 명령어 예시

프로젝트 초기화:

"Flutter 프로젝트에 Firebase를 연동하고 Authentication과 Firestore를 설정해줘"

데이터베이스 구조 생성:

"사용자 정보를 저장할 users 컬렉션과 상품 정보를 저장할 products 컬렉션을 만들어줘"

인증 기능 구현:

"이메일/비밀번호 로그인과 Google 소셜 로그인을 지원하는 인증 시스템을 만들어줘"

MCP의 미래 전망

1. 개발 패러다임 변화

• 코드 작성에서 대화형 개발로 전환
• AI 페어 프로그래밍의 표준화
• 자연어 기반 소프트웨어 개발

2. 생산성 혁신

• 개발 시간 단축 (70-80% 감소)
• 반복 작업 자동화
• 복잡한 설정 과정 단순화

3. 접근성 향상

• 비개발자도 쉽게 앱 개발 가능
• 학습 곡선 대폭 감소
• 프로토타이핑 속도 향상

이제 실제로 Firebase MCP Server를 활용하여 프로젝트에 Firebase를 연동해보겠습니다.

Firebase MCP Server 사용

MCP를 Cursor나 Claude Code와 같은 AI IDE에서 사용하기 위해서 Firebase MCP Server 공식 사이트에 접속하여 설정 문서를 확인해야 합니다.
Firebase MCP 공식 문서
주목해봐야 하는 부분은 시작하기 전에 부분입니다.

Firebase MCP 서버는 CLI를 사용하여 Firebase 프로젝트의 인증을 처리합니다. MCP 서버를 사용하기 전에 CLI로 인증해야 합니다. 로그인하지 않고 서버를 사용하려고 하거나 인증 토큰이 만료된 경우 서버에 재인증하라는 오류 메시지가 표시됩니다.

라고 명시되어 있습니다.

npx -y firebase-tools@latest login --reauth

해당 명령어를 복사하여 터미널에 입력해 인증을 진행합니다.

💡 node version 오류 발생 시

Firebase CLI v14.10.0 is incompatible with Node.js v16.20.2 Please upgrade Node.js to version >=20.0.0 || >=22.0.0

Node 버전을 20 이상으로 올려주시면 됩니다.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=727920005&redirect_uri=http%3A%2F%2Flocalhost%3A9005&login_hint=mousai86%40gmail.com

Waiting for authentication...

위와 같은 메시지가 뜨며 브라우저가 뜨면서 Firebase CLI 동의 항목을 받고 있습니다. (만일 구글 로그인이 되어 있지 않다면 구글 로그인부터 진행되게 될 것입니다.)

동의를 진행하게 되면 다음과 같은 화면과 터미널에 성공 메시지를 확인할 수 있습니다.

✔  Success! Logged in as mousai86@gmail.com

MCP 설정

Firebase MCP 공식 문서에서는 다음과 같이 각 IDE에 맞는 MCP 설정 방법을 제시하고 있습니다.

• Claude Desktop
• Cline
• Cursor
• vsCode
• Windsurf

저는 Cursor를 이용하고 있기 때문에 다음 내용을 복사해서 MCP 설정을 추가해주겠습니다.

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

Cursor에 MCP 설정 방법 Cursor > Preferences > Cursor Settings 클릭

MCP 메뉴 선택 후 Add new global MCP server 메뉴 클릭

.json 파일 수정

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

💡 MCP를 설정하고 난 뒤에는 반드시 IDE를 종료 후 다시 열어야 합니다.

Cursor 기준으로 다음 이미지처럼 활성화되면 사용 가능한 명령들이 보일 것입니다.

명령어를 외워야 하는 것은 아닙니다. 전부 AI가 알아서 필요한 명령어를 찾아 실행시켜 줄 것입니다. 이제 플러터의 프로젝트를 기존의 프로젝트와 연결하는 과정을 해보겠습니다.

1단계 MCP 요청 명령

제가 MCP 요청 명령은 다음과 같습니다.

현재 프로젝트는 플러터야 현재 프로젝트 파일을 분석한 뒤에 Firebase MCP를 활용해서 기존 존재하는 Firebase 프로젝트와 연결해줘

처음에는 Firebase MCP를 이용해서 기존 Firebase 프로젝트와 연결해줘라고 요청했는데 갑자기 웹 프로젝트로 판단했는지 node package를 생성하는 것을 확인하고 취소하고 위와 같이 플러터 프로젝트라고 하고 프로젝트 파일 기준으로 분석을 요청한 뒤에 연결을 요청하니 정상적으로 분석하는 과정을 확인할 수 있었습니다.

이미지에서 플러터 프로젝트 : bamtol_market_app이라고 나온 것은 AI가 현재 프로젝트명과 유사한 Firebase 프로젝트를 매칭해서 보여준 것으로 AI가 상당히 효율적인 것을 확인할 수 있습니다. 또한 처음 세팅 시 npx -y firebase-tools@latest login --reauth 이 명령을 통해 로그인을 해줬기 때문에 프로젝트에 접근을 할 수 있음을 기억해야 합니다.

이제 우리들이 해야 할 것은 MCP 명령을 어떤 식으로 전달하고 잘 진행되는지 확인만 하면서 Run tool 버튼만 눌러주면 됩니다.

얼마 지나지 않아 다음과 같은 내용 요약과 다음 단계를 가이드해주는 결과창이 나타나게 됩니다.

다음 단계에서 무엇을 진행할지에 대한 가이드까지 주고 있습니다. 이 과정에서 흥미로운 것은 앱 배포 준비 이 부분입니다. Firebase를 통한 앱을 배포할 수 있다는 것은 알고 있었으나 이것까지 MCP를 이용해서 가능하다는 것을 알 수 있는 대목입니다.

그리고 완료되는 과정에서 잘 세팅해주는지 의심 반 기대 반으로 어떤 작업을 하는지 실시간으로 프로젝트 내부를 살펴봤는데 우리들이 수작업으로 늘 해왔던 google-services.json 파일을 android/app 내에 배치를 한다거나 GoogleService-Info.plist 파일을 iOS 폴더 내부에 배치를 하고 마지막으로 firebase_options.dart 파일에 각 플랫폼에 맞는 데이터를 세팅하는 것까지 완벽하게 일처리를 해주는 것을 확인하고 정말 MCP는 개발자의 일을 대신해주는구나라고 다시 한번 놀라게 되었습니다.

이 모든 것은 자연어로 AI에게 요청했을 뿐 힘들고 귀찮았던 전 과정을 단 1~2분 만에 끝난다는 것입니다.