패스키를 도입할 때 삽화와 풍부한 시각적 요소를 통합하면 사용자의 인지 부하를 줄이고 콘텐츠를 지원하는 동시에 더욱 매력적이고 이해하기 쉬운 환경을 만들 수 있습니다.
디자인 구성요소
패스키는 기존 제품 또는 서비스를 개선하기 위한 것이므로 플랫폼에서 사용자에게 이미 익숙한 형식을 사용하여 소개해야 합니다.
예를 들어 Google 계정이 로그인 시 패스키를 도입하는 방식과 유사하게 서비스에서 전면 광고를 사용하여 사용자에게 업데이트를 전달한다면 전면 광고 형식을 사용하여 패스키를 소개하는 것이 좋습니다.
!['패스키로 더 빠르게 로그인'이라는 제목의 카드가 있는 TrailBlazer 방문 페이지](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=6&hl=ko)
또는 플랫폼에서 일반적으로 팝업 모달, 알림바, 기타 알림 스타일을 통해 계정 변경사항을 사용자에게 알리는 경우 익숙한 알림 방법을 사용하여 패스키 개념을 도입하세요. 이 접근 방식을 사용하면 새 패스키 기능을 출시할 때 일관되고 사용자 친화적인 환경을 보장할 수 있습니다.
![사용자에게 패스키를 사용하여 더 빠르고 안전한 비밀번호를 사용하라는 팝업 표시](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=6&hl=ko)
설명형 패스키 프롬프트 만들기
패스키 관련 작업의 경우 클릭 유도 문구가 있는 버튼 대신 사용자에게 더 많은 정보를 전달할 수 있는 풍부한 설명 메시지를 만듭니다. 이미지, 광고 제목, 메시지, 클릭 유도 문구 등을 사용할 수 있습니다.
예를 들어 Google 계정용 패스키를 생성하는 경우 대신 '패스키 생성' 버튼만 표시되는 전면 광고가 있으며, '로그인 간소화'라는 클릭 유도 문구, 패스키에 관한 간단한 설명, 다양한 기기 화면 잠금 해제 방법이 포함된 삽화가 포함되어 있습니다.
![패스키 수신 동의 메시지가 표시된 Google 계정 페이지의 스크린샷](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=6&hl=ko)
표준 패스키 아이콘 사용
패스키를 나타낼 때 사용해야 하는 FIDO 제휴에서 패스키 아이콘을 생성했습니다. 일관되게 사용하면 사용자가 패스키를 인식하고 패스키 관련 작업을 간소화하는 데 도움이 됩니다.
![표준 패스키 아이콘](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=6&hl=ko)
UI에서 패스키 아이콘을 사용합니다.
- 사용자가 더 안전한 로그인을 위해 패스키를 만들거나 패스키로 업그레이드하도록 유도하기 위해 온보딩 또는 기타 메시지에 패스키 개념을 나타내는 데 사용합니다.
- 사용자가 패스키로 로그인할 수 있는 버튼 또는 링크
- 설정에서 수정하거나 삭제할 수 있는 패스키를 식별할 수 있습니다.
제품, 브랜드 또는 사용자 인터페이스의 색 구성표와 일치하도록 아이콘 색상을 변경할 수 있습니다.
계정 설정 내에 '패스키 카드' 표시
문자, 숫자, 기호의 유형적인 조합인 비밀번호와 달리 패스키는 대부분 사람들에게 보이지 않습니다. 계정 설정에서 패스키 카드를 위한 공간을 확보하세요. 카드 안에는 패스키 아이콘, 패스키에 관한 정보(예: 패스키가 생성된 시점 및 생태계, 마지막으로 사용된 시점), 패스키 관리 옵션이 포함되어 있습니다. 사용자가 패스키를 두 개 이상 가지고 있는 경우 패스키마다 카드가 있어야 합니다.
![Trailblazer 보안 설정 페이지의 패스키 설정 스크린샷](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=6&hl=ko)