안녕하세요:) 오늘은 '구매하기' 버튼이 큰 이유에 대해 살펴보겠습니다.
쿠팡에서 물건을 담고, W컨셉에서 옷을 고르고, 배달의 음식에서 음식을 주문할 때 어떤 버튼이 가장 눈에 띄었나요? 아마 '주문하기'나 '구기' 버튼일 겁니다. 이런 버튼들은 가장 중요한 역할을 하기 때문에 유독 크거나 손에 잘 닿는 위치에 있습니다.
심리학자 폴 피츠(Paul Fitts)는 "대상의 크기가 클수록, 그리고 대상까지의 거리가 가까울수록 그 대상을 선택하는 데 걸리는 시간이 짧아진다"는 사실을 발견했습니다. 이후 폴 피츠의 이름을 따 '피츠의 법칙'으로 불리기 시작했습니다.
1954년, 한 심리학자의 발견
Paul Fitts는 간단한 실험을 했습니다. 사람들에게 특정 목표물을 가리키게 한 뒤, 도달하는 데 걸리는 시간을 측정했죠. 그 결과는 놀라웠습니다. 목표물까지의 거리와 크기 사이에 명확한 수학적 관계가 있었던 겁니다.
**피츠의 법칙(Fitts's Law)**은 이렇게 정리됩니다:
- 목표물이 클수록 빠르게 도달한다
- 목표물이 가까울수록 빠르게 도달한다
- 정확하게는, 이동 시간 = a + b × log₂(거리/크기 + 1)
복잡한 공식은 잊어도 됩니다. 핵심은 간단합니다: 크고 가까운 것이 빠르다.
디지털 세계에서의 적용
피츠의 법칙은 UX/UI 디자인에서도 핵심 원리로 사용됩니다. 마우스로 버튼을 클릭하는 것도, 손가락으로 화면을 터치하는 것도 모두 피츠의 법칙을 따르고 있거든요.
사용성(usability)은 좋은 디자인을 이루는 중요한 요소다. 사용성이라는 단어에는 사용하기 편하다는 의미가 담겨 있다. 인터페이스가 이해하기 쉬우며 탐색하기도 쉬워야 한다는 뜻이다. 인터랙션(interaction)은 최소한의 노력만으로 불편 없이 간단하게 이뤄져야 한다. 사용자가 인터랙티브 요소를 사용하려고 움직이는 데 드는 시간은 인터랙션의 중요한 지표다.
-UX/UI의 10가지 심리학 법칙, 존 야블론스키-
우리는 피츠의 법칙에서 3가지 중요한 지침을 추출할 수 있다.
첫째, 터치 대상의 크기는 사용자가 쉽게 알아보고 정확하게 선택할 수 있을 정도로 충분히 커야 한다.
둘째, 터치 대상 사이에 충분한 거리를 확보해야 한다.
마지막으로, 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.
터치 대상의 최소 권장 규격
회사/조직 권장 규격 공간 인터페이스-휴먼 인터페이스 가이드라인(애플) 60 x 60 pt 터치 인터페이스-휴먼 인터페이스 가이드라인(애플) 44 x 44 pt 머티리얼 디자인 가이드라인(구글) 48 x 48 dp 웹 콘텐츠 접근성 가이드라인(WCAG) 44 x 44 CSS px 닐슨 노먼 그룹 1 x 1 cm
-UX/UI의 10가지 심리학 법칙, 존 야블론스키-
버튼 크기에 숨은 윤리
피츠의 법칙은 사용자가 쉽고 빠르게 선택하도록 합니다. 하지만 그 반대 의도로 사용되는 경우도 있습니다. 이런 경우를 타크 패턴(Dark Pattern)이라고 합니다.
다크 패턴(Dark Pattern)의 대표적인 사례로는 구독 취소 버튼이 있습니다. 구독 취소 버튼을 작고 찾기 어려운 곳에 배치하는 것이죠. 피츠의 법칙을 활용한 방법이긴 하지만 옳은 방법은 아닙니다.
디자이너인 우리가 만든 인터페이스로 인간의 능력과 경험을 신장시키는 것은 디자이너에게 주어진 중요한 책무다. 디자이너가 만든 인터페이스 때문에 사용자의 주의가 분산되거나, 사용하고자 하는 의지가 꺾이는 일은 없어야 한다.
-UX/UI의 10가지 심리학 법칙, 존 야블론스키-
다음번에 버튼을 디자인할 때 스스로에게 물어보세요:
- 사용자가 가장 자주 누를 버튼은 무엇인가? → 가장 크게
- 사용자가 가장 빠르게 접근해야 할 버튼은 무엇인가? → 가장 가까이
- 사용자가 실수로 눌러서는 안 될 버튼은 무엇인가? → 충분히 멀리
피츠의 법칙은 단순합니다. 하지만 그 안에는 사용자에 대한 깊은 이해가 담겨 있습니다. 우리의 신체적 한계를 인정하고, 그에 맞춰 디자인하는 것. 그것이 진정한 사용자 중심 디자인입니다.
cf. 관련 디자인 기법: 맥락 질의
블로그를 찾아주셔서 감사합니다:)
'PD·PM' 카테고리의 다른 글
| 왜 메뉴가 많으면 더 못 고를까?(힉의 법칙) (1) | 2026.01.30 |
|---|---|
| 왜 사람들은 정보를 다 기억하지 못할까?(밀러의 법칙) (1) | 2026.01.28 |
| 왜 유명한 앱들은 다 비슷하게 생겼을까? (제이콥의 법칙) (10) | 2026.01.20 |
| 맥북 폰트 설치하는 방법 (3) | 2026.01.17 |
| 한 끗 차이로 디자인 퀄리티 높이는 10가지 체크리스트 (0) | 2026.01.16 |
댓글