패턴

FIDO 여정 전반의 다양한 접점에 적용할 수 있는 일반적인 워크플로와 개념에 대해 알아보세요. FIDO UX 패턴을 사용하여 사용자 경험을 단순화할 수 있습니다.

FIDO Four 사용

FIDO 경험은 다음과 같이 구성됩니다: (1) 사람 (2) 브라우저 (3) 신뢰 당사자 (4) 디바이스. 각각 다양한 요구 사항을 가지고 있습니다. 이 네 가지 사례 중 몇 가지를 살펴보겠습니다.

예시: 등록

Alex는 FIDO에 대해 들어본 적이 없으며 이전에 휴대폰의 장치 잠금 해제를 사용하여 웹사이트에 로그인한 적이 없습니다. 그녀의 휴대폰은 얼굴 생체 인식을 지원하며 휴대폰에서 기본 Chrome 브라우저를 사용합니다. 신뢰하는 사람이 얼굴 생체 인식, 지문 생체 인식, 비밀번호 또는 패턴을 사용하여 휴대전화를 잠금 해제하는지 여부는 아직 알 수 없습니다. 따라서 신뢰 당사자는 지문 기호를 사용하여 새로운 로그인 방법을 사용할 수 있음을 나타냅니다. FIDO 얼라이언스가 이 시나리오를 테스트한 결과, 사람들은 지문 기호를 통해 다양한 장치 잠금 해제 방식을 사용할 수 있음을 알 수 있습니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

예시: 인증

Alex는 이전에 휴대폰의 디바이스 잠금 해제를 사용하여 웹사이트에 로그인한 적이 있는데, 이제 처음으로 Windows 노트북에서 같은 웹사이트에 액세스하고 있습니다. 그녀는 Windows Hello PIN을 사용하여 노트북의 잠금을 해제하고 Edge 브라우저를 사용합니다. 신뢰하는 사람이 얼굴 생체 인식, 지문 생체 인식, 비밀번호 또는 PIN을 사용하여 디바이스를 잠금 해제하는지 여부는 아직 알 수 없습니다. 신뢰 당사자는 PIN을 FIDO 환경의 장치 잠금 해제 메커니즘으로 사용하는 사람들이 PIN이 RP와 공유되는지 궁금해할 수 있다는 것을 알고 있습니다. 따라서 RP는 콘텐츠에 다음과 같은 메시지를 포함합니다: “컴퓨터의 PIN, 얼굴 인식, 지문 또는 보안 키를 등록하면 FIDO는 실제 사용자인지 확인하며 인터넷을 통해 로그인 정보를 전송하지 않습니다.”

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

FIDO UI 컨트롤러 사용

FIDO 인터페이스는 (1) 브라우저, (2) 운영 체제, (3) 추가 하드웨어, (4) 응답 당사자의 웹사이트에 의해 제어됩니다. 사람들이 서로 전환하는 방법을 조율하는 것은 신뢰 당사자의 역할입니다.

예시: 등록

신뢰 당사자가 웹 인터페이스를 생성하여 Alex에게 더 간단한 로그인 환경을 위해 등록할 것인지 묻습니다. 알렉스가 웹사이트의 ‘등록’ 버튼을 클릭하면 신뢰 당사자가 알렉스의 브라우저 인터페이스로 전환합니다. 브라우저 인터페이스에 Alex가 계속 진행할 것인지 묻는 메시지가 표시됩니다. Alex는 브라우저 인터페이스에서 ‘계속’을 선택합니다. 그런 다음 계속하려면 Touch ID를 사용하라는 운영 체제 인터페이스로 전환됩니다. 이 경우 그녀는 Apple iPhone을 사용하고 있습니다. 터치 ID를 터치합니다. 운영 체제 프로세스가 완료되면 운영 체제가 Alex를 신뢰 당사자 웹사이트로 다시 전환합니다. 이를 알면 신뢰 당사자에게 “성공” 메시지와 그림이 표시됩니다.

1: RP: “등록” ▶ 2: 브라우저: “계속” ▶ 3: OS: “터치 ID” ▶ 4: RP: “성공”

신뢰 당사자는 4단계를 포함할 필요가 없지만, Alex에게 원활한 경험을 제공하기 위해 4단계를 포함해야 합니다. 경우에 따라서는 신뢰 당사자가 1단계가 필요하지 않지만 동일한 이유로 2단계를 수행하는 경우도 있습니다.

예시: 인증

알렉스가 웹사이트의 ‘로그인’ 버튼을 클릭하면 신뢰 당사자가 알렉스에게 계속하려면 Touch ID를 사용하라는 운영 체제 인터페이스로 전환합니다. 이 경우 그녀는 Apple iPhone을 사용하고 있습니다. 터치 ID를 터치합니다. 운영 체제 프로세스가 완료되면 운영 체제가 Alex를 신뢰 당사자 웹사이트로 다시 전환합니다. 이를 알면 신뢰 당사자에게 “성공” 메시지와 그림이 표시됩니다.

1: RP: “로그인” ▶ 2: OS: “터치 ID” ▶ 3: RP: “성공”.

신뢰 당사자는 3단계를 포함할 필요가 없지만, Alex에게 원활한 경험을 제공하기 위해 3단계를 포함해야 합니다. 경우에 따라서는 신뢰 당사자가 1단계가 필요하지 않지만 동일한 이유로 2단계를 수행하는 경우도 있습니다.

FIDO 등록 홍보

사용자가 FIDO를 쉽게 채택할 수 있도록 하려면 웹사이트를 통한 사용자 여정의 여러 지점에서 FIDO 등록을 홍보하는 것이 중요합니다. 사용자의 플랫폼, Mac 또는 Windows에 따라 차별화된 생체 인식 아이콘을 활용하여 FIDO 인증의 가치를 설명하고 보여줄 수 있습니다.

예시: 스포트라이트

RP가 FIDO를 켜는 첫날입니다. 알렉스는 FIDO를 사용해 본 적이 없으며 웹사이트에 로그인하려고 합니다. 그녀는 Touch ID를 사용할 수 있는 컴퓨터에서 로그인합니다. 그녀는 등록을 요청하는 스포트라이트 페이지가 주목을 끄는 것을 보게 됩니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

예시: 콜아웃

RP가 FIDO를 켠 지 이틀째 되는 날입니다. 알렉스는 FIDO를 사용해 본 적이 없으며 웹사이트에 로그인하려고 합니다. 그녀는 Touch ID를 사용할 수 있는 컴퓨터에서 로그인합니다. 그렇게 하면 페이지 하단에 미묘한 등록 요청이 표시됩니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

예시: 토스트 알림

RP가 FIDO를 켠 지 이틀째 되는 날입니다. 알렉스는 FIDO를 사용한 적이 없으며 웹사이트의 ‘설정’ 페이지로 이동합니다. 어느 날, 그녀는 Touch ID를 사용할 수 있는 컴퓨터에서 그렇게 합니다. 그렇게 하면 등록하라는 건배사 알림이 표시됩니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

사용자에게 제어 권한 부여

모든 메시지 초대에는 사용자가 현재 세션에 대한 메시지를 해제할 수 있는 방법이 포함되어야 합니다. 사용자는 무시한 메시지가 다음 몇 세션(예: 총 세 세션)에 걸쳐 다시 표시될 것으로 예상합니다.

예시: 해고 기능

알렉스가 웹사이트에 로그인하는 도중 FIDO 인증에 등록하라는 ‘팝업’ 메시지를 보게 됩니다. 메시지에는 계속 진행하거나 취소할 수 있는 옵션이 포함되어 있습니다. Alex는 급한 마음에 나중에 다시 시작할 수 있다는 사실을 알고 해제를 클릭합니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

일관된 탐색 기능 사용

FIDO 인증 중에 사용자가 경험하는 인터페이스(예: 브라우저, 운영 체제, 추가 하드웨어)의 수를 고려할 때, 신뢰 당사자는 특히 사용자가 돌아가거나 인증 방법을 전환하거나 로그인을 완전히 종료할 수 있도록 하는 데 있어 일관된 탐색 기능을 사용하는 것이 중요합니다. 이를 통해 사용자는 로그인 환경에서 통제력과 자유로움을 느낄 수 있습니다.

예시: 전환 방법

알렉스는 터치 ID(FIDO에서 제공)를 사용하려다가 마음이 바뀌어 이제는 보안 키를 사용하는 것을 선호합니다. 신뢰 당사자는 브라우저를 불러와 인증 방법을 쉽게 전환할 수 있는 옵션을 제공합니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

성공 또는 실패 확인

FIDO 인증서를 등록하거나 사용하는 데 필요한 인터페이스(예: 브라우저, 운영 체제 등)의 수를 고려할 때, 시스템 상태에 대한 높은 가시성을 유지하는 것이 중요합니다. 과거 연구에서 신뢰 당사자에게 상호작용에 대한 정보를 제공하는 정도에 따라 많은 차이가 있음을 발견했습니다. 예를 들어 브라우저는 정확한 이유를 제공하지 않고 실패 인스턴스를 전달할 수 있습니다. 신뢰 당사자는 다음 메시지를 사용하여 이 문제를 처리할 수 있습니다.

예시: 등록 성공

Alex는 웹사이트에서 “등록” 버튼을 클릭한 후 FIDO 인증자를 성공적으로 설정했습니다(즉, 브라우저 인터페이스에서 “계속”을 클릭하고 운영 체제 인터페이스로 전환한 후 Touch ID를 사용했습니다). 신뢰 당사자에게 성공 메시지가 표시됩니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

예시: 등록 실패

Alex가 운영 체제 인터페이스를 사용하는 동안 FIDO 인증자를 설정하지 못했습니다. 보안 키를 등록할 수 없습니다. 이 실패는 신뢰 당사자에게 다시 전달되며, 신뢰 당사자는 이제 오류 메시지를 표시합니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

예시: 인증 성공

Alex가 FIDO를 사용하여 인증에 성공했습니다. 그녀의 성공을 축하하고 간단한 로그인에 만족감을 느낄 수 있도록, 신뢰하는 당사자는 로그인하기 전에 2초 타이머에 성공 메시지를 표시합니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

예시: 인증 실패

Alex가 FIDO를 사용하여 인증하지 못했습니다. 애플 아이폰의 터치 ID 센서가 손상되었을 수 있습니다. 이 실패를 알리고 효과적인 다음 단계를 제공하기 위해 신뢰 당사자는 다음 오류 메시지를 표시합니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

기호와 메서드 페어링

FIDO 인증을 가장 쉽게 사용하려면 신뢰 당사자가 등록 및 사용할 수 있는 인증 방법을 나타내는 아이콘을 표시하는 것이 중요합니다. 예를 들어 생체 인식만 사용할 수 있는 경우에는 지문 아이콘이 표시되어야 하며, 마찬가지로 보안 키만 사용할 수 있는 경우에는 키 아이콘이 표시되어야 합니다.

관련 리소스

UI 키트에서 소스 에셋을 사용합니다.

일부가 아닌 모두가 사용할 수 있는 경험을 보장합니다.

전 세계 인구의 15%에 해당하는 10억 명이 어떤 형태로든 장애를 경험하기 때문에 디지털 세상의 잠재력을 최대한 활용하지 못하고 있습니다. 모든 사용자가 FIDO 인증의 이점을 누릴 수 있도록 하려면 신뢰 당사자가 월드와이드웹 컨소시엄에서 관리하는 개방형 국제 표준인 웹 콘텐츠 접근성 가이드라인을 사용하여 접근성 모범 사례를 따르는 것이 중요합니다.

예시: 시각적 어려움

Alex는 시력이 좋지 않아 웹사이트에 로그인할 때 화면 리더, 음성 제어 또는 화면 확대 소프트웨어가 필요합니다. Alex를 돕기 위해 각 페이지가 화면 텍스트 확대 등 보조 기술에서 작동하도록 최신 가이드라인을 준수합니다.

예시: 이동의 어려움

알렉스는 손을 온전히 사용할 수 없어 마우스나 트랙패드 탐색을 대체할 수 있는 도구가 필요합니다. 로그인을 돕기 위해 스위치 시스템이나 헤드 마우스를 사용하여 탐색할 수 있도록 최신 지침을 따릅니다.