UI shell header
UI shell header (UI 셸 헤더)
이 헤더는 Carbon UI 셸의 일부예요. 셸(shell)은 플랫폼 안의 모든 제품이 공유하는 컴포넌트 모음입니다. 제품 사이에서 그리고 제품 전반에 걸쳐 지속되는 공통 인터랙션 패턴을 제공합니다.
출처: UI shell header
본문
개요 (Overview)
UI 셸 헤더는 사용자를 UI에 안내하고 방향을 잡아주는 기반이에요. UI 셸 헤더는 단독으로 사용하거나, 더 복잡한 UI 내비게이션을 위해 UI 셸 왼쪽·오른쪽 패널과 결합할 수 있습니다.
UI 셸은 세 가지 컴포넌트—헤더, 왼쪽 패널(left panel), 오른쪽 패널(right panel)—로 구성됩니다. 세 가지 모두 독립적으로 사용할 수 있지만, 함께 작동하도록 설계되었어요.
| 셸 UI 컴포넌트 (Shell UI component) | |
|---|---|
| Header | 가장 높은 수준의 내비게이션. 헤더는 단순한 제품에 단독으로 사용하거나 왼쪽·오른쪽 패널을 트리거하는 데 사용할 수 있음. |
| Left panel | 제품의 내비게이션에 사용되는 선택적 패널. |
| Right panel | 헤더의 시스템 아이콘과 연결된 추가 시스템 수준 액션 또는 콘텐츠를 보여주는 선택적 패널. |
언제 사용할까요 (When to use)
- UI를 이름으로 식별할 때.
- 내비게이션 링크와 유틸리티를 위한 전역적으로 지속되는 위치.
유형 (Types)
| 유형 (Type) | 용도 (Purpose) |
|---|---|
| Header base | 단일 페이지 UI를 식별하는 데 사용할 수 있는 지속적인 사이트 제목을 가짐. |
| Header with navigation | 간단한 내비게이션을 위한 링크와 드롭다운을 포함. |
| Header with actions | 아이콘 버튼으로 헤더에 나타나는 액션·유틸리티로, 사용자가 공통 유틸리티에 빠르게 접근하게 함. |
| Header with sidenav | 헤더를 UI 셸 왼쪽 패널과 함께 사용해 UI에서 더 깊은 수준의 내비게이션을 제공함. |
포맷 (Formatting)
구조 (Anatomy)
헤더는 뷰포트의 전체 너비에 걸쳐 있으며 브라우저 창에서 가장 위에 있는 요소예요. 헤더는 제품 경험 전반에 걸쳐 지속됩니다.
각 UI 셸 컴포넌트에서 왼쪽에서 오른쪽으로 가는 것은 제품 수준에서 전역 수준으로 이동하는 것을 의미해요. 헤더의 왼쪽에는 제품 수준과 관련된 항목이 있습니다. 헤더를 따라 오른쪽으로 이동할수록 기능이 더 전역화됩니다. 헤더 중앙의 요소는 시스템 수준 컨트롤을 나타내야 해요. 스위처(switcher) 같은 헤더 오른쪽의 요소는 그 범위가 가장 전역적이며 여러 제품에 걸쳐 있습니다.
- 햄버거 메뉴(Hamburger menu): 햄버거 아이콘은 왼쪽 패널 같은 제품 내비게이션을 여는 데 사용돼요. 햄버거 메뉴는 접을 수 있는 왼쪽 내비게이션이 있을 때만 필요합니다.
- 헤더 이름(Header name): IBM 제품의 경우 헤더 이름은 항상 "IBM."이 앞에 붙습니다.
- 헤더 링크(Header links): 필요하면 헤더의 링크가 제품 내비게이션으로 지원됩니다. 좁은 화면 너비에서는 이 링크들이 사이드 메뉴로 이동해요.
- 하위 메뉴(Sub-menu): 필요하면 하위 메뉴가 제품 내비게이션으로 지원됩니다. 링크 라벨 뒤에 아래를 가리키는 쉐브론을 포함하세요. 하위 메뉴는 클릭으로 열리며, 메뉴의 항목을 선택하거나 메뉴 영역 밖을 클릭하거나 메뉴 라벨을 클릭해 닫힙니다. 열렸을 때 쉐브론은 위를 가리켜야 해요. 하위 메뉴 라벨은 드롭다운을 여는 역할만 하며 제품의 다른 페이지로 링크할 수 없습니다.
- 헤더 유틸리티(Header utilities): 프로필, 검색, 알림 및 유사한 기능 같은 보편적·시스템 수준 기능을 위해 예약됩니다. 시스템의 모든 제품이 같은 유틸리티를 반드시 보여줄 필요는 없지만, 더 나은 제품 간 사용자 경험을 위해 권장됩니다.
- 스위처(Switcher): 스위처는 사용자가 제품과 시스템 사이를 쉽게 이동할 수 있는 방법을 제공해요. 이 컴포넌트의 권장 용도는 최근 사용한 앱, 자주 사용하는 앱, 또는 사용자 계정에 연결된 모든 앱입니다. 목록이 관리 가능한 크기라면 시스템에서 사용 가능한 모든 앱이나 제품을 포함하세요.
배치 (Placement)
아이콘은 헤더의 필수 요소가 아니며 제품은 UI에 어떤 아이콘 세트든 사용할 수 있습니다. 아이콘은 항상 헤더 오른쪽에 아이콘 사이에 간격 없이 정렬되어야 해요.
헤더 유틸리티는 간격 없이 오른쪽 정렬됩니다.
계정과 help 아이콘 사이에 간격이 있는 헤더 유틸리티.
예시 배치 (Example placement)
아래 예시는 스위처, 일반적인 플랫폼 유틸리티 아이콘, 검색이 있는 헤더를 보여줘요.
| 아이콘 (Icon) | 배치 (Placement) |
|---|---|
| 1. Search | 검색은 항상 가장 왼쪽의 아이콘으로 배치되어야 함. 다른 아이콘의 위치를 방해하지 않는 확장 검색 필드를 허용하기 위해서. |
| 2. Other | 제품이 사용하는 헤더 아이콘 수는 다양할 수 있음. 이 배치는 사용자가 다른 제품 셸 헤더 사이를 탐색할 때 핵심 아이콘의 위치와 불일치를 방해하지 않도록 도와줌. |
| 3. Help | Help는 오른쪽에서 4번째에 배치됨. |
| 4. Notifications | 알림은 계정과 스위처 아이콘과 함께할 때 오른쪽에서 3번째여야 함. |
| 5. Account | 계정은 오른쪽에서 2번째여야 함. 이 전역 링크는 사용자가 제품 UI 어디에서나 자신의 계정에 빠르게 접근할 수 있게 해줌. |
| 6. Switcher | 스위처는 항상 가장 오른쪽의 아이콘으로 배치되어야 함. 이렇게 하면 시스템 전반을 탐색할 때 아이콘이 이동하지 않도록 보장함. |
콘텐츠 (Content)
주요 요소 (Main Elements)
헤더 이름 (Header name)
헤더 이름은 상위 도메인의 이름이어야 하며, 사용자에게 자리 감각을 주면서 가능한 한 간결해야 해요. IBM 제품의 경우 헤더 이름은 항상 "IBM"이 앞에 붙습니다.
헤더 링크 (Header links)
헤더 링크는 고유해야 하며 연결될 콘텐츠와 위치를 명확히 설명해야 해요. 헤더 링크를 클릭하면 액션이 취해질 것처럼 암시할 수 있는 동사를 헤더 링크로 사용하는 것을 피하세요.
동작 (Behaviors)
인터랙션 (Interactions)
마우스 (Mouse)
헤더 요소의 대상 영역은 헤더의 전체 높이에 걸쳐 있어요. 다양한 상태에 대한 자세한 시각적 정보는 Style 탭을 참고하세요.
키보드 (Keyboard)
일부 사용자는 키보드로 사이트를 탐색할 수 있어요. 기본 내비게이션에서 포커스를 시작하면 사용자가 UI의 다른 영역으로 빠르게 이동할 수 있지만, 먼저 탭해야 할 내비게이션 항목이 많다면 기본 콘텐츠에서 차단될 수 있습니다.
성공 기준 2.4.1 (우회 블록, Bypass Blocks)은 내비게이션의 포커스 가능한 컨트롤 시작 부분에 "Skip to main" 링크를 제공해 이 블록을 우회할 것을 제안합니다. 이렇게 하면 사용자가 쉽게 내비게이션 영역을 건너뛰고 페이지의 메인 콘텐츠 영역과 상호작용을 시작할 수 있어요.
Carbon 웹사이트에서 "Skip to main content link"는 첫 번째 포커스 가능한 요소입니다.
스크린 리더 (Screen readers)
VoiceOver: 헤더 영역에 화면 판독기 포커스가 있는 동안 Control-Option-Space 또는 Space를 눌러 상태 변경을 트리거할 수 있어요.
JAWS: 헤더 영역에 화면 판독기 포커스가 있는 동안 Enter 또는 Space를 눌러 상태 변경을 트리거할 수 있어요.
NVDA: 헤더 영역에 화면 판독기 포커스가 있는 동안 Enter 또는 Space를 눌러 상태 변경을 트리거할 수 있어요.
반응형 동작 (Responsive behavior)
헤더가 더 작은 화면 크기에 맞춰 축소됨에 따라 헤더 링크와 메뉴는 왼쪽 패널 햄버거 메뉴로 접혀들어야 해요. 아래 예시를 보면 헤더의 반응형 동작을 더 잘 이해할 수 있습니다.
UI에 왼쪽 패널이 있다면, 헤더 링크는 왼쪽 패널 항목 위에 추가되어 항목을 아래로 밀어야 해요.
관련 컴포넌트 (Related)
다음 컴포넌트는 데이터를 정리하고 탐색하는 추가적인 방법이에요.
- UI Shell left panel
- UI shell right panel
참고 자료 (References)
- Susan Farrell, Utility Navigation: What It Is and How to Design It (Nielsen Norman Group, 2015)
- WebAIM, "Skip Navigation" Links (2013)
- Web Content Accessibility Guidelines (W3C, 2018)
더 알아보기 (Learn more)
UI 셸 헤더는 사용자가 UI를 탐색·이해하는 기반으로, 제품 이름 식별과 전역 유틸리티를 위한 지속적인 위치를 제공해요. 왼쪽 패널·오른쪽 패널과 결합해 복잡한 내비게이션을 구성하고, 아이콘 배치 규칙(스위처 최우측)을 따르며, 작은 화면에서는 링크를 햄버거 메뉴로 접어야 합니다.