[ React Native | Nextjs | WebView | IOS ] 웹 프로젝트를 앱처럼! RN으로 감싼 Next.js, 앱스토어 출시기

프론트

[ React Native | Nextjs | WebView | IOS ] 웹 프로젝트를 앱처럼! RN으로 감싼 Next.js, 앱스토어 출시기

Supersett 2025. 4. 13. 00:34

📘 웹 레포지토리 : https://github.com/depromeet/16th-team3-FE

📘 RN 레포지토리 : https://github.com/depromeet/16th-team3-rn

📌 목차

서비스 소개
React Native를 선택한 이유
React Native CLI VS Expo 뭐를 선택해야 하나요?
주요 구현 기능( 푸쉬 알림, 카메라 촬영 )
앱스토어(IOS) 심사 준비,리젝 경험 공유
마무리

1. SPURT 출시

⏰ 혹시 아직도 과제를 미루며 "지금 말고 조금 이따가..." 하고 있나요?

계속 미루게 되는 할 일, 막상 시작하면 또 금방 끝나는 거… 우리 모두 알죠 🥲

그래서 저희는 할 일을 미루다가

늘 마감 직전 벼락치기하는 사람들을 위해

SPURT(스퍼트)라는 시간관리 앱을 만들게 되었어요!

📌 주요 기능

✅ 할 일 입력 → 여유 시간 자동 계산

✅ 시작 알림 → 진짜 해야 할 타이밍에 딱!

✅ 집중 타이머와 몰입에 최적화된 화면

📱 앱스토어 다운로드: https://apps.apple.com/kr/app/spurt/id6743025568

2. React Native를 선택한 이유

✅ 왜 React Native를 선택했을까?

이번 프로젝트의 가장 큰 목표는 실제 사용자에게 서비스를 신뢰감 있게 전달하는 것이었습니다.

기능적으로는 웹앱(PWA)도 가능했지만,

앱스토어에 올라간 앱이 주는 인식 자체가 다르다고 판단했어요.

링크를 보내는 것보다는,

“앱스토어에 있는 정식 앱이야”
라는 신뢰감이 있는 인상을 주고자 했습니다!

그래서 처음부터 앱스토어에 등록할 수 있는 형태로 개발 방향을 잡았고,

그 선택지로 React Native를 택했습니다.

🔧 React Native를 선택한 기술적 이유

서비스는 카메라 촬영, 푸시 알림 수신 후 진동 동작, 앱이 백그라운드이거나 종료된 상태에서도 알림 처리가 필요한 구조였습니다.

PWA도 iOS에서 푸시 알림을 지원하지만,

앱스토어 등록 자체가 불가능하고
시스템 자원 접근에 있어 제약이 있는 부분들이 존재합니다. (참고 : https://www.tigren.com/blog/progressive-web-app-limitations/)

반면, React Native는:

네이티브 API에 접근할 수 있어 카메라, 백그라운드 작업 등에서 자유도가 높고
푸시 알림도 안정적으로 처리할 수 있습니다.
게다가 기존에 React 경험이 있다면 진입장벽이 낮아, 빠르게 개발에 들어갈 수 있는 장점도 있었어요.👍🏻

3. React Native CLI vs Expo 뭐를 선택해야 하나요?

React Native로 앱을 만들 때 가장 먼저 마주치는 질문은 이겁니다:

“React Native CLI로 갈까, 아니면 Expo로 시작할까?”

React Native 공식 문서에서는 다음과 같은 안내를 하고 있어요:

“Yes. You can use React Native without a framework. However, if you’re building a new app with React Native, we recommend using a framework.”
React Native 공식 문서 – Get Started

공식적으로도 Expo 같은 프레임워크 사용을 권장하고 있다는 점에서 자연스럽게 Expo를 우선 고려하게 됩니다. (~~저도 Expo로 시작을 했습니다ㅎㅎ 하지만..!~~)

🛠️ 개발 환경 및 설정

React Native CLI는 Xcode, Android Studio 등 네이티브 개발 환경을 직접 설정해야 합니다.
- 설정 과정이 다소 복잡하지만, 네이티브 코드에 대한 제어권이 크고 확장성도 높습니다.
Expo는 별도의 네이티브 설정 없이도 빠르게 앱을 시작할 수 있는 환경을 제공합니다.
- 특히 카메라, 푸시 알림, 위치 등 자주 쓰는 기능을 내장 API로 간편하게 제공하는 것이 큰 장점입니다.

💬 우리의 선택: React Native CLI

푸시 알림 기능을 구현하기 위해 react-native-firebase/messaging 라이브러리를 사용했습니다.

Expo에서도 백그라운드 및 종료 상태에서의 푸시 알림 수신은 가능합니다.

하지만 Expo의 푸시 알림 시스템은 Expo 서버를 경유해서 알림을 보내는 구조입니다.

이 방식은 개발이 편리하다는 장점이 있지만,

서버팀은 푸시 알림 전송 흐름을 자체적으로 구성하고 직접 제어하길 원했습니다.

즉, Expo의 간소화된 푸시 시스템이 아닌,

Firebase Cloud Messaging(FCM)과 직접 통신하며

토큰 발급, 메시지 구성, 전송 타이밍 등을 우리 시스템에 맞게 구현하고자 했습니다.

이런 이유로, Expo와 호환되지 않는 react-native-firebase/messaging를 도입하게 되었고,

결과적으로 프로젝트 전체를 React Native CLI 기반으로 구성하게 되었습니다.

4. 주요 구현 기능 (푸시알림, 카메라 촬영)

이번 프로젝트에서 RN으로 구현해야 할 핵심기능은 크게 세 가지였습니다:

푸시알림 수신 시, 진동 또는 사운드로 사용자에게 인지
알림 클릭 시, 상황에 맞는 화면으로 이동
사진 촬영 및 결과 이미지 확인 기능

이 기능을 구현하기 위해 사용한 주요 라이브러리는 아래와 같습니다:

📬 푸시알림: @react-native-firebase/messaging
📷 카메라 촬영: react-native-vision-camera

📬 푸시알림 구현

기획 요구 사항:

알림 수신 시, 진동 또는 사운드로 사용자에게 알림 도달을 인지시켜야 했고
알림을 클릭했을 때는 해당 알림 타입에 따라 적절한 화면으로 라우팅해야 했습니다.

이슈가 하나 있었는데 간단하게 공유 드리고 가겠습니다!!

[문제 상황]

푸시알림 자체는 정상적으로 수신되었지만, 진동이나 소리 반응이 없는 문제가 발생했습니다.

[해결 방법]

모바일 기기에서 진동/알림음이 울리도록 서버단에서 사운드 설정을 명시적으로 지정했습니다.

해당 파일 전체 코드 링크

fun getAPNSConfig(): ApnsConfig {
    return ApnsConfig.builder()
        .setAps(
            Aps.builder()
                .setSound("default") // iOS 알림 사운드 설정
                .build(),
        )
        .build()
}

fun getAndroidConfig(): AndroidConfig {
    return AndroidConfig.builder()
        .setNotification(
            AndroidNotification.builder()
                .setSound("default") // Android 알림 사운드 설정
                .build(),
        )
        .build()
}

5. 앱스토어(IOS) 심사 준비, 리젝 경험 공유

✅ 사전 준비 체크리스트

앱스토어용 빌드 업로드 (Xcode)
앱 설명 및 키워드, 카테고리 설정
앱 아이콘 / 런치스크린 등록
개인정보 처리방침 / 마케팅 정책 URL

❌ 리젝 사유 및 해결 방법

1. UI/UX 이슈 – iPad 대응 부족

문제:

아이폰 뷰 기준으로 UI를 구성했는데,

아이패드에서 보니 특정 버튼(예: 애플 로그인 버튼)이 가려지거나 안 보이는 현상이 발생했습니다.

컴포넌트 간 겹침, 특정 영역에서 버튼 비노출 등의 UI 버그가 리젝 사유로 지적됐습니다.

해결:

iPad에서도 문제없이 작동하도록 반응형 UI 수정을 진행했습니다. 모든 기기에서 버튼이 정확히 보이도록 했습니다.

2. [가이드라인 1.5] – 사용자 지원 채널 미제공

문제:

애플은 사용자가 앱 내에서 질문하거나 지원을 요청할 수 있는 경로를 요구합니다.

초기에는 앱 내에 고객지원 관련 링크가 없어서 리젝되었습니다.

해결:

사용자가 문의를 남길 수 있도록 Google Form 링크를 생성하여,

마이페이지 내에 ‘문의하기’ 메뉴와 연결했습니다.

3. [가이드라인 4.5.4] – 푸시 알림 동의 흐름 미흡

문제:

원래 스퍼트 앱을 처음 실행하고 로그인 시, 푸시 알림 권한을 필수로 요청하는 구조였습니다.

동의하지 않으면 앱을 사용 할 수 없었습니다.

앱은 푸시 알림권한 동의를 요구하지만, 이는 선택 사항이어야 하며 사용자 동의가 필요합니다.

해결:

대신, 온보딩 화면에서 “모든 기능을 제대로 사용하려면 알림 허용이 필요하다”는 안내를 제공하며,

사용자가 직접 허용 여부를 선택할 수 있도록 변경했습니다.

알림을 거부해도 앱은 사용할 수 있지만,

최대한 허용을 유도하는 방향으로 UX를 구성했습니다.

💡앱스토어 입성!!

🧩 마무리하며

이번 프로젝트는 React Native 첫 경험이었습니다. 초반에는 AI를 참고했지만,

오류가 많거나 오래된 정보로 인해 오히려 막히는 경우가 많았어요.

그래서 방향을 바꿔,

공식 문서를 중심으로 찾아보며 직접 테스트해보기 시작했고,

그 이후로는 확실히 진도가 잘 나갔습니다.

개발하면서 고민이 많았던 부분은 웹과 앱 간의 메시지 흐름과 UI 전환이었습니다.

📸 카메라 촬영 후 화면 전환 시 깜빡임 이슈

앱에서는 다음과 같은 흐름으로 화면이 전환됩니다:

사진 촬영 유도 화면 (웹뷰) → 사진 촬영 화면 (앱뷰) → 촬영 결과 확인 화면 (웹뷰)

문제는, 앱뷰(카메라 화면)에서 다시 웹뷰로 전환될 때 발생했습니다.

촬영 직후 웹뷰의 결과 화면으로 이동하면서,

라우트 변경에 따라 화면이 ‘깜빡이는 듯한’ 전환이 발생했던 거예요.

촬영이 끝나자마자 바로 라우팅과 렌더링이 진행되다 보니,

화면 전환이 자연스럽게 이어지지 않고 순간적으로 튀는 느낌이 들었습니다.

해결 방법은:

촬영 직후 사진 파일을 웹뷰 쪽으로 먼저 전달하고
화면 전환에는 아주 약간의 지연(delay)을 주어
전환이 부드럽게 느껴지도록 처리했습니다.

이렇게 하니 사용자는 “촬영하고 자연스럽게 결과 화면으로 넘어간다” 는 느낌을 받을 수 있었고, UI 전환도 훨씬 매끄러워졌습니다.

그리고 앱을 출시한 뒤, 부끄럽지만 많은 개발 피드백과 버그 제보👾가 쏟아졌습니다.

덕분에 부족한 부분들을 빠르게 파악할 수 있었고,

지금도 계속해서 하나씩 보완해 나가는 중입니다.

사용자 경험을 더 좋게 만들기 위해

앞으로도 꾸준히 개선 작업을 이어갈 예정입니다! 💪

스퍼트 많은 관심 부탁드립니다🙇🏻‍♂️