터치 타겟 최소 44px: 손가락을 위한 디자인터치 타겟 최소 44px: 손가락을 위한 디자인

마우스 커서는 1px 단위로 정확하지만 손가락은 그렇지 않습니다. 성인 손가락 끝의 접촉 면적은 평균 10mm 안팎이고, 화면을 보지 않고 누르는 경우도 많습니다. 그래서 모바일 UI의 모든 터치 가능한 요소에는 최소 크기 기준이 존재합니다.

플랫폼별 기준

Apple 휴먼 인터페이스 가이드라인은 44×44pt를, 구글 머티리얼 디자인은 48×48dp를 최소 터치 타겟으로 권장합니다. WCAG 접근성 기준도 2.5.5 항목에서 44×44 CSS 픽셀을 제시합니다. 요약하면 어떤 플랫폼이든 44~48px 미만의 터치 영역은 오터치를 유발한다는 데 합의가 있는 셈입니다. 버튼뿐 아니라 체크박스, 닫기 아이콘, 리스트의 행, 탭 항목 모두에 적용됩니다.

보이는 크기와 히트 영역은 다르다

디자인상 아이콘이 24px로 작아야 한다면, 보이는 크기는 유지하되 터치 영역만 넓히면 됩니다. CSS에서는 패딩을 더해 실제 클릭 영역을 48px로 만들거나, 가상 요소(::before)로 투명한 히트 영역을 확장하는 기법을 씁니다. 시각적 밀도와 사용성은 이렇게 분리해서 해결하는 것이 정석입니다.

크기만큼 중요한 간격

타겟이 충분히 커도 서로 붙어 있으면 오터치가 발생합니다. 인접한 터치 요소 사이에는 최소 8px의 간격을 확보하세요. 특히 '삭제'와 '저장'처럼 결과가 정반대인 버튼이 붙어 있는 배치는 피해야 합니다. 화면 가장자리도 고려 대상입니다. 한 손 조작 시 엄지가 닿는 영역(화면 하단 2/3)에 주요 액션을 두고, 상단 모서리에는 빈도 낮은 기능을 배치하는 것이 엄지 친화적(thumb-friendly) 설계입니다.

테스트 방법은 간단합니다. 디자인 시안을 실제 기기에서 띄우고 엄지로 모든 버튼을 빠르게 눌러 보세요. 두 번 이상 잘못 눌리는 요소가 있다면 그것이 바로 44px 규칙이 필요한 자리입니다. 데스크톱 우선으로 작업하는 디자이너일수록 이 검증 과정을 빼먹기 쉽습니다.

코드로 보는 히트 영역 확장

24px 아이콘 버튼의 터치 영역을 48px로 늘리는 가장 간단한 CSS는 패딩입니다. 버튼에 padding: 12px을 주면 보이는 아이콘은 그대로인 채 클릭 영역만 48px이 됩니다. 레이아웃을 건드리고 싶지 않다면 가상 요소 기법을 쓰세요. position: relative인 버튼에 ::before { position: absolute; inset: -12px; content: ''; }를 추가하면 시각적 변화 없이 히트 영역만 사방 12px씩 확장됩니다. 두 줄의 코드가 오터치 불만을 크게 줄여 줍니다.

높은 곳의 버튼, 닿지 않는 엄지

화면이 커지면서 '닿는 것'의 문제는 크기에서 위치로 확장되었습니다. 6인치 이상 화면에서 한 손으로 화면 좌상단을 누르려면 손을 고쳐 잡아야 합니다. 그래서 최신 모바일 디자인은 핵심 액션을 점점 아래로 내리고 있습니다. 하단 탭 바, 하단 시트, 플로팅 버튼, 그리고 주소창마저 하단으로 내린 브라우저들이 그 증거입니다. 자주 쓰는 기능일수록 화면 아래쪽 절반에, 파괴적이거나 드문 기능은 위쪽에 두는 것이 현대 모바일 배치의 기본 문법입니다.