03 · Components · 설정
글자 크기 조절Font Size Control
사용자가 본문 기본 글자 크기를 조절. 공공·뉴스·고령 사용자가 많은 서비스에 권장되는 접근성 편의 기능입니다.
StableWCAG AA
기본
tsx
<FontSizeControl value={scale} onChange={setScale} />미리보기
글자 크기 조절은 시력이 약한 사용자나 고해상도 디스플레이를 사용하는 독자 모두에게 중요합니다. 미리보기 영역의 폰트 크기가 실시간으로 바뀝 니다.
사용 가이드
- 선택 값은 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 변수에 반영. |