버튼이 잘 안 눌린다면, 터치 영역의 크기부터 보세요

모바일에서 버튼이 잘 안 눌리거나 엉뚱한 버튼이 눌리는 가장 큰 이유는 터치 영역이 손가락에 비해 너무 작기 때문입니다. 화면에 보이는 버튼 모양보다 실제로 눌리는 영역이 충분히 커야 합니다. 터치 영역은 사용자가 손가락으로 눌렀을 때 버튼으로 인식되는 범위입니다.

손가락은 왜 마우스보다 부정확할까요?

마우스 커서는 한 점을 정확히 가리키지만, 손가락은 화면에 닿는 면적이 넓고 끝이 어디인지 정확히 보이지 않습니다. 게다가 손가락이 누르려는 버튼을 가려 버립니다. 그래서 데스크톱에서 잘 쓰이던 작은 버튼을 모바일에 그대로 옮기면 실수로 누르는 일이 잦아집니다.

터치 영역은 얼마나 커야 하나요?

주요 플랫폼의 디자인 지침은 터치 영역을 대략 손가락 끝 크기 이상으로 권장합니다. 보이는 버튼이 작더라도 주변에 보이지 않는 여백을 더해 실제로 눌리는 영역을 넓힐 수 있습니다.

항목	기준
최소 터치 영역	손가락 끝 크기 이상
버튼 사이 간격	잘못 누르지 않을 만큼
보이는 크기	작아도 되지만 영역은 넓게
중요한 버튼	더 크게, 쉽게 닿는 위치에

웹 콘텐츠 접근성 지침도 터치나 클릭 대상의 크기를 충분히 확보하도록 권고합니다.

버튼 사이 간격은 왜 중요할까요?

버튼이 크더라도 서로 바짝 붙어 있으면 옆 버튼을 누르기 쉽습니다. 특히 '삭제'와 '저장'처럼 결과가 반대인 버튼이 붙어 있으면 실수가 큰 문제로 이어집니다. 위험한 동작의 버튼은 다른 버튼과 떨어뜨려 놓거나, 누른 뒤 한 번 더 확인하는 단계를 두는 것이 좋습니다.

버튼은 어디에 두는 게 좋을까요?

한 손으로 휴대전화를 쥐고 쓰면 엄지손가락이 닿기 쉬운 곳은 화면 아래쪽 가운데입니다. 화면 맨 위 구석은 손을 고쳐 잡아야 닿습니다. 그래서 자주 쓰는 버튼이나 중요한 동작은 아래쪽에 두는 앱이 많습니다. 화면이 큰 기기일수록 이 차이가 더 커집니다.

눌렸다는 것을 어떻게 알려 주나요?

버튼을 눌렀을 때 아무 반응이 없으면 사용자는 제대로 눌렸는지 몰라 여러 번 누르게 됩니다. 누르는 순간 색이 바뀌거나 살짝 눌리는 효과를 주면 사용자가 안심합니다. 처리에 시간이 걸리는 버튼이라면 로딩 표시를 보여 주고, 처리 중에는 다시 누를 수 없게 막아 중복 동작을 방지해야 합니다. 모바일 UI 설계 기준은 에서 더 볼 수 있습니다.

자주 묻는 질문

보이는 버튼을 무조건 크게 만들어야 하나요?

보이는 크기는 디자인에 맞게 하되, 실제로 눌리는 영역만 충분히 넓히면 됩니다.

텍스트 링크도 터치 영역을 신경 써야 하나요?

네. 본문 속 작은 링크도 주변 여백을 두어 누르기 쉽게 하는 것이 좋습니다.

어르신 사용자를 위해 더 고려할 점이 있나요?

버튼과 글자를 더 크게 하고, 간격을 넉넉히 두면 누구나 쓰기 편해집니다.