WebOTP를 사용하여 패스키 등록이 100% 증가한 Amedia

Henning Haaland Kulander

Yu Tsuno

게시일: 2026년 6월 30일

Amedia는 노르웨이 최대 규모의 지역 편집 미디어 게시자로, 100개가 넘는 신문 제목을 관리하고 매일 2백만 명이 넘는 독자에게 도달합니다. 통합되고 원활한 환경을 제공하기 위해 Amedia는 자체 디지털 ID 솔루션인 aID를 사용합니다. 이 표준 기반 제휴 계정 시스템은 사용자에게 Amedia의 전체 네트워크에 대한 액세스 권한을 부여할 뿐만 아니라 다른 노르웨이 및 덴마크 신문에서도 채택했습니다.

문제: 다양한 사용자층에 패스키 도입

Amedia의 경우 로그인 프로세스가 콘텐츠로 연결되는 관문입니다. 마찰이 발생할 때마다 독자 수에 직접적인 영향을 미칩니다. 일반 비밀번호와 SMS 기반 2단계 인증 (2FA)은 이동 중인 사용자에게 불편한 것으로 악명이 높지만 패스키로 바로 전환하면 완전히 낯선 문제가 발생합니다.

aID는 사용자가 패스키를 처음 접하는 경우가 많으므로 익숙하지 않은 생체 인식 프롬프트로 갑자기 변경하면 망설임이 발생했습니다. Amedia는 기술을 배포하는 것만으로는 충분하지 않다는 것을 깨달았습니다. 사용자가 패스키를 사용하는 방법을 이해하도록 도와야 했습니다.

해결책: WebOTP와 패스키 흐름의 결합

사용자에게 기존 습관 (SMS)과 완전히 생소한 개념 (패스키) 중에서 선택하도록 강요하는 대신 Amedia는 이를 하나의 유연한 온보딩 환경으로 결합했습니다. 이들은 WebOTP API를 사용하여 익숙한 SMS 인증 프로세스를 간소화하는 동시에 백엔드에서 비밀번호 없는 로그인을 위한 인프라를 조용히 설정했습니다.

1. 다양한 플랫폼에서 원활한 가입

사용자가 aID에 가입할 때 이름, 전화번호, 이메일을 입력합니다. 그러면 Amedia에서 SMS를 사용하여 일회용 비밀번호 (OTP)를 전송합니다. 스칸디나비아에서는 전화번호가 두 개 이상인 경우가 드물고 모바일 제공업체를 전환할 때 번호가 원활하게 포팅되므로 Amedia는 이메일 대신 SMS OTP를 사용합니다. 이러한 안정성 덕분에 전화번호는 로그인 시 신뢰할 수 있는 기본 식별자이자 확장된 사용자 프로필을 구축하기 위한 일관된 데이터 포인트가 됩니다. 사용자가 브라우저를 종료하고 메시지 앱을 열고 코드를 기억하고 입력하도록 강제하는 대신 Amedia는 WebOTP API를 사용합니다. 지원되는 모바일 브라우저에서 이 코드는 사용자가 인증을 탭하기만 하면 되는 하단 시트 프롬프트를 트리거합니다. 브라우저가 SMS에서 OTP를 자동으로 가져와 양식을 제출합니다.

또한 Amedia는 표준화된 출처 바운드 메시지 형식 (예: @www.aid.no #123456)을 사용하도록 SMS 전송을 업데이트하여 더 광범위한 생태계에서 원활한 로그인을 지원합니다. 이 표준은 Android 및 데스크톱의 Chrome, Opera, Vivaldi와 같은 브라우저에서 WebOTP API를 지원할 뿐만 아니라 Safari의 autocomplete="one-time-code" 기능을 원활하게 활성화합니다. 따라서 모바일 및 데스크톱 플랫폼의 사용자는 플랫폼별 백엔드 로직 없이 안전한 자동 OTP 흐름을 경험할 수 있습니다. 자세한 내용은 SMS OTP 양식 권장사항을 참고하세요.

// Detect feature support using OTPCredential availability
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;

    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', (e) => {
         ac.abort();
      });
    }

    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      // Automatically fill the input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error('WebOTP error:', err);
    });
  });
}

2. 즉시 패스키 등록

이전에는 사용자가 WebOTP 인증을 완료한 후 Amedia에서 일반 비밀번호를 만들거나 패스키를 설정하는 선택지를 제공했습니다. 예상대로 대부분의 사용자는 낯선 기술 용어를 접했을 때 가장 저항이 적은 경로를 택했습니다. 단계를 완전히 건너뛰거나 표준 비밀번호를 사용한 것입니다.

2월 중순에 Amedia팀은 접근 방식을 변경했습니다. 선택사항을 표시하기도 전에 인증 후 흐름에 패스키 등록 프롬프트를 즉시 통합했습니다. Chrome, Safari와 같은 브라우저의 엄격한 사용자 동작 요구사항을 준수하기 위해 Amedia는 상호작용을 원활하게 연결했습니다. 사용자가 먼저 OTP를 확인하므로 이 초기 탭은 navigator.credentials.create() 프롬프트를 직접 호출하는 데 필요한 사용자 동작으로 작용합니다. 패스키를 선택사항 설정이 아닌 기본 환경으로 설정하자 Amedia의 성공적인 등록률이 즉시 두 배로 늘었습니다.

이 즉각적인 메시지는 매우 효과적이었지만, 팀은 직접적인 사용자 작업이 필요 없이 백그라운드에서 패스키를 완전히 생성하는 메커니즘인 '조건부 생성'을 사용하여 환경을 더욱 간소화하려고 시도했습니다. 하지만 기술적인 문제가 있었습니다. 조건부 생성에는 비밀번호 관리자에 저장된 유효한 비밀번호를 사용한 사전 로그인이 필요합니다. Amedia의 WebOTP 흐름은 완전히 비밀번호가 없으므로 이 보안 기준을 충족하지 않습니다. 이 제약 조건을 해결하기 위해 Amedia는 이제 일반적인 2단계 로그인 흐름(비밀번호 및 OTP 코드)에만 조건부 생성을 예약하고 비밀번호 없는 온보딩에는 연결된 사용자 동작을 사용합니다.

안정적인 환경을 보장하기 위해 시스템에서는 표준 등록 흐름을 사용합니다. 이렇게 하면 시스템에서 브라우저의 패스키 등록 UI를 안전하게 프롬프트하는 브라우저 UI 대화상자가 트리거됩니다. 사용자가 기기의 화면 잠금 (생체 인식 또는 PIN)을 사용하여 패스키를 만듭니다. WebOTP 바로 뒤에 이 권한을 연결하면 사용자가 비밀번호를 파악하지 않아도 설정을 완료할 수 있습니다.

// Triggered immediately after successful WebOTP verification
async function registerPasskey(creationOptionsFromServer) {
  try {
    const credential = await navigator.credentials.create({
      publicKey: {
        ...creationOptionsFromServer,
        authenticatorSelection: {
          residentKey: "required",
          userVerification: "required"
        }
      }
    });

    // Send the new credential to the server for registration
    await sendCredentialToServer(credential);
  } catch (error) {
    console.error("Passkey registration failed", error);
  }
}

3. 빠른 후속 로그인

사용자가 동일한 기기에서 Amedia 게시자를 다시 방문하면 aID가 자동으로 패스키 로그인을 트리거합니다. 자동 메시지가 표시되기 전에 사용자가 페이지와 상호작용하거나 자동 메시지가 닫히면 시스템은 패스키 양식 자동 완성을 원활하게 사용합니다.

이렇게 하면 사용자가 브라우저/OS 프롬프트 또는 키보드의 자동 완성 제안과만 상호작용하여 패스키를 선택하면 되므로 로그인 프로세스가 빨라지고 수동 양식 입력은 완전히 우회됩니다.

// Triggering conditional UI for autofill suggestions
async function authenticateWithPasskey(requestOptionsFromServer) {
  try {
    const credential = await navigator.credentials.get({
      publicKey: requestOptionsFromServer,
      mediation: "conditional" // Enables autofill integration
    });

    // Authenticate the user on the server
    await verifyAssertionWithServer(credential);
  } catch (error) {
    console.error("Passkey authentication failed", error);
  }
}

영향: 원활한 도입을 위한 체인

온보딩 흐름을 혁신하여 Amedia는 신규 및 재방문 독자의 불편을 크게 줄였습니다. WebOTP와 패스키를 결합하면 다음과 같은 명확한 운영 및 환경 개선이 이루어집니다.

• 가입 속도 대폭 향상: 자동화된 WebOTP 입력과 수동 비밀번호 생성의 완전한 삭제로 인해 새 aID 계정을 만드는 데 필요한 전체 시간이 크게 줄었습니다.
• 신규 사용자의 48% 가 패스키 생성: WebOTP 인증 직후 패스키 생성을 요청하여 Amedia는 패스키 등록 전환율을 매우 높게 달성했습니다. 이는 이전 선택 기반 온보딩 흐름에 비해 100% 증가한 수치입니다.
• 82% 더 빠른 로그인: 재방문 사용자는 비밀번호나 수동 OTP 입력과 같은 대체 방법보다 패스키를 사용하여 5배 이상 빠르게 인증합니다.

궁극적으로 광범위한 디지털 생태계에서 패스키 용어 및 사용자 교육과 관련된 문제를 계속 해결하는 동안 Amedia의 선제적 접근 방식은 성공적인 청사진을 제공합니다. 매일 수백만 명이 사용하는 고빈도 서비스에 패스키를 통합하면 미디어 업계에서 원활한 액세스를 위한 새로운 표준이 수립되어 사용자 유지를 희생하지 않고도 영구적인 보안 업그레이드를 제공할 수 있습니다.