대체 인앱 결제 시스템을 위한 임시 UX 가이드라인

개요

Google Play에 개발자가 제공하는 인앱 결제 시스템(이하 '개발자 제공 인앱 결제 시스템')을 제공하는 경우, 일관된 이용자 경험을 유지하고 이용자가 충분한 정보를 바탕으로 선택할 수 있도록 정보 화면과 별도의 결제 서비스 선택 화면을 표시해야 합니다. 정보 화면은 이용자가 구매를 처음 시작할 때만 각 이용자에게 표시하면 되지만, 결제 서비스 선택 화면은 구매 시마다 표시해야 합니다. 두 화면 모두 이용자에게 표시되는 메시지 및 UI 사양을 다음 가이드라인에 따라 구현해야 합니다.

이용자를 위한 정보

정보 화면은 사용자가 변경사항과 관련된 배경을 이해하고 선택에 도움이 되는 추가 정보를 참고할 수 있도록 돕습니다.

정보 화면 표시 시점

개발자 제공 인앱 결제 시스템을 추가한 후 이용자가 첫 구매를 시작할 때 정보 화면을 표시합니다. 이후에 동일한 이용자가 구매할 때는 이 메시지를 표시하지 않아도 됩니다. 이용자가 구매를 시작하기 위해 명시적인 행동을 취한 직후에 정보 화면을 표시합니다.

가격 표시 시점

정보 화면 또는 결제 서비스 선택 화면을 표시하기 전에 이용자에게 구매 가격을 명확하게 표시해야 합니다.

표시 방법

정보 화면은 모달 하단 시트에 표시되어야 합니다. 모달 하단 시트는 화면 하단에서 위쪽으로 애니메이션 처리되며 하단에 고정된 상태로 유지되는 모달 대화상자와 비슷합니다. 모달 하단 시트가 기본 화면의 모든 UI 요소 위로 올라갑니다. 기본 화면이 사용자 상호작용에 응답하지 않음을 나타내기 위해 기본 화면은 어두운 스크림 뒤로 가려집니다.

모달 하단 시트의 디자인구현에 관한 자세한 내용은 Google Material Design을 참고하세요.

이용자의 액션

이용자가 구매를 시작하는 앱의 버튼 또는 다른 UI 요소를 탭하면 하단 시트가 트리거되어야 합니다. 이용자는 정보 화면에서 다음과 같은 3가지 작업을 할 수 있습니다.

이어가기

'계속' 버튼을 탭하면 정보 화면이 닫히고 결제 서비스 선택 화면이 실행됩니다.

자세히 알아보기

'자세히 알아보기' 버튼을 탭하면 웹브라우저에서 Google 고객센터 도움말이 실행됩니다.

닫기

하단 시트를 닫고 기본 화면으로 돌아가려면 다음 방법으로 하단 시트를 닫으면 됩니다.

  • 하단 시트 컨테이너 외부 탭하기
  • Android 시스템의 '뒤로' 버튼 탭하기

정보 화면을 닫았거나 사용자가 '계속'을 탭한 후에는 정보 화면을 다시 표시할 필요가 없습니다.

예시: 이용자가 구매를 시작하기 전에 구매 가격을 명확하게 표시합니다. '지금 시작하기' 버튼을 탭하면 정보 화면이 트리거됩니다.

이용자 정보 화면

디자인 사양

정보 화면은 제목, 메시지, 버튼과 같은 3가지 구성요소로 나뉩니다. 3가지 구성요소 모두 필수 항목이며 이 가이드라인에 정의된 텍스트 및 UI 요소를 정확히 포함해야 합니다. 이 화면에는 추가 텍스트 또는 이미지를 포함하지 마세요. 다른 화면에는 추가 텍스트 또는 이미지를 자유롭게 포함해도 됩니다.

필수 구성요소의 위치를 보여주는 결제 옵션 화면

  1. 제목
  2. 메시지
  3. 버튼
  4. 하단 시트
  5. 배경 스크림

제목

텍스트 결제 옵션 변경
글꼴 Roboto(모든 글꼴에 적용)
글꼴 크기 18sp
글꼴 색상 #202124

메시지

텍스트 1 최근에 변경된 대한민국의 법률로 인해 여러 결제 옵션이 제공됩니다. 결제 옵션 선택은 아래의 사항을 포함합니다.
  • 구매를 보호하고 결제를 처리하며 모든 결제 정보를 저장하는 주체
  • 구매와 관련된 고객 지원을 제공하는 주체
  • 사용 가능한 결제 수단
  • 구매 시 사용할 수 있는 혜택
글꼴 크기 14sp
행 간격 20
글꼴 색상 #5F6368
텍스트 2 Google은 Google Play를 통한 구매만 보호합니다. Play 기프트 카드, Play Points, 구매 관리, 정기 결제 관리와 같은 Google Play가 제공하는 기능은 결제 시 Google Play를 선택한 경우에만 사용할 수 있습니다.
글꼴 크기 12sp
행 간격 16
글꼴 색상 #5F6368

버튼 1

텍스트 자세히 알아보기
텍스트 정렬 가운데 맞춤
글꼴 크기 14sp
글꼴 두께 보통
글꼴 색상 #01875F
배경 색상 #FFFFFF
크기 높이: 36, 너비: 컨테이너에 맞게 조정
모서리 반지름 4dp
윤곽선 1dp, #DADCE0
링크 Google Play 도움말 링크

버튼 2

텍스트 이어가기
텍스트 정렬 가운데 맞춤
글꼴 크기 14sp
글꼴 두께 보통
글꼴 색상 #FFFFFF
배경 색상 #01875F
크기 높이: 36, 너비: 컨테이너에 맞게 조정
모서리 반지름 4dp
링크 결제 서비스 선택 화면 링크

하단 시트

크기 높이: 가변, 너비: 100%
모서리 반지름 8dp, 8dp, 0, 0
배경 #FFFFFF
안쪽 여백 왼쪽: 24dp, 오른쪽: 24dp, 상단: 32dp, 하단: 24dp
고도 8dp

가로 모드

가로 모드에서는 하단 시트가 세로 모드보다 넓지만 그 밖에는 동일한 디자인 사양 및 기능을 따릅니다.

가로 모드의 결제 옵션 화면

하단 시트 너비: 최대 500dp, 안쪽 패딩: 24dp
제목 세로 모드와 동일
메시지 세로 모드와 동일
버튼 높이: 36, 너비: 컨테이너에 맞게 조정

결제 서비스 선택 화면

결제 서비스 선택 화면에는 구매를 완료할 수 있는 2가지 결제 옵션이 표시됩니다. 이용자가 충분한 정보를 바탕으로 결정을 내릴 수 있도록 각 결제 서비스 옵션에서 사용 가능한 결제 수단을 표시합니다. 이용자가 선택한 이후 해당 결제 서비스를 통해 구매를 완료하도록 합니다.

정보 화면 표시 시점

이미 정보 화면이 표시된 적이 있는 이용자의 경우, 구매를 시작하기 위해 명시적인 행동을 취한 직후 결제 서비스 선택 화면이 표시되어야 합니다.

표시 방법

결제 서비스 선택 화면은 모달 하단 시트에 표시되어야 하며 정보 화면과 동일한 사양을 따라야 합니다.

동등한 시각적 표현

개발자 제공 인앱 결제 서비스와 Google Play 결제 서비스의 버튼이 공정하고 평등하게 표시되어야 합니다. 여기에는 동일한 버튼 크기, 텍스트 크기/스타일, 탭 타겟, 아이콘 크기가 포함되나 이에 국한되지 않습니다. 이 가이드라인에 정의되지 않은 텍스트, 이미지, 스타일 변경사항을 추가하지 마세요.

예시: '지금 시작하기' 버튼을 탭하면 결제 서비스 선택 화면이 트리거됩니다.

각 결제 옵션이 동등하게 표시된 결제 서비스 선택 화면

디자인 사양

결제 서비스 선택 화면에는 제목, 설명, 개발자 버튼, Google Play 버튼의 4가지 구성요소가 있습니다. 모든 구성요소를 사용해야 하며, 이 가이드라인에 정의된 텍스트 및 UI 요소를 정확히 포함해야 합니다. 이 화면에는 추가 텍스트 또는 이미지를 포함하면 안 됩니다. 개발자가 소유한 다른 화면에는 추가 텍스트 또는 이미지를 자유롭게 포함해도 됩니다.

아래의 링크에서 Google Play 및 결제 아이콘의 이미지 애셋을 제공합니다.

예시: 세로 모드에서는 하단 시트가 전체 화면 너비의 100%를 차지해야 합니다.

필수 요소의 위치를 보여 주는 하단 시트

  1. 제목
  2. 설명
  3. 개발자 버튼
  4. Google Play 버튼
  5. 하단 시트
  6. 배경 스크림

제목

텍스트 결제 방법 선택
글꼴 Roboto(모든 글꼴에 적용)
글꼴 크기 18sp
글꼴 색상 #202124

설명

텍스트 결제를 보호하고 처리하며 고객 서비스를 제공할 주체를 선택하세요. 혜택 및 사용 가능한 결제 수단이 다를 수 있습니다.
글꼴 크기 14sp
글꼴 색상 #5F6368
텍스트 링크 자세히 알아보기
도착 페이지 링크 링크
글꼴 크기 14sp
장식 밑줄
글꼴 색상 #5F6368

개발자 버튼

개발자 버튼 UI 요구사항

  1. 앱 아이콘
  2. 앱 이름
  3. 결제 수단 아이콘

개발자 버튼 추가 옵션

    결제 수단 아이콘

  1. 최대 결제 수단 아이콘 수
  2. 아이콘 대신 결제 수단 이름으로 표시
  3. 화면 너비에 맞게 조정

  4. 너비 360dp
  5. 너비 480dp

버튼 컨테이너

윤곽선 1pt, #DADCE0
모서리 반지름 4dp
안쪽 여백 16dp, 16dp, 16dp, 16dp,

앱 아이콘

크기 높이: 24dp, 너비: 가변

제목

텍스트 {앱 이름}
글꼴 크기 14sp
글꼴 색상 #202124

결제 수단

크기 32dp X 20dp
모서리 반지름 2
수량 최대 5개, 6개 이상인 경우 추가 표시기 표시
추가 표시기 + 더보기(좁은 화면에서는 다음 줄로 래핑)
글꼴 크기 12sp
글꼴 색상 #5F6368

Google Play 버튼

Google Play 버튼

  1. 아이콘
  2. 제목
  3. 허용되는 결제 수단
  4. 추가 표시기

버튼 컨테이너

윤곽선 1pt, #DADCE0
모서리 반지름 4dp
안쪽 여백 16dp, 16dp, 16dp, 16dp,

앱 아이콘

이미지 애셋 Google Play 프리즘
크기 24dp X 24dp

제목

텍스트 Google Play
글꼴 크기 14sp
글꼴 색상 #202124

결제 수단

이미지 애셋 링크
추가 표시기 + 더보기
글꼴 크기 12sp
글꼴 색상 #5F6368

가로 모드

예: 가로 모드에서는 하단 시트가 세로 모드보다 넓지만 그 밖에는 동일한 디자인 사양 및 기능을 따릅니다.

가로 모드의 하단 시트

하단 시트 너비: 최대 500dp, 안쪽 패딩: 24dp
제목 세로 모드와 동일
메시지 세로 모드와 동일
버튼 세로 모드와 동일