이 페이지는 Cloud Translation API를 통해 ��역되었습니다.

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

개요

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

이용자를 위한 정보

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

정보 화면 표시 시점

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

가격 표시 시점

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

표시 방법

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

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

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

이어가기

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

자세히 알아보기

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

닫기

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

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

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

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

이용자 정보 화면

디자인 사양

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

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

제목
메시지
버튼
하단 시트
배경 스크림

제목

텍스트	결제 옵션 변경
글꼴	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가지 결제 옵션이 표시됩니다. 이용자가 충분한 정보를 바탕으로 결정을 내릴 수 있도록 각 결제 서비스 옵션에서 사용 가능한 결제 수단을 표시합니다. 이용자가 선택한 이후 해당 결제 서비스를 통해 구매를 완료하도록 합니다.