웹사이트에서 긴 페이지를 읽다 보면 화면 아래쪽으로 이동한 뒤 다시 맨 위로 올라가야 하는 경우가 있습니다. 상단 메뉴에서 다른 페이지로 이동하거나 검색 기능을 사용하려면 처음 위치로 돌아가야 하기 때문입니다.
이런 불편을 줄이는 UI 기술이 Sticky Header(스티키 헤더)입니다. 사용자가 페이지를 아래로 스크롤하더라도 상단 메뉴 영역이 화면 위쪽에 계속 보이도록 만드는 방식입니다.
1. Sticky Header는 어떤 모습일까?
일반적인 웹페이지에서는 상단 메뉴가 페이지 콘텐츠와 함께 위로 사라집니다. 반면 Sticky Header를 적용하면 사용자가 화면을 내려도 로고, 주요 메뉴, 검색창 등이 화면 상단에 유지됩니다.
예를 들어 비아토 라이프밸런스 홈페이지를 생각해 보겠습니다. 상단에는 비아토 로고, 스토리, 건강, 돈, 관계, 일과 삶, 전문가 칼럼, 검색 및 로그인 메뉴가 있습니다.
방문자가 건강 콘텐츠를 읽기 위해 화면을 아래로 내리더라도 상단 메뉴가 계속 보이면 다른 콘텐츠로 쉽게 이동할 수 있습니다.
시각적 예시는 같은 홈페이지를 스크롤 전과 스크롤 후 두 장면으로 비교하면 좋습니다. 첫 번째 장면에는 큰 메인 이미지와 상단 메뉴가 보이고, 두 번째 장면에는 본문이 아래로 이동했지만 상단 메뉴는 화면 위에 남아 있는 모습을 표현합니다.
2. Sticky Header와 Fixed Header의 차이
두 용어는 비슷해 보이지만 동작 방식에 차이가 있습니다.
Sticky Header는 특정 위치에 도달하면 상단에 고정되는 방식입니다. 일반적으로 페이지의 스크롤 흐름에 포함되어 있다가 지정한 위치에서 고정됩니다.
Fixed Header는 처음부터 화면의 특정 위치에 고정되는 방식입니다. 페이지를 스크롤해도 항상 같은 위치에 유지됩니다.
쉽게 말해 Sticky는 스크롤에 따라 고정 상태가 적용되고, Fixed는 처음부터 고정되어 있다는 차이가 있습니다.
어떤 방식을 선택할지는 홈페이지의 목적과 사용 환경에 따라 결정하면 됩니다.
3. AI에게 어떻게 요청해야 할까?
막연한 요청은 다음과 같습니다.
“홈페이지 메뉴가 항상 보이도록 만들어 줘.”
이렇게 요청하면 AI가 메뉴를 고정하더라도 콘텐츠가 메뉴 아래에 가려지거나 모바일에서 화면을 너무 많이 차지할 수 있습니다.
구체적인 요청은 다음과 같습니다.
“홈페이지 상단 메뉴에 Sticky Header를 적용해 줘. 페이지를 스크롤하면 상단 메뉴가 화면 위에 유지되도록 하고, 스크롤 위치에 따라 그림자와 배경색을 적용해 콘텐츠와 구분해 줘. 모바일에서는 메뉴를 간결하게 표시해 줘.”
단순히 고정하는 것뿐 아니라 스크롤에 따른 디자인 변화와 모바일 동작까지 지정하는 것이 중요합니다.
4. 바로 복사해서 사용하는 실전 프롬프트
아래 내용을 복사해 자신의 홈페이지에 적용해 보세요.
비아토 라이프밸런스 홈페이지의 상단 메뉴에 Sticky Header 기능을 적용해 줘.
상단에는 로고, 스토리, 건강, 돈, 관계, 일과 삶, 전문가 칼럼 메뉴를 배치해 줘.
페이지를 아래로 스크롤해도 헤더가 화면 상단에 유지되도록 해 줘.
스크롤 전에는 배경이 자연스럽게 보이도록 하고, 스크롤 후에는 흰색 배경과 은은한 그림자를 적용해 줘.
메뉴와 본문 콘텐츠가 겹치지 않도록 헤더 높이를 고려해 줘.
로고를 클릭하면 홈페이지 첫 화면으로 이동하도록 해 줘.
현재 선택된 메뉴는 시각적으로 구분해 줘.
PC에서는 전체 메뉴를 표시하고, 모바일에서는 메뉴 버튼을 통해 펼쳐지는 형태로 구성해 줘.
모바일 메뉴를 열고 닫는 동작이 자연스럽도록 구현해 줘.
스크롤할 때 헤더가 심하게 흔들리거나 콘텐츠가 갑자기 이동하지 않도록 해 줘.
키보드 접근성과 화면 낭독기 사용도 고려해 줘.
5. 결과가 마음에 들지 않을 때
상단 메뉴가 너무 두껍다면
“스크롤을 시작하면 헤더 높이를 조금 줄여 줘. 로고와 메뉴는 유지하되 콘텐츠 영역을 더 넓게 확보해 줘.”
메뉴가 본문을 가린다면
“고정 헤더의 실제 높이를 고려해 본문 상단 여백을 조정해 줘. 제목이나 첫 번째 콘텐츠가 헤더 뒤에 가려지지 않도록 해 줘.”
스크롤할 때 화면이 부자연스럽다면
“스크롤 위치에 따라 헤더의 배경과 그림자만 부드럽게 변경해 줘. 헤더가 사라졌다 나타나는 동작은 사용하지 말아 줘.”
모바일에서 메뉴가 복잡하다면
“모바일에서는 로고와 메뉴 버튼만 기본적으로 표시하고, 메뉴 버튼을 누르면 전체 메뉴가 펼쳐지도록 해 줘. 메뉴 선택 후에는 메뉴가 닫히도록 해 줘.”
6. Sticky Header를 사용할 때 기억할 점
헤더 높이를 적절하게 설정하세요. 화면의 너무 많은 공간을 차지하면 콘텐츠를 읽기 어려워집니다.
본문이 가려지지 않도록 하세요. 고정 헤더의 높이만큼 콘텐츠 위치를 고려해야 합니다.
모바일 환경을 별도로 설계하세요. PC 메뉴를 그대로 축소하는 것보다 모바일 전용 메뉴 구성이 효과적입니다.
스크롤 동작을 자연스럽게 만드세요. 지나치게 많은 애니메이션은 오히려 사용성을 떨어뜨립니다.
키보드 접근성을 고려하세요. 메뉴 이동과 선택이 마우스 없이도 가능해야 합니다.
특히 병원 업무 시스템에서는 환자 목록이나 검사 결과처럼 긴 화면을 사용하는 경우가 많습니다. 상단에 검색창과 주요 기능을 유지하면 업무 중 화면 이동을 줄이는 데 도움이 됩니다.
오늘 기억할 한 가지
Sticky Header는 페이지를 스크롤해도 중요한 상단 메뉴를 계속 사용할 수 있도록 만드는 UI 기술입니다.
AI에게 요청할 때는 단순히 메뉴를 고정하라고 하지 말고, 스크롤 전후의 디자인 변화, 본문과의 간격, 모바일 메뉴 동작까지 함께 설명하세요.
다음 편에서는 현재 웹사이트에서 내가 어느 위치에 있는지 알려주는 Breadcrumb Navigation(브레드크럼 내비게이션)을 살펴보겠습니다. 병원 EMR과 관리자 프로그램의 복잡한 메뉴 구조를 예로 들어 실전 프롬프트를 알아보겠습니다.