개요
이 가이드라인은 유럽 경제 지역(EEA) 사용자에게 Google Play 결제 시스템의 대안인 사용자 선택권이 없는 개발자 제공 결제 시스템을 제공하는 프로그램에 참여하는 개발자에게 제공됩니다. EEA 사용자를 대상으로 하고 사용자 선택 결제 파일럿에 참여하며 Google Play 결제 시스템과 함께 개발자 제공 결제 시스템을 제공하는 개발자는 사용자 선택 결제 UX 가이드라인을 준수해야 합니다. 이 UX 가이드라인은 사용자가 처음 구매를 시작할 때 각 사용자에게 정보 화면을 표시하도록 개발자가 요구하여 일관된 사용자 환경을 유지하는 것을 목표로 합니다. 정보 화면의 사용자 대상 메시지 및 UI 사양은 다음 가이드라인에 따라 구현해야 합니다.
개발자 앱 |
사용자 정보 화면 |
언어 선택
사용자의 언어를 선택하여 아래 디자인 사양에서 해당하는 UI 텍스트 문자열을 확인하세요.
- 모든 언어 표시
- 언어 선택
- 불가리아어
- 카탈로니아어
- 크로아티아어
- 체코어
- 덴마크어
- 네덜란드어
- 영어
- 에스토니아어
- 핀란드어
- 프랑스어
- 독일어
- 그리스어
- 헝가리어
- 아이슬란드어
- 이탈리아어
- 라트비아어
- 리투아니아어
- 노르웨이어
- 폴란드어
- 포르투갈어(브라질)
- 포르투갈어(유럽)
- 루마니아어
- 슬로바키아어
- 슬로베니아어
- 스페인어
- 스웨덴어
사용자를 위한 정보
정보 화면을 통해 사용자는 변경사항의 영향을 파악할 수 있습니다.
화면 표시 시점
정보 화면은 첫 구매가 시작될 때 사용자에게 표시되어야 합니다. 이후에 동일한 사용자가 구매할 때는 이 메시지를 표시하지 않아도 됩니다. 사용자가 구매를 시작하기 위해 명시적인 행동을 취한 직후에 정보 화면을 표시합니다.
가격 표시 시점
정보 화면을 표시하기 전에 사용자에게 구매 가격을 명확하게 표시해야 합니다.
표시 방법
정보 화면은 모달 하단 시트에 표시되어야 합니다. 모달 하단 시트는 화면 하단에서 위쪽으로 애니메이션 처리되며 하단에 고정된 상태로 유지되는 모달 대화상자와 비슷합니다. 모달 하단 시트가 기본 화면의 모든 UI 요소 위로 올라갑니다. 기본 화면이 사용자 상호작용에 응답하지 않음을 나타내기 위해 기본 화면은 어두운 스크림 뒤로 가려집니다.
모달 하단 시트의 디자인 및 구현에 관한 자세한 내용은 Google Material Design을 참고하세요.
사용자의 액션
사용자가 구매를 시작하는 앱의 버튼 또는 다른 UI 요소를 탭하면 하단 시트가 트리거되어야 합니다. 사용자는 정보 화면에서 다음과 같은 2가지 작업을 할 수 있습니다.
확인
'확인' 버튼을 탭하면 정보 화면이 닫히고 결제 흐름의 다음 화면이 실행됩니다.
자세히 알아보기
'자세히 알아보기' 버튼을 탭하면 웹브라우저에서 Google 고객센터 도움말이 실행됩니다.
닫기
하단 시트를 닫고 기본 화면으로 돌아가려면 다음 방법으로 하단 시트를 닫으면 됩니다.
- 하단 시트 컨테이너 외부 탭하기
- Android 시스템의 '뒤로' 버튼 탭하기
정보 화면을 닫았거나 사용자가 '확인'을 탭한 후에는 정보 화면을 다시 표시할 필요가 없습니다.
예: 사용자가 앱에서 탭하여 구매하면 버튼이 정보 화면을 트리거합니다.
디자인 사양
정보 화면은 제목, 메시지, 버튼과 같은 3가지 구성요소로 나뉩니다. 3가지 구성요소 모두 필수 항목이며 이 가이드라인에 정의된 텍스트 및 UI 요소를 정확히 포함해야 합니다. 이 화면에는 추가 텍스트 또는 이미지를 포함하지 마세요. 다른 화면에는 추가 텍스트 또는 이미지를 자유롭게 포함해도 됩니다.
- 제목
- 텍스트 1
- 텍스트 2
- 버튼
- 하단 시트
- 배경 스크림
제목
| 텍스트 |
언어 선택
|
| 글꼴 | Roboto(모든 글꼴에 적용) |
| 글꼴 크기 | 18sp |
| 글꼴 색상 | #202124 |
텍스트 1
중요한 정보로 간주되는 핵심 사항을 강조표시하는 데 사용됩니다.
| 텍스트 |
언어 선택
|
| 글꼴 크기 | 14sp |
| 행 간격 | 20 |
| 글꼴 색상 | #5F6368 |
텍스트 2
우선순위가 낮은 보조 정보에 사용됩니다.
| 텍스트 |
언어 선택
|
| 글꼴 크기 | 12sp |
| 행 간격 | 16 |
| 글꼴 색상 | #5F6368 |
버튼 1
| 텍스트 |
언어 선택
|
| 텍스트 정렬 | 가운데 맞춤 |
| 글꼴 크기 | 14sp |
| 글꼴 두께 | Medium |
| 글꼴 색상 | #01875F |
| 배경 색상 | #FFFFFF |
| 크기 | 높이: 36, 너비: 컨테이너에 맞게 조정 |
| 모서리 반지름 | 4dp |
| 윤곽선 | 1dp, #DADCE0 |
| 링크 | Google Play 도움말 링크 |
버튼 2
| 텍스트 |
언어 선택
|
| 텍스트 정렬 | 가운데 맞춤 |
| 글꼴 크기 | 14sp |
| 글꼴 두께 | Medium |
| 글꼴 색상 | #FFFFFF |
| 배경 색상 | #01875F |
| 크기 | 높이: 36, 너비: 컨테이너에 맞게 조정 |
| 모서리 반지름 | 4dp |
| 링크 | 결제 흐름의 다음 화면으로 연결되는 링크 |
하단 시트
| 크기 | 높이: 가변, 너비: 100% |
| 모서리 반지름 | 8dp, 8dp, 0, 0 |
| 배경 | #FFFFFF |
| 안쪽 패딩 | 왼쪽: 24dp, 오른쪽: 24dp, 상단: 32dp, 하단: 24dp |
| 고도 | 8dp |
가로 모드
가로 모드에서는 하단 시트가 세로 모드보다 넓지만 그 밖에는 동일한 디자인 사양 및 기능을 따릅니다.
| 하단 시트 | 너비: 최대 500dp, 안쪽 패딩: 24dp |
| 제목 | 세로 모드와 동일 |
| 메시지 | 세로 모드와 동일 |
| 버튼 | 높이: 36, 너비: 컨테이너에 맞게 조정 |
사용자 선택권이 없는 개발자 제공 결제 시스템 관련 EEA 프로그램에 관한 자세한 내용과 자주 묻는 질문(FAQ)은 고객센터를 참고하세요.