프로그래머를 위한 사용자 인터페이스 설계론 (1부)

글 : Joel Spolsky
번역 : AhnLab 
2000년4월10일월요일 

필자가 아는 대부분의 골수 C++ 프로그래머들은 사용자 인터페이스 프로그래밍을 꺼린다. 필자로서는 잘 이해가 되지 않는 일이다. UI 프로그래밍이 본질적으로 아주 쉽고 간단하며 재미있는 작업이라고 생각하기 때문이다.

UI 프로그래밍은 쉽다. 일반적으로 하나의 사각형 안에 또 다른 사각형을 집어넣는 수준 이상의 더 복잡한 알고리즘은 필요하지 않기 때문이다. UI 프로그래밍은 간단하다. 프로그래밍 과정에서 실수가 있을 경우, 금방 눈에 띄고 곧바로 수정할 수 있기 때문이다. UI 프로그래밍은 재미있다. 노동의 결과를 직접 눈으로 확인할 수 있기 때문이다. 마치 프로그램을 직접 조각하는 것 같은 기분을 느낄 수 있다.

대부분의 프로그래머들이 UI 프로그래밍을 두려워하는 이유는 아마도 UI 디자인을 두려워하기 때문인 것 같다. 프로그래머들은 UI 디자인이 그래픽 디자인과 비슷한 일이라고 여긴다. 그들이 생각하는 디자인이란, 카페라테를 즐겨 마시며 검정색 옷만 입고 독특한 피어싱으로 온몸을 치장한 개성 넘치는 사람들이 신비로운 작업 과정을 통해 예술적으로 보이는 무언가를 만들어내는 그런 일이다. 프로그래머들은 스스로를 분석적이고 논리적인 사고형 인간이라 생각한다. 그러니까 이성적 추론에는 강하지만 예술적 판단에는 약하다는 것이다. 그래서, UI 디자인은 자신들에게 어울리지 않는 일이라고 생각한다.

필자가 경험한 바로는, 사실 UI 디자인은 매우 쉽고 매우 논리적인 작업이다. 대학에서 미술을 전공한 사람이나 형광 보라색으로 머리를 염색하고 다니는 사람들만이 할 수 있는 그런 일이 아니다. UI 디자인은 간단하면서도 논리적인 규칙들을 적용하여 프로그램의 사용자 인터페이스를 보다 개선할 수 있는 방법을 이성적으로 고민하는 일이다. 

필자가 이야기하고자 하는 것은 “젠(Zen, 禪) 스타일의 예술적 UI 디자인” 같은 것이 아니다. 필자가 이야기하고 싶은 것은 예술이나 불교가 아니라 일련의 규칙이다. 이성적이고 방법론적인 사고 체계다. 이 글은 프로그래머들을 위해 쓴 것이다. 그러므로, 메뉴 바를 만드는 방법에 대한 설명은 필요하지 않으리라 생각한다. 필요한 것은 메뉴 바에 무엇을 집어넣을 것인가를 (혹은, 메뉴 바가 과연 필요할 것인가를) 생각하는 것이다. 필자가 말하고 싶은 주된 원칙은 한 가지이며 이것은 모든 UI 디자인에 도움이 될 것이다. 게다가, 이 원칙은 이해하기도 쉽다.

필자가 처음 아르바이트를 했던 직장은 규모가 큰 제빵 공장이었다. 설계 당시, 이 공장에는 여섯 개의 빵 생산라인이 들어설 예정이었고 두 개의 생산라인 사이에는 반죽기가 하나씩 설치되었다. 이 반죽기는 180 kg짜리 빵 반죽 덩어리를 좌우의 생산라인에 공급하게 되어 있었다.

위의 그림은 이 공장의 초기 설계를 나타낸 것이다. 하지만, 실제로 필자가 일하던 당시에는 반죽기 C는 아직 설치되어 있지 않았고 3번과 5번 생산라인도 세워져 있지 않았다. 그러므로, 실제 구조는 다음과 같다.

눈치가 빠른 독자들이라면 “어떻게 반죽기 B에서 6번 생산라인으로 빵 반죽을 공급할 것인가”가 궁금해질 것이다. 여기서 바로 필자가 등장하게 되는 것이다. 믿어지지 않겠지만, 그 당시 필자가 했던 일은 반죽기 B 옆에 서 있다가 반죽기 밖으로 튕겨져 나오는 무게 180 kg짜리 대형 빵 반죽을 잡아서는 바퀴가 달린 반죽통에 담아 6번 생산라인까지 밀고 간 후 그 빵 반죽을 6번 생산라인에 올려놓는 것이었다. 필자는 오전 10시부터 오후 4시까지, 10분 간격으로 이 일을 해야 했다.

일은 여기서 끝나지 않았다. 6번 생산라인은 180 kg짜리 반죽을 한번에 처리할 수 없었기 때문에, 필자는 커다란 칼로 빵 반죽을 10조각으로 잘라야 했다. 그것이 얼마나 어려운 일이었는지에 대해서는 자세히 이야기하지 않겠다.

물론, 처음 며칠간은 고생을 많이 했다. 그 일이 거의 불가능한 일처럼 보이기도 했다. 온몸의 뼈마디가 다 쑤시고 손에는 수없이 물집이 잡혔다. 그야말로 아프지 않은 곳이 없을 지경이었다.

처음에는 6번 라인에 빵 반죽을 중단 없이 공급하는 것조차도 힘이 들었다. 반죽 공급이 끊어질 때마다 생산라인 전체에 공백이 생겼고 이로 인해 오븐에 들어갈 빵이 부족해지면 에너지는 계속 일정하게 공급되는데 구워야 할 빵의 양은 적다 보니 오븐이 과열돼 빵이 타버렸다. 이따금씩 찐득찐득한 반죽 찌꺼기를 청소하느라 6번 라인의 가동을 잠시 중단시키는 동안에도 반죽기가 계속 빵 반죽을 만들어내는 바람에 바퀴달린 반죽통을 이리저리 피해 다니며 남아도는 반죽을 처리해야 할 때도 있었다. 이럴 때는 바닥을 닦아낸 후 기름을 바르고 그 위에 빵 반죽을 던져놓았다가 나중에 6번 라인이 다시 가동되면 그 반죽을 떼어다 쓴다. 하지만, 30분 이상 경과되면 반죽이 발효되기 시작해서 맛있는 빵을 만들 수 없기 때문에, 30분 이상 지난 반죽은 5 kg 정도의 덩어리로 잘라서 반죽기에 한 덩어리씩 넣어 다시 반죽해야 했다.

일주일쯤 지나자 필자는 반복적인 작업에 익숙해지기 시작했고, 필자의 기억이 정확하다면, 반죽 공급 주기인 10분 중에서 2분 정도는 짬을 내서 쉴 수 있게 되었다. 정확한 스케줄을 파악하게 되었고 6번 라인이 가동되지 않는 동안 반죽기의 반죽 공급 횟수를 줄이는 방법도 터득하게 되었다.

그러면서, 필자는 어느 맥주 광고에 나오는 말처럼 왜 어떤 날은 다른 날보다 더 살만하다고 느껴지는가에 관해 생각하기 시작했다.

이런 문제를 고민하던 어느날, 필자는 바퀴달린 반죽통 중의 하나가 바퀴 상태가 불량해서 제대로 돌아가지 않는다는 사실을 발견하게 되었다. 때로는 이 반죽통이 필자가 미는 방향으로 제대로 나아가질 않아 여기저기 부딪히기도 했다. 이럴 때는 사소한 것이긴 하지만 좌절감을 맛보게 된다. 또, 때로는 반죽통을 들어올리기 위해 체인을 잡아당기다가 체인에 긁혀 상처를 입기도 했다. 또 다시 작은 좌절감을 경험한다. 그런가 하면, 때로는 반죽기에서 튕겨져 나오는 빵 반죽을 받기 위해 빈 반죽통을 밀며 뛰다가 바닥에 발라둔 기름 때문에 미끄러지기도 했다. 또 한번 작고 사소한 좌절감을 맛보게 된다. 물론, 쓰러질 만큼 커다란 좌절은 아니지만.

어떨 때는 작은 것이지만 성취감을 맛보기도 한다. 반죽 산출 간격을 정확하게 파악하여 신선한 반죽을 제때 생산 라인에 공급할 수 있게 된 것이다. 이는 훌륭한 빵 맛을 보장한다. 때로는 더 작고 사소한 일로 성취감을 느끼기도 한다. 이를테면, 반죽기에서 튀긴 작은 밀가루 덩어리들이 벽에 달라붙으면 그것을 떼어내야 했는데, 페인트 스크레이퍼를 사용하면 밀가루 덩어리를 손쉽게 긁어낼 수 있다는 사실을 발견한 것이다. 좋았어! 또, 빵 반죽을 자를 때 유난히 쉽게 잘라지는 날도 기분이 좋았다. 나를 둘러싸고 있는 세상을 내 의지대로 통제할 수 있다고 느낄 때, 비록 그것이 아주 작고 사소한 일일지라도 만족감을 안겨주게 된다.

그렇게 시간은 흘러갔다. 비록 작고 사소한 것이기는 하지만 좌절감과 만족감은 계속 쌓여갔다. 아주 작고 하찮아 보이는 일이 기분을 바꿔놓을 수도 있다. 사람의 기분은 어떤 사건의 크기에 따라 달라지는 것이 아니라, 그것이 어떤 성질의 경험이냐에 따라 달라진다.

그리고, 필자는 작은 것이라도 성취감을 여러 번 느끼고 좌절감은 거의 느끼지 않을 때 가장 기분이 좋다는 사실을 깨닫기 시작했다.

몇 년 뒤에 대학에 입학한 후 필자는 Martin E. P. Seligman 박사의 ‘학습된 무력감’ 이론에 대해 배우게 되었다. 다년간의 조사를 바탕으로 한 이 심리학 이론의 요지는 대부분의 우울증이 무력감, 자신의 환경을 스스로 통제할 수 없다는 느낌에서 비롯된다는 것이었다.

자신의 환경을 스스로 통제할 수 있다고 느낄 때 사람들은 행복해진다. 화가 나고 짜증이 나고 좌절감이 느껴진다면, 그건 아마도 자기 주변에서 일어나는, 스스로 통제할 수 없는 어떤 일 때문일 것이다. 그것이 아무리 작고 사소한 것일지라도 말이다. 가령, 워드를 치고 있는데, 띄어쓰기가 잘 되지 않는다. 스페이스바를 눌렀는데도 아무런반응이없는것이다. 좌절감을 맛보게 된다. 또, 현관문의 열쇠가 말을 듣지 않는다. 열쇠를 구멍에 꽂고 돌렸는데도 꼼짝도 하지 않는다. 역시나 좌절감을 맛보게 된다. 이런 작은 경험들이 쌓여서 사람들을 불행하게 만드는 것이다. 비록 이런 것들은 너무나 사소하고 하찮은 일이지만 (기아로 고통 받는 아프리카 사람들을 생각하면, 겨우 스페이스바 때문에 좌절했다고는 말할 수 없으니까), 그럼에도 불구하고 기분이 상한다. 

자, 이제 컴퓨터에 대한 이야기로 다시 돌아가 보자. 

지금부터는 ‘피트’라는 이름의 전형적인 윈도우 파워유저를 주인공으로 이야기를 진행할 것이다. 사용자 인터페이스에 대해 생각할 때에는 가공의 사용자를 머리 속에 그려보는 것이 크게 도움이 된다. 보다 현실적이고 생생한 인물을 그려낼수록, 그들이 어떤 방식으로 제품을 사용하게 될 것인가를 보다 정확하게 생각해낼 수 있다. 피트는 기술서적 전문 출판사의 회계 담당자로, 6년째 윈도우 시스템을 사용하고 있으며 집에서도 가끔 컴퓨터를 이용한다. 그는 유능하고 컴퓨터도 잘 다룬다. 자신이 사용할 소프트웨어는 직접 설치하며, 컴퓨터 관련 잡지를 읽고, 심지어는 워드 프로그램에서 간단한 매크로를 만들어 경리 사원들의 청구서 발송 업무를 도와준 적도 있다. 집에서도 모뎀을 연결해서 인터넷을 이용한다. 하지만, 매킨토시는 아직 한번도 사용해본 적이 없다. 그는 이렇게 말한다. “매킨토시 시스템은 너무 비싸. 그 돈이면 128메가 RAM의 700 Mhz PC를 살 수 있는데...” 틀린 말은 아니다.

어느날, 친구 지나가 컴퓨터 문제로 피트에게 도움을 청한다. 지나는 매킨토시 iBook을 사용하고 있다. 그녀는 속이 들여다보이게 디자인된 iBook의 본체가 마음에 든다. 컴퓨터 앞에 앉아 매킨토시를 사용해 보려던 피트는 이내 좌절감을 맛보게 된다. “매킨토시는 마음에 안 들어.” 시행착오 끝에 결국 지나를 도와줄 수는 있었지만 피트는 기분이 영 좋질 않다. “매킨토시는 사용자 인터페이스가 너무 불편하단 말이야.”

불편하다고? 이게 도대체 무슨 소리지? 매킨토시 시스템의 사용자 인터페이스가 정교하게 잘 만들어졌다는 건 누구나 아는 사실인데. 사용용이성의 패러다임을 말하는 건가?

피트의 평가에 대해 필자는 이렇게 분석한다.

매킨토시 시스템에서 창의 위치를 옮길 때는 마우스로 창의 모서리를 누른 상태에서 창을 움직이면 된다. 이와 달리, 윈도우 시스템에서는 타이틀 바를 누른 상태에서 창을 움직여야 한다. 마우스로 창의 모서리를 누르면 창의 위치가 움직이는 것이 아니라 창의 크기가 달라진다. 지나의 컴퓨터를 사용하면서 피트는 창의 너비를 확대하기 위해 마우스로 창의 우측 모서리를 끌어당겼다. 그러자, 창의 크기가 달라질 것이라는 그의 기대를 져버리고 창이 통째로 움직이기 시작했다.

윈도우 시스템의 경우, 화면에 메시지상자가 나타날 때 Enter 키나 스페이스바를 누르면 이 상자를 닫을 수 있다. 하지만, 매킨토시 시스템에서는 스페이스바를 눌러도 소용이 없다. 대개는 마우스를 사용하여 직접 클릭해야 한다. 경고메시지가 나타나자 피트는 메시지상자를 닫기 위해 지난 6년간 해왔던 것처럼 무의식적으로 스페이스바를 눌렀다. 그러나 아무 일도 일어나지 않았다. 그러자 피트는 더 세게 스페이스바를 두드렸다. 컴퓨터 시스템이 스페이스바 입력 사실을 인식하지 못했다고 생각했기 때문이다. 사실, 매킨토시 시스템은 그가 스페이스바를 입력하는 것을 분명히 인식하고 있었다. 단지, 반응이 없었을 따름이다! 결국 피트는 마우스를 사용하여 메시지상자를 닫았다. 이 순간, 또 다시 좌절감을 느끼게 된다.

또, 피트는 Alt+F4를 사용하여 창을 닫는 방법에 익숙했지만, 매킨토시 시스템에서는 Alt+F4가 볼륨 조절에 사용된다. 바탕화면에서 인터넷 익스플로러 아이콘을 클릭하려 했으나 다른 화면이 아이콘을 반쯤 가리고 있었기 때문에, 피트는 그 창을 닫기 위해 Alt+F4를 누르고는 곧바로 아이콘이 있어야 할 자리를 더블 클릭했다. 하지만, Alt+F4는 창을 닫는 대신 볼륨만 높였고, 그가 더블 클릭한 자리엔 툴바의 도움말 버튼이 있었기 때문에 곧 이어 도움말 화면이 튀어나왔다. 그래서, 이제 그가 닫아야 할 창은 두 개로 늘어났다.

또 한번 좌절감을 느끼게 되는 순간이다. 비록 작고 사소한 일들이지만 이런 좌절감들이 계속 쌓여서 결국 피트는 잔뜩 화가 나고 말았다. 시스템은 그의 뜻대로 움직여주지 않았다. 스페이스바나 Alt+F4 키는 마치 고장이라도 난 것처럼 “말을 듣지 않는다”. 창의 크기를 확대하려고 하면 엉뚱하게도 창이 통째로 움직여 위치만 달라진다. 나쁜 창 같으니라구. 이 같은 통제 불능 상태에 대한 느낌은 잠재의식 속에서 무기력감으로 바뀌고 결국은 사람을 우울하게 만든다. “역시 내 컴퓨터가 편해.” 피트는 이렇게 말한다. “내 컴퓨터는 내가 원하는 방식대로 작동하도록 설정되어 있으니까. 그런데, 이 매킨토시 시스템은 정말 불편하군. 짜증난다. 애플사가 이제까지 MacOS에만 전념했다면 이 운영체제가 이렇게 엉망은 아니었을 텐데."

이제, 피트의 심리 상태를 보다 정확하게 이해할 수 있다. 실제로는 매킨토시가 아주 사용하기 편리한 (물론, 매킨토시 사용자들에게 편리한) 시스템임에도 불구하고 그는 이렇게 느끼고 있는 것이다. 어떤 키를 누를 때 창이 닫히도록 할 것인가는 순전히 자의적으로 정해지는 것이다. 어쩌면, 마이크로소프트사의 프로그래머들은 매킨토시의 인터페이스를 모방해서 윈도우 시스템의 사용자 인터페이스를 만들면서, 마우스로 창의 모서리를 끌어당겨 창의 크기를 변경할 수 있는 새로운 기능을 추가해야겠다고 생각했을지도 모른다. MacOS 8.0의 프로그래머들도 새로운 기능을 추가하기 위해, 마우스로 창의 모서리를 끌어당겨 창의 위치를 변경할 수 있는 기능을 만들었을 것이다.

사용자 인터페이스와 관련된 이제까지의 논쟁은 대부분 엉뚱한 곳에 초점을 맞추고 있다. 창의 크기를 조절할 수 있는 방법이 더 다양하니까 윈도우가 더 좋은 운영체제다? 그래서? 핵심은 그것이 아니다. 핵심은 ‘과연 그것이 사용자들이 기대했던 방식으로 사용자에게 응답하는가?’ 라는 점이다. 그렇지 않다면, 사용자는 무력감과 통제력 상실을 느끼게 될 것이다. 마치 반죽통이 필자가 미는 대로 움직여주지 않아서 여기저기 부딪혀야 했을 때 필자가 그랬던 것처럼. 쾅!

UI는 사용자의 느낌과 정서 상태와 기분에 영향을 준다는 점에서 중요하다. UI가 잘못 만들어지면 사용자는 스스로 그 소프트웨어를 제어할 수 없다는 느낌을 받게 되고 말그대로 불행해진다. 그리고는 그 소프트웨어를 욕하게 된다. 반대로, UI가 지능적으로 만들어지고 사용자가 기대하는 바대로 움직여주면 사용자는 신이 난다. 작은 것이지만 그들의 목표를 성취해 나갈 수 있기 때문이다. 이것 봐! 내가 CD를 만들었어! 이거진짜로되네! 이소프트웨어짱인데! 와우!

사용자를 행복하게 만들려면, 그들이 스스로의 환경을 제어할 수 있다고 느끼도록 만들어야 한다. 이를 위해서는 사용자들의 행동을 정확하게 해석해야 하며, 그들이 기대하는 바대로 움직이는 인터페이스를 만들어야 한다. 

즉, 모든 사용자 인터페이스 설계에 적용되는 대원칙은 바로 이것이다.

프로그램이사용자의기대와똑같이움직이도록사용자인터페이스를설계하라.

힐렐의 말처럼, 이외의 모든 것은 부수적인 것이다. 즉, 좋은 UI 디자인에 대한 여타의 모든 규칙은 이 대원칙 하에서 자연스럽게 추론할 수 있는 귀결이다.