로그인 시 즉각적인 UI 모드

Eiji Kitamura
José Luis Zapata

게시일: 2026년 5월 12일

로그인용 즉시 UI 모드는 로그인 흐름을 간소화하도록 설계된 웹 기능입니다. 이 기능을 사용하면 사용자가 로그인 또는 결제 버튼을 클릭하는 등 로그인 시점에 도달할 때 패스키와 관리 비밀번호를 사용자에게 직접 제공할 수 있습니다.

개요

즉시 UI 모드는 사용자 인증 정보가 로컬로 제공되지 않는 경우 즉시 실패하는 모드를 제공합니다. 이 동작은 Android 및 iOS와 같은 모바일 플랫폼에서 찾을 수 있는 preferImmediatelyAvailableCredentials API를 반영합니다. 사용자 인증 정보가 있으면 브라우저에서 사용자에게 즉시 로그인 대화상자를 표시합니다. 그렇지 않으면 프라미스를 자동으로 거부하여 사용자 환경을 방해하지 않고 로그인 양식과 같은 대체 로그인 방법을 제공할 수 있습니다.

2026년 5월 현재 Chrome은 즉각적인 UI 모드를 지원하는 유일한 브라우저입니다.

기본 요건 확인

즉시 UI 모드를 사용하려면 사용자가 이미 기기에 로컬로 사용 가능한 적격 사용자 인증 정보가 있어야 합니다. Chrome에서 이러한 사용자 인증 정보에는 다음이 포함됩니다.

  • Google 비밀번호 관리자, Windows Hello, iCloud 키체인과 같은 패스키 제공업체에 저장된 패스키
  • Google 비밀번호 관리자에 저장된 비밀번호

로컬 사용자 인증 정보가 없으면 API는 즉시 로그인 대화상자를 표시하지 않고 요청을 거부합니다.

기능 지원 감지

즉시 UI 모드를 호출하기 전에 PublicKeyCredential.getClientCapabilities() 메서드를 사용하여 브라우저가 immediateGet 기능을 지원하는지 확인합니다. 지원되지 않는 경우 이메일 및 비밀번호 양식, 전화번호 인증, 소셜 로그인과 같은 기존 로그인 방법으로 대체합니다.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

더 광범위한 브라우저 지원을 위해서는 WebAuthn Polyfills GitHub 저장소에서 제공되는 폴리필을 사용하세요.

사용자 인증 정보 요청

즉시 로그인 흐름을 트리거하려면 uiMode 필드가 'immediate'로 설정된 navigator.credentials.get()를 호출합니다.

요청에 password: true를 포함하면 브라우저가 비밀번호 사용자 인증 정보를 지원하는 경우 사용자가 이 환경을 이용할 수 있습니다.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

대체 로그인 환경을 제공하려면 catch 블록에서 NotAllowedError를 처리해야 합니다.

로그인 흐름 처리

두 가지 기본 시나리오에 대해 즉각적인 UI 모드를 구현할 수 있습니다.

버튼으로 로그인

예기치 않은 메시지 없이 깔끔한 환경을 제공하는 전용 로그인 버튼을 제공합니다.

  1. 사용자가 로그인 버튼을 클릭합니다.
  2. 사이트에서 uiMode: "immediate"을 사용하여 navigator.credentials.get()를 호출합니다.
  3. 브라우저가 로컬 사용자 인증 정보를 확인합니다.
  4. 브라우저에서 사용자 인증 정보를 찾으면 사용자가 계정을 선택할 수 있는 즉시 로그인 대화상자가 표시됩니다.
  5. 브라우저에서 사용자 인증 정보를 찾지 못하거나 사용자가 즉시 로그인 대화상자를 닫으면 NotAllowedError가 발생합니다.
  6. NotAllowedError이 발생하면 사이트가 표준 로그인 페이지로 진행됩니다.

결제 전에 로그인

사용자가 온라인 상점에서 결제 절차를 시작하는 등 인증이 필요한 작업을 실행하기 전에 사용자 인증 정보를 선제적으로 제공합니다.

전자상거래에서 게스트 사용자는 기존 계정에 로그인하거나 게스트로 결제하는 옵션 중에서 선택하는 경우가 많습니다. 즉시 로그인 대화상자를 제공하면 재구매 고객의 결제 절차를 간소화할 수 있습니다.

  1. 사용자가 쇼핑 흐름 중에 결제 버튼을 클릭하는 등의 작업을 시작합니다.
  2. 사이트에서 uiMode: "immediate"을 사용하여 navigator.credentials.get()를 호출합니다.
  3. 사용자는 인증 정보가 있는 경우 하나를 선택하여 로그인을 완료합니다.
  4. 사용자 인증 정보가 없으면 브라우저에서 오류가 발생하고 즉시 로그인 대화상자가 표시되지 않습니다. 사용자 환경은 변경되지 않으며 사용자를 기존 결제 화면으로 안내할 수 있습니다. 이 화면에서는 다른 로그인 옵션이나 비회원 결제 양식을 제공할 수 있습니다.

개인 정보 보호 및 보안 조치 검토

브라우저에서는 사용자 개인 정보를 보호하기 위해 다음과 같은 중요한 조치를 구현합니다.

  • 사용자 동작 요구사항: 자동 탐색을 방지하려면 클릭과 같은 사용자 동작으로 API 호출을 시작해야 합니다. 이 호출은 활성화를 사용하지 않습니다.
  • 시크릿 모드 제한사항: 시크릿 또는 비공개 세션의 요청은 항상 NotAllowedError를 발생시킵니다.
  • 허용 목록 없음: 비어 있지 않은 allowCredentials 목록이 있는 요청은 교차 세션 추적을 방지하기 위해 NotAllowedError를 발생시킵니다.
  • 프로그래매틱 취소 없음: signal 매개변수를 사용하여 즉시 로그인 대화상자를 프로그래매틱 방식으로 닫을 수 없습니다.