터치 영역은 24px, 44px, 48dp 중 얼마나 커야 할까
WCAG 2.2의 24×24 CSS px AA 기준과 44×44 AAA 기준, Android의 48dp 권고를 구분하고 작은 아이콘의 실제 클릭 영역을 넓히는 방법을 정리했습니다.
닫기 아이콘은 또렷하게 보이는데 손가락으로 누르면 자꾸 옆 버튼이 실행될 때가 있습니다. 아이콘 그림의 크기와 실제로 반응하는 영역이 같을 필요는 없습니다. 그림은 작게 두고 투명한 여백을 포함한 버튼 영역을 넓힐 수 있습니다. 그렇다면 그 영역은 24px, 44px, 48dp 가운데 무엇을 따라야 할까요?
웹의 최소 기준은 24×24 CSS px
WCAG 2.2 성공 기준 2.5.8은 포인터 입력 대상의 크기를 최소 24×24 CSS 픽셀로 정합니다. 이 기준은 레벨 AA이며 WCAG 2.2에서 새로 추가됐습니다. 가로와 세로가 각각 24px이라는 뜻만은 아닙니다. W3C 해설에 따르면 대상 안에 축에 맞춘 24×24 정사각형을 완전히 그릴 수 있어야 합니다. 둥근 대상처럼 그 정사각형이 들어가지 않으면 작은 대상으로 판정될 수 있습니다.
작은 대상이 곧바로 실패하는 것은 아닙니다. 대상의 경계 상자 중심에 지름 24 CSS px인 원을 놓았을 때 그 원이 다른 대상이나 다른 작은 대상의 원과 겹치지 않으면 간격 예외를 쓸 수 있습니다. W3C의 예에서 20×20 대상들이 4px씩 떨어져 있으면 통과하지만 간격이 없으면 실패합니다. 이 검사는 보이는 아이콘이 아니라 클릭 가능한 대상의 경계를 기준으로 합니다.
같은 기능을 하는 적합한 대상이 같은 페이지에 있거나, 대상이 문장 안에 있거나 대상이 아닌 텍스트의 줄 높이 때문에 크기가 제한되는 경우에도 예외가 있습니다. 작성자가 크기를 바꾸지 않은 브라우저 기본 컨트롤과, 대상의 특정 표현이 전달 정보에 본질적이거나 법적으로 요구되는 경우도 예외입니다. 이는 AA 적합성을 판정하는 조건이며, 실무에서는 조작하기 쉬운 크기를 우선하는 편이 좋습니다.
44는 더 높은 WCAG 기준이다
성공 기준 2.5.5는 최소 44×44 CSS px를 요구하는 레벨 AAA 기준입니다. 2.5.8과 달리 작은 대상을 간격만 벌려 통과시키는 예외가 없습니다. 같은 페이지에서 동일한 기능을 수행하는 대상 자체가 44×44 CSS px 이상인 경우, 문장이나 텍스트 블록 안의 대상, 작성자가 바꾸지 않은 사용자 에이전트 컨트롤, 본질적인 표현은 예외가 될 수 있습니다.
“WCAG는 44px을 요구한다”는 설명은 AAA 기준만 가리키고, “24px이면 언제나 충분하다”는 설명은 예외와 사용성을 놓칩니다. AA 적합성을 확인한다면 2.5.8의 24px과 예외를 검사하고, 더 여유 있는 목표를 세운다면 2.5.5의 44px을 사용할 수 있습니다. CSS 픽셀은 화면의 하드웨어 픽셀과도 다릅니다. CSS Values 명세는 화면 같은 장치에서 사용자 에이전트가 픽셀 단위를 기준 픽셀에 맞추도록 권고합니다. 따라서 고해상도 화면에서는 CSS 1px이 여러 장치 픽셀로 그려질 수 있습니다.
Android 48dp는 별도 지침이다
Android 개발자 문서는 터치 인터페이스의 각 상호작용 요소에 최소 48×48dp의 포커스 가능 영역을 권합니다. 같은 가이드에 따르면 Compose의 여러 기본 Material 컴포넌트는 이 최소값을 이미 적용합니다.
WCAG의 CSS px 기준과 Android의 dp 권고는 적용 환경과 범위가 달라 숫자만으로 우열을 정할 수 없습니다. 웹 페이지는 WCAG 성공 기준으로 평가하고, 네이티브 앱은 대상 플랫폼의 지침도 함께 적용해야 합니다. 플랫폼 문서는 바뀔 수 있으므로 디자인 시스템에 숫자뿐 아니라 출처와 확인 날짜를 남기는 편이 안전합니다.
실무에서는 아이콘 SVG 자체를 키우기보다 button에 padding이나 최소 크기를 주어 전체 히트 영역을 넓힙니다. 나란히 놓인 작은 컨트롤은 실제 경계와 간격을 함께 검사해야 합니다. 자동 검사만으로 원의 겹침과 예외의 맥락을 모두 판단하기 어려우므로 좁은 화면에서 포인터로 직접 확인하는 절차도 필요합니다. 색이 잘 보여도 누르기 어려울 수 있으니 WCAG 명도 대비와 대상 크기는 따로 점검합니다.
참고한 문서
- WCAG 2.2, 성공 기준 2.5.5와 2.5.8
- Understanding SC 2.5.8, Understanding SC 2.5.5
- CSS Values and Units Level 4
- Android accessibility guide
링크와 내용은 2026년 10월 5일에 확인했습니다.