내릴 땐 숨고, 올릴 땐 나타나고

KRDS CP-026 — 헤더를 뷰포트 상단에 고정할 수 있지만, 사용자가 현재 화면에서 집중할 수 있도록 스크롤을 내릴 때에는 고정하지 않고 있다.

0. 들어가며 — 고정 헤더의 두 얼굴

이번 146편은 헤더 고정의 스크롤 동작을 규정하는 규칙입니다.

헤더를 화면 상단에 고정(sticky)하면 어디서든 메뉴에 접근할 수 있어 편리합니다. 하지만 항상 고정하면 콘텐츠를 가려 답답하죠. CP-026은 절묘한 균형을 제시합니다 — 스크롤을 내릴 땐 헤더를 숨기고(고정 해제), 올릴 땐 다시 나타나게 하라는 것이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 내릴 때는 고정하지 않기

CP-026 (컴포넌트 > 헤더) “헤더를 뷰포트 상단에 고정할 수 있지만, 사용자가 현재 화면에서 집중할 수 있도록 스크롤을 내릴 때에는 고정하지 않고 있다.”

헤더를 상단에 고정하되, 사용자가 아래로 스크롤(콘텐츠를 읽으려 내릴 때)할 때는 헤더를 숨겨 콘텐츠에 집중하게 하라는 뜻입니다.

정리: 헤더는 고정하되, 스크롤을 내릴 때는 고정을 풀어 숨겨라. 이게 CP-026입니다.

2. 왜 ’내릴 때 숨기기’인가

고정 헤더(sticky header)에는 장단점이 있습니다.

장점 — 헤더가 항상 보이면, 사용자가 페이지 어디에 있든 메뉴·검색·로고에 바로 접근할 수 있습니다. 긴 페이지에서 맨 위로 올라가지 않아도 되죠.

단점 — 헤더가 화면 위를 계속 차지하면, 특히 모바일·작은 화면에서 콘텐츠 영역이 좁아집니다. 사용자가 콘텐츠를 집중해서 읽을 때, 위에 떠 있는 헤더가 시야를 방해하고 답답하게 느껴지죠.

CP-026은 이 둘을 모두 잡는 패턴을 제시합니다 — 스크롤 방향에 따라 헤더를 보였다 숨겼다 하는 것입니다.

아래로 스크롤(콘텐츠를 읽으려 내릴 때) → 헤더를 숨깁니다. 사용자가 지금 콘텐츠에 집중하려는 의도이므로, 헤더를 치워 화면을 넓게 쓰고 집중을 돕죠.

위로 스크롤(메뉴·다른 곳으로 가려 올릴 때) → 헤더를 다시 나타냅니다. 사용자가 내비게이션을 찾으려는 의도이므로, 헤더를 즉시 보여줘 메뉴에 접근하게 하죠.

이 패턴은 ‘사용자의 의도를 스크롤 방향으로 읽는’ 영리한 설계입니다. 아래로 = “읽을게요”(헤더 비켜), 위로 = “뭔가 찾을게요”(헤더 나와). 사용자가 명시적으로 조작하지 않아도, 스크롤 방향만으로 헤더가 알아서 적절히 동작하죠. 많은 모던 사이트(특히 모바일)가 이 ‘hide-on-scroll-down’ 패턴을 씁니다.

구현은 JavaScript로 스크롤 방향을 감지해 헤더에 클래스를 토글하는 방식입니다. 단, 부드러운 전환(애니메이션) 으로 갑작스럽지 않게 하고, 키보드 포커스가 헤더에 있을 땐 숨기지 않는 등 접근성도 고려해야 합니다. 다음 편(CP-027)에서 헤더가 고정될 때 ’공식배너를 제외한 전체 헤더’를 고정하는 세부 규칙을 다룹니다.

3. 점검 / 개선

무엇을 점검하나

내릴 때 숨김 — 아래로 스크롤 시 헤더가 숨는가.

올릴 때 나타남 — 위로 스크롤 시 헤더가 다시 보이는가.

부드러운 전환 — 전환이 자연스럽고, 접근성을 해치지 않는가.

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

역할	책임
개발(프론트)	스크롤 방향 감지 + 헤더 토글 구현
UX 디자이너	전환 동작·애니메이션 설계

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

헤더를 고정(sticky)으로 사용하는 사이트 = 해당. 고정을 쓰지 않으면 N/A.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아래로 스크롤 시 헤더가 숨나요?

□ 위로 스크롤 시 헤더가 다시 나타나나요?

□ 전환이 부드럽고 접근성을 해치지 않나요?

❓ FAQ

Q1. 항상 고정하면 안 되나요? 항상 고정하면 콘텐츠를 가려 답답합니다. 내릴 때 숨기고 올릴 때 보이는 것이 집중과 접근성을 모두 잡습니다. Q2. 고정 자체를 안 써도 되나요? 됩니다. 고정은 ‘할 수 있지만’(선택)이고, 고정할 경우 이 스크롤 동작을 따르라는 것입니다. Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 이 스마트 고정 패턴을 권장·제공합니다.

6. 마무리

CP-026의 메시지:

내릴 땐 숨고, 올릴 땐 나타나고 — 스크롤 방향으로 사용자의 의도를 읽는 스마트 헤더.

헤더 고정은 편리하지만 항상 떠 있으면 콘텐츠를 가립니다. 아래로 스크롤(읽기)하면 숨고, 위로 스크롤(탐색)하면 나타나게 해, 집중과 접근성을 모두 잡죠. 스크롤 방향으로 사용자 의도를 읽는 영리한 패턴입니다.

다음 편은 헤더 고정의 범위를 다룹니다. CP-027 — “헤더가 고정될 때는 공식배너를 제외한 전체 헤더가 고정되게 구현한다.”

다음 편 예고 ▶ 「147. (CP-027) 헤더가 고정될 때에는 공식 배너를 제외한 전체 헤더가 고정되게 구현하고 있다.」

ViewCheck는 고정 헤더가 스크롤 방향에 따라 적절히 동작하는지를 진단합니다.

📚 참고 출처

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

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

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