모바일 헤더 기준

모바일 헤더는 콘텐츠 공간을 확보하면서 필요한 순간에 메뉴에 접근할 수 있도록 설계합니다. 메뉴가 있다는 이유만으로 고정하지 않고, 콘텐츠를 보는 도중 메뉴를 반복적으로 사용할 필요가 있는지 판단합니다.

아래 수치는 SLUR의 초기 기본값입니다. 보편적인 정답이 아니라 실제 화면에서 검증하며 조정하는 기준입니다.

사용 맥락에 따른 선택

화면의 사용 맥락	권장 방식
읽기에 집중하며 메뉴 사용이 드문 화면	상단에 배치하고 콘텐츠와 함께 스크롤
콘텐츠 탐색 중 메뉴로 자주 이동하는 화면	아래로 스크롤하면 숨기고, 위로 스크롤하면 재노출
현재 단계나 조작이 계속 필요한 작업 화면	필요한 최소 영역을 고정
검색·필터를 반복해서 사용하는 목록	헤더 전체보다 필요한 컨트롤만 고정하는 방식 고려

스크롤에 따른 숨김·재노출

• 페이지 최상단에서는 헤더를 표시합니다.
• 아래로 스크롤해 헤더 영역을 지나면 숨깁니다.
• 위로 일정 거리 이상 스크롤하면 페이지 상단까지 돌아가지 않아도 표시합니다.
• 미세한 움직임이나 스크롤 튕김에는 반응하지 않도록 합니다.
• 표시·숨김 과정에서 본문 위치가 밀리거나 튀지 않도록 합니다.
• 메뉴가 열렸거나 헤더 내부에 키보드 포커스가 있는 등 헤더를 사용 중일 때는 숨기지 않습니다.
• 숨김·재노출 시 헤더 높이와 로고 크기는 유지합니다.
• 동작 효과는 짧고 절제하며, 동작 줄이기 설정을 존중합니다.

위로 스크롤하는 행동은 앞선 콘텐츠를 다시 읽으려는 것일 수도 있습니다. 재노출 거리와 전환 속도는 실제 화면에서 확인해 정합니다. 전환과 동작 줄이기의 공통 원칙은 모션 원칙을 따릅니다.

헤더와 로고 크기

항목	기준
기본 헤더 높이	56px
확장 헤더 높이	브랜드 표현이나 기능상 이유가 있을 때 64px까지
로고 권장 높이	24px
로고 최대 높이	헤더 높이 − 24px, 단 32px 이하
메뉴 등 버튼 터치 영역	최소 48 × 48px

• 헤더 높이는 상단 안전 영역을 제외한 값입니다. 안전 영역은 별도로 확보합니다.
• 로고 최대 높이는 허용 한계이며, 기본 적용 크기는 아닙니다.
• 로고는 원본 비율을 유지하고, 가용 너비도 제한해 메뉴나 버튼 영역을 침범하지 않도록 합니다.
• 로고 파일의 불필요한 투명 여백을 정리하고 시각적 크기를 확인합니다.
• 아이콘의 시각적 크기와 버튼의 터치 영역은 구분합니다.
• 검색창이나 추가 탐색 행이 필요하면 기본 헤더를 임의로 늘리지 않고 별도 영역으로 구성합니다.

적용 시 확인할 사항

• 작은 화면에서 콘텐츠를 과하게 가리지 않는지 확인합니다.
• 헤더 재노출이 읽기를 방해하지 않는지 확인합니다.
• 키보드·하단 고정 요소와 충돌하지 않는지 확인합니다.
• 저장·완료처럼 작업 중 계속 필요한 조작은 숨겨지는 헤더에만 의존하지 않도록 합니다.