6.1.2 조작 가능한 크기

요구 사항

모든 이웃한 컨트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기로 제공해야 합니다.

• 컨트롤 사이에 외곽선을 표시하지 않는 경우, 컨트롤 간 중심 간격을 충분히 제공해야 합니다.
• 조작 가능 크기(touch target size) — 화면 크기에 관계없이 조작 가능 영역의 가로와 세로는 각각 24×24 픽셀 이상이어야 합니다. 단위 변환은 W3C 「CSS Values and Units Module Level 3」의 절대 길이 정의를 참고합니다.

예외

• 운영체제가 기본으로 제공하는 사용자 인터페이스 컴포넌트
• 텍스트 안의 링크
• 특정 크기로 제공되어야 하며 다른 방식으로 제공할 수 없는 컨트롤(예: 지도 안의 핀)

개정 내역: 현행화 — 2016판 「6.5 컨트롤의 크기와 간격」

2016판은 컨트롤 크기를 가로·세로 각 9mm 이상으로 요구했고, 2025판은 WCAG 2.5.8(타깃 크기 최소)에 맞춰 24×24 픽셀 기준으로 바뀌었습니다.

왜 필요한가요

컨트롤이 충분히 크면 손 떨림이 있는 사용자와 시각장애인도 터치스크린에서 컨트롤을 쉽게 찾아 정확히 누를 수 있습니다.

도움받는 사용자

• 손 떨림·운동 장애가 있는 사용자
• 저시력인
• 고령자
• 한 손으로 조작하는 사용자

적용 방법

아이콘이 작더라도 패딩이나 터치 위임으로 조작 영역을 넓힙니다.

<!-- 아이콘 24dp, 터치 영역 48dp -->
<ImageButton
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:minWidth="48dp" android:minHeight="48dp"
    android:padding="12dp"
    android:src="@drawable/ic_close_24"
    android:contentDescription="닫기" />

// Material 컴포넌트는 minimumInteractiveComponentSize()로 48dp를 보장합니다.
IconButton(onClick = close) { Icon(Icons.Default.Close, contentDescription = "닫기") }
Icon(Icons.Default.Info, null, Modifier.minimumInteractiveComponentSize().clickable { })

// 작은 버튼의 터치 영역 확장
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    bounds.insetBy(dx: min(bounds.width - 44, 0) / 2, dy: min(bounds.height - 44, 0) / 2)
          .contains(point)
}

Button(action: close) { Image(systemName: "xmark") }
    .frame(minWidth: 44, minHeight: 44)
    .contentShape(Rectangle())

<Pressable hitSlop={12} style={{ minWidth: 44, minHeight: 44 }} accessibilityRole="button" accessibilityLabel="닫기">
  <CloseIcon size={20} />
</Pressable>

사례

[x] 16×16 닫기 아이콘, 바로 옆에 [♡] 16×16 찜 아이콘 (간격 2)

아이콘 크기 20, 조작 영역 48×48 (패딩) — 이웃 컨트롤과 겹치지 않음

자주 하는 실수

• 작은 아이콘 자체 크기만 터치 영역으로 써서 24×24 픽셀에 못 미칩니다.
• 작은 컨트롤이 붙어 있어 옆 컨트롤이 잘못 눌립니다.
• 체크박스의 레이블 텍스트를 눌러도 선택되지 않아 실제 조작 영역이 작습니다.

검사 방법

• Android 개발자 옵션의 「레이아웃 범위 표시」, Accessibility Scanner의 터치 타깃 검사, Xcode 뷰 디버거로 조작 영역 크기를 확인합니다.
• 조작 영역이 24×24 픽셀 이상인지, 외곽선이 없는 컨트롤 간 중심 간격이 충분한지 확인합니다.
• 예외(OS 기본 컴포넌트, 텍스트 안 링크, 지도 핀 등)에 해당하는지 판단합니다.

다른 지침의 대응 항목