웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
누가 훌륭한 UI 디자인의 원칙을 세웠나? 바로 MS다
Posted by kimdirector | 2013.05.13 | Hit : 1254
마이크로소프트 유저 인터페이스 UI 디자인 스마트폰 태블릿
목록보기이전보기
필자가 유저 인터페이스 설계에 관해 읽어 본 최고의 글중 하나가 바로 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란에 더하는 과정을 거치는 대신, 논리적이고 직선적인 절차로 같은 문제를 해결할 수 있다. 이런 가이드라인을 채용한 유저 인터페이스는 세금 보고서 작성 같은 작업조차도 쉽고 재미있게 만들어준다.

터보택스가 인기 있는 것은 소득세 신고 절차를 이해할 수 있는 작업 작업으로 나눴기 때문이다.
 
그때는 그때고…
IT 업계에서 10년은 영원과도 같은 긴 시간이다. 그러면 오늘날의 IUI는 어떻게 되었을까? 12년전에는 인터넷의 제약이 웹 디자인 결정에 영향을 미쳐, IUI의 개념이 크게 확산됐다. IUI는 초기의 느린 인터넷 속도와도 궁합이 잘 맞았다. 그러나 이제 인터넷은 더 이상 느리지 않고, 브라우저 기술의 발전과 단순 장식을 뛰어넘는 자바스크립트(JavaScript)가 폭넓게 확산되면서 단일 페이지 웹 애플리케이션이 여기저기서 우후죽순처럼 생겨나고 있다.
 
그렇다면 여러가지 제약이 없어진 지금, IUI를 계속 고수하는 것이 여전히 의미가 있을까? 물론이다. 데스크톱 소프트웨어 개발에 있어서 IUI는 마이크로소프트의 글이 나올 당시만큼 여전히 의미를 갖고 있다. 웹 개발자들에게 IUI는 꼭 기억해야 하는 철칙이다. 웹 기술이 많이 발전한 요즘, “발생할 수 있다”와 “발생해야 한다”의 구분은 쉽게 잊혀질 수 있다.
 
IUI는 화면이 작아 그 중요성이 큰 모바일 부문 개발자들이 특히 신경 써야 한다. 모바일 기기의 개별 화면의 목적은 아주 간결해야 한다. 명확하게 제목이 붙여지고 (필요한 경우) 단일 네비게이션 버튼과 최대 한 개의 지원 기능 버튼이면 충분하다.

하단의 버튼바 혹은 화면 바로 바깥의 햄버거 버튼 내에 더 많은 기능을 배치할 수 있다.


잘 디자인된 화면은 특별한 상황이 아니면 스크롤을 할 필요가 없어야 한다.
 
IUI는 오늘 날도 여전히 유효하지만 완벽한 것은 아니다. 대표적인 것이 사용자에게 더 많은 권한을 부여하고 싶은 경우다. 가장 광범위하게 사용되는 연역적 인터페이스 사례가 '포토샵'(Photoshop)이다. 포토샵은 수많은 설명 없는 아이콘들을 포함한 툴바로 가득한데, 이를 배우기도 몹시 고되다. 포토샵의 사용자들은 작업 속도와 활용능력을 얻기 위해 이런 인터페이스의 고통을 감내해왔다.
 
학습 절차가 더 직관적이라면 어떨까? 사용자가 색상변화율을 맞춤 설정할 수 있도록 한 화면씩 천천히 진행시킨다면 초보 사용자들에게는 편리할 것이다. 그와 동일한 '색상 변화율 위저드'는 사용자가 이 과정에 익숙해진 이후에는 그저 걸리적 거리며 불편함만 초래할 것이다.
 
그래서 사용자 경험을 측정하고, 그에 따라 적절히 인터페이스를 조절하여 적용시키는 유저 인터페이스가 궁극적 솔루션이다. '진보적 경감'(progressive reduction) 같은 이에 관련된 몇몇 실험적인 시도들은 우리가 사용자 경험(과 경험 축소)을 어떻게 측정하고, 어떻게 우리의 인터페이스를 그에 맞춰야 할지에 대한 고민을 할 때 도움이 된다.
 
그러나 IUI가 현재 프로젝트에 적합하느냐와는 별개로, 일단 모든 IT 전문가들은 IUI에 익숙해져야 한다. IUI는 프로젝트 관리자에서부터 개발자에 이르기까지 모든 이들이 더 좋은 결정을 가능케 하는 기본 사용자 경험 원칙을 분명히 명시하고 있기 때문이다.
 
바로 이 점이 나온 지 10년이 넘은 '마이크로소프트 귀납적 유저 인터페이스 가이드라인(Microsoft Inductive user Interface Guidelines)'을 반드시 읽어봐야 하는 이유다. 여기에 나온 문제들과 그 해결책들을 이해하면 당신이 만든 사이트를 보면 감탄하고 칭찬하는 사용자들을 다수 확보할 수 있게 될 것이다.

 
 
Posted by kimdirector | 2013.05.13 | Hit : 1254
Origin http://www.itworld.co.kr/news/81681?utm_source=newsletter&utm_medium=email&utm_campaign=ITW_NL_20130506
Tags 마이크로소프트 유저 인터페이스 UI 디자인 스마트폰 태블릿
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=332

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
인포월드 플래시 웹브라우저 이벤트 디자인 소셜 디자인 SNS html5 iOS 월페이퍼 CIP 영감 소통 CEO 비전 플랫폼 바이널 X 개발자 클라우드 속도 조직 홈페이지 jQuery 청중 가독성 트렌드 폰트 타이포그래피 홈페이지 무료 iOS 7 로고 플래시 저작권 상품권 모바일 벡터 오피스