Cineverse 부활: 로컬 스토리지에서 파이어베이스로 🚀

출처: Dev.to

이 글은 GitHub Finish-Up-A-Thon 챌린지에 제출한 작품입니다.
저는 TMDB API를 활용한 영화 탐색 앱 Cineverse를 만들었습니다. 사용자는 다음을 할 수 있습니다:

🎬 트렌딩 및 인기 영화 탐색
🔍 제목으로 영화 검색
📖 상세 영화 정보 확인 (평점, 개요, 개봉일)
❤️ 즐겨찾기 저장 및 개인 감상 목록 관리
👤 계정 생성 및 기기 간 데이터 동기화
🛡️ 역할 기반 접근 제어가 적용된 관리자 대시보드

앱은 Flutter로 개발했으며, Firebase Authentication과 Cloud Firestore를 백엔드로 사용하고, 프리미엄 다크 시네마틱 테마로 디자인되었습니다.
🔗 GitHub 저장소: https://github.com/Ali23102001/cineverse_app

기능

배경 이야기

Cineverse는 처음에 기본 Flutter 프로젝트로 시작했습니다. 그때는 다음과 같은 제한이 있었습니다:

• 모든 데이터를 로컬 스토리지에만 저장 (클라우드, 동기화 없음)
• 실제 인증 시스템 부재
• 사용자 계정, 즐겨찾기, 감상 목록 기능 없음
• Android에서 빌드 파일 오류로 인한 지속적인 크래시
• 겉보기는 괜찮지만 실제 앱으로 동작하지 않는 골격만 존재

“로컬 프로토타입”에서 “프로덕션 수준 앱”으로 전환하는 과정이 너무 벅차 보여 포기했었습니다. Firebase 설정, 플랫폼별 이슈, 인증 흐름 등 해결해야 할 것이 너무 많았거든요.

GitHub Finish-Up-A-Thon 챌린지가 시작되면서 이 프로젝트를 다시 살리기로 결심했습니다. 아래는 제가 바꾼 내용 전체입니다:

• 🔥 Firebase Authentication – 로컬 스토리지 기반 인증을 완전히 Firebase로 교체. 이제 이메일/비밀번호와 Google Sign-In 로 회원가입·로그인 가능하며, 이메일 인증 흐름도 완전 구현.
• ☁️ Cloud Firestore 연동 – 사용자 프로필, 즐겨찾기, 감상 목록을 Firestore에 저장하고 실시간으로 모든 기기와 동기화.
• 🛡️ 관리자 대시보드 – 이메일 기반 역할 검증으로 관리자 전용 패널 구현. 권한이 없는 사용자는 자동으로 홈 화면으로 이동.
• 🔧 플랫폼 수정 – Android 빌드 크래시를 일으키던 build.gradle.kts, AndroidManifest.xml 문제 해결 및 Web 환경에서 Firebase 초기화 오류 수정.
• 🎨 UI 다듬기 – 스플래시 화면, 네비게이션 셸, 전체 테마를 프리미엄하고 시네마틱하게 개선.
• 📧 이메일 인증 화면 – 사용자가 이메일을 확인하기 전까지 앱에 접근하지 못하도록 전용 인증 흐름 추가.

이제 이 앱은 깨진 프로토타입에서 클라우드와 완벽히 동기화된 영화 탐색 플랫폼으로 탈바꿈했습니다.

GitHub Copilot의 도움

프로젝트를 마무리하는 데 있어 GitHub Copilot이 큰 역할을 했습니다. 구체적인 활용 사례는 다음과 같습니다:

• firebase_auth, google_sign_in, cloud_firestore 설정에 필요한 반복적인 코드(인증 서비스 메서드 전체)를 자동 완성해 주어 수시간의 타이핑과 문서 검색을 절감.
• Android와 Web 플랫폼 설정을 고치는 가장 어려운 부분을 Copilot이 다음과 같이 지원:
  • build.gradle.kts의 Kotlin DSL 구문 수정
  • Google Sign-In을 위한 AndroidManifest.xml 인텐트 필터 올바르게 구성
  • 프로젝트에 맞는 firebase_options.dart 자동 생성
• 관리자 대시보드 접근 제한 로직을 구현할 때, “FirebaseAuth.instance.currentUser?.email을 화면 로드 시 확인하고, 권한이 없으면 Navigator.pushReplacement로 홈 화면 이동”이라는 패턴을 즉시 제안.
• 기존의 단순 push/pop 네비게이션을 하단 네비게이션 바가 포함된 셸 기반 레이아웃으로 리팩터링해 Home, Search, Favorites, Watchlist, Profile 화면 간 전환을 부드럽게 만들도록 도와줌.

결과적으로 Copilot 덕분에 수 주에 걸친 Firebase 문서 탐색을 피하고, 집중적인 개발에만 전념할 수 있었습니다. 마치 Firebase와 Flutter 전체 생태계를 이미 숙지한 파트너와 짝 프로그래밍을 하는 느낌이었습니다.

❤️ Flutter, Firebase, GitHub Copilot을 사용해 만든 프로젝트입니다.