피츠의 법칙

버튼을 얼마나 크게 만들지, 어디에 둘지는 오랫동안 취향 대결이었습니다. 한쪽은 여백이 넉넉해야 정돈돼 보인다며 줄이자고 하고, 다른 쪽은 누르기 힘들다며 키우자고 합니다. 양쪽 다 근거가 없으니 목소리가 큰 쪽이나 직급이 높은 쪽이 이겼습니다.

페이지덱에서도 문서 툴바를 다듬다가 같은 논쟁이 붙었습니다. 민서가 아이콘을 24픽셀로 줄인 시안을 올리자 태오가 "저는 이거 자꾸 옆 버튼이 눌려요" 했고, 민서는 "제 화면에서는 괜찮은데요" 했습니다. 둘 다 자기 손으로만 확인한 말이라 대화가 더 나아가지 못했습니다.

피츠의 법칙은 이 논쟁을 시간이라는 단위로 옮겨 놓습니다. 1954년에 사람이 팔을 뻗어 목표를 짚는 동작을 반복해서 재 본 실험이 그 시작인데, 걸린 시간이 목표까지의 거리와 목표의 크기 두 가지로 거의 설명됐습니다. 크기와 위치가 예쁨의 문제가 아니라 몇 밀리초의 문제가 되면서, 누가 더 세게 주장하느냐 대신 무엇이 더 빠르냐로 결론이 납니다. 인터랙션 디자인에서 법칙이라 부르는 것들은 이렇게 사람의 한계가 수치나 경향으로 굳은 근거를 말합니다. 반응이 0.4초 안에 오면 사람이 하던 생각을 놓지 않는다는 도허티 임계, 한 번에 붙잡고 있을 수 있는 항목이 일곱 개 안팎이라는 밀러의 법칙이 같은 자리에 놓입니다.

누르는 데 걸리는 시간은 목표까지의 거리를 목표의 크기로 나눈 비율을 따릅니다. 거리가 멀어지면 늘고 목표가 커지면 줄어드는데, 비율이 같으면 시간도 비슷합니다. 멀리 있는 큰 버튼과 가까이 있는 작은 버튼이 엇비슷하게 느껴지는 이유가 이것입니다.

늘고 주는 정도는 완만합니다. 거리를 두 배로 늘려도 시간이 두 배가 되지는 않고 조금 더 붙는 정도입니다. 그래서 거리를 절반으로 줄이려고 화면 구성을 크게 흔드는 것보다, 손이 이미 가 있는 자리 근처에 두는 편이 대개 이득이 큽니다.

여기서 설계 규칙 셋이 곧바로 나옵니다.

1. 자주 누르는 것을 크게 만듭니다. 문서 툴바에서 하루에 수십 번 누르는 저장과 공유는 키우고, 한 달에 한 번 쓰는 내보내기 설정은 그대로 둡니다. 24픽셀짜리 아이콘을 44픽셀로 키우면 누르는 시간뿐 아니라 잘못 눌러 되돌리는 시간까지 줄어듭니다.
2. 자주 누르는 것을 가까이 둡니다. 기준은 화면의 가운데가 아니라 직전에 손이 있던 자리입니다. 글을 쓰다가 서식을 바꾸는 동작이라면, 툴바가 화면 맨 위에 붙어 있는 것보다 글자를 선택한 자리에 떠오르는 편이 훨씬 가깝습니다.
3. 화면의 가장자리와 모서리를 목표로 씁니다. 커서는 화면 밖으로 나가지 못하고 가장자리에서 멈추므로, 가장자리에 붙은 버튼은 두께가 1픽셀이어도 실제로는 무한히 두꺼운 목표처럼 움직입니다. 맥의 상단 메뉴 막대가 화면 꼭대기에 딱 붙어 있는 것이 이 성질을 쓴 설계입니다. 모서리는 두 방향이 동시에 막혀서 더 쉽습니다.

되돌리기 어려운 동작에는 이 법칙을 뒤집어 씁니다. 계정 삭제나 전체 초기화는 일부러 작게, 멀리, 한 단계 안쪽에 둡니다. 느리게 만드는 것이 목적입니다.

가장 자주 인용되는 자리는 터치 목표의 최소 크기입니다. 손가락 끝이 화면에 닿는 면적은 마우스 커서보다 훨씬 넓고 그 면적의 어디가 눌릴지도 정확하지 않아서, 화면에 보이는 아이콘이 작아도 누를 수 있는 영역은 한 변 44포인트 안팎을 확보하라는 지침이 모바일 운영체제마다 들어 있습니다. 아이콘을 키우지 않고 투명한 여백만 넓혀도 조건은 충족됩니다.

모바일에서 중요한 기능을 화면 아래쪽에 두는 관행도 여기서 나옵니다. 한 손으로 쥐었을 때 엄지가 편하게 닿는 범위는 화면의 아래 절반이고, 위쪽 모서리는 손을 고쳐 쥐어야 닿습니다. 상단에 둔 버튼은 거리가 멀 뿐 아니라 손을 바꾸는 동작까지 붙습니다.

오른쪽 버튼 메뉴가 누른 자리에서 바로 열리는 것, 드래그로 크기를 조절하는 손잡이가 모서리에 붙어 있는 것, 파일을 끌어다 놓는 영역이 화면 대부분을 차지하는 것도 같은 근거입니다. 손으로 하는 조작을 다루는 제스처 쪽에서도 이 법칙이 먼저 걸립니다. 길게 누르기처럼 흔적이 남지 않는 조작은 목표가 어디인지부터 보이지 않기 때문입니다.

"이 버튼 터치 영역이 32포인트밖에 안 나와요. 아이콘은 그대로 두고 패딩만 늘릴게요."

보이는 크기는 유지하면서 누를 수 있는 넓이만 키우겠다는 말입니다.

"삭제를 저장 바로 옆에 두지 맙시다. 피츠 기준으로는 제일 누르기 좋은 자리예요."

되돌리기 어려운 동작이 가장 빠른 자리를 차지하고 있다는 지적입니다.

"전체 화면에서는 툴바가 너무 멀어요. 선택한 자리에 뜨게 바꾸죠."

거리를 줄이려고 버튼을 손이 있는 곳으로 옮기자는 제안입니다.

페이지덱에서 문서 툴바를 다시 만들 때 민서가 이 법칙을 꺼냈습니다. 먼저 지난 한 달 동안 각 버튼이 몇 번 눌렸는지를 뽑아 왔습니다. 굵게와 링크가 전체의 절반 가까이였고, 표 삽입과 각주는 합쳐서 2퍼센트였습니다. 그래서 많이 쓰이는 넷만 글자를 선택하면 그 자리에 떠오르는 작은 막대로 옮기고, 나머지는 상단 메뉴 안으로 넣었습니다.

태오가 "그럼 각주 쓰는 사람은 더 불편해지는 거 아닌가요" 하고 물었고, 민서는 그렇다고 답했습니다. 화면에서 가깝고 큰 자리는 한정돼 있어서 무언가를 당기면 다른 것은 밀려납니다. 이 법칙이 실제로 정해 주는 것은 무엇을 크게 할지가 아니라 무엇을 밀어낼지입니다.

전부 크게 만들면 좋아진다고 읽는 경우가 가장 많습니다. 큰 목표가 빨리 눌린다는 것이 법칙이니 자연스러운 결론처럼 보입니다. 하지만 화면의 넓이는 정해져 있어서 모든 버튼을 키우면 서로를 밀어내고, 그만큼 전부가 멀어집니다. 거리 쪽에서 잃은 것이 크기 쪽에서 얻은 것을 지웁니다. 열두 개를 다 키운 툴바는 아무것도 키우지 않은 툴바보다 느려지는 일이 흔합니다.

터치 화면에서는 거리가 의미 없다고 보는 것도 오해입니다. 손가락은 화면 아무 데나 바로 내려놓을 수 있으니 이동 거리가 없다고 생각하기 쉽습니다. 실제로는 한 손으로 쥔 상태에서 엄지가 움직이는 거리가 그대로 남아 있고, 닿지 않는 자리에서는 손을 고쳐 쥐는 시간까지 더해집니다. 이 오해를 그대로 두면 모바일 화면에서 확인 버튼이 오른쪽 위 모서리에 놓이고, 하루에 몇 번씩 그 버튼을 누르는 사용자는 매번 기기를 고쳐 잡습니다.