이 페이지에서는 Google 계정으로 로그인 버튼의 사용자 환경 (UX)을 설명합니다.
버튼 렌더링
맞춤설정된 버튼에는 웹사이트를 승인한 첫 번째 Google 세션의 프로필 정보가 표시됩니다. 승인된 Google 세션에는 이전에 Google 계정으로 로그인한 적이 있는 웹사이트의 해당 계정이 있습니다.
맞춤설정된 버튼이 표시되면 사용자는 다음을 알 수 있습니다.
- 활성 Google 세션이 하나 이상 있습니다.
- 웹사이트에 해당 계정이 있습니다.
맞춤설정된 버튼을 사용하면 사용자가 버튼을 클릭하기 전에 Google 측과 웹사이트 측의 세션 상태를 빠르게 확인할 수 있습니다. 이는 웹사이트를 가끔만 방문하는 최종 사용자에게 특히 유용합니다. 계정이 생성되었는지 여부와 생성 방법을 잊어버릴 수 있습니다. 맞춤설정된 버튼은 이전에 Google 계정으로 로그인을 사용했음을 알려줍니다. 따라서 웹사이트에서 불필요한 중복 계정이 생성되는 것을 방지할 수 있습니다.
세션 상태를 나타내기 위해 맞춤설정된 버튼은 다음과 같은 방식으로 표시됩니다.
세션 1개: Google 측에 세션이 하나만 있습니다. 이 세션에서 클라이언트를 승인하고 웹사이트에 해당 계정이 있습니다.
여러 세션: Google 측에 여러 세션이 있습니다. 이러한 세션은 클라이언트를 승인합니다. 승인은 표시된 계정 옆에 있는 목록 화살표로 표시됩니다. 웹사이트에 해당하는 계정이 있는 세션이 하나 이상 있습니다.
세션 없음: Google 측에 세션이 없거나 아직 세션에서 클라이언트를 승인하지 않았습니다.
버튼 설정에서 맞춤 버튼을 표시할 수 없는 경우를 제외하고 세션 상태가 적절하면 맞춤 버튼이 자동으로 표시됩니다. 다음과 같은 경우 맞춤설정 버튼이 표시되지 않습니다.
data-type
속성은icon
입니다.data-size
속성이medium
또는small
로 설정됩니다.data-width
속성이 200px보다 작은 숫자로 설정됩니다.- 서드 파티 쿠키가 차단되었으며 버튼의 FedCM 버전이 사용 설정되지 않았습니다.
이름이나 이메일 주소가 너무 길어 버튼 안에 표시할 수 없는 경우 생략됩니다.
Federated Credential Manager (FedCM)
웹용 개인 정보 보호 샌드박스에서는 Google ID 서비스 및 사용자 로그인에 중요한 변경사항이 도입됩니다. Google 계정으로 로그인 맞춤설정 버튼에 영향을 미칩니다. 이 버튼은 로그인 흐름에 영향을 미치지 않지만 서드 파티 쿠키가 차단된 경우 재방문자에게 맞춤 버튼이 표시되지 않습니다.
제휴 사용자 인증 관리 API (FedCM) 버튼 흐름을 사용하면 사용자는 사이트에서 맞춤설정된 Google 계정으로 로그인 버튼을 볼 수 있습니다. 기본적으로 FedCM은 사용 중지되어 있지만 속성 (HTML/JavaScript) 하나를 변경하여 FedCM을 사용 설정할 수 있습니다. FedCM 버튼의 이점은 다음과 같습니다.
재방문 사용자 환경 개선: 사용자가 기존 계정을 인식할 수 있으므로 재방문 사용자 로그인 프로세스가 간소화됩니다. 인식 개선은 클릭률 (CTR)을 높이는 것으로 입증되었습니다. 또한 FedCM이 사용 설정되지 않은 버튼 흐름과 달리 FedCM 버튼 흐름은 자동 선택 기능을 지원합니다. 활성 Google 세션이 있는 재방문 사용자는 버튼을 클릭한 후 계정 선택기 메시지를 우회하여 자동으로 로그인됩니다.
향상된 기능 통합: 원탭 및 자동 로그인 기능이 통합되어 단일 신뢰 당사자 (RP)의 Google 기능을 사용한 모든 제휴 인증 관리 (FedCM) 로그인이 함께 작동할 수 있습니다. Chrome에서는 원탭 자동 로그인 흐름의 일회성 재확인을 실행하기 위해 FedCM 버튼 흐름의 사용자 동작을 기록하고 처리합니다. 이렇게 하면 모든 기능에서 원활한 환경을 경험할 수 있습니다.
주요 사용자 경험
사용자 여정은 다음 상태에 따라 다릅니다.
Google 웹사이트의 세션 상태입니다. 다음 용어는 사용자 여정이 시작될 때 다양한 Google 세션 상태를 나타내는 데 사용됩니다.
- Has-Google-session: Google 웹사이트에 활성 세션이 하나 이상 있습니다.
- No-Google-session: Google 웹사이트에 활성 세션이 없습니다.
사용자 여정이 시작될 때 선택한 Google 계정에서 웹사이트를 승인했는지 여부입니다. 다음 용어는 다양한 승인 상태를 나타내는 데 사용됩니다.
- 신규 사용자: 선택한 계정에서 웹사이트를 승인하지 않았습니다.
- 재방문자: 선택한 계정에서 이전에 웹사이트를 승인한 적이 있습니다.
Has-Google-session 신규 사용자 여정
Google 계정으로 로그인 버튼
계정 선택기 페이지
새 사용자 동의 페이지
사용자가 확인하면 ID 토큰이 웹사이트와 공유됩니다.
사용자는 다른 계정 사용 버튼을 클릭하여 새 Google 세션을 추가할 수 있습니다. Google 세션 없음 사용자 여정 섹션을 참고하세요.
흐름의 두 번째 마지막 화면은 로드 화면으로, 사용자의 작업 없이 사용자를 로그인 엔드포인트로 자동 리디렉션합니다.
Has-Google-session 재방문자 여정
Google 계정으로 로그인 버튼
계정 선택기 페이지
사용자가 재방문 계정을 선택하면 ID 토큰이 웹사이트와 공유됩니다.
사용자는 다른 계정 사용 버튼을 클릭하여 새 Google 세션을 추가할 수 있습니다. 'Google 세션 없음' 사용자 여정 섹션을 참고하세요.
흐름의 두 번째 마지막 화면은 로드 화면으로, 사용자의 작업 없이 사용자를 로그인 엔드포인트로 자동 리디렉션합니다.
재방문자 여정을 자동으로 선택하는 Has-Google-session
FedCM이 없는 Google 계정으로 로그인 버튼에는 자동 선택 기능이 없습니다.
활성 Google 세션이 있는 재방문자는 버튼을 클릭하면 계정 선택기 메시지를 건너뛰고 자동으로 선택됩니다. auto select
속성을 true로 설정합니다 (HTML/JavaScript).
Google 세션이 없는 신규 사용자 여정
Google 계정으로 로그인 버튼
새 Google 세션을 추가하는 첫 번째 페이지입니다.
새 Google 세션을 추가하는 두 번째 페이지입니다.
새 사용자 동의 페이지
사용자가 확인하면 ID 토큰이 웹사이트와 공유됩니다.
흐름의 두 번째 마지막 화면은 로드 화면으로, 사용자의 작업 없이 사용자를 로그인 엔드포인트로 자동 리디렉션합니다.
Google 세션이 없는 재방문자 여정
Google 계정으로 로그인 버튼
새 Google 세션을 추가하는 첫 번째 페이지입니다.
새 Google 세션을 추가하는 두 번째 페이지입니다.
사용자가 다음 버튼을 클릭하면 ID 토큰이 웹사이트와 공유됩니다.
Family Link 계정 주요 사용자 여정
이전 섹션의 일반적인 주요 사용자 여정은 계속 적용됩니다. 다음은 로그인할 때 자녀의 Google 계정에 표시되는 추가 흐름을 보여줍니다.
No-Google-session
Google 계정으로 로그인 버튼
새 자녀 Google 세션 (자녀 Google 계정 이메일)을 추가하는 첫 번째 페이지입니다.
새 자녀 Google 세션 (자녀 Google 계정 비밀번호)을 추가하는 두 번째 페이지입니다.
새 자녀 Google 세션을 추가하기 위해 부모의 승인을 받는 첫 번째 페이지입니다.
새 자녀 Google 세션을 추가하기 위해 부모의 승인을 받는 두 번째 페이지입니다.
새 자녀 Google 세션을 추가하기 위해 부모의 승인을 받는 세 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 받는 첫 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 얻는 두 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 받는 세 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 받는 최종 페이지입니다.
부모가 계속 버튼을 클릭하면 ID 토큰이 웹사이트와 공유됩니다.
Has-Google-session
Google 계정으로 로그인 버튼
계정 선택기 페이지
자녀 Google 계정으로 애플리케이션에 로그인하기 위한 부모의 승인을 받는 첫 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 얻는 두 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 받는 세 번째 페이지입니다.
자녀 Google 계정으로 애플리케이션에 로그인할 수 있도록 부모의 승인을 받는 최종 페이지입니다.
부모가 계속 버튼을 클릭하면 ID 토큰이 웹사이트와 공유됩니다.
FedCM이 사용 설정된 Google 계정으로 로그인 버튼은 현재 Family Link 계정을 지원하지 않습니다.