> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# RevenueCat으로 결제 추가하기

> RevenueCat을 사용해 앱 내 콘텐츠에 대해 플레이어에게 요금을 부과해보세요.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const subscriptionPrompt = "Add a monthly subscription to PixelGames that unlocks Snake, Racer, and Pinball.";
export const paywallPrompt = "Show the four unlockable games as cover art on the PixelGames paywall.";

## RevenueCat이란

PixelGames에서 Snake, Racer, Pinball은 "출시 예정"으로 표시되어 있습니다. RevenueCat을 사용하면
Apple과 Google의 구매 시스템을 직접 연결하지 않고도 이를 잠금 해제하는 구독을 앱에서 판매할 수
있습니다. Agent에게 구독 추가와 RevenueCat 연결을 요청하기만 하면, 나머지는 Agent가 처리합니다.

<Warning>
  Apple과 Google 모두 이러한 디지털 콘텐츠에 대해 자체 인앱 결제 시스템 사용을 요구하며, 둘 다
  판매 수익의 일부를 수수료로 가져갑니다. 외부 결제 링크로 이를 우회할 수 없습니다.
</Warning>

## 시작하기 전에

* 모바일 앱으로 설정된 Replit 프로젝트.
* RevenueCat 계정. 필요한 것은 이메일과 비밀번호뿐이며, 아직 은행 계정은 필요하지 않습니다.

## 시작하기

<Steps>
  <Step title="Agent에게 구독 추가 요청하기">
    <AiPrompt>
      {subscriptionPrompt}
    </AiPrompt>
  </Step>

  <Step title="RevenueCat 계정 연결하기">
    Agent가 RevenueCat 연결을 요청하면 **Connect RevenueCat**을 선택해 시작하세요.

    <Frame caption="이 기능을 감지한 후 RevenueCat 연결을 요청하는 Replit.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/revenuecat.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=880a63197ea3bcc5b1c7ec064674e44f" alt="Replit의 Connect RevenueCat 설정 모달" data-path="images/pixelgames/mobile/revenuecat.png" width="964" height="297" data-path="images/pixelgames/mobile/revenuecat.png" />
    </Frame>
  </Step>

  <Step title="Replit 승인하기">
    RevenueCat의 승인 페이지에서 **Read & Write** 권한을 부여하세요.
  </Step>

  <Step title="Agent가 구독 빌드하기">
    Agent가 RevenueCat 프로젝트를 생성하고, 프로덕트와 인타이틀먼트를 구성한 다음, 앱에 결제
    플로우를 연결합니다.
  </Step>
</Steps>

## 구독 테스트하기

Replit 프리뷰는 RevenueCat의 테스트 모드를 사용합니다. Expo Go에서 구매를 테스트하면 실제 요금
없이 테스트 구매 대화상자가 표시됩니다. Apple이 앱을 App Store용으로 승인하면 실제 구매에
실제 돈이 사용되므로, 제출 전에 가격을 다시 확인하세요.

<Frame caption="PixelGames의 페이월과 Expo Go에 표시되는 테스트 구매 대화상자.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/paywall.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=6575d5687f78a783861b52044eb21c14" alt="RevenueCat의 테스트 구매 대화상자 옆에 있는 PixelGames 페이월 화면" data-path="images/pixelgames/mobile/paywall.png" width="2274" height="1470" data-path="images/pixelgames/mobile/paywall.png" />
</Frame>

위의 테스트 구매 대화상자는 실제로 플레이어가 보게 되는 것이 아닙니다. Expo Go는 모든 Expo
프로젝트를 프리뷰하는 공용 앱이므로 앱의 실제 RevenueCat 아이덴티티를 확인할 수 없어 대신
일반적인 테스트 플로우를 표시합니다. 실제 빌드를 갖추거나 앱이 게시되면, 페이월 자체는 앱에
하드코딩된 것이 아니라 원격으로 제공되는 RevenueCat 고유의 화면이 됩니다.

## 페이월 커스터마이즈하기

페이월이 원격으로 제공되므로, 새 빌드 없이도 디자인을 두 가지 방법으로 변경할 수 있습니다.

**Agent에게 요청하기**

<AiPrompt>
  {paywallPrompt}
</AiPrompt>

**또는 직접 편집하기**

<Steps>
  <Step title="페이월 편집기 열기">
    RevenueCat 대시보드에서 **Paywalls**로 이동해 비주얼 편집기로 생성하거나 편집하세요: 색상,
    배경 이미지, 제목 텍스트, 버튼 스타일 등 앱의 모습에 맞는 것을 선택하세요.

    <Frame caption="RevenueCat의 비주얼 페이월 편집기.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/customize-paywall.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=fca147e23db57f4408ad00bec8eab2d1" alt="PixelGames 프리미엄 페이월 레이아웃과 속성을 보여주는 RevenueCat의 페이월 편집기" data-path="images/pixelgames/mobile/customize-paywall.png" width="1920" height="991" data-path="images/pixelgames/mobile/customize-paywall.png" />
    </Frame>
  </Step>

  <Step title="오퍼링에 연결하기">
    페이월을 현재 오퍼링에 연결하세요.
  </Step>

  <Step title="변경 사항이 원격으로 반영됨">
    새 디자인은 TestFlight에서든 게시 후든, 다음에 페이월이 열릴 때 나타납니다. App Store
    업데이트가 필요하지 않습니다.
  </Step>
</Steps>

<Frame caption="실제 시스템 구매 확인과 함께 TestFlight에서 실행 중인 커스터마이즈된 페이월.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/paywall-testflight.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=fc8a548efa85548a37065c4ff41f54a6" alt="실제 TestFlight 구매 확인 시트 옆에 있는 TestFlight 상의 PixelGames 페이월" data-path="images/pixelgames/mobile/paywall-testflight.png" width="2274" height="1470" data-path="images/pixelgames/mobile/paywall-testflight.png" />
</Frame>

이것이 실제로 플레이어가 보게 되는 것입니다. Expo Go의 테스트 대화상자 대신 실제 구매 확인이,
기본 레이아웃 대신 커스터마이즈된 디자인이 표시됩니다.

## App Store Connect에 동기화하기

동기화하면 RevenueCat이나 Replit Agent에서 직접 인앱 구독이나 프로덕트를 생성하거나 수정할 수
있습니다.

App Store Connect를 연결하기 전에 세 가지를 준비해야 합니다.

* **등록**: 아직 하지 않았다면 Apple Developer Program에 등록하세요. 연간 회비가 있습니다.
* **제출**: 아직 하지 않았다면 앱을 App Store에 제출하세요. [앱 업로드하기](/build/mobile-upload-ios)를
  참고하세요. RevenueCat이 프로덕트를 동기화하려면 앱 레코드가 필요합니다.
* **연결**: 은행 계정을 연결하고 Apple의 Paid Apps Agreement에 **서명**하세요. 둘 다 App
  Store Connect 내에서 이루어집니다. 이것들이 없으면 Apple은 지급을 처리하지 않습니다.

<Steps>
  <Step title="Replit에서 동기화 시작하기">
    Replit에서 **Publishing → Manage**를 열고 **Sync RevenueCat to App Store Connect**를
    선택하세요. 이 버튼은 앱이 TestFlight에 제출되면 나타납니다.

    <Frame caption="Replit의 Publishing 패널에서 동기화 시작하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step1.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=db78d8d81b07f88f65b5e0d689ed1427" alt="Manage 탭이 열려 있고 Sync RevenueCat to App Store Connect 버튼이 표시된 Replit Publishing 패널" data-path="images/pixelgames/mobile/rev-co-step1.png" width="997" height="420" data-path="images/pixelgames/mobile/rev-co-step1.png" />
    </Frame>
  </Step>

  <Step title="App Store Connect API 페이지 열기">
    App Store Connect에서 **Users and Access → Integrations → App Store Connect API**
    ([직접 열기](https://appstoreconnect.apple.com/access/integrations/api))로 이동해
    \*\*+\*\*를 선택해 새 키를 추가하세요.

    <Frame caption="App Store Connect API 키로 이동하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step2.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=3ee0f35c3bf64afebaeb6c4f64a172ba" alt="App Store Connect의 Users and Access 페이지, Integrations 탭, App Store Connect API 섹션" data-path="images/pixelgames/mobile/rev-co-step2.png" width="1466" height="657" data-path="images/pixelgames/mobile/rev-co-step2.png" />
    </Frame>
  </Step>

  <Step title="키 생성하기">
    이름을 지정하고(예: "RevenueCat") **Access**를 **App Manager**로 설정한 다음
    **Generate**를 선택하세요.

    <Frame caption="RevenueCat용 App Store Connect API 키 생성하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step3.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=5711ebfa2d1bab0e108e944598bc5da9" alt="이름 필드와 App Manager 접근 권한이 선택된 Generate API Key 모달" data-path="images/pixelgames/mobile/rev-co-step3.png" width="1453" height="436" data-path="images/pixelgames/mobile/rev-co-step3.png" />
    </Frame>
  </Step>

  <Step title="키 세부 정보 복사하기">
    **Key ID**를 복사하고 키 파일을 다운로드하세요.

    <Frame caption="Key ID를 복사하고 App Store Connect API 키 다운로드하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step4.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=2d1f05ed614a71e51d1425ee4d7b6c43" alt="새 RevenueCat 키와 Copy, Download 작업이 표시된 App Store Connect API 키 목록" data-path="images/pixelgames/mobile/rev-co-step4.png" width="1522" height="695" data-path="images/pixelgames/mobile/rev-co-step4.png" />
    </Frame>
  </Step>

  <Step title="Replit에 추가하기">
    Replit의 동기화 모달(Step 1 of 2)로 돌아가 키 파일을 업로드하고 **Key ID**와 **Issuer
    ID**를 붙여넣은 다음 **Continue**를 선택하세요.

    <Frame caption="Replit에 App Store Connect API 키 입력하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step5.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=5a0cdf7dbf416d708b5e8c3a6b691f21" alt="App Store Connect API 키를 업로드하고 세부 정보를 붙여넣는 Replit 모달의 Step 1 of 2" data-path="images/pixelgames/mobile/rev-co-step5.png" width="995" height="591" data-path="images/pixelgames/mobile/rev-co-step5.png" />
    </Frame>
  </Step>

  <Step title="In-App Purchase 키에 대해서도 동일하게 진행하기">
    App Store Connect의 동일한 위치에서 이번에는 **In-App Purchase** 탭
    ([직접 열기](https://appstoreconnect.apple.com/access/integrations/api/subs))을 열고
    다른 키를 생성해 세부 정보를 복사하세요.

    <Frame caption="In-App Purchase API 키 생성 및 복사하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step6.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=9ca61ec4c150cb443dc4b0b02531bd6d" alt="Download와 Copy 작업이 표시된 App Store Connect의 In-App Purchase 키 목록" data-path="images/pixelgames/mobile/rev-co-step6.png" width="1547" height="593" data-path="images/pixelgames/mobile/rev-co-step6.png" />
    </Frame>
  </Step>

  <Step title="Replit에 추가하기">
    Replit의 동기화 모달(Step 2 of 2)로 돌아가 이 키 파일도 업로드하고 **Key ID**와 **Issuer
    ID**를 붙여넣은 다음 **Continue**를 선택하세요.

    <Frame caption="Replit에 In-App Purchase API 키 입력하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step7.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=d6006070e16940bc3c0db0d09557dd0c" alt="In-App Purchase API 키를 업로드하고 세부 정보를 붙여넣는 Replit 모달의 Step 2 of 2" data-path="images/pixelgames/mobile/rev-co-step7.png" width="997" height="591" data-path="images/pixelgames/mobile/rev-co-step7.png" />
    </Frame>
  </Step>

  <Step title="확인 및 동기화하기">
    동기화가 완료되면 Replit의 동일한 **Publishing → Manage** 패널에서 언제든지 프로덕트
    가격을 수동으로 변경할 수 있습니다.

    <Frame caption="App Store Connect에 동기화하기 전 프로덕트 확인하기.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step8.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=0748e90c6246378f73f129cbc1f8d0e5" alt="동기화 준비가 된 프리미엄 월간 구독이 표시된 Replit의 Products to Sync 화면" data-path="images/pixelgames/mobile/rev-co-step8.png" width="996" height="550" data-path="images/pixelgames/mobile/rev-co-step8.png" />
    </Frame>
  </Step>
</Steps>

## 문제 해결

* **구매는 성공하지만 아무것도 잠금 해제되지 않음:** RevenueCat의 인타이틀먼트가 올바른
  프로덕트 ID에 매핑되어 있는지 확인하세요.
* **테스트에서는 작동하지만 게시 후에는 작동하지 않음:** 프로덕트가 App Store Connect에
  동기화되었는지, Apple의 Paid Apps Agreement에 서명했는지 확인하세요.

## 자주 묻는 질문

<AccordionGroup>
  <Accordion title="RevenueCat을 사용하려면 은행 계정이 필요한가요?">
    아니요. 계정을 생성하려면 이메일과 비밀번호만 있으면 됩니다. 은행 계정은 지급받을 준비가
    되었을 때 Apple이나 Google을 통해 별도로 연결합니다.
  </Accordion>

  <Accordion title="테스트 구매에 요금이 부과되나요?">
    아니요. Replit 프리뷰는 RevenueCat의 테스트 모드를 사용하며, 구매는 시뮬레이션됩니다.
    실제 요금은 Apple이 앱을 App Store용으로 승인한 후에만 시작됩니다.
  </Accordion>

  <Accordion title="RevenueCat으로 무엇을 구성할 수 있나요?">
    가격, 인타이틀먼트, 그리고 페이월 자체입니다. 어떤 변경이든 Agent에게 요청하면 RevenueCat
    구성과 앱 코드가 모두 업데이트됩니다.
  </Accordion>
</AccordionGroup>

## 다음 단계

<CardGroup cols={2}>
  <Card title="리뷰와 평점 수집하기" icon="star" href="/ko/build/mobile-collect-reviews">
    만족한 플레이어에게 PixelGames 평가를 요청해보세요.
  </Card>
</CardGroup>

## 관련 항목

* [모바일 앱에서 이미지 저장하기](/ko/build/mobile-store-images)
* [App Store에 제출하기](/build/mobile-publish-ios)
* [Google Play에 제출하기](/build/mobile-publish-android)
