모바일 화면에서 아이콘이 또렷하게 보인다고 해서 누르기 쉬운 버튼인 것은 아닙니다. 눈에 보이는 아이콘은 작아도 실제 클릭 영역은 충분히 넓을 수 있고, 반대로 큰 카드처럼 보여도 링크가 글자에만 걸려 있으면 사용자는 여러 번 눌러야 할 수 있습니다. 버튼 크기를 검수할 때는 모양보다 실제 포인터 대상과 주변 간격을 함께 봐야 합니다.
WCAG 2.2의 Target Size (Minimum)는 웹에서 포인터 입력 대상이 원칙적으로 최소 24 × 24 CSS 픽셀을 확보하도록 안내합니다. Apple Human Interface Guidelines는 iOS와 iPadOS의 기본 컨트롤 크기로 44 × 44 pt를 제시하고, 플랫폼별 최소 크기와 컨트롤 사이 간격도 함께 보라고 설명합니다. 두 숫자는 단위와 적용 목적이 다르므로 하나를 다른 하나의 대체 기준으로 쓰면 안 됩니다.
이 글에서는 웹과 앱 화면을 설계할 때 버튼·아이콘·칩·체크박스·텍스트 링크의 터치 영역을 어떻게 확인할지 정리합니다. 법적 적합성 판정이 아니라, 디자이너와 기획자가 개발 전달 전 놓치기 쉬운 검수 지점을 공식 문서 기준으로 설명합니다.
검수 순서는 아래 7가지입니다. 각 항목의 판단 기준은 본문에서 이어서 설명합니다.
- 아이콘과 클릭 영역 분리
- 웹: 24×24 또는 간격 예외
- 플랫폼 기본·최소 크기
- 인접 버튼 역할·간격
- 키보드 포커스 표시
- 상태별 영역 유지
- 실제 기기 입력 테스트
먼저 보이는 크기와 실제 클릭 영역을 구분합니다
아이콘 16픽셀과 버튼 16픽셀은 같은 말이 아닙니다
검색, 닫기, 더보기 아이콘은 시각적으로 16픽셀이나 20픽셀일 수 있습니다. 그렇더라도 아이콘을 감싸는 버튼에 패딩을 주면 실제 포인터 대상은 더 크게 만들 수 있습니다. 화면 밀도를 유지하면서 조작 편의성을 높이는 가장 기본적인 방법입니다.
반대로 40픽셀 카드 안에 작은 텍스트 링크만 클릭 가능하게 구현하면 보이는 면적과 실제 대상이 달라집니다. 사용자가 카드를 눌렀는데 반응하지 않는 문제는 시안의 외곽 크기만 재서는 찾기 어렵습니다. 개발 검수에서는 클릭 가능한 DOM 요소나 네이티브 컨트롤의 실제 경계를 확인해야 합니다.
배경과 패딩까지 활성 영역인지 확인합니다
버튼 배경이 44픽셀로 보이더라도 내부 SVG 아이콘에만 이벤트가 연결돼 있으면 유효한 대상은 작습니다. 반대로 배경이 없는 아이콘 버튼도 투명 패딩 영역 전체가 클릭 가능하면 충분한 대상을 제공할 수 있습니다.
디자인 명세에는 아이콘 크기와 컨테이너 크기를 따로 적는 편이 좋습니다. 예를 들어 웹 프로젝트 기준 예시로 아이콘 20px / 버튼 컨테이너 44px / 내부 패딩 12px처럼 기록하면, 개발자가 어느 경계에 인터랙션을 연결해야 하는지 분명해집니다. 이 숫자는 공식 최소 기준이 아니라 명세 작성용 예시입니다.
WCAG 2.2의 최소 기준은 24 × 24 CSS 픽셀입니다
Target Size (Minimum)은 Level AA 기준입니다
W3C의 WCAG 2.2 성공 기준 2.5.8은 포인터 입력 대상의 크기가 최소 24 × 24 CSS 픽셀이 되도록 요구합니다. 정사각형 버튼만 뜻하는 것은 아닙니다. 대상 안에 가로와 세로축에 맞춘 24 × 24 CSS 픽셀 정사각형이 완전히 들어갈 수 있는지가 핵심입니다.
둥근 모서리가 큰 작은 원형 버튼은 외곽 박스가 24픽셀이어도 내부에 24픽셀 정사각형이 들어가지 않을 수 있습니다. 이런 경우에는 크기 조건만으로 통과한다고 단정하지 말고 주변 대상과의 간격 예외를 함께 확인해야 합니다.
확대 화면만으로 최소 크기를 충족할 수는 없습니다
W3C 설명은 사용자가 화면을 확대해도 CSS 픽셀 기준의 요소 크기는 바뀌지 않으므로, 줌을 전제로 최소 크기를 충족한다고 주장할 수 없다고 안내합니다. 기본 상태에서 대상 자체 또는 허용된 간격 조건이 기준을 만족해야 합니다.
디자인 툴의 배율도 마찬가지입니다. Figma 캔버스를 200%로 확대해 버튼이 커 보이는 것은 실제 구현 크기와 무관합니다. 개발 명세의 CSS 크기와 실제 브라우저의 계산된 영역을 기준으로 검수합니다.
작은 대상은 간격 예외를 정확히 확인합니다
간격 예외는 단순히 4픽셀 띄우라는 뜻이 아닙니다
24픽셀보다 작은 대상이 무조건 실패하는 것은 아닙니다. WCAG 2.2는 작은 대상의 경계 상자 중심에 지름 24 CSS 픽셀의 가상 원을 놓았을 때, 그 원들이 다른 대상이나 다른 작은 대상의 원과 겹치지 않는 경우를 간격 예외로 설명합니다.
따라서 모든 상황에 동일한 gap: 4px 값을 적용하는 방식으로 판정하면 안 됩니다. 대상의 실제 너비와 높이, 모양, 인접 대상의 위치를 함께 봐야 합니다. 20픽셀 정사각형 두 개가 나란히 있을 때 4픽셀 공간이 도움이 될 수 있지만, 다른 크기와 배열에서는 필요한 간격이 달라집니다.
촘촘한 아이콘 행은 실수 가능성을 먼저 봅니다
에디터 툴바, 지도 제어, 표 행 액션처럼 작은 아이콘이 연속된 영역은 오작동 위험이 큽니다. 삭제와 편집, 이전과 다음처럼 결과가 다른 버튼이 붙어 있으면 한 번의 잘못된 터치가 큰 비용으로 이어질 수 있습니다.
아이콘 크기를 유지해야 한다면 활성 영역을 넓히고, 버튼 사이에 여백을 두고, 위험 동작은 확인 단계를 추가합니다. 단순히 접근성 수치를 맞추는 것보다 사용자가 옆 버튼을 잘못 누르지 않게 만드는 것이 목적입니다.
예외 항목을 기본 설계로 남용하지 않습니다
문장 안 인라인 링크에는 별도 예외가 있습니다
본문 문장 안의 링크는 줄 높이와 텍스트 재배치의 영향을 받기 때문에 Target Size (Minimum)의 인라인 예외가 적용될 수 있습니다. 그렇다고 작은 텍스트 링크를 모든 내비게이션과 주요 행동에 사용해도 된다는 뜻은 아닙니다.
회원가입, 결제, 저장, 삭제 같은 핵심 행동은 명확한 버튼으로 제공하는 편이 안전합니다. 긴 문장 안 링크가 여러 개 연속된다면 링크 사이 문구를 충분히 두고, 색상만으로 링크를 구분하지 말고 밑줄처럼 추가로 알아챌 수 있는 표식을 함께 검토합니다.
동일 기능의 충분한 크기 컨트롤이 있으면 동등 예외가 가능합니다
같은 페이지에 동일한 기능을 수행하는 충분한 크기의 다른 컨트롤이 있다면 동등 예외를 검토할 수 있습니다. 예를 들어 지도 위 작은 핀을 선택하는 기능과 별도로, 같은 장소를 선택할 수 있는 큰 목록 항목이 제공되는 경우입니다.
그러나 위치가 멀거나 발견하기 어려운 대체 컨트롤은 실제 사용자의 문제를 해결하지 못할 수 있습니다. 예외 적용 여부와 별개로, 주요 흐름에서 누구나 쉽게 찾고 조작할 수 있는 경로를 우선합니다.
Apple HIG의 44 × 44 pt는 플랫폼 설계 기준으로 봅니다
iOS와 iPadOS의 기본 컨트롤 크기는 44 × 44 pt입니다
Apple 접근성 가이드는 iOS와 iPadOS에서 기본 컨트롤 크기로 44 × 44 pt, 최소 컨트롤 크기로 28 × 28 pt를 제시합니다. macOS, tvOS, visionOS, watchOS는 각각 기본값과 최소값이 다르므로 모바일 숫자를 모든 플랫폼에 그대로 적용하면 안 됩니다.
44pt는 WCAG의 24 CSS 픽셀과 같은 단위가 아니며, 하나가 다른 하나보다 항상 더 엄격하다고 단순 비교할 수도 없습니다. 웹 적합성 기준과 네이티브 플랫폼의 권장 경험을 각각 확인한 뒤 제품의 입력 환경에 맞는 내부 기준을 정해야 합니다.
기본값과 최소값 사이에서 주변 간격을 함께 봅니다
Apple은 컨트롤 크기뿐 아니라 컨트롤 사이 패딩도 중요하다고 설명합니다. 최소 크기를 사용하더라도 옆 요소와 붙어 있으면 잘못 누를 가능성이 커집니다. 특히 한 손 사용, 흔들리는 이동 환경, 손가락 관절 움직임이 제한된 상황을 고려하면 여유 있는 크기가 유리합니다.
툴바처럼 밀도가 필요한 영역은 44pt 기본값을 출발점으로 삼고, 화면 제약 때문에 줄이는 경우 실제 기기에서 오조작 여부를 확인합니다. 최소값은 목표 크기가 아니라 더 줄이기 전에 재검토해야 할 하한선으로 보는 편이 안전합니다.
키보드 포커스와 터치 영역을 함께 검수합니다
Focus Visible은 키보드 사용자가 위치를 알게 합니다
버튼이 충분히 커도 키보드 포커스가 보이지 않으면 마우스를 쓰지 않는 사용자는 현재 위치를 잃습니다. WCAG 2.2의 Focus Visible은 키보드로 조작 가능한 인터페이스에 포커스 표시가 보이는 작동 방식이 있어야 한다고 설명합니다.
브라우저 기본 outline을 무조건 제거하지 말고, 브랜드 스타일로 바꾸더라도 배경과 구분되는 표시를 유지해야 합니다. 포커스가 이동한 뒤 시간 제한으로 사라지지 않는지도 확인합니다.
포커스 모양은 버튼 외곽과 겹침을 확인합니다
아이콘 버튼의 활성 영역을 넓히면서 포커스 링이 작은 아이콘에만 생기면 실제 조작 영역을 이해하기 어렵습니다. 버튼 컨테이너 전체를 따라 포커스가 표시되도록 하고, 인접 요소나 잘린 부모 프레임 때문에 링이 가려지지 않는지 봅니다.
Focus Appearance는 Level AAA에서 크기와 대비를 더 구체적으로 다룹니다. 모든 프로젝트가 AAA를 목표로 하지 않더라도, 포커스 표시가 지나치게 얇거나 배경과 비슷한 색인지 점검하는 참고 기준으로 활용할 수 있습니다.
컴포넌트 명세에 크기·간격·상태를 함께 남깁니다
숫자 하나보다 여러 값을 나눠 기록합니다
버튼 컴포넌트에는 최소한 다음 값을 구분해 기록합니다. 아래 숫자는 프로젝트 내부 검수 예시이며, 모든 화면에 그대로 적용하는 공식 값이 아닙니다.
- 시각 요소 크기: 아이콘 20 × 20
- 확인 이유: 화면 밀도와 인지 크기 확인
- 실제 대상 크기: 컨테이너 44 × 44
- 확인 이유: 클릭·터치 가능한 경계 확인
- 인접 대상 간격: 프로젝트 기준값(예: 8px)
- 확인 이유: 잘못된 대상 선택 가능성 감소
- 포커스 표시: 2픽셀 외곽 링
- 확인 이유: 키보드 위치와 대비 확인
- 위험 동작 처리: 삭제 전 확인
- 확인 이유: 오조작 결과 완화
이렇게 기록하면 개발자는 패딩을 시각적 여백이 아니라 인터랙션 영역으로 이해할 수 있습니다. QA도 아이콘 이미지 크기만 재는 대신 실제 클릭 경계와 포커스 상태를 확인할 수 있습니다.
상태별로 활성 영역이 달라지지 않게 합니다
기본, hover, pressed, focus, disabled 상태에서 컨테이너 크기가 바뀌면 레이아웃이 흔들리거나 포인터 대상이 이동할 수 있습니다. 상태 변화는 색, 테두리, 그림자처럼 레이아웃을 크게 바꾸지 않는 속성으로 표현하는 편이 좋습니다.
로딩 상태에서 버튼 문구가 스피너로 바뀌더라도 활성 영역과 포커스 위치를 유지합니다. 비활성 버튼은 클릭되지 않더라도 형태와 레이아웃을 보존해 사용자가 다음 행동을 예측할 수 있게 합니다.
실무에서 적용하는 7가지 검수 순서
디자인 단계에서는 컴포넌트 경계를 확인합니다
- 아이콘과 실제 버튼 컨테이너의 크기를 따로 잽니다.
- 웹 대상은 24 × 24 CSS 픽셀 기준과 간격 예외를 확인합니다.
- iOS·iPadOS는 44 × 44 pt 기본 컨트롤을 출발점으로 검토합니다.
- 인접한 버튼의 역할과 오조작 비용을 비교합니다.
- 키보드 포커스 표시의 가시성과 대비를 확인합니다.
- hover·pressed·focus·disabled에서 대상 크기가 유지되는지 봅니다.
- 실제 브라우저와 실제 기기에서 손가락·마우스·키보드로 검수합니다.
개발 전달 뒤에는 실제 이벤트 경계를 확인합니다
디자인 파일에서 44픽셀 프레임을 만들었다고 구현도 같은 영역을 보장하는 것은 아닙니다. 브라우저 개발자 도구나 네이티브 접근성 검사 도구로 실제 컨트롤 경계를 확인하고, 패딩 영역을 눌러도 같은 행동이 실행되는지 테스트합니다.
카드 전체가 클릭 가능한지, 중첩 링크가 이벤트를 가로채지 않는지, 스크롤 제스처 중 버튼이 잘못 눌리지 않는지도 봅니다. 자동 검사 결과는 출발점이며, 손가락과 키보드로 수행하는 실제 조작 검수가 필요합니다.
핵심 정리
WCAG 최소 기준과 플랫폼 권장값을 분리합니다
웹에서는 WCAG 2.2 Target Size (Minimum)의 24 × 24 CSS 픽셀과 예외 조건을 확인합니다. Apple 플랫폼에서는 HIG의 플랫폼별 기본·최소 컨트롤 크기와 주변 간격을 함께 봅니다. 24와 44라는 숫자만 비교하지 말고 단위, 환경, 기준의 목적을 구분해야 합니다.
작은 아이콘은 큰 클릭 영역으로 보완할 수 있습니다
시각적으로 작은 아이콘을 반드시 크게 그릴 필요는 없습니다. 투명 패딩과 충분한 컨테이너를 사용해 실제 대상 영역을 넓히고, 인접 버튼 간격과 포커스 표시를 함께 설계하면 화면 밀도와 조작성을 모두 지킬 수 있습니다.
FAQ
모든 모바일 버튼을 44픽셀로 만들면 WCAG를 충족하나요?
자동으로 충족한다고 단정할 수 없습니다. Apple의 44pt는 플랫폼 권장값이고 WCAG는 CSS 픽셀 기준의 실제 포인터 대상과 예외를 다룹니다. 구현된 클릭 경계, 주변 간격, 포커스 상태를 별도로 확인해야 합니다.
16픽셀 아이콘은 접근성 문제가 되나요?
아이콘 그림이 16픽셀이어도 실제 버튼 컨테이너가 충분히 크고 전체 영역이 클릭 가능하면 사용할 수 있습니다. 시각 요소 크기와 인터랙션 대상 크기를 구분하세요.
텍스트 링크도 24 × 24 CSS 픽셀이어야 하나요?
문장 안 인라인 링크에는 예외가 있을 수 있습니다. 다만 주요 행동과 내비게이션을 작은 텍스트 링크에만 의존하지 말고 충분한 크기의 명확한 컨트롤을 제공하는 편이 좋습니다.
버튼 사이 간격은 몇 픽셀이면 되나요?
하나의 고정 숫자로 모든 경우를 판정할 수 없습니다. WCAG의 간격 예외는 작은 대상의 경계 상자 중심에 놓은 지름 24 CSS 픽셀 원이 다른 대상과 겹치는지 확인합니다. 대상 크기와 배열을 함께 계산해야 합니다.
마우스로 잘 눌리면 터치 검수는 생략해도 되나요?
권장하지 않습니다. 마우스 포인터는 손가락보다 정밀하고, 이동 중 터치나 제한된 손 움직임은 오조작 가능성이 더 큽니다. 실제 기기에서 손가락, 마우스, 키보드 입력을 각각 확인하세요.
공식 출처
W3C WAI, Understanding SC 2.5.8 Target Size (Minimum)
'취미 > 어쩌다 UX📲' 카테고리의 다른 글
| Figma Text wrap, Balance와 Pretty를 고르는 6가지 기준 (0) | 2026.08.20 |
|---|---|
| Figma Make 업데이트, 프롬프트보다 직접 편집이 중요해진 이유 (0) | 2026.08.06 |
| 어쩌다 UX_08. 10가지 UX 심리학 법칙 (3) | 2023.05.28 |
| 어쩌다 UX_07. UIUX 디자인 그룹 프로젝트 후기 (0) | 2023.05.23 |
| 어쩌다 UX_06. 레퍼런스 분석하기_넷플릭스 (3) | 2023.05.14 |
