고정 헤더 및 상단 바 시스템

고정 헤더 및 상단 바 시스템은(는) 무엇을 하나요?

목적

고정 헤더 및 상단 바 시스템은 지속적인 상단 내비게이션 스택을 설계, 구성 및 동작 구성하기 위한 포괄적인 프레임워크를 제공합니다. 최신 웹 애플리케이션과 마케팅 사이트는 종종 프로모션 공지 배너, 보조 유틸리티 링크(통화/언어 선택기, 지원 링크, 매장 찾기) 및 기본 내비게이션 바를 결합한 다계층 상단 바를 활용합니다.

이러한 바가 스크롤 중에 고정되거나 sticky 상태로 유지될 때, 잘못 설계된 시스템은 심각한 사용성 문제를 야기합니다: 모바일에서 과도한 수직 뷰포트 공간 소비, 앵커 대상 콘텐츠 가리기(scroll-margin-top 불일치), 스크롤 상태 변경 중 레이아웃 스래싱 또는 버벅임, 모달 또는 드롭다운과의 z-index 충돌, 키보드 포커스 고립 또는 스크린 리더 랜드마크 내비게이션 중단 등이 있습니다. 이 스킬은 고정 헤더에 대한 디자인, 공간 구성, 스크롤 상태 로직, 표면 스타일링 및 접근성 기준을 수립합니다.

사용 사례

• 전자상거래 글로벌 헤더: 상단 공지 배너(프로모션 코드 / 무료 배송 진행 상황), 유틸리티 링크(계정 로그인, 지역 선택기, 매장 찾기) 및 검색창과 장바구니 개수 배지가 있는 기본 고정 내비게이션을 결합한 다계층 상단 바.
• SaaS 마케팅 및 제품 마케팅 헤더: 스크롤 시 축소(패딩/로고 크기 감소)되거나 아래로 스크롤 시 동적 숨김 / 위로 스크롤 시 표시되어 수직 콘텐츠 영역을 최대화하면서 즉각적인 내비게이션 접근성을 유지하는 깔끔한 기본 헤더.
• 콘텐츠 포털 및 발행물 헤더: 읽기 진행률 표시줄, 카테고리 내비게이션, 기사 제목 표시기 및 빠른 북마크/공유 플로팅 도구를 통합한 고정 헤더.
• 웹 애플리케이션 및 SaaS 앱 셸: 이동 경로, 활성 작업공간 전환기, 명령 검색 트리거, 사용자 프로필 메뉴 및 실시간 알림 벨이 포함된 고정 상단 바.

사용하지 말아야 할 경우

• 인라인 형식 도구 모음: 리치 텍스트 편집기 도구 모음이나 콘텐츠 위에 떠 있거나 특정 편집기 구성 요소에 첨부되는 대량 작업 도크의 경우 toolbar-and-action-dock-system을 사용하세요.
• 모바일 하단 내비게이션 바: 모바일 뷰포트 하단에 고정된 기본 모바일 앱 탭의 경우 bottom-navigation-system을 사용하세요.
• 전체 측면 내비게이션 셸: 기본 내비게이션이 접을 수 있는 왼쪽 사이드바 레일로 구동되는 복잡한 SaaS 웹 애플리케이션의 경우 sidebar-navigation-system을 사용하세요.
• 플로팅 액션 도크: 뷰포트 모서리에 고정된 플로팅 컨텍스트 버튼(예: 채팅 위젯, 맨 위로 가기 FAB)의 경우 sticky-and-floating-ui-system을 사용하세요.

입력

1. 상단 바 계층 구조: 존재하는 계층 지정(예: 계층 1: 공지 바, 계층 2: 유틸리티 헤더, 계층 3: 기본 내비게이션).
2. 스크롤 동작 모델: 원하는 고정 방식(sticky-always, shrink-on-scroll, hide-on-scroll-down / reveal-on-scroll-up 또는 static-to-sticky).
3. 표면 및 테마 토큰: 배경 표면 색상, 테두리 토큰, 배경 흐림 효과(backdrop-filter: blur()) 및 elevation-and-depth-system과 accessible-color-system의 그림자.
4. 뷰포트 및 기기 대상: 다계층 데스크톱 헤더를 통합 모바일 상단 바로 축소하기 위한 중단점 임계값(< 768px, < 1024px, ≥ 1024px).

출력

1. 고정 헤더 레이아웃 및 스태킹 사양: 고정/sticky 위치 지정을 정의하는 CSS Grid/Flexbox 구조, CSS 사용자 정의 속성 오프셋 변수(--header-height) 및 z-index 계층 척도.
2. 스크롤 상태 전환 및 모션 규칙: 스크롤 리스너 로직, 임계값 오프셋, CSS 전환 클래스(.is-scrolled, .is-hidden) 및 하드웨어 가속 변환(transform: translateY())에 대한 기술 사양.
3. 반응형 모바일 축소 사양: 여러 행의 데스크톱 상단 바를 서랍 토글 트리거가 있는 단일 소형 모바일 헤더로 변환하는 레이아웃 규칙.
4. WCAG AA 접근성 청사진: 건너뛰기 링크 구현(.skip-link), 제목 앵커에 대한 scroll-margin-top 오프셋 보상, 키보드 포커스 트랩 방지 및 스크린 리더 랜드마크 구조(<header>, <nav>, role="banner").

---

워크플로

1. 상단 바 스태킹 계층 구조 구성하기

다계층 상단 바 구성을 결정하고 시맨틱 HTML 레이아웃을 설정합니다:

• 시맨틱 HTML 컨테이너: 모든 상단 바를 단일 <header role="banner"> 태그 내에 래핑하여 스크린 리더 사용자를 위한 하나의 명확한 배너 랜드마크를 유지합니다.
• 계층 1: 공지 바 (<aside> 또는 <div>): 최상단에 위치한 우선순위가 높은 마이크로 배너(예: 무료 배송 임계값, 시스템 알림).
• 계층 2: 유틸리티 바 (<div class="utility-bar">): 보조 링크, 언어/통화 선택기, 연락처 링크, 고객 지원.
• 계층 3: 기본 내비게이션 (<nav aria-label="Main Navigation">): 브랜드 로고, 기본 섹션 링크, 검색 입력란, 계정 링크, 쇼핑 카트 또는 기본 CTA.

2. 위치 지정 및 스크롤 방식 정의하기

콘텐츠 밀도와 뷰포트 제약 조건에 따라 고정 구현 방식을 선택합니다:

• position: sticky vs position: fixed:
  • 컨테이너가 상단에 고정되기 전에 자연스러운 문서 흐름을 허용하려면 position: sticky; top: 0; z-index: 1000;을 선호합니다.
  • 본문 콘텐츠가 명시적으로 padding-top: var(--header-height);을 사용하는 경우 position: fixed; top: 0; left: 0; right: 0;을 사용합니다.
• 다계층 스크롤 축소 전략:
  • 스크롤이 임계값(예: scrollY > 50px)을 초과하면 공지 바와 유틸리티 바는 자연스럽게 뷰포트 밖으로 스크롤되고 기본 내비게이션이 고정(position: sticky; top: 0;)되거나 전체 헤더가 전환됩니다.
  • CSS 사용자 정의 속성(예: --header-height)을 동적으로 계산하여 메인 페이지 콘텐츠와 앵커 링크가 올바르게 조정되도록 합니다.

3. 스크롤 상태 전환 및 미세 상호작용 구현하기

사용자가 페이지를 아래로 스크롤할 때 헤더 사용성을 향상시킵니다:

• 스크롤 시 축소 전환:
  • 기본 상태(상단): 헤더 높이 80px, 로고 높이 40px, 패딩 1.25rem 2rem.
  • 스크롤된 상태(.is-scrolled): 헤더 높이 60px, 로고 높이 30px, 패딩 0.75rem 2rem.
  • 부드러운 애니메이션: 하드웨어 가속 CSS 전환 사용(transition: padding 0.25s ease, height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;).
• 동적 숨기기/표시 (스마트 헤더):
  • 아래로 스크롤 (scrollY > lastScrollY && scrollY > 150px): transform: translateY(-100%);을 적용하여 헤더를 화면 밖으로 슬라이드하여 읽기 뷰포트를 최대화합니다.
  • 위로 스크롤 (scrollY < lastScrollY): transform: translateY(0);을 적용하여 즉시 내비게이션을 표시합니다.
• 표면 높이 및 배경 흐림:
  • 페이지 상단: 배경 반투명 또는 그림자가 없는 평평한 배경.
  • 스크롤 시: 단색/유리 형태 표면(background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);) 및 그림자(box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);) 추가.

4. 모바일 뷰포트 적응 구성하기

모바일 뷰포트(< 768px)는 수직 공간이 심하게 제한됩니다:

• 모바일 헤더 높이 상한: 모바일 고정 헤더 높이를 최대 56px~64px로 제한하여 모바일 화면 높이의 10% 이상을 소비하지 않도록 합니다.
• 모바일 계층 축소: 모바일에서 보조 유틸리티 바를 숨기고 유틸리티 링크를 접을 수 있는 모바일 내비게이션 서랍으로 이동합니다.
• 공지 바 통합: 공지 텍스트를 간결한 마이크로 카피 또는 자동 회전 티커로 압축하거나 고정된 기본 헤더 위에 정적으로 유지합니다.

5. WCAG AA 접근성 및 포커스 관리 적용하기

• 메인 콘텐츠로 건너뛰기 링크: 첫 번째 포커스 가능한 요소로 최상위 건너뛰기 링크 제공(<a href="#main-content" class="skip-link">Skip to main content</a>). Tab을 통해 포커스될 때 고정 헤더 위에 시각적으로 배치합니다(top: 1rem; left: 1rem; z-index: 9999;).
• 앵커 대상 스크롤 여백 (scroll-margin-top): 사용자가 내부 앵커 링크나 목차 항목을 클릭할 때 고정 헤더가 제목과 겹치는 것을 방지합니다:

  :target, [id] {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
  }
  

• 키보드 내비게이션 및 드롭다운: 모든 헤더 드롭다운(메가 메뉴, 계정 메뉴, 모바일 햄버거 토글)이 Tab, Enter, Space 및 Escape를 통해 완전히 작동 가능하도록 합니다.
• Prefers-Reduced-Motion: 사용자 모션 선호도를 존중하여 슬라이딩 변환 및 레이아웃 전환을 비활성화합니다:

  @media (prefers-reduced-motion: reduce) {
    .site-header { transition: none !important; }
  }
  

---

의사 결정 규칙

고정 스크롤 방식 선택 매트릭스

사이트 유형	권장 스크롤 동작	모바일 적응	근거
전자상거래 스토어	고정 기본 내비게이션 + 정적 상단 바	상단 프로모션 바 스크롤 아웃; 기본 내비게이션 고정 유지 (56px)	전환율을 극대화하기 위해 검색, 장바구니 개수 및 카테고리에 항상 접근 가능하도록 유지합니다.
SaaS 랜딩 / 마케팅	스크롤 시 축소 또는 스마트 숨기기/표시	통합 60px 헤더; 아래로 스크롤 시 숨김, 위로 스크롤 시 표시	시각적 히어로 영역과 읽기 공간을 최대화하면서 필요 시 즉각적인 내비게이션 접근성을 제공합니다.
콘텐츠 블로그 / 에디토리얼	읽기 진행률이 있는 스마트 숨기기/표시	스크롤 진행률 표시줄 표시기가 있는 소형 상단 바	긴 형식 읽기에 100% 뷰포트 공간을 제공하고 역방향 스크롤 시 즉시 내비게이션을 반환합니다.
웹 앱 / 대시보드	항상 표시되는 고정 헤더	고정 단일 행 헤더 (56px)	앱 유틸리티 셸로 기능; 동적 숨김은 워크플로 중 방향 감각 상실을 유발합니다.

Z-Index 계층화 척도

전역 디자인 시스템 전체에서 엄격한 z-index 오케스트레이션을 유지합니다:

z-index: 10000; -> 메인 콘텐츠로 건너뛰기 링크 (포커스됨)
z-index: 9000;  -> 모달 다이얼로그 / 라이트박스
z-index: 8000;  -> 모바일 내비게이션 서랍 / 오버레이
z-index: 7000;  -> 전역 토스트 및 알림 배너
z-index: 1000;  -> 고정 / 상단 헤더 스택
z-index: 500;   -> 컨텍스트 도구 모음 및 플로팅 도크
z-index: 1;     -> 스태킹 컨텍스트 콘텐츠 카드

---

제약 조건

• 접근성 (WCAG 2.1 AA):
  • SC 2.4.1 우회 블록: 헤더 내비게이션 앞에 표시되는 "메인 콘텐츠로 건너뛰기" 링크를 포함해야 합니다.
  • SC 1.4.3 명도 대비: 헤더 텍스트, 아이콘 및 메뉴 트리거는 스크롤된 상태와 스크롤되지 않은 상태 모두에서 최소 4.5:1 명도 대비 비율을 충족해야 합니다.
  • SC 2.4.7 포커스 표시: 포커스 표시기는 모든 배경색 위에서 고정 헤더 요소를 탭할 때 완전히 표시되고 잘리지 않아야 합니다.
• 성능 및 렌더링:
  • 스크롤 리스너는 스크롤 이벤트 중 강제 동기식 레이아웃 스래싱을 방지하기 위해 requestAnimationFrame 또는 IntersectionObserver를 통해 스로틀링되거나 바인딩되어야 합니다.
  • 흐림 필터(backdrop-filter)는 신중하게 범위를 지정하고 저전력 모바일 장치에서 GPU 지연을 테스트해야 합니다.
• 뷰포트 레이아웃 보호: 모바일 장치의 고정 헤더는 64px 또는 고정 시 시각적 뷰포트 높이의 15% 를 초과해서는 안 됩니다.

---

일반적인 실패 패턴

• 앵커 콘텐츠 겹침 버그: 내부 링크(#section-2)를 클릭하면 scroll-margin-top이 누락되어 섹션 제목이 고정 헤더 바로 아래로 스크롤되어 제목이 보이지 않게 됩니다.
• 뷰포트 화면 독점: 140px 다계층 데스크톱 헤더를 모바일 화면에 고정 상태로 유지하여 실제 페이지 콘텐츠를 위해 모바일 화면의 60% 미만만 표시되도록 합니다.
• 스크롤 레이아웃 스래싱: 스로틀링되지 않은 window.onscroll 리스너 내부에서 header.offsetHeight를 쿼리하여 레이아웃 스래싱과 30fps의 버벅이는 스크롤을 유발합니다.
• Z-Index 스태킹 충돌: 고정 헤더에 z-index: 999999를 부여하여 모달 배경 오버레이나 전체 화면 라이트박스 위에 어색하게 렌더링되도록 합니다.
• 포커스 표시기 잘림: overflow: hidden이 있는 고정 컨테이너 내부에 요소를 배치하여 상단/하단 링크의 포커스 링이 시각적으로 잘리도록 합니다.

---

유효성 검사 기준

• 헤더 컨테이너는 시맨틱 <header role="banner">를 사용하고 하위 내비게이션은 <nav aria-label="...">로 묶습니다.
• "메인 콘텐츠로 건너뛰기" 링크가 존재하고, 첫 번째 키보드 탭 대상으로 접근 가능하며, 포커스될 때 고정 헤더 위에 시각적으로 배치됩니다.
• 내부 앵커 링크 대상 요소는 scroll-margin-top을 최대 고정 헤더 높이 이상으로 설정합니다.
• 모바일 고정 헤더 높이는 64px를 초과하지 않으며, 보조 상단 바는 모바일 서랍으로 축소됩니다.
• 스크롤 상태 전환(축소 또는 숨기기/표시)은 하드웨어 가속 CSS 속성(transform, opacity)을 사용하고 스크롤 계산을 스로틀링합니다.
• 투명, 스크롤 또는 흐릿한 유리 상태에서 텍스트 및 아이콘 대비는 WCAG AA(≥4.5:1 비율)를 충족합니다.
• Z-index 계층화는 시스템 척도(헤더 z-index: 1000, 모달 및 서랍 아래)를 준수합니다.