터치 타깃

마우스를 쓰는 화면을 그대로 손가락으로 쓰게 된 것이 시작이었습니다. 커서는 끝이 한 점이라 16픽셀짜리 아이콘도 정확히 찍을 수 있습니다. 손끝은 화면에 닿는 면이 지름 8밀리미터에서 10밀리미터쯤 되는 넓은 면이고, 그 면의 어디가 눌린 것으로 계산될지는 사용자가 알 수 없습니다.

그래서 같은 화면이 손가락에서는 다르게 동작했습니다. 목록 오른쪽 끝에 공유와 삭제 아이콘이 나란히 붙어 있으면 공유를 누르려다 삭제가 눌립니다. 체크박스가 작으면 세 번 시도해서 겨우 켜집니다. 되돌릴 수 없는 동작에서 이 오작동은 사용자의 실수로 기록되지만 원인은 화면 쪽에 있습니다. 버스에서 한 손으로 쓰는 사람이나 손이 떨리는 사람에게는 이 차이가 더 크게 나타납니다.

터치 타깃은 그 여유를 숫자로 못 박은 개념입니다. 보이는 아이콘의 크기와 별개로, 눌러서 반응하는 영역을 얼마 이상 확보해 둘지를 정합니다. 장애나 상황에 관계없이 쓸 수 있게 만드는 접근성 항목 가운데 가장 기계적으로 확인할 수 있는 것에 속합니다.

요소마다 반응 영역을 정해진 크기 이상으로 만들고, 서로 붙지 않게 간격을 둡니다. 정해야 하는 것은 다섯 가지입니다.

1. 기준 숫자를 고릅니다. 애플의 휴먼 인터페이스 가이드라인은 한 변을 44포인트 이상으로 두라고 적고, 구글의 머티리얼 디자인은 48dp를 권합니다. 웹 접근성의 국제 지침인 WCAG는 24 곱하기 24 CSS 픽셀을 최소로 두고 간격으로 보완할 수 있게 열어 뒀습니다. 팀은 이 가운데 하나를 정해 문서에 적고 그것으로 판정합니다.
2. 보이는 크기와 반응 영역을 분리합니다. 이 구분이 이 개념의 핵심입니다. 아이콘은 20픽셀로 그려 두고 그 주위에 여백을 넣어 누를 수 있는 영역만 44픽셀로 키울 수 있습니다. 화면의 밀도를 유지하면서 기준을 맞추는 방법이 이것입니다.
3. 인접 요소 사이의 간격을 함께 봅니다. 영역이 각각 44픽셀이어도 서로 맞닿아 있으면 경계에서 오작동이 납니다. 8픽셀쯤 떼어 두는 것이 관행이고, 지우기처럼 되돌릴 수 없는 동작은 더 떼어 놓습니다.
4. 자리에 따라 더 키웁니다. 화면 맨 위 구석은 한 손으로 쥐었을 때 엄지가 닿기 어려운 자리라 같은 크기도 누르기 어렵습니다. 목표가 크고 가까울수록 빨리 누른다는 피츠의 법칙이 여기서 크기와 위치를 함께 보게 만드는 근거입니다.
5. 실제 기기에서 확인합니다. 노트북에서 마우스로 눌러 보는 것으로는 이 문제가 드러나지 않습니다. 손 크기가 다른 두 사람이 엄지로 눌러 보는 것이 가장 빠릅니다.

수치는 기계로 훑을 수도 있습니다. 개발자 도구로 반응 영역을 표시해 기준보다 작은 것을 뽑으면 화면 하나에 스무 개씩 걸리는 일이 흔합니다.

손가락으로 쓰는 화면 전체가 대상이지만 특히 걸리는 자리가 있습니다.

첫째는 목록입니다. 한 줄에 여러 동작이 붙는 구조라 아이콘이 가장 작아지는 자리입니다. 줄 전체를 누르면 열리게 하고 개별 동작은 줄을 눌러 들어간 화면에 두는 식으로 구조를 바꾸는 판단이 여기서 나옵니다.

둘째는 표입니다. 열이 많으면 칸이 좁아지고, 칸마다 들어가는 버튼도 함께 작아집니다. 이때는 버튼을 줄이고 줄 단위 동작으로 묶는 쪽이 크기를 억지로 맞추는 것보다 낫습니다.

셋째는 작은 화면을 기준으로 먼저 설계하는 모바일 퍼스트 작업입니다. 작은 화면에서 기준을 맞춰 두면 큰 화면에서는 저절로 통과합니다. 순서를 반대로 하면 큰 화면에서 정한 밀도를 작은 화면에 밀어 넣으면서 기준이 깨집니다.

넷째는 심사와 검토입니다. 앱 장터 심사와 공공기관 접근성 검토가 이 항목을 숫자로 확인하기 때문에, 통과 조건으로 다뤄지는 경우가 많습니다. 버튼 하나가 기준에 걸려 배포가 미뤄지는 일이 실제로 생깁니다.

데스크톱도 대상에서 빠지지 않습니다. 마우스로도 작은 목표는 느리게 눌리고, 화면을 만지는 노트북과 키오스크는 손가락으로 조작합니다. 다만 데스크톱 전용 도구에서는 24픽셀 기준으로 충분한 경우가 있어서, 팀이 화면 종류별로 기준을 따로 적어 두기도 합니다.

"이 아이콘 반응 영역이 24픽셀이에요. 44로 키워야 합니다."

보이는 크기가 아니라 누를 수 있는 영역을 지적한 말입니다.

"아이콘은 그대로 두고 여백만 넣어 주세요."

밀도를 유지하면서 기준을 맞추자는 요청입니다.

"삭제랑 공유가 붙어 있어서 오작동이 나요. 간격부터 벌리죠."

크기보다 간격이 원인이라는 판단입니다.

페이지덱의 문서 목록에서 이 문제가 실제로 보고됐습니다. 줄 오른쪽 끝에 공유, 복제, 삭제 아이콘 셋이 붙어 있었고, 문의 창구에 지우려던 문서가 아닌데 지워졌다는 접수가 한 달에 일곱 건 들어왔습니다.

민서가 확인해 보니 아이콘의 반응 영역이 각각 28픽셀이고 간격이 2픽셀이었습니다. 고친 방식은 아이콘을 키우는 것이 아니라 구조를 바꾸는 쪽이었습니다. 줄에는 더 보기 버튼 하나만 44픽셀 영역으로 두고 세 동작을 그 안으로 옮겼습니다. 삭제는 그 안에서도 맨 아래에 따로 떼어 두었습니다.

기준을 맞추려면 아이콘을 키워야 한다고 보는 경우가 가장 많습니다. 숫자가 크기로 적혀 있으니 그림도 함께 커져야 할 것처럼 보입니다. 하지만 기준이 말하는 것은 반응 영역이고, 그림은 그대로 둘 수 있습니다. 이 구분을 모르면 디자인이 뭉뚝해진다는 이유로 기준을 포기하거나, 반대로 화면이 아이콘으로 가득 차게 됩니다. 아이콘 20픽셀에 여백 12픽셀씩을 더해 44픽셀을 만드는 것이 같은 화면을 유지하면서 통과하는 방법입니다.

손가락으로 쓰는 화면만의 문제라고 읽는 것도 흔합니다. 이름에 터치가 들어가 있으니 그렇게 읽힙니다. 그런데 이 기준이 실제로 다루는 것은 조작의 정확도이고, 정확도가 떨어지는 상황은 손가락 말고도 많습니다. 손이 떨리는 사용자, 흔들리는 차 안, 마우스 대신 트랙패드를 쓰는 환경이 그렇습니다. 데스크톱에서 이 항목을 빼고 만들면 접근성 검토에서 같은 지적을 다시 받게 됩니다.