피츠의 법칙과 누르기 쉬운 인터페이스

작은 버튼 앞에서 멈칫하는 이유

누를 버튼은 찾았지만 작은 목표를 겨냥하느라 커서를 조심스럽게 옮긴 적이 있나요? 피츠의 법칙은 목표를 정한 뒤 그곳으로 움직이는 시간을 설명하는 경험적 모델입니다. 실제 움직임에서 측정한 관계를 식으로 나타낸 것이며, Paul Fitts의 1954년 연구에서 출발했습니다. 버튼을 찾아내거나 뜻을 이해하는 시간과 구별해 읽습니다.

반복 편집, 표의 행 선택, 달력 이동처럼 작은 조작이 쌓이는 화면에서 유용합니다. 반면 버튼을 찾지 못하거나 아이콘의 뜻을 모르는 문제는 따로 살펴야 합니다. 버튼을 키워도 용도가 불분명하면 라벨이나 배치를 고칠 필요가 있습니다.

현재 커서 위치저장 목표

직접 눌러보면 무엇이 다를까요

같은 출발점에서 목표의 폭만 넓힌 경우를 비교해보세요. 좁은 목표를 누를 때와 커서를 맞추는 느낌이 어떻게 다른가요? 다음에는 폭을 그대로 두고 목표까지의 거리만 줄여보세요.

폭과 거리를 따로 바꾸면 어떤 차이를 느꼈는지 구별하기 쉽습니다. 어느 조건에서 더 조심스럽게 겨냥했는지 떠올려 보세요. 이 체험은 속도나 실제 제품의 개선율을 측정하는 실험이 아닙니다.

왜 크기와 거리가 함께 중요할까요

목표가 멀면 더 멀리 움직여야 합니다. 목표 폭이 좁으면 그 안에 도착하도록 움직임을 더 정밀하게 조절해야 합니다. 여기서 중요한 것은 눈에 보이는 아이콘보다 실제로 눌리는 영역입니다. 주변에 여백이 있어도 그곳이 눌리지 않으면 조작 영역은 넓어진 것이 아닙니다.

사람이 컴퓨터를 조작하는 방식을 연구하는 HCI(인간–컴퓨터 상호작용) 분야에서는 이 관계를 다음 식으로 표현하곤 합니다. Shannon 형태라고 부르는 식입니다.

MT = a + b × log₂(D/W + 1)

• MT는 목표까지 움직이는 데 걸리는 시간입니다.
• D는 출발점에서 목표 중심까지의 거리입니다. 이웃 버튼 사이의 빈틈과는 다릅니다.
• W는 이동 방향을 따라 허용되는 목표의 폭입니다. 기본 1차원 모델에서 쓰는 값입니다.
• a와 b는 실험에서 구하는 계수로, 입력 장치와 수행할 동작에 따라 값이 달라집니다.

식에서 볼 핵심은 D가 커지거나 W가 작아지면 예상 움직임 시간이 길어진다는 점입니다. 다만 이 식은 1954년 원식과 구분되는 형태입니다. 화면의 버튼처럼 가로와 세로가 모두 있는 목표에서는 W를 정하는 방법도 중요합니다. 가로로 길어도 세로로 좁은 버튼은 아래쪽에서 다가갈 때 정밀하게 겨냥해야 할 수 있습니다. 이런 이차원 과제에서는 접근 방향의 폭을 쓰거나 가로·세로 중 짧은 쪽을 쓰는 방법 등이 연구되었습니다. 따라서 면적만 비교하지 말고, 사용자가 어느 방향에서 접근하는지 함께 살펴보세요.

장치, 자세, 학습, 실수 처리 방식이 달라지면 결과도 달라질 수 있습니다. 다른 연구의 계수를 가져와 우리 화면이 몇 초 빨라질지 계산하기보다, 실제 사용 조건에서 비교하는 편이 좋습니다. 모델의 형태와 적용 조건은 MacKenzie의 HCI 검토에서 더 자세히 읽을 수 있습니다.

같은 저장 화면을 바꿔본다면

가상의 일정 편집기를 생각해 보세요. 날짜와 메모를 입력한 뒤 상단 구석의 작은 체크 아이콘을 눌러 저장합니다. 아이콘과 실제로 눌리는 영역은 모두 18×18 CSS px이고 바로 옆에는 삭제 아이콘이 있습니다. 마지막 입력 위치에서 먼 작은 목표를 겨냥하면서, 옆의 삭제도 피해야 하는 배치입니다.

다른 안에서는 입력 영역 끝에 112×48 CSS px의 ‘저장’ 버튼을 둡니다. 버튼 전체가 눌리고, 삭제는 떨어진 곳에 둡니다. 키보드로도 이동하고 실행할 수 있게 합니다. 두 크기는 비교를 위한 설계 예시이며 권장 규격이나 측정된 성과가 아닙니다.

이 변경에서는 클릭 영역뿐 아니라 위치·라벨·삭제 버튼과의 간격도 함께 달라집니다. 화면 전체의 사용성을 검토할 때는 이 변경 묶음을 비교할 수 있습니다. 하지만 클릭 영역 크기만의 영향을 알고 싶다면 위치와 라벨 등 나머지 조건을 유지하고 눌리는 영역만 넓혀야 합니다. 여러 변경의 결과를 크기 하나의 효과로 바꾸어 설명하지 않습니다.

화면에 적용할 때 살펴볼 것

먼저 자주 쓰거나 잘못 누른 뒤 복구가 번거로운 동작부터 살펴보세요. 모든 버튼을 키우면 한 화면에 보이는 정보가 줄고 스크롤이 늘 수 있습니다. 정보가 많은 도구라면 여유 있는 배치와 촘촘한 배치를 선택할 수 있게 하는 방법도 있습니다.

아이콘은 작게 유지하고 클릭 영역만 넓힐 수도 있습니다. 이웃 버튼의 영역과 겹치지 않는지, 보이는 경계와 실제로 눌리는 곳이 너무 달라지지 않는지 확인하세요.

가까운 위치와 익숙한 위치 사이에도 선택이 필요합니다. 커서 가까이 버튼을 계속 옮기면 이동 거리는 줄어도 매번 다시 찾아야 합니다. 마지막 입력란에서 자연스럽게 이어지면서도 다음 위치를 예상할 수 있는 배치를 찾아보세요.

한 손으로 휴대전화를 쓸 때는 잡는 자세와 손가락의 움직임도 함께 봐야 합니다. 이동 중 화면이 흔들리거나 손을 정밀하게 움직이기 어려운 상황이라면 작은 목표를 누르는 일이 더 까다로울 수 있습니다. 같은 버튼도 마우스와 터치로 각각 조작해 보고, 키보드로도 원하는 행동을 끝낼 수 있는지 확인하세요.

누를 영역이 넓어도 조작을 끝내기 어려울 수 있습니다. Facebook Reactions의 2016년 설계 회고는 손가락이 선택지의 이름을 가리고, 손을 떼자 선택 화면이 닫혀 다시 탭할 수 없던 문제를 설명합니다. 후속안에서는 이름의 위치를 옮기고 드래그와 탭으로 선택할 수 있게 했습니다. 목표에 도달하는 것에 더해, 손가락을 대고 움직이고 뗄 때까지 원하는 선택을 마칠 수 있는지도 확인해야 합니다.

손가락을 뗀 뒤에도 선택을 마칠 수 있나요?

누르고 움직이고 떼는 동안, 원하는 선택을 끝낼 수 있나요?

문제 상황 · 이름이 가려짐

옵션 A옵션 B옵션 C

손가락 아래의 이름 일부가 가려지는 가정입니다.

손을 떼면 선택지가 닫힘

가상 변경안 · 이름을 위로

현재 선택: 옵션 B

옵션 A옵션 B옵션 C

이름을 손가락 위에서 읽으며 드래그로 고를 수 있습니다.

가상 변경안 · 다시 탭할 길

옵션 A옵션 B옵션 C

손을 뗀 뒤에도 선택지를 남겨 탭으로 마칠 수 있는 대안입니다.

드래그와 다시 탭하기는 선택을 마치는 서로 다른 경로입니다. 모든 선택에서 두 동작을 연달아 요구하는 안이 아닙니다.

마우스에서는 화면의 실제 가장자리가 도움을 줄 때도 있습니다. 포인터가 더 넘어가지 못하는 경계에 목표가 붙어 있으면 그 방향으로 지나칠 위험이 줄 수 있습니다. 웹페이지 안의 카드나 창 모서리, 다른 모니터로 포인터가 넘어가는 가장자리는 같은 조건이 아닙니다. 터치에서는 손을 댄 위치와 잡는 자세, 운영체제의 제스처가 영향을 주므로 이 효과를 그대로 적용하지 않습니다.

좁은 화면, 긴 번역문, 브라우저 확대, 가상 키보드가 열린 상태에서도 확인해보세요. 아래에 고정한 버튼이 입력 내용을 덮거나 실제로 누를 수 있는 영역이 줄어들 수 있습니다.

빨리 끝냈는지만으로 판단하지는 마세요. 잘못 누른 횟수, 복구 과정, 도움 요청도 함께 보면 무엇이 편해졌는지 알 수 있습니다. 구매뿐 아니라 취소와 거절도 발견하고 누르기 쉬워야 합니다. 삭제처럼 되돌리기 어려운 행동은 작게 숨기기보다 다른 행동과 구분하고, 결과를 설명하며 가능한 복구 방법을 제공하세요.

24와 44는 무엇을 뜻하나요

웹 콘텐츠 접근성 지침인 WCAG는 마우스·터치로 누르는 목표의 크기 기준을 제시합니다. 이 기준은 접근성을 위해 지켜야 할 조건이며, 피츠의 법칙에서 계산한 최적의 버튼 크기는 아닙니다.

WCAG 2.2의 2.5.8은 AA 수준에서 원칙적으로 24×24 CSS px 이상의 목표를 요구합니다. AA는 WCAG 적합성 수준 가운데 하나입니다. 충분한 간격을 둔 경우, 같은 페이지에 이 기준을 충족하는 대체 조작이 있는 경우, 문장 안의 링크처럼 인라인으로 놓인 경우 등의 예외도 있으므로 크기와 예외 조건을 함께 읽어야 합니다.

2.5.5는 더 높은 AAA 수준의 강화 기준으로, 44×44 CSS px를 다룹니다. 이 기준에도 예외가 있으므로 적용할 성공기준의 전체 조건을 확인하세요.

최소 기준을 충족해도 모든 상황에서 편한 버튼이 되는 것은 아닙니다. 접근성 요구를 확인한 뒤, 실제 사용하는 화면과 입력 방식에서 편하게 누를 수 있는지 살펴보세요.

확인해볼 질문

• 아이콘 주변 여백도 실제로 눌리나요? 이웃 버튼과 겹치지는 않나요?
• 버튼 위치가 앞선 행동에서 자연스럽게 이어지고, 다음에도 쉽게 찾을 수 있나요?
• 마우스·터치·키보드로 원하는 행동을 마칠 수 있나요?
• 화면을 좁히거나 확대해도 버튼과 필요한 내용이 가려지지 않나요?
• 빨라진 만큼 잘못 누르거나 복구해야 하는 일이 늘지는 않았나요?