터치 영역
누를 수 있는 요소의 최소 크기
WCAG 2.5.5 AAA (Target Size 44×44 minimum) + Apple Store reference 톤을 정형 토큰화. spec이 layout/component size 카테고리 미지원이라 prose-token 패턴(shadow/motion/overlay/breakpoint와 동일). 5 토큰. v54 Breakpoints sub-sub의 reference 가이드를 토큰으로 격상.
| 토큰 | 값 | 의미 |
|---|---|---|
touch-min | 44px | WCAG 2.5.5 AAA minimum (default, 모든 hit target 권장) |
touch-pill-w | 100px | Pill CTA min-width (Apple Store: ~44 × 100) |
touch-circular | 44px | Circular chip / icon button (= touch-min, explicit alias) |
touch-nav-h(32) ·touch-nav-w(80) 은 쓰지 않아 이 표와 내보내기(웹 CSS · 앱 Dart)에서 뺐다(2026-10-16 사용자 결정 — 기초 웹 01-039 B). 데스크톱에서도 누르는 영역은 44 다(Inclusive Design).touch-pill-w·touch-circular는 쓰는 곳이 없지만 그대로 둔다.
추가 이유
- v33-v48 컴포넌트 batch에 size prose 있으나 어떤 토큰 값 기준 인지 명시 부재 — 컴포넌트별 각자 hex/px 기재. 통합 토큰화로 시스템 일관성 ↑.
- WCAG 2.5.5 AAA 명시:
touch-min44px는 hit target minimum — 모든 컴포넌트 spec에서 인용 가능.touch-circular는 의미적 alias (44 = touch-min, but circular shape 의도 명시). - Apple Store reference: Pill (44 × 100) / Nav utility (32 × 80) 정형화. v54 Breakpoints prose의 reference 가이드를 토큰으로 격상.
사용 패턴
- 모든 hit target:
min-height: var(--touch-min); min-width: var(--touch-min);(44 × 44 충족). - Pill CTA:
height: var(--touch-min); min-width: var(--touch-pill-w); border-radius: var(--radius-full);. - Circular icon button:
width: var(--touch-circular); height: var(--touch-circular); border-radius: var(--radius-full);. Precision desktop nav —— 쓰지 않는다(2026-10-16 01-039 B).touch-nav-h·touch-nav-w
단위·명명
- px: 한국 디자이너 친화적 + Figma frame 단위 일치.
touch-{name}: WCAG "target" / "hit target" 어휘. spec 외부(prose-token)라 자체 namespace.
듀얼 브랜드 — unified
- HR (B2B 데이터 밀도) / Desk (B2C 모바일 우선) 모두 동일 5 토큰. brand-agnostic.
- 사용 강도 차이: HR은
breakpoint-lg이상 정밀 desktop에서touch-nav-h/-w적극(2026-10-16 걷었다 — 44), Desk는 모든 viewport에서touch-min/touch-circular우선 (모바일 hit target).
4px 베이스 호환
- 44/100/80/32 모두 4의 배수 (11×4, 25×4, 20×4, 8×4). v4 spacing 정신과 일치.
- spacing 카테고리 추가 안 함 — touch target은 padding/margin/gap과 의미적으로 다름(컴포넌트 outer size).
export 통합 (build-tailwind-v4.mjs)
v59에서 parseTouchTargets 추가, prose 표 직접 추출. CSS variable: --touch-min, --touch-pill-w, --touch-circular(--touch-nav-h · --touch-nav-w 는 2026-10-16 에 뺐다).
자동 검증 미적용
touch target은 functional layout token — contrast 룰 무관. spec 외부(prose-token)라 lint 영향 0.