Skip to main content

Application 프로젝트 분석 보고서

1. 프로젝트 개요​

1.1 기본 정보​

  • 프로젝트명: dasee-react-native-application
  • 버전: 1.0.0
  • 설명: Dasee React Native Application
  • 빌드 도구: Expo CLI
  • 개발사: (주)소프트스퀘어드

1.2 프로젝트 목적​

  • React Native와 Expo 기반 모바일 애플리케이션
  • WebView를 통한 하이브리드 앱 구조
  • 네이티브 기능(카메라, 갤러리, 푸시알림, 결제)과 웹 연동
  • iOS/Android 크로스 플랫폼 지원

2. 기술 스택 분석​

2.1 주요 프레임워크​

  • React Native: Expo SDK 54.0.0 (약간 구 버전)
  • Expo: Expo Router 기반 네비게이션
  • TypeScript: 5.3.3 (최신 버전)

2.2 상태 관리​

  • Jotai: 2.10.2 (원자적 상태 관리)
  • React Query: 5.60.5 (서버 상태 관리)

2.3 네이티브 기능​

  • Expo Notifications: 0.28.19 (푸시 알림)
  • Expo ImagePicker: 15.0.7 (이미지/카메라)
  • Expo Linking: 6.3.1 (딥링크)
  • React Native WebView: 13.12.3 (웹뷰)

2.4 결제 시스템​

  • PortOne: 2.0.0 (통합 결제 시스템)
  • @portone/react-native-sdk: 0.0.9

2.5 개발 도구​

  • TypeScript: 강타입 언어 지원
  • Expo Dev Client: 개발 빌드 지원

3. 소스 구조 분석​

3.1 디렉토리 구조​

app/
├── index.tsx              # 메인 진입점 (WebView 컨테이너)
├── payment/               # 결제 페이지
│   └── index.tsx         # PortOne 결제 구현
├── _layout.tsx           # 레이아웃 설정
components/
├── container/            # 앱 상태 관리 컨테이너
├── ipc/                  # WebView-Native 통신
│   ├── send/            # Native → WebView 메시지
│   └── useMessageHandler.ts  # WebView → Native 핸들러
utils/
├── fcmToken.ts          # FCM 토큰 관리
├── imageHandler.ts      # 이미지/카메라 처리
└── storage.ts           # 로컬 스토리지
hooks/
├── useDeepLink.ts       # 딥링크 처리
└── useKeyboard.ts       # 키보드 상태
datas/
├── fcmToken.ts          # FCM 토큰 Atom
├── paymentData.ts       # 결제 데이터 Atom
└── backHandlerEnabled.ts # 뒤로가기 제어 Atom

3.2 아키텍처 특징​

  • 하이브리드 앱: WebView 기반으로 웹앱을 감싸는 구조
  • IPC 통신: WebView와 Native 간 메시지 기반 통신
  • 원자적 상태 관리: Jotai를 통한 세밀한 상태 관리
  • 기능별 모듈화: 각 네이티브 기능별로 분리된 구조

4. 특이사항​

4.1 WebView 기반 하이브리드 구조​

  • 메인 앱: React Native WebView가 웹앱을 로드
  • IPC 통신: postMessage를 통한 양방향 통신
// app/index.tsx
const webViewRef = useRef<WebView>(null);
const [url, setUrl] = useState("https://dasee.ai");

return (
    <WebView
        ref={webViewRef}
        source={{ uri: url }}
        onMessage={onMessageHandler}
        // ...
    />
);

4.2 딥링크 시스템​

  • Custom Scheme: daseereactnativeapplication://, ai.dasee.app://
  • 동적 URL 업데이트: 딥링크를 통해 WebView URL 변경
// hooks/useDeepLink.ts
const regex =
    /^(?:daseereactnativeapplication:\/\/\?path=|ai.dasee.app:\/\/\?path=)(.*)/;

4.3 결제 시스템​

  • PortOne SDK: React Native 전용 결제 모듈
  • 결제 페이지: 별도 Native 페이지에서 결제 처리
  • 결과 전송: 결제 완료 후 WebView로 결과 전송

4.4 FCM 푸시 알림​

  • Expo Push Notifications: Expo 기반 푸시 알림
  • 토큰 관리: FCM 토큰을 WebView로 전송하여 서버 등록

5. 장점 (잘 구축된 부분)​

5.1 효율적인 하이브리드 구조​

  • 빠른 개발: 웹앱 기반으로 빠른 기능 개발 가능
  • 일관된 UI: 웹앱과 동일한 사용자 경험
  • 즉시 업데이트: 웹앱 업데이트 시 앱 재배포 불필요

5.2 체계적인 IPC 통신​

  • 타입 안전성: TypeScript로 메시지 타입 정의
  • 기능별 분리: 각 네이티브 기능별로 모듈화된 핸들러
  • 에러 처리: 각 기능별 에러 핸들링 구현

5.3 현대적 상태 관리​

  • Jotai: 필요한 상태만 선택적으로 구독하는 효율적 구조
  • 원자적 설계: FCM 토큰, 결제 데이터 등 독립적 관리
  • React Query: 서버 상태와 클라이언트 상태 분리

5.4 네이티브 기능 통합​

  • 완성도 높은 결제: PortOne을 통한 안정적인 결제 시스템
  • 이미지 처리: 카메라/갤러리 접근 및 크롭 기능
  • 딥링크: 체계적인 딥링크 파싱 및 처리

5.5 크로스 플랫폼 지원​

  • Expo SDK: iOS/Android 동시 개발 지원
  • 플랫폼별 분기: Platform.OS를 통한 플랫폼별 처리
  • 일관된 API: Expo API를 통한 플랫폼 차이 흡수

6. 단점 (개선 가능한 부분)​

6.1 네이티브 성능 제약​

  • WebView 의존성: 모든 UI가 WebView 내에서 처리되어 성능 제약
  • 메모리 사용량: WebView로 인한 높은 메모리 사용량
  • 애니메이션 한계: 네이티브 애니메이션 대비 부자연스러움

6.2 에러 처리 개선​

  • 글로벌 에러 핸들링: WebView 에러 및 IPC 통신 실패 처리 부족
  • 네트워크 오류: 네트워크 연결 실패 시 적절한 폴백 부족
  • 디버깅 어려움: WebView 내부 에러 추적의 어려움

6.3 보안 강화​

  • WebView 보안: JavaScript 인젝션 등 보안 취약점 가능성
  • 딥링크 검증: 딥링크 파라미터 검증 및 sanitization 부족
  • 민감 정보 처리: FCM 토큰 등 민감 정보의 안전한 처리 필요

6.4 개발 경험​

  • 핫 리로드 제약: WebView 콘텐츠 변경 시 전체 앱 재시작 필요
  • 디버깅 복잡성: Native와 WebView 간 디버깅의 복잡성
  • 테스트 어려움: E2E 테스트 작성의 어려움

7. 단점 (반드시 개선해야 하는 부분)​

7.1 에러 복구 메커니즘 부족​

  • WebView 크래시: WebView 크래시 시 복구 로직 부재
  • IPC 통신 실패: 메시지 전송 실패 시 재시도 로직 부족
  • 네트워크 단절: 오프라인 상태 처리 미흡

7.2 성능 최적화 부족​

  • WebView 메모리 관리: WebView 메모리 누수 관리 부족
  • 이미지 최적화: 대용량 이미지 처리 시 메모리 부족 위험
  • 백그라운드 처리: 백그라운드 상태에서의 리소스 관리 부족

8. 개발 환경 및 배포​

8.1 개발 환경 설정​

# 개발 서버 실행
npx expo start          # Expo 개발 서버
npx expo start --dev-client  # 개발 클라이언트

# 빌드
eas build --platform ios     # iOS 빌드
eas build --platform android # Android 빌드

# 배포
eas submit --platform ios    # App Store 제출
eas submit --platform android # Google Play 제출

8.2 EAS 설정​

  • eas.json: 빌드 및 배포 설정
  • app.json: 앱 메타데이터 및 Expo 설정
  • Development Build: 개발용 네이티브 빌드 지원

8.3 환경 변수​

  • Expo Constants를 통한 환경별 설정 관리
  • EAS Secret을 통한 민감 정보 관리

9. 의존성 분석​

9.1 주요 외부 라이브러리​

라이브러리버전용도상태
Expo54.0.0플랫폼 프레임워크구버전
React Native0.76.5모바일 프레임워크최신
Jotai2.10.2상태 관리최신
React Query5.60.5서버 상태최신
PortOne2.0.0결제 시스템최신
React Native WebView13.12.3웹뷰최신

9.2 보안 취약점​

  • 정기적인 expo doctor 및 npm audit 실행 필요
  • Expo SDK 업데이트 시 네이티브 모듈 호환성 확인 필요

9.3 라이선스​

  • 대부분 MIT 라이선스로 상업적 사용 가능
  • PortOne은 상용 결제 서비스로 별도 계약 필요

10. 향후 개발 권장사항​

10.1 즉시 수정 필요​

  1. 에러 처리: WebView 크래시 및 IPC 통신 실패 복구 로직
  2. 보안: 딥링크 파라미터 검증 및 WebView 보안 강화
  3. 성능: WebView 메모리 관리 및 이미지 최적화

10.2 단기 개선 사항 (1-2개월)​

  1. 오프라인 지원: 네트워크 단절 시 기본 기능 제공
  2. 테스트: Detox를 이용한 E2E 테스트 구축
  3. 모니터링: 성능 및 에러 모니터링 시스템 구축

10.3 중기 개선 사항 (3-6개월)​

  1. Code Push: 웹앱 외 네이티브 코드 업데이트 시스템
  2. 크래시 리포팅: Sentry 등 크래시 모니터링 도구 도입
  3. A/B 테스트: Expo 기반 A/B 테스트 플랫폼 구축

10.4 장기 개선 사항 (6개월 이상)​

  1. 네이티브 전환 검토: 성능 중요 기능의 순수 네이티브 구현
  2. 마이크로프론트엔드: WebView 내 여러 웹앱 로드 아키텍처
  3. AR/VR 지원: Expo AR/VR 모듈을 통한 확장 기능

10.5 팀 개발 규칙 제안​

  1. IPC 문서화: WebView-Native 통신 프로토콜 명세서 작성
  2. 성능 모니터링: Flipper 등 성능 모니터링 도구 도입
  3. 배포 자동화: EAS를 통한 CI/CD 파이프라인 구축
  4. 버전 관리: Semantic Versioning 및 배포 노트 작성

11. 결론​

Application 프로젝트는 React Native와 Expo를 기반으로 한 효율적인 하이브리드 모바일 애플리케이션입니다. WebView를 통해 웹앱을 감싸는 구조로 빠른 개발과 일관된 사용자 경험을 제공하며, IPC 통신을 통해 네이티브 기능을 잘 통합했습니다.

특히 PortOne을 활용한 결제 시스템, FCM 기반 푸시 알림, 체계적인 딥링크 처리 등이 잘 구현되어 있으며, Jotai를 통한 현대적인 상태 관리도 장점입니다.

다만, Expo SDK 버전 업데이트와 WebView 크래시 복구 로직, 성능 최적화가 즉시 필요하며, 장기적으로는 중요 기능의 네이티브 구현을 검토하여 더욱 안정적이고 고성능의 모바일 애플리케이션으로 발전시킬 수 있을 것으로 판단됩니다.