수익화 기능

React Native 앱에 구독 추가하기

결제 연동에 몇 주씩 쓰지 마세요. VibeFast에는 RevenueCat, paywall UI, entitlement 체크, 백엔드가 포함되어 첫날부터 수익화할 수 있습니다.

😤 문제

모바일 앱 결제 구현은 정말 고통스럽습니다:

  • Apple과 Google의 API가 완전히 다릅니다
  • 구독 라이프사이클 처리가 복잡합니다
  • App Store 심사는 특정 UI/UX 패턴을 요구합니다
  • 테스트에는 샌드박스 계정과 특수 빌드가 필요합니다
  • entitlement 체크는 오프라인에서도 동작해야 합니다

총 시간: 2-4주

✨ VibeFast 솔루션

모든 것이 이미 구축되고 테스트되었습니다:

  • RevenueCat이 두 플랫폼을 자동으로 처리
  • 구독 라이프사이클 전체 관리
  • App Store 규정에 맞는 paywall UI 포함
  • 로컬 상품이 포함된 샌드박스 모드
  • 오프라인용 entitlement 캐싱 포함

총 시간: 1시간

완전한 결제 스택

UI만이 아니라 paywall부터 백엔드까지 전체 통합.

Paywall UI 컴포넌트

제품 카드, 가격, 구매 버튼이 포함된 아름답고 커스터마이즈 가능한 paywall 화면.

Entitlement 체크

간단한 hooks로 프리미엄 기능을 잠그고 구독 상태를 어디서든 확인.

구매 복원

App Store와 Play Store 복원 플로우를 올바르게 처리.

크로스플랫폼

RevenueCat으로 iOS/Android 모두 지원. 한 번의 통합으로 끝.

원격 설정

RevenueCat 대시보드에서 제품을 원격 설정. 앱 업데이트 없이 가격 변경.

분석 준비 완료

RevenueCat 분석 대시보드로 전환율, MRR, churn 추적.

포함 사항

여러 레이아웃의 paywall 화면 컴포넌트
가격 표시가 있는 제품 카드
구독 요금제 비교 UI
로딩 상태가 있는 구매 버튼
구매 복원 플로우
기능 잠금을 위한 entitlement 훅
구매 내역용 백엔드
소모형 처리(크레딧, 토큰)
체험 기간 지원
도입 가격 표시
에러 처리 및 폴백
샌드박스 테스트 모드

간단한 통합

몇 줄의 코드로 앱에 paywall을 추가하세요.

PaywallScreen.tsx
import RevenueCatUI from 'react-native-purchases-ui';
import { useEntitlement } from "@/features/payments/hooks/use-entitlement";

export default function UpgradeScreen() {
  const { isEntitled } = useEntitlement("premium");

  if (isEntitled) {
    return <Text>You're already a Pro member! 🎉</Text>;
  }

  // Use the native Paywall UI or VibeFast's custom UI
  return (
    <RevenueCatUI.Paywall
      onPurchaseCompleted={({ customerInfo }) => {
        console.log("Purchased!", customerInfo);
        router.replace("/home");
      }}
      onDismiss={() => router.back()}
    />
  );
}
GateFeature.tsx
import { useEntitlement } from "@/features/payments/hooks/use-entitlement";

export function PremiumFeature() {
  const { isEntitled } = useEntitlement("premium_features");

  if (!isEntitled) {
    return <UpgradePrompt />;
  }

  return <ActualPremiumContent />;
}

VibeFast vs 처음부터 만들기

기능VibeFast직접 구현
RevenueCat 연동2-3일
Paywall UI 컴포넌트3-5일
Entitlement 체크1-2일
구매 복원1일
구매 내역 백엔드2-3일
에러 처리1-2일
샌드박스 테스트 모드1일
App Store 준수리서치 시간
총 시간1시간2-4주

자주 묻는 질문

iOS와 Android 구독을 모두 지원하나요?

네. VibeFast는 RevenueCat을 사용하여 App Store와 Google Play 구독을 하나의 통합으로 처리합니다. RevenueCat 대시보드에서 제품을 설정하면 SDK가 플랫폼 차이를 자동 처리합니다.

RevenueCat 계정이 필요한가요?

네, RevenueCat 계정이 필요합니다(넉넉한 무료 티어). VibeFast는 모바일 연동과 UI를 제공하고, RevenueCat이 결제 처리와 구독 관리를 담당합니다. 프로덕션에는 Apple Developer와 Google Play Console 계정도 필요합니다.

Paywall 디자인을 커스터마이즈할 수 있나요?

물론입니다. Paywall 컴포넌트는 uniwind(React Native용 Tailwind)로 만들어져 완전히 커스터마이즈할 수 있습니다. 색상, 폰트, 레이아웃을 변경하고 후기나 기능 리스트를 추가하거나 구매 로직을 유지한 채 UI를 재구성할 수 있습니다.

출시 전에 구독을 어떻게 테스트하나요?

VibeFast에는 로컬 상품을 위한 샌드박스 모드가 포함되어 있습니다. RevenueCat의 샌드박스 환경과 Apple/Google 테스트 계정도 사용할 수 있습니다. 환경 변수로 제어되므로 프로덕션 전환은 설정 변경만 하면 됩니다.

크레딧이나 토큰 같은 소모형 구매는?

VibeFast는 백엔드(Convex 또는 Supabase)로 소모형을 지원합니다. 사용자가 크레딧을 구매하면 백엔드가 구매 내역과 잔액을 관리하며, hooks가 구매 시 증가, 사용 시 감소를 처리합니다.

구독 변경 및 취소는 어떻게 처리하나요?

RevenueCat이 구독 이벤트에 대한 웹훅을 전송합니다. VibeFast에는 이를 수신하여 entitlement를 실시간 업데이트하는 백엔드 함수가 포함됩니다. 사용자가 취소하면 결제 주기 종료 시 자동으로 접근이 해제됩니다.

앱을 수익화할 준비 되셨나요?

VibeFast로 이번 주에 결제를 시작하세요.

일회성 구매. 평생 업데이트. 상업용 라이선스 포함.