Ch.8 UX 법칙 (상)
피츠의 법칙 — 크기와 거리
왜 작은 버튼은 누르기 어려울까?
스마트폰으로 작은 '닫기(X)' 버튼을 누르려다 옆의 광고를 탭한 경험, 누구나 있습니다. 반면 화면 하단의 큰 내비게이션 버튼은 엄지로 편하게 누릅니다.
같은 화면인데 왜 어떤 버튼은 쉽고, 어떤 버튼은 어려울까?
1954년 심리학자 Paul Fitts가 발견한 피츠의 법칙 — 타겟의 크기와 거리가 조작 시간을 결정합니다.
핵심 내용
타겟이 크고 가까울수록 빠르게 도달합니다
피츠의 법칙(Fitts's Law)은 인간-컴퓨터 상호작용(HCI)의 가장 기본적인 법칙입니다. 1954년 심리학자 Paul Fitts가 실험으로 증명했으며, 이후 수천 건의 연구로 검증되었습니다.
피츠의 법칙 공식
T는 타겟에 도달하는 시간, D는 현재 위치에서 타겟까지의 거리, W는 타겟의 너비(크기), a와 b는 장치·사용자 상수입니다.
핵심 통찰: D(거리)가 줄면 빨라지고, W(크기)가 커지면 빨라진다 — 로그 함수이므로 극단적으로 크게 만들 필요는 없다
직관적 비유 농구에서 3점 슛과 레이업을 비교해보세요. 골대(타겟)의 크기는 같지만, 거리가 멀수록 성공률이 떨어집니다. 만약 골대가 2배 크다면? 같은 거리에서도 더 쉽게 넣을 수 있겠죠. 이것이 바로 피츠의 법칙입니다 — 크기와 거리가 정확도와 속도를 결정합니다.
44px — 이 숫자를 기억하세요
Apple의 Human Interface Guidelines는 최소 터치 타겟 크기를 44×44pt로 권장합니다. Google의 Material Design은 48×48dp를 기준으로 삼습니다. 이 수치는 피츠의 법칙에서 도출된 것입니다.
무한 너비(Infinite Width) 효과
화면 가장자리(Edge)에 놓인 버튼은 마우스가 더 이상 이동할 수 없어서 사실상 W = ∞입니다. macOS의 상단 메뉴바, Windows의 시작 버튼이 화면 모서리에 있는 이유가 바로 이것입니다. 마우스를 아무리 빠르게 던져도 화면 밖으로 나가지 않으므로, 정확히 조준할 필요 없이 방향만 맞으면 됩니다.
같은 기능이라도 위치와 크기에 따라 사용성이 완전히 달라집니다
피츠의 법칙에서 타겟 도달 시간을 줄이는 방법 2가지는?
화면 가장자리에 위치한 버튼은 '무한 너비' 효과로 인해 조준 정확도가 불필요해진다
Apple의 권장 최소 터치 타겟 크기는 24×24pt이다
핵심 용어
최소 터치 타겟
44×44px 이상 — 성인 손가락 끝 평균 접촉 면적이 약 10mm(≈44px)
하단 내비게이션
엄지 도달 거리(Thumb Zone) 내에 핵심 액션 배치 → D 최소화
컨텍스트 메뉴
우클릭/롱프레스 위치에 메뉴 표시 → 커서에서 타겟까지 D ≈ 0
관련 액션 그룹핑
삭제 버튼은 항목 바로 옆에 → 시선·커서 이동 최소화
비교 정리
| 항목 | 피츠 법칙 준수 | 피츠 법칙 위반 |
|---|---|---|
| CTA 버튼 | 화면 하단 고정, 전체 너비, 높이 48px 이상 | 화면 상단 구석, 작은 텍스트 링크 |
| 닫기 버튼 | 모달 우상단, 44px 이상 터치 영역 | 20px 미만의 작은 X 아이콘, 팝업 밖에 위치 |
| 삭제 확인 | 삭제 버튼 바로 아래에 '확인/취소' 표시 | 삭제 버튼은 좌측, 확인 팝업은 화면 중앙 |
| 내비게이션 | 하단 탭바 5개 이내, 아이콘 + 레이블 | 상단 햄버거 메뉴 안에 모든 메뉴 숨김 |
피츠의 법칙은 단순하지만, UI 배치의 모든 결정에 영향을 미치는 근본 원리이다
시각 자료
핵심 정리
- 1피츠의 법칙: T = a + b × log₂(2D/W) — 크기(W)↑ 거리(D)↓ = 빠른 조작
- 2최소 터치 타겟: Apple 44pt, Google 48dp — 손가락 끝 면적 기반
- 3무한 너비 효과: 화면 가장자리 버튼은 방향만 맞으면 도달
- 4실무: 하단 내비게이션, 컨텍스트 메뉴, 관련 액션 그룹핑
- 5핵심: UI 배치의 모든 결정은 '크기와 거리'에서 시작된다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작