이 문서에서는 웹사이트 또는 앱에 'Google로 로그인' 버튼을 표시하는 방법에 관한 가이드라인을 제공합니다. 앱 인증 절차를 완료하려면 웹사이트 또는 앱이 이 가이드라인을 따라야 합니다.
Google ID 서비스 SDK는 항상 최신 Google 브랜딩 가이드라인을 준수하는 Google 계정으로 로그인 버튼을 렌더링합니다. 이러한 버튼은 웹사이트나 앱에 'Google 계정으로 로그인' 버튼을 표시하는 데 권장되는 방법입니다. Google에서 렌더링한 버튼 옵션을 사용할 수 없는 경우 HTML 버튼 요소를 렌더링하거나, 사전 승인된 브랜딩 애셋을 다운로드하거나, 원하는 경우 맞춤 'Google 계정으로 로그인' 버튼을 만들 수 있습니다.
HTML 버튼 요소 렌더링
Google로 로그인 버튼의 모양을 맞춤설정할 수 있는 HTML 구성 도구가 제공됩니다. 그런 다음 웹사이트에 버튼을 렌더링하는 HTML 및 CSS 스니펫을 다운로드할 수 있습니다.HTML 버튼 요소 생성
사전 승인된 브랜드 아이콘 다운로드
맞춤 이미지 버튼을 사용하는 대신 모든 플랫폼에서 사용할 수 있도록 PNG 및 SVG 형식으로 제공되는 Google 계정으로 로그인 버튼을 다운로드할 수 있습니다.제공된 이미지 버튼은 표준 및 아이콘 모드에서 사용할 수 있으며 아래 스타일 옵션이 포함됩니다.
- 테마 : 밝음, 중간, 어두움
- 모양 : 직사각형, 알약
| 테마 | 버튼 | 설명 |
|---|---|---|
| 밝게 |
|
표준 대형 밝은 테마 직사각형 Google 계정으로 로그인 버튼 |
| 어둡게 |
|
표준 어두운 테마의 필 모양 'Google 계정으로 로그인' 버튼 |
지원되는 버튼 모드
| 밝게 |
|
|
| 어둡게 |
|
|
| 보통 |
|
|
맞춤 Google 계정으로 로그인 버튼 만들기
Google Identity Services SDK 또는 이전 섹션에 설명된 다른 옵션을 사용하는 것이 좋습니다. Google 사용자가 Google 브랜드를 더 쉽게 알아볼 수 있기 때문입니다. 사용자가 작업 버튼을 더 쉽게 식별할 수 있을수록 상호작용할 가능성이 높아집니다.
하지만 앱 디자인에 맞게 버튼을 조정해야 한다면 다음 가이드라인을 준수하세요.
크기
다양한 기기 및 화면 크기에 따라 버튼의 크기를 조절할 수 있지만, Google 로고가 늘어나지 않도록 가로세로 비율은 유지해야 합니다.
텍스트
사용자가 버튼을 클릭하도록 유도하려면 클릭 유도문안 텍스트인 'Google 계정으로 로그인', 'Google 계정으로 가입' 또는 'Google 계정으로 계속'을 사용하는 것이 좋습니다. 앱 또는 웹사이트의 언어에 맞게 이 텍스트를 현지화하는 것은 허용되며 더 나은 사용자 환경을 제공하기 위해 권장됩니다. 앱에서 Google 계정에 가입하거나 등록하는 것이 아니라, Google 사용자 인증 정보를 사용해 앱에 로그인하거나 가입하게 된다는 점을 사용자가 명확하게 알 수 있어야 합니다.
색상
버튼의 기본 상태는 아래와 같습니다. 버튼에는 항상 Google 'G'의 표준 색상이 포함되어야 합니다.
| 테마 | 예 | |
|---|---|---|
| 밝게 |
|
채우기: #FFFFFF 획: #747775 | 1px | inside 글꼴: #1F1F1F | Roboto Medium | 14/20 |
| 어둡게 |
|
채우기: #131314 획: #8E918F | 1px | inside 글꼴: #E3E3E3 | Roboto Medium | 14/20 |
| 보통 |
|
채우기: #F2F2F2 획: 획 없음 글꼴: #1F1F1F | Roboto Medium | 14/20 |
글꼴
버튼 글꼴은 TrueType 글꼴인 Roboto Medium입니다. 설치하려면 먼저 Roboto 글꼴을 다운로드하고 다운로드 번들의 압축을 풉니다. Mac의 경우 Roboto-Medium.ttf를 더블클릭한 다음 '서체 설치'를 클릭합니다. Windows의 경우 파일을 '내 컴퓨터' > 'Windows' > 'Fonts' 폴더로 드래그합니다.
패딩
| Android |
|
| iOS |
|
| 웹 (모바일 + 데스크톱) |
|
| 참조 |
|
'Google 계정으로 로그인' 버튼에 사용되는 Google 로고
텍스트와 관계없이 Google 'G' 로고의 크기나 색상은 변경할 수 없습니다. 로고는 표준 색상 버전이어야 하며 흰색 배경에 표시되어야 합니다. Google 로고 크기를 변경해야 한다면 다운로드 번들에 포함된 로고 크기 중 하나를 먼저 사용해 보세요.
잘못된 버튼 디자인
 권장사항 버튼 경계 및 색 구성표에는 Google Material 3 디자인 가이드라인을 사용합니다. |
 금지사항 버튼 경계선 및 사용자 작업을 나타내는 텍스트 없이 Google 아이콘 또는 로고를 단독으로 사용합니다. |
 권장사항 어두운 모드, 밝은 모드, 중립 모드에서 Google 아이콘에 Google 브랜드 색상을 사용합니다. |
 금지사항 버튼에는 Google 'G' 로고의 흑백 버전을 사용합니다. |
 권장사항 접근성과 동일한 중요도를 위해 올바른 색상 모드의 버튼을 선택합니다. |
 금지사항 표준 색상의 Google 'G' 아이콘을 밝은색, 어두운색 또는 중립색이 아닌 색이 있는 배경에 표시합니다. |
 권장사항 고정된 패딩과 크기의 Google 'G'를 사용합니다. |
 금지사항 버튼에 사용되는 아이콘을 직접 만듭니다. |
 권장사항 필요한 경우 작업 버튼에 Google 'G'만 사용합니다. |
 금지사항 버튼에 'Google'이라는 단어만 사용하여 Google 계정으로 로그인 작업을 나타냅니다. |
Google로 로그인 브랜딩 권장사항
Google 계정으로 로그인 및 기타 서드 파티 로그인 옵션
Google 계정으로 로그인 버튼은 다른 서드 파티 로그인 옵션과 적어도 동등한 수준으로 눈에 띄어야 합니다. 예를 들어 버튼 크기는 거의 같아야 하고 시각적으로 비슷한 비중을 가져야 합니다.
기타 가이드라인
추가적인 범위를 요청하는 경우, 단계적 승인 (Android, iOS, 웹)을 사용하여 사용자가 API 액세스가 필요한 기능과 상호작용을 시작할 때만 승인 요청 메시지를 표시하세요.
YouTube 범위를 요청하는 경우 YouTube 버튼을 사용하세요.
Google Play 게임 서비스를 사용하는 경우 Google Play 게임 서비스 브랜드 가이드라인도 참고하세요.
사전에 Google의 서면 동의를 받지 않은 이상 이 가이드라인에 명시되지 않은 방식으로 Google 브랜드를 사용해서는 안 됩니다. 자세한 내용은 Google 브랜드 표시의 제3자 사용에 관한 가이드라인을 참고하세요.