브랜드 가이드라인

문서의 이 섹션은 이미지와 기타 사용자 인터페이스 요소를 Google Pay 앱에서 보기 좋게 만드는 데 도움을 주기 위해 작성되었습니다.

히어로 이미지

class.heroImage 필드는 카드 본문에 전체 너비 배너로 표시됩니다.

히어로 이미지 가이드라인

다음은 히어로 이미지와 관련한 사용자 인터페이스 권장사항 목록입니다.

가이드라인 예시
권장 파일 형식: PNG
권장 크기는 1032 x 336px입니다. 넓은 직사각형 이미지를 사용하세요. 최상의 결과를 얻으려면 배경색과 함께 이미지를 사용하세요.
가로 세로 비율 3:1 이상.
표시되는 너비는 카드의 전체 너비가 되고, 높이는 비율에 맞게 조정됩니다.

전체 너비 이미지

클래스 또는 객체의 *.imageModulesData.mainImage 필드는 확장된 포인트 또는 쿠폰에 전체 너비 이미지로 표시됩니다.

전체 너비 이미지 가이드라인

다음은 전체 너비 이미지와 관련한 사용자 인터페이스 권장사항 목록입니다.

가이드라인 예시
권장 파일 형식: PNG
최소 크기는 너비 1860px이며 높이는 조정 가능합니다. 넓은 직사각형 이미지를 사용하세요. 최상의 결과를 얻으려면 배경색과 함께 이미지를 사용하세요.
가로 세로 비율 조정 가능.
표시되는 너비는 템플릿(흰색 배경의 '카드')의 전체 너비가 되고, 높이는 비율에 맞게 조정됩니다.
로고 이미지에 사용된 것과 동일한 색 구성표를 사용하세요.

바코드 이미지

특정 카테고리에서는 바코드 위와 아래에 이미지를 허용합니다.

바코드 위의 이미지

다음은 바코드 위의 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.

가이드라인 예시
권장 파일 형식: PNG  
최대 높이는 20dp입니다(가로 세로 비율이 최대일 때). 두 개의 이미지가 있으면 권장 크기는 높이 80px, 너비 80px~780px입니다. 이 크기로 설정하면 두 이미지를 나란히 배치할 수 있습니다. 하나의 이미지가 정사각형이고 다른 이미지가 직사각형인 경우 이미지를 80px x 80px 및 780px x 80px로 설정해야 합니다.
가로 세로 비율에는 제약이 없습니다. 최대 높이 및 너비가 20dp인 단일 이미지에는 가로 세로 비율 20:1을 사용하세요. 바코드 위에 이미지를 하나만 배치하려면 전체 너비(패딩 제외)를 선택하세요. 이미지를 1600px x 80px로 설정해야 합니다.
단일 이미지의 최대 표시 크기는 높이 20dp, 너비 400dp입니다.  

바코드 아래의 이미지

다음은 바코드 아래의 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.

가이드라인 예시
권장 파일 형식: PNG  
최대 높이는 20dp입니다(가로 세로 비율이 최대일 때). 권장 크기는 높이 80px, 너비 80px~1600px입니다. 사각형인 경우 80px x 80px이고 직사각형인 경우 1600px x 80px입니다.
가로 세로 비율에는 제약이 없습니다. 최대 높이 및 너비가 20dp인 이미지에는 가로 세로 비율 20:1을 사용하세요. 전체 너비 이미지(패딩 제외)를 사용하려면 이미지를 1600px x 80px로 설정해야 합니다.
최대 표시 크기는 높이 20dp, 너비 400dp입니다.  

모듈

모듈은 템플릿의 특정 섹션에 있는 여러 필드의 집합을 의미합니다. 다음 표는 카드가 Google Pay 앱에 제대로 표시되도록 클래스와 객체에 포함해야 하는 모듈의 개수에 관한 가이드라인을 제시합니다.

가이드라인 예시
만드는 클래스나 객체에 imageModulesData를 하나만 사용하세요.
만드는 클래스나 객체에 infoModuleData를 최대 2개까지 사용하세요. infoModuleData는 사용자 계정별 정보(예: '회원 이름', '멤버십 #')를 정의할 수 있습니다.
만드는 클래스나 객체에 linksModuleData URI를 최대 4개까지 사용하세요. 클래스에서 웹사이트 URI와 고객센터 전화번호에 각각 하나씩 총 2개의 linksModuleData URI를 지정할 수 있습니다. 객체에 2개의 linksModuleData URI를 설정하여 사용자 계정별 URI와 근처의 위치를 정의할 수 있습니다.
생성하는 클래스와 객체 사이에 최대 2개의 textModulesData 필드를 사용하세요. 클래스에 프로그램 세부정보를 정의하는 textModulesData 하나와 객체에 사용자 계정별 세부정보를 정의하는 다른 textModulesData를 지정할 수 있습니다.

infoModuleData

InfoModuleData는 회원 정보와 맞춤설정 정보를 포함하며 확장 보기에 표시됩니다. 만료일, 2차 포인트 잔액, 저장 가치 잔액 등의 정보를 정보 모듈에 저장해야 합니다.

linksModuleData

링크 모듈에는 웹페이지, 전화번호, 이메일 주소의 URI가 포함됩니다. 다음은 링크 모듈에 대한 사용자 인터페이스 권장사항 목록입니다.

가이드라인 예시
웹사이트나 Google 지도의 위치에 대한 URI를 정의할 때는 http: 프리픽스를 사용하세요. 소비자는 이 프리픽스를 통해 링크를 터치하여 웹사이트로 이동하거나 Google 지도에서 위치를 볼 수 있습니다. 또한 이 프리픽스를 사용하면 카드의 설명 앞에 링크 또는 지도 아이콘이 표시됩니다. 'uri': 'http://maps.google.com/?q=google'

'uri': 'http://developer.google.com/pay/passes/'
전화번호를 정의할 때는 tel: 프리픽스를 사용하세요. 소비자는 이 프리픽스를 통해 링크를 터치하여 전화를 걸 수 있습니다. 또한 이 프리픽스를 사용하면 카드의 설명 앞에 전화기 아이콘이 표시됩니다. 'uri': 'tel:6505555555'
이메일 주소를 정의할 때는 mailto: 프리픽스를 사용하세요. 소비자는 이 프리픽스를 통해 링크를 터치하여 해당 이메일 주소로 이메일을 보낼 수 있습니다. 또한 이 프리픽스를 사용하면 카드의 설명 앞에 이메일 아이콘이 표시됩니다. 'uri': 'mailto:jonsmith@email.com'

제목, 라벨, 이름

제목, 라벨, 이름에 있는 각 단어의 첫 글자는 대문자로 표기해야 합니다.

콘텐츠 정책

패스에 있는 각 필드의 콘텐츠는 Payments 콘텐츠 정책을 준수해야 합니다. 클래스에서 참조되는 웹사이트의 콘텐츠도 이 정책을 준수해야 합니다.

Google Pay에 저장 버튼

디자인

Google Pay에 저장 버튼의 높이와 너비를 수정하려면 g:savetoandroidpay HTML 태그의 height 및 size 필드를 사용하세요. textsize=large를 지정하면 텍스트 크기와 버튼 크기가 매우 크게 표시되므로 모바일 구현이나 특별한 UI 요구사항이 있는 경우에 유용합니다.

theme을 사용하여 버튼의 색상을 설정하세요. 다음 표는 이러한 설정이 Google Pay에 저장 버튼에 미치는 영향을 보여줍니다.

설정 결과
theme/dark
theme/light

게재위치

개발한 패스를 사용자가 저장하고 사용하고 적극적으로 활용할 수 있게 하려면 모든 상황별 플로우에 Google Pay에 저장(S2GP) 버튼이나 링크를 게재하는 것이 좋습니다. 일반적으로 이 버튼은 Print Offer(쿠폰 인쇄) 버튼과 같이 용도가 유사한 작업 버튼 옆에 게재하는 것이 좋습니다.

아래의 권장사항은 플로우에 Google Pay에 저장 버튼을 통합하는 방법으로, 일부 파트너들 사이에서 우수한 효과가 검증되었습니다.

포인트 카드

사용자가 Android 앱이나 웹사이트에서 포인트 번호나 포인트 카드를 보는 플로우에 Google Pay에 저장 버튼을 게재하는 방법을 생각해보세요. 사용자가 앱에 로그인하거나 가입한 후에 이 버튼이 사용자에게 표시되도록 하여 성공을 거둔 파트너들도 있습니다.

기프트 카드

사용자가 웹사이트나 앱에서 기프트 카드를 구입한 후에 확인 화면에 Google Pay에 저장 버튼을 게재하는 방법을 생각해 보세요. 기프트 카드 수신자가 받는 이메일, SMS 또는 확인 화면에 게재할 수도 있습니다.

쿠폰

사용자가 쿠폰에 액세스하는 웹사이트나 앱에, 또는 쿠폰 배포에 사용되는 이메일이나 SMS에 저장 링크를 사용하여 Google Pay에 저장 버튼을 게재할 수 있습니다.

티켓

사용자가 웹사이트나 앱에서 티켓을 구입할 때 구매 플로우의 마지막에 이 버튼을 게재하거나 구매 후 확인 이메일이나 SMS에 게재할 수 있습니다. 사용자가 앱이나 웹사이트에서 티켓에 액세스하는 위치와 동일한 곳에 Google Pay에 저장 버튼을 게재하는 방법을 생각해보세요.

탑승권

데스크톱과 모바일 웹사이트 또는 모바일 앱에서 체크인 플로우의 마지막에 이 버튼을 게재할 수 있습니다. 또한 사용자가 웹사이트나 모바일 앱에서 탑승권을 확인하는 화면이나 체크인 후 확인 이메일 또는 SMS에 게재할 수도 있습니다.

다운로드

사용자가 링크를 사용하여 포인트, 기프트 카드, 쿠폰을 다운로드할 수 있는 경우 딥 링크 앞에 Google Pay 버튼 이미지를 게재하면 사용자에게 일관된 경험을 제공할 수 있습니다. 애셋 다운로드를 클릭하여 여러 언어의 EPS 또는 SVG 파일로 제공되는 Google Pay 버튼을 다운로드합니다.

애셋 다운로드 - EPS 애셋 다운로드 - SVG

파트너 플랫폼 데이터 배치

사용자가 패스에 대한 다양한 기능을 제공하는 앱이나 웹사이트에 액세스할 수 있게 하려면 패스의 클래스 또는 객체 linksModuleData.* 속성에 앱의 딥 링크나 웹사이트를 통합하세요. 그러면 사용자가 Google Pay에 표시되는 패스에서 해당 플랫폼으로 이동할 수 있습니다. 어떻게 렌더링되는지 확인하려면 패스 카테고리의 디자인 섹션을 참조하세요.