[노주환의 유저인터페이스] 탭 네비게이션(Tab Navigation)의 비밀

원본소스 : http://korea.internet.com/channel/content.asp?kid=3&cid=207&nid=29288

저자: 노주환 |  날짜:2004년 05월 10일

 

탭 네비게이션(tab navigation)은 메타포(metaphor, 은유)가 어떻게 디자인에 적용되어야 하는지를 보여주는 대표적인 본보기이다. 탭이 네비게이션 디자인에 은유적으로 성공할 수 있었던 것은 항목의 구분과 찾기가 용이하다는 탭의 속성을 일상 생활에서 이미 경험했기 때문이다. 그러므로 탭 네비게이션을 디자인할 때는 항목의 구분과 찾기의 용이성을 반영하는 것이 중요하다. 이러한 탭의 장점 때문에 사이트의 구조가 어렵고 복잡할수록 디자이너는 탭 디자인을 사용하려고 노력했지만 탭이 주는 사무적 느낌 때문에 실패로 그치는 경우가 더 많았다.

찾기의 용이성	구분의 명확성

많은 웹사이트 중에서 탭 네비게이션의 대표적인 예는 애플(www.apple.com)과 아마존(www.amazon.com)일 것이다. 이 두 사이트의 탭 네비게이션을 디자인과 사용성에 기준하여 살펴보자(비즈니스 컨셉트는 고려하지 않기로 한다).

http://www.amazon.com

아마존(www.amazon.com)

• 10개의 카테고리는 그리 많은 것이 아니지만 탭 네비게이션 방식에서는 부담스러운 개수이다.
  
• 좁은 공간에서의 20자가 넘는 긴 레이블과 2단 형식의 레이블은 가독성을 급격히 저하시킨다.
  
• 서브메뉴가 메인 메뉴보다 더 크게 보이는 것은 디자인 오류로 볼 수 있다.
  
• 상단과 하단 탭의 크기(height)가 같기 때문에 정보의 계층을 제대로 표현하지 못했다.

http://www.apple.com

애플(www.apple.com)

로고와 'home' 기능을 겸한 버튼을 메인 네비게이션에 배치하여 헤더 영역(header)을 효율적으로 활용하였다.

• 탭의 개수가 많은 아마존 네비게이션은 헤더에 시각적 무게감(visual weight)이 가중되지만, 애플은 탭의 개수(6~8개가 적당)를 적절히 조절하였다.
  
• 레이블의 길이를 10자리 이하로 조절하여 탭을 같은 크기로 디자인하였다.
  
• 정보의 계층을 표현하기 위해 상, 하단의 탭 크기(height)를 다르게 하였다(상단>하단).

탭 방식은 수평 구조의 네비게이션이기 때문에 카테고리 개수와 레이블 길이가 중요한 기준이다. 카테고리가 수평으로만 배치되기 때문에 6~8개가 적정 수준이며 이보다 카테고리가 많을 경우에는 탭 방식은 적합하지 않다. 애플은 카테고리가 7개이며 아마존은 우측 끝의 메뉴까지 합하면 10개이다. 메인 카테고리가 10개라면 그리 많은 개수가 아니지만 탭 네비게이션의 개수로는 다소 부담스럽다. 왜냐하면 디자인의 상단에 많은 탭이 자리잡으면 디자인의 초점이 네비게이션에 과다집중되는 불균형이 생기기 때문이다.

다음은 레이블(label)을 살펴보자. 아마존의 레이블은 함축적이지 않기 때문에 사용자의 자의적 해석을 방지할 수 있다는 장점은 있지만, 이 때문에 레이블의 길이는 공백을 포함하여 26자리까지 늘어났으며(레이블링의 공백은 글자 수에 포함시킨다), 서브 메뉴의 글자 크기가 메인 메뉴보다 더 커지는 디자인 오류가 발견된다. 게다가 네비게이션의 가독성에 가장 큰 악영향을 끼치는 2단 레이블링 메뉴는 전체의 반 이상을 차지하고 있다.

이에 반해 애플은 다소 감성적인 면이 강하나 레이블 길이를 10글자 이하로 제한하여 가독성은 물론 시각적 여유로움까지 느끼게 한다. 레이블 길이는 균형있는 네비게이션을 만드는 바탕이다.

두 사이트 모두 2단계 서브 메뉴가 노출된 더블 탭 네비게이션(Double Tab Navigation) 방식을 사용하고 있음에도 아마존의 탭에서는 하위 레벨을 같은 색상을 사용하여 동일한 메뉴 계층이라는 사실을 알려주는 것 이외에는 탭 방식의 강점을 제대로 살리지 못하고 있다. 탭은 서류철이나 다이어리의 탭을 은유적으로 표현하여 사용자에게 친근하고 실용적으로 느끼게 하는 장점이 있다. 탭의 길이가 아마존처럼 레이블에 의해 들쭉날쭉하다면 메타포로서의 탭은 실패한 것이다. 왜냐하면 일상에서 접하는 탭은 일정한 크기를 가지고 있기 때문이다.

아마존의 서브 탭은 메인 탭과의 크기(height) 차이가 없어 서브 메뉴를 그룹핑하는 역할에 그치고 있지만 애플의 서브 탭은 메인 탭과의 크기(height)에 차이를 두어 계층 구조를 직관적으로 표현하였다. 애플의 탭 네비게이션 디자인에서 가장 눈여겨 보아야 할 것은 로고마저도 네비게이션으로 처리하여 페이지의 헤더(header)에는 아쿠아(Aqua) 탭만을 배치한 대목이다.

이러한 시도에 대해 섣부른 판단을 내리기 어렵지만 작은 헤더 공간을 효율적으로 이용하는 방법에 대해서는 분명히 배울 점이 있다.

결론적으로 아마존이 탭의 장점을 살리고자 한다면 레이블링 시스템부터 보완해야 하며, 만약 현재의 레이블링 시스템을 그대로 유지하려면 수평 구조보다는 수직 구조의 네비게이션으로 전환하는 것이 옳다. 물론 이것은 아마존이 탭 네비게이션으로 상징되는 아이덴티티(identity)를 과감히 포기했을 때에나 가능한 일일 것이다.