6. GUI 클리닉 -최적의 UI 설계 가이드

지금까지 언급한 사용자 인터페이스에 대한 이론을 바탕으로 몇 개의 잘된 화면 디자인과 그렇지 못한 디자인을 살펴보도록 하겠다.
 
예 1
화 면 1.1은 라디오 버튼과 체크 박스가 모두 가로 방향으로 정렬되어 있고, 구분이 되지 않아 보기에도 정리가 되지 않았을 뿐 아니라 항목을 선택하기도 어렵다. 화면 1.2는 화면 1.1 을 간단히
그룹박스 컨트롤을 이용해 항목들을 카테고리화 하고, 그룹 박스 내에 항목을 세로로 정렬하면 화면이 깔끔하게 정리될 뿐 아니라 분류가 명확하므로 사용자가 항목을 선택하기도 쉽다.

그림 41. 항목 배열에 대한 잘 못된 디자인과 잘 된 디자인

예 2
화 면 2.1과 화면 2.2에서는 작업 순서에 따라 사용자의 포커스가 가능한 것과 관련해 입력 양식에서 입력 항목과 버튼의 위치에 대해 살펴보도록 하자.
화면 2.1은 입력 항목들이 정렬 기준이 애매하기 때문에 양식이 복잡해 보일 뿐 아니라 작업 순서에 따라 항목을 배열했을 경우에도 사용자의 시선을 굵은 선으로 표시한 것과 같이 지그재그로 화면 곳곳에 두게 된다. 모든 항목을 입력한 후 버튼이 우측 상단에 있어 다시 화면 위로 시선이 올라가게 된다.
화면 2.2에서는 레이블(또는 텍스트 필드, 캡션, 레이블)을 왼쪽 정렬을 했고, 입력 창(텍스트 박스)은 레이블의 가장 긴 항목 다음에 왼쪽 정렬을 해서 입력 폼을 단순화시켰다. 또한 입력이 끝난 후 누를 명령 버튼의 위치를 마지막 입력 항목 다음에 위치시켜, 사용자의 시선은 위에서 아래로 작업 순서에 의해 내려오게 된다.
입력 폼을 설계할 때는 항목들을 그룹박스나 라인을 사용해 카테고리화 하고, 레이블과 텍스트 박스를 정렬해서 폼을 단순화해야 한다. 또한 항목들의 배치는 작업 순서에 따라 배치해야 하고, 물론 사용자의 시선의 흐름을 염두에 두어야 한다.

그림 42. 폼 입력창의 입력 항목과 버튼에 대한 잘못된 디자인과 잘 된 디자인

예 3
다음 예는 어느 통신 프로그램의 우편 화면이다. 이 화면에서 윈도우와 탭, 버튼들의 사용에 대해 살펴보자. 우선 화면 3-1의 화면을 보면 앞에서 살펴본 것처럼 노트북 컨트롤을 이용했다는 것을 알 수 있다. 탭으로 [받은편지]와 [보낸편지], [보낼편지], [내용보기] 페이지가 있고 우측에 버튼들이 있다.
그렇다면 [받은편지] 탭의 리스트에서 항목을 더블 클릭하거나 오른쪽의 버튼 중 [읽기] 버튼을 누르면 어떤 일이 일어날까? 일반적으로 추측한다면 새 윈도우에 [내용보기]가 뜰 것이다. 왜냐하면 윈도우는 작업 영역이므로 동시에 두 가지 작업영역을 갖기 위해서는 새로운 작업 영역을 새 윈도우에 보여주기 때문이다.
만약 같은 창 또는 같은 영역에 새로운 작업 영역을 표시하면 어떻게 될까? 이는 도스용이나 터미널처럼 항상 한 작업 영역만 존재하게 된다. 따라서 사용자는 받은편지 목록과동시에 편지의 내용을 볼 수 없다. 더구나 편지의 내용을 보는 것은 매우 빈번히 발생한다.
그렇다면 이 프로그램은 어떻게 행동할까? 탭의 레이블로 추측할 수 있는 것처럼 [내용보기] 탭으로 바뀌고 같은 영역에(프로그램 상에는 다른 영역이지만 사용자가 볼 때는 같은 영역) 편지의 내용이 보인다. 결국 이 프로그램의 사용자는 목록과 동시에 편지의 내용을 볼 수 없다. 또한 [내용보기]를 할 수 있는 공간은 한 군데밖에 없으므로 동시에 2개 이상의 편지 내용을 볼 수 없게 된다.
우편함의 주된 기능이 편지 목록을 보고 편지를 읽고 쓰는 것이라면, 편지를 읽는데 있어 항상 한 통밖에 볼 수 없어 기능을 제한받게 된다. 이는 윈도우 형태를 갖고 있지만 마치 터미널 모드로 편지를 읽는 것과 같다. 노트북을 이용한 분류나 공간 활용은 바람직하지만 지금처럼 동시에 여러 화면을 봐야 하는 경우에는 적합하지 않은 컨트롤이다. 따라서 노트북 컨트롤은 일반적으로 옵션 화면으로 쓰이거나 동시에 화면을 볼 경우가 거의 없는 화면 디자인에 사용된다.

그림 43. 높은 복잡도와 일관성 없는 사용성을 가진 디자인 예

그렇다면 편지를 쓸 때는 어떻게 될까? [편지쓰기] 버튼을 눌러 보자. 어떤 일이 발생할까?
편지의 목록과 내용 보기가 같은 작업영역(윈도우)에서 이루어졌으니 편지쓰기도 같은 영역에서 보여져야 일관성 측면에서 맞을 것이다. 그러나 예측은 또 빗나갔다. 편지쓰기는 화면 3-2와 같이 새로운 윈도우에 뜬것이다. 어떤 사람에게 편지를 쓰고 있다가 새로운 편지를 받아보니 답장을 써야 할 경우, 동시에 2개 이상의 편지창이 필요할 수도 있다. 따라서 편지쓰기 윈도우가 새로 뜬것은 윈도우 환경에서는 매우 바람직하다.
그렇지만 일관성이 떨어져 사용자는 혼란스럽게 되고, 가장 빈번히 사용되는 내용보기를 동시에 2개 이상 할 수 없으므로 사용성 측면에서도 불편하게 된다.
이제 우측의 버튼들을 살펴보자. 그림 43에서 현재 보고 있는 탭에 따라 우측의 버튼들이 달라지는 것을 볼 수 있다. 물론 상태에 따라서 명령 가능한 버튼이 달라져야 하지만 앞서 메뉴 설계에서도 언급했지만 상태에 따라 버튼이 없어졌다 보였다 하는 것은 초보자들에게 혼란을 준다.
따라서 메인 메뉴를 보면 실행할 수 없는 메뉴는 흐린 폰트로 선택할 수 없게 하고 자기 자리를 지키고 있는 것을 볼 수 있다고 했다. 복잡한 기능을 한 화면에 넣다 보면 이렇게 초보자들에게는 사용하기 어려운 화면이 되는 것이다.