Web Guide터치 영역엄지 영역모바일 조작
터치 영역 크기와 엄지 영역
마우스 커서는 한 점이지만 손가락은 넓습니다.
PC 기준으로 만든 버튼은 모바일에서 누르기 어렵습니다. 잘못 눌러 다른 곳으로 가는 일이 반복됩니다.
01왜 작으면 안 되는가
손가락 끝은 생각보다 넓습니다. 작은 버튼을 정확히 누르려면 집중해야 하고, 그래도 종종 빗나갑니다.
잘못 눌러 다른 페이지로 가면 뒤로 가서 다시 시도해야 합니다. 이 작은 불편이 이탈로 이어집니다.
01
정확도 한계
손가락 끝의 접촉 면적이 넓어 정밀한 조작이 어렵습니다.
02
화면이 가려짐
누르는 순간 손가락이 그 부분을 가립니다.
03
이동 중 사용
걸으면서, 흔들리는 차 안에서 조작하는 경우가 많습니다.
04
한 손 사용
대부분 한 손으로 씁니다. 엄지의 움직임에 제약이 있습니다.
05
연령과 상황
손이 크거나 떨림이 있으면 더 어렵습니다.
02크기와 간격
버튼 자체의 크기도 중요하지만, 버튼 사이의 간격도 중요합니다. 크기가 충분해도 붙어 있으면 옆 버튼이 눌립니다.
특히 목록에서 수정과 삭제 버튼이 나란히 있으면 위험합니다.
최소 크기
손가락으로 누를 수 있는 크기를 확보합니다. 시각적으로 작아도 클릭 영역은 넓힐 수 있습니다.
버튼 간격
인접 버튼 사이에 충분한 여백. 붙어 있으면 오작동합니다.
위험한 행동 분리
삭제 같은 되돌릴 수 없는 버튼은 멀리 두거나 확인 단계를 둡니다.
링크 간격
본문 안 링크가 여러 줄에 걸치면 줄 간격도 영향을 줍니다.
체크박스
체크박스만이 아니라 라벨 전체를 누를 수 있게 합니다.
03엄지가 닿는 범위
한 손으로 휴대폰을 쥐면 엄지가 닿는 범위가 제한됩니다. 화면 상단 모서리는 특히 닿기 어렵습니다.
자주 쓰는 기능은 화면 아래쪽에 두는 것이 편합니다.
하단 중앙 — 가장 편함
핵심 행동 버튼을 두기 좋은 자리
중간 영역 — 무난함
일반적인 콘텐츠와 링크
상단 — 닿기 어려움
손을 옮겨야 합니다. 자주 쓰는 기능은 피합니다
상단 반대쪽 모서리 — 가장 어려움
오른손잡이의 왼쪽 위. 중요한 것을 두지 않습니다
04확인하는 방법
PC에서 화면을 줄여 보는 것으로는 부족합니다. 실제 휴대폰에서 직접 눌러 봐야 압니다.
특히 여러 사람이 각자 자기 휴대폰으로 테스트하면 손 크기에 따른 차이도 발견됩니다.
실제 기기 테스트PC 브라우저 축소가 아니라 진짜 휴대폰에서.
한 손으로한 손으로만 조작해 봅니다. 닿지 않는 곳이 드러납니다.
여러 사람손 크기가 다른 여러 명이 테스트합니다.
이동 중걸으면서 조작해 봅니다. 정밀한 조작이 어려운 상황을 재현합니다.
오작동 기록잘못 눌린 곳을 기록해 개선합니다.
CHECK POINT
□ 버튼이 손가락으로 누르기 충분한 크기인가
□ 인접한 버튼 사이에 여백이 있는가
□ 삭제 같은 위험한 버튼이 분리되어 있는가
□ 체크박스의 라벨 전체를 누를 수 있는가
□ 자주 쓰는 기능이 화면 아래쪽에 있는가
□ 실제 휴대폰에서 한 손으로 테스트했는가
□ 손 크기가 다른 여러 명이 확인했는가
#터치 영역#엄지 영역#모바일 조작#버튼 크기#오작동 방지#한 손 사용#접근성#홈페이지 디자인#웹비스타#홈페이지 제작