MS의 애플 GUI 베끼기는 어제 오늘 일이 아닙니다(90년대에 이미 Apple은 MS를 고소했었죠). 물론 MS가 그대로 베끼기만 한 것은 아니고 나름 개선도 했습니다. 문제는, 원래의 아이디어에 담긴 의도를 제대로 파악하지 못한 상태에서 개선을 시도하는 바람에 개선 아닌 개악이 된 부분이 좀 있다는 것.


1. Fitts' Law

대표적인 예가 메뉴의 위치입니다. 애플의 OS에서는 예로부터(Lisa부터 Leopard에 이르기까지) 항상 모니터의 최상단 부분에 메인 메뉴가 고정됩니다. 반면 MS Windows에서 각 창의 메인 메뉴는 해당 창의 제목(title bar) 밑에 붙습니다. 하지만 창 밑에 달려 있는 메인 메뉴는 모니터 상단에 있는 메인 메뉴에 비해 상대적으로 마우스 조작이 어렵습니다. Fitts' Law를 무시하고 있기 때문이죠.

사용자 삽입 이미지사용자 삽입 이미지
(메뉴가 모니터 상단에 고정된 Leopard / 메뉴가 창 밑에 달려 있는 Windows XP)


Fitts' Law란 간단히 설명하자면 마우스를 이동시켜서 특정 위치에 놓는 작업이 얼마나 쉬운지는 마우스의 이동 거리와 목표 지점의 넓이에 의해 정해진다는 법칙입니다(원래의 Fitts' Law에는 총 네 개의 변수가 관여합니다. 단순화를 위해 생략). 즉 많이 이동하는 것 보다는 조금 이동하는 것이 좋고, 작은 버튼보다는 큰 버튼이 좋다는 얘기입니다.

Fitts' Law의 발음

Designing for Interaction의 번역서를 보니 Fitts' Law를 피쳇의 법칙으로 옮겨놓고 사람 이름도 피쳇으로 만들었던데 이거 좀 오역이겠죠?

아마도 Fitts' Law의 발음이 fitzez law(Fitts 에 소유격인 어포스트로피 s가 붙어서 표기는 Fitts' 로 하고 읽기는 fitzez로)라서 "피쳇의 법칙"이라고 했을텐데 우리 말로는 그냥 피츠의 법칙이 맞는 것 아닐까요?

Fitts' Law에 따르면 모니터 화면의 가장자리는 매우 중요한데 왜냐하면 마우스가 화면의 가장자리를 벗어날 수 없기 때문에 가장자리에 딱 붙어 있는 버튼은 무한대의 넓이를 가진 것이나 마찬가지이고 따라서 매우 쉽게 클릭할 수 있게 됩니다. 모서리 중에서도 특히나 네 꼭지점 부분 - 좌상단, 좌하단, 우상단, 우하단 - 은 매우 소중히 활용해야할 자리입니다(x, y축 모두 무한대 넓이이면서 한정된 영역입니다. 활용가치도 높고 희소성도 높습니다).


창을 최대화해도 메뉴보다 타이틀바가 위에 있기 때문에 여전히 문제입니다. 최대화된 창의 타이틀를 가지고 할 수 있는 조작이라고는 더블클릭을 통해 최대화를 취소(Restore - 원래대로)하는 기능이 전부인데 말이죠.


2. 한편, 근접성의 법칙(Law of Proximity)은?

혹자는 Fitts' Law도 좋지만 "Law of Proximity"도 중요하다고 말합니다. 즉, 관련된 요소를 서로 근접한 곳에 놓아야 한다는 법칙입니다. 그런 의미에서 본다면 각 메뉴를 창 안에 넣어놓는 것에도 장점은 있습니다.

하지만 MS가 과연 Fitts' Law와 Law of Proximity 사이에서 고민하다가 Law of Proximity를 선택하기로 결정한 것일까요? 전 아니라고 봅니다. 왜냐하면 Fitts' Law와 Law of Proximity가 전혀 상충되지 않는 영역들에 대해서도 Fitts' Law를 어기고 있는 부분들이 많기 때문이죠. 이를테면 테스크바 우측 끝에 있는 시스템 트레이(system tray)의 아이콘은 별 이유도 없이 밑바닥에서 몇 pixel 떨어져 있어서 모서리의 장점을 전혀 활용하지 못하고 있습니다.

사용자 삽입 이미지
(아무 이유 없이 하단에서 약간 떠 있는 트레이 아이콘들)

시작 버튼(Start buttom)도 그렇습니다. 기본 설정에서는 모서리의 장점을 활용할 수 있도록 되어 있지만 테스크바를 두 칸으로 잡아늘이면 이유없이 위로 붕 떠버립니다.

사용자 삽입 이미지
(테스크바를 두 칸으로 늘이면 붕 뜨는 시작 버튼)

결국 별 고민이 없었다는 것이죠.

한편 Leopard의 Dock은 어떻게 커스터마이징하더라도(측면에 붙이건 하단에 붙이건, 크기를 키우건 줄이건) 모서리를 잘 활용할 수 있게 되어 있습니다:

사용자 삽입 이미지
(시각적으로는 떠 있지만 마우스가 최하단에 딱 붙어 있어도 아이콘을 클릭할 수 있습니다)

결론: 어떤 요소이건 간에 그것을 제대로 베끼려면 그 요소를 만드는 과정에서 했던 고민들을 최대한 파악한 후 베껴야 한다. 주먹구구 식으로 베끼고 개선한답시고 이리저리 뒤틀면 오히려 "개악"이 되는 경우가 많다.

PS: 점점 넓어지는 모니터 화면, 다중 모니터 등 최근의 추세를 고려하면 Fitts' Law나 모서리의 중요성에 대해 약간 재고할 필요가 있겠습니다만, 큰 맥락에서는 여전히 유효하다고 생각합니다.
신고
< Newer     Older >

티스토리 툴바