브랜드 가이드라인

러시아 사용자를 대상으로 개발하는 경우 해당 국가에서는 Google 월렛을 사용할 수 없으므로'휴대전화에 저장' 버튼을 사용하세요. 관련 애셋 및 가이드라인을 참고하세요. 러시아 외 사용자를 대상으로 개발하는 경우 아래 애셋을 다운로드하여 Google 월렛에 추가 버튼을 업데이트하세요.

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

애셋

Google 월렛에 추가 버튼

Google 월렛에 추가 버튼은 사용자에게 앱이나 웹사이트의 패스나 카드를 월렛에 저장하도록 안내할 때마다 사용됩니다. Google 월렛에 추가 버튼은 Google Wallet API 흐름 중 하나를 호출해야 합니다. 이러한 플로우에는 사용자가 안내에 따라 Android 기기 및 Google 계정에 패스를 저장할 수 있는 Google 월렛 앱이 표시됩니다. 이 버튼은 앱, 웹사이트 또는 이메일에서 사용할 수 있습니다.

Google 월렛에 추가 버튼은 Android XML, SVG, PNG 형식으로 사용할 수 있습니다.

애셋 다운로드 - Android XML 애셋 다운로드 - SVG 애셋 다운로드 - PNG

Google 월렛 버튼에서 보기

Google 월렛에서 보기 버튼을 사용하면 사용자를 월렛에 딥 링크로 연결하여 이전에 저장한 패스나 카드를 볼 수 있습니다. 이 버튼은 앱, 웹사이트 또는 이메일에서 사용할 수 있습니다.

Google 월렛에서 보기 버튼은 SVG 및 PNG 형식으로 사용할 수 있습니다.

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

사이트, 앱 또는 이메일 커뮤니케이션에 표시되는 모든 버튼은 이 페이지에 설명된 브랜드 가이드라인을 준수해야 합니다. 이러한 가이드라인의 예는 다음과 같습니다.

  • 페이지의 다른 유사한 버튼 또는 요소와 비교한 크기
  • 버튼의 모양과 색상을 변경해서는 안 됩니다.
  • 여백

현지화된 버튼

현지화된 Google 월렛 버튼은 월렛을 사용할 수 있는 모든 시장에 제공됩니다. 이러한 시장의 사용자를 대상으로 개발하는 경우 항상 위에 링크된 버튼을 사용하세요. 자체 버튼 버전을 만들지 마세요. 현지화된 버전의 버튼이 거주 중인 지역에서 제공되지 않는 경우 영어 버전의 버튼을 사용하세요.

Google 월렛에 추가 버튼은 그리스어(러시아어, 스페인어, 우라비아어, 슬로바키아어, 보스니아어, 프랑스어, 슬로바키아어, 보스니아어, 프랑스어, 슬로바키아어, 보스니아어, 프랑스어, 슬로바키아어, 영어, 슬로바키아어, 영어, 슬로바키아어, 영어, 슬로바키아어, 영어, 슬로바키아어, 영어, 슬로바키아어, 포르투갈어, 폴란드어, 프랑스어, 에스토니아어, 영어, 슬로바키아어, 영어, 슬로베니아어, 프랑스어, 포르투갈, 폴란드어, 프랑스어, 포르투갈, 포르투갈, 프랑스어, 필리핀어,

현지화된 이름

명확성을 위해 Google 월렛 제품 이름은 일부 시장에서만 현지화됩니다. 이러한 국가의 사용자를 위해 개발하는 경우 웹, 이메일, 인쇄에 항상 아래의 현지화된 이름을 사용합니다. 'Google 월렛'의 현지화된 버전을 만들지 마세요. 거주 중인 시장이 아래 목록에 없다면 영어로 'Google 월렛'을 사용하세요.

국가 이름
벨라루스 Google Кошелек
브라질 Carteira do Google
칠레 Google 청구서
체코 페네첸카 Google
그리스 의미
홍콩 Google 錢
리투아니아 Google 피니지네
폴란드 Google 포트폴리오
포르투갈 Carteira da Google
루마니아 포르토펠 Google
슬로바키아 페나젠카 Google
타이완 Google 錢
터키 Google 쿠즈단
아랍에미리트 Google
우크라이나 Google 우크라이나
미국 (스페인어)
*UI가 스페인어인 경우 미국에서 이 이름 사용
Google 청구서

크기

Google 월렛에 추가 버튼의 높이와 너비를 레이아웃에 맞게 조정합니다. 페이지에 다른 버튼이 있는 경우 Google 월렛에 추가 버튼의 크기는 같거나 더 커야 합니다. Google 월렛에 추가 버튼을 다른 버튼보다 작게 만들지 마세요.

스타일

Google 월렛에 추가 버튼에는 기본 버튼과 압축 버튼의 두 가지 변형이 있습니다. Google 월렛에 추가 버튼은 검은색으로만 제공됩니다. 버튼의 현지화된 버전이 제공됩니다. 텍스트를 직접 현지화하여 버튼을 만들지 마세요.

기본 좁게
Google 월렛에 기본 추가 버튼 압축된 'Google 월렛에 추가' 버튼
배경색이 흰색이거나 밝은 색일 때 기본 버튼을 사용하세요. 기본 너비 또는 전체 너비를 위한 공간이 충분하지 않으면 압축된 버튼을 사용합니다.

여백

Google 월렛에 추가 버튼의 사방에 항상 8dp의 최소 여백을 유지하세요. 그래픽이나 텍스트가 여백을 침범하지 않도록 주의하시기 바랍니다.

'Google 월렛에 추가' 버튼의 사방에 8dp의 공간이 있어야 합니다.

최소 높이

모든 Google 월렛에 추가 버튼의 높이는 48dp 이상이어야 합니다.

'Google 월렛에 추가' 버튼의 높이는 48dp 이상이어야 합니다.

권장사항 및 금지사항

권장사항 금지사항
권장: Google에서 제공하는 Google 월렛에 추가 버튼만 사용하세요. 금지: Google 월렛에 추가 버튼을 직접 만들거나 글꼴, 색상, 버튼 반경 또는 버튼 내 패딩을 어떤 식으로든 변경합니다.
권장: 사이트 전체에서 동일한 버튼 스타일을 사용하세요. 금지: Google 월렛에 추가 버튼을 다른 버튼보다 작게 만듭니다.
권장: Google 월렛에 추가 버튼의 크기는 다른 버튼의 크기와 같거나 커야 합니다 금지: 버튼 색상을 변경합니다.
권장: Google 월렛에 추가 버튼의 크기를 조절할 때 버튼 비율을 동일하게 유지하세요. 금지: 버튼 크기를 자유롭게 조정합니다.
권장사항: 제공된 현지화된 버전의 버튼을 사용하세요. 금지: 버튼의 현지화된 자체 버전을 만듭니다.

버튼 배치 권장사항

확인 앱 화면, 웹페이지 또는 이메일에 Google 월렛에 추가 버튼을 표시합니다. 다음 권장사항을 참고하여 UI 디자인에 관한 가이드를 받으세요.

포인트, 기프트 카드, 쿠폰

확인 화면에 Google 월렛에 추가 버튼이 표시됩니다. 웹사이트나 앱에 버튼을 표시하거나 관련 이메일에 버튼을 포함할 수도 있습니다.

기프트 카드     커피 포인트 카드

텍스트에 Google 월렛 제품 이름 사용

텍스트를 사용하여 포인트 카드가 기기에 저장되었음을 사용자에게 알릴 수 있습니다.

'G'와 'W'를 대문자로 표기합니다.

Google 월렛을 언급할 때는 항상 대문자 'G'와 대문자 'W' 다음에 소문자를 사용하세요. UI의 활자 스타일과 일치시키는 경우를 제외하고 'Google Wallet' 전체 이름을 대문자로 표기하지 마세요.

Google 월렛을 줄여 쓰지 않기

항상 'Google'과 '월렛'이라는 단어만 표기합니다.

UI 스타일에 맞추기

'Google 월렛'을 UI의 나머지 텍스트와 같은 글꼴 및 활자 스타일로 설정합니다. Google의 활자 스타일을 모방하지 마세요.

항상 현지화된 'Google 월렛' 버전 사용

현지화된 사본에는 항상 'Google 월렛'이라고 씁니다.

디자인

Google 월렛에 추가 버튼의 높이와 너비를 수정하려면 g:savetoandroidpay HTML 태그의 heightsize 필드를 사용하세요. textsize=large 사양을 사용하면 모바일 구현이나 특별한 UI 요구사항이 있는 경우에 맞게 텍스트와 버튼 크기를 크게 늘릴 수 있습니다.

theme를 사용하여 버튼의 색상을 설정합니다. 다음 표는 이러한 설정이 Google 월렛에 추가 버튼에 미치는 영향을 보여줍니다.

주요 이미지

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

히어로 이미지 가이드라인

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

가이드라인 설명
선호하는 파일 형식 PNG
권장 크기

1032x336px

넓은 직사각형 이미지를 사용합니다.

최상의 결과를 얻으려면 배경색과 함께 이미지를 사용하세요.

가로세로 비율 3:1 이상
디스플레이 크기

카드의 전체 너비와 이에 비례하는 높이입니다.

디스플레이 크기는 3:1 이상의 가로세로 비율을 사용해야 합니다.

전체 너비 이미지

클래스 또는 객체의 *.imageModulesData.mainImage 필드는 패스에 전체 너비 이미지로 표시됩니다.

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

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

가이드라인 설명
선호하는 파일 형식 PNG
최소 크기

너비 1860픽셀, 가변 높이

넓은 직사각형 이미지를 사용합니다.

최상의 결과를 얻으려면 배경색과 함께 이미지를 사용하세요.

가로세로 비율 변수
디스플레이 크기

템플릿의 전체 너비와 비례하는 높이입니다.

디스플레이 크기는 3:1 이상의 가로세로 비율을 사용해야 합니다.
로고에 사용한 것과 동일한 색 구성표를 사용하세요.

바코드 이미지

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

바코드 위의 이미지

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

가이드라인 설명
선호하는 파일 형식 PNG
최대 높이

20 dp (최대 가로세로 비율)

두 개의 이미지가 있으면 권장 크기는 높이 80px, 너비 80~780px입니다. 이렇게 하면 두 요소를 나란히 배치할 수 있습니다.

한 이미지가 정사각형이고 다른 이미지가 직사각형인 경우 이미지는 80x80px 및 780x80px이어야 합니다.

가로세로 비율

제약 없음. 최대 높이와 너비가 20dp인 단일 이미지에는 가로세로 비율 20:1을 사용하세요.

바코드 위에 단일 이미지만 원하는 경우 전체 너비(패딩 제외)를 선택합니다. 이미지는 1600x80픽셀이어야 합니다.

최대 표시 크기 (단일 이미지) 높이 20dp, 너비 400dp

바코드 아래의 이미지

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

가이드라인 설명
선호하는 파일 형식 PNG
최대 높이

20 dp (최대 가로세로 비율)

권장 크기는 높이 80px, 너비 80~1600px입니다.

정사각형인 경우, 80x80픽셀

직사각형인 경우 1600x80픽셀

가로세로 비율 제약 없음 최대 20dp 높이와 너비에는 가로세로 비율 20:1을 사용하세요. 전체 너비 이미지 (패딩 제외)를 사용하려면 이미지가 1600x80픽셀이어야 합니다.
최대 디스플레이 크기는 높이 20dp, 너비 400dp입니다.  

모듈

모듈은 템플릿의 특정 섹션에 있는 필드 그룹을 나타냅니다. 다음 표에는 카드가 Google 월렛 앱에 올바르게 표시되도록 클래스 및 객체에 포함해야 하는 모듈 수에 관한 가이드라인이 나와 있습니다.

가이드라인 설명
imageModulesData 만드는 클래스나 객체에 imageModulesData를 하나만 사용하세요.
infoModuleData

만드는 클래스나 객체에 infoModuleData를 최대 2개까지 사용하세요.

infoModuleData는 '회원 이름', '멤버십 #'과 같은 사용자 계정별 정보를 정의할 수 있습니다.

linksModuleData

만드는 클래스나 객체에 linksModuleData URI를 최대 4개까지 사용합니다.

클래스에 linksModuleData URI가 두 개 있을 수 있습니다. 하나는 웹사이트 URI이고 다른 하나는 고객센터 전화번호입니다. 객체에 있는 두 개의 linksModuleData URI가 사용자 계정별 URI와 근처 위치를 정의할 수 있습니다.

textModulesData

만드는 클래스와 객체 사이에 최대 2개의 textModulesData 필드를 사용합니다.

클래스에 프로그램 세부정보를 정의하는 textModuleData URI 하나와 사용자 계정별 세부정보를 정의하는 객체에 또 다른 textModulesData가 있을 수 있습니다.

infoModuleData

InfoModuleData는 회원 정보와 맞춤설정 정보를 포함하며 확장 뷰에 표시됩니다. 이 모듈을 사용하여 만료일, 2차 포인트 잔액 또는 저장 가치 잔액과 같은 정보를 저장하세요.

linksModuleData

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

가이드라인 설정 예시 예시 이미지
웹사이트나 Google 지도의 위치에 URI를 할당할 때 http: 프리픽스를 사용합니다. 소비자가 이 프리픽스를 통해 링크를 터치하여 웹사이트로 이동하거나 Google 지도에서 위치를 볼 수 있습니다. 또한 이 프리픽스를 사용하면 카드의 설명 앞에 링크 또는 지도 아이콘이 표시됩니다. 'uri': 'http://maps.google.com/?q=google' 지도 위치를 나타내는 핀 표시기입니다.
'uri': 'http://developer.google.com/wallet/' 웹사이트를 나타내는 지구본 표시기
전화번호를 정의할 때는 tel: 접두어를 사용합니다. 소비자가 이 프리픽스를 통해 링크를 터치하여 전화를 걸 수 있습니다. 또한 이 프리픽스를 통해 카드의 텍스트 설명 앞에 전화기 아이콘이 생성됩니다. 'uri': 'tel:6505555555' 전화 링크의 전화 표시기입니다.
이메일 주소를 정의할 때는 mailto: 접두어를 사용합니다. 소비자는 이 프리픽스를 통해 링크를 터치하여 해당 주소로 이메일을 보낼 수 있습니다. 또한 이 프리픽스를 사용하면 카드의 텍스트 설명 앞에 이메일 아이콘이 생성됩니다. 'uri': 'mailto:jonsmith@email.com' 이메일 전송 링크의 메일 표시기입니다.

제목, 라벨, 이름

각 단어가 대문자로 시작하도록 제목의 첫 글자를 대문자로 표기하고 제목, 라벨, 이름을 씁니다.

콘텐츠 정책

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

파트너 플랫폼 데이터 배치

사용자가 패스와 관련된 다양한 기능이 포함된 앱이나 웹사이트에 액세스할 수 있도록 패스의 클래스 또는 객체 linksModuleData.* 속성에 앱의 딥 링크나 웹사이트를 통합해야 합니다. 이렇게 하면 사용자가 Google 월렛에 표시되는 패스에서 플랫폼으로 이동할 수 있습니다. 어떻게 렌더링되는지 확인하려면 패스 카테고리의 디자인 섹션으로 이동하세요.