coastdigitalgroup/coastai-skills

사이트 내비게이션 시스템

목적

사이트 내비게이션 시스템 스킬은 웹사이트의 구조적 경로를 체계화하고 설계하기 위한 방법론을 제공합니다. 사용자가 자신의 위치를 파악하고, 정보를 빠르게 찾으며, 모든 기기 유형에서 손쉽게 섹션 간을 이동할 수 있도록 보장합니다. 강력한 내비게이션 시스템은 정보 밀도와 명확성의 균형을 유지하며, 접근성과 시각적 위계를 유지합니다.

사용 사례

• 새 웹사이트의 글로벌 헤더와 푸터를 디자인할 때.
• 복잡한 사이트의 정보 아키텍처(IA)를 재구성할 때.
• 반응형 내비게이션 패턴(예: 모바일 드로어, 메가 메뉴)을 구현할 때.
• 콘텐츠가 많은 사이트의 길찾기(브레드크럼, 서브 내비게이션)를 개선할 때.
• 기존 내비게이션의 접근성 및 사용성 문제를 감사할 때.

사용하지 말아야 할 경우

• 라우팅이 최소화된 단일 페이지 애플리케이션(SPA): 단일 뷰 내에서 내비게이션이 순전히 기능적인 경우(예: 간단한 대시보드 도구).
• 몰입형/실험적 사이트: 내러티브 또는 예술적 목적으로 표준 내비게이션 규칙을 의도적으로 피하는 경우.
• 독립형 랜딩 페이지: 단일 전환 경로가 목표이고 글로벌 내비게이션이 사용자의 주의를 분산시킬 수 있는 경우(단, '맨 위로' 또는 최소한의 앵커 내비게이션은 여전히 사용될 수 있음).

입력

1. 정보 아키텍처(IA): 계층 구조로 분류된 사이트맵 또는 페이지 목록.
2. 사용자 페르소나 및 목표: 사용자가 가장 자주 수행해야 하는 작업은 무엇입니까?
3. 콘텐츠 우선순위: 어떤 링크가 '기본'(전역), '보조'(맥락별), 또는 '유틸리티'(도구/계정)입니까?
4. 기기 제약 조건: 대상 브레이크포인트, 터치 vs. 마우스 상호 작용 요구 사항.

출력

1. 내비게이션 맵: 헤더, 푸터 및 서브 내비게이션 요소에 대한 구조적 가이드.
2. 반응형 전략: 데스크톱에서 모바일로 내비게이션이 적응하는 방식에 대한 정의.
3. 상호 작용 명세: 드롭다운, 활성 상태 및 포커스 관리에 대한 동작.
4. 접근성 랜드마크: 스크린 리더 내비게이션을 위한 정의된 역할과 레이블.

워크플로우

1. 내비게이션 수준 분류

사이트맵을 기능적 계층으로 나누십시오:

• 기본: 핵심 사이트 섹션(예: 제품, 서비스, 회사 소개).
• 보조/맥락별: 특정 섹션에 대한 링크(예: 특정 제품 카테고리).
• 유틸리티: 핵심은 아니지만 필요한 도구(예: 검색, 로그인, 언어 선택기).
• 3차(푸터): SEO 링크, 법률, 소셜 및 중복된 글로벌 링크.

2. 내비게이션 패턴 선택

콘텐츠 밀도에 따라 패턴을 선택하십시오:

• 단순 바: 3~7개의 링크. 소규모에서 중간 규모 사이트에 가장 적합합니다.
• 드롭다운: 2단계 계층 구조를 가진 사이트에 가장 적합합니다.
• 메가 메뉴: 많은 카테고리를 가진 대규모 전자 상거래 또는 엔터프라이즈 사이트에 가장 적합합니다.
• 모바일 드로어: 모바일의 표준; 모든 내비게이션 레벨을 세로 스택으로 포함합니다.

3. 길찾기 설계

사용자가 항상 자신의 위치를 알 수 있도록 하십시오:

• 활성 상태: 현재 페이지 링크를 시각적으로 구분하고 보조 기술을 위해 aria-current="page"로 표시하십시오.
• 브레드크럼: 3단계보다 깊은 사이트에 사용하십시오.
• 일관된 배치: 모든 페이지에서 글로벌 내비게이션을 동일한 위치에 유지하십시오.

4. 반응형 동작 정의

내비게이션이 축소되는 방식을 결정하십시오:

• 브레이크포인트 전환: 데스크톱 메뉴가 정확히 언제 '햄버거' 메뉴가 되는지 결정하십시오.
• 우선순위 페어링: 모바일에서는 유틸리티 링크(예: '검색')를 우선순위가 높은 경우 드로어 밖으로 이동하여 헤더에 배치하십시오.
• 터치 대상: 적절한 간격으로 WCAG 2.2 SC 2.5.8(최소 대상 크기)을 24x24px에서 충족하고, 기본 엄지 상호 작용 대상에는 44x44px를 선호하십시오.

5. 접근성 확립

• 랜드마크: 고유한 aria-label(예: '기본', '푸터')과 함께 <nav> 태그를 사용하십시오.
• 키보드 경로: 논리적인 Tab 순서와 고정 헤더나 오버레이에 의해 가려지지 않는 가시적인 :focus-visible 상태를 보장하십시오(WCAG 2.2 SC 2.4.11 포커스 비가림).
• 건너뛰기 링크: 키보드 사용자를 위해 '콘텐츠로 건너뛰기' 링크를 제공하십시오.
• ARIA 상태: 토글 가능한 메뉴에는 aria-expanded와 aria-controls를 사용하십시오.

결정 규칙

• 7링크 규칙: 인지 부하를 줄이기 위해 기본 내비게이션을 7개 항목 이하로 제한하십시오(밀러의 법칙).
• 혁신보다 예측 가능성: 즉각적인 인식을 보장하기 위해 표준 아이콘(메뉴용 햄버거, 검색용 돋보기)을 사용하십시오.
• 시각적 위계: 가장 중요한 작업(예: '시작하기')은 텍스트 링크가 아닌 스타일이 적용된 버튼이어야 합니다.
• 고정 vs. 정적: 사용자가 스크롤하는 동안 내비게이션에 자주 액세스해야 하는 경우에만 고정 헤더를 사용하십시오(예: 긴 형식의 콘텐츠 또는 대시보드).

제약 조건

• 접근성: 키보드만으로 완전히 탐색 가능해야 합니다. 내비게이션 링크의 대비는 WCAG AA(4.5:1)를 충족해야 합니다. 터치 대상은 WCAG 2.2 SC 2.5.8을 충족해야 합니다.
• 반응성: 내비게이션이 뷰포트를 가로로 넘쳐서는 안 됩니다.
• 위계: 내비게이션은 페이지의 H1 또는 기본 CTA와 경쟁해서는 안 됩니다.

일반적인 실패 패턴

• '미스터리 미트' 내비게이션: 보편적으로 이해되지 않는 레이블이 없는 아이콘 사용.
• 헤더 과부하: 너무 많은 유틸리티 링크를 넣으려고 해서 혼란과 잘못된 클릭을 유발.
• 접근 불가능한 드로어: 키보드로 닫을 수 없거나 열렸을 때 포커스를 가두지 않는 모바일 메뉴 생성.
• 피드백 부족: 사용자가 현재 페이지에 있거나 링크 위에 마우스를 올렸을 때 시각적 변화가 없음.

검증 기준

• 내비게이션이 명확한 계층(기본, 유틸리티, 푸터)으로 구조화되어 있습니다.
• 활성 상태가 시각적으로 구별되고 접근 가능합니다.
• 모바일 내비게이션이 작동하며 모든 기본 링크를 포함합니다.
• 키보드 사용자가 키보드만으로 모든 링크에 액세스하고 메뉴를 닫을 수 있습니다.
• 랜드마크(<nav>)가 올바르게 사용되고 레이블이 지정되었습니다.
• 모바일의 터치 대상이 최소 WCAG 2.2 24x24px 기준(기본 작업의 경우 44x44px 선호)을 충족합니다.
• '콘텐츠로 건너뛰기' 링크가 존재하고 기능합니다.