지하철이나 카페에서 스마트폰을 쓰는 사람들의 손을 한번 관찰해 보세요. 대부분은 한 손으로 폰을 감싸 쥐고, 엄지 하나로 화면을 쓸어 올리며 탐색합니다. 2013년 UX 연구자 스티븐 후버가 1,300명의 사용자를 관찰해 49%가 한 손으로만 폰을 사용한다는 사실을 발표한 이후 10년이 넘게 지났지만, 지금도 많은 웹사이트는 이 원리를 무시한 채 디자인됩니다. 결과는 단순합니다. 엄지가 닿기 힘든 자리에 놓인 버튼은 눌리지 않고, 눌리지 않은 버튼은 전환으로 이어지지 않습니다.
엄지가 만든 세 개의 영역
스마트폰을 한 손으로 쥐었을 때 엄지가 자연스럽게 그리는 반경은 정해져 있습니다. 화면을 세 구역으로 나누면 그 차이가 뚜렷해집니다.
자연 영역 — 편하게 닿는다
엄지를 구부리지 않아도 편하게 닿는 영역입니다. 오른손잡이 기준으로 보면 화면 하단 2/3, 오른쪽으로 치우친 구역이 여기에 해당합니다. 자주 눌러야 하는 주요 요소가 이 자리에 있어야 합니다.
확장 영역 — 살짝 불편하다
엄지를 펴거나 손목을 비틀어야 닿는 중앙과 반대편 영역입니다. 가끔 누르는 보조 기능, 혹은 시각적으로 보여주기만 할 정보에 적합합니다.
어려움 영역 — 그립을 다시 잡아야 한다
화면 상단의 좌우 모서리입니다. 그런데 우리가 습관처럼 배치해 온 햄버거 메뉴, 뒤로가기 버튼, 닫기 X 아이콘이 대부분 여기에 있습니다. 한 손으로는 닿지 않으니 사용자는 폰을 잠시 고쳐 쥐어야 합니다. 그 짧은 불편이 이탈의 씨앗입니다.
실무에서 바꿔야 할 네 가지
주요 CTA는 화면 아래쪽으로 내린다
'문의하기', '예약하기', '견적 요청'처럼 전환과 직결되는 버튼은 하단 고정(sticky bottom) 버튼으로 배치하는 것이 원칙입니다. PC에서 오른쪽 상단에 있던 CTA를 모바일에서 그대로 유지한다면, 엄지로 누르기 가장 어려운 자리에 가장 중요한 버튼을 둔 셈입니다.
네비게이션은 하단 탭을 적극 고려한다
모바일 앱이 하단 탭 바를 쓰는 이유는 단순합니다. 엄지 존 안에 있기 때문입니다. 정보 구조가 3~5개 수준으로 단순한 서비스라면 웹사이트에도 하단 고정 탭 네비게이션이 상단 햄버거 메뉴보다 훨씬 효과적입니다. 특히 쇼핑몰, 예약, 문의 중심 사이트에서는 이탈률이 눈에 띄게 줄어듭니다.
되돌릴 수 없는 액션은 어려움 영역으로 옮긴다
역설적이지만 중요한 원칙입니다. 삭제, 로그아웃, 주문 취소처럼 실수로 눌리면 안 되는 액션은 오히려 엄지가 쉽게 닿지 않는 상단이나 메뉴 안쪽에 두는 것이 안전합니다. 모든 버튼의 접근성을 똑같이 높이는 것이 아니라, 행동의 무게에 따라 접근성을 달리하는 것이 좋은 UX입니다.
터치 영역은 최소 44×44px를 확보한다
엄지의 평균 접촉 면적을 고려하면 버튼의 유효 터치 영역은 최소 44픽셀 정사각형 이상이어야 합니다. 애플 휴먼 인터페이스 가이드와 구글 머티리얼 디자인 모두 같은 수치를 권장합니다. 아이콘이 작게 보이더라도 실제 클릭 박스는 넓게 설정하고, 인접한 버튼 사이에는 8픽셀 이상의 여백을 두어야 오탭이 줄어듭니다.
지금 바로 해볼 수 있는 테스트
복잡한 분석 도구가 없어도 괜찮습니다. 지금 운영 중인 웹사이트를 스마트폰으로 열어 한 손으로 쥐고, 엄지를 움직이지 않은 채 어떤 버튼이 닿는지 세어 보세요. 주요 CTA가 엄지 존 안에 있습니까? 네비게이션을 열 때마다 손을 바꿔 쥐고 있지는 않습니까? 자주 누르는 버튼과 위험한 버튼이 나란히 붙어 있지는 않습니까? 이 세 가지 질문에 명쾌하게 답할 수 없다면, 모바일 UX를 다시 설계할 때입니다.
CYAN은 웹사이트를 만들 때 PC와 모바일을 같은 화면의 '좁은 버전'으로 취급하지 않습니다. 마우스로 쓰는 화면과 엄지로 쓰는 화면은 서로 다른 언어이고, 각각의 언어에 맞는 레이아웃과 인터랙션을 따로 설계해야 진짜 반응형입니다. 사용자의 손이 머무는 자리를 먼저 바라보는 것, 좋은 모바일 경험은 거기서부터 시작됩니다.