[UX] 피츠의 법칙: CTA를 유도하는 모바일 UX 디자인의 과학적 설계

피츠의 법칙

외면받는 버튼이 생기는 이유

훌륭한 UI 디자이너는 단순히 '예쁜 버튼'을 만드는 사람이 아닙니다. 사용자가 가장 적은 에너지를 들여 원하는 목적지에 도달하게 만드는 '설계자'입니다. 혹시, UX를 설계하면서 아래 경험을 해 본적이 있으신가요?

 

1. 공들여 만든 '구매하기' 버튼의 클릭률이 저조해 고민해 본 적 

2. 사용자가 특정 메뉴를 찾는 데 너무 오래 걸린다는 피드백을 받아 본 적 

 

이 두 가지의 경험이 있으시다면, 피츠의 법칙을 꼭 적용해 보세요.

오늘 포스팅에서는 인간의 물리적 움직임을 데이터로 증명한 이 법칙이 어떻게 모바일 인터페이스의 표준이 되었는지 깊이 있게 파헤쳐 보겠습니다.

---

피츠의 법칙? 수학적 근거

목표 지점까지의 거리와 크기가 도달 시간에 미치는 영향을 설명하는 UI/UX 및 인간공학의 핵심 원리입니다. "목표가 작고 멀수록 도달 시간(Movement Time)이 길어지고, 크고 가까울수록 도달 시간은 짧아진다"는 것이 핵심으로, 이를 활용해 사용자가 더 쉽고 빠르게 상호작용할 수 있도록 버튼과 레이아웃을 디자인합니다

법칙의 핵심 개념

츠의 법칙은 "목표물에 도달하는 시간은 목표물의 거리와 크기에 따라 결정된다"는 물리적 원리입니다. 이를 수식으로 표현하면 다음과 같습니다.

$$T = a + b \log_2(1 + D/W)$$

• $T$ (Time): 목표물에 도달하는 데 걸리는 시간
• $D$ (Distance): 시작점에서 목표물까지의 거리
• $W$ (Width): 목표물의 너비(크기)

수식이 주는 인사이트

이 식에 따르면, 사용자의 손가락(혹은 마우스 커서)이 버튼에 빨리 닿게 하려면 두 가지 방법뿐입니다. 거리를 줄이거나($D$ ↓), 크기를 키우는 것($W$ ↑)입니다. 너무 당연해 보이지만, 실제 복잡한 모바일 화면 설계에서는 이 균형을 놓치는 경우가 허다합니다.

---

'엄지 존(Thumb Zone)'과의 결합

Image source www.dribble.com

 

이미지와 함께 볼까요? 스크톱에서는 마우스 커서가 자유롭게 움직이지만, 모바일은 다릅니다. 사용자의 75% 이상이 한 손으로 스마트폰을 쥐고 엄지손가락만 사용하여 조작합니다. 여기서 피츠의 법칙은 '엄지 존'이라는 개념과 만납니다.

• Safe Zone (안전 영역): 엄지손가락이 가장 편안하게 닿는 하단 및 중앙부입니다. 중요한 전환 버튼(CTA)은 반드시 이곳에 배치해야 합니다 ($D$ 최소화).
• Stretch Zone (확장 영역): 손가락을 뻗어야 겨우 닿는 곳입니다. 보조적인 기능을 배치합니다.
• Ow Zone (위험 영역): 손을 다시 고쳐 쥐어야만 닿는 상단 모서리입니다. 실수로 누르면 안 되는 '탈퇴'나 '삭제' 버튼을 배치하여 의도적인 불편함을 설계하기도 합니다.

---

실무 사례로 보는 피츠의 법칙 적용 전략

하단 탭 바(Bottom Navigation)의 표준화

과거에는 메뉴 버튼이 왼쪽 상단(햄버거 메뉴)에 있는 경우가 많았습니다. 하지만 츠의 법칙 관점에서 이는 최악의 $D$(거리)를 가집니다. 현재 인스타그램, 유튜브, 토스 등 메이저 앱들이 주요 메뉴를 하단 탭으로 옮긴 이유는 사용자의 엄지손가락과 가장 가까운 거리에 버튼을 두기 위함입니다.

화면 하단을 가득 채우는 플로팅 버튼(Floating Action Button)

배달의민족이나 쿠팡의 상세 페이지를 보면 '장바구니 담기' 버튼이 화면 하단 너비를 꽉 채우고 있습니다. 이는 $W$(너비)를 극대화하여 사용자가 대충 눌러도 정확히 타격할 수 있게 설계된 것입니다.

핀 포인트 조작보다 '영역' 확장

최근 UI 트렌드는 아이콘 자체는 작더라도 터치 인식 영역(Hit Target)을 실제 이미지보다 훨씬 크게 잡는 것입니다. Apple의 가이드라인에 따르면 터치 영역은 최소 44x44pt 이상이어야 합니다.

---

기획자와 디자이너를 위한 체크리스트

손가락의 이동 반경이 짧을수록 인지적 부하가 줄어들며, 서비스의 핵심 기능에 도달하는 심리적 장벽이 낮아집니다. 따라서! 실수를 유발하기 쉬운 위치에 배치함으로써 사용자가 한 번 더 생각하게 유도하고, 치명적인 데이터 손실이나 잘못된 결제를 방지합니다.

설계 원칙	세부 전략	기대 효과
거리 단축	핵심 버튼은 사용자의 엄지 근처(하단)에 배치	조작 피로도 감소 및 빠른 이탈 방지
크기 최적화	중요도가 높은 버튼일수록 클릭 영역을 크게 설계	오클릭 방지 및 전환율(CVR) 상승
의도적 불편함	파괴적인 액션(삭제 등)은 먼 곳에 배치	사용자 실수로 인한 데이터 손실 방지

---

편리함은 논리에서 나옵니다

디자인에서 "왜 이 버튼을 여기 두었나요?"라는 질문에 "예뻐서요"라고 답하는 시대는 지났습니다. 피츠의 법칙과 같은 인간공학적 근거를 바탕으로 설계된 UI는 사용자를 설득할 필요 없이 *본능적으로 편안함'을 느끼게 합니다.

여러분의 블로그나 포트폴리오 프로젝트에도 오늘 배운 피츠의 법칙을 대입해 보세요. 단순한 화면 설계가 아닌, '데이터와 논리가 담긴 경험'으로 거듭날 것입니다.