Google ID 서비스가 FedCM API로 마이그레이션됩니다. 이전 가이드에 따라 잠재적인 변경사항을 검토하고 웹사이트에 대한 사용자 로그인에 부정적인 영향을 미치지 않도록 하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Google 계정으로 로그인 버튼 UX

버튼 렌더링

맞춤설정된 버튼에는 웹사이트를 승인한 첫 번째 Google 세션의 프로필 정보가 표시됩니다. 승인된 Google 세션에는 이전에 Google 계정으로 로그인한 적이 있는 웹사이트의 해당 계정이 있습니다.

맞춤설정된 버튼이 표시되면 사용자는 다음을 알 수 있습니다.

활성 Google 세션이 1개 이상 있습니다.
웹사이트에 해당 계정이 있습니다.

맞춤설정된 버튼을 사용하면 사용자가 버튼을 클릭하기 전에 Google 측과 웹사이트 측의 세션 상태를 빠르게 확인할 수 있습니다. 이는 웹사이트를 가끔만 방문하는 최종 사용자에게 특히 유용합니다. 계정이 생성되었는지 여부와 생성 방법을 잊어버릴 수 있습니다. 사용자에게 맞춤설정된 버튼을 통해 이전에 Google 계정으로 로그인을 사용한 적이 있음을 떠올리게 됩니다. 따라서 웹사이트에서 불필요한 중복 계정이 생성되는 것을 방지할 수 있습니다.

세션 상태를 나타내기 위해 맞춤설정된 버튼은 다음과 같은 방식으로 표시됩니다.

세션 1개: Google 측에 세션이 하나만 있습니다. 이 세션에서 클라이언트를 승인하고 웹사이트에 해당 계정이 있습니다.
여러 세션: Google 측에 여러 세션이 있습니다. 이러한 세션은 클라이언트를 승인합니다. 승인은 표시된 계정 옆에 있는 목록 화살표로 표시됩니다. 웹사이트에 해당하는 계정이 있는 세션이 하나 이상 있습니다.
세션 없음: Google 측에 세션이 없거나 아직 어떤 세션도 클라이언트를 승인하지 않았습니다.

버튼 설정에서 맞춤 버튼을 표시할 수 없는 경우를 제외하고 세션 상태가 적절하면 맞춤 버튼이 자동으로 표시됩니다. 다음과 같은 경우 맞춤설정 버튼이 표시되지 않습니다.

data-type 속성은 icon입니다.
data-size 속성이 medium 또는 small로 설정됩니다.
data-width 속성이 200px보다 작은 숫자로 설정됩니다.

이름 또는 이메일 주소가 너무 길어 버튼 안에 표시할 수 없는 경우 생략됩니다.

주요 사용자 경험

사용자 여정은 다음 상태에 따라 다릅니다.

Google 웹사이트의 세션 상태입니다. 다음 용어는 사용자 여정이 시작될 때 다양한 Google 세션 상태를 나타내는 데 사용됩니다.
- Has-Google-session: Google 웹사이트에 활성 세션이 하나 이상 있습니다.
- Google 세션 없음: Google 웹사이트에 활성 세션이 없습니다.
사용자 여정이 시작될 때 선택한 Google 계정에서 웹사이트를 승인했는지 여부입니다. 다음 용어는 다양한 승인 상태를 나타내는 데 사용됩니다.
- 신규 사용자: 선택한 계정에서 웹사이트를 승인하지 않았습니다.
- 재방문자: 선택한 계정에서 이전에 웹사이트를 승인한 적이 있습니다.