인 앱 알림 구현 과정

실시간 푸시 알림 시스템 구현

프로젝트 개요

이 프로젝트에서는 Flutter 애플리케이션에 실시간 푸시 알림 시스템을 구현했습니다. 사용자는 앱 내에서 푸시 알림을 활성화/비활성화할 수 있으며, 설정 변경 시 즉각적인 피드백을 받을 수 있습니다.

주요 기능

1. 푸시 알림 토글 UI
2. 실시간 상태 관리
3. 로컬 알림 시스템
4. 원격 푸시 알림 준비 (FCM 통합 준비)

기술 스택

• Flutter
• Riverpod (상태 관리)
• flutter_local_notifications (로컬 알림)
• Firebase Cloud Messaging (향후 확장을 위한 준비)

구현 내용

1. 푸시 알림 토글 UI (PushNotificationToggle)

class PushNotificationToggle extends ConsumerStatefulWidget {
  @override
  _PushNotificationToggleState createState() => _PushNotificationToggleState();
}

class _PushNotificationToggleState extends ConsumerState<PushNotificationToggle> {
  @override
  Widget build(BuildContext context) {
    final pushNotificationEnabled = ref.watch(pushNotificationEnabledProvider);
    
    return ListTile(
      title: const Text('푸쉬 알림 설정'),
      trailing: Switch(
        onChanged: (bool value) {
          ref.read(pushNotificationEnabledProvider.notifier).state = value;
          ref.read(pushNotificationServiceProvider).setNotificationEnabled(value);
          ref.read(localNotificationServiceProvider).showNotification(
            '알림 설정',
            '알림 설정이 변경되었습니다.',
          );
        },
        value: pushNotificationEnabled,
      ),
    );
  }
}

이 위젯은 사용자에게 푸시 알림을 켜고 끌 수 있는 직관적인 인터페이스를 제공합니다.

2. 상태 관리 (push_notification_provider.dart)

import 'package:flutter_riverpod/flutter_riverpod.dart';

final pushNotificationEnabledProvider = StateProvider<bool>((ref) => false);

class PushNotificationService {
  void setNotificationEnabled(bool value) {
    print('Push notification ${value ? 'enabled' : 'disabled'}');
    // FCM 통합 시 여기에 실제 로직 구현
  }
}

final pushNotificationServiceProvider = Provider((ref) => PushNotificationService());

Riverpod을 사용하여 앱 전체에서 일관된 상태 관리를 구현했습니다.

3. 로컬 알림 서비스 (local_notification_service.dart)

 

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class LocalNotificationService {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  Future<void> initialize() async {
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    final InitializationSettings initializationSettings =
        InitializationSettings(android: initializationSettingsAndroid);
    await flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  Future<void> showNotification(String title, String body) async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
      'your_channel_id',
      'your_channel_name',
      importance: Importance.max,
      priority: Priority.high,
    );
    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      title,
      body,
      platformChannelSpecifics,
    );
  }
}

이 서비스는 로컬 알림을 초기화하고 표시하는 기능을 제공합니다.

4. 설정 화면 통합 (setting_view.dart)

class SettingView extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('설정')),
      body: ListView(
        children: [
          // 다른 설정 항목들...
          const PushNotificationToggle(),
          // 추가 설정 항목들...
        ],
      ),
    );
  }
}

푸시 알림 토글을 설정 화면에 통합하여 사용자가 쉽게 접근할 수 있도록 했습니다.

결과 및 성과

1. 사용자 친화적인 알림 설정 인터페이스 구현
2. 실시간 상태 관리를 통한 즉각적인 설정 반영
3. 로컬 알림을 통한 사용자 경험 향상
4. 확장 가능한 구조로 향후 FCM 통합 준비 완료

향후 개선 사항

1. Firebase Cloud Messaging (FCM) 통합으로 실제 원격 푸시 알림 구현
2. 알림 설정의 영구 저장 기능 추가 (예: SharedPreferences 사용)
3. 다양한 알림 유형 및 개인화 옵션 제공
4. iOS 지원 추가 및 플랫폼별 최적화

기술적 도전 및 극복

1. Riverpod를 활용한 효율적인 상태 관리 구현
2. Flutter Local Notifications 플러그인의 적절한 활용
3. 사용자 경험을 고려한 UI/UX 설계
4. 확장성을 고려한 모듈화된 코드 구조 설계

이 프로젝트를 통해 실시간 알림 시스템의 구현 경험을 쌓았으며, 사용자 중심의 기능 개발과 확장 가능한 아키텍처 설계 능력을 향상시켰습니다.