Global header
Global header (글로벌 헤더)
사용자는 글로벌 헤더에 의존해 UI에서 탐색하고 방향을 잡아요. 이 패턴은 글로벌 헤더를 일관되고, 친숙하며, 사용 가능하게 만드는 몇 가지 특성을 개요로 설명합니다.
출처: Global header
본문
개요 (Overview)
글로벌 헤더는 제품 UI의 필수 요소예요. 현재 제품뿐만 아니라 전체 시스템을 위한 기능을 담는 일관하게 사용 가능한 사용자 인터페이스 요소입니다. macOS 메뉴 바와 Windows 시작 바처럼, 글로벌 헤더는 제품의 로컬 내비게이션을 호출하는 일관된 위치와 시스템 설정, 알림, 제품 간 이동 같은 시스템 차원 기능에 대한 광범위한 접근을 제공합니다.
이 패턴은 제품 내·제품 간 내비게이션에 UI Shell 컴포넌트를 사용하는 기반을 다루고, 제품에서 일관성을 달성하는 기법을 소개합니다.
글로벌 헤더의 구조 (Anatomy of a global header)
- 메인 메뉴(Main menu): 메인 메뉴 아이콘은 왼쪽 패널 같은 제품 내비게이션을 여는 데 사용됩니다.
- 헤더 이름(Header name): IBM 제품의 경우 헤더 이름 앞에는 항상 "IBM"이 옵니다. 이것은 항상 그리고 오직 사용자를 도메인의 홈 페이지로 연결해야 합니다.
- 헤더 링크(Header links): 헤더의 링크는 필요하면 제품 내비게이션으로 지원됩니다. 이 링크는 새 탭을 열거나 다른 도메인으로 연결해서는 안 됩니다. 이 링크는 좁은 화면 너비에서 사이드 메뉴로 드롭다운됩니다.
- 서브 메뉴(Sub-menu): 서브 메뉴는 필요하면 제품 내비게이션으로 지원됩니다. 드롭다운은 클릭 시 열리고 메뉴에서 항목 선택, 메뉴 영역 밖 클릭, 메뉴 라벨 클릭 중 하나로 닫힙니다. 열리면 쉐브론이 위를 가리켜야 해요. 드롭다운 메뉴 라벨은 드롭다운을 여는 역할만 하며, 제품의 다른 페이지로 가는 링크일 수 없습니다.
- 유틸리티(Utilities): 헤더는 사이트 어디에서든 글로벌 시스템 수준 유틸리티를 위한 홈을 제공합니다. 유틸리티 아이콘은 영역으로 직접 탐색하는 데 사용해서는 안 됩니다. 대신 제품의 다른 곳에 접근을 제공하는 패널을 열어야 합니다.
- 스위처(Switcher): 스위처는 사용자가 제품과 시스템 사이를 쉽게 탐색할 수 있는 방법을 제공합니다. 이 컴포넌트에 권장되는 사용에는 최근 사용 앱, 자주 사용 앱, 또는 사용자 계정에 연결된 모든 앱이 있습니다. 리스트가 관리 가능한 크기라면 시스템에서 사용 가능한 모든 앱이나 제품을 포함하세요.
헤더와 패널 지속성 (Header and panel persistence)
글로벌(global)과 로컬(local)은 UI에서 헤더 요소의 위치와 지속성을 말합니다.
| Persistence | Definition |
|---|---|
| Global | 글로벌 UI 요소는 UI 어디에나 존재해요. 탐색, 인증, 알림 등 사용자가 언제든 필요할 수 있는 시스템과 제품 항목을 담습니다. 글로벌 요소는 한 맥락에서 다른 맥락으로 일관되게 유지됩니다. |
| Local | 로컬 내비게이션은 제품의 맥락 안에 존재하며 제품 수준의 과제를 수행하는 수단을 제공합니다. 따라서 로컬 요소는 제품마다 다릅니다. |
과제 위계 (Task hierarchy)
과제 위계는 다양한 과제의 영향 범위를 설명해요. 이 가이드에서는 "product"라는 용어를 사용해 제품, 애플리케이션, 오퍼링, 웹 자산의 광범위한 범주를 포괄합니다.
| Task | Definition |
|---|---|
| System | 시스템 수준 과제에는 플랫폼의 주요 섹션으로 탐색하고 알림이나 설정 같은 시스템 유틸리티에 접근하는 것이 포함됩니다. 이 수준에서 사용자는 전체 시스템에 적용되는 속성을 관리할 수 있어요. |
| Product | 제품 수준 과제에는 제품 내 탐색과 제품의 핵심 기능 접근이 포함됩니다. 이 수준에서 사용자는 제품의 주요 기능과 직접 상호작용합니다. |
예시 (Examples)
이 행렬은 글로벌과 로컬로 나타나는 일반적인 시스템 및 제품 수준 과제를 보여줍니다.
| System tasks | Product tasks | |
|---|---|---|
| Global persistence | 로그인, 알림, 프로필 접근, 대시보드 링크, 시간 설정, 청구 정보, 사용자 권한, 한 제품에서 다른 제품으로 전환. | 햄버거 메뉴로 로컬 내비게이션 토글. 애플리케이션 내비게이션 보이기/숨기기, 문서 축소판. 제품 사이에서 공통인 로컬 동작의 일관된 배치(예: 새 파일, 저장, 취소) |
| Local persistence | 상세한 시스템 차원 설정(예: 사용자 권한 관리, 알림 기본 설정). | 텍스트 문서의 코멘트, 한 피어 리소스에서 다른 리소스로 탐색(예: 한 컨테이너, 데이터베이스, 문서에서 다른 것으로), 제품 내 모달리티 선택. |
구성 (Configurations)
UI 셸은 제품이나 플랫폼이 어떤 셸 컴포넌트와 구성이 사용자와 정보 요구사항에 맞는지 선택할 수 있도록 구성 가능해요. 단순한 제품은 헤더나 사이드 패널만 사용하는 유연성이 있고, 더 복잡한 제품은 내비게이션의 깊이를 수용하기 위해 UI 셸 컴포넌트의 조합이 필요합니다.
헤더만 (Header only)
UI 셸 헤더는 소수의 주요 섹션이 보조 내비게이션을 요구하지 않을 때 UI의 독립형 내비게이션으로 사용될 수 있어요. 헤더는 사이트 제목, 내비게이션 링크와 드롭다운, 헤더 아이콘을 위한 자리를 제공합니다. 헤더는 전역적으로 지속되며 사용자가 사이트를 탐색할 때 항상 뷰에 있습니다.
이 구성은 페이지 콘텐츠를 위한 더 많은 가로 공간을 제공하지만, 헤더의 내비게이션 항목 공간은 제한적이에요. 이 구성은 열린 채 유지되어야 하는 서브 메뉴에도 적합하지 않습니다. 페이지 콘텐츠를 덮고 방해할 것이기 때문이에요. 내비게이션에 열린 채 유지되는 서브 메뉴가 필요하다면 헤더와 함께 왼쪽 패널을 사용하세요.
헤더와 왼쪽 패널 (Header with left panel)
왼쪽 패널은 더 많은 내비게이션 항목을 세로로 쌓을 수 있고, 헤더 내비게이션과 짝을 이룰 때 한 수준 더 많은 위계를 제공해요. 헤더 전용 사이트 내비게이션과 비교해 이 배열은 페이지 콘텐츠를 덮거나 방해하지 않고 서브 메뉴가 열린 채 유지될 수 있게 합니다.
내비게이션 (Navigation)
글로벌 (Global)
글로벌 내비게이션은 UI에 항상 존재해요. 이 예시에서 UI 셸 헤더는 헤더에 두 개의 시스템 수준 링크(A)와 스위처에 다섯 개의 시스템 수준 링크를 가진 글로벌 내비게이션으로 사용됩니다.
이 예시의 글로벌 헤더는 시스템 내비게이션 요소만 포함합니다.
아래 예시에서 UI 셸 헤더는 글로벌 영역에 시스템(A)과 제품(B) 링크를 모두 포함합니다. 시스템 수준 링크는 헤더에서 오른쪽 정렬되어야 하고 제품 수준 링크는 왼쪽 정렬되어야 해요. 좁은 화면에서 헤더 링크를 위한 공간이 없을 때 시스템(A) 링크는 오른쪽 UI 셸 패널로, 제품(B) 링크는 왼쪽 UI 셸 패널로 이동합니다.
로컬 (Local)
로컬 내비게이션은 사용자를 제품의 영역 사이로 데려가요. 일반적으로 이 영역들은 사용자가 영역을 바꾸지 않고 종단 간 워크플로우를 수행할 수 있도록 그룹화되어야 하는 페이지 모음입니다.
관련 제품은 내비게이션 구조를 공유해야 합니다. 플랫폼 전반에 걸쳐 비슷한 구조를 따르면 전환 변동성(transitional volatility)을 최소화합니다. 사용자가 방향을 잡는 데 쓰는 시간이 줄어들기 때문이에요. 이는 사용자가 화면과 상태 사이를 이동할 때 생산성과 플랫폼의 반응성 인식을 높이는 데 도움이 됩니다.
모범 사례 (Best practices)
지속적인 데이터와 UI 상태 (Persistent data and UI state)
UI 셸은 UI에서 서로 다른 오퍼링 사이를 쉽게 전환하게 해줘요. 페이지의 상태를 유지하거나 복원하는 것은 사용자가 맥락이나 진행 상황을 잃지 않고 다른 영역 사이를 전환해 과제를 완료하도록 도와줍니다. 상태나 진행이 손실될 것이라면 이 결과를 사용자에게 알려주세요. 이러한 상태와 필터를 유지하면 사용자가 드릴다운 수준이나 환영 화면을 거쳤다면 그들이 있던 곳으로 다시 데려가 줍니다.
이 상태를 유지하는 한 기법은 셸의 메뉴 항목을 사용해 필수 상태 요소를 URL에 추적하고, 사용자가 돌아왔을 때 자동으로 그 URL로 되돌리는 것입니다. 이 기능은 UI 셸 컴포넌트의 일부가 아니며 구현 중에 추가되어야 합니다.
장소감 (Sense of place)
글로벌 헤더의 역할은 사용자를 UI의 다른 영역에 연결하는 것 이상이에요. 글로벌 특성은 헤더를 사용자가 방향을 잡아야 할 때 자연스럽게 참조하는 이상적인 위치로 만듭니다.
이 장소감은 위치뿐 아니라 상태에도 적용됩니다. 헤더는 사용자의 로그인 상태, 사용 중인 계정, 또는 다른 모드에 들어갔는지 여부를 나타내는 데 사용될 수 있어요.
드릴다운 수준과 브레드크럼 (Drill down levels and breadcrumbs)
브레드크럼은 사용자가 애플리케이션의 위계에서 자신이 어디에 있는지 볼 수 있게 하고 위로 탐색하는 방법을 줍니다.
많은 경우 사용자는 새 맥락으로 드릴업(drill up)해야 해요. 예를 들어 개요 페이지에서 특정 프로젝트, 장치, 에셋 뷰로요. 드릴다운은 애플리케이션의 어떤 인터랙티브 요소에서도 트리거될 수 있고, 일반적으로 선택된 객체에만 집중된 새 페이지를 엽니다. 이 새 페이지는 제목 위에 루트 수준으로 돌아가는 경로의 브레드크럼을 포함합니다.
구성 체계 (Organizational schemes)
제품 UI를 계획할 때는 비즈니스나 기술적 제약보다 사용자가 완료해야 할 과제에 중점을 두세요. 사용자가 제품에 대한 새 정신 모델을 배우도록 강요하면 생산성까지의 시간이 늘어나고 제품과 플랫폼 사이에 단절된 경험을 만듭니다.
UI의 다른 부분에서 콘텐츠를 구성하기 위해 다른 체계가 필요할 수 있어요. 사용자의 목표에 맞는 논리적 그룹을 만들고 콘텐츠 접근을 개선하세요.
최근 (Most recent)
최근 순으로 내비게이션을 정렬하면 자주 마지막으로 사용한 객체를 찾는 사용자에게 도움이 되고, 과거 맥락이 발견에 도움을 줍니다. 이것은 논리적 그룹화를 잃으며 기본 방식보다는 대체 정리 방식으로 적합할 수 있어요.
사용자 정의 (Customized)
사용자 정의 내비게이션은 사용자가 자신의 필요에 맞게 UI를 개인화하게 해줍니다.
대상 고객 (Audience)
대상 고객별로 콘텐츠를 구성하는 것은 그 페르소나에 연결된 역할이나 권한을 고려해요. 이는 그 페르소나와 관련된 더 일반적인 과제를 강조할 수 있지만, 과제가 페르소나와 겹치거나 사용자가 가끔 역할 사이를 전환하면 발견성을 낮출 수도 있습니다.
알파벳순 (Alphabetically)
내비게이션을 알파벳순으로 정리하는 것은 사용자가 찾는 것이 무엇이고 항목이 어떻게 라벨링되었는지 안다면 성공적이에요. 알파벳순 내비게이션은 사용자가 항목의 동의어를 찾을 때(예: "pop-up, modal, lightbox, dialogue") 발견성을 낮춥니다.
회사 조직 (Company organization)
당신의 내비게이션은 여러 애플리케이션, 리소스, 플랫폼이 함께 작동하는 것으로 구성될 수 있어요. 내비게이션은 조직도나 일련의 회사·기술 인수보다 적절한 도메인 모델을 반영해야 합니다.
무제한 콘텐츠 (Unbound content)
셸의 사이드 내비게이션에 무제한 콘텐츠를 배치하지 마세요. 셸 안의 항목 수가 너무 많아지면 사용성이 떨어지기 때문입니다. 이런 이유로 사용자가 만든 콘텐츠처럼 상한이 없는 콘텐츠를 셸의 사이드 내비게이션에 배치하지 마세요. 대신 드릴다운 패턴을 활용하세요.
접근성 (Accessibility)
소스 코드 순서를 시각적 위계와 일치시키기 (Matching source code order to the visual hierarchy)
WCAG 2.1에 명시된 기법 C27은 UI 객체의 시각적 순서를 DOM(Document Object Model)에 나타나는 순서와 일치시킬 것을 권장합니다. 이 기법은 정보의 설계된 위계가 보조 기술에 의해 시각적으로도 동일하게 전달되도록 보장합니다.
이 기법은 내비게이션 메뉴의 구성이 프로비저닝이나 다른 마법사 스타일 패턴 같은 단계별 개념의 의미를 전달하는 데 사용될 때 필요합니다. 객체의 위치가 DOM 순서와 다르게 스타일링되면 그룹화와 순서의 의도된 의미가 잃을 수 있습니다.
어떤 경우에는 요소를 DOM 순서와 다른 시각적 순서로 나타나게 CSS로 스타일링하는 것이 유익할 수 있어요. 예를 들어 좁은 화면이나 모바일 화면 너비에서 내비게이션을 화면 상단에서 사용자 맥락에 더 적절한 다른 영역으로 이동하기로 선택할 수 있습니다.
- 좁은 너비에서 내비게이션 항목이 사이드 내비로 이동.
헤더로 콘텐츠 탐색하기 (Navigating content by headers)
스크린 리더 기술에 의존해 사이트의 영역을 탐색하는 사용자는 페이지의 콘텐츠를 탐색하는 데도 스크린 리더에 의존합니다. 사용자가 헤더의 더 크고 굵은 타입을 시각적으로 훑어볼 수 있는 것과 같은 방식으로, 보조 기술 사용자도 페이지 콘텐츠를 효율적으로 탐색하기 위해 페이지 콘텐츠의 위계를 이해해야 합니다.
모든 사용자가 콘텐츠의 구조를 같은 방식으로 해석하도록 보장하려면 헤딩의 시각적 표현이 헤더 태그의 밑바탕 순위와 일치해야 해요. 이를 달성하는 튜토리얼은 WCAG 페이지 구조 헤딩 튜토리얼에서 찾을 수 있습니다.
키보드 탐색 (Keyboard navigation)
메인 콘텐츠로 건너뛰기 (Skip to main content)
일부 사용자는 사이트를 탐색하기 위해 키보드를 사용할 수 있어요. 메인 내비게이션에서 포커스를 시작하면 UI의 다른 영역으로 빠르게 탐색할 수 있지만, 먼저 탭해야 할 내비게이션 항목이 많으면 메인 콘텐츠에서 막을 수 있습니다.
성공 기준 2.4.1 (Bypass Blocks)은 내비게이션의 포커스 가능한 컨트롤 시작 부분에 "Skip to main" 링크를 제공해 이 블록을 우회할 것을 제안합니다. 이렇게 하면 사용자가 내비게이션 영역을 쉽게 건너뛰고 페이지의 메인 콘텐츠 영역과 상호작용을 시작할 수 있습니다.
"Skip to main content 링크"는 Carbon 웹사이트의 첫 번째 포커스 가능한 요소예요.
랜드마크 영역 (Landmark regions)
랜드마크 영역은 UI에서 비슷한 콘텐츠 영역을 그룹화하고 역할을 할당하는 방법이에요. 이 기법은 보조 기술로 탐색하는 사용자가 개별 요소 대신 UI의 랜드마크 영역 사이를 탐색해 사이트를 빠르게 돌아다닐 수 있게 합니다.
일반적인 랜드마크 영역의 예: navigation, main, form, banner, search. 여러 내비게이션 랜드마크 영역이 있다면 각각에 고유한 라벨을 주세요.
- Navigation 랜드마크
- Search 랜드마크
- Main 랜드마크
영역으로 페이지 탐색하기 (Navigating the page via regions)
랜드마크 영역 사이를 탐색하는 것은 내비게이션의 시각적 그룹화를 볼 수 없는 사용자를 도와줍니다. 이 그룹화는 콘텐츠 구조의 구성을 이해하고 UI에서 무엇을 할 수 있고 어디로 갈 수 있는지 명확히 하는 데 중요할 수 있어요.
관련 (Related)
- UI 셸 헤더 (UI shell header)
- UI 셸 왼쪽 패널 (UI shell left panel)
- UI 셸 오른쪽 패널 (UI shell right panel)
- 브레드크럼 (Breadcrumb)
참고 자료 (References)
- David R. Danielson, Transitional Volatility in Web Navigation (2003)
- Susan Farrell, Utility Navigation: What It Is and How to Design It (2015)
- IBM Design, Accessibility Handbook (2019)
- James Kalbach, Designing Web Navigation (2007)
- WebAIM, "Skip Navigation" Links (2013)
- Web Content Accessibility Guidelines (W3C, 2018)
더 알아보기 (Learn more)
글로벌 헤더는 사용자가 UI에서 방향을 잡고 탐색하는 데 의존하는 핵심 요소예요. 헤더만 또는 헤더와 왼쪽 패널이라는 구성으로 제품 복잡성에 맞게 셸을 조합하고, 시스템·제품 과제를 글로벌·로컬 지속성에 맞게 배치하세요. 내비게이션 구성은 사용자 목표에 맞는 논리적 체계를 고르고, 상태 유지와 브레드크럼·드릴다운으로 장소감을 제공하는 게 좋습니다.