칼럼 | 훌륭한 UI 디자인의 원칙을 세운 것은 MS다

필자가 유저 인터페이스 설계에 관해 읽어 본 최고의 글중 하나가 바로 12년전에 발표된 '마이크로소프트 귀납적 유저 인터페이스 가이드라인(Microsoft Inductive user Interface Guidelines)'이다. 

스마트폰과 태블릿이 등장하기 훨씬 앞서서 나온 이 글은 좋은 유저 인터페이스 설계의 핵심을 제대로 설명하고 있다. 놀랍게도 마이크로소프트 자체 유저 인터페이스를 비판하고 왜 나쁜지에 대해 설명하는 이 글은, 마이크로소프트가 겸손으로 유명하지 않던 시절에 작성된 것이다.

필자의 회사에 모바일 애플리케이션 부서가 있고, 이 부서가 우리의 기업 오픈 소스 부서의 전체 애플리케이션 개발 더욱 많이 참여하게 되면서, 좋은 UI와 나쁜 UI를 어떤 요소가 결정하는지를 종종 필자가 설명해야 한다. 그 설명 도중에 마이크로소프트의 이 글을 자주 언급하곤 한다.

마이크로소프트는 사용편의성이라는 소프트웨어의 중대한 문제를 해결하고 싶어했다. 그래서 어떻게 고객들이 소프트웨어를 사용하고 학습하는지, 그리고 그들이 실제로 사용하는데 힘든 점을 알아보는 조사를 실시했다.

그 결과 마이크로소프트는 사용자들이 제품의 개념적 모델을 이해하지 못하고 있으며, 반복 후에도 일상적인 작업을 익히지 않으며, 각각의 화면이 어떤 역할을 하는지를 잘 파악하지 못한다는 점을 깨달았다. 마이크로소프트가 '연역적 유저 인터페이스'(deductive user interface)라고 부르는 UI가 바로 범인이었다.

연역적 유저 인터페이스
연역적 유저 인터페이스의 기본 컨셉은 한 화면안에 사용자의 선택 옵션을 제시해주는 것이다. 그러면 사용자가 각각의 옵션이 무엇을 하는지를, 무엇이 어디에 연계되어 있는지, 어떤 행동을 취해야 할지를 하나씩 알아내야 한다. 파워 유저들은 이런 입문 과정을 편안히 완료하고 바로 작업에 들어갈 수 있을 것이다. 그러나 불행히도, 대부분의 사용자들은 이 범주에 들어가지 않는다. 연역적 인터페이스는 일반적인 사용자들에게 그저 골치거리일 뿐이다.

연역적 인터페이스의 대표적인 예를 보자. 우선 미국 국세청 1040 개인 소득 신고서(IRS 1040 US Individual Income Tax Return) 양식이다.

이 양식은 작성 지시사항이 있지만, 일반적으로는 스스로 각각의 용도와 의미를 파악해내야 한다. 이 양식은 세금 신고자가 세법에 친숙한 사람이라는 전제를 기반으로 만들어진 것으로 보일 만큼 모호한 부분이 많은데, 그 때문에 이 양식의 의미와 전후사정까지 다 아는 세법 전문가들과 세무 대리라는 산업 부문까지 생겨나게 되었다.


연역적 UI의 전형인 미국 국세청 1040 세금보고서는 작성자를 좌절에 빠뜨린다.

이런 점은 윈도우 탐색기(Windows Explorer)도 마찬가지다. 마이크로소프트가 윈도우 95에서 이 UI 개념을 도입했을 때 마이크로소프트는 모두가 이를 사용할 것으로 기대했다. 그래서 탐색기 인터페이스에는 자체 제작한 애플리케이션에 사용할 수 있는 비주얼 베이직(Visual Basic) 관련 기능까지 존재했다.

기존의 종이 사무실 업무에 익숙한 사람이라면 윈도우 탐색기를 거의 직관적으로 쓸 수 있다. 가지고 있는 데이터는 폴더 안에 들어가는 문서로 생각하면 되는데, 폴더와 문서들은 그 자체로도 일종의 연역적 유저 인터페이스다.

서류철 시스템이 어떻게 작동하는지, 무엇을 찾을지, 찾은 것으로 무얼 할지를 알아야 한다. 아주 많은 것들이 눈앞에 펼쳐지지만 그걸로 무엇을 할 수 있을지는 우클릭을 해서 찾아내야 한다. 폴더나 파일 속성정보를 우클릭으로 알아낼 수 있다는 점은 누군가 당신에게 직접 보여주거나 한번 이상 배워야 알 수 있다.

그러나 유저 인터페이스는 사용자들이 “내가 뭘 해야 되지?”, “이 아이콘은 무슨 용도일까?”, 혹은 “왜/어떻게 내가 이 화면을 보고 있을까?”라는 의문을 품게 해서는 안된다. 유저 인터페이스는 미리 이런 질문에 대답하고, 사용자들이 그 과정을 헤쳐나갈 수 있게 안내해야 한다.

귀납적 유저 인터페이스
마이크로소프트는 위에 설명된 문제들을 해결하기 위해 그 대안 인터페이스를 지칭하는 'IUI'(inductive user interface: 귀납적 유저 인터페이스)라는 용어를 만들어냈다. 우리가 아는 AJAX보다 앞서서, IUI는 각기 단독적인 명확한 작업을 완료하는 목적을 가진 개별 페이지로 나뉘어진 작업 흐름을 가지고 있어서, 웹 디자인에 자연스럽게 들어맞았다. 각각의 작업이 완료된 후 그 정보가 서버로 전송되고 다음 페이지가 로딩된다. 작업과 화면 사이의 일대일 구도는 IUI의 주춧돌이 되었다.

마이크로소프트의 가이드라인 문서는 IUI를 사용해 디자인할 때 취해야 할 특정 단계들에 대해 이야기하지만, 핵심 컨셉은 결국 하나다. 각 화면은 하나의 분명한 목적을 가져야 하며, 제목을 포함한 화면상 나머지 모두는 그 목적을 지원하기 위해서만 존재해야 한다는 것이다. 단일 목적을 직접적으로 지원하지 않지만 화면에 위치할 수 있는 것들은 밀접히 연관된 작업들이다.

이와 같은 단순함을 적용하는 것은 실제로 상당히 어렵지만 그만한 가치가 있다. 단순성이야 말로 사용자들을 만족시키는 최고의 방법이기 때문이다.

1040 세금 보고서가 연역적 유저 인터페이스라면, 터보택스(TurboTax)는 그 반대편, 귀납적 유저 인터페이스에 위치하고 있다. 터보택스는 세금 보고 작업 흐름을 작고 아주 분명한 작업으로 나눠준다. 각각의 작업은 제목이 분명하고, 어떤 정보가 왜 필요한 지에 대한 짧은 설명이 달린 전용 화면을 지정 받아 종종 사용자에게 직접적으로 질문을 하기도 한다.

사용자들은 서류를 뒤적이며 2페이지 18b란의 내용을 3페이지 42c란에 더하는 과정을 거치는 대신, 논리적이고 직선적인 절차로 같은 문제를 해결할 수 있다. 이런 가이드라인을 채용한 유저 인터페이스는 세금 보고서 작성 같은 작업조차도 쉽고 재미있게 만들어준다.