본문 바로가기
프로그램 (PHP,Python)

앱 개발이 이렇게 쉬웠다고? Flutter와 Firebase로 직접 구현해보자

by 날으는물고기 2025. 5. 19.

앱 개발이 이렇게 쉬웠다고? Flutter와 Firebase로 직접 구현해보자

728x90

모바일 앱 개발에서 Flutter와 Firebase의 조합은 개발자들 사이에서 점점 더 인기를 얻고 있습니다. Flutter는 단일 코드베이스로 iOS, Android, 웹 등 다양한 플랫폼에서 네이티브 수준의 앱을 개발할 수 있게 해주는 UI 툴킷이며, Firebase는 Google에서 제공하는 강력한 백엔드 서비스 플랫폼입니다. 이 두 기술의 조합은 개발 시간을 크게 단축하고 백엔드 구축 및 관리에 대한 부담을 줄여줍니다. Flutter와 Firebase 개발 환경 설정부터 실제 애플리케이션 구현까지의 전체 과정입니다.

1. Flutter 개발 환경 설정

Flutter 개발을 시작하기 위해서는 몇 가지 필수 도구와 설정이 필요합니다. 운영체제별 Flutter SDK 설치 및 개발 환경 구성 방법입니다.

Flutter SDK 설치

Windows의 경우

  1. Flutter 공식 웹사이트에서 Flutter SDK 다운로드
  2. 다운로드한 zip 파일을 원하는 위치(예: C:\src\flutter)에 압축 해제
  3. 환경 변수 설정: Flutter 폴더 내의 bin 디렉토리를 Path에 추가

macOS의 경우

  1. Flutter 공식 웹사이트에서 Flutter SDK 다운로드
  2. 다운로드한 zip 파일을 원하는 위치(예: ~/development)에 압축 해제
  3. 환경 변수 설정: ~/.zshrc 또는 ~/.bash_profile 파일에 Flutter 경로 추가 
    export PATH="$PATH:`pwd`/flutter/bin"

코드 에디터 설정

VS Code 설정

  1. VS Code 다운로드 및 설치
  2. Flutter 및 Dart 확장 프로그램 설치
    • Flutter 확장 프로그램: 코드 자동 완성, 디버깅, Hot Reload 등의 기능 제공
    • Dart 확장 프로그램: Dart 언어 지원

추천 VS Code 확장 프로그램

  • Flutter
  • Dart
  • Awesome Flutter Snippets
  • Flutter Widget Snippets
  • Pubspec Assist
  • bloc

개발 도구 구성

Android Studio 설정

  1. Android Studio 다운로드 및 설치
  2. Flutter 및 Dart 플러그인 설치
  3. 안드로이드 SDK 설치 및 설정
  4. 안드로이드 에뮬레이터 생성

iOS 개발 환경 (macOS만 해당)

  1. Xcode 다운로드 및 설치 (App Store에서 가능)
  2. iOS 시뮬레이터 설정
  3. 실제 기기에서 테스트하기 위한 설정
    • Apple 개발자 계정
    • 프로비저닝 프로파일 설정

환경 확인 및 설정 완료

Flutter 개발 환경이 올바르게 설정되었는지 확인하기 위해 터미널에서 다음 명령어를 실행합니다.

flutter doctor

이 명령어는 개발 환경의 상태를 진단하고 문제가 있다면 해결 방법을 제시합니다. 모든 체크포인트가 통과되면 Flutter 개발을 시작할 준비가 된 것입니다.

여러 Flutter 버전 관리

프로젝트에 따라 다양한 Flutter 버전을 사용해야 할 경우, 다음 도구들이 유용합니다.

  • Flutter Version Manager (FVM): 프로젝트별로 다른 Flutter 버전을 관리할 수 있게 해주는 도구
  • mise: Flutter뿐만 아니라 Ruby, Node.js 등 다양한 개발 환경의 버전을 관리할 수 있는 통합 도구

2. Firebase 프로젝트 설정

Flutter 개발 환경이 준비되었다면, 이제 Firebase 프로젝트를 설정할 차례입니다.

Firebase 프로젝트 생성

  1. Firebase 콘솔에 접속
  2. '프로젝트 추가' 버튼 클릭
  3. 프로젝트 이름 입력 및 설정 (Google Analytics 활성화 여부 선택)
  4. 프로젝트 생성이 완료될 때까지 대기

애플리케이션 등록

Android 앱 등록

  1. Firebase 콘솔에서 Android 아이콘 클릭
  2. Android 패키지 이름 입력 (예: com.example.my_app)
  3. 앱 닉네임 (선택사항) 및 디버그 서명 인증서 SHA-1 (선택사항) 입력
  4. google-services.json 파일 다운로드
  5. Flutter 프로젝트의 android/app 디렉토리에 해당 파일 저장

iOS 앱 등록

  1. Firebase 콘솔에서 iOS 아이콘 클릭
  2. iOS 번들 ID 입력 (예: com.example.myApp)
  3. 앱 닉네임 (선택사항) 입력
  4. GoogleService-Info.plist 파일 다운로드
  5. Flutter 프로젝트에 해당 파일 추가 (XCode에서 Runner 프로젝트에 파일 드래그 앤 드롭)

웹 앱 등록

  1. Firebase 콘솔에서 웹 아이콘 클릭
  2. 앱 닉네임 입력 및 Firebase 호스팅 설정 (선택사항)
  3. 제공된 Firebase 구성 코드 저장 (나중에 사용)

Firebase 요금제 선택

Firebase는 두 가지 주요 요금제를 제공합니다.

  • Spark 플랜 (무료): 작은 프로젝트나 개인 개발자에게 적합
  • Blaze 플랜 (종량제): 사용량에 따라 요금을 지불, Cloud Functions, 더 많은 스토리지 등 고급 기능 사용 가능
300x250

대부분의 Firebase 서비스는 Spark 플랜으로도 사용 가능하지만, Cloud Functions와 같은 일부 기능은 Blaze 플랜이 필요합니다. 프로젝트의 규모와 필요한 기능에 따라 적절한 요금제를 선택해야 합니다.

3. Flutter와 Firebase 통합하기

이제 Flutter 프로젝트에 Firebase를 통합할 차례입니다.

두 가지 방법으로 이를 수행할 수 있습니다. FlutterFire CLI 사용 또는 수동 설정.

FlutterFire CLI 방식 (권장)

FlutterFire CLI는 Flutter 프로젝트와 Firebase를 쉽게 통합할 수 있는 커맨드 라인 도구입니다.

  1. FlutterFire CLI 설치 
    dart pub global activate flutterfire_cli
  2. Firebase 구성
    아래 명령으로 프로젝트에 필요한 모든 파일을 생성하고 구성합니다. 
    flutterfire configure --project=your-firebase-project-id
  3. pubspec.yaml에 Firebase 패키지 추가 
    dependencies:
  firebase_core: ^latest_version
  # 필요한 다른 Firebase 패키지들 (예: firebase_auth, cloud_firestore 등)
  4. Firebase 초기화 코드 작성 (main.dart) 
    import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

수동 설정 방식

수동 설정 방식은 더 많은 단계가 필요하며, 플랫폼별로 다른 구성이 필요할 수 있습니다.

  1. pubspec.yaml에 Firebase 패키지 추가 
    dependencies:
  firebase_core: ^latest_version
  # 필요한 다른 Firebase 패키지들
  2. Android 설정
    • android/build.gradle 파일 수정
    • android/app/build.gradle 파일 수정
    • google-services.json 파일 추가
  3. iOS 설정
    • ios/Podfile 수정
    • GoogleService-Info.plist 파일 추가
    • 기타 필요한 설정 추가
  4. Firebase 초기화 코드 작성 (main.dart) 
    import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

FlutterFire CLI 방식이 더 간단하고 오류 가능성이 적으므로 권장됩니다.

4. Firebase 핵심 서비스 활용하기

Firebase는 다양한 서비스를 제공합니다. Flutter 앱 개발에 가장 많이 사용되는 핵심 서비스들입니다.

인증 (Authentication)

Firebase 인증은 이메일/비밀번호, 소셜 로그인(Google, Facebook, Twitter 등), 전화번호 인증 등 다양한 인증 방식을 제공합니다.

 

설정 방법

  1. Firebase 콘솔에서 '인증' 섹션으로 이동
  2. '로그인 방법' 탭에서 사용할 인증 방식 활성화
  3. Flutter 프로젝트에 firebase_auth 패키지 추가 
    dependencies:
  firebase_auth: ^latest_version

기본 사용 예시 (이메일/비밀번호 인증)

import 'package:firebase_auth/firebase_auth.dart';

// 사용자 등록
Future<UserCredential> signUp(String email, String password) async {
  return await FirebaseAuth.instance.createUserWithEmailAndPassword(
    email: email,
    password: password,
  );
}

// 로그인
Future<UserCredential> signIn(String email, String password) async {
  return await FirebaseAuth.instance.signInWithEmailAndPassword(
    email: email,
    password: password,
  );
}

// 로그아웃
Future<void> signOut() async {
  await FirebaseAuth.instance.signOut();
}

// 현재 사용자 가져오기
User? getCurrentUser() {
  return FirebaseAuth.instance.currentUser;
}

// 인증 상태 변화 감지
void authStateChanges() {
  FirebaseAuth.instance.authStateChanges().listen((User? user) {
    if (user == null) {
      print('사용자가 로그아웃했습니다.');
    } else {
      print('사용자가 로그인했습니다. UID: ${user.uid}');
    }
  });
}

소셜 로그인 구현 (Google)

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential> signInWithGoogle() async {
  // Google Sign-In 인증 흐름 시작
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // 인증 세부 정보 가져오기
  final GoogleSignInAuthentication? googleAuth = 
      await googleUser?.authentication;

  // 새로운 credentials 생성
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Firebase에 로그인
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

데이터베이스 (Firestore/Realtime Database)

Firebase는 두 가지 주요 데이터베이스 옵션을 제공합니다. Cloud Firestore와 Realtime Database. 각각의 특징과 차이점을 알아보고, 앱 요구사항에 맞는 적절한 선택을 할 수 있도록 합니다.

 

Cloud Firestore

  • 구조: 문서(Documents)와 컬렉션(Collections) 형태로 데이터 구성
  • 특징: 강력한 쿼리 기능, 자동 확장성, 오프라인 지원
  • 적합한 사용 사례: 복잡한 데이터 구조, 강력한 쿼리가 필요한 애플리케이션
  • 비용: 데이터베이스 작업(읽기, 쓰기, 삭제)에 따라 부과

Realtime Database

  • 구조: 하나의 큰 JSON 트리 형태로 데이터 저장
  • 특징: 실시간 동기화, 간단한 데이터 구조
  • 적합한 사용 사례: 실시간 데이터 동기화가 중요한 단순한 애플리케이션
  • 비용: 대역폭과 저장용량에 따라 부과

선택 가이드

  • Cloud Firestore: "쿼리 가능성, 확장성 및 고가용성이 필요한 풍부한 데이터 모델을 갖춘 애플리케이션"에 적합
  • Realtime Database: "간단한 조회와 확장성이 제한적이며 지연 시간이 짧은 동기화가 필요한 단순한 데이터 모델을 사용하는 애플리케이션"에 적합

Cloud Firestore 사용하기

  1. Firebase 콘솔에서 'Firestore Database' 생성
  2. 규칙 설정 (테스트 모드 또는 프로덕션 모드)
  3. Flutter 프로젝트에 cloud_firestore 패키지 추가 
    dependencies:
  cloud_firestore: ^latest_version

기본 CRUD 작업

import 'package:cloud_firestore/cloud_firestore.dart';

// Firestore 인스턴스 가져오기
final FirebaseFirestore firestore = FirebaseFirestore.instance;

// 문서 추가
Future<void> addUser(String name, int age, String email) async {
  await firestore.collection('users').add({
    'name': name,
    'age': age,
    'email': email,
    'createdAt': FieldValue.serverTimestamp(),
  });
}

// ID로 문서 추가
Future<void> addUserWithId(String userId, String name, int age, String email) async {
  await firestore.collection('users').doc(userId).set({
    'name': name,
    'age': age,
    'email': email,
    'createdAt': FieldValue.serverTimestamp(),
  });
}

// 문서 읽기
Future<DocumentSnapshot> getUser(String userId) async {
  return await firestore.collection('users').doc(userId).get();
}

// 컬렉션 쿼리하기
Future<QuerySnapshot> getUsersOver18() async {
  return await firestore.collection('users')
      .where('age', isGreaterThan: 18)
      .orderBy('age', descending: true)
      .limit(10)
      .get();
}

// 실시간 데이터 변경 감지
Stream<QuerySnapshot> userStream() {
  return firestore.collection('users')
      .where('age', isGreaterThan: 18)
      .snapshots();
}

// 문서 업데이트
Future<void> updateUser(String userId, String newName, int newAge) async {
  await firestore.collection('users').doc(userId).update({
    'name': newName,
    'age': newAge,
    'updatedAt': FieldValue.serverTimestamp(),
  });
}

// 문서 삭제
Future<void> deleteUser(String userId) async {
  await firestore.collection('users').doc(userId).delete();
}

Flutter UI에서 Firestore 데이터 표시

StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance.collection('users').snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Text('오류가 발생했습니다.');
    }

    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }

    return ListView(
      children: snapshot.data!.docs.map((DocumentSnapshot document) {
        Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
        return ListTile(
          title: Text(data['name']),
          subtitle: Text('나이: ${data['age']}'),
        );
      }).toList(),
    );
  },
)

Realtime Database 사용하기

  1. Firebase 콘솔에서 'Realtime Database' 생성
  2. 규칙 설정 (테스트 모드 또는 프로덕션 모드)
  3. Flutter 프로젝트에 firebase_database 패키지 추가 
    dependencies:
  firebase_database: ^latest_version

기본 CRUD 작업

import 'package:firebase_database/firebase_database.dart';

// Database 참조 가져오기
final DatabaseReference databaseRef = FirebaseDatabase.instance.ref();

// 데이터 추가
Future<void> addUser(String userId, String name, int age, String email) async {
  await databaseRef.child('users').child(userId).set({
    'name': name,
    'age': age,
    'email': email,
    'createdAt': ServerValue.timestamp,
  });
}

// 데이터 읽기
Future<DataSnapshot> getUser(String userId) async {
  return await databaseRef.child('users').child(userId).get();
}

// 데이터 쿼리
Future<DataSnapshot> getUsersOver18() async {
  return await databaseRef.child('users')
      .orderByChild('age')
      .startAt(18)
      .get();
}

// 실시간 데이터 변경 감지
Stream<DatabaseEvent> userStream(String userId) {
  return databaseRef.child('users').child(userId).onValue;
}

// 데이터 업데이트
Future<void> updateUser(String userId, String newName, int newAge) async {
  await databaseRef.child('users').child(userId).update({
    'name': newName,
    'age': newAge,
    'updatedAt': ServerValue.timestamp,
  });
}

// 데이터 삭제
Future<void> deleteUser(String userId) async {
  await databaseRef.child('users').child(userId).remove();
}

클라우드 스토리지 (Cloud Storage)

Firebase Cloud Storage는 이미지, 동영상, 오디오 파일 등 사용자 제작 콘텐츠를 저장하는 데 이상적인 서비스입니다.

  1. Firebase 콘솔에서 'Storage' 서비스 활성화
  2. 기본 보안 규칙 설정
  3. Flutter 프로젝트에 firebase_storage 패키지 추가 
    dependencies:
  firebase_storage: ^latest_version

기본 사용 예시

import 'package:firebase_storage/firebase_storage.dart';
import 'dart:io';

// Storage 인스턴스 가져오기
final FirebaseStorage storage = FirebaseStorage.instance;

// 파일 업로드
Future<String> uploadFile(File file, String fileName) async {
  try {
    // 업로드할 위치 참조 생성
    final Reference ref = storage.ref().child('uploads/$fileName');

    // 파일 업로드
    final UploadTask uploadTask = ref.putFile(file);

    // 업로드 완료 대기 및 다운로드 URL 가져오기
    final TaskSnapshot taskSnapshot = await uploadTask;
    final String downloadUrl = await taskSnapshot.ref.getDownloadURL();

    return downloadUrl;
  } catch (e) {
    print('파일 업로드 중 오류 발생: $e');
    throw e;
  }
}

// 파일 다운로드 URL 가져오기
Future<String> getDownloadURL(String filePath) async {
  try {
    return await storage.ref(filePath).getDownloadURL();
  } catch (e) {
    print('다운로드 URL 가져오기 오류: $e');
    throw e;
  }
}

// 파일 삭제
Future<void> deleteFile(String filePath) async {
  try {
    await storage.ref(filePath).delete();
  } catch (e) {
    print('파일 삭제 중 오류 발생: $e');
    throw e;
  }
}

이미지 선택 및 업로드 예시 (image_picker 패키지 사용)

import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:io';

Future<String?> uploadProfileImage() async {
  try {
    // 이미지 선택
    final ImagePicker picker = ImagePicker();
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);

    if (image == null) return null;

    // 파일 이름 생성 (고유한 이름을 위해 타임스탬프 사용)
    final String fileName = '${DateTime.now().millisecondsSinceEpoch}.jpg';

    // Storage 참조 생성
    final Reference ref = FirebaseStorage.instance.ref().child('profiles/$fileName');

    // 파일 업로드
    final UploadTask uploadTask = ref.putFile(File(image.path));

    // 업로드 완료 및 URL 가져오기
    final TaskSnapshot taskSnapshot = await uploadTask;
    final String downloadUrl = await taskSnapshot.ref.getDownloadURL();

    return downloadUrl;
  } catch (e) {
    print('이미지 업로드 중 오류 발생: $e');
    return null;
  }
}

클라우드 함수 (Cloud Functions)

Firebase Cloud Functions를 사용하면 서버 측 코드를 작성하지 않고도 백엔드 로직을 실행할 수 있습니다. 이벤트 트리거(예: Firestore 데이터 변경, 인증 이벤트) 또는 HTTP 요청에 응답하여 함수를 실행할 수 있습니다.

 

주요 사용 사례

  • 푸시 알림 전송
  • 이미지 처리 및 변환
  • 결제 처리
  • 데이터 정리 및 마이그레이션
  • 서드파티 API와의 통합

설정 요구사항

  • Blaze 요금제(종량제) 필요
  • Node.js 또는 Python 개발 환경

기본 설정 단계

  1. Firebase CLI 설치 
    npm install -g firebase-tools
  2. Firebase 로그인 
    firebase login
  3. Firebase 프로젝트 초기화 
    firebase init functions
  4. 함수 작성 (Node.js 예시) 
    const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

// 새 사용자가 생성될 때 실행되는 함수
exports.createUserProfile = functions.auth.user().onCreate((user) => {
  return admin.firestore().collection('users').doc(user.uid).set({
    email: user.email,
    displayName: user.displayName || '',
    photoURL: user.photoURL || '',
    createdAt: admin.firestore.FieldValue.serverTimestamp()
  });
});
  5. 함수 배포 
    firebase deploy --only functions

Flutter에서 Cloud Functions 호출

import 'package:cloud_functions/cloud_functions.dart';

// HTTP 함수 호출
Future<void> callHttpFunction() async {
  try {
    final HttpsCallable callable = FirebaseFunctions.instance.httpsCallable('functionName');
    final result = await callable.call({
      'param1': 'value1',
      'param2': 'value2',
    });
    print('함수 결과: ${result.data}');
  } catch (e) {
    print('함수 호출 중 오류 발생: $e');
  }
}

클라우드 메시징 (FCM)

Firebase Cloud Messaging(FCM)을 사용하면 앱에 푸시 알림을 무료로 보낼 수 있습니다. 사용자 참여를 늘리고 중요한 정보를 전달하는 데 유용합니다.

  1. Flutter 프로젝트에 firebase_messaging 패키지 추가 
    dependencies:
  firebase_messaging: ^latest_version
  2. 플랫폼별 설정
    • Android: 추가 설정 필요 없음 (google-services.json에 이미 포함)
    • iOS: APN 인증서 설정 및 Podfile 업데이트 필요

기본 사용 예시

import 'package:firebase_messaging/firebase_messaging.dart';

// FCM 초기화 및 권한 요청
Future<void> initFCM() async {
  FirebaseMessaging messaging = FirebaseMessaging.instance;

  // iOS에서 알림 권한 요청
  NotificationSettings settings = await messaging.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    sound: true,
  );

  print('알림 권한 상태: ${settings.authorizationStatus}');

  // FCM 토큰 가져오기
  String? token = await messaging.getToken();
  print('FCM 토큰: $token');

  // 토큰 변경 감지
  messaging.onTokenRefresh.listen((newToken) {
    print('FCM 토큰 갱신: $newToken');
    // 여기서 토큰을 서버에 저장할 수 있습니다.
  });
}

// 포그라운드 메시지 처리
void setupForegroundMessaging() {
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('포그라운드 메시지 수신: ${message.notification?.title}');
    // 여기서 앱 내 알림 표시 로직을 구현할 수 있습니다.
  });
}

// 백그라운드 메시지 핸들러
Future<void> firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('백그라운드 메시지 처리: ${message.notification?.title}');
}

// 백그라운드 메시지 설정 (main.dart에서 호출)
void setupBackgroundMessaging() {
  FirebaseMessaging.onBackgroundMessage(firebaseMessagingBackgroundHandler);
}

// 알림 탭 처리
void handleNotificationTap() {
  // 앱이 백그라운드에서 알림을 탭하여 열릴 때
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    print('알림 탭: ${message.notification?.title}');
    // 특정 화면으로 이동하는 로직을 추가할 수 있습니다.
  });

  // 앱이 종료된 상태에서 알림을 탭하여 열릴 때
  FirebaseMessaging.instance.getInitialMessage().then((RemoteMessage? message) {
    if (message != null) {
      print('종료 상태에서 알림 탭: ${message.notification?.title}');
      // 특정 화면으로 이동하는 로직을 추가할 수 있습니다.
    }
  });
}

토픽 구독 및 토픽별 메시지 전송

// 토픽 구독
Future<void> subscribeToTopic(String topic) async {
  await FirebaseMessaging.instance.subscribeToTopic(topic);
}

// 토픽 구독 해제
Future<void> unsubscribeFromTopic(String topic) async {
  await FirebaseMessaging.instance.unsubscribeFromTopic(topic);
}

5. 실제 구현 사례: 커뮤니티 및 블로그 서비스

이제 Flutter와 Firebase를 활용한 실제 구현 사례입니다.

프로젝트 개요

  • 앱 유형: 커뮤니티 및 블로그 서비스
  • 주요 기능: 사용자 인증, 게시물 작성 및 조회, 댓글, 이미지 업로드, 알림
  • 사용 기술: Flutter, Firebase (Authentication, Firestore, Storage, Cloud Functions, FCM)

앱 아키텍처

폴더 구조

lib/
  ├── config/               # 앱 설정 및 상수
  ├── data/                 # 데이터 관련 코드
  │    ├── models/          # 데이터 모델
  │    ├── repositories/    # 데이터 저장소
  │    └── services/        # API 및 서비스
  ├── screens/              # UI 화면
  ├── widgets/              # 재사용 가능한 위젯
  ├── utils/                # 유틸리티 함수
  ├── main.dart             # 앱 진입점
  └── app.dart              # 앱 루트 위젯

상태 관리
이 예제에서는 Provider 패키지를 사용하지만, GetX, Bloc, Riverpod 등 다른 상태 관리 솔루션도 적용 가능합니다.

사용자 인증 기능

인증 서비스 구현

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  // 현재 사용자 스트림
  Stream<User?> get authStateChanges => _auth.authStateChanges();

  // 이메일/비밀번호로 회원가입
  Future<UserCredential> signUpWithEmail(String email, String password, String username) async {
    try {
      // 사용자 생성
      UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );

      // 사용자 정보 Firestore에 저장
      await _firestore.collection('users').doc(userCredential.user!.uid).set({
        'username': username,
        'email': email,
        'createdAt': FieldValue.serverTimestamp(),
        'photoURL': null,
      });

      // 프로필 업데이트
      await userCredential.user!.updateDisplayName(username);

      return userCredential;
    } catch (e) {
      rethrow;
    }
  }

  // 로그인
  Future<UserCredential> signInWithEmail(String email, String password) async {
    return await _auth.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
  }

  // 로그아웃
  Future<void> signOut() async {
    await _auth.signOut();
  }

  // 사용자 프로필 정보 가져오기
  Future<Map<String, dynamic>> getUserProfile(String uid) async {
    DocumentSnapshot doc = await _firestore.collection('users').doc(uid).get();
    return doc.data() as Map<String, dynamic>;
  }
}

블로그 포스트 관리 기능

포스트 모델

class Post {
  final String id;
  final String title;
  final String content;
  final String authorId;
  final String authorName;
  final DateTime createdAt;
  final List<String> imageUrls;
  final int likeCount;
  final int commentCount;

  Post({
    required this.id,
    required this.title,
    required this.content,
    required this.authorId,
    required this.authorName,
    required this.createdAt,
    required this.imageUrls,
    required this.likeCount,
    required this.commentCount,
  });

  factory Post.fromFirestore(DocumentSnapshot doc) {
    Map<String, dynamic> data = doc.data() as Map<String, dynamic>;
    return Post(
      id: doc.id,
      title: data['title'] ?? '',
      content: data['content'] ?? '',
      authorId: data['authorId'] ?? '',
      authorName: data['authorName'] ?? '',
      createdAt: (data['createdAt'] as Timestamp).toDate(),
      imageUrls: List<String>.from(data['imageUrls'] ?? []),
      likeCount: data['likeCount'] ?? 0,
      commentCount: data['commentCount'] ?? 0,
    );
  }

  Map<String, dynamic> toFirestore() {
    return {
      'title': title,
      'content': content,
      'authorId': authorId,
      'authorName': authorName,
      'createdAt': Timestamp.fromDate(createdAt),
      'imageUrls': imageUrls,
      'likeCount': likeCount,
      'commentCount': commentCount,
    };
  }
}

포스트 서비스

class PostService {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  final FirebaseStorage _storage = FirebaseStorage.instance;

  // 포스트 생성
  Future<String> createPost(
    String title, 
    String content, 
    List<File> images, 
    String authorId, 
    String authorName
  ) async {
    try {
      // 이미지 업로드
      List<String> imageUrls = [];
      for (var image in images) {
        String fileName = '${DateTime.now().millisecondsSinceEpoch}_${imageUrls.length}.jpg';
        Reference ref = _storage.ref().child('posts/$authorId/$fileName');

        await ref.putFile(image);
        String downloadUrl = await ref.getDownloadURL();
        imageUrls.add(downloadUrl);
      }

      // Firestore에 포스트 생성
      DocumentReference docRef = await _firestore.collection('posts').add({
        'title': title,
        'content': content,
        'authorId': authorId,
        'authorName': authorName,
        'createdAt': FieldValue.serverTimestamp(),
        'imageUrls': imageUrls,
        'likeCount': 0,
        'commentCount': 0,
      });

      return docRef.id;
    } catch (e) {
      print('포스트 생성 중 오류: $e');
      rethrow;
    }
  }

  // 포스트 목록 가져오기
  Stream<List<Post>> getPosts() {
    return _firestore
        .collection('posts')
        .orderBy('createdAt', descending: true)
        .snapshots()
        .map((snapshot) {
      return snapshot.docs.map((doc) => Post.fromFirestore(doc)).toList();
    });
  }

  // 특정 사용자의 포스트 가져오기
  Stream<List<Post>> getUserPosts(String userId) {
    return _firestore
        .collection('posts')
        .where('authorId', isEqualTo: userId)
        .orderBy('createdAt', descending: true)
        .snapshots()
        .map((snapshot) {
      return snapshot.docs.map((doc) => Post.fromFirestore(doc)).toList();
    });
  }

  // 포스트 상세 정보 가져오기
  Stream<Post> getPost(String postId) {
    return _firestore
        .collection('posts')
        .doc(postId)
        .snapshots()
        .map((doc) => Post.fromFirestore(doc));
  }

  // 포스트 업데이트
  Future<void> updatePost(String postId, String title, String content) async {
    await _firestore.collection('posts').doc(postId).update({
      'title': title,
      'content': content,
      'updatedAt': FieldValue.serverTimestamp(),
    });
  }

  // 포스트 삭제
  Future<void> deletePost(String postId, String authorId) async {
    // 포스트 이미지 삭제
    Post post = await getPost(postId).first;
    for (String imageUrl in post.imageUrls) {
      try {
        await _storage.refFromURL(imageUrl).delete();
      } catch (e) {
        print('이미지 삭제 중 오류: $e');
      }
    }

    // 포스트 문서 삭제
    await _firestore.collection('posts').doc(postId).delete();
  }
}

이미지 저장 최적화 (Cloudflare R2 연동)

미디어 중심 서비스의 스토리지 비용을 절감하기 위해 Cloudflare R2와 같은 대체 스토리지 솔루션을 연동할 수 있습니다. 이를 위해서는 Cloud Functions를 사용하여 업로드 프로세스를 중계해야 합니다.

 

Cloud Function 예시 (Node.js)

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const AWS = require('aws-sdk');
const fetch = require('node-fetch');

admin.initializeApp();

// Cloudflare R2 설정
const S3 = new AWS.S3({
  endpoint: 'https://your-account-id.r2.cloudflarestorage.com',
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
  signatureVersion: 'v4',
});

// 이미지 업로드 함수
exports.uploadToR2 = functions.https.onCall(async (data, context) => {
  // 인증 확인
  if (!context.auth) {
    throw new functions.https.HttpsError('unauthenticated', '인증이 필요합니다.');
  }

  try {
    const { imageUrl, fileName, contentType } = data;

    // Firebase Storage에서 이미지 가져오기
    const response = await fetch(imageUrl);
    const buffer = await response.buffer();

    // Cloudflare R2에 업로드
    const uploadParams = {
      Bucket: 'your-bucket-name',
      Key: `uploads/${context.auth.uid}/${fileName}`,
      Body: buffer,
      ContentType: contentType,
      ACL: 'public-read',
    };

    const result = await S3.upload(uploadParams).promise();

    // R2 URL 반환
    return { 
      success: true, 
      url: result.Location,
    };
  } catch (error) {
    console.error('R2 업로드 오류:', error);
    throw new functions.https.HttpsError('internal', '업로드 중 오류가 발생했습니다.');
  }
});

Flutter에서 호출

import 'package:cloud_functions/cloud_functions.dart';

Future<String?> uploadImageToR2(File image, String fileName) async {
  try {
    // 먼저 Firebase Storage에 업로드
    final storageRef = FirebaseStorage.instance
        .ref()
        .child('temp/${FirebaseAuth.instance.currentUser!.uid}/$fileName');

    await storageRef.putFile(image);
    final String downloadUrl = await storageRef.getDownloadURL();

    // Cloud Function을 통해 R2로 이동
    final HttpsCallable callable = FirebaseFunctions.instance.httpsCallable('uploadToR2');
    final result = await callable.call({
      'imageUrl': downloadUrl,
      'fileName': fileName,
      'contentType': 'image/jpeg',
    });

    // 임시 파일 삭제
    await storageRef.delete();

    if (result.data['success']) {
      return result.data['url'];
    }
    return null;
  } catch (e) {
    print('R2 업로드 오류: $e');
    return null;
  }
}

6. 비용 최적화 전략

Firebase는 많은 기능을 무료로 제공하지만, 앱이 성장함에 따라 비용이 발생할 수 있습니다. 효율적인 비용 관리를 위한 전략입니다.

데이터베이스 비용 최적화

Firestore

  • 필요한 데이터만 쿼리 (전체 문서 대신 필요한 필드만 선택)
  • 인덱스 최적화 (불필요한 인덱스 제거)
  • 배치 작업 사용 (여러 문서 동시 업데이트)
  • 오프라인 지속성 설정 조정
// 필요한 필드만 선택하는 쿼리
FirebaseFirestore.instance
    .collection('users')
    .select(['username', 'email']) // 필요한 필드만 선택
    .get();

// 배치 작업 예시
WriteBatch batch = FirebaseFirestore.instance.batch();
for (int i = 0; i < 10; i++) {
  DocumentReference docRef = FirebaseFirestore.instance.collection('items').doc();
  batch.set(docRef, {'index': i});
}
await batch.commit();

Realtime Database

  • 데이터 구조 최적화 (중첩 최소화)
  • 인덱싱 규칙 최적화
  • 필요한 데이터만 다운로드
// 특정 위치만 구독
DatabaseReference ref = FirebaseDatabase.instance.ref('users/${userId}/profile');
ref.onValue.listen((event) {
  // 전체 사용자 데이터가 아닌 프로필 정보만 수신
});

스토리지 비용 최적화

  • 이미지 압축 및 리사이징
  • 캐싱 전략 구현
  • 미사용 파일 자동 삭제 Cloud Function 구현
  • 대체 스토리지 솔루션 고려 (Cloudflare R2, Backblaze B2 등)
// 이미지 압축 예시 (flutter_image_compress 패키지 사용)
import 'package:flutter_image_compress/flutter_image_compress.dart';

Future<File> compressImage(File file) async {
  final filePath = file.absolute.path;
  final lastIndex = filePath.lastIndexOf('.');
  final outPath = '${filePath.substring(0, lastIndex)}_compressed.jpg';

  final compressedFile = await FlutterImageCompress.compressAndGetFile(
    filePath,
    outPath,
    quality: 70, // 압축 품질 (0-100)
    minWidth: 1000,
    minHeight: 1000,
  );

  return File(compressedFile!.path);
}

Cloud Functions 비용 최적화

  • 함수 실행 시간 최소화
  • 비용이 많이 드는 작업은 배치 처리
  • 오류 및 재시도 처리 구현
  • 불필요한 함수 호출 최소화

종합적인 모니터링 및 알림 설정

  • Firebase 콘솔에서 사용량 및 비용 모니터링
  • 예산 알림 설정
  • 정기적인 사용량 검토

7. 추가 리소스

Flutter와 Firebase의 조합은 크로스 플랫폼 모바일 앱 개발을 위한 강력한 솔루션입니다.

주요 이점 요약

  • 개발 속도 향상: Flutter의 Hot Reload와 Firebase의 서버리스 백엔드로 빠른 개발 가능
  • 크로스 플랫폼: 단일 코드베이스로 iOS, Android, 웹 등 다양한 플랫폼 지원
  • 확장성: Firebase 서비스가 자동으로 확장되어 사용자 증가에 대응
  • 다양한 기능: 인증, 데이터베이스, 스토리지, 푸시 알림 등 필수 기능 제공
  • 운영 부담 감소: 서버 관리 없이 백엔드 서비스 활용 가능

추천 자료

시작하기 전 고려사항

  • 프로젝트 규모와 복잡성: 대규모 또는 복잡한 앱의 경우 커스텀 백엔드가 필요할 수 있음
  • 비용 구조: 사용량이 증가함에 따라 Firebase 비용이 증가할 수 있음
  • 지역별 제한사항: 일부 국가에서는 Firebase 서비스 접근이 제한될 수 있음
  • 데이터 소유권: 데이터가 Google 서버에 저장되므로 개인정보 보호 정책 고려 필요

 

Flutter와 Firebase를 활용한 앱 개발 여정을 즐기시길 바랍니다. 빠르게 아이디어를 프로토타입으로 만들고, 실제 제품으로 출시하는 과정에서 이 두 기술의 조합이 큰 도움이 될 것입니다.

728x90
그리드형(광고전용)
저작자표시 비영리 동일조건 (새창열림)

관련글

댓글

티스토리툴바