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

사용자 선택 결제 파일럿의 임시 UX 가이드라인

개요

사용자 선택 결제 파일럿에 참여하는 개발자는 Google Play 결제 시스템과 함께 개발자 제공 결제 옵션을 제공하는 기능을 테스트할 수 있으며 이 파일럿은 사용자 선택 결제 옵션 제공의 효과를 알아보는 데 도움이 됩니다. 이러한 UX 가이드라인은 일관된 사용자 환경을 유지하고 사용자가 충분한 정보를 바탕으로 결정을 내릴 수 있도록 돕기 위해 마련되었습니다.

파일럿에 참여하는 경우 정보 화면과 별도의 결제 서비스 선택 화면을 표시해야 합니다. 정보 화면은 사용자가 구매를 처음 시작할 때만 각 사용자에게 표시하면 되지만, 결제 서비스 선택 화면은 구매 시마다 표시해야 합니다. 두 화면 모두 사용자에게 표시되는 메시지 및 UI 사양을 다음 가이드라인에 따라 구현해야 합니다.

개발자 앱

사용자 정보 화면

결제 서비스 선택 화면

국가 및 언어 선택

아래 국가별 디자인 사양에서 해당하는 UI 텍스트 문자열을 보려면 사용자의 국가와 언어를 선택하세요.

사용자를 위한 정보

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

화면 표시 시점

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

가격 표시 시점

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

표시 방법

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

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

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

이어가기

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

자세히 알아보기

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

닫기

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

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

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

예: 사용자가 구매를 위해 앱에서 탭하면 버튼이 정보 화면을 트리거합니다.

디자인 사양

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

제목
텍스트 1
텍스트 2
버튼
하단 시트
배경 스크림

제목

텍스트

국가 및 언어 선택

글꼴

Roboto(모든 글꼴에 적용)

글꼴 크기

18sp

글꼴 색상

#202124

텍스트 1

중요한 정보로 간주되는 핵심 사항을 강조표시하는 데 사용됩니다.

텍스트

국가 및 언어 선택

글꼴 크기

14sp

행 간격

글꼴 색상

#5F6368

텍스트 2

우선순위가 낮은 보조 정보에 사용됩니다.

텍스트

국가 및 언어 선택

글꼴 크기

12sp

행 간격

글꼴 색상

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