작은 터치 대상과 인접 버튼 간격을 함께 검사하는 법

스마트폰과 태블릿을 중심으로 한 모바일 웹 브라우징 환경에서, 지나치게 작거나 서로 다닥다닥 붙어 있는 터치 버튼은 사용자를 극심한 스트레스에 빠뜨립니다. 손가락 끝이 화면에 닿는 면적은 마우스 커서의 단일 픽셀과 달리 물리적으로 10mm 안팎의 타원형 면적을 형성하기 때문에, 인접한 버튼과의 간격이 충분하지 않으면 사용자가 의도치 않게 삭제 버튼 대신 전송 버튼을 누르는 것과 같은 치명적인 오작동(Fat Finger Problem)이 발생합니다. 이에 따라 최신 국제 표준인 WCAG 2.2에서는 성공 기준 2.5.8(Target Size Minimum, Level AA)을 신설하여, 최소 24×24 CSS 픽셀 이상의 터치 크기를 확보하거나 인접 요소와의 충분한 물리적 간격을 둘 것을 의무화했습니다. 이 글에서는 WCAG 2.2 2.5.8의 핵심 요구사항과 정밀한 '간격 예외(Spacing Exception)' 계산 기하학, 그리고 실무 CSS 확장 구현법을 깊이 있게 분석합니다.

WCAG 2.2 2.5.8 신설 배경과 24px의 기술적 의미

기존 WCAG 2.1에서는 터치 대상 크기에 대해 오직 AAA 레벨의 성공 기준 2.5.5(44×44 CSS px)만을 규정하고 있었습니다. 그러나 현실적인 모바일 화면 디자인에서 모든 아이콘과 링크를 44px 이상으로 키우는 것은 모바일 UI 밀도와 비즈니스 레이아웃 측면에서 달성하기가 극히 어렵다는 피드백이 전 세계 개발 커뮤니티로부터 쏟아졌습니다.

이에 따라 W3C는 2023년 10월 공식 발표된 WCAG 2.2에서 보다 현실적이면서도 필수적인 최소 기준으로서 레벨 AA의 성공 기준 2.5.8(최소 24×24 CSS px)을 도입했습니다. 손떨림이나 운동 장애(Motor Impairment)가 있는 사용자, 작은 모바일 화면을 한 손으로 조작하는 일반 사용자가 인접한 다른 버튼을 실수로 함께 누르지 않도록 방지하는 안전지대를 규정한 것입니다.

간격 예외(Spacing Exception)의 정밀 기하학적 계산 원리

WCAG 2.2 2.5.8 기준에서 가장 독창적이고 실무적인 개념은 바로 '간격 예외(Spacing Exception)'입니다. 화면 디자인의 제약으로 인해 시각적인 버튼의 너비나 높이가 24px 미만(예: 16×16px, 18×18px)으로 제작되었다 하더라도, 인접한 다른 모든 인터랙티브 요소와의 간격이 충분히 넓다면 규격 위반이 아니라고 판단하는 합리적인 예외 조항입니다.

이 예외는 각 타깃의 중심점(Center Point)을 기준으로 반경 12px(직경 24px)의 가상 원(Circle)을 그렸을 때, 인접한 다른 터치 대상의 경계 영역 및 인접 터치 대상의 24px 가상 원과 서로 겹치지 않는다면 통과로 인정됩니다. 예를 들어 가로 16px, 세로 16px 크기의 아이콘 버튼이 있을 때, 주변의 다른 버튼과의 여백(Margin)이 최소 4px 이상 확보되어 있다면, 두 요소의 중심 간 거리는 24px 이상이 되므로 기준을 완벽하게 충족합니다. 즉, '크기가 작다면 그만큼 간격을 벌려서 오터치를 방지하라'는 것이 W3C의 명확한 공학적 해법입니다.

예외가 인정되는 4가지 시나리오의 올바른 해석

실무 퍼블리싱 과정에서 불필요한 레이아웃 파괴를 막기 위해, 표준에서 공식적으로 면제해 주는 4가지 예외 조건을 정확히 인지해야 합니다.

• 1. 인라인 텍스트 링크(Inline Targets): 본문 문장 중간에 포함된 하이퍼링크 텍스트는 폰트 크기가 16px이더라도 강제로 줄 높이나 크기를 24px로 키울 필요가 없습니다. 문맥의 흐름을 해치지 않기 위한 예외입니다.
• 2. 브라우저 기본 사용자 에이전트 컨트롤(User Agent Control): 개발자가 커스텀 스타일을 입히지 않은 순수 브라우저 기본 체크박스나 라디오 버튼, 셀렉트 박스는 크기가 작더라도 위반으로 처리되지 않습니다.
• 3. 필수적인 표현(Essential): 지도 상의 핀 마커처럼 타깃의 크기를 키우면 지도의 특정 좌표 정보를 가리키는 본래의 정보 전달 목적이 훼손되는 경우 예외가 인정됩니다.
• 4. 동등한 대체 컨트롤 제공(Equivalent Target): 같은 페이지 내에 24×24px 이상의 크기를 갖춘 동일 기능의 다른 버튼이 이미 존재하는 경우 작은 컨트롤이 허용됩니다.

디자인을 해치지 않고 터치 영역만 확장하는 실무 CSS 테크닉

현업 디자이너가 피그마(Figma)에서 16×16px 크기의 세련된 닫기(X) 아이콘이나 더보기 아이콘을 넘겨주었을 때, 퍼블리셔가 디자인 원형을 훼손하지 않으면서 24px 이상의 터치 타깃을 완벽히 확보하는 가장 우아한 방법은 CSS 가상 요소(Pseudo-elements)를 활용하는 것입니다.

아이콘 버튼에 position: relative를 주고, button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); min-width: 24px; min-height: 24px; } 스타일을 적용합니다. 이렇게 하면 사용자의 눈에는 섬세한 16px 아이콘으로 그대로 보이지만, 브라우저가 인식하는 실제 투명한 터치 히트 에어리어(Hit Area)는 24×24px 사각형으로 넓어집니다.

이 가상 요소 확장 기법을 사용하면 부모 컨테이너의 그리드나 플렉스 레이아웃을 깨뜨리지 않고도, 모바일 기기에서의 터치 성공률을 극적으로 높이고 WCAG 2.2 AA 심사를 단번에 통과할 수 있습니다.

WCAG 2.2 SC 2.5.8 24×24 CSS 픽셀 언더슈트와 간격 오프셋 계산 공식

WCAG 2.2 기준에 새롭게 신설된 성공 기준 2.5.8(Target Size - Minimum, Level AA)은 대화형 타깃의 최소 유효 영역을 24×24 CSS 픽셀로 규정합니다. 다만 시각 디자인상 24px 미만(예: 18px 닫기 아이콘이나 16px 뱃지 삭제 버튼)의 타깃을 허용하는 핵심 예외 조항으로 간격 오프셋(Spacing Offset) 규칙을 제공합니다.

간격 오프셋의 판정 공식은 타깃 중심점 간의 거리 또는 경계 상자(Bounding Box) 주변의 비대화형 여백을 측정합니다. 타깃 A의 크기가 W_A × H_A(예: 16×16px)일 때, 직경 24px 원을 타깃 A의 중심에 올려놓았을 때 그 원의 영역 내에 인접한 다른 대화형 타깃 B의 경계 상자가 겹치지 않아야 합니다.

즉, 타깃 A와 타깃 B 사이의 최소 간격 S는 S >= (24 - min(W_A, W_B)) / 2 공식으로 계산됩니다. 만약 두 버튼이 2px 여백만 두고 붙어 있다면 오발림 확률이 급격히 증가하므로 명백한 기준 위반에 해당합니다.

• 최소 크기 기준: 대화형 요소의 경계 상자는 기본 24×24 CSS 픽셀 이상이어야 함
• 간격 예외 산식: 24px 미만 타깃의 경우 인접 대화형 요소와의 중심 간격 여백이 (24 - 크기) / 2 이상 확보되어야 통과
• 인라인 텍스트 링크 예외: 본문 텍스트 단락 내부의 인라인 링크는 줄바꿈 제약으로 인해 24px 크기 규칙에서 공식 면제

모바일 툴바 및 인라인 태그 목록에서의 가상 요소(::after) 터치 확장 CSS

모바일 반응형 웹 디자인에서 폰트 크기나 시각적 뱃지 크기를 억지로 24px 이상으로 키우면 타이포그래피 균형이 무너질 수 있습니다. 이때 시각적 렌더링 크기는 유지하면서 보조공학 및 터치 인터페이스의 실제 감지 영역을 44px 이상으로 안전하게 확장하는 기법이 가상 요소 패딩 확장입니다.

이 기법을 사용할 때 주의할 점은, 인접한 버튼들이 너무 가깝게 배치된 경우 가상 요소 히트 영역끼리 겹쳐 z-index에 따라 특정 버튼이 전혀 클릭되지 않는 버그가 발생할 수 있다는 점입니다. 따라서 컨테이너 요소에 display: flex와 gap: 8px 이상을 부여하여 물리적 간격을 물리적으로 확보해야 합니다.

• 시각적 크기: width: 18px, height: 18px로 세련된 마이크로 아이콘 유지
• 히트 영역 확장: ::after 가상 요소를 absolute로 띄우고 width: 44px, height: 44px, top: 50%, left: 50%, transform: translate(-50%, -50%) 적용
• 간격 안전장치: 버튼 부모 플렉스 컨테이너에 gap: 8px 이상을 부여하여 확장된 터치 레이어 간 중첩 방지