플러터 강좌: 16.4 회원 등록 페이지 생성 및 사인 업 기능 구현

안녕하세요! 오늘은 플러터를 사용하여 회원 등록 페이지를 생성하고 사인 업 기능을 구현하는 방법에 대해 알아보겠습니다. 모바일 애플리케이션에서 사용자 인증은 매우 중요한 요소이며, 회원 등록 기능은 그 시작점입니다. 이번 강좌에서 우리는 유저의 이메일, 비밀번호, 그리고 추가 정보를 입력받는 폼을 생성하고, 이를 Firebase Authentication과 연동하여 실제로 유효한 계정을 생성하는 방법을 배워보겠습니다.

1. 준비 사항

먼저, 학습을 위해 다음과 같은 준비가 필요합니다:

플러터 SDK가 설치되어 있어야 합니다. 공식 웹사이트에서 설치 방법을 참고하세요.
유관 프로젝트를 위한 Firebase 계정이 필요합니다. Firebase 콘솔에 가입 후 프로젝트를 생성하세요.
안드로이드 스튜디오 혹은 다른 코드 에디터가 필요합니다.
플러터와 관련된 패키지들을 설치해야 합니다. Firebase와 HTTP 요청을 위해 필요한 플러터 디펜던시를 추가합니다.

2. Firebase 프로젝트 설정

Firebase에 회원 등록 기능을 사용하기 위해서는 Firebase 프로젝트를 설정해야 합니다. 아래 단계에 따라 설정 해보세요.

Firebase 콘솔에 로그인하여 새 프로젝트를 생성합니다.
‘Authentication’ 메뉴로 이동하여 ‘로그인 방법’에서 이메일/비밀번호 옵션을 활성화합니다.
‘앱 등록’을 통해 Android/iOS 앱을 등록하고 필요한 구글 서비스 설정 파일을 다운로드합니다.

3. Flutter 프로젝트 생성

새로운 플러터 프로젝트를 생성하려면, 터미널에서 아래 명령어를 입력합니다:

flutter create sign_up_app

프로젝트 폴더로 이동한 후 아래 명령어를 실행하여 필요한 패키지를 설치합니다:

cd sign_up_app
flutter pub add firebase_core
flutter pub add firebase_auth

4. Firebase 초기화

이제 작성한 플러터 앱에서 Firebase를 사용할 수 있도록 초기화해야 합니다. lib/main.dart 파일을 열고 아래와 같은 코드를 추가합니다:

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

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: SignUpPage(), // 회원 등록 페이지를 가리키도록 설정
        );
    }
}

5. 회원 등록 페이지 UI 구성

회원 등록 페이지는 사용자가 이메일과 비밀번호를 입력할 수 있는 폼으로 구성됩니다. 다음 코드를 추가하여 회원 등록 페이지 UI를 구성합니다.

class SignUpPage extends StatefulWidget {
    @override
    _SignUpPageState createState() => _SignUpPageState();
}

class _SignUpPageState extends State {
    final _emailController = TextEditingController();
    final _passwordController = TextEditingController();

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('회원 등록'),
            ),
            body: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                    children: [
                        TextField(
                            controller: _emailController,
                            decoration: InputDecoration(labelText: '이메일'),
                        ),
                        TextField(
                            controller: _passwordController,
                            decoration: InputDecoration(labelText: '비밀번호'),
                            obscureText: true,
                        ),
                        SizedBox(height: 20),
                        ElevatedButton(
                            onPressed: _signUp,
                            child: Text('사인 업'),
                        ),
                    ],
                ),
            ),
        );
    }

    void _signUp() {
        // 이곳에 사인 업 로직을 구현합니다.
    }
}

6. 회원 등록 기능 구현

사용자가 입력한 이메일과 비밀번호를 Firebase Authentication을 통해 처리하여 실제로 계정을 생성하는 로직을 구현합니다. 아래 코드를 _signUp 메소드에 추가합니다:

void _signUp() async {
    final email = _emailController.text;
    final password = _passwordController.text;
    
    try {
        UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
            email: email,
            password: password,
        );
        // 회원 등록 성공 후 추가 작업을 할 수 있습니다.
        print("회원 등록 성공: ${userCredential.user.uid}");
    } catch (e) {
        print("회원 등록 실패: $e");
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('회원 등록 실패')));
    }
}

7. 에러 처리 및 유효성 검사

회원 등록 기능에는 사용자가 잘못된 정보를 입력할 경우를 대비해 에러 처리가 필요합니다. 입력된 이메일 형식이 올바른지, 비밀번호의 최소 길이 등을 체크하여 보다 안정적인 기능을 구현할 수 있습니다.

void _signUp() async {
    final email = _emailController.text;
    final password = _passwordController.text;  
    
    if (!_isEmailValid(email) || !_isPasswordValid(password)) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('잘못된 입력입니다')));
        return;
    }

    try {
        UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
            email: email,
            password: password,
        );
        print("회원 등록 성공: ${userCredential.user.uid}");
        // 다음 페이지로 이동하거나 다른 작업을 수행합니다.
    } catch (e) {
        print("회원 등록 실패: $e");
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('회원 등록 실패: ${e.toString()}')));
    }
}

bool _isEmailValid(String email) {
    return RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$').hasMatch(email);
}

bool _isPasswordValid(String password) {
    return password.length >= 6;
}

8. 사용자 피드백

회원 등록 기능을 완료한 후, 사용자에게 성공 또는 실패 메시지를 줄 수 있는 방법을 살펴보면 좋습니다. 위의 코드에서 사용한 SnackBar를 사용해 간단한 피드백을 제공할 수 있습니다.

9. 마무리 및 다음 단계

이 강좌를 통해 플러터를 사용하여 간단한 회원 등록 페이지를 만들고 Firebase Authentication을 통해 사용자 계정을 생성하는 방법을 배웠습니다. 이제 여러분의 애플리케이션에 이러한 기능을 포함시켜 보다 많은 사용자들이 접근할 수 있게 할 수 있습니다.

다음 단계로는 회원 로그인 기능 구현이나 소셜 로그인 통합과 같은 더 나아간 기능들을 학습해보시면 좋습니다. 감사합니다!