[Flutter + Firebase로 북마크 앱 만들기 #1] 프로젝트 초기 설정 및 Firebase 연동

도경원

Oct 06, 2025

Contents

📌 시리즈 목차 📋 프로젝트 개요 ✅ 완료된 작업 📦 현재 프로젝트 상태 🎯 다음 단계 예정 📝 개발 노트

📌 시리즈 목차

#1 프로젝트 초기 설정 및 Firebase 연동 ← 현재 글

#2 프로젝트 구조 설계 및 Riverpod 적용

#3 Firebase Authentication 연동 및 로그인 구현

#4 Firestore 연동 및 북마크 CRUD 구현

#5 Firebase Hosting으로 웹 배포하기

#6 Android 앱 빌드 및 Play Store 배포 준비

#7 스마트 URL 런처 구현 (SNS 앱 연동)

#8 스마트 카테고리 관리 시스템

#9 모던 UI 디자인 시스템 구축

📋 프로젝트 개요

프로젝트명: LinkOn

목표: Flutter + Firebase를 활용한 크로스 플랫폼 북마크 관리 앱 개발 및 배포

타겟 플랫폼: Web + Android + iOS + macOS

✅ 완료된 작업

1단계: 기술 스택 결정

프론트엔드

Flutter 3.35.4

Dart 3.9.2

Material Design 3

선택 이유:

크로스 플랫폼 개발 가능 (단일 코드베이스)

빠른 개발 속도 (Hot Reload)

네이티브 수준의 성능

웹과 모바일 모두 지원

백엔드 & 인프라

Firebase Authentication - 사용자 인증

Cloud Firestore - NoSQL 데이터베이스

Firebase Hosting - 웹 배포

선택 이유:

서버 구축 불필요 (Serverless)

실시간 동기화 지원

무료 tier로 충분한 시작

Flutter 공식 지원 우수

개발 환경

OS: macOS 15.6.1 (Apple Silicon)

IDE: VS Code 1.104.2 + Flutter Extension 3.120.0

도구: Android Studio, Xcode 16.3

2단계: 개발 환경 검증 ✅

Flutter Doctor 체크 결과:


[✓] Flutter (3.35.4)
[✓] Android toolchain (SDK 36.0.0)
[✓] Xcode (16.3)
[✓] Chrome (웹 개발)
[✓] VS Code
[✓] Android Studio

사용 가능한 플랫폼:

✅ macOS (desktop)

✅ Chrome (web)

✅ Android (emulator + 실제 기기)

✅ iOS (simulator + 실제 기기)

3단계: Flutter 프로젝트 생성 ✅

프로젝트명: bookmark_manager / LinkOn

네이밍 규칙:

소문자 + 언더스코어 (Flutter/Dart 컨벤션)

명확한 의미

특수문자 제외

생성 명령어:


flutter create bookmark_manager
cd bookmark_manager

초기 실행 테스트:


flutter run -d chrome

d 플래그 의미: device - 실행할 디바이스/플랫폼을 지정하는 옵션

사용 예시:

flutter run -d chrome - 크롬 웹 브라우저에서 실행

flutter run -d android - Android 에뮬레이터/기기에서 실행

flutter run -d macos - macOS 데스크톱 앱으로 실행

flutter run -d ios - iOS 시뮬레이터/기기에서 실행

4단계: Firebase 설정 ✅

4-1. Firebase CLI 설치 및 로그인


firebase --version  # 14.19.0
firebase login      # won03289@gmail.com로 로그인 완료

4-2. FlutterFire CLI 설치


dart pub global activate flutterfire_cli  # v1.3.1 설치

PATH 설정:


export PATH="$PATH":"$HOME/.pub-cache/bin"
source ~/.zshrc

설정 이유: FlutterFire CLI 실행 파일이 ~/.pub-cache/bin에 설치되므로 PATH에 추가 필요

4-3. Firebase 프로젝트 연동


flutterfire configure

선택 사항:

Firebase 프로젝트: bookmark-manager-24e55

플랫폼: ✅ Android, ✅ iOS, ✅ macOS, ✅ Web

자동 생성된 파일:

lib/firebase_options.dart - Firebase 설정 정보

각 플랫폼별 설정 파일

등록된 Firebase 앱:


Platform   Firebase App Id
web        1:981420750189:web:bf4aeefb9bab70ba031664
android    1:981420750189:android:3e6a3c6c20ffaa50031664
ios        1:981420750189:ios:908732b42b0ba76b031664
macos      1:981420750189:ios:908732b42b0ba76b031664

4-4. Firebase 패키지 설치


flutter pub add firebase_core          # v4.1.1
flutter pub add firebase_auth          # v6.1.0
flutter pub add cloud_firestore        # v6.0.2
# firebase_storage는 요금제 이슈로 보류

각 패키지 역할:

firebase_core: Firebase 초기화 (필수)

firebase_auth: 사용자 인증 (로그인/회원가입)

cloud_firestore: 북마크 데이터 저장/관리

firebase_storage: 이미지 저장 (추후 필요시 추가)

4-5. Firebase 초기화 코드 추가

lib/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(const MyApp());
}

주요 코드 설명:

WidgetsFlutterBinding.ensureInitialized(): Flutter 엔진 초기화 (Firebase 초기화 전 필수)

await Firebase.initializeApp(): 비동기로 Firebase 초기화

DefaultFirebaseOptions.currentPlatform: 현재 실행 중인 플랫폼에 맞는 설정 자동 선택

4-6. Firebase Console 설정 ✅

Authentication 활성화:

✅ 이메일/비밀번호 로그인 활성화

✅ Google 로그인 활성화

Firestore Database 생성:

✅ 테스트 모드로 생성

✅ 위치: asia-northeast3 (서울)

Storage:

⏸️ 요금제 이슈로 보류 (필요시 추가 예정)

📦 현재 프로젝트 상태

설치된 주요 패키지


dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^4.1.1
  firebase_auth: ^6.1.0
  cloud_firestore: ^6.0.2

프로젝트 구조


bookmark_manager/
├── android/                  # Android 네이티브 코드
├── ios/                      # iOS 네이티브 코드
├── macos/                    # macOS 네이티브 코드
├── web/                      # 웹 관련 파일
├── lib/
│   ├── main.dart            # 앱 진입점 (Firebase 초기화 완료)
│   └── firebase_options.dart # Firebase 설정 (자동 생성)
├── test/                     # 테스트 코드
└── pubspec.yaml             # 패키지 의존성

🎯 다음 단계 예정

앱 구조 설계

폴더 구조 정의 (features, models, services 등)

상태 관리 방식 결정

인증 화면 개발

로그인 화면

회원가입 화면

Firebase Auth 연동

북마크 CRUD 기능

북마크 추가

북마크 목록 조회

북마크 수정/삭제

Firestore 연동

배포

웹: Firebase Hosting

Android: APK 빌드

iOS: TestFlight (선택)

📝 개발 노트

주의사항

Firebase Storage는 현재 미사용 (요금제 이슈)

필요시 나중에 추가 가능

Firestore는 테스트 모드이므로 프로덕션 배포 전 보안 규칙 설정 필요

유용한 명령어


# 앱 실행
flutter run -d chrome      # 웹 브라우저
flutter run -d android     # Android
flutter run -d ios         # iOS
flutter run -d macos       # macOS

# 패키지 관리
flutter pub get            # 패키지 설치
flutter pub outdated       # 업데이트 가능한 패키지 확인

# 빌드
flutter build web          # 웹 빌드
flutter build apk          # Android APK 빌드
flutter build ios          # iOS 빌드

현재 상태: Firebase 연동 완료, 앱 정상 실행 확인 ✅

Contents

📌 시리즈 목차 📋 프로젝트 개요 ✅ 완료된 작업 📦 현재 프로젝트 상태 🎯 다음 단계 예정 📝 개발 노트

Platform Firebase App Id web 1:981420750189:web:bf4aeefb9bab70ba031664 android 1:981420750189:android:3e6a3c6c20ffaa50031664 ios 1:981420750189:ios:908732b42b0ba76b031664 macos 1:981420750189:ios:908732b42b0ba76b031664

import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp()); }

bookmark_manager/ ├── android/ # Android 네이티브 코드 ├── ios/ # iOS 네이티브 코드 ├── macos/ # macOS 네이티브 코드 ├── web/ # 웹 관련 파일 ├── lib/ │ ├── main.dart # 앱 진입점 (Firebase 초기화 완료) │ └── firebase_options.dart # Firebase 설정 (자동 생성) ├── test/ # 테스트 코드 └── pubspec.yaml # 패키지 의존성

# 앱 실행 flutter run -d chrome # 웹 브라우저 flutter run -d android # Android flutter run -d ios # iOS flutter run -d macos # macOS # 패키지 관리 flutter pub get # 패키지 설치 flutter pub outdated # 업데이트 가능한 패키지 확인 # 빌드 flutter build web # 웹 빌드 flutter build apk # Android APK 빌드 flutter build ios # iOS 빌드