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

📋 프로젝트 개요

✅ 완료된 작업

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 (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 프로젝트 생성 ✅

• 소문자 + 언더스코어 (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.18.0
firebase login      # won03289@gmail.com로 로그인 완료

4-2. FlutterFire CLI 설치

dart pub global activate flutterfire_cli  # v1.3.1 설치

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

4-3. Firebase 프로젝트 연동

flutterfire configure

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

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

• lib/firebase_options.dart - 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 초기화 코드 추가

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 설정 ✅

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

• ✅ Google 로그인 활성화

• ✅ 테스트 모드로 생성

• ✅ 위치: asia-northeast3 (서울)

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

📦 현재 프로젝트 상태

설치된 주요 패키지

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             # 패키지 의존성

🎯 다음 단계 예정

1. 앱 구조 설계
• 폴더 구조 정의 (features, models, services 등)
• 상태 관리 방식 결정

2. 인증 화면 개발
• 로그인 화면
• 회원가입 화면
• Firebase Auth 연동

3. 북마크 CRUD 기능
• 북마크 추가
• 북마크 목록 조회
• 북마크 수정/삭제
• Firestore 연동

4. 배포
• 웹: 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 빌드