[Flutter] Firebase의 Realtime Database 활용 app 만들기 1/3

Multi-Platform Support with Single Source

Flutter는 Windows, Linux, Mac, Android, iOS, Web 등 다양한 플랫폼에서 실행 가능한 앱을 하나의 소스코드로 만들 수 있게 해줍니다.

 

예를 들어 간단한 메모 앱을 생각해봅시다. 스마트폰에서 작성한 메모를 윈도우 앱에서도 실시간으로 확인하고 수정할 수 있다면 굉장히 편리할 것입니다. 물론 메모 데이터를 로컬 데이터베이스(Local DB)로 구현할 수도 있습니다. 하지만 이 경우 다른 디바이스에서 앱을 열면 데이터를 별도의 파일로 export / import해야 하므로 여러 기기에서 동시에 사용하는 데는 한계가 있습니다. 특히 데이터가 수시로 변하는 메모 앱 같은 경우에는 불편함이 커지죠.

 

이럴 때는 Firebase Realtime Database 같은 클라우드 기반 데이터베이스가 큰 도움이 됩니다. 이를 활용하면 여러 기기에서 동일한 데이터를 실시간으로 공유할 수 있을 뿐만 아니라, 여러 사용자가 함께 같은 데이터를 사용할 수도 있습니다.

 

이제부터 Firebase 서비스 중 Realtime Database를 활용하여, 여러 디바이스에서 실시간으로 동기화되는 Flutter 앱을 만들어보겠습니다.

Google Firebase에서 Firebase project 생성

먼저 웹사이트를 통해 Google Firebase project를 만들고 필요한 세팅을 진행해야합니다.

 

Firebase homepage로 이동해서 상단 Menu bar의 오른쪽에 "Go to console" 메뉴를 클릭합니다.

Firebase | Google's Mobile and Web App Development Platform

 

Google ID로 로그인 후, 새로운 Firebase project를 생성합니다.

Project name을 입력합니다. 꼭 flutter project명을 따라갈 필요는 없습니다.

Firebase web 내에서 Gemini를 통해 지원을 받을지 묻는 창입니다. 저는 그냥 Enable했습니다만, Disable 하셔도 무관합니다.

Firebase 사용 데이타에 대한 분석을 위한 Google Analytics 툴을 사용할지에 대한 문의합니다. 저는 Enable을 선택했으나 Disable해도 무관합니다.

Google Analytics를 Enable 했을 경우 보이는 창으로 본인의 Google ID를 선택합니다.

Firebase Project가 잘 생성되었습니다.

좌측 Menu bar에서 "Build"를 선택하면 사용할 수 있는 Firebase service들이 보입니다.

 

여러 종류의 Firebase 서비스들 중에 우리는 Authentification, Realtime Database를 활용하겠습니다.

 

실제 Database는 Realtime Database를 사용하게 될 것이고, 아무나 App database에 접근하게 할 수 없으니, Authentification을 함께 활용합니다.

 

먼저 Authentification을 활성화합니다.

[ Authentification ]

좌측 메뉴바에서 Authentication을 클릭합니다.

Main 창에서 "Get started"를 클릭합니다.

다양한 Authentification 방법이 보입니다. 우리는 Email 로그인과 Google 로그인을 활용해보겠습니다.

 

먼저 Email/Password 버튼을 클릭합니다.

Enable 버튼을 활성화하고, Save 버튼을 누르면 끝입니다.

 

이제 Google Authentification을 활성화합니다.

먼저 Add new provider를 클릭해서 다시 Provider 선택창을 띄웁니다.

Google을 선택합니다.

Enable, Save 합니다.

이제 Sign-in을 허락할 사용자를 추가합니다.

sign-in을 허가할 email/password를 입력해줍니다.

사용자가 추가되었습니다. 필요하다면 추가로 사용자를 입력할 수 있습니다.

이제 Google Firebase 웹페이지에서 설정할 부분은 대략 마무리되었습니다. 추가로 Google Sign-in을 위한 암호 Key 입력이 있습니다만, 먼저 App 생성 후 Key를 입력해야하므로 App 세팅을 마친 후 진행하겠습니다.

 

Firebase CLI 설치

Cloud에 있는 Firebase를 Local PC에서 접근하기위해서 Firebase CLI를 설치합니다.

npm(Node Package Manager)를 이용해 설치할 것이고 먼저 Node.js 설치가 필요합니다.

Node.js — Download Node.js®

Node.js — Download Node.js®

 

설치후 PowerShell을 열어 하기와 같이 입력합니다.

npm install -g firebase-tools

 

만약 처음 npm pakage를 설치 후 PowerShell에서 위 명령어를 실행하면, 아래와 같이 오류가 발생할 수 있습니다.

PS C:\~~~~> npm install -g firebase-tools npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + npm install -g firebase-tools + ~~~     + CategoryInfo          : 보안 오류: (:) [], PSSecurityException     + FullyQualifiedErrorId : UnauthorizedAccess

 

이런 경우에는 아래 링크와 같이 PowerShell의 실행 정책을 변경하면 오류없이 실행할 수 있습니다.

2025.08.16 - [PC팁] - Windows PowerShell script file(*.ps1) 실행

Windows PowerShell script file(*.ps1) 실행

 

정상적으로 실행된 모습은 아래와 같습니다.

PS C:\Users\~~~~> npm install -g firebase-tools npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead added 715 packages in 9s 82 packages are looking for funding   run `npm fund` for details PS C:\Users\~~~~>

 

VS code 에서 추가 작업

이제 firebase database를 활용하고자하는 app의 source code를 vs code에서 열고,

( 만약 기존 App이 없다면, 새로운 Flutter Project를 생성하고 진행하면 됩니다.)

terminal 창에서 firebase에 login 하고, 필요한 FlutterFire CLI를 설치합니다.

firebase login

dart pub global activate flutterfire_cli

PS C:\Programming\flutterWorks\~~~~> firebase login i  The Firebase CLI’s MCP server feature can optionally make use of Gemini in Firebase. Learn more about Gemini in Firebase and how it uses your data: https://firebase.google.com/docs/gemini-in-firebase#how-gemini-in-firebase-uses-your-data ✔ Enable Gemini in Firebase features? No i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you. ✔ Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? No 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=580793954&redirect_uri=http%3A%2F%2Flocalhost%3A9005 Waiting for authentication... +  Success! Logged in as ~~~~~@~~~~~.com PS C:\Programming\flutterWorks\~~~~> dart pub global activate flutterfire_cli Package flutterfire_cli is currently active at version 1.3.1. Downloading packages... .    dart_console 1.2.0 (4.1.2 available)   intl 0.18.1 (0.20.2 available) > petitparser 7.0.1 (was 7.0.0) > xml 6.6.1 (was 6.6.0) Building package executables... (6.7s) Built flutterfire_cli:flutterfire. Installed executable flutterfire. Activated flutterfire_cli 1.3.1.

 

이제 flutterfire CLI를 이용해서 Firebase 세팅을 시작합니다.

flutterfire configure

① Select a Firebase project to configure your Flutter application with >

    Firebase 웹사이트에서 만들어둔 Project를 선택합니다.

 

② Which platforms should your configuration support (use arrow keys & space to select)?  >

    사용할 플랫폼을 선택합니다. android, ios, macoc, web, windows 중 필요한 플랫폼을 다중 선택하게되어있습니다.

    android, web, windows를 선택했습니다.

 

이제 필요한 Firebase package 들을 설치합니다. 

flutter pub add firebase_core firebase_auth firebase_ui_auth google_sign_in firebase_ui_oauth_google

 

E-mail 로그인은 관계없습니다만, Google oauth sign-in을 활용할 경우에는 Client ID가 필요합니다.

Android, Windows/Webapp 용 Client ID를 생성하는 방법이 다르니 아래를 참조해서 Copy해두십시요.

 

① Android

위 설치 과정을 잘 따라오셨다면, Flutter Project folder내의 android/app 폴더 안에 google-services.json이라는 파일 안에 client id가 존재합니다. 해당 ID를 실제 코드에 넣어야하니 따로 copy 해 두세요.

② Web app / Desktop app

Web client용 Client ID는 자동 생성됩니다.

https://console.cloud.google.com/ 사이트로 진입해서 로그인 후,

APIs & Services → Credentials 클릭하면,

중간쯤에 OAuto 2.0 Client IDs 라는 리스트가 보이고,

그 중 Web client (auto created by Google Service) 리스트의 Client ID 부분에 복사 버튼을 누르시면 됩니다. 

 

 

자, 이제 2개의 Client ID는 메모장 등에 저장해두시고, code 수정을 시작해봅시다.

 

너무 길어져서 다음 포스팅에 계속하겠습니다.