Touch target, Tap target, Apple 44pt vs Android 48dp

한 줄로

손가락이 정확히 누를 수 있는 최소 영역입니다. Apple은 44pt, Google은 48dp를 가이드로 제시합니다.

어디서 왔나

스마트폰 등장(2007 iPhone) 후 새로운 문제가 생깁니다. 마우스보다 훨씬 큰 손가락입니다. 작은 버튼은 정확히 누르지 못합니다.

Apple과 Google이 각각 표준을 정의합니다.

Apple HIG: 44pt × 44pt 이상입니다. Material Design: 48dp × 48dp 이상입니다.

차이는 작지만, 두 가이드 모두 약 1cm 정도의 영역을 권장합니다. 사람 손가락 끝의 평균 크기 기준입니다.

측정 단위

pt (iOS): point입니다. 1pt = 1/72 인치, 약 0.35mm입니다. dp (Android): density-independent pixel입니다. 디바이스 픽셀 밀도에 따라 자동 조정됩니다.

함정

시각적 크기와 터치 영역이 다르게: 작은 아이콘이지만 주변 padding으로 영역을 확장할 수 있습니다. 간격 부족: 버튼들이 너무 가까우면 오타치가 발생합니다.

해결책은 작은 아이콘 버튼이라도 padding으로 44pt 영역을 확보하는 것입니다.

.icon-button {
  padding: 12px; /* 24px 아이콘 + padding = 48px 영역 */
}

WCAG 기준

WCAG 2.5.5 (Level AAA): 모든 터치 타겟이 44 × 44 CSS 픽셀 이상이어야 합니다. WCAG 2.5.8 (Level AA, 2023 신규): 24 × 24 CSS 픽셀 이상이어야 합니다(더 완화된 기준).

바이브 메이커가 챙길 한 가지

모바일에서 작은 닫기 버튼을 작게 만드는 게 가장 흔한 실수입니다. 시각적으로는 작아도 padding으로 영역을 키웁니다.

관련

Fitts's Law, WCAG, Notch