마우스로 만든 화면이 터치에서 실패하는 이유는 대부분 하나입니다. 커서는 정확히 한 점을 가리키지만 손가락은 넓은 면으로 닿습니다. 화면에는 아이콘이 16픽셀로 예쁘게 놓여 있는데, 실제로 누르면 옆 항목이 눌리거나 아무 일도 일어나지 않습니다.
커서는 1픽셀이지만 손가락은 아닙니다
기준으로 삼을 값은 있습니다. 웹 접근성 지침(WCAG 2.2)은 목표 크기 최소 기준으로 24 × 24 CSS 픽셀을, 강화 기준으로 44 × 44 를 제시합니다. 모바일 운영체제의 디자인 가이드도 대체로 44~48 근처를 권장합니다. 이 값들은 우리가 측정한 수치가 아니라 공개된 규격과 지침의 값이고, 그래서 그대로 인용할 수 있습니다.
실무 기준은 간단합니다 — 손가락으로 누르는 것은 최소 44 를 목표로 하고, 그보다 작아야 할 이유가 있다면 최소한 24 아래로는 내려가지 않게 합니다.
보이는 크기를 키우지 않고 누르는 크기만 키우기
디자인상 아이콘을 크게 만들 수 없는 경우가 많습니다. 이때 시각적 크기와 누르는 영역을 분리합니다. 가장 단순한 방법은 여백입니다 — 아이콘은 그대로 두고 버튼에 padding 을 주면 클릭 영역이 함께 커집니다.
여백이 배치를 흔든다면 가상 요소로 영역만 넓힙니다.
.icon-btn { position: relative; } 와 .icon-btn::after { content: ""; position: absolute; inset: -10px; } 두 줄이면 버튼의 실제 누름 영역이 사방 10픽셀씩 넓어지고, 화면에 보이는 크기는 그대로입니다.
간격도 크기의 일부입니다
작은 목표라도 주변이 비어 있으면 실제로는 누를 만합니다. 접근성 지침의 최소 기준도 목표 주위에 충분한 간격이 있으면 크기 요건의 예외를 인정합니다. 반대로 44 크기의 버튼이라도 서로 붙어 있으면 경계에서 오조작이 납니다.
특히 위험한 자리는 목록의 행 전체가 링크인 경우입니다. 행 안에 삭제 버튼 같은 작은 조작이 함께 있으면, 그 둘 사이에 눈에 보이지 않는 여유가 필요합니다.
호버에만 있는 기능은 터치에서 존재하지 않습니다
터치에는 호버가 없습니다. 마우스를 올려야 나타나는 하위 메뉴, 툴팁에만 적힌 설명, 카드에 올려야 보이는 버튼은 터치 사용자에게는 아예 없는 기능입니다. 일부 모바일 브라우저는 첫 탭을 호버처럼 처리하고 두 번째 탭을 클릭으로 처리하는데, 사용자에게는 “한 번 눌렀는데 아무 일도 안 일어나는” 고장으로 느껴집니다.
해결은 화면 폭으로 추측하지 않는 것입니다. 터치가 되는 넓은 화면이 실재하므로 폭 기준은 틀립니다. 대신 입력 장치를 직접 묻습니다 — @media (hover: hover) and (pointer: fine) 안에서만 호버 연출을 켜고, 기능 자체는 탭만으로도 도달 가능한 경로를 반드시 함께 둡니다.
조작성과 접근성을 화면 위에서 점검하는 방법은 테마 · 플러그인 아카이브에서 이어지고, 실제 사이트를 항목별로 진단해 보고 싶다면 무료 도구의 점검 플러그인을 쓸 수 있습니다.
다음 회차
누를 수 있게 되었다면 다음은 무엇을 누를지입니다. 다음 회차는 모바일 내비게이션 — 햄버거가 실제로 지불하는 비용과 그 대안들입니다.