터치 대상 간격
작은 터치 대상과 인접 버튼 간격을 함께 검사하는 법
WCAG 2.2 성공 기준 2.5.8(Target Size Minimum)의 Spacing Exception(간격 예외) 원리와 24px 오프셋 계산법을 다룹니다.
실무 검증 기록
실무 판단 기준 및 판정 조건
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 및 공식 규격 대조 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 20px 소형 타깃의 24px 간격 원(Spacing Circle) 예외 검증 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 크기와 spacing 예외를 하나의 pass로 오해 ➔ [수정 목표] 크기·간격·실제 터치를 별도 기록 |
검증에 사용된 실제 픽스처 / 재현 조건
20×20px 대상 2개와 중심 간 거리- 비정형 SVG 다각형 버튼의 중심점 산출 오차
- 반응형 화면 축소 시 flex-wrap으로 줄바꿈되어 인접 관계가 동적으로 바뀌는 케이스
20×20px 크기의 작은 컨트롤이라도 인접한 다른 조작 대상과의 중심 간 거리가 24px 이상 확보되어 24px 직경 원이 겹치지 않으면 WCAG 2.2 SC 2.5.8 간격 예외(Spacing Exception)가 적용될 수 있습니다. 단순 크기 미달 판정과 기하학적 중심 간격 예외 적용 조건을 분리하여 계산하는 원리를 분석합니다.
WCAG 2.2 SC 2.5.8 Spacing Exception(간격 예외)의 정의
WCAG 2.2 성공 기준 2.5.8은 터치 대상의 시각적 크기가 24px 미만(예: 18x18px)이더라도, 해당 요소 중심점 기준으로 24px 직경 원형 오프셋 영역 내에 다른 인터랙티브 요소가 들어오지 않으면 합격(Pass)으로 인정합니다.
즉, 핵심은 '인접 터치 대상과의 충돌 방지'입니다. 요소가 다소 작더라도 주변 여백이 넓다면 사용자가 잘못 터치하여 원치 않는 인접 버튼을 클릭할 위험이 제거되기 때문입니다.
24px 오프셋 영역 계산법과 인접 버튼 오작동 사례
예를 들어 16x16px 크기의 수정(Edit) 버튼과 삭제(Delete) 버튼이 간격 없이 붙어 있는 경우, 작은 손가락 터치로 인해 수정하려다 삭제 버튼이 눌리는 치명적 오류가 발생합니다.
WCAG 2.5.8 수식에 따라 각 요소의 중심점에서 24px 직경(반지름 12px) 오프셋 영역을 계산할 때, 16x16px 버튼(반지름 8px) 기준으로는 인접 버튼과의 여백(gap 또는 margin)을 최소 8px 이상 부여해야 24px 원형 영역 충돌이 물리적으로 해소됩니다.
밀집된 리스트 버튼의 CSS 여백 확보 구현 코드
인접한 소형 버튼 간의 간격을 확보하는 CSS 레이아웃 패턴입니다.
- Flexbox gap 활용: .button-group { display: flex; gap: 12px; }
- Margin 오프셋 활용: .small-btn + .small-btn { margin-left: 8px; }
- Touch-action 제어: 터치 줌 및 이중 탭 오작동 방지를 위한 CSS touch-action: manipulation 지정
실무 판단 흐름 및 적용 순서
- 인접하여 밀집 배치된 소형 버튼 그룹(예: 리스트 제어 아이콘들)을 파악합니다.
- 각 버튼의 중심점 간 거리를 측정하고 24px 오프셋 영역이 겹치는지 검사합니다.
- CSS gap 또는 margin 속성을 사용하여 인접 터치 대상 간의 물리적 간격을 8px 이상 떼어놓습니다.
예외 조건 및 수동 검토 범위
- 간격 예외(Spacing Exception)는 인접한 조작 대상 간의 오동작을 줄여주지만, 절대적인 터치 면적 자체가 작은 문제점을 완전히 상쇄하지는 못합니다.
- 사용자가 한 손으로 스마트폰을 쥐고 엄지손가락으로 조작하는 환경에서는 44×44px 이상을 확보하는 것이 안전합니다.
실무 핵심 질문과 답변 (FAQ)
버튼 크기가 24px보다 작아도 인접 간격이 넓으면 WCAG 기준을 통과하나요?
네, WCAG 2.2 SC 2.5.8의 Spacing Exception 규정에 따라, 대상 크기가 24px 미만이라도 해당 요소 중심점 기준 24px 직경 원형 오프셋 영역 내에 다른 인접 버튼이 없다면 합격으로 인정됩니다. FAQ 전체 보기
24px 오프셋 영역이란 정확히 무엇을 의미하나요?
터치 대상의 중심점을 기준으로 24px 직경(반지름 12px) 범위를 설정했을 때, 다른 터치 대상의 반응 영역과 물리적으로 충돌하거나 겹치지 않는 안전 공간을 의미합니다. FAQ 전체 보기
소형 아이콘 버튼들이 가로로 밀집되어 있을 때 가장 빠른 해결책은 무엇인가요?
부모 컨테이너 요소에 CSS Flexbox gap: 8px 이상을 부여하거나, 버튼들 간에 margin-left: 8px 오프셋을 부여하여 인접 24px 영역 충돌을 해소하는 것이 가장 빠릅니다. FAQ 전체 보기