03 · Components · 설정
글자 크기 조절Font Size Control
사용자가 본문 기본 글자 크기를 조절. 공공·뉴스·고령 사용자가 많은 서비스에 권장되는 접근성 편의 기능입니다.
StableWCAG AA
기본
글자 크기 조절은 시력이 약한 사용자나 고해상도 디스플레이를 사용하는 독자 모두에게 중요합니다. 미리보기 영역의 폰트 크기가 실시간으로 바뀝 니다.
사용 가이드
- 선택 값은 localStorage에 저장하고 페이지 로드 시 루트
--text-base에 반영. - 전체 UI가 아닌 본문 콘텐츠에만 적용하세요. 내비게이션까지 키우면 레이아웃이 깨집니다.
- 브라우저 기본 확대(Ctrl+)는 여전히 존중해야 하므로 rem 기반 스케일이 안전합니다.
role="radiogroup"으로 감싸고 각 버튼에role="radio", aria-checked를 부여합니다. 버튼 안의 "가" 글자를 실제 크기로 보여주어 결과를 미리 예상 가능하게 합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
value | "sm" | "md" | "lg" | "xl" | 현재 선택된 스케일. | |
onChange | (value: FontScale) => void | 선택 변경 콜백. 상위에서 루트 CSS 변수에 반영. |