요번에 이런저런 일을 하면서 GUI 디자인에 관한 자료를 찾다가 우연히 Usable GUI Design : A Quick Guide라는 웹페이지를 발견하게 되었습니다. GUI 디자인이나 인터페이스 설계, 어플리케이션 기획을 하시는 분들께 유용한 자료일 듯 싶어서 간단하게 번역해 봤습니다. 잘 모르는 부분은 건너뛰거나 생략하는 등, 엉터리 번역입니다만, 대강의 뜻을 파악하는 데는 별 무리가 없을 겁니다.


[좋은 사용자 인터페이스를 만들기 위한 방법론]>

0) 사용자는 어플리케이션을 사용하려 들지 않는다.

- GUI 인터페이스 디자인에서 가장 기본적인 것은, 사용자들이 어플리케이션 사용을 원치 않는다는 사실에 있다. 사용자는 작업을 가능한 빠르고 쉽게 끝내고 싶어하며, 어플리케이션은 그것을 가능하게 해 주는 도구다. 어플리케이션을 배우고 다루는데 들이는 시간만큼, 사용자는 자신의 할 일을 뒤로 미뤄야 할 것이다.

a) 사용자들은 영리하지만 매우 바쁜 사람들이다
b) (배워야 할)인터페이스가 얼마나 멋진가는 별로 중요치 않다. 그것이 적으면 적을수록 좋다.


1) 피트의 법칙

이건 UI 디자인 법칙 중에서 가장 잘 알려진 기본적인 법칙이다. 요컨대 마우스 포인터에서 가까울수록, 면적이 넓은 큼직한 객체(Object)일수록 클릭하기 쉽다는 것이다. 이건 아주 기본적인 사실이지만 UI 디자인시 빈번히 무시당하기 마련이다.
(그림 1)


예를 들어 Firefox의 기본 버튼 바를 살펴보도록 하자(그림 1). 웹 서핑 시에, 사람들이 가장 많이 쓰는 버튼은 되돌아가기(Back) 버튼이다. 따라서 어플리케이션을 쓰는 사용자가 웹브라우징에 집중할 수 있도록 최소한의 노력으로 되돌아가기 버튼을 누를 수 있도록 해야만 한다. 하지만 버튼 바에 자리잡은 5개의 버튼은 모두 같은 크기로 제작되었다. 과연 정지 버튼이 되돌아가기 버튼과 동일한 정도로 중요한 버튼일까? 그럴 리야 만무하다. 그림 2와 같은 것이 훨씬 더 좋은 디자인이다. 피트의 법칙에 따라, 되돌아가기 버튼을 다른 버튼과 구별되는 동시에 훨씬 누르기 쉽게 고친 것이다.
(그림 2)


컨트롤 객체의 식별 가능한 크기는 화면 가장자리에 위치했을 때 증가하는 경향이 있다. 그게 무슨 뜻이냐고?
마우스 커서가 화면 가장자리를 향하면, 마우스의 이동 속도와는 상관없이 커서는 항상 화면 가장자리에서 멈추게 된다. 다시 말해, 화면 가장자리에 위치한 객체의 크기는 화면 크기의 제약에서 벗어나 무한히 커지는 셈이다.
(그림 3 : 메타시티 윈도우 테마. 버튼 주변의 여백을 주의해 볼 것)


화면 오른쪽 상단 모서리의 1픽셀짜리 목표에 접근하려면, 마우스를 오른쪽 위로 마음 내키는대로 '던지듯이' 움직이면 된다. 당연히 클릭하기도 쉽다. 중간에 위치한 1픽셀짜리 목표를 찾아서 클릭하는 데는 이보다 오랜 시간이 걸린다. 여기서 우리는 쉽게 접근하고자 하는 컨트롤 객체는 화면 모서리에 놓아야 한다는 사실을 알게 된다.

가장 간단한 예는 대부분 윈도우(윈도우즈와 리눅스 파일 매니저를 포함)의 윈도우 관리 버튼이다(닫기, 최대화 등등...). 윈도우 관리의 편의성을 위해 이 버튼들은 가능한 쉽게 조작할 수 있어야 한다. 따라서 모든 어플리케이션에서 관리 버튼은 우상단에 최대한 가까이 붙어 있어야만 한다(하지만 현실적으로는 극소수의 윈도우 매니저가 이런 형태를 띄고 있다). 모서리와 관리 버튼 사이의 여백이 1픽셀을 넘지 않는다면, 사용자는 버튼을 보지도 않고 윈도우를 닫을 수 있을 것이다.
(그림 4 : 우측에 1픽셀 여백만을 가진 스크롤 바)


역자 주 : 애플 MacOS는 이같은 이유에서 메뉴바를 화면의 최상단에 고정시켰습니다. 이 인터페이스 방식은 애플에서 특허를 냈기 때문에, MS나 SUN에서 모방할 수가 없었다는군요

또다른 예는 스크롤 바다. 내 데스크탑에 있는 대부분의 어플리케이션은 최대화시켰을 때 스크롤 바 우측에 1픽셀 이상의 여백을 만든다. 그래서 화면 오른쪽의 10픽셀 넓이의 스크롤 박스를 움직이려고 마우스를 클릭하는데 있어서 몇 초 이상의 시간을 잡아먹는다.

이러한 사실들을 종합, 요약하면 다음과 같다.

1. 자주 사용되는 컨트롤 객체는 눈에 잘 띄는 모양새로 크게 만든다
2. 모서리와 가장자리를 활용해서 조작성을 무한대로 확장시킬 수 있다
3. 절대로 화면 가장자리와 컨트롤 객체 사이에 1픽셀 이상의 여백을 만들지 마라


2) 불필요한 간섭
작업 중에 사용자는 오로지 일에만 집중할 수 있어야 한다. 하던 일에서 손을 떼고 어플리케이션에 주의를 쏟았다가 다시 일하기를 반복한다면 그만큼 쓸데없는 시간을 잡아먹기 마련이다. 따라서 어플리케이션이 사용자의 주의를 산만하게 하고 간섭하는 일은 가능한 줄여야 한다. 텍스트 에디터에서의 텍스트, 웹 브라우저에서의 웹 페이지가 그렇듯이, 어플리케이션은 각자 중점을 둔 아이템을 인터페이스의 중심에 둘 필요가 있다.

이것의 예로써 확인/진행 대화상자를 들 수 있다. 노벨의 Evolution에서는 사용자가 이메일을 체크하기 위해 '보내기/받기' 버튼을 클릭할 때마다 대화 상자를 표시한다. 이 대화상자는 내게 메일 체크가 진행중이란 사실을 알리는 동시에, 어플리케이션의 나머지 다른 기능에 접근하는 것을 봉쇄하고 있다. 대체 이 대화상자의 존재 이유는 뭘까? 차라리 대화상자를 없애고 진행 상태 표시막대로 교체하는 편이 훨씬 좋을 것이다.

더 나쁜 예는 KDE의 기본 휴지통 기능에서 찾아볼 수 있다. 파일을 휴지통으로 버리려 하면 일일이 대화상자가 표시되고, 그때마다 '확인' 버튼을 클릭해야만 한다. 이건 사람을 짜증나게 하고 작업 속도를 떨어지게 하며, 종내는 무턱대고 확인 버튼을 누르게 만들 뿐이다. 파일이 휴지통에 버려진다는 사실을 사용자에게 알리고 싶다면 애니메이션 효과로 표현하는 것으로 충분할 것이다.
(그림 5 : gEdit의 ‘찾기’ 대화상자)


다른 예는 일부 텍스트 에디터의 문자 검색 기능이 내뱉곤 하는 '...텍스트를 발견할 수 없습니다'라는 대화 상자다. 내가 원하는 텍스트를 찾지 못하는 경우는 십중팔구 검색어를 잘못 입력한 경우다. 이럴 때, '확인' 버튼 클릭을 요구하는 대화 상자가 뜨면 검색어를 고쳐서 다시 찾기 명령을 실행시키는 일은 일단 뒤로 제쳐놓고 버튼부터 클릭할 수밖에 없다.
이 문제를 가장 잘 해결한 것은 Firefox의 찾기 대화상자다. 텍스트를 찾지 못한 경우에는 입력 상자가 빨갛게 반전되어 사용자의 주의를 끈다.
(그림 6 : Firefox에서 텍스트를 찾지 못한 경우)


이러한 사실들을 종합, 요약하면 다음과 같다.

1. 사용자가 가는 길 앞에 장애물을 놓지 마라
2. 유용한 정보가 있을 때만 팝업 대화상자로 알려라
3. 가능한, non-modal(어플리케이션 작업을 연기시키지 않는) 상태 표시 방식을 사용한다


3) 컴퓨터의 능력을 활용하라
오늘날의 컴퓨터는 수백 기가 용량에 수 기가헤르츠의 처리능력을 가지고 있으며, 끊임없는 발전을 거듭하고 있다. 그러나 인간은 지난 수백년간 별로 변하지 않았다. 여전히 쉽게 지치고 지루해하며 집중력을 쉬이 잃어버리곤 한다. 따라서 지치지 않는 컴퓨터에게 일을 맡기는 것은 지극히 올바른 결정이다.

사용자 인터페이스 디자인에서 이 아이디어가 함축하고 있는 것은 매우 명백하다. 뭔가 처리할 일이나 결정할 일이 있을 때는 사용자 대신에 인터페이스가 그걸 처리하도록 하자는 것이다.

(그림 7)


예를 들어 내가 두 개의 xTerm 윈도우를 열었을 때, 내 태스크바는 다음과 같이 표시된다(그림 7). 하나는 Sied 소스 코드의 디렉토리를 연 것이고 다른 하나는 Latex 코드 디렉토리를 연 것이다. 그러나 이 태스크 바만 봐서는 각각의 윈도우를 구분할 수가 없다. 내가 원하는 윈도우를 찾기 위해선 태스크바를 클릭하거나, 그 위에 커서를 올려서 툴팁이 열릴 때까지 기다릴 수밖에 없다. 하지만 컴퓨터 자신은 어떤 것이 Latex고 어떤 것인 sied 소스 코드 윈도우인지 알고 있다. 그렇다면 내게 알려줄 수도 있지 않을까?
해답은 간단하다. 어플리케이션을 구분할 수 있을 정도로 충분한 정보 - 이를테면 태스크 명 - 를 찾아서 태스크 바에 표시해 주면 그만이다. 그러면 내가 원하는 것을 빠른 속도로 찾아내어 선택할 수 있을 것이다. 컴퓨터는 그 일을 처리할 수 있는 능력을 가지고 있다.

또한 그렇게 충분한 공간을 가지고 있는데, 종료시에 사용자가 변경해 둔 설정을 잊어먹는 어플리케이션은 왜 그리 많은 걸까? 예를 들어 Anjuta IDE가 그렇다. Anjuta의 디폴트 윈도우 크기는 내 스크린과 비슷할 정도로 크지만, 좌상단 모서리는 화면 가장자리에서 3픽셀 정도 떨어져 있다. 그런데 최대화 버튼을 클릭하고 Anjuta를 종료한 다음에, 다시 실행시키면 본래의 디폴트 윈도우 크기로 돌아가 버린다. 결국 프로그램 실행 직후에 작업에 착수하기에 앞서 최대화 버튼을 눌러 줘야만 한다. 이전의 윈도우 크기와 위치와 상태를 저장하는 데 필요한 용량은 기껏해야 20바이트, 수천 번의 클릭을 절약하는 것 치고는 대단히 적은 댓가다.
변경된 설정값을 제대로 저장하는 것은 지놈(Gnome)의 노틸러스 파일 매니저다. 노틸러스는 윈도우 크기에서부터 스크롤바 위치에 이르기까지 모든 윈도우의 상태를 제대로 저장해 주기 때문에, 특정 윈도우를 언제나 내가 원하는 상태로 열어볼 수 있다.

여태까지의 이야기를 요약하자면...

1. 컴퓨터는 강력한 능력을 가지고 있으니, 그 능력을 사용자를 위해 활용하도록 하자
2. 비슷한 아이템을 서로 구분할 수 있도록 한다
3. 어플리케이션 설정값을 기억할 수 있도록 한다


4) 아이템을 분간하기 쉽고 찾기 쉽게 만든다
간단한 이야기다. 서로 다른 역할을 수행하는 아이템은 척 보기에도 서로 달라 보여야 한다. 접근성을 높이려 시도했으나 완전히 실패한 사례를 보고 싶다면 그림 8의 Konqueror의 툴바를 보시라.
resize
(그림 8)


툴바의 왼쪽 끝에는 최근에 사용된 명령어가 팝업 메뉴로 표시되는 '최근 명령 버튼(윗방향 화살표 모양)'이 붙어 있다. 왼쪽 끝은 찾기 쉽고 클릭하기 쉬운 위치이니만큼 가장 자주 사용하는 명령어를 배치하기 마련이다. 그렇기에 내가 아는 거의 모든 웹브라우저는 이 위치에 되돌아가기(Back) 버튼을 할당해 놓았다...! (대체 Konqueror 혼자 튀는 이유는 뭐냐!)
찾기 버튼과 두 개의 확대축소 버튼은 매우 유사하게 생겼다. 앞으로 가기(Forward), 되돌아가기(Back), 최근 명령(Up), 홈(Home), 다시읽기(Refresh) 버튼은 모두 동일한 색상이라 그들을 분간하기가 대단히 힘들다. 그러나 가장 중요한 것은 이 툴바에는 무려 15개나 되는 버튼이 집중되어 있다는 사실이다!
항목의 갯수가 대략 5개 안쪽이라면, 인간은 즉각적으로 - 별다른 생각 없이도 - 그것들을 분간할 수 있는 능력을 가지고 있다. 악보가 다섯 개의 선으로 이뤄진 이유가 바로 이 때문이기도 하다. 하지만 항목 숫자가 5개를 넘어가면 인간은 잠시 동작을 멈추고 뭐가 뭔지 판별하기 위해 머리를 굴려야 한다.
사용자의 작업 부담을 덜기 위해서 툴바에는 가장 자주 사용되는 아이템만 골라서 넣는 편이 좋다. 하지만 대부분의 어플리케이션은 툴바에 너무 많은 아이템을 몰아넣는다. Konqueror만 해도 그렇다. 웹브라우징처럼 간단한 작업을 처리하는데 있어서 열다섯이나 되는 아이템은 지나치게 많다.
resize
(그림 9)


또다른 사례는 GNOME 기본 테마에서 찾아볼 수 있다. 그림 9에서 보여지는 것은 텍스트를 선택했을 때의 화면이다. 사용자는 뭔가의 작업을 진행하기 위해 텍스트를 선택하는 순간, 그 텍스트에 주의를 쏟게 된다.
헌데 어째서 이 테마는 선택 배경 색상을 저렇게 어두운 색깔로 바꿔서 텍스트를 읽기 어렵게 만드는 걸까? 조금 더 밝은 색상을 사용한다면 읽기 쉽지 않을까?

이 이야기를 정리하면,
1. 다른 일을 하는 아이템은 서로 차별화되는 모양새로 만든다
2. 지나치게 많은 아이템을 제시해서 사용자를 질리게 하지 마라
3. 현재 선택되거나 초점이 맞춰진 아이템은 판별하기 쉽고 읽기도 쉬워야 한다




잘 읽으셨나요? 다른 건 몰라도, 툴바 항목의 숫자가 5개를 넘어선 안 된다는 데에는 전적으로 동감하는 바입니다. 툴바에 지저분하게 이거저거 늘어놓으면 일단 짜증이 먼저 솟구치거든요. 제발 툴바엔 꼭 필요한 것만 꺼내놓으란 말이야!
2005/04/21 11:45 2005/04/21 11:45