24px 버튼은 충분할까? 클릭 영역과 아이콘 크기 구분하기

같은 16px 아이콘 버튼이라도 '크기'를 어디서 재느냐에 따라 24×24px 기준(WCAG 2.2 2.5.8 AA)의 결과가 달라집니다. 이 글은 아이콘 크기, getBoundingClientRect 값, 실제 클릭이 버튼에 닿는 범위를 각각 측정해 비교합니다. 특히 ::after로 클릭 영역을 넓힌 버튼은 getBoundingClientRect만 재면 16×16으로 보인다는 점을 실제 측정으로 확인합니다.

시각적 크기(Visual Size)와 인터랙션 영역(Hit Area)의 본질적 차이

웹 접근성 표준에서 규정하는 '타깃 크기(Target Size)'는 디자이너가 피그마에서 그린 사각형 박스나 SVG 아이콘 자체의 시각적 픽셀 크기를 의미하는 것이 아닙니다. 사용자가 손가락으로 화면을 터치하거나 마우스로 클릭했을 때 해당 이벤트가 유효하게 발화(Trigger)되는 '실제 상호작용 가능 영역(Hit Area)'을 의미합니다.

예를 들어 16×16px 크기의 아주 작은 연필 아이콘이 화면에 있더라도, 개발자가 CSS padding이나 가상 요소를 활용하여 해당 버튼의 물리적 터치 인식 범위를 44×44px로 넓혀두었다면, 이 요소는 접근성 규격상 당당하게 44px 타깃 크기를 만족하는 합격 요소가 됩니다. 반대로 시각적으로는 30×30px의 거대한 원형 배경이 그려져 있더라도, 실제 클릭 이벤트가 걸려있는 내부 <a> 링크의 크기가 12×12px에 불과하다면 이 버튼은 명백한 규격 미달 실패 요소가 됩니다.

측정 기록: 아이콘 크기, 박스 크기, 실제 클릭 범위

Chromium 153.0.8010.12, Windows, 2026-10-17 환경에서 16px SVG 아이콘 버튼 네 가지를 만들고 세 가지를 재었습니다. ① getBoundingClientRect 값 ② document.elementFromPoint를 0.5px 간격으로 훑어 찾은 실제 클릭 범위(해상도 ±0.5px) ③ 이 사이트 대상 크기 엔진(target-size-1.0.0, WCAG 2.2 AA)에 클릭 범위를 넣은 판정.

• 패딩 0, 아이콘 16px: 박스 16×16, 아이콘 16×16, 클릭 범위 약 17.5×17.5, 엔진 pass(크기 충족 false)
• 패딩 4px (16+8): 박스 26×26, 아이콘 16×16, 클릭 범위 약 26.5×26.5, 엔진 pass(크기 충족 true)
• 24×24 고정: 박스 24×24, 아이콘 16×16, 클릭 범위 약 24.5×24.5, 엔진 pass(크기 충족 true)
• 16px + ::after inset -4px: 박스 16×16, 아이콘 16×16, 클릭 범위 약 24.5×24.5, 엔진 pass(크기 충족 true)

측정에서 알게 된 점

첫째, ::after로 확장한 버튼(bD)의 getBoundingClientRect는 16×16이지만 클릭이 닿는 범위는 약 24.5×24.5이었습니다. 박스 크기만 재면 이런 버튼을 실패로 잘못 판단합니다. 반대로 시각 아이콘 크기만 보고 '충분하다'고 판단해도 안 됩니다. 크기는 클릭이 실제로 닿는 범위로 재야 합니다.

둘째, 패딩 0인 버튼(bA)은 박스가 16×16이고 엔진은 크기 미충족(false)으로 보았습니다. 이 측정에서는 버튼을 하나씩 평가했기 때문에 주변 타깃이 없어 간격 예외로 통과(pass)했습니다. 같은 버튼이 다른 버튼 옆에 놓이면 결과가 달라집니다. 또 클릭 범위가 박스보다 조금 크게(17.5×17.5) 잡혔는데, 테두리 밖으로 삐져나온 SVG까지 클릭으로 인식된 것으로 추정합니다(원인은 따로 검증하지 않았습니다).

셋째, 20×20px 버튼 두 개를 나란히 놓았을 때 간격 2px에서는 중심 거리가 22px로 24px에 미치지 못해 엔진이 실패(추가로 2px 필요)로 판정했습니다. 간격을 6px로 벌리면 중심 거리 26px로 간격 예외를 만족해 통과했습니다. 버튼 자체를 키우지 않고 간격만 4px 늘려도 결과가 바뀝니다.

이 측정은 데스크톱 마우스 hit-test 기준입니다. 터치 기기의 실제 터치 반경, pointer: coarse 미디어 쿼리 적용 시 동작은 측정하지 않았습니다.

WCAG 2.2 2.5.8(AA 24px) vs WCAG 2.1 2.5.5(AAA 44px) 규격 비교

프로젝트의 접근성 목표 레벨에 따라 달성해야 하는 타깃 크기 요구사항을 명확히 구분해야 합니다.

• WCAG 2.2 SC 2.5.8 (Target Size Minimum, Level AA): 모든 대화형 컨트롤의 터치 대상 크기는 최소 24×24 CSS 픽셀 이상이어야 합니다. 단, 인접한 다른 터치 대상과의 거리가 충분히 떨어져 있어 중심점 기준 24px 원이 겹치지 않는다면 24px 미만이라도 합격으로 인정하는 '간격 예외(Spacing Exception)'를 공식 허용합니다.
• WCAG 2.1 SC 2.5.5 (Target Size, Level AAA): 최상위 접근성을 지향하는 AAA 기준으로, 간격 예외 없이 모든 대화형 컨트롤이 최소 44×44 CSS 픽셀 이상의 크기를 확보해야 합니다. 공공기관, 금융권, 노약자 대상 핵심 서비스에서 주로 권장됩니다.
• 국내 KWCAG 2.2 가이드라인: 국내 표준은 물리적인 크기 기준(대각선 6mm 이상 등)을 권고 문구로 두고 있으나, 웹 브라우저 CSS 픽셀 단위와의 엄밀한 일치성에 대해서는 실무적으로 WCAG 기준(24px~44px)을 준용하여 평가합니다.

패딩(Padding) 방식의 한계와 CSS 가상 요소(::after) 히트 에어리어 확장법

터치 영역을 늘리기 위해 가장 먼저 떠올리는 방법은 버튼에 padding: 12px;을 부여하는 것입니다. 그러나 이 방법은 버튼의 실제 레이아웃 크기를 부풀리기 때문에, 좁은 헤더 바나 테이블 행(Table Row) 내부에서 부모 컨테이너의 줄 높이를 깨뜨리거나 인접한 텍스트를 밀어내는 시각적 부작용을 유발합니다.

레이아웃 구조를 단 1픽셀도 흔들지 않으면서 터치 영역만 완벽하게 24px 이상으로 확장하는 업계 최고의 실무 테크닉은 CSS 가상 요소 ::after를 사용하는 것입니다.

아이콘 버튼의 CSS에 position: relative;를 부여하고, button::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 24px); height: max(100%, 24px); min-width: 24px; min-height: 24px; transform: translate(-50%, -50%); } 스타일을 선언합니다. 이 코드가 적용되면 시각적인 아이콘 크기는 14px이나 16px로 콤팩트하게 유지되면서도, 브라우저의 터치 감지 레이어는 버튼 중심을 기준으로 사방 24px(또는 44px)의 투명한 영역 전체를 클릭 영역으로 인식하게 됩니다.

모바일 터치 디바이스 미디어 쿼리(@media pointer: coarse) 최적화

데스크톱 마우스 사용자는 정밀한 조작이 가능하므로 굳이 44px의 거대한 히트 에어리어가 필요하지 않을 수 있습니다. 반응형 웹 환경에서 디바이스의 입력 장치 특성을 감지하는 최신 CSS 미디어 쿼리를 사용하면 더욱 정교한 사용자 경험을 제공할 수 있습니다.

@media (pointer: coarse) { button.icon-btn::after { min-width: 44px; min-height: 44px; } } 미디어 쿼리를 적용하면, 마우스 커서를 사용하는 데스크톱(pointer: fine) 환경에서는 본래의 컴팩트한 레이아웃을 유지하고, 손가락 터치를 사용하는 모바일/태블릿(pointer: coarse) 환경에서만 선택적으로 터치 영역을 대폭 확장할 수 있습니다. 이를 통해 디자인 완성도와 웹 접근성 표준 준수라는 두 마리 토끼를 완벽하게 잡을 수 있습니다.