터치 타깃

정의

터치 타깃은 버튼이나 링크처럼 사용자가 눌러야 하는 요소가 손가락으로 정확히 눌릴 수 있도록 확보해야 하는 최소 크기를 뜻합니다. 마우스 커서는 뾰족한 점 하나지만 손가락 끝은 넓고 뭉툭하기 때문에, 화면에서 아무리 작아 보여도 실제로 누를 수 있는 영역은 넉넉해야 합니다. 널리 통용되는 기준은 대략 44px 안팎으로, 이 크기는 아이콘 자체의 크기가 아니라 아이콘을 감싸는 패딩까지 포함한 눌림 영역 전체를 말합니다. 눈에 보이는 크기와 실제로 반응하는 크기를 분리해 생각하는 것이 이 개념의 핵심입니다.

왜 중요한가

작은 터치 타깃은 오탭, 즉 의도하지 않은 잘못 누름을 계속 유발합니다. 원하는 버튼 대신 옆의 것이 눌리거나 아무 반응이 없으면 사용자는 같은 자리를 반복해서 두드리게 되고, 이 답답함이 쌓이면 결국 페이지를 떠납니다. 특히 이동 중이거나 한 손으로 조작하는 모바일 환경에서는 손가락이 정확히 겨냥되지 않으므로 여유 있는 크기가 더욱 중요합니다. 반대로 충분한 터치 타깃은 한 번에 정확히 눌린다는 신뢰감을 주어, 사용자가 화면을 편안하고 빠르게 다루게 합니다. 손 떨림이 있거나 작은 대상을 겨냥하기 어려운 사용자에게는 이것이 단순한 편의가 아니라 접근성의 문제이기도 합니다. 즉 넉넉한 터치 타깃은 더 많은 사람이 실수 없이 쓸 수 있는 화면을 만드는, 눈에 잘 띄지 않지만 근본적인 배려입니다.

흔한 실수

• 아이콘의 시각적 크기만 보고 눌림 영역까지 작게 두는 것입니다. 16px짜리 작은 아이콘이라도 주위에 패딩을 넉넉히 주어 실제 반응 영역은 44px 이상으로 넓혀야 손가락이 빗나가지 않습니다.
• 타깃끼리 너무 붙여 놓는 것입니다. 각 버튼이 크더라도 서로 딱 붙어 있으면 경계에서 옆 버튼이 잘못 눌리기 쉽습니다. 크기뿐 아니라 타깃 사이의 간격도 함께 확보해야 합니다.
• 데스크탑 화면에서만 확인하고 마우스로 잘 눌리니 괜찮다고 넘어가는 것입니다. 커서의 정밀한 클릭과 손가락의 뭉툭한 터치는 다르므로, 반드시 실제 휴대폰에서 손가락으로 직접 눌러 보며 크기와 간격을 점검해야 합니다.

실무 팁

• 아이콘이 작아 보여도 패딩을 포함한 터치 영역은 최소 44px 이상으로 잡으세요. 보이는 크기는 디자인의 균형에 맞추더라도, 실제로 눌리는 영역은 손가락 기준으로 따로 확보한다는 원칙을 세워 두면 오탭이 크게 줄어듭니다.
• 나란히 놓인 작은 버튼들 사이에는 최소한의 간격을 반드시 두세요. 특히 삭제나 결제처럼 되돌리기 어려운 동작 버튼은 다른 버튼과 넉넉히 떨어뜨려, 실수로 눌리는 일을 구조적으로 막는 것이 안전합니다.
• 아이콘을 시각적으로 키우고 싶지 않을 때는 눈에 보이지 않는 패딩으로 눌림 영역만 넓히세요. 작고 깔끔한 아이콘의 인상은 그대로 두면서도 손가락이 닿는 범위는 넉넉해져, 디자인과 사용성을 동시에 지킬 수 있습니다.

관련 개념