WebAuthn 패스키 도입 — 사용자 30%가 첫 등록에 실패합니다

30% 실패는 정상 범위입니다. 패스키는 좋은 기술이지만 UX 디자인이 어렵습니다. 운영 노하우 정리합니다.

1. 등록 흐름 — 강제 말고 점진적

가입 시 패스키 강제하면 30%가 이탈합니다. 패턴 — 비밀번호로 가입 후, 다음 로그인에서 "패스키로 빠르게 로그인하기" 제안. 거부할 수 있게.

// 가입 후 2번째 로그인에서 노출
if (loginCount === 2 && !user.hasPasskey) {
  return showPasskeyEnrollmentPrompt({
    title: '다음부터는 1초만에 로그인',
    subtitle: '비밀번호 안 외워도 됩니다',
    skipText: '나중에',  // 거부 가능
  })
}

2. 브라우저별 사전 체크

PublicKeyCredential의 capability 체크로 미리 거름. iCloud Keychain 꺼진 사용자에게 등록 시도시키지 마세요.

const supported = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
const conditionalMediation = await PublicKeyCredential.isConditionalMediationAvailable()
if (!supported) {
  // 패스키 UI 자체를 숨김, 비밀번호만
}

3. 실패 시 메시지 분기

NotAllowedError(사용자 취소), InvalidStateError(중복 등록), SecurityError(도메인 mismatch) 등 에러 타입별로 안내 분기.

try {
  await navigator.credentials.create({ publicKey: opts })
} catch (e) {
  if (e.name === 'NotAllowedError') {
    show('사용자가 취소했습니다. 비밀번호 로그인을 계속 사용하세요.')
  } else if (e.name === 'InvalidStateError') {
    show('이미 등록된 패스키가 있습니다.')
  } else {
    show('패스키 등록에 실패했습니다. 다음에 다시 시도하세요.')
  }
}

4. 비밀번호와의 공존

패스키 등록 후에도 비밀번호 살려두기. 디바이스 분실, 가족 폰 빌려쓰기 등 엣지 케이스가 많습니다. 보안팀이 "비밀번호 폐기"를 강하게 push해도 1년은 공존 권장.

5. 한국 환경 특수성

• 삼성 인터넷 — 패스키 지원하지만 Samsung Pass 안 켜진 사용자 많음, 일반 비밀번호로 fallback


• 네이버·카카오 인앱 브라우저 — 일부 버전 미지원, in-app browser 감지 후 외부 브라우저 유도

저희는 위 패턴으로 등록 성공률 70 → 88%, 30일 활성 패스키 사용률 64%까지 올렸습니다.

보안팀 입장에서 한 줄 더 — discoverable credential 옵션 처리도 신경 쓰세요. iOS는 기본 discoverable이지만 Windows Hello는 비활성. 이거 안 맞춰주면 동일 사용자가 PC·모바일에서 다른 경험을 합니다.

publicKey: {
  authenticatorSelection: {
    residentKey: 'preferred',  // discoverable 권장
    userVerification: 'preferred',
  },
}