구매 버튼을 계속 보여 주려고 화면 아래에 고정했는데 마지막 배송 안내가 보이지 않습니다. 버튼 자체가 정상적으로 눌려도, 그 뒤에 가린 가격 조건이나 반품 링크를 읽을 수 없다면 페이지는 완성되지 않은 상태입니다. 고정 구매 바를 점검할 때는 버튼 크기보다 바가 차지하는 영역과 그 뒤로 들어가는 정보를 먼저 봅니다.
버튼 높이와 하단 바의 높이는 다릅니다
버튼이 44px이어도 위아래 여백, 가격 한 줄, 옵션 요약, 기기 안전 영역이 더해지면 바 전체는 훨씬 커집니다. 버튼의 CSS 높이를 본문 여백에 복사해 두면 짧은 문구에서는 맞아 보이다가 긴 옵션을 선택한 순간 본문을 가릴 수 있습니다.
가상 예로 화면 높이가 844px이고 바의 실제 높이가 96px이라면 바의 위쪽은 748px입니다. 반품 안내 링크가 화면의 724px부터 764px까지 있다면 마지막 16px이 바와 겹칩니다. 다음은 이 숫자를 사용한 설명용 계산이며 실제 사이트 측정 결과가 아닙니다.
| 항목 | 좌표·크기 | 판단 |
|---|---|---|
| 뷰포트 | 높이 844px | 화면의 아래쪽 기준 |
| 구매 바 | 위쪽 748px, 높이 96px | 본문을 덮는 시작점 |
| 반품 안내 링크 | 위쪽 724px, 아래쪽 764px | 748~764px의 16px 겹침 |
| 추가 스크롤 공간 | 바 96px + 예시 여유 16px | 아래쪽 링크를 바 위로 올릴 공간 확보 |
96px과 16px은 이 예제의 값입니다. 모든 사이트에 같은 여백을 넣는 권장값이 아닙니다. 그림자가 넓게 드리워지는 디자인이라면 요소 경계 밖의 시각적 가림도 함께 살펴봅니다.
여백은 문서 끝을 위해, 스크롤 여유는 초점 이동을 위해 둡니다
문서 아래의 padding-bottom은 마지막 내용을 바 위로 올릴 수 있는 실제 스크롤 공간을 만듭니다. scroll-padding-bottom은 스크롤 컨테이너에서 요소를 화면에 가져올 때 고려할 아래쪽 여유를 지정합니다. 두 속성은 역할이 다르므로 하나만 넣고 모든 문제가 해결됐다고 보지 않습니다.
아래는 원리를 보여 주는 CSS입니다. --purchase-bar-height에는 실제 바의 높이가 들어가야 합니다. 이미 본문 하단 여백이 있다면 그 값을 덮어쓰지 않도록 합치고, 이 속성이 적용되는 스크롤 컨테이너가 문서인지 별도 패널인지 확인합니다.
:root {
--purchase-bar-height: 96px; /* 설명용 값: 실제 높이로 갱신 */
--purchase-clearance: 16px;
scroll-padding-bottom:
calc(var(--purchase-bar-height) + var(--purchase-clearance));
}
.purchase-content {
padding-bottom:
calc(var(--purchase-bar-height) + var(--purchase-clearance));
}바의 높이가 내용에 따라 달라진다면 고정 숫자보다 실제 크기 변화에 맞춰 값을 갱신해야 합니다. 예를 들어 ResizeObserver로 바를 관찰하는 구현을 검토할 수 있습니다. 바를 숨기거나 고정을 해제했을 때는 추가 공간도 함께 조정합니다.
겹침이 의심되는 요소의 좌표를 직접 비교합니다
개발자 도구에서 바와 가려진 링크에 맞는 선택자를 찾은 뒤 다음처럼 경계를 확인할 수 있습니다. 예시의 두 선택자는 해당 사이트에 맞게 바꿔야 합니다. 이 코드는 화면을 고치지 않고 현재 좌표만 기록합니다.
const bar = document.querySelector('.purchase-bar');
const target = document.querySelector('#return-policy-link');
if (bar && target) {
const b = bar.getBoundingClientRect();
const t = target.getBoundingClientRect();
const overlaps = t.left < b.right && t.right > b.left
&& t.top < b.bottom && t.bottom > b.top;
console.table({
barTop: b.top, targetBottom: t.bottom, overlaps
});
}사각형이 겹친다는 결과만으로 시각적 가림의 정도까지 확정할 수는 없습니다. 바가 투명할 수도 있고 다른 레이어가 위에 있을 수도 있습니다. 좌표로 문제 위치를 좁힌 다음 실제 글자와 초점 표시를 화면에서 확인합니다.
옵션·쿠키·키보드가 함께 뜨는 상태를 만듭니다
첫 화면에서는 정상이어도 조작 뒤 높이가 바뀝니다. 가장 긴 옵션명과 가격 안내를 선택하고, 쿠키 안내나 채팅 버튼이 보이는 상태에서 화면 끝까지 내려갑니다. 쿠키 안내를 닫아야만 반품 링크를 볼 수 있다면, 닫기 버튼에 접근할 수 있는지도 봐야 합니다.
- 320px와 390px 폭에서 긴 옵션명이 두 줄이 되어도 필수 안내가 남는지 확인합니다.
- 텍스트 크기를 키운 상태와 짧은 가로 화면을 별도로 살펴봅니다.
- 입력란을 눌러 가상 키보드를 열고 오류 문구와 다음 입력란을 확인합니다.
- Tab과 Shift+Tab으로 바 앞뒤 링크를 오가며 초점 위치를 따라갑니다.
MDN의 env() 문서에서 설명하는 safe-area-inset-bottom은 안전 영역을 고려할 때 쓸 수 있습니다. 하지만 키보드가 덮는 전체 높이나 모든 브라우저 도구막대의 크기를 대신하는 값은 아닙니다. 실제 대상 기기에서 상태를 나눠 확인해야 합니다.
고정을 유지하는 것이 항상 목표는 아닙니다
화면이 짧거나 키보드가 열린 상태에서 구매 바가 읽을 공간을 너무 많이 차지하면 일반 문서 흐름으로 돌리는 방법을 검토합니다. 가격·옵션 요약을 줄일 때는 필수 조건을 삭제하지 말고, 다른 위치에서 같은 정보를 찾을 수 있게 합니다. 버튼을 어느 정보 뒤에 놓을지는 CTA와 정보 순서를 함께 정하는 기준과 연결됩니다.
WCAG 2.2의 Focus Not Obscured (Minimum)은 키보드 초점을 받은 요소가 제작자가 만든 콘텐츠에 완전히 가려지지 않도록 요구합니다. 여기서는 그 최소 기준에 더해 링크 문장 전체와 초점 표시가 읽히는 상태를 편집 목표로 삼습니다. 부분 가림과 완전 가림을 같은 기준 위반으로 단정하지는 않습니다.
배송·교환 조건이 들어갈 위치를 정할 때는 배송·교환 안내와 행동 버튼의 관계도 함께 보세요. 구매 바를 남기는 이유는 다음 행동을 돕기 위해서이며, 선택에 필요한 설명을 가리면서까지 고정할 이유는 없습니다.
원문 확인일: 2026년 10월 4일. CSS와 좌표는 적용 원리를 설명하는 예제이며 특정 사이트의 시험 통과 결과가 아닙니다.