coastdigitalgroup/coastai-skills

사이드바 내비게이션 시스템

목적

사이드바 내비게이션 시스템은 지속적인 수직 내비게이션 구조를 설계하기 위한 방법론을 제공합니다. 수평 헤더와 달리 사이드바는 높은 정보 밀도의 아키텍처에 최적화되어 있으며, 깊은 중첩, 보조 유틸리티 액션, 작업 공간 전환을 지원합니다. 이 시스템은 사용자가 복잡한 애플리케이션을 최소한의 인지 부하로 탐색하면서 계층적 환경 내에서 자신의 현재 위치를 명확히 인지할 수 있도록 합니다.

사용 사례

• SaaS 대시보드: 여러 작업 공간, 도구, 데이터 뷰를 관리합니다.
• 관리 패널: 광범위한 관리 기능 및 시스템 설정을 구성합니다.
• 문서 사이트: 기사, 섹션, API 참조의 깊은 계층 구조를 탐색합니다.
• 내부 도구: 복잡한 워크플로와 데이터 입력 모듈을 구조화합니다.
• 콘텐츠 관리 시스템(CMS): 페이지 편집, 미디어 라이브러리, 사용자 권한 간에 전환합니다.

사용하지 말아야 할 경우

• 마케팅 랜딩 페이지: 전환 중심 내비게이션에는 간단한 수평 헤더가 더 적합합니다.
• 간단한 블로그 사이트: 이동 경로와 최상위 링크가 충분한 경로 찾기를 제공합니다.
• 모바일 우선 소비자 앱: 기본 엄지 영역 상호작용에는 하단 탭 바가 더 적합합니다.
• 몰입형 내러티브 사이트: 지속적인 UI 요소가 스토리텔링 경험을 방해할 수 있습니다.

입력

1. 정보 아키텍처(IA): 기능적 관계에 따라 그룹화된 모든 페이지와 도구의 맵입니다.
2. 사용자 컨텍스트: 다양한 사용자 역할과 그들이 수행하는 주요 작업을 식별합니다.
3. 작업 공간 레벨: 앱이 다른 계정이나 프로젝트 간 전환을 필요로 하는지 결정합니다.
4. 브랜드 스타일 토큰: 기존 디자인 시스템의 색상, 타이포그래피, 간격입니다.
5. 대화형 컴포넌트 인벤토리: 표준화된 아이콘, 배지(알림용), 버튼입니다.

출력

1. 사이드바 해부학 명세: 정의된 영역(브랜딩, 작업 공간 전환기, 기본 내비게이션, 보조 내비게이션, 사용자 푸터)입니다.
2. 상호작용 매트릭스: 호버, 포커스, 활성 상태 및 중첩(확장/축소)에 대한 동작입니다.
3. 반응형 매핑: 사이드바가 변환되는 규칙입니다(예: 고정 -> 축소된 레일 -> 모바일 서랍).
4. 상태 명세: 다양한 내비게이션 레벨 및 알림 표시기에 대한 정의된 시각적 처리입니다.

워크플로

1. 내비게이션 레벨 정의

IA를 수직 계층 구조로 구성합니다:

• 레벨 1 (직접): 기본 목록에서 항상 표시되는 핵심 섹션입니다.
• 레벨 2 (중첩): 확장 또는 드릴다운을 통해 표시되는 하위 섹션입니다.
• 전역 액션: 일반적으로 하단에 배치되는 "설정", "도움말", "알림"과 같은 보조 유틸리티입니다.

2. 시각적 해부학 구축

사이드바를 기능 영역으로 나눕니다:

• 헤더: 브랜드 로고 및 작업 공간/계정 전환기.
• 본문 (스크롤 가능): 기본 내비게이션 목록.
• 푸터 (고정): 사용자 프로필, 시스템 설정, 확장/축소 트리거.

3. 중첩 패턴 설계

깊은 계층 구조를 처리하는 방법을 선택합니다:

• 아코디언: 다른 항목을 아래로 밀어내는 확장 섹션입니다. 2레벨에 가장 적합합니다.
• 플라이아웃: 호버/클릭 시 사이드바 옆에 나타나는 하위 메뉴입니다. 좁은 "레일" 사이드바에 가장 적합합니다.
• 드릴다운: 전체 사이드바 보기가 하위 레벨 보기로 전환됩니다. 매우 깊은 구조에 가장 적합합니다.

4. 상태 매트릭스 생성

일관된 시각적 피드백 적용 (interactive-state-system 참조):

• 활성 상태: 고대비 표시기(예: 컬러 바 또는 배경 전환)를 사용하여 현재 페이지를 보여줍니다.
• 호버/포커스: 미묘한 배경 변화로 상호작용 가능성을 나타냅니다.
• 알림 배지: badge-and-tag-system을 사용하여 읽지 않은 항목이나 상태를 표시합니다.

5. 반응형 적응 계획

중단점별 사이드바 동작 매핑:

• 데스크톱 (>1200px): 고정, 넓은 사이드바 (240px-280px).
• 태블릿 (768px-1200px): 축소된 "레일", 아이콘만 표시하고 호버/클릭 시 확장됩니다.
• 모바일 (<768px): 기본적으로 숨겨져 있으며, 햄버거 아이콘으로 트리거되는 전체 화면 서랍으로 나타납니다. 서랍이 열려 있는 동안 기본 콘텐츠에 inert 속성(또는 이에 상응하는 것)을 적용하여 키보드 및 스크린 리더 사용자가 그 뒤에 숨겨진 콘텐츠로 탭 이동할 수 없도록 합니다.

의사 결정 규칙

• "7개 항목" 규칙: 최상위 그룹을 7개 이하로 제한하여 스크롤 없이 쉽게 스캔할 수 있도록 합니다.
• 아이콘 요구 사항: 레벨 1 항목에는 항상 아이콘을 사용합니다. 아이콘은 인식을 돕는 시각적 앵커를 제공하며, 특히 축소된 상태에서 유용합니다.
• 레이블 지속성: 사용자가 명시적으로 사이드바를 축소하지 않는 한 데스크톱 보기에서 레이블을 숨겨서는 안 됩니다.
• 시각적 구분: 레벨 2 항목이 레벨 1과 시각적으로 구분되도록 합니다(예: 들여쓰기, 더 작은 글꼴 크기, 또는 흐릿한 색상).
• 활성 페이지 가시성: 활성 페이지 표시기는 사이드바에서 가장 두드러지는 시각적 상태여야 합니다.

제약 조건

• 접근성: 사이드바는 고유한 aria-label을 가진 <nav>로 감싸야 합니다. 중첩된 항목에는 aria-expanded를 사용합니다. 사이드바나 그 플라이아웃이 콘텐츠 위에 겹쳐질 때, 현재 포커스된 항목이 다른 레이어 뒤에 완전히 가려지지 않도록 해야 합니다(WCAG 2.2, 2.4.11 초점 비가림).
• 반응형: 데스크톱에서 사이드바는 콘텐츠와 겹쳐서는 안 되며, 기본 콘텐츠 영역을 밀거나 압축해야 합니다.
• 시각적 계층 구조: 브랜딩 및 작업 공간 전환기는 상단에 있어야 하고, 사용자 설정 및 도움말은 하단에 있어야 합니다.
• 터치 대상: 모든 링크 및 확장 트리거는 최소 WCAG 2.2 24x24px 최소 대상 크기(2.5.8)를 충족해야 하며, 기본 내비게이션 항목의 경우 자주 사용되므로 44x44px가 선호됩니다.

일반적인 실패 패턴

• 스크롤 내 스크롤: 스크롤 가능한 사이드바와 스크롤 가능한 콘텐츠 영역이 사용자 포커스를 놓고 경쟁하여 "스크롤 하이재킹" 느낌을 줍니다.
• "보이지 않는 활성" 상태: 현재 페이지 표시기를 너무 미묘하게 만들어 사용자가 위치를 잃게 만듭니다.
• 과도한 중첩: 3레벨보다 깊게 들어가면 내비게이션이 애플리케이션이라기보다 파일 시스템처럼 느껴집니다.
• 숨겨진 축소 트리거: "닫기" 또는 "축소" 버튼을 사용자가 찾을 수 없는 곳에 숨깁니다.
• 레이블이 없는 아이콘: 기본 보기에서 텍스트 레이블 없이 아이콘을 사용하여 "미스터리 미트" 내비게이션에 의존합니다.

검증 기준

• 사이드바가 명확한 영역(헤더, 본문, 푸터)으로 구조화되었습니다.
• 활성 상태가 호버 및 기본 상태와 명확히 구분됩니다.
• 모든 레벨 1 항목에는 고유하고 인식 가능한 아이콘이 있습니다.
• 중첩된 항목이 상위 항목에 시각적으로 종속됩니다.
• 사이드바가 완전히 키보드로 탐색 가능합니다(Tab 및 화살표 키).
• 모바일 및 태블릿 반응형 상태가 정의되고 기능합니다.
• ARIA 랜드마크 및 상태가 올바르게 구현되었습니다.
• 텍스트 및 표시기의 대비 비율이 WCAG AA(4.5:1)를 충족합니다.
• 터치 대상이 최소 WCAG 2.2 24x24px를 충족합니다.
• 모바일 서랍이 열려 있는 동안 배경 콘텐츠에 inert(또는 이에 상응하는 것)가 적용됩니다.