React Native Expo 프로젝트에서 푸시알림을 구현하는 과정을 남기고, 나중에 다시 확인하며 공부 할 수 있도록 기록하고자 합니다.
저는 사용자 경험을 고려하여 회원가입 후 첫 로그인 시 자연스럽게 푸시알림 권한을 요청하는 방법을 구상했습니다.
그런데 왜 푸시알림이 필요할까요?
현재 진행중인 저의 농구 매칭 플랫폼에서 푸시알림은 매우 중요한 기능입니다.
매치가 확정되거나 변경되었을 때, 또는 중요한 공지사항이 있을 때 사용자에게 즉시 알림을 전달할 수 있어야 합니다.
하지만 푸시알림 권한을 요청하는 시점과 방법이 적절하지 않으면 사용자들이 거부할 가능성이 높아집니다.
그래서 우리는 사용자가 서비스의 가치를 이해하고 난 후, 자연스럽게 푸시알림 권한을 요청하는 방식을 선택했습니다.
구현 과정 살펴보기
1. 푸시알림 권한 요청 모달 만들기
먼저 사용자에게 표시할 모달을 만들었습니다.
단순히 시스템 권한을 요청하는 것이 아니라, 왜 푸시알림이 필요한지 친절하게 설명하는 것이 중요했습니다.
여기서는 세 가지를 중점적으로 고려했습니다:
- 명확한 메시지 전달: "매치 확정, 변경 등 중요한 알림"을 강조
- 선택의 자유: "나중에 하기" 옵션 제공
- 안심 포인트: "나중에 설정에서 변경할 수 있습니다" 문구 추가
2. 가이드 페이지에 자연스럽게 통합하기
회원가입 후 처음 방문하는 가이드 페이지에서 푸시알림 권한을 요청하도록 구현했습니다.
AsyncStorage를 활용해 최초 1회만 표시되도록 처리했습니다.
useEffect(() => {
checkPushPermissionShown();
}, []);
const checkPushPermissionShown = async () => {
try {
const hasShown = await AsyncStorage.getItem("pushPermissionShown");
if (!hasShown) {
setShowPermissionModal(true);
}
} catch (error) {
console.error("Failed to check push permission status:", error);
}
};특히 신경 쓴 부분은:
- 타이밍: 회원가입 축하 메시지 직후 표시
- 상태 관리: AsyncStorage로 권한 요청 이력 관리
- 자연스러운 플로우: 거부해도 가이드 페이지로 자연스럽게 전환
3. 실제 푸시알림 권한 요청하기
expo-notifications를 사용해 실제 시스템 권한을 요청하는 부분을 구현했습니다.
const requestPermission = async () => {
try {
const { status } = await Notifications.requestPermissionsAsync();
if (status === "granted") {
const token = (await Notifications.getExpoPushTokenAsync()).data;
// 추후 서버에 토큰 저장 예정
}
} catch (error) {
console.error("Failed to get push token:", error);
}
};앞으로 추가할 기능들
현재는 기본적인 권한 요청 UI만 구현된 상태입니다.
앞으로 추가할 기능들은:
-
서버 연동
- FCM 토큰을 서버에 저장하고 관리하는 기능
- 실제 푸시알림을 발송하는 API 연동
-
설정 페이지 보완
- 알림 설정을 변경할 수 있는 UI 구현
- 알림 종류별로 세부 설정 가능하도록 구현
-
테스트 및 안정화
- Expo 프로젝트 ID 설정
- 실제 디바이스에서 테스트
- 다양한 상황에서의 에러 처리
마치며
푸시알림은 사용자 경험에 매우 중요한 영향을 미치는 기능입니다.
단순히 기술적인 구현에만 초점을 맞추는 것이 아니라, 사용자가 왜 이 기능이 필요한지 이해하고 자발적으로 동의할 수 있도록 하는 것이 중요합니다.
이번 구현에서는 특히 그 부분에 초점을 맞춰보았습니다.
다음 포스팅에서는 실제 푸시알림을 발송하고 관리하는 부분에 대해 더 자세히 다뤄보도록 하겠습니다.
