MS 오피스 2007의 메뉴와 툴바를 넘어선 새로운 UI, 리본

앞에서는 오피스 2007 새로운 UI 설계의 목표와 원칙 에 대해서 살펴 보았다. 이번에는 리본에 대해서 살펴 보겠다.

오피스 12를 처음 봤을 때 이전 버전에 비해 가장 바뀐 곳은 바로 윈도우 상단 부분에 위치한 메뉴 영역이다. 윈도우 표준은 윈도우 상단의 타이틀바 텍스트 아래에 메뉴가 있고, 그 아래에 툴바가 있다.

windows

오피스 12에는 앞서 살펴본 바와 같이 메뉴와 툴바의 스케일 문제를 해결하기 위해 1973년 제록스 알토 컴퓨터에서 처음 선 보인 후 약 20년 넘게 윈도우의 UI 표준으로 자리 잡고 있던 메뉴와 툴바를 없앴다.

그 자리에 대신 그림과 같이 명령어들을 노출했는데, 이 명령어 영역을 ‘리본’ 이라고 부른다. 리본은 오피스 12에서 메뉴와 툴바를 대체하는 UI 요소로 제품이 이떤 기능을 할 수 있는지를 볼 수 있는 유일한 곳이다. 따라서 오피스 12 에서는 필요한 기능을 찾기 위해서는 리본을 보면 된다.

오피스 2007 리본

MS워드 2007의 리본

리본은 사용 시나리오와 사용하는 대상들에 따라 조직화한 탭으로 구성되어 있고, 탭은 다시 탭안에 명령어들을 그루핑 하고 있는 청크와 컨트롤로 구성되어 있다.

리본의 구성

리본의 구성

리본 탭
리본의 탭은 크게 일반탭과 정황탭으로 나눌 수 있다. 일반탭은 사용자의 정황과 상관없이 항상 보이는 탭이고, 정황탭은 사용자가 작업하는 정황에 따라서 보였다가 사라지는 탭이다.

리본의 탭은 오피스 2003의 메뉴와 같이 파일, 편집, 보기, 삽입, 서식, 도구, 창, 도움말로 되어 있지 않고, 오피스 프로그램 마다 다르게 되어 있다. 이는 리본의 탭을 명령어 중심의 아니라 태스크 중심으로 UI를 설계해서 사용자가의 태스크 별로 리본의 탭을 배치한 것이다.


오피스 2003의 메뉴와 오피스 12의 리본 탭

청크
각 리본의 탭안에 명령어들이 그루핑 되어 있는 것을 볼 수 있는데, 이 명령어 집합의 코드네임이 청크이다. 툴바 UI에서는 명령어의 그룹을 명령어와 명령어 사이에 단순히 구분 기호라는 세로 막대로 구분했었다.

리본의 청크는 명령어를 그룹으로 묶고, 그 그룹의 레이블도 같이 표시해서 사용자가 필요한 명령어들을 빨리 찾을 수 있도록 되어 있다. 청크안의 명령어는 2D 레이아웃으로 되어 있어, 이전의 툴바나, 메인 메뉴와 비슷하고, 어떤 명령어는 다이어로그 박스, 작업창, 심지어는 웹 페이지 처럼 보이기도 한다.

컨트롤
청크안에는 버튼, 다이어로그 박스 컨텐트, 갤러리가 들어 있다. 다이어로그 박스 컨텐츠는 다이어로그 창에서 입력하는 항목을 리본에서 바로 할 수 있게 한 것이다.

리본내 컨트롤 종류
리본내의 컨트롤 종류

컨트롤은 오피스 사용자 참여 프로그램을 통해서 수집한 데이터를 분석해서 자주 사용하는 순서대로 배치했다. 워드의 기능 수는 약 1500개 인데, 실제로 사용자가 많이 사용하는 기능은 그리많지 않다.

오피스팀에서 사용자 참여 프로그램을 통해서 수집된 데이터를 분석할 결과, 워드 2003 에서 가장 사용 빈도수가 높은 명령어는 붙여넣기(Paste), 저장(Save), 복사(Copy), 입력취소(Undo), 굵게(Bold)의 순서였다. 게다가 이 다섯개의 명령어는 워드에서 전체 사용한 명령어 수 중 약 32%에 달했고, 붙여넣기(Paste) 하나는 전체 사용한 명령어 중 11%를 차지하고 있다.

붙여넣기(Paste)는 엑셀과 파워포인트에서도 가장 많이 사용하는 명령어로 각각 15%, 12% 가 사용되었다. 그래서 Write 탭에 첫번째가 붙여넣기가 큰 아이콘으로 되어 있고, 잘라내기, 복사, 서식복사가 첫번째 명령어 그룹으로 자리잡고 있다.

오피스 2007 레이블
레이블이 있는 아이콘의 예

버튼의 크기는 사용자들이 많이 사용하는 버튼은 크게, 그렇지 않은 것은 작게 되어 있다. 그리고 사용자가 예측 가능하도록 모든 명령어는 자리가 고정되어 있고, 사용자가 명령어를 찾기 쉽도록 리본안의 명령어들은 관련된 것끼리 그룹핑 되어 있다. 명령어 아이콘에는 레이블이 달려 있다.

마이크로소프트에서 몇 년간의 사용성 테스트를 통해 대부분의 사람들이 레이블이 없는 16×16 픽셀 크기의 아이콘을 클릭하지 않았다. 굵게나 기울림, 가운데 정렬과 같은 기능은 사용 빈도가 매우 높았지만, 8개 이상의 아이콘부터는 그 사용 빈도가 급격하게 떨어져서 버튼에 레이블을 붙였다고 한다.

많은 윈도우즈 프로그램들이나 웹 어플리케이션들이 아이콘만 두고 레이블을 표시하지 않아왔다. 이번 오피스 2007 에서보는 것과 같이 아이콘이 직관적이기는 하지만 어설픈 아이콘 보다는 레이블이 최고라는 것을 알 수 있다. 시각적인 디자인만 강조하지 말고 그냥 레이블을 몽땅 붙이자.


리본은 정식명칭이 아니라 개발 과정에서 부르고 있는 코드네임이다.
원래 리본이란 이름은 오피스 사용자 경험팀의 프로그램 관리자 리더인 존슨 해리스가 2003년 가을에 제안한 것으로, 명령어가 두루마리처럼 스크롤 되는 것다고 해서 이름을 붙인 것이다.

리본은 나비 넥타이를 맬 때 쓰는 가늘고 긴 천 같은 것을 가리키는 것으로, 명령어가 프린터 리본이나 두루마리처럼 계속 나오는 UI로 생각했었다고 한다. 그런데 처음 생각과 달리 탭 모양으로 결정이 되었지만 오피스 팀 내부적으로 계속 리본이라고 불러서 코드 네임이 리본으로 되었다고 한다.

윈도우 크기 변경시 똑똑하게 변하는 리본
윈도우의 크기를 바꿀 때 버튼의 모양이 매우 똑똑하게 변하는 것을 볼 수 있다. 윈도우의 크기를 점점 작게 할 때, 리본안은 최대한 사용자가 명령어를 인식할 수 있도록 배치나 간격이 변한다. 윈도우의 크기를 작게 만들 때 가장 먼저 변하는 것은 두 줄로 배치된 버튼들이 세 줄로 바뀐다. 윈도우를 더 작게 줄이면 리본안의 가장 왼쪽과 오른쪽에 스크롤 버튼이 생겨서 한 탭안의 다른 청크들을 스크롤할 수 있게 해 준다. 좌우측에 스크롤을 할 수 있는 버튼이 생기는데, 이 UI 가 처음에 리본이라고 이름을 붙인 UI 가 아닌가 싶다

두루마리 개념의 리본 UI

여기서 더 줄이면 탭간의 간격이 줄어들고, 탭 레이블의 우측 부분부터 감춰진다. 탭의 레이블이 일부분 감춰지게 되지만 레이블이 앞 글자들을 볼 수 가 있어서 탭을 선택하는데는 큰 문제가 없다. 청크안의 버튼들은 윈도우의 크기가 줄어들면 아이콘과 레이블된 버튼들이 청크별로 드롭다운 버튼형태로 바뀌게 된다.

윈도우 크기를 작게 했을 때 변화는 리본의 모양


여기서 윈도우의 크기를 더 줄이면 리본은 탭도 남지 않고 다 사라지게 된다.



리본에서 버튼의 아이콘이 커서 메뉴와 툴바가 있었을 때에 비해 편집 영역이 더 줄어들었다는 생각을 할 수 있다. 메뉴와 툴바의 높이와 리본의 높이를 픽셀로 측정한 것을 보면 리본의 높이는 이전 버전에서 툴바를 3개 열었을 때와 비슷한 것임을 알 수 있다.


오피스 2003 툴바와 오피스 12 리본의 높이 비교

편집 영역 높이 최대화
인터넷 익스플로러나 파이어폭스와 같은 웹 브라우저에서 웹 페이지를 더 보기 위해서 웹 페이지와 툴바만 두고 다 감추는 전체 화면 보기 기능이 있다. 오피스 2007에서는 인터넷 익스플로러의 전체 보기 기능과 같이 사용자가 작업하는 영역에 집중할 수 있도록 문서를 화면에 곽차게 할 수 있다. 현재 선택된 리본의 탭을 클릭하면 탭 아래 명령어 들이 감춰져서 그 만큼 편집 영역이 된다. 리본의 아무 탭이나 클릭하면 해당 탭 안의 명령어가 보이게 되고, 편집창의 높이는 이전과 같아진다.

편집 영역 크기의 최대화

이상과 같이 오피스 2007에서 획기적으로 변한 리본에 대해서 살펴 보았다. 다음에는 정황 중심의 UI 에 대해서 살펴 볼 것이다.

전체 목차는 오피스 2007의 새로운 사용자 인터페이스 에서 볼 수 있다.




0 글이 마음에 드시면 하트를 눌러주세요~ 블로거에게 힘이 됩니다 (SNS/로그인/광고 관련 없습니다)










이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받고 있습니다.