MS 오피스 2007 중 워드, 엑셀, 파워포인트 이 주요 제품들의 인터페이스가 리본(Ribbon)이라는 이름으로 확 바뀐 사실은 다들 잘 알 것이다. 전통적인 도구모음과 메뉴를 없애 버리고 자주 쓰는 기능들을 큼지막한 아이콘으로 대체한 것이 주요 특징이다.

그림 1. 오피스 2007의 리본 인터페이스

최근 몇 달 동안 오피스 2007를 많이 쓰면서 리본 인터페이스에 대해서 하고 싶은 말이 많았다. 그 와중 직접 리본 인터페이스를 설계한 Jensen Harris씨의 블로그에서 너무나 좋은 내용을 많이 읽을 수가 있었다 (정말 감탄! 이 블로그의 내용을 묶어서 바로 책으로 출판해도 될 정도!). Jensen씨의 블로그에서 본 내용과 내 생각을 섞어서 리본 인터페이스뿐만 아니라 일반적인 인터페이스에 대한 이런저런 이야기를 해보자.

프로그램이 가지고 있는 여러 기능을 어떤 형식으로 사용자에게 보여줄 것인가는 인터페이스 혹은 사용자 경험에서 가장 원초적인 질문 중 하나일 것이다. 과거에는 프로그램이 가진 기능이 많지 않아 큰 문제가 없었지만, 이제는 너무 많은 기능이 있다 보니 이것을 적절히 간단화 하여 사용자에게 보여주는 것이 중요한 문제로 대두되게 되었다. 80:20 법칙을 빌어 사용 하면, 아무리 복잡한 것들이 많아도 결국 자주 쓰는 기능은 몇 개이기 때문이다. 리본 인터페이스 이야기를 하기 이전에 과거 프로그램은 이 문제를 어떤 식으로 접근했는지 한 번 알아보자.

1. Pull-down Menu

20년이 다 된 가장 전통적인 메뉴 구성 방식, 지금까지 대부분의 프로그램에서 사용하고 있는 방식이다. 잠시 MS-DOS 시절의 QBasic이라는 프로그램을 살펴보자:

그림 2. Microsoft QBasic (베이직 프로그램 작성 도구)

특히 나에게는 너무나 친숙한 프로그램이다. 중고등학교 시절 이 녀석하고 날밤 샌 적이 한두 번이 아니다. 혹시 Microsoft Visual Studio로 개발하시는 분이라면 15년 전에 만들어진 이 QBasic의 인터페이스가 매우 낯이 익을 것이다. Visual C++ 6에서 사용된 대부분의 단축키를 여기서 볼 수 있다. 그 만큼 일관된 인터페이스를 유지하고 있다는 이야기다.

이 당시의 프로그램은 기능이 많지 않아 모든 기능을 이렇게 Pull-down menu라고 불린 메뉴로 간단히 구성할 수 있었다. 90년대 초반 C언어 공부해본 사람이라면 이 풀다운 메뉴 한 번 정도 만들어보지 않은 사람이 없을 정도로 선풍적인 인기를 끈 인터페이스 구조였다. 비록 80x25개의 텍스트 밖에 표현하지 못하였지만 각종 그림자 효과, 대화 상자가 뜰 때 작아졌다가 커지는 줌 효과까지 많은 미적인 요소를 가미하기도 하였다.

잠시 옛날 이야기를 해보면, C언어는 대학교 와서 배웠기 때문에, 정말 이 척박한 QBasic만 가지고 메뉴 옆에 있는 그림자를 표현 하기는 정말 쉽지 않았다. 지금의 1280x1024개의 점을 찍을 수 있는 환경과는 비교할 수도 없는 제한된 상황에서도 보다 아름다운 프로그램을 만들기 위한 삽질은 계속되어왔던 것이다.

그림 3. 그림자 뒤에 가려진 Wo는 색깔이 어둡다. QBasic으로 이거 만들기 쉽지 않다.

이 풀다운 메뉴는 이후 프로그램의 기본 인터페이스로 채택되어 어디서나 볼 수 있게 되었다. 그러나 점차 프로그램이 복잡해지고 한 번에 표시해야 할 메뉴 항목들이 너무 늘어났다. 그래서 겹쳐지는 풀다운 메뉴가 등장하고 이것은 Windows 95부터 쭉 사용되어온 기본 인터페이스다.

그림 4. Windows에서 오랫동안 사용되고 있는 전형적인 풀다운 메뉴

그러나 이것도 곧 한계에 다다르고 만다. 기능들이 너무 많다 보니 오피스 2000부터는 아래와 같이 '개인화된 메뉴 (Personalized Menu)'를 제공하게 되었다. 즉, 처음에는 간단한 내용만을 보여주다가 사용자가 그 기능을 자주 쓰면 비로서 보여주게 되는 일종의 능동적인 풀다운 메뉴였다 [1].

그림 5. 개인화된 풀다운 메뉴 [1]

그러나 이 기능이 성공적이었을까? 나는 이거 보자마자 왜 귀찮게 하냐 하면서 항상 전체 메뉴 보이기를 다시 설정하곤 했다. Jensen 또한 성공적이지 못한 디자인이었다고 자인하고 있다. Jensen이 지적하고 있는 이유 중 하나로 어떤 메뉴 항목을 '기본값'으로 보여줄지 정하기가 어렵다는 것을 꼽고 있다. 사람들 마다 자주 쓰는 메뉴가 상당히 다를 수 있기 때문이다 [1].

풀다운 메뉴는 대략 이런 식으로 발전해왔고 이제 소개할 도구모음(Toolbar, 이하 '툴바'로 씀)와 더불어 가장 대표적인 인터페이스 요소로 남아있다.

2. Toolbar

대부분의 프로그램은 자주 쓰는 기능을 모은 툴바를 가지고 있다.

그림 6. 15년 전의 MS Word의 툴바 [2] 와 지금의 아웃룩 2007의 툴바

툴바의 목적은 간단하다. 메뉴에서 원하는 기능을 찾기가 불편하니까 밖으로 꺼내어 바로 접근할 수 있도록 한 것이다. 그리고 이 툴바는 단순히 아이콘 나열에서 Command Bar라는 개념으로 진화한다. 그래서 풀다운 메뉴도 더 이상 다른 존재가 아닌 같은 커맨드 바의 범주 안으로 들어온다. 그리고 이 커맨드 바에는 아주 막강한 개인화 (customization) 기능을 도입하였다. 처음 이 기능을 보았을 때의 정말 대단하였다. 메뉴와 툴바의 거의 모든 항목을 사용자 마음대로 바꿀 수가 있었다. 그 외에도 처음에는 16색으로 제한적이었지만 이제는 32비트 anti-aliasing까지 지원되는 아주 풍부한 이미지까지 표현할 수 있다. 그 외에 프로그램의 폭이 줄어들었을 때 툴바의 내용을 어떻게 잘 축약할 것인가에 대한 문제도 대표적인 문젯거리였다.

그림 7. Microsoft Visual Studio 2005의 인터페이스 customization

(그러나 이 사용자 설정을 손쉽게 이동할 수 있는 기능은 VS 2005에서야 비로서 도입이 되었다. 그 전에는 레지스트리 및 각종 설정 파일을 번거롭게 백업해야만 했다.)

이렇게 풀다운 메뉴와 툴바는 사용자 인터페이스의 근간을 이루며 10년 넘는 세월 동안 진화를 해왔다. 그러나 기능은 여전히 많이 늘어나고 사용자는 점점 복잡한 메뉴 속에서 길을 잃고 만다. 그리고 보다 현실적인 마케팅 적인 이유도 있었다. 오피스 버전이 높아져도 더 이상 눈에 확 띄는 인터페이스가 없다 보니 사람들은 무엇이 바뀌었냐고 반문하기 십상이었다. 그래서 오피스 2007에서는 프로그램은 메뉴와 툴바가 있다라는 고정 관념을 완전히 탈피한 새로운 시도를 하게 되었고 그것이 리본 인터페이스로 나온 것이다.

그런데, 윈도우 XP 시절에도 몇몇 UI에서는 이미 전통적인 툴바와 메뉴의 구성에서 탈피하려는 시도를 엿볼 수 있었다. 대표적으로 사용자 설정 화면을 들 수 있다.

그림 8. Windows XP의 사용자 설정 화면

이 화면은 꽤나 익숙한 화면인데 나는 이 화면을 보고 처음에 많은 충격(?)을 받았다. 전통적인 윈도우의 디자인과 너무나 달랐기 때문이다.

그림 9. Windows 2000의 사용자 설정 화면, 초보자에게는 어렵다.

특히나 윈도우 프로그래머의 시각으로서는 상당히 이질적인 프로그램 디자인이었다. 마치 웹 페이지를 연상케 하는 디자인이 바로 핵심이었다. 윈도우 비스타에서는 이런 시도가 더욱 많이 보인다. 가장 대표적으로 윈도우 탐색기는 기본적으로 풀다운 메뉴를 보여주지 않는다 (Alt를 눌러야만 뜬다). 그리고 Internet Explorer 7의 디자인과 동일하게 디자인을 하여 일반 사용자에게 매우 익숙한 웹 브라우저의 인터페이스를 제공하고 있다.

그림 10. Windows Vista

그림 11. 그림 10의 내용은 XP에서 이렇게 표현이 되었다.

물론 모든 복잡한 대화상자 등도 웹 페이지 형식으로 바뀐 것이 아니다. 그러나 최초로 보여주는 인터페이스가 기존에는 지극히 프로그래머 관점에서 만들어졌다면 이제는 보다 익숙한 웹 페이지 형식으로 꺼내놓는 것이다. 그리고 여기서 간단한 일은 끝낼 수 있도록 하고 복잡한 과정은 뒤로 숨겨놓는 것이다.

지금까지 쓴 내용 모두, 점점 복잡해지는 프로그램을 어떻게 하면 간단하게 사용자에게 보여줄 것인가를 고민한 결과이다. 리본 인터페이스도 이러한 노력으로 나온 것이다. 그러기 위해서는 먼저 사용자가 어떠한 기능을 많이 사용하는지 데이터를 수집해야 한다. 아마 오피스나 MSN 메신저를 깔아보았으면 무언가 귀찮게 묻는 것이 있었을 것이다. 이른바, 사용자 경험 향상 프로그램 (Customer Experience Improvement Program)이라는 기능인데, 사용자가 프로그램을 어떻게 쓰는지 모두 모아서 보고하는 기능이다 (물론 어떠한 내용을 입력하는지는 당연히 수집하지 않는다). 그래서 이 결과를 바탕으로 리본 인터페이스를 어떻게 디자인을 할지 결정할 수가 있었다. 이런 예는 비스타의 제어판에서도 볼 수 있다. (한글 비스타가 아니라 부득이하게 영어로)

그림 12. 비스타 제어판의 사용자 경험 향상 프로그램
내용: "제어판 검색 결과 향상을 위해 도움을 주시겠습니까?

비스타에서는 XP처럼 복잡하게 제어판의 기능을 눈으로 찾을 필요가 없이 간단하게 검색으로 찾을 수 있다. 물론 이 기능은 맥의 Spotlight에서 차용한 것인데, 제어판에도 접목시킨 것이다. 그래서 사용자들이 어떠한 패턴으로 검색을 하는지에 대한 정보를 수집하여 보다 나은 검색 결과를 개선하려는 노력이다. 많은 분들은 귀찮고 혹시나 모를 정보 보안으로 기능을 끄겠지만 전체 사용자의 0.1%만 도와줘도 유의미한 데이터를 얻기에 전혀 문제가 없을 것이다.

그림 1에서도 보듯이 리본 인터페이스는 툴바와 메뉴를 완전히 없애고 자주 쓰는 기능을 잘 모아놓고 큰 아이콘으로 눈에 잘 띄게 한 것이 특징이다. 여기서 어떠한 기능을 이 리본에서 보여줄 것인가를 결정해야 하는데 상당히 어려운 문제일 것이다. 왜냐면 크기는 제한적이고 보여줘야 할 기능은 훨씬 많기에 적절한 선택이 무엇보다 중요하다. 여기서 리본 인터페이스 개발 과정 중 실수를 읽을 수 있었다 [3]. 일단 워드 사용자들이 가장 많이 사용하는 기능 5개는 다음과 같다:

1. 붙여넣기 (Paste): 11%, 2위인 저장하기보다 두 배나 많은 비율
   
2. 저장하기 (Save)
   
3. 복사하기 (Copy)
   
4. 작업취소하기 (Undo)
   
5. 굵은 글씨체로 (Bold)
   

그리고 이 5개 기능은 전체 사용자가 사용한 기능 중 32%를 차지하였다. 나는 의외로 붙여넣기가 너무 많은 것 아닌가 싶지만 모두 다 빈번히 사용될 명령에는 틀림이 없다. 그러나 붙여넣기와 복사하기 등은 대부분의 사람들이 Ctrl+X/C/V와 아니면 우클릭을 하면 뜨는 컨텍스트 메뉴 (context menu)로 할 것이라고 그만 판단을 하였다 (여전히 이것은 사실이다). 그래서 리본 인터페이스에서 이들 클립보드 관련 기능 버튼을 제대로 넣지 않았다고 한다. 그러나 여전히 많은 사람들은 붙여넣기를 하기 위해 툴바의 버튼을 클릭을 하고 있었다. 그리고 이 붙여넣기 툴바 버튼은 다른 어떠한 버튼보다 많이 눌려지고 있었다! 그래서 Paste 버튼을 리본의 맨 앞으로 내놓은 것이었다. 워드뿐만 아니라 엑셀, 파워포인트 2007 버전 모두 Paste 버튼이 리본 인터페이스의 첫 자리에 위치해있다. 아무리 버튼 누르는 것보다 더 효율적인 단축키가 있어도 여전히 많은 사람들은 마우스를 이용해서 버튼을 누르고 있다는 사실을 충실히 반영한 결과이다.

그림 13. Paste 버튼은 정말 중요하다.

정작 글 제목에 해당하는 내용이 뒤에 겨우 나왔다. 본의 아니게 낚시를…

윈도우 프로그래밍을 예전부터 한 사람이라면 지금까지 변화해온 인터페이스의 변화를 특별히 더 느낄 수 있었을 것이다. 윈도우 버전이 바뀌면서 새롭게 추가된 인터페이스 요소라던가 항상 오피스와 Visual Studio는 새로운 인터페이스를 소개해서 많은 프로그래머들의 호기심을 자아내기도 하였다. 그래서 오피스와 비주얼 스튜디오의 인터페이스를 흉내 내는 프로그램 라이브러리가 인기를 끌기도 하였고 실제 많은 회사에서 이들 제품을 가지고 개발을 한다. 그 만큼 오피스나 비주얼 스튜디오의 인터페이스에 훌륭한 요소가 많기 때문이다. 그리고 오피스 2007에 도입된 리본 인터페이스는 로열티 없이 사용이 가능하다. 참고 링크 (영문).

참고자료:
[1] Combating the Perception of Bloat (Why the UI, Part 3): 링크
[2] Ye Olde Museum Of Office Past (Why the UI, Part 2): 링크
[3] No Distaste for Paste (Why the UI, Part 7): 링크