2012. 9. 19. 08:21ㆍUI 가벼운 이야기
UI 디자인을 하다보면, 거의 매순간 필요한 정말 중요한 법칙이 피츠의 법칙인데, 정작 많은 UI 디자이너들이 잘 모르고 있다. 혹은 알고 있더라도, 간단한 의미 정도만 알고 있을 뿐, 이것이 얼마나 중요하고도 일상적으로 필요한지를 모르는 경우가 많다.(정말 자기가 잘 아는지 확인해보고 싶으면 피츠를 위한 퀴즈를 풀어보자) 이 글에서는, 피츠의 법칙을 잘 모르면 UI 디자이너가 아니라고 할 정도로 손에 꼽을 수 있는 중요한 이 법칙을 간략하게 설명하고자 한다.
우선 위키피디아의 정의를 찾아보자
오른쪽 그림에서 살펴보면,
먼저 마우스 포인터가 현재 A 지점에 있다고 가정해 보자. 그런데 B 버튼을 클릭해야 한다. 그러면 사용자는 얼마의 시간이 걸릴까? 사용자가 A에서 B의 중심부를 향해, 붉은 색 점선 화살표를 따라 마우스를 이동한다고 할 때 걸리는 시간 T는, A 에서 B 중심부 까지의 거리인 D 가 멀면 멀수록 더 오래 걸리고, 가까우면 덜 걸릴 것이다. 즉 D에 비례하는 함수이다.
그런데 마우스 포인터가 B 근처에 도달하면, 사용자는 B를 지나쳐서는 안되기 때문에 자기도 모르게 속도를 줄이게 된다. 즉 B의 중심점을 기준으로 허용하는 폭인 W는 크면 클 수록 속도를 줄이지 않고 빠르게 간 다음 클릭하면 되기 때문에, W가 크면 시간은 줄어들고, W가 작으면 시간은 더 오래 걸린다.
결국 종합하면,
피츠의 법칙이란, 떨어진 영역을 클릭하는데 걸리는 시간은, 영역까지의 거리와 영역의 폭에 따라 달라지는데, 멀리 있을수록, 버튼이 작을 수록 클릭하는데 시간이 더 많이 걸린다
는 것이다. 어라? 너무 상식적이지 않은가? (유명해지려면 상식적인 일을 해야한다. 피츠는 이에 관해 단 두 편의 논문을 썼지만, 이에 관한 후속 연구자들의 논문은 수천편을 넘는다.) 문제는 이 상식적인 일이 지켜지지 않는 경우가 많다는 점이다. 손으로 조작하는 인터페이스 설계에서 버튼을 만드는 디자이너들이 버튼 안에 들어갈 글자만 생각하다보면, 더 빈번하게 눌리는 버튼이 단어 길이가 짧다는 이유만으로 더 작아지는 경우가 허다하다. 예를 들면 OK 버튼이 CANCEL 버튼 보다 글자 수가 작으니까 더 작아져 버리는 것이다.
이제 피츠의 법칙에 대해 대강이나마 이해했다면, "정말" 자기가 이해하고 있는지 알아보기 위하여, 피츠를 위한 퀴즈를 풀어보기 바란다.
피츠의 법칙에서 흔히 잘못 알고 있는 4가지
1. Fitt's Law가 아니다. 원래 이름은 Paul M. Fitts이며 따라서 Fitts' Law 혹은 Fitts's Law라고 써야 한다. 영어 표기법에 따라 두 가지 모두 허용한다고 보면 되는데, 우리말로는 피츠의 법칙이라고 쓰면 적당할 것 같다.
2. 단순 가로 폭이 아니고, 움직이는 방향의 폭이다. 즉 위 그림에서 B 버튼의 가로 너비에 반비례하는 것이 아니라, W에 반비례하게 된다.
3. 피츠의 법칙은 원래 마우스 움직임과는 관련이 없었다. 즉 HCI의 법칙이 아니었다. 1954년에 처음 피츠는 손으로 점을 찍는 것과 물건을 움직이는 것 등을 대상으로 연구했으며, 따라서, 화면상의 마우스 포인터, 그것도 가속도 기능이 있는 마우스 움직임이나, 손가락만 움직이는 터치폰에서 적용하는 것은 비슷한 원리로 유추하여 발전시킨 것이다. HCI에 처음 적용된 것은 1978년 Card 등에 의해서이다.
4. 피츠의 관심은 1차원 선상에서의 움직임이었다. 제대로 하려면 2차원으로 생각해야 하는데, 2차원으로 확대하여 설명하는 이론들도 많고, 잘 설명이 되지만, 굳이 그렇게까지 할 필요를 못 느끼므로 모두 1차원만 설명하는 것이다.
[참고1]
이 법칙은 몇 가지 다른 방법으로 수학 공식화할 수 있는데 대표적인 것은 뉴욕대 교수 스콧 맥켄지의 샤논 공식으로, 피츠 자신의 공식보다 더 잘 활용된다.
여기서,
* T 는 동작을 완수하는 데 필요한 평균 시간
* D 는 대상 물체의 중심까지 거리
* W 는 움직이는 방향을 축으로 하였을때 측정되는 목표물의 폭이다.
(a 와 b 는 실험 상수로서 상황이 정해지면 그에 따라 실험 결과로 정해진다.)
더 자세한 내용은 스콧 맥켄지(http://www.yorku.ca/mack/)의 박사 논문을 보면 된다.
[참고2]
피츠를 위한 퀴즈
Fitts's Law (Wikipedia)
제대로 베끼기 - 마이크로소프트, 애플, Fitts' Law.
[참고##UI법칙##]