러시아 사용자를 위해 개발하는 경우 이 국가에서는 Google 월렛이 제공되지 않으므로'휴대전화에 저장' 버튼을 사용하세요. 관련 확장 소재 및 가이드라인을 참고하세요. 러시아 이외의 사용자를 위해 개발하는 경우 아래 애셋을 다운로드하여 Google 월렛에 추가 버튼을 업데이트하세요.
문서의 이 섹션은 Google 월렛 앱에서 멋지게 표시되도록 이미지와 기타 사용자 인터페이스 요소를 만드는 데 도움이 되도록 설계되었습니다.
애셋
Google 월렛에 추가 버튼
Google 월렛에 추가 버튼은 사용자가 앱 또는 웹사이트에서 월렛으로 패스 또는 카드를 저장하도록 안내할 때마다 사용됩니다. Google 월렛에 추가 버튼은 Google Wallet API 흐름 중 하나를 호출해야 합니다. 이러한 흐름은 사용자가 안내에 따라 Android 기기와 Google 계정에 패스를 저장할 수 있는 Google 월렛 앱을 표시합니다. 이 버튼은 앱, 웹사이트 또는 이메일에서 사용할 수 있습니다.
Google 월렛에 추가 버튼은 Android XML, SVG, PNG 형식으로 제공됩니다.
애셋 다운로드 - Android XML 애셋 다운로드 - SVG 애셋 다운로드 - PNGGoogle 월렛에서 보기 버튼
Google 월렛에서 보기 버튼은 사용자를 월렛으로 딥 링크하여 이전에 저장된 패스 또는 카드를 보는 데 사용됩니다. 이 버튼은 앱, 웹사이트 또는 이메일에서 사용할 수 있습니다.
Google 월렛에서 보기 버튼은 SVG 및 PNG 형식으로 제공됩니다.
애셋 다운로드 - SVG 애셋 다운로드 - PNG사이트, 앱 또는 이메일 커뮤니케이션에 표시되는 모든 버튼은 이 페이지에 설명된 브랜드 가이드라인을 준수해야 합니다. 이러한 가이드라인의 예에는 다음이 포함되지만 이에 국한되지는 않습니다.
- 페이지의 다른 유사한 버튼 또는 요소와 비교한 크기
- 버튼의 모양과 색상을 변경해서는 안 됩니다.
- 여백
현지화된 버튼
현지화된 Google 월렛 버튼은 월렛을 사용할 수 있는 모든 시장에서 제공됩니다. 이러한 시장의 사용자를 위해 개발하는 경우 항상 위에 링크된 버튼을 사용하세요. 자체 버전의 버튼을 만들지 마세요. 현지화된 버전의 버튼을 사용할 수 없는 시장에서는 영어 버전의 버튼을 사용하세요.
Google 월렛에 추가 버튼은 네덜란드어, 노르웨이어, 덴마크어, 독일어, 라트비아어, 러시아어(벨라루스), 루마니아어, 리투아니아어, 마케도니아어, 말레이어, 베트남어, 보스니아어, 불가리아어, 세르비아어, 스웨덴어, 스페인어(라틴 아메리카), 스페인어(스페인), 슬로바키아어, 슬로베니아어, 아랍어, 아르메니아어, 아이슬란드어, 아제르바이잔어, 알바니아어, 에스토니아어, 영어(남아프리카 공화국, 싱가포르, 영국, 오스트레일리아, 인도, 캐나다, 미국), 우즈베크어, 우크라이나어, 이탈리아어, 인도네시아어, 일본어, 조지아어, 중국어(홍콩), 중국어(번체), 체코어, 카자흐어, 카탈루냐어, 크로아티아어, 키르기스어, 타갈로그어, 태국어, 튀르키예어, 포르투갈어(브라질), 포르투갈어(포르투갈), 폴란드어, 프랑스어(캐나다), 프랑스어(프랑스), 핀란드어, 헝가리어, 히브리어로 제공됩니다.
현지화된 이름
사용자의 이해를 돕기 위해 Google 월렛 제품 이름은 일부 시장에서 현지화됩니다. 이러한 국가의 사용자를 위해 개발하는 경우 웹, 이메일, 인쇄물에 항상 아래의 현지화된 이름을 사용하세요. 'Google 월렛'의 자체 현지화 버전을 만들지 마세요. 시장이 아래에 나열되어 있지 않으면 영어로 된 'Google 월렛'을 사용하세요.
| 국가 | 이름 |
|---|---|
| 벨라루스 | Google Кошелек |
| 브라질 | Carteira do Google |
| 칠레 | Billetera de Google |
| 체코 | Peněženka Google |
| 그리스 | Πορτοφόλι Google |
| 홍콩 | Google 錢包 |
| 리투아니아 | Google Piniginė |
| 폴란드 | Portfel Google |
| 포르투갈 | Carteira da Google |
| 루마니아 | Portofel Google |
| 슬로바키아 | Peňaženka Google |
| 대만 | Google 錢包 |
| 터키 | Google Cüzdan |
| 아랍에미리트 | محفظة Google |
| 우크라이나 | Google Гаманець |
|
미국(스페인어)
*UI가 스페인어로 되어 있는 경우 미국에서 이 이름을 사용하세요. |
Billetera de Google |
크기
레이아웃에 맞게 Google 월렛에 추가 버튼의 높이와 너비를 조정합니다. 페이지에 다른 버튼이 있는 경우 Google 월렛에 추가 버튼의 크기는 다른 버튼과 같거나 더 커야 합니다. Google 월렛에 추가 버튼을 다른 버튼보다 작게 만들지 마세요.
스타일
Google 월렛에 추가 버튼은 기본 및 압축의 두 가지 변형으로 제공됩니다. Google 월렛에 추가 버튼은 검은색으로만 제공됩니다. 현지화된 버전의 버튼이 제공됩니다. 텍스트를 직접 현지화하여 버튼을 만들지 마세요.
| 기본 | 가장 좁게 |
|---|---|
|
|
| 배경색이 흰색이거나 밝은색일 때는 기본 버튼을 사용하세요. | 기본 또는 전체 너비 버튼을 표시할 공간이 충분하지 않은 경우 압축 버튼을 사용합니다. |
여백
Google 월렛에 추가 버튼의 모든 면에 항상 최소 8dp의 여백을 유지합니다. 그래픽이나 텍스트가 여백을 침범하지 않도록 주의하시기 바랍니다.
최소 높이
모든 Google 월렛에 추가 버튼의 최소 높이는 48dp입니다.
권장사항 및 금지사항
| 권장사항 | 금지사항 |
|---|---|
| 권장사항: Google에서 제공하는 Google 월렛에 추가 버튼만 사용합니다. | 금지사항: Google 월렛에 추가 버튼을 직접 만들거나 버튼의 글꼴, 색상, 버튼 반경, 패딩을 변경하지 마세요. |
| 권장사항: 사이트 전체에서 동일한 스타일의 버튼을 사용하세요. | 금지사항: Google 월렛에 추가 버튼을 다른 버튼보다 작게 만들지 마세요. |
| 권장사항: Google 월렛에 추가 버튼의 크기는 다른 버튼과 같거나 더 커야 합니다. | 금지사항: 버튼 색상을 변경합니다. |
| 권장사항: Google 월렛에 추가 버튼의 크기를 조절할 때 버튼 비율을 동일하게 유지합니다. | 잘못된 예: 버튼의 크기를 자유롭게 조정합니다. |
| 권장사항: 제공된 현지화된 버전의 버튼을 사용합니다. | 금지사항: 현지화된 버전의 버튼을 직접 만들지 마세요. |
버튼 배치 권장사항
확인 앱 화면, 웹페이지 또는 이메일에 Google 월렛에 추가 버튼을 표시합니다. 다음 권장사항을 참고하여 UI 디자인을 진행하세요.
일반 패스
확인 앱 화면, 웹페이지 또는 이메일에 Google 월렛에 추가 버튼을 표시합니다. 사용자가 앱이나 웹사이트에서 패스에 액세스하는 위치에 Google 월렛에 추가 버튼을 배치하는 것이 좋습니다.
텍스트에서 Google 월렛 제품 이름 사용
텍스트를 사용하여 사용자에게 일반 패스가 기기에 저장되었음을 알릴 수 있습니다.
'G'와 'W'를 대문자로 표기
Google 월렛을 지칭할 때는 항상 대문자 'G'와 대문자 'W'를 사용하고 그 뒤에 소문자를 사용합니다. UI의 서체 스타일과 일치하는 경우가 아니면 전체 이름 'Google 월렛'을 대문자로 표기하지 마세요.
Google 월렛을 줄여 쓰지 않기
'Google'과 'Wallet'이라는 단어를 항상 작성합니다.
UI의 스타일과 일치시키기
'Google 월렛'을 UI의 나머지 텍스트와 동일한 글꼴 및 서체 스타일로 설정합니다. Google의 서체 스타일을 모방하지 마세요.
항상 현지화된 버전의 'Google 월렛' 사용
제공된 현지화된 문구에는 항상 'Google 월렛'이라고 작성합니다.
디자인
g:savetoandroidpay HTML 태그의 height 및 size 필드를 사용하여 Google 월렛에 추가 버튼의 높이와 너비를 수정합니다. textsize=large 사양을 사용하여 모바일 구현 또는 특별한 UI 요구사항이 있는 경우 텍스트 및 버튼 크기를 크게 늘립니다.
theme를 사용하여 버튼 색상을 설정합니다. 다음 표에서는 이러한 설정이 Google 월렛에 추가 버튼에 미치는 영향을 보여줍니다.
패스 생성 가이드라인
패스가 보기 좋고 제대로 작동하도록 하려면 글자 수 제한, 알림, 배경 색상, 히어로 이미지에 관한 다음 가이드라인을 준수하세요.
카드 배경 색상
hexBackgroundColor 필드로 배경 색상을 설정할 수 있습니다. 값을 설정하지 않으면 알고리즘이 로고를 분석하고 지배적인 색상을 찾아 배경 색상으로 사용합니다.
채도가 높은 '선명한' 영역(예: 네온 그린 #00FF00 또는 일렉트릭 시안 #00FFFF)은 피합니다. 이러한 색상은 눈의 피로를 유발하고 텍스트가 배경으로 '번지거나' 사라지게 합니다. 대신 추천 색상 중 하나를 사용하세요.
추천 색상
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
주요 이미지
class.heroImage 필드는 패스의 데이터 필드 아래에 전체 너비 이미지로 표시됩니다.
이미지가 아직 없다면 이미지를 추가해 보세요. 이미지가 있는 경우 아래 사양을 따르세요. 이미지를 선택하지 않으면 패스 카테고리의 대체 이미지가 표시됩니다.
다음은 히어로 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.
| 가이드라인 | 설명 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 선호하는 파일 형식 | PNG 패스의 배경색이 보이도록 하려면 투명한 PNG를 사용하세요. | ||||||||
| 권장 크기 | 1032x812픽셀 | ||||||||
| 가로세로 비율 | 1032:812(약 5:4) | ||||||||
| 권장사항 및 금지사항 |
|
콘텐츠
제목, 부제목, 필드 라벨, 필드 데이터: 사용자의 이해를 돕기 위해 제목과 기타 필드를 최대한 짧게 유지합니다. 다음 글자 수 제한은 영어에 적용되지만 다른 언어로 번역되므로 기기 및 지역에 따라 사용자 환경이 달라집니다. 확실하지 않은 경우 주요 세부정보를 전달하면서 콘텐츠를 간소화하세요.
| 필드 | 한도 |
|---|---|
| 제목 라벨 | < 47 characters |
| 부제목 라벨 | 88자(영문 기준) 미만 |
| 필드/제목 라벨(예: 날짜, 설명, 클래스, 승객 이름) | < 20 characters |
| 필드 데이터 라벨(예: 2026년 10월 19일, 이코노미 플러스) | 15자(영문 기준) 미만 |
가독성을 위해 데이터는 행당 2개 필드로 제한하고 가능하면 최대 3개 행으로 제한합니다.
알림
| 필드 | 한도 |
|---|---|
| 제목 | < 29 characters |
| 접힌 본문 | 40자(영문 기준) 미만 |
| 펼쳐진 본문 | < 80 characters |
기기가 작거나 글꼴 크기가 큰 사용자의 경우 잘림을 방지하기 위해 글자 수 제한을 준수하는 것이 좋습니다. 자세한 내용은 알림 | 모바일 | Android 개발자를 참고하세요.
로고
로고 이미지 가이드라인
Google 월렛은 로고를 원형으로 마스킹합니다.
다음은 로고 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.| 가이드라인 | 설명 |
|---|---|
| 선호하는 파일 형식 | PNG |
| 최소 크기 | 660x660픽셀 |
| 이미지 가로세로 비율 | 1:1 |
| 아트워크 가로세로 비율 | 1:1 |
| 실제 픽셀 크기 | 기기 크기에 맞게 조정 |
| 로고 원형 마스크 |
로고가 원형 디자인에 맞게 마스킹됩니다. 로고가 안전 영역 내에 맞는지 확인합니다. 로고를 미리 마스킹하지 마세요. 로고를 풀 블리드 배경색이 있는 정사각형에 배치합니다. 마스킹 시 잘리지 않도록 로고에 15% 의 여백이 있어야 합니다. 
|
Google 월렛은 로고를 원형으로 마스킹합니다.
와이드 로고 이미지 가이드라인
와이드 로고 이미지는 이벤트 티켓, 탑승권, QR 코드 대중교통 이용권, 포인트 카드, 혜택, 기프트 카드, 일반 패스, 일반 비공개 패스에서 지원됩니다. 다음은 와이드 로고 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.
| 가이드라인 | 설명 |
|---|---|
| 파일 형식 | 투명 PNG |
| 권장 크기 | 1280x400픽셀 |
| 최소 크기 |
높이 400px, 너비는 비례(가로세로 비율 섹션에 자세한 안내가 있음) 넓은 직사각형 이미지를 사용하세요. |
| 가로세로 비율 |
16:5 
|
| 색상 |
어두운 배경의 패스에는 대비가 높은 매우 밝은 색상(예: 흰색)을 사용합니다. 밝은 배경의 패스에는 대비가 높은 매우 어두운 색상(예: 검은색)을 사용합니다. 
|
추가 이미지
클래스 또는 객체의 *.imageModulesData.mainImage 필드는 패스에서 히어로 이미지 아래에 전체 너비 이미지로 표시됩니다. 사용자의 이해를 돕기 위해 패스에 추가 이미지가 필요한 경우에만 사용하세요.
추가 이미지 가이드라인
다음은 추가 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.
| 가이드라인 | 설명 |
|---|---|
| 선호하는 파일 형식 | PNG |
| 최소 크기 |
너비 1,860px, 높이 가변 넓은 직사각형 이미지를 사용하세요. 최상의 결과를 얻으려면 색상이 있는 배경의 이미지를 사용하세요. |
| 디스플레이 크기 |
템플릿의 전체 너비 및 비례 높이입니다. 
|
바코드 이미지
특정 카테고리에서는 바코드 위와 아래에 이미지를 표시할 수 있습니다.
바코드 위의 이미지
다음은 바코드 위의 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.
| 가이드라인 | 설명 |
|---|---|
| 선호하는 파일 형식 | PNG |
| 최대 높이 |
20dp(최대 가로세로 비율) 이미지가 2개인 경우 권장 크기는 높이 80px, 너비 80~780px입니다. 이렇게 하면 두 요소가 나란히 배치됩니다. 한 이미지가 정사각형이고 다른 이미지가 직사각형인 경우 이미지는 80x80px 및 780x80px여야 합니다. |
| 가로세로 비율 |
제약 없음 단일 이미지의 최대 높이와 너비가 20dp인 경우 20:1 가로세로 비율을 사용합니다. 바코드 위에 단일 이미지만 표시하려면 전체 너비를 사용합니다(패딩 제외). 이미지는 1600x80픽셀이어야 합니다. |
| 최대 디스플레이 크기(단일 이미지) | 높이 20dp, 너비 400dp |
바코드 아래 이미지
다음은 바코드 아래 이미지에 대한 사용자 인터페이스 권장사항 목록입니다.
| 가이드라인 | 설명 |
|---|---|
| 선호하는 파일 형식 | PNG |
| 최대 높이 |
20dp(최대 가로세로 비율) 권장 크기는 세로 80픽셀, 가로 80~1600픽셀입니다. 정사각형인 경우 80x80픽셀입니다. 직사각형인 경우 1600x80픽셀입니다. |
| 제한되지 않은 가로세로 비율 높이와 너비가 최대 20dp인 경우 20:1 가로세로 비율을 사용합니다. | 전체 너비 이미지(패딩 제외)를 원하는 경우 이미지 크기는 1600x80픽셀이어야 합니다. |
| 최대 디스플레이 크기는 높이 20dp, 너비 400dp입니다. |
모듈
모듈은 템플릿의 특정 섹션에 있는 필드 그룹을 나타냅니다. 다음 표에는 Google 월렛 앱에 카드가 올바르게 표시되도록 클래스와 객체에 포함해야 하는 모듈 수에 관한 가이드라인이 나와 있습니다.
| 가이드라인 | 설명 |
|---|---|
imageModulesData
|
클래스 또는 생성하는 객체에서 imageModulesData를 하나만 사용합니다.
|
infoModuleData
|
클래스 또는 생성하는 객체에서 최대 2개의
|
linksModuleData
|
클래스 또는 생성하는 객체에서 최대 4개의
클래스에 |
textModulesData
|
만든 클래스와 객체 사이에 최대 2개의
클래스에 프로그램 세부정보를 정의하는 |
infoModuleData
InfoModuleData에는 구성원 및 맞춤설정 가능한 정보가 포함되며 펼쳐진 뷰에 표시됩니다. 이 모듈을 사용하여 만료일, 보조 포인트 잔액, 저장된 금액 잔액과 같은 정보를 저장합니다.
linksModuleData
링크 모듈에는 웹페이지, 전화번호, 이메일 주소의 URI가 포함됩니다. 다음은 링크 모듈의 사용자 인터페이스 권장사항 목록입니다.
| 가이드라인 | 설정 예시 | 예시 이미지 |
|---|---|---|
URI를 웹사이트 또는 Google 지도의 위치에 할당할 때 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 월렛에 표시되는 패스에서 플랫폼으로 이동할 수 있습니다. 렌더링 방식을 확인하려면 패스 업종의 디자인 섹션으로 이동하세요.