coastdigitalgroup/coastai-skills

페이지 헤더 시스템

목적

페이지 헤더 시스템은 개별 페이지의 최상위 구조 영역(전역 사이트 헤더와 구분됨)을 설계하기 위한 방법론을 제공합니다. 사용자가 현재 위치를 즉시 식별하고(길 찾기), 현재 뷰의 상태나 메타데이터를 이해하며, 메뉴를 뒤지지 않고 작업을 완료하는 데 필요한 주요 동작에 접근할 수 있도록 보장합니다.

사용 사례

• 복잡한 대시보드 뷰(예: "프로젝트 세부 정보")의 헤더 설계.
• 긴 형식의 문서 또는 문서 페이지의 도입부 구성.
• 컨텍스트와 저장 동작이 중요한 설정 또는 프로필 페이지 구성.
• SaaS 애플리케이션 또는 대규모 콘텐츠 사이트 전반의 헤더 패턴 표준화.
• 통합된 레이아웃에서 브레드크럼, 제목 및 상태 표시기 관리.

사용하지 말아야 할 경우

• 전역 사이트 탐색: 사이트 전체에 걸쳐 있는 메인 헤더에는 site-navigation-system을 사용하세요.
• 간단한 랜딩 페이지: "히어로" 섹션( hero-section-optimization 참조)이 페이지 헤더 역할을 하는 경우.
• 스플래시 화면/모달: 콘텐츠가 일시적이거나 최소인 경우; 모달 헤더에는 overlay-and-dialog-system을 사용하세요.

입력

1. 페이지 제목 및 계층 구조: 페이지의 기본 이름(H1)과 사이트 구조 내 위치.
2. 길 찾기 요구 사항: 사용자에게 브레드크럼이나 "뒤로" 버튼이 필요한가?
3. 메타데이터 및 상태: "마지막 업데이트", "초안/게시됨" 또는 소유자 정보와 같은 중요한 세부 정보.
4. 작업 우선순위: 이 페이지의 주요 작업은 무엇인가? (예: 편집, 공유, 생성).
5. 브랜드/시스템 토큰: 간격, 타이포그래피 및 색상 토큰.

출력

1. 헤더 구조 명세: 영역 정의(길 찾기, 제목, 메타데이터, 동작).
2. 레이아웃 청사진: 정렬 규칙(왼쪽 vs. 중앙) 및 간격.
3. 반응형 전략: 데스크톱에서 모바일로 헤더가 적응하는 방식.
4. 상호작용 명세: 고정 헤더의 동작 및 작업 버튼 우선순위.

워크플로

1. 탐색 경로 정의 (길 찾기)

사용자가 이 페이지에 어떻게 도달했는지, 그리고 어떻게 돌아갈지 결정합니다:

• 브레드크럼: 깊은 계층 구조에 사용 (예: 홈 > 프로젝트 > 디자인).
• 뒤로 버튼: 선형 작업이나 특정 목록 뷰로 돌아갈 때 사용.
• 상위 링크: 2단계 깊이에 대한 간단한 "<- [상위]로 돌아가기".

2. 콘텐츠 핵심 설정 (제목 및 메타데이터)

visual-hierarchy-system을 헤더 중앙에 적용합니다:

• H1 제목: 가장 눈에 띄는 텍스트 요소.
• 컨텍스트 메타데이터: 제목 근처에 배치되는 보조 정보 (예: 태그, 타임스탬프, 상태 배지).
• 썸네일/아바타: 페이지가 특정 엔티티(예: 사용자 프로필 또는 제품)를 나타내는 경우.

3. 페이지 수준 동작 구성

동작을 우선순위 계층으로 나눕니다:

• 기본 동작: 하나의 "레벨 1" 버튼 (일반적으로 고대비 채우기 버튼).
• 보조 동작: 덜 빈번한 작업을 위한 "레벨 2" 버튼 (윤곽선 또는 고스트 스타일).
• 3차 동작: 드문 관리 작업을 위한 오버플로 메뉴 (...).

4. 공간 패턴 선택

• 표준 왼쪽 정렬 (SaaS/대시보드): 브레드크럼/제목은 왼쪽, 동작은 오른쪽. 생산성에 가장 적합.
• 중앙 정렬 (콘텐츠/문서): 모든 요소가 중앙에 정렬됨. 가독성과 스토리텔링에 가장 적합.
• 분할 레이아웃: 제목과 동작을 여백으로 분리하여 공간을 강조.

5. 고정 및 스크롤 동작 정의

• 고정 헤더: 스크롤 중에 "저장"과 같은 동작이 자주 필요한 경우 페이지 헤더를 계속 표시.
• 축소 헤더: 사용자가 아래로 스크롤할 때 헤더 높이를 줄이거나 브레드크럼을 숨겨 콘텐츠 공간 최대화.

결정 규칙

• 브레드크럼 규칙: 사이트가 2단계보다 깊다면 페이지 헤더에 브레드크럼이 필수입니다.
• "하나의 H1" 규칙: 페이지 헤더는 페이지의 고유한 H1 태그를 반드시 포함해야 합니다.
• 동작 정렬: 데스크톱에서는 기본 동작을 오른쪽 상단에 정렬합니다. 모바일에서는 헤더가 너무 복잡해지는 경우 기본 동작을 위한 고정 하단 바를 고려하세요.
• 상태 표시: 중요한 상태(예: "결제 연체")는 배지나 아이콘을 사용하여 제목 바로 옆에 배치해야 합니다.

제약 조건

• 접근성: 헤더 제목은 <h1>을 사용해야 합니다. 브레드크럼은 aria-label="Breadcrumb"와 함께 <nav>를 사용해야 합니다.
• 대비: 상태 배지와 동작은 WCAG AA 대비 요구 사항을 충족해야 합니다. 동작 버튼은 WCAG 2.2 SC 2.5.8 대상 크기(최소 24x24px, 모바일 고정 바에서는 44x44px 선호)를 충족해야 합니다.
• 반응성: 헤더는 긴 제목을 적절하게 처리해야 합니다(줄임표 vs. 줄 바꿈).

일반적인 실패 패턴

• 동작 과부하: 헤더에 너무 많은 버튼을 배치하여 기본 작업을 혼란스럽게 만듦.
• 길 찾기 누락: 깊은 페이지에 브레드크럼을 잊어버려 사용자가 "길을 잃은" 느낌을 받게 함.
• 제목 압착: 모바일에서 긴 제목에 충분한 공간을 확보하지 못해 동작과 겹치게 만듦.
• 중복 사이트 헤더: 페이지 헤더가 전역 사이트 헤더와 너무 유사해져 시각적 혼란을 초래함.

검증 기준

• 헤더에 탐색 레이블과 일치하는 명확한 H1이 포함되어 있습니다.
• 길 찾기(브레드크럼/뒤로)가 사이트 깊이에 적합합니다.
• 기본 동작이 보조 동작과 시각적으로 구분됩니다.
• 모바일 뷰포트에서도 레이아웃이 기능적으로 유지되고 읽기 쉽습니다.
• 의미론적 HTML이 사용됩니다 (<nav>는 브레드크럼, <h1>은 제목).
• 상태 표시기(있는 경우)는 고대비이며 쉽게 식별할 수 있습니다.