React Native에서 FCM과 OneSignal로 푸시 알림 구현하기

React Native에서 FCM과 OneSignal로 푸시 알림을 구현하는 방법을 알아보겠습니다. Firebase Cloud Messaging(FCM)과 OneSignal을 사용해 푸시 알림을 설정하고, 사용자에게 중요한 알림을 전달하는 법을 소개합니다.

 

푸시 알림의 중요성

React Native로 앱을 개발할 때 푸시 알림은 사용자와의 소통을 유지하는 중요한 방법입니다. 푸시 알림은 사용자에게 새로운 정보나 이벤트, 알림을 제공함으로써 사용자 참여도를 높이고, 앱의 유지율을 높이는 데 중요한 역할을 합니다. 특히, FCM과 OneSignal은 React Native에서 손쉽게 푸시 알림 기능을 구현할 수 있는 인기 있는 도구들입니다.

React Native 앱에서 푸시 알림의 역할

푸시 알림은 앱이 백그라운드에 있을 때나 사용자가 앱을 사용하지 않을 때도 중요한 정보를 전달할 수 있는 효과적인 수단입니다. 예를 들어, 쇼핑 앱에서는 할인 정보를, 뉴스 앱에서는 속보를 푸시 알림을 통해 사용자에게 즉시 전달할 수 있습니다. 이러한 푸시 알림은 사용자에게 실시간으로 가치를 제공하여 앱 사용 빈도를 높이는 데 큰 역할을 합니다.

Firebase Cloud Messaging(FCM)과 OneSignal의 차이점

Firebase Cloud Messaging(FCM)은 Google에서 제공하는 무료 푸시 알림 서비스로, 간단하게 Firebase 프로젝트와 연동하여 푸시 알림을 보낼 수 있습니다. 반면 OneSignal은 다소 쉬운 설정 과정과 추가적인 마케팅 도구가 포함된 푸시 알림 서비스로, 손쉽게 다양한 기능을 사용할 수 있다는 점에서 FCM과 차별화됩니다.

 

FCM을 사용한 푸시 알림 설정

Firebase 프로젝트 생성 및 설정

FCM을 사용하려면 우선 Firebase 콘솔에 접속하여 프로젝트를 생성해야 합니다. Firebase 프로젝트를 생성한 후에는 Android와 iOS 앱을 등록하고, 해당 플랫폼에 맞는 설정 파일을 프로젝트에 추가해야 합니다. Android의 경우 google-services.json 파일을, iOS의 경우 GoogleService-Info.plist 파일을 프로젝트에 추가해야 합니다.

React Native에 FCM 연동하기

Firebase SDK를 React Native에 연동하려면 @react-native-firebase/app과 @react-native-firebase/messaging 패키지를 설치해야 합니다.

npm install @react-native-firebase/app @react-native-firebase/messaging

 

설치 후 Android와 iOS 설정 파일을 업데이트하고, Firebase 초기화를 위한 설정을 추가합니다. 이후 onMessage를 사용하여 앱이 포그라운드일 때 푸시 알림을 처리할 수 있습니다.

import messaging from '@react-native-firebase/messaging';

useEffect(() => {
	const unsubscribe = messaging().onMessage(async remoteMessage => {
		Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
	});

	return unsubscribe;
}, []);

 

알림 수신 테스트

Firebase 콘솔에서 직접 알림을 전송하거나 서버 측에서 메시지를 전송하여 알림이 정상적으로 수신되는지 테스트할 수 있습니다. 이를 통해 FCM이 올바르게 설정되었는지 확인할 수 있습니다.

 

OneSignal을 사용한 푸시 알림 설정

OneSignal 계정 생성 및 설정

OneSignal을 사용하려면 OneSignal 웹사이트에서 계정을 생성한 후 새로운 앱을 추가해야 합니다. OneSignal에서 제공하는 SDK를 사용해 React Native 프로젝트에 통합할 수 있습니다. react-native-onesignal 패키지를 설치하여 프로젝트와 연동합니다.

npm install react-native-onesignal

 

OneSignal 콘솔에서 앱 설정을 완료한 후, SDK 초기화 키를 사용하여 앱과 연동합니다.

import OneSignal from 'react-native-onesignal';

useEffect(() => {
	OneSignal.setAppId('YOUR_ONESIGNAL_APP_ID');
}, []);

 

React Native에 OneSignal 연동하기

OneSignal 연동 후에는 사용자가 앱에 접속할 때 자동으로 푸시 알림 토큰이 발급되며, 이 토큰을 통해 특정 사용자에게 알림을 보낼 수 있습니다. OneSignal의 대시보드를 통해 직접 알림을 전송하거나, API를 사용해 알림을 자동화할 수 있습니다.

알림 전송 및 테스트

OneSignal의 대시보드를 이용하여 특정 사용자 또는 사용자 그룹에게 푸시 알림을 전송할 수 있습니다. 실제 기기에서 알림이 제대로 수신되는지 테스트하면서 앱의 푸시 알림 기능이 원활하게 작동하는지 확인합니다.

 

푸시 알림 구현 시 유의사항

사용자 권한 요청 및 설정

푸시 알림을 보내기 전에 사용자의 명시적인 동의를 얻어야 합니다. 사용자가 알림 수신을 허용하지 않으면 알림을 받을 수 없기 때문에, 앱 시작 시 알림 권한을 요청하는 코드를 작성해야 합니다.

// FCM 예시 코드
import messaging from '@react-native-firebase/messaging';

useEffect(() => {
	const requestPermission = async () => {
		const authStatus = await messaging().requestPermission();
		const enabled =
			authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
			authStatus === messaging.AuthorizationStatus.PROVISIONAL;
            
		if (enabled) {
			console.log('FCM Authorization status:', authStatus);
		}
	};

	requestPermission();
}, []);

// OneSignal 예시 코드
import OneSignal from 'react-native-onesignal';

useEffect(() => {
	OneSignal.promptForPushNotificationsWithUserResponse(response => {
		console.log('OneSignal permission response:', response);
	});
}, []);

 

FCM과 OneSignal 선택 가이드

각 툴의 장단점 비교

FCM은 Google에서 제공하기 때문에 Android와의 높은 호환성과 안정성을 자랑합니다. 또한 무료로 제공되며 다양한 기능을 갖추고 있지만, 초기 설정이 다소 복잡할 수 있습니다. 반면, OneSignal은 쉬운 설정과 함께 마케팅 도구가 포함되어 있어 비개발자도 손쉽게 사용할 수 있지만, 일부 기능은 유료로 제공됩니다.

프로젝트에 맞는 푸시 알림 도구 선택하기

만약 빠른 설정과 마케팅 툴의 통합을 원한다면 OneSignal이 좋은 선택일 수 있습니다. 반면에 무료이면서도 안정적인 서비스를 원한다면 FCM을 사용하는 것이 좋습니다. 프로젝트의 요구사항에 따라 적절한 도구를 선택하는 것이 중요합니다.

 

마무리하며

React Native로 푸시 알림을 구현하는 과정에서 Firebase Cloud Messaging(FCM)과 OneSignal은 각기 다른 장점을 가진 도구입니다. 두 가지 모두 사용자와의 소통을 강화하는 중요한 역할을 할 수 있으며, 이번 글에서는 두 가지 도구를 각각 설정하고 사용하는 방법을 다루었습니다. 프로젝트에 맞는 푸시 알림 솔루션을 선택하고, 이를 통해 사용자 경험을 더욱 향상시키는데 도움이 되길 바랍니다.