프로그래머를 위한 사용자 인터페이스 설계론 제4부: 제공성(Affordances)과 메터퍼(metaphor)

글 : Joel Spolsky
번역 :
2000년 4월 18일 화요일

프로그램 모델과 사용자 모델이 일치하는 사용자 인터페이스 개발은 쉽지 않다. 때때로, 사용자들이 프로그램이 어떻게 작동하는지 무슨 작업을 하도록 되어 있는지에 대한 기대가 뚜렷하지 않을수도 있다. 이런 경우, 프로그램이 어떻게 작동하는지에 대해 사용자들에게 설명해 줄 수 있는 방법을 찾아야 한다. 그래픽 인터페이스를 사용하는 경우, 이러한 문제를 해결하는 일반적인 방법은 메터퍼(metaphors) 사용이다. 하지만 모든 메터퍼가 동일하게 생성되는 것은 아니고, 왜 메터퍼 사용으로 인해 문제가 해결되는지 이해하는 것이 중요하고 따라서 양호한 메터퍼가 있는지 아는 것이 중요하다.

가장 유명한 메터퍼는 윈도우 및 매킨토시에서 사용하는 "데스크톱 메터퍼"이다. 작은 폴더 내에 작은 파일들이 포함되어 있어 그 파일들을 한 폴더에서 끌어내 다른 폴더로 이동시킬 수 있다. 이 메터퍼가 사용가능한 이유는 폴더의 작은 화상들이 실제로 문서를 집어 넣을 수 있는 폴더를 연상시키기 때문이다.

Kai사의 Photo Soap을 이용한 스크린샷이 아래에 나와 있다. 확대하는 방법을 추측할 수 있겠는가? 

 

그다지 힘든 추측이 아니다. 확대경은 실제 세상에 대한 메터퍼이기 때문이다. 사람들은 자신들이 해야 하는 일들에 대해 알고 있다. 그리고 확대경이 실제로 이미지를 보여주는 물체 자체를 크게 하는 것이 아니기에 확대기능으로 인해 이미지 본체의 크기가 실체로 변한다는 두려움은 없다.

메터퍼(심지어 불안전한 메터퍼 조차)는 메터퍼가 전혀 없는 상태에서 효과가 더 좋다. 마이크로소프트 워드를 사용한 확대기능을 추측할 수 있겠는가?

 

마이크로소프트 워드에는 인터페이스 기능 중 두 개의 작은 확대경 아이콘이 있다. 이 중 하나는 "Print Preview"(인쇄 미리보기) 버튼 상에 있고 다른 하나는 "Document Map"(문서 맵) 버튼 상에 있다. 확대율을 변경하는 실제 방법은 현재 "100%"로 나타난 드롭다운 박스(dropdown box)를 사용하는 방법이다. 메터퍼 사용을 시도하지 않았기 때문에 사용자들이 확대기능(Zoom) 사용법을 추측하기가 어렵다. 이런 경우가 반드시 좋지 않다고는 할 수 없다. 워드 프로세싱 응용프로그램에 있어서 확대기능의 중요성은 Kai에서 제공할 수 있는 만큼 넓은 화면 공간이 필요할 만큼 크지 않기 때문일 것이다. 그러나, 워드 사용자들 보다 Kai 사용자들이 확대기능 사용방법에 대해 더 잘 알 것이라고 추측하는 편이 안전하다.

메터퍼를 잘못 선택하면 차라리 아예 선택하지 않으니만 못하다. 윈도우 95의 서류 가방(briefcase)를 기억하는가? 사방 1인치 정사각형 크기의 이 조그맣고 귀여운 아이콘이, 마이크로소프트사에서 아무도 그 아이콘을 좋아하지 않는다는 사실을 깨닫기 전까지 수 년 동안 윈도우 사용자 컴퓨터 데스크톱에 있었다. 아무도 그 아이콘을 원하지 않았는데 그 이유는 메터퍼가 잘못됐기 때문이었다. 그 아이콘은 집에 가져갈 파일을 담는 “briefcase”(서류 가방) 역할을 하도록 되어 있었다. 하지만, 파일을 서류 가방에 담는가 아니면 플로피 디스크에 담는가? 난 잘 모르겠다. 그 서류 가방을 이해할 수 없다. 나라도 그 아이콘으로 사용자의 관심을 끌 수는 없었을 것이다.

제공성(Affordances)

설계가 잘된 대상은 그 대상을 보기만 해도 어떻게 작동하는지 알 수 있다. 어떤 문에는 팔 위치에 커다란 금속판이 있다. 그 금속판으로 할 수 있는 일이란 그것을 미는 것이다. Donald Norman의 표현에 의하면, 그 판은 밀기라는 작업을 제공한다. 다른 문에는 커다랗고 둥근 손잡이가 있어 보는 이로 하여금 잡아당기고 싶은 충동을 느끼게 한다. 이 손잡이들은 심지어 보는 이가 손을 손잡이에 어떤 식으로 둬야 하는지도 간접적으로 알려주고 있다. 손잡이가 잡아 당기는 작업을제공하는 것이다. 보는 이로 하여금 손잡이를 잡아당기고 싶은 충동을느끼게한다.

다른 대상들은 그 설계가 그다지 잘된 것이 아니어서 그 대상으로 무엇을 해야 할지 알 수 없는 경우가 있다. 전형적인 예가 CD 케이스(jewel case)로 이 케이스를 열려면 엄지손가락을 살짝 올려놓고 특정한 방향으로 잡아당기도록 되어 있다. 이 케이스 설계 상의 아무 것도 여는 방법에 대해 알려주지 않는다. 그 방법을 모르면, 케이스를 열 수 없기 때문에 좌절감을 느끼게 된다.

제공성을 만들어 내는 가장 좋은 방법은 사람 손 형상을 “패인 공간”(negative space)에 반영시키는 것이다. 아래에 앞면과 뒷면이 나와있는 (성능 좋은) 코닥 DC-290 디지털 카메라를 자세히 보자.

앞면에서는, 오른손 손가락으로 알맞게 쥘 수 있을 것처럼 보이는 커다란 고무 손잡이가 보인다. 후면에는 더욱 기막힌 것이 있는데, 왼쪽 아래 코너에 엄지손가락 지문처럼 섬뜩해 보이는 안으로 패인 부분이 보인다. 왼쪽 엄지손가락을 이곳에 위치 시키면, 왼쪽 집게 손가락이 카메라 앞면 상에서 렌즈와 다른 고무덩어리 사이에서 감싸듯이 구부러진다. 엄지손가락을 빨면서 검지손가락을 구부려 코를 감싸고 놀았던 어린 시절 이후로는 느껴볼 수 없었던 일종의 편안함을 느낄 수 있도록 해준다. 

코닥 엔지니어들은 카메라가 좀 더 안정된 상태로 있고 실수로 손가락이 렌즈를 가로막는 것조차 예방할 수 있는 위치에 두 손을 놓은 상태로 카메라를 쥐도록 설득하고 있는 것이다. 비록 이 고무로 된 모든 부분에 특별한 기능이 있는 것은 아니지만 유일한 목적은 사용자로 하여금 카메라를 똑바로 쥘 수 있도록 하는데 있다.

훌륭한 컴퓨터 UI는 제공성의 개념도 채택한다. 약 10년 전에는, 대부분의 누름식 버튼은 ‘입체화’ 되었다. 회색 빛 음영을 통해 버튼이 스크린에서 튀어나온 것처럼 보였다. 이렇게 함으로써 보기만 좋았던 것이 아니라 입체 버튼은 누르기 작업을 제공했다는기능성 때문에 중요했다. 그 버튼이 튀어 나온 것처럼 보였고 그 버튼을 눌러야만 카메라가 작동할 것처럼 보였다. 불행히도, 오늘날 많은 웹사이트(제공성의 값어치를 모름)는 눌러질 수 있는 것처럼 보이기 보다는 그냥 보기만 좋은 버튼을 선호한다. 그 결과, 사용자는 종종 어느 부분을 눌러야 할지 헤맬 때가 있다. 아래의 웹사이트 배너를 보자.

"Go" 및 "Login" 버튼이 튀어나와 있고 누를 수 있는 것처럼 보인다. Site Map 및 Help 버튼은 누를 수 없는 것처럼 보이고 실제로 누를 수 없는 QUOTES 라벨처럼 보인다.

약 4년 전에, 많은 창들의 오른쪽 아래쪽에 세 개의 조그만 봉우리 같은 것이 튀어나와 마치 쥘 수 있는 것처럼 보였다. 이 봉우리는. 이 봉우리는 마찰을 증가시키기 위해 미끄럼 스위치를 밟도록 하게 하는 물체처럼 생겼다. 다시 말해, 끄는 작업을 제공한다. 창을 늘릴 목적으로 끌어당겨지기를 애원하는듯하다.

마지막으로, 제공성의 가장 좋은 예 중의 하나는 그 유명한 "tabbed dialog"(탭식 대화)이다. 이 옛날 Mac 제어판을 기억하는가?

아이디어는 왼쪽 목록에(스크롤링) 나와 있는 아이콘 중의 하나를 선택하는 것이다. 아이콘을 클릭하면, 화면 오른쪽이 변한다. 무슨 이유인지는 모르지만, 이런 식의 간접적인 행동이 이 제어판을 설계한 프로그래머들에게는 믿을 수 없을 정도로 논리적으로 보였지만 많은 사용자들은 이를 이해하지 못했다. 다른 것 중에서, 사용자들은 처음에 나오는 4 개의 아이콘 외의 다른 아이콘을 표시하기 위한 목록의 이동방법을 대부분 알아내지 못했다. 더 비판적으로 표현하자면, 대부분의 사람들은 아이콘과 대화 사이의 연결성을 이해하지 못했다. 아이콘은 실제로 선택 사항 중의 하나인 것처럼 보인다.

1992을 기점으로, 이러한 인터페이스가 사라지기 시작했고 tabbed dialogs라는 새로운 개념으로 교체됐다.

Tabbed dialogs의 제공성은 매우 강하다. 그림을 보면 여섯 개의 탭이 있다는 사실이 명백하다. 현재 어떤 탭 상에 있는지 그리고 다른 탭으로 어떻게 전환하는지가 아주 명백하다. 마이크로소프트사에서 이 Tabbed dialog 인터페이스에 대해 사용성을 시험한 결과, 사용성이30%(옛날 Mac 방식)에서 100%로 증가했다. 다시 말해, 시험 받은 모든 사람들이 탭식 대화 사용방법을 알아냈다. 이 메터퍼의 놀라운 성공률과 윈도우에 이 탭식 대화용 코드가 설치되어 있고 실제적으로 무료로 제공되는 점을 생각하면, 이 방식을 사용하지 않는 응용프로그램이 있다면 놀랄만한 사건이다. 이러한 응용프로그램들은 사람들이 사용을 거절하기 때문에, 실제로 측정 가능한, 현실 세계에서의 사용성 상의 문제가 있다.