배너는 빼고, 헤더는 통째로

KRDS CP-027 — 헤더가 고정될 때에는 공식 배너를 제외한 전체 헤더가 고정되게 구현하고 있다.

0. 들어가며 — 무엇을 고정할 것인가

이번 147편은 헤더 고정 시 공식배너를 제외한 전체 헤더를 고정하는 규칙입니다.

146편에서 헤더 고정의 스크롤 동작을 봤다면, CP-027은 ’고정할 때 무엇을 고정할지’를 규정합니다 — 공식 배너는 빼고, 나머지 헤더 전체를 통째로 고정하라는 것이죠. 부분만 고정하거나 공식배너까지 고정하면 안 됩니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 공식배너 제외, 전체 고정

CP-027 (컴포넌트 > 헤더) “헤더가 고정될 때에는 공식 배너를 제외한 전체 헤더가 고정되게 구현하고 있다.”

헤더를 고정할 때 공식배너는 함께 고정하지 말고, 나머지 헤더 전체를 고정하라는 뜻입니다.

정리: 헤더 고정 시 공식배너를 제외한 전체 헤더를 고정하라. 이게 CP-027입니다.

2. 왜 공식배너는 빼고, 나머지는 전체인가

① 공식배너를 제외하는 이유

공식배너는 ’이 사이트는 정부 공식’을 알리는 신원 표식입니다(121편). 이건 페이지를 열 때 한 번 확인하면 되는 정보지, 스크롤 내내 따라다닐 필요는 없죠. 오히려 공식배너까지 고정하면 — 안 그래도 한정된 화면 상단 공간을 더 차지해 콘텐츠 영역이 좁아집니다. 공식배너는 페이지 맨 위에서 한 번 보이고, 스크롤하면 자연스럽게 사라지는 것이 맞습니다. 그래서 고정 대상에서 제외하죠.

② 나머지 ’전체 헤더’를 고정하는 이유

반면 헤더의 나머지(로고·메뉴·검색·유틸리티)는 사용자가 스크롤 중에도 언제든 접근하고 싶은 내비게이션 요소입니다. 그래서 고정할 거라면 이들을 통째로(전체) 고정해야 합니다. 일부만 고정하면 — 예를 들어 메뉴만 고정하고 로고·검색은 안 하면 — 헤더가 쪼개져 어색하고, 사용자가 기대하는 ’완전한 헤더’가 아니게 되죠. 로고도 홈으로 가는 링크라 늘 필요하고, 검색도 어디서든 쓰고 싶으니까요. 헤더는 하나의 통합된 내비게이션 단위라, 고정할 땐 통째로 고정하는 것이 일관됩니다.

정리하면 — 고정 대상 = 헤더 전체 − 공식배너입니다. 공식배너는 한 번 보고 흘려보낼 신원 정보라 빼고, 로고·메뉴·검색·유틸리티는 항상 접근할 내비게이션이라 통째로 고정하죠. 이는 각 요소의 성격(일회성 정보 vs 상시 내비게이션)에 따라 고정 여부를 합리적으로 가른 것입니다. 146편(스크롤 동작)과 합치면 — ’공식배너를 제외한 전체 헤더가, 스크롤을 올릴 때 나타나 고정된다’는 완성된 동작이 됩니다.

3. 점검 / 개선

무엇을 점검하나

공식배너 제외 — 고정 시 공식배너는 함께 고정되지 않는가.

전체 헤더 고정 — 로고·메뉴·검색·유틸리티가 통째로 고정되는가.

부분 고정 아님 — 헤더 일부만 고정해 쪼개지지 않았는가.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
개발(프론트)	공식배너 제외 + 전체 헤더 고정 구현
퍼블리셔	고정 영역 구조 설계

기관 유형	CP-027 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (헤더 고정 사용 시)

헤더 고정을 사용하는 사이트 = 해당. 고정 미사용이면 N/A.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 고정 시 공식배너는 제외되나요?

□ 로고·메뉴·검색·유틸리티가 통째로 고정되나요?

□ 헤더 일부만 고정해 쪼개지지 않았나요?

❓ FAQ

Q1. 공식배너도 고정하면 안 되나요? 공식배너는 한 번 확인할 정보라, 고정하면 공간만 차지합니다. 제외하는 것이 표준입니다. Q2. 로고만 고정하면 안 되나요? 헤더는 통합 내비게이션이라 통째로 고정해야 합니다. 일부만 고정하면 어색 하고 일관성이 깨집니다. Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 공식배너 제외 + 전체 고정 구조로 제공됩니다.

6. 마무리

CP-027의 메시지:

배너는 빼고, 헤더는 통째로 — 일회성 신원 정보와 상시 내비게이션을 가른다.

공식배너는 한 번 확인할 신원 정보라 고정에서 빼고, 로고·메뉴·검색·유틸리티는 상시 접근할 내비게이션이라 통째로 고정합니다. 요소의 성격에 따라 고정 여부를 가른 합리적 규칙이죠. 146편의 스크롤 동작과 합쳐 완성됩니다.

다음 편은 모바일 햄버거 메뉴를 다룹니다. CP-028 — “화면 너비가 부족해 메인 메뉴를 표시할 수 없을 때 햄버거 메뉴로 제공한다.”

다음 편 예고 ▶ 「148. (CP-028) [모바일] 화면 너비가 충분하지 않아 메인 메뉴를 표시할 수 없을 때 햄버거 메뉴 형태로 제공하고 있다.」

ViewCheck는 헤더 고정 시 공식배너 제외 + 전체 헤더 고정이 구현됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준