개요
로고는 아이덴티티이자 가장 영구적이고 적응력이 뛰어난 자산입니다. 모든 결제 공급업체는 Google 생태계 전반의 다양한 영역에서 사용할 로고 세트를 Google에 제공해야 합니다. 예를 들어 이러한 로고는 사용자가 결제 수단 (FOP)을 선택해야 하는 Google Pay 및 Google Play의 다양한 사용자 결제 여정에 표시됩니다. 아래 그림은 이러한 예를 보여줍니다.
사양 목록
결제 공급업체는 아래에 정의된 6가지 사양을 각각 충족하는 애셋을 Google에 제공합니다. 각 사양은 Google의 결제 흐름에서 다재다능하고 매력적이며 사람 중심의 경험을 제공하는 데 도움이 되는 크기, 색상 팔레트, 테두리 패딩, 기타 속성을 제어합니다. 각 사양에는 두 가지 파일 형식이 필요하며 총 12개의 필수 이미지 애셋이 필요합니다.
6가지 사양 목록은 아래와 같습니다.
권장사항 및 요구사항
권장사항
다음 권장사항을 따르면 로고가 선명하고, 다양한 화면 크기 및 OS 테마 (예: 밝은 모드와 어두운 모드)에 적응할 수 있습니다.
- 선명도와 세부정보를 위해 로고가 허용되는 최대 크기에 맞도록 전체 애셋 공간을 활용하세요.
- 로고를 디자인할 때는 Android 및 iOS의 밝은 테마와 어두운 테마에서 어두운 배경 앞에 로고가 어떻게 표시될지 고려하세요. 자세한 내용은 어두운 테마 고려사항을 참고하세요.
요구사항
로고 사양과 관계없이 아래 요구사항은 모든 로고가 준수해야 하는 일반적인 가이드라인입니다.
- '획'이나 윤곽선이 없는 투명한 경계 상자 (사양의 크기와 동일한 크기의 도형)를 포함합니다.
- 단색 로고는 하나의 색상만 사용해야 합니다. 자세한 내용은 단색 로고 고려사항을 참고하세요.
- 각 로고 사양의 규칙을 준수하는 파일 이름으로 파일을 내보냅니다.
어두운 테마 고려사항
최신 버전의 Android와 iOS 모두 모든 화면, 뷰, 메뉴에 어두운 색상 팔레트를 사용하는 어두운 테마를 지원합니다. 기본 Google Play 및 Google Pay Android 앱도 이 테마를 지원하며 테마가 사용 설정되면 인터페이스가 어두워집니다. 화면 색상이 어두울수록 로고의 색상과 전체 디자인을 선택하는 방식에 미치는 영향이 커집니다. 어두운 테마에서 배경이 어두워지면 여러 색상의 로고가 부분적으로 또는 완전히 읽을 수 없게 될 수 있습니다. 아래 그림을 참고하세요.
위 그림에서 어두운 테마에서 배경이 어두워지면 Acme Bank 로고의 어두운 회색 'Acme' 텍스트가 거의 사라지는 것을 확인할 수 있습니다. 다색 로고의 어두운 색상은 독립형 텍스트로 표시될 때 피해야 합니다. 어두운 테마의 로고 디자인에 관한 권장사항 목록은 어두운 테마용 다색 로고 디자인을 참고하세요.
어두운 테마에 관한 자세한 내용은 여기를 참고하세요.
어두운 테마용 다색 로고 디자인
Google UX팀의 프로그래매틱 조정 및 미세 조정이 어두운 테마에서 로고가 최적으로 작동하도록 지원하지만, 아래 권장사항을 따르면 필요한 변경사항의 수를 최소화하고 로고의 원래 모양을 더 잘 보존하며 화면의 다른 영역과 원활하게 조화되도록 할 수 있습니다.
- 파스텔, 회색과 흰색이 포함된 음영과 같은 채도가 낮은 색상을 사용합니다. 채도가 완전히 높은 색상은 사용하지 마세요.
- 흰색 및 다양한 흰색 음영과 같은 '대비' 색상을 사용합니다.
- 로고와 주변 영역 간의 허용되는 대비 비율을 준수합니다. 대비 비율에 관한 자세한 내용은 w3.org를 참고하세요.
- 어두운 배경에서는 그림자가 잘 보이지 않으므로 사용하지 마세요.
- 어두운 배경에서 로고 디자인을 테스트하고 실험해 보세요.
단색 로고 고려사항
밝은 테마와 어두운 테마의 색조
단일 색상 로고는 주변 배경과의 이상적인 색상 대비 비율을 유지하기 위해 색조가 조정됩니다. 예를 들어 아래 로고는 OS에서 밝은 테마를 사용하는지 어두운 테마를 사용하는지에 따라 색상이 변경됩니다.
허용되는 대비 비율 및 접근성에 관한 자세한 내용은 w3.org를 참고하세요.
애셋 크기 조절의 영향
크기 조정
로고는 다양한 화면 크기와 디스플레이 밀도에 맞게 조정되어야 하므로 Google은 앱과 웹사이트 내에서 사용되는 가장 큰 애셋 크기를 확보해야 합니다. 예를 들어 320x320px 요구사항은 Google Play의 가장 큰 로고 표시 크기이기 때문에 필요합니다. 더 작은 이미지는 이러한 크기에 맞게 확대해야 하므로 이미지가 흐려지거나 왜곡될 수 있습니다. 이 흐림은 주로 png와 같은 벡터가 아닌 이미지 형식에서 발생합니다. 아래 예에서는 작은 이미지가 320x320픽셀로 크기가 조정됩니다. 더 큰 크기에서 픽셀화 및 흐림을 확인하세요.
크기 줄이기
또한 Google에서 로고의 크기를 줄일 수 있습니다. 예를 들어 320x320px 애셋의 크기가 32x32px으로 조정될 수 있습니다. 이러한 축소는 로고 디자인의 세부사항에 영향을 미칠 수 있으므로 Google에 애셋을 제출하기 전에 테스트해야 합니다. 아래에 표시된 로고는 더 작은 크기로 축소해도 전체적인 모양이 유지됩니다.
사양 목록
아래 목록에는 로고에 대한 6가지 사양이 자세히 설명되어 있습니다. 각 사양은 SVG 및 PNG의 두 파일 형식이어야 합니다.
320x320px 컬러 정사각형
필수 속성
| 전체 측정기준 | 320 x 320px |
| 로고 크기 | 320 x 320px |
| 가로세로 비율 | 1:1 |
| 패딩 | 없음 |
| 테두리 | 없음 |
| 색상 팔레트 | 전체 RGB 색상 |
| 배경 색상 | 투명 |
필수 파일
| 형식 | 파일 이름 규칙 | 예 |
|---|---|---|
| PNG | [brand]_320x320_color_no_padding.png | acmebank_320x320_color_no_padding.png |
| SVG | [brand]_320x320_color_no_padding.svg | acmebank_320x320_color_no_padding.svg |
패딩이 있는 320x320px 컬러 정사각형
필수 속성
| 전체 측정기준 | 320 x 320px |
| 로고 크기 | 200 x 200px |
| 가로세로 비율 | 1:1 |
| 패딩 | 60px |
| 테두리 | 없음 |
| 색상 팔레트 | 전체 RGB 색상 |
| 배경 색상 | 투명 |
필수 파일
| 형식 | 파일 이름 규칙 | 예 |
|---|---|---|
| PNG | [brand]_320x320_color_padding.png | acmebank_320x320_color_padding.png |
| SVG | [brand]_320x320_color_padding.svg | acmebank_320x320_color_padding.svg |
1170x730px 컬러 타원형 직사각형
필수 속성
| 전체 측정기준 | 1170 x 730px |
| 로고 크기 | 1170 x 730px |
| 가로세로 비율 | 8:5 |
| 패딩 | 없음 |
| 테두리 | 없음 |
| 색상 팔레트 | 전체 RGB 색상 |
| 배경 색상 | 투명 |
필수 파일
| 형식 | 파일 이름 규칙 | 예 |
|---|---|---|
| PNG | [brand]_1170x730_color_no_padding.png | acmebank_1170x730_color_no_padding.png |
| SVG | [brand]_1170x730_color_no_padding.svg | acmebank_1170x730_color_no_padding.svg |
패딩이 있는 1170x730px 컬러 타원형 직사각형
필수 속성
| 전체 측정기준 | 1170 x 730px |
| 로고 크기 | 970 x 530px |
| 가로세로 비율 | 8:5 |
| 패딩 | 100px |
| 테두리 | 없음 |
| 색상 팔레트 | 전체 RGB 색상 |
| 배경 색상 | 투명 |
필수 파일
| 형식 | 파일 이름 규칙 | 예 |
|---|---|---|
| PNG | [brand]_1170x730_color_padding.png | acmebank_1170x730_color_padding.png |
| SVG | [brand]_1170x730_color_padding.svg | acmebank_1170x730_color_padding.svg |
320x320px 단일 색상 정사각형
필수 속성
| 전체 측정기준 | 320 x 320px |
| 로고 크기 | 320 x 320px |
| 가로세로 비율 | 1:1 |
| 패딩 | 없음 |
| 테두리 | 없음 |
| 색상 팔레트 | 검은색 (16진수 #000000) |
| 배경 색상 | 투명 |
필수 파일
| 형식 | 파일 이름 규칙 | 예 |
|---|---|---|
| PNG | [brand]_320x320_single_color_no_padding.png | acmebank_320x320_single_color_no_padding.png |
| SVG | [brand]_320x320_single_color_no_padding.svg | acmebank_320x320_single_color_no_padding.svg |
패딩이 있는 320x320px 단색 정사각형
필수 속성
| 전체 측정기준 | 320 x 320px |
| 로고 크기 | 200 x 200px |
| 가로세로 비율 | 1:1 |
| 패딩 | 60px |
| 테두리 | 없음 |
| 색상 팔레트 | 검은색 (16진수 #000000) |
| 배경 색상 | 투명 |
필수 파일
| 형식 | 파일 이름 규칙 | 예 |
|---|---|---|
| PNG | [brand]_320x320_single_color_padding.png | acmebank_320x320_single_color_padding.png |
| SVG | [brand]_320x320_single_color_padding.svg | acmebank_320x320_single_color_padding.svg |
로고 업로드
GSP - 로고 업로드를 사용하여 로고 애셋을 업로드합니다. 양식에 액세스하거나 양식을 사용하는 데 문제가 있는 경우 계정에 할당된 기술 참여 담당자 또는 기술 담당자에게 문의하세요.