고정 헤더는 항상 좋은가요?

주요 기능에 자주 돌아가야 하는 긴 페이지에서 유용해요. 짧은 페이지나 읽기 중심 화면에서는 숨기거나 작게 하는 게 나아요.

position: sticky와 fixed는 무엇이 다른가요?

sticky는 원래 자리에 있다가 스크롤 기준점에서 붙고, fixed는 처음부터 화면에 고정돼 내용 흐름에서 빠져요.

고정 헤더

⚙️ 공학·기술 작성 캠퍼스다운 위키 편집부 최종 수정 2026년 10월 27일

고정 헤더는 페이지를 아래로 스크롤해도 화면 상단에 계속 남아 있는 머리글 영역으로, 주로 로고, 검색, 메뉴를 담아요.

1. 왜 따라오게 할까
2. 작은 화면의 비용
3. 내용 가림과 접근성
4. 자주 묻는 질문
5. 참고문헌

왜 따라오게 할까

긴 페이지를 내려가다 검색이나 메뉴가 필요하면 맨 위까지 다시 올라가야 해요. 고정 헤더는 이 이동 비용을 없애 줘요. 피롤리와 카드(1999)의 정보 채집 관점에서 보면, 다음 정보로 가는 길이 늘 가까이 있는 셈이에요. 라우브하이머(2021)는 고정 헤더가 유용할 수 있지만 작고 대비가 분명해야 하며 내용을 방해하지 않아야 한다고 정리했어요. 앱에서는 머티리얼(Google, n.d.)의 상단 바처럼 스크롤에 따라 높이가 줄어드는 방식도 써요.

작은 화면의 비용

김과 동료들(2015)이 보였듯 작은 화면은 한 번에 보이는 내용이 적은데, 헤더가 높이를 차지하면 그만큼 읽을 공간이 줄어요. 가로 모드에서는 이 문제가 더 커져요. 그래서 많은 모바일 사이트는 아래로 스크롤할 때 헤더를 숨기고, 위로 조금만 스크롤하면 다시 보여줘요. 또 화면 맨 위는 피츠(1954)의 법칙으로 보면 엄지에서 멀어 누르기 어려워요. 자주 쓰는 기능은 하단 내비게이션에 두는 것도 방법이에요.

내용 가림과 접근성

웹에서는 MDN(n.d.)이 설명하는 position: sticky로 간단히 만들 수 있어요. 그런데 목차 링크로 이동하면 제목이 헤더 밑에 숨는 문제가 자주 생겨요. scroll-padding-top으로 헤더 높이만큼 여백을 주면 해결돼요. WCAG 2.2(W3C, 2023)의 2.4.11 기준처럼 키보드 초점이 헤더에 가려지면 안 되고, 1.4.10 기준처럼 확대했을 때 헤더가 화면을 다 차지해서도 안 돼요. 노치 기기에서는 세이프 에어리어만큼 위 여백도 챙겨요.

자주 묻는 질문

고정 헤더는 항상 좋은가요?: 주요 기능에 자주 돌아가야 하는 긴 페이지에서 유용해요. 짧은 페이지나 읽기 중심 화면에서는 숨기거나 작게 하는 게 나아요.
position: sticky와 fixed는 무엇이 다른가요?: sticky는 원래 자리에 있다가 스크롤 기준점에서 붙고, fixed는 처음부터 화면에 고정돼 내용 흐름에서 빠져요.

출처 검토일: 2026-10-27