모듈 탭(Module Tabs ) 패턴

웹페이지를 만들다보면 탭이 들어가 있는 페이지를 볼 수가 있습니다.
내비게이션 탭(Navigation Tabs)하고는 다른 형태로 하나의 웹 페이지 내에서 사용되는 탭을 의미합니다.

그러면, 언제 모듈 탭 패턴을 사용할까요? (Use When):

1. 컨텐츠들이 여러가지가 있으나 보여줄 공간이 한정되어 있을 때
2. 각각의 컨텐츠들을 동시에 보여줄 필요가 없을 때
3. 다른 페이지로의 이동없이 컨텐츠들을 이동하고 싶을 때
4. 2~10가지의 카테고리 타이틀을 가지고 있을 때
5. 카테고리 타이틀들이 상대적으로 짧고 예측가능할 때
6. 현재 어떤 화면이 보여지고 있는지에 대해서 전달하는게 중요할 때
   (It is important to communicate which content pane is currently being viewed)

그러면, 모듈 탭은 어떠한 기능들을 갖춰야할까요(Solution)?

1. 쌓여진 컨텐츠들을 통제할 수 있는 한줄로 표현된 링크들이 있어야 합니다.
   (카테고리 타이틀 링크들이 있어야 겠죠? ^^)
   
2. 하나의 컨텐트에 대해서 두 줄 이상의 탭을 쌓지 않습니다.
   (Navigation Tabs의 경우에는 두 줄 이상 쌓은 경우가 있죠. 아마존이 대표적이죠 ^^)
   
3. '|' 또는 '|'와 동일한 형태의 그래픽 이미지 등을 통하여 링크들을 분리해야 합니다.
   (카테고리 타이틀과 현재 선택된 컨텐트를 보여주는 부분은 강조가 되어야 무엇이 선택되었는지가 구분이 되겠죠)
   
4. 하나의 컨텐트에 대해서 하나의 탭만이 선택된 것처럼 보여져야 합니다.
   
5. 선택되어 있는 탭에 대해서 배경을 칠하여 강조를 합니다.
   
   
   
   (Yahoo! News의 경우 "Pointer"를 선택된 탭 아래에 두어서 강조를 하고 있습니다.)
   
6. 컨텐트들과 컨텐트와 관련된 탭은 시각적으로 연결되어지거나 박스 형태로 감싸진 형태로 보여져야 합니다.
   
   
   
   
7. 항상 한순간에는 한 컨텐트만 보여져야 합니다.

모듈 탭을 사용할 때 주의할 점은 어떠한 점이 있을까요?

1. 한탭에서 다른 탭으로 클릭할 경우 동일 위치선상에 탭들이 위치해야 합니다.
   
   
   
   
2. 새탭을 클릭할 때 전체 페이지를 다시 로딩해서는 안됩니다.
   
3. 탭을 선택한 결과가 다른 탭의 컨텐트에 영향을 줘서는 안됩니다.

탭의 원리(Rationale)는 다음과 같습니다.

1. 탭은 사용자들에게 문맥(또는 문장의 전후관계)을 제공합니다. 탭은 탭이 감싸고 있는 컨텐트들의 정보를 요약해서 대표함으로서 사용자가 어떠한 내용을 읽고 있는지에 대한 위치 정보를 제공해줍니다.
   
   
2. 탭은 실세상의 메타포로 만들어졌습니다. 특히 탭을 선택하는 모습의 경우는 탭이 달려있는 책이나, 노트를 선택했을 때 선택한 쪽이 맨 앞에 오는 물리적 현상의 메타포를 사용하고 있습니다.
   
   
   
   
3. 탭은 컨텐츠의 화면을 번갈아 볼 수 있는 내비게이션을 제공해줍니다.

사용자들이 탭(모듈 탭)을 편하게 사용하기 위한(Accesibility) 탭이 가져야할 특성은 다음과 같습니다.

1. 카테고리 탭을 이동하기 위해서 Tab 키를 사용하여 이동할 수 있어야 합니다.
   
2. Enter키를 이용해서 포커스가되어 있는 탭을 선택할 수 있어야 합니다.
   
3. 탭의 카테고리를 구성하고있는 element들의 title, alt속성에 선택되어 있음을 나타내는 'active'단어를 포함함으로서 활성화되어 있는 탭임을 비시각적인 방법으로도 보여줄 수 있어야 합니다.
   
   

출처 : Yahoo Design Pattern Library - Module Tabs
탭 이미지 출처 :  Denn님의 Tabs

* Yahoo의 Design Pattern Library를 번역한 글입니다. 오역이나 잘못된 부분 있으면 얘기해주세요.
** Tab에 대한 여러 얘기도 환영합니다. ^^