게시일: 2026년 7월 15일
패스키는 구현하기 간단하지만 기능과 권장사항은 계속 발전하고 있습니다. 패스키가 필요한 이유와 사용 방법을 배우는 데는 시간이 걸립니다. 이 프로세스를 간소화하기 위해 Chrome팀은 패스키를 사용하여 안전하고 최신 로그인 환경을 빌드할 수 있도록 지원하는 Modern Web Guidance 패스키 스킬을 도입합니다.
패스키 스킬을 사용해야 하는 이유
Modern Web Guidance는 Anti Gravity 또는 Claude Code와 같은 AI 코딩 에이전트를 안내하도록 설계된 스킬 모음입니다. 패스키 스킬을 사용하면 최신 API와 권장사항을 사용하여 등록, 인증, 관리, 재인증을 구현할 수 있습니다. 코딩 에이전트는 프런트엔드 UI와 백엔드 로직 모두에 대한 구현을 자율적으로 생성합니다.
평가에 따르면 패스키 스킬을 사용하는 구현이 Claude Code Opus 4.8에서 패스키 스킬을 사용하지 않는 구현보다 성능이 우수합니다. 이 평가에서는 이 문서에 설명된 데모 애플리케이션과 프롬프트를 사용합니다.
| 패스키 스킬 없음 | 패스키 스킬 있음 | |
|---|---|---|
| PASS | 47 | 80 |
| FAIL | 32 | 0 |
| 해당 사항 없음 | 12 | 11 |
| 합계 | 91 | 91 |
가장 눈에 띄는 차이점은 패스키 관리 화면입니다. 이 화면에는 커뮤니티에서 큐레이팅한 패스키 제공업체 목록을 기반으로 생성된 패스키 목록이 표시되며, 패스키 관리 권장사항을 따릅니다.
패스키 스킬은 코딩 에이전트에 강력하고 눈에 잘 띄지 않는 기능도 제공합니다.
getClientCapabilities: 최신 기능 감지를 실행합니다.- JSON 직렬화: 하나의 JavaScript 호출로 인코딩된 페이로드를 직렬화합니다.
- 오류 처리: 오류 유형에 따라 메시지를 표시하거나 닫습니다.
- 조건부 중재: 사용자가 브라우저 자동 완성 추천에서 직접 로그인할 수 있도록 허용합니다.
- Signal API: 제공업체와 서버 간에 사용자 인증 정보 목록을 동기화합니다.
- 조건부 생성: 비밀번호로 최근에 로그인한 사용자를 위해 패스키를 자동으로 생성합니다.
1단계: 데모 저장소 클론하기
패스키 스킬 데모 프로젝트로 패스키 스킬을 사용해 보세요. 저장소를 클론합니다.
git clone git@github.com:GoogleChromeLabs/passkey-skills-demo.git
2단계: Modern Web Guidance 설치하기
프로젝트 디렉터리에서 대화형 설정 마법사를 실행하여 Modern Web Guidance를 설치합니다.
npx modern-web-guidance@latest install
이 마법사는 프로젝트 레이아웃에 필요한 파일을 추가하여 AI 에이전트가 패스키 요구사항을 이해할 수 있도록 합니다.
로 인해.claude 디렉터리가 있는지 확인하세요.
3단계: 프롬프트 사용하기
설치가 완료되면 이러한 프롬프트를 사용하여 기능을 빌드합니다. 이러한 예는 패스키 스킬이 다루는 4가지 사용 사례를 다루며 샌드박스 프로젝트를 위해 특별히 설계되었습니다.
등록
사용자가 계정에 패스키를 등록할 수 있도록 허용합니다. 구현하려면 다음 프롬프트를 사용해 보세요.
Implement passkey registration at /settings page under start directory
에이전트 실행 예: 에이전트는 새 패스키를 등록하기 위해 프런트엔드 UI와 백엔드 로직을 자율적으로 생성하거나 수정합니다.
인증
명시적 버튼 트리거 또는 브라우저 자동 완성 추천을 통해 검색 가능한 사용자 인증 정보를 사용하여 재방문 사용자가 빠르게 로그인할 수 있도록 합니다. 구현하려면 다음 프롬프트를 사용해 보세요.
Implement passkey authentication at the top page under start directory
에이전트 실행 예: 에이전트는 기본 방문 페이지 또는 로그인 경로에서 로그인 및 인증 루프를 자율적으로 처리합니다.
관리
사용자가 등록된 패스키를 보고, 이름을 바꾸고, 삭제할 수 있도록 하면서 서버와 브라우저의 비밀번호 관리자 간에 사용자 인증 정보를 동기화합니다. 구현하려면 다음 프롬프트를 사용해 보세요.
Implement passkey management at /settings page under start directory
에이전트 실행 예: 에이전트는 사용자가 기존 패스키를 보고, 추가하고, 취소할 수 있도록 구조적 선택사항을 만듭니다.
재인증
보안 변경 또는 금융 이체와 같은 민감한 작업을 허용하기 전에 기존 패스키를 사용하여 로그인한 사용자의 ID를 확인합니다. 구현하려면 다음 프롬프트를 사용해 보세요.
Implement passkey reauthentication at /reauth under start directory
에이전트 실행 예: 에이전트는 민감한 사용자 작업에 대한 단계별 보안을 설정합니다.
/modern-web-guidance
또는 Codex에 다음 명령어를 사용해 보세요.
$modern-web-guidance
확실하지 않은 경우 에이전트의 문서를 참고하거나 에이전트에게 modern-web-guidance 스킬을 직접 호출하는 방법을 문의하세요.
서버 측 통합
코딩 에이전트는 서버 측 패스키 코드를 생성할 수 있지만 최신 라이브러리 버전을 사용하지 않을 수도 있습니다. 패스키 스킬 데모 저장소에는 JavaScript 및 TypeScript용 권장 서버 측 라이브러리인 SimpleWebAuthn의 스킬인
simplewebauthn 스킬이 포함되어 있습니다.
이 스킬은 코딩 에이전트의 동작을 보완합니다.
다른 서버 측 프로그래밍 언어의 경우 Google은 언어별 패스키, FIDO2 또는 WebAuthn 라이브러리와 함께 최신 API를 사용하는 스킬을 사용하여 패스키를 통합하는 것이 좋습니다. 라이브러리 작성자는 코딩 에이전트가 항상 최신 API를 사용할 수 있도록 자체 스킬을 작성합니다.
고지사항 및 의견
Modern Web Guidance 및 패스키 스킬은 미리보기 버전입니다. 이러한 스킬은 패스키 스킬 데모 프로젝트를 사용하여 Antigravity 및 Claude Code와 같은 에이전트를 통해 개발 및 테스트되었습니다. 다른 코드베이스에 대해 테스트되었지만 제공된 예시 프롬프트 외에 스킬을 조정해야 할 수도 있습니다. 생성된 코드를 검토하여 기대에 부합하는지 확인하고 필요에 따라 추가 프롬프트를 제공하세요.
Chrome팀은 시간이 지남에 따라 이러한 스킬을 업데이트하고 Modern Web Guidance에 다른 ID 및 인증 기능을 추가합니다. 의견이나 기능 요청이 있는 경우 modern-web-guidance-src 저장소에 제출하세요.
지금 바로 사용해 보고 패스키 도입을 간소화하세요.