게시일: 2026년 5월 21일
Google I/O 2026에서 로그인하는 것이 번거롭지 않은 웹에 관해 이야기했습니다. 사용자가 실제로 안전하다고 느낄 수 있는 안전하고 간소화된 진입점이어야 합니다. 이 게시물에서는 계정 흐름을 수정하고, 마찰을 줄이고, 처음부터 사용자를 보호하는 방법을 요약합니다.
빠른 액세스
현대화가 중요한 이유
마찰이 심한 흐름 (예: 지저분한 가입 양식, 짜증 나는 '비밀번호를 잊으셨나요?' 루프 또는 로그인 버튼 벽)은 분위기를 망칩니다. 사용자를 멀어지게 하는 '컨텍스트 전환 킬러'입니다. 기존 비밀번호와 일회용 비밀번호(OTP)도 피싱에 취약합니다.
마찰이 발생할 때마다 사용자가 이탈할 수 있습니다. 인증을 현대화하면 시스템과 사용자를 보호할 수 있습니다. ID 여정의 모든 터치 포인트를 원활하게 처리하면 자연스럽게 전환율이 높아집니다. 예를 들어 pixiv는 패스키를 구현한 후 로그인 성공률 99% (비밀번호 대비 29% 향상)를 달성했습니다. 취약한 사용자 인증 정보를 사용하지 않으면 더 빠르고 안전하게 작업할 수 있습니다.
계정 생성 간소화
사용자가 앱과 처음 상호작용할 때 분위기가 정해집니다. 계정 생성을 간소화하는 것은 채택률과 안전성을 개선하기 위한 첫 번째 단계입니다.
기본 계정 생성 방법으로 ID 페더레이션
사용자가 Google과 같은 신뢰할 수 있는 제공업체로 가입할 수 있는 ID 제휴를 사용하여 사용자가 번거로운 계정 생성 양식을 건너뛰도록 할 수 있습니다. 이를 통해 사용자가 일반적인 등록 절차 없이 앱을 이용할 수 있는 강력하고 간소화된 가입 환경을 제공할 수 있습니다.
연동을 사용하면 사용자가 이름이나 이메일을 수동으로 입력하지 않아도 됩니다. 공급자가 이미 인증했으므로 중복 단계를 건너뛰고 독립적으로 인증하여 더 많은 사용자를 확보할 수 있습니다.
또한 제휴 ID 솔루션을 채택하면 전용 IdP (ID 공급업체)의 보안 수준을 상속할 수 있습니다. IDP는 ID 및 보안을 전문으로 하므로 IDP의 인프라를 사용하면 인증을 처음부터 빌드할 위험이 없습니다.
Federated Credential Management (FedCM) API 채택
IdP 역할을 하는 경우 FedCM API를 채택하는 것이 좋습니다. 브라우저 UI를 통해 상호작용을 처리하여 추적을 방지하여 개인 정보를 보호하는 동시에 사용자에게 원탭 로그인을 제공하고 관련 계정만 표시하여 UI를 정리합니다.
'페더레이션 후 업그레이드' 패턴
페더레이션 후 업그레이드는 페더레이션의 속도와 패스키의 장기적인 보안을 결합합니다. 연동된 가입 직후 패스키를 묻는 메시지를 표시하면 사용자의 다음 로그인이 처음부터 피싱에 강해집니다.
자동 완성을 위한 양식 최적화
수동 양식이 필요한 경우 설명이 포함된 name 및 id 속성과 올바른 autocomplete 값을 사용하여 브라우저가 사용자를 위해 필드를 채울 수 있도록 합니다. 이렇게 하면 가입 과정에서 인지 부하와 오타 가능성이 줄어듭니다. 양식 최적화에 관한 자세한 내용은 가입 양식 권장사항을 참고하세요.
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="password">New Password</label>
<input type="password" id="password" name="password" autocomplete="new-password">
원활한 속성 인증
사용자가 이메일에서 코드를 확인하기 위해 앱을 종료하면 전환율이 감소합니다. 이러한 컨텍스트 전환으로 인해 사용자는 주의가 분산되고 다시 돌아오지 않습니다.
이메일 인증 프로토콜 (EVP)
새로운 기능인 이메일 확인 프로토콜(EVP)을 사용하면 애플리케이션이 브라우저를 통해 직접 인증된 이메일 주소를 가져올 수 있습니다.
이 기능을 사용하려면 autocomplete="email-verification-token" 속성과 challenge이 있는 숨겨진 입력 필드를 추가하세요. 브라우저가 입력에서 이메일 도메인을 파싱하고 이메일 발급자에게 사용자가 이 이메일을 관리하는지 확인하도록 요청합니다. 인증이 완료되면 브라우저에서 백엔드가 즉시 확인할 수 있는 인증된 이메일 클레임을 표시합니다. 사용자에게는 이 흐름이 원활하게 진행됩니다. 이메일 인증 시에만 알림이 표시됩니다.
EVP는 로그인, 가입, 비밀번호 재설정을 위해 사용자를 이탈시키는 마찰 (예: 매직 링크 또는 이메일 OTP)을 제거합니다.
<input id="email" type="email" autocomplete="email">
<input type="hidden" name="token" challenge="1234" autocomplete="email-verification-token">
EVP 지원 여부는 개별 이메일 서비스 제공업체에 달려 있습니다. 특정 제공업체에 EVP 지원 계획이 있는지 확인하세요. 커스텀 도메인을 소유한 경우 지원되는 이메일 제공업체에 연결하여 EVP도 지원할 수 있습니다.
이 기능은 아직 실험 단계이므로 GitHub 저장소에 의견을 보내 주시면 감사하겠습니다.
Digital Credentials API
법적 이름이나 연령과 같은 민감한 세부정보의 경우 디지털 사용자 인증 정보 API는 선택적 공개를 사용하여 브라우저 중재를 통해 사용자의 지갑에서 인증된 데이터를 요청하는 방법을 제공합니다. 즉, 사용자의 전체 생년월일이나 법적 이름을 실제로 받지 않고도 사용자가 특정 연령 이상인지 확인할 수 있으므로 개인 정보가 보호됩니다.
디지털 사용자 인증 정보 API: 웹에서 안전하고 비공개적인 신원을 참고하세요.
원활한 로그인을 위해 패스키 구현
패스키는 비밀번호를 대체하는 것 이상의 기능을 제공합니다. 이러한 인증은 원활한 피싱 방지 인증을 향한 근본적인 변화입니다.
즉시 UI 모드
Chrome 149부터 즉시 UI 모드를 사용할 수 있습니다. 이를 통해 사용자가 사이트로 이동하는 순간 웹사이트에서 사용자 인증 정보를 확인할 수 있습니다. 패스키 또는 비밀번호가 비밀번호 관리자에 있으면 브라우저가 로그인 대화상자에서 사용 가능한 계정 목록을 사용하여 흐름을 즉시 중재합니다.
따라서 사용자가 로그인 방법을 선택할 필요가 없습니다. 선택한 계정의 사용자 인증 정보를 사전에 제공하면 사용자에게 마법처럼 느껴지는 원활한 '원탭' 환경이 만들어집니다.
const credential = await navigator.credentials.get({
password: true,
uiMode: 'immediate',
publicKey: publicKeyObject,
});
로그인용 즉각적인 UI 모드를 참고하세요.
패스키 양식 자동 완성: 패스키로 전환하는 동안 양식 자동 완성 사용
비밀번호에서 패스키로 전환 중인 웹사이트의 사용자를 위해 패스키 양식 자동 완성을 사용하면 입력란에 포커스가 있을 때 패스키가 자동 완성 제안에 표시될 수 있습니다. 즉, 사용자가 로그인 양식에서 사용자 이름 필드에 포커스를 두는 순간 이미 패스키가 있는 경우 그렇지 않은 경우 저장된 비밀번호를 계속 사용할 수 있습니다.
이를 사용 설정하려면 사용자 이름 필드에 autocomplete="username webauthn"를 사용하여 주석을 추가하고 navigator.credentials.get()를 호출할 때 mediation 값을 'conditional'로 설정합니다.
이는 비밀번호가 필요 없는 미래로 전환하는 동안 사용자가 친숙한 인터페이스에서 패스키에 익숙해지도록 지원하는 중요한 다리 역할을 합니다.
패스키 인증 체크리스트를 참고하세요.
전략적 패스키 채택
도입은 타이밍의 문제인 경우가 많습니다. 적절한 순간에 사용자에게 메시지를 표시하면 사용자가 패스키를 등록할 가능성이 크게 높아집니다.
자동 패스키 생성
새 로그인 방법을 설정하기 위해 보안 설정을 뒤적거리고 싶어 하는 사람은 없습니다. 기존 비밀번호 사용자의 경우 사용자에게 패스키로 업그레이드하라는 메시지를 언제 어떻게 표시해야 하나요?
이때 자동 패스키 생성이 필요합니다. 조건부 생성을 사용하면 사용자가 비밀번호 관리자로 로그인하는 순간 브라우저가 비밀번호 사용자를 패스키로 자동 업그레이드할 수 있습니다.
사용자가 비밀번호 관리자에 저장된 비밀번호를 사용하여 최근에 로그인에 성공한 후 트리거되는 navigator.credentials.create() API에 mediation: 'conditional'를 전달하면 브라우저가 추가 설정 화면을 강제하지 않고도 기본적으로 새 패스키를 생성합니다.
마찰 없는 등록은 사용자가 보안을 개선하기 위해 의식적으로 결정을 내릴 필요가 없음을 의미합니다. 이러한 보호는 자동으로 이루어지므로 추가 노력이 필요하지 않습니다. 예를 들어 adidas는 이 프롬프트 없음 전략을 사용하여 패스키 생성이 8% 증가했습니다.
await navigator.credentials.create({
mediation: 'conditional',
publicKey: { ... },
});
패스키 등록 체크리스트를 참고하세요.
패스키 관리 및 복원력 있는 복구
사용자는 기기, 웹사이트, 서비스 전반에서 사용자 인증 정보를 쉽게 사용할 수 있어야 합니다. 또한 기기를 분실하거나 도난당한 경우 계정을 복구할 수 있도록 관리해야 합니다.
크로스 플랫폼 일관성
로그인 시스템을 공유하는 속성이 여러 개 있는 경우 (예: Android 앱과 웹사이트 또는 여러 웹사이트) 사용자 환경을 개선할 수 있습니다. 원활한 사용자 인증 정보 공유를 사용하면 비밀번호 관리자가 모든 속성에서 사용자에게 적절한 사용자 인증 정보를 제안할 수 있습니다.
원활한 사용자 인증 정보 공유는 비밀번호용 디지털 애셋 링크와 패스키용 관련 출처 요청이라는 두 가지 기술로 구성됩니다.
디지털 애셋 링크를 사용하면 웹에서 생성된 비밀번호를 Android 앱에서 사용할 수 있으며 그 반대의 경우도 마찬가지입니다. 또한 비밀번호 관리자를 사용하면 동일한 인증 백엔드를 공유하는 소유한 여러 도메인에서 이미 저장된 사용자 인증 정보를 제안할 수 있습니다.
관련 출처 요청을 사용하여 사용자의 사용자 인증 정보 관리자를 통해 여러 도메인과 앱에서 패스키를 사용할 수 있도록 합니다.
이는 사용자의 로그인 환경을 더 원활하게 만드는 또 다른 방법일 뿐입니다.
패스키 관리 페이지로 사용자 지원
정교한 패스키 환경을 위해서는 명확한 제공업체 이름, 사용 시간, 제어 기능을 지원하는 전용 패스키 관리 페이지를 만드는 것이 좋습니다. 이를 통해 사용자는 안심하고 설정을 관리할 수 있습니다. 투명성은 신뢰를 구축합니다.
패스키 관리 체크리스트를 참고하세요.
복구 가능한 계정 복구
기기를 분실하거나 업그레이드할 수 있습니다. 패스키는 하드웨어 수준 보호를 사용하고 일반적으로 클라우드에서 동기화되므로 본질적으로 복원력이 있습니다. 따라서 사용자가 새 기기에서 패스키를 복원할 수 있습니다. 하지만 인증된 이메일 주소와 같은 대체 수단을 사용하면 사용자가 디지털 생활에 대한 액세스 권한을 잃지 않습니다.
헬프 데스크 통화를 위해 대기하도록 하는 대신 ID 제휴 또는 이메일 인증과 같이 이미 신뢰하는 신호를 사용하여 소유자임을 증명할 수 있습니다.
이러한 신호를 복구 전략에 결합하면 즉시 액세스 권한을 복원할 수 있습니다. 돌아오면 즉시 새 패스키를 등록하여 피싱으로부터 다시 보호받을 수 있도록 하세요.
DBSC로 세션 보호
사용자를 계정 도용으로부터 보호하려면 세션 쿠키를 안전하게 유지하는 것도 중요한 방어 수단입니다. 기기 바인딩 세션 사용자 인증 정보(DBSC)는 세션을 하드웨어에 바인딩하는 방법입니다. 이렇게 하면 쿠키가 도난당하더라도 동일한 기기만 쿠키 재발급을 요청할 수 있으므로 세션 가로채기를 완화할 수 있으며, 세션에 또 다른 보안 레이어가 효과적으로 추가됩니다.
DBSC는 실험용 기능이며 현재 Windows에서 사용할 수 있습니다. 이 업데이트에 관한 자세한 내용은 Windows의 기기 바인딩 세션 사용자 인증 정보 공지사항을 참고하세요. 또한 macOS로 DBSC 지원을 확대하기 위해 노력하고 있습니다.
패스키 상담사 기술
최신 웹 가이드 프로젝트에는 이 게시물에 설명된 여러 측면을 다루는 패스키 기술이 포함되어 있습니다. 곧 패스키 기술에 관한 블로그 게시물을 게시할 예정입니다.
인증의 미래를 구축할 준비가 되셨나요?
심층 분석 가이드를 살펴보고 지금 바로 현대화를 시작하세요.