PasswordStrength
비밀번호 강도 미터 — 0~max 충족 점수를 세그먼트 막대 + 라벨(약함/보통/양호/강함)로 표시. role=meter로 색 외 텍스트 채널까지. 강도 산정은 소비자(정책) 몫.
마지막 업데이트 2026-06-24
한눈에#
비밀번호 입력 옆에서 강도를 한눈에 보여주는 표시 컴포넌트입니다. 강도를 계산하지는 않습니다 — 충족 점수(score)를 받아 막대 + 라벨로 그릴 뿐입니다(정책·계산은 제품 lib 몫). 표시 전용이라 상태가 없습니다.
- 약함 → 강함 4단계
- role=meter + valuetext
- 색 + 텍스트 라벨
- 표시 전용
score / max 비율로 약함 · 보통 · 양호 · 강함 — 색 외 라벨 채널로 색맹 안전
사용 시점#
비밀번호 정책의 충족 점수를 시각화할 때 씁니다. 강도 계산은 제품 정책 lib에 두고, 이 컴포넌트엔 결과 점수만 넘깁니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
정책 점수 매핑 — 충족 요건 수를 score로 — 계산은 제품 정책이 담당
색만 두지 마세요 — showLabel=false는 색 단독 — 색맹 사용자에 의미 손실, 라벨을 유지
입력 옆 표시 — 비밀번호 입력 아래/옆에 강도를 즉시 피드백
점수 → 레벨#
score / max 비율로 4단계를 표시합니다.
| 비율 | 레벨 | 라벨 | 색 |
|---|---|---|---|
≥ 1.0 | strong | 강함 | success |
≥ 0.75 | good | 양호 | warning |
≥ 0.5 | fair | 보통 | warning |
< 0.5 | weak | 약함 | error |
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
score | number | — | 충족 점수(0..max). max를 넘으면 클램프. |
max | number | 4 | 세그먼트 수 — 기본 4 |
showLabel | boolean | true | 강도 라벨 표시 — 기본 true |
label | string | — | 라벨 텍스트 오버라이드(기본: 약함/보통/양호/강함) |
강도 산정은 제품의 비밀번호 정책에 둡니다 — Security Settings 패턴·어드민 비밀번호 변경에서 이 컴포넌트를 씁니다.
접근성#
| 계약 | 구현 |
|---|---|
| 강도 의미 | role="meter" + aria-valuenow/min/max + aria-valuetext(“비밀번호 강도: 강함”)로 텍스트 전달 |
| 색 외 채널 | 라벨 텍스트(약함/보통/양호/강함) — 색맹 안전 |
| 막대 | 장식이라 aria-hidden(의미는 valuetext·라벨이 전달) |