플러터 강좌: 16.2 로그인 앱과 파이어베이스 프로젝트 연동하기

이번 강좌에서는 플러터(Flutter)를 사용하여 로그인 앱을 만들고, 이를 구글의 파이어베이스(Firebase) 백엔드와 연동하는 방법을 알아보겠습니다. 강좌가 끝난 후에는 유저가 이메일과 비밀번호로 로그인할 수 있는 기본적인 앱을 만들 수 있을 것입니다. 파이어베이스는 애플리케이션의 인증, 데이터 저장소, 호스팅 등 다양한 기능을 제공하는 도구입니다. 많은 개발자들이 이 서비스를 이용하여 앱을 쉽고 빠르게 개발하고 있습니다.

1. 준비사항

먼저, 플러터와 파이어베이스를 사용할 준비를 해야 합니다. 아래의 사항들을 확인하세요:

  • 프로그래밍 환경: Flutter SDK가 설치되어 있어야 합니다.
  • 파이어베이스 계정을 만들어야 합니다.
  • IDE(예: Visual Studio Code 또는 Android Studio)를 준비하세요.
  • Firebase Authentication을 사용하기 위해 Firebase 콘솔에서 프로젝트를 설정해야 합니다.

2. 플러터 프로젝트 생성

먼저, 새로운 플러터 프로젝트를 생성합니다. 터미널에서 다음 명령어를 입력합니다:

flutter create login_app

이제 생성된 디렉토리로 이동하고 프로젝트를 열어봅시다:

cd login_app

3. Firebase 설정하기

3.1 Firebase Console에서 새 프로젝트 생성

1. Firebase 콘솔에 로그인합니다. Firebase Console

2. “프로젝트 추가”를 클릭하여 새 프로젝트를 생성합니다.

3. 프로젝트의 이름과 기본 설정을 완료합니다.

3.2 Firebase Authentication 활성화

1. 새로 생성한 프로젝트의 대시보드에서 “인증” 메뉴를 선택합니다.

2. “로그인 방법” 탭으로 이동하고 “이메일/비밀번호” 로그인을 활성화합니다.

3.3 Android 앱 등록

1. 대시보드에서 Android 아이콘을 클릭하여 Android 앱을 등록합니다.

2. 패키지 이름을 입력하고, SHA-1 키는 테스트용으로 입력하지 않아도 됩니다.

3. “등록” 버튼을 클릭합니다.

4. google-services.json 파일을 다운로드하여 android/app 디렉토리에 추가합니다.

3.4 Firebase CLI 설치하기

Firebase의 CLI 도구를 사용하면 Firebase 관련 작업을 간편하게 수행할 수 있습니다. 아래 명령어로 Firebase CLI를 설치합니다:

npm install -g firebase-tools

4. Flutter와 Firebase 연동하기

4.1 pubspec.yaml 파일 수정

Flutter 프로젝트의 pubspec.yaml 파일을 열어서 아래 패키지를 추가합니다:


dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_auth: latest_version

패키지 추가 후, 아래 명령어로 패키지를 설치합니다:

flutter pub get

4.2 Firebase 초기화

main.dart 파일에서 Firebase를 초기화합니다. Firebase 앱을 초기화하려면 아래의 코드를 추가합니다:


import 'package:firebase_core/firebase_core.dart';

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

5. 로그인 UI 구현하기

이제 로그인 화면을 구현할 차례입니다. 기본적인 로그인 화면을 만들기 위해 StatefulWidget을 사용합니다.


import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  String? _errorMessage;

  Future _login() async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );
      // 로그인 성공 후 처리
    } on FirebaseAuthException catch (e) {
      setState(() {
        _errorMessage = e.message;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('로그인')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: '이메일'),
            ),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(labelText: '비밀번호'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: Text('로그인'),
            ),
            if (_errorMessage != null)
              Text(
                _errorMessage!,
                style: TextStyle(color: Colors.red),
              ),
          ],
        ),
      ),
    );
  }
}

6. 앱 테스트하기

위의 코드를 완료한 후, 앱을 실행해 보세요. Flutter가 제공하는 Android Emulator 또는 실물 기기를 사용할 수 있습니다. 터미널에서 아래 명령어를 입력하여 앱을 실행합니다:

flutter run

7. 추가 기능

로그인 기능 외에도 다른 사용자 편의성을 위해 아래와 같은 기능들을 추가할 수 있습니다:

  • 회원가입 기능
  • 비밀번호 재설정 기능
  • 소셜 로그인 기능(구글, 페이스북 등)

8. 결론

이번 강좌에서는 Flutter를 사용하여 Firebase와 연동된 로그인 앱을 만드는 방법을 알아보았습니다. Firebase는 유용한 백엔드 솔루션으로, 인증 외에도 데이터베이스, 스토리지 등 다양한 기능을 제공하므로 보다 다양한 기능을 구현할 수 있습니다. 여러분이 만든 로그인 앱이 멋지게 작동하기를 바랍니다!

9. 참고 자료