마케팅 페이지를 정적 HTML로 배포하는 팀은 여전히 고전적인 UX 결함과 싸웁니다. 긴 글이 스크롤 가능해지는 순간, 고전 스크롤바가 인라인 끝에서 12~17픽셀을 차지하고, 가운데 맞춘 히어로·고정 내비·모달 정렬이 옆으로 “튀어” 보입니다. 디자인 팀은 레이아웃 시프트라 부르고, 웹 성능 담당은 CLS로 기록합니다. 2026년에는 scrollbar-gutter: stable이 선언적 해법입니다. 페이지가 짧아 실제로 스크롤할 필요가 없을 때도 브라우저가 홈을 비워 두기 때문에, 나중에 overflow가 바뀌어도 그리드가 다시 흔들리지 않습니다. 이 글은 클라이언트 라우터 없이 손으로 쓰거나 정적 생성기로 만든 사이트를 대상으로, 다이얼로그·sticky 크롬과의 조합, @supports 폴백, 그리고 Safari·WebKit 실기기 사인오프가 왜 헤드리스만으로는 부족한지 정리합니다. 문서 간 시각 연속성을 다루는 주제는 정적 MPA에서의 View Transitions API 글과 함께 읽으면 좋습니다. 두 기능은 서로 다른 문제를 풀지만, 같은 릴리스 트레인에 묶여 배포되는 경우가 많습니다.
결과물로 의사결정 표, 붙여 넣기 가능한 @supports 레시피, 홈 폭·CLS 예산에 대한 숫자 감각, 그리고 임대 Mac mini에서 돌릴 Safari 체크리스트를 가져가실 수 있습니다.
스크롤 가능성이 가운데 정렬을 깨는 이유
overflow-y가 수화 이후 visible에서 auto로 바뀌거나, CMS 미리보기가 더 긴 블록을 주입하는 순간, 고전 스크롤바가 나타나 수평 공간을 빼앗습니다. margin-inline: auto로 1200픽셀 한도를 둔 기사 본문은, 사용자가 첫 페인트에서 기억한 뷰포트 크롬과 비교해 약 15픽셀 정도 비대칭으로 보일 수 있습니다. 배경만 100vw로 깐 sticky 헤더는 더 심합니다. 배경은 뷰포트 전체를 덮는데, 본문은 홈을 반영하니 한 프레임만 어긋나도 “어색함”이 큽니다.
수십 년간 window.innerWidth - document.documentElement.clientWidth로 폭을 재는 자바스크립트 우회가 있었지만, 수화 타이밍과 경쟁하고, 확대된 뷰포트나 가상 스크롤 목록에서는 깨집니다. 스크롤이 시작되기 전까지 오버레이 스크롤바를 숨기는 플랫폼에서는 측정 자체가 흔들립니다. 정책을 CSS로 옮기면 페인트 시점 분기가 줄고, Eleventy·Astro·Hugo 같은 산출물도 결정적이 됩니다.
2026년 초 공개 마케팅 템플릿의 텔레메트리를 보면, 데스크톱 세션의 대략 4~7%는 여전히 오버레이가 아닌 고전 스크롤바를 씁니다. 홈 예약을 무시하면 엄격한 CLS 예산에서 바로 탈락하기에 충분한 비중입니다.
디자인 토큰에는 scrollbar-gutter 선택과 맞춘 --page-gutter-inline을 추가해, 컴포넌트 라이브러리가 대칭 패딩을 하드코딩해 홈과 싸우지 않게 하세요. RTL 로케일은 미러 패딩과 함께 검토해야 합니다.
제품 팀과 약속할 때는 “픽셀 단위로 완전 동일”보다 “사용자가 인지하는 점프 제거”에 초점을 맞추면 협상이 수월합니다. 미세한 비대칭은 브랜드 가이드에 적지 않았을 뿐, 측정 도구에는 잡히는 경우가 많습니다.
폴백과 함께 scrollbar-gutter 작성하기
점진 향상은 스크롤 루트에서 시작합니다. 대부분의 정적 사이트는 html 또는 body 한 곳에만 규칙을 두어 이중 예약을 피합니다.
html {
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; } /* 최후 수단: 짧은 페이지에도 스크롤바 표시 */
}@supports not 가지는 의도적으로 거칩니다. 엔진이 scrollbar-gutter를 모를 때도 overflow-y: scroll로 항상 공간을 비우지만, 짧은 랜딩에서 스크롤 트랙이 항상 보이는 대가를 치릅니다. CLS가 계약상 더 중요한지, 미니멀 크롬이 더 중요한지 브랜드가 선택해야 합니다.
overflow-x: hidden은 마케팅이 넓은 표를 주입할 때 앵커 다이얼로그와 상호작용할 수 있으니 신중히 쓰세요. 가로 클리핑이 세로 홈과 겹치면 디버깅이 어렵습니다.
정적 CSS 번들은 레이아웃 프리미티브와 같은 해시 파일에 이 선언을 넣어, CDN 부분 배포가 오래된 HTML과 짝이 어긋나지 않게 하세요. 운영은 HTML 버전과 스타일 해시를 함께 롤백할 수 있는 릴리스 노트를 남기는 편이 안전합니다.
스테이징에서는 data-scrollbar-gutter="on" 같은 body 속성 뒤에 기능을 숨겨, 시각 회귀가 끝난 뒤에만 프로덕션에서 제거하는 패턴도 흔합니다.
표: stable·auto·레거시
| 키워드·방식 | 도움이 되는 경우 | 트레이드오프 |
|---|---|---|
stable | 비동기 콘텐츠 로드 뒤에 스크롤 가능성이 바뀌는 마케팅 페이지 | 실제로는 절대 스크롤하지 않을 아주 짧은 페이지에서 약간의 비대칭 |
auto | overflow가 확실할 때만 홈을 원할 때 | 첫 페인트 이후 스크롤 가능성이 바뀌면 첫 시프트를 막지 못함 |
| 자바스크립트 폭 재기 | 레거시 엔터프라이즈 브라우저 | 확대·분할 뷰·가상 목록에서 깨지기 쉬움 |
다이얼로그·백드롭 스크롤 잠금·중첩 overflow
모달 패턴은 법적 약관을 안쪽 스크롤 영역에 두고 body에 overflow: hidden을 거는 경우가 많습니다. 백드롭이 잠길 때 스크롤바가 사라지면 다이얼로그 자체도 밀릴 수 있으니, 홈 정책을 다이얼로그를 열기 전에 CSS에 고정해 잠금·해제 전환이 레이아웃을 다시 계산하지 않게 하세요.
네이티브 <dialog>를 쓰면, inert 백드롭이 루트 홈 선택과 어떻게 겹치는지 Safari 소수 버전마다 다듬어 왔습니다. 마이너 업데이트마다 한 번씩 재확인하는 것이 좋습니다.
두 칼럼 문서처럼 중첩 스크롤 패널은 내부에 overscroll-behavior: contain을 두어 고무줄 스크롤이 루트 홈 예약과 싸우지 않게 하세요.
position: sticky 마케팅 바와 함께 쓸 때는 110% 확대에서 테스트하세요. sticky 오프셋이 홈 예약 뒤에 다시 계산되면, 동시에 transform 애니메이션이 있을 때 한 프레임 튐이 드러납니다.
모달 안쪽에 지도·임베드가 있으면 서드파티 iframe이 스크롤 정책을 바꿀 수 있으니, QA 시나리오에 “임베드 있음/없음”을 모두 넣으세요.
클라우드 Mac mini에서의 Safari QA
Playwright WebKit은 파싱 검증에는 좋지만, 첫 휠 이벤트 뒤에야 나타나는 오버레이 스크롤바 휴리스틱 때문에 생기는 미세 시프트까지는 재현하지 못하는 경우가 있습니다. Apple 실리콘 Safari에 20~35분을 배정하세요. 계약 사인오프는 안정 채널, 스크롤바 회귀 분석은 Safari Technology Preview가 유리합니다.
장비 조달이 늦으면 스프린트 동안 클라우드 Mac mini를 임대하세요. MacHTML Apple Silicon 호스트는 대략 $16.9/일 전후로 책정되는 경우가 많고, SSH로 정적 번들을 밀어 넣고 VNC로 프로덕션 Safari 설정과 나란히 비교할 수 있어, 노트북을 밤새 택배로 보내는 것보다 저렴한 편입니다.
운영 color-scheme, ::-webkit-scrollbar 테마(있다면), font 스택을 프로덕션과 동일하게 맞추세요. 커스텀 스크롤바 스타일은 홈 폭 가정을 바꿉니다.
다이얼로그를 120fps 슬로모션으로 녹화하면, 백드롭과 모달 사이 한 프레임 불일치를 증거로 정리하기 쉽습니다.
CDN 캐시 키는 scrollbar-gutter를 포함한 CSS 해시에 묶어, 부분 배포가 HTML과 레이아웃 토큰을 어긋나게 하지 마세요.
접근성 설정(스크롤바 항상 표시 등)을 켠 상태에서도 한 번씩 확인하면, 내부 지원팀 문의를 줄일 수 있습니다.
CLS 예산과 텔레메트리
마케팅 SLA가 데스크톱 LCP 페이지에서 CLS 0.05 이하를 요구하는 경우가 늘었습니다. 홈을 선제 예약하는 비용은, 늦은 자바스크립트 패딩 보정으로 누적 시프트를 줄이려는 비용보다 종종 작습니다.
RUM 파이프라인에서 수평 시프트 히스토그램을 보내세요. 라우트 전환에서 8픽셀을 넘는 스파이크는 대개 스크롤 가능성이 홈 정책 없이 바뀌었다는 신호입니다.
모달 열림 이벤트와 같은 세션에서 CLS 회귀가 0.02를 넘으면 알림을 걸면, 스크롤 잠금이 스크롤바만 없애고 폭 보정을 잊은 경우를 빨리 찾습니다.
분기마다 다이얼로그가 많은 플로우에서 가장 긴 세션 30건을 수동 검토하세요. 자동 버킷은 오버레이 스크롤바 페이드인을 “이미지 레이아웃 시프트”로 잘못 라벨하는 경우가 있습니다.
경영진 보고용으로는 “수정 전후 픽셀 이동 p95” 한 줄과 녹화 링크만 있어도 충분한 경우가 많습니다.
정적 파이프라인 롤아웃 체크리스트
- 시각 디프가 스테이징에서 통과할 때까지 body data 속성 뒤에 스테이징합니다.
- Playwright로 히어로의 경계 상자 x 오프셋을, 키 큰 픽스처 주입 전후로 비교하고 6픽셀을 넘으면 알림을 냅니다.
- 어떤 로케일을 먼저 출하할지 문서화하고, RTL은 미러 패딩 토큰과 함께 검토합니다.
- Lighthouse·WebPageTest 추적을 Safari 화면 캡처와 같은 세션 ID로 보관해 감사 추적을 남깁니다.
FAQ
scrollbar-gutter가 overflow-y: scroll 우회를 대체하나요?
최신 상시 업데이트 대상이라면 대체에 가깝습니다. 레거시 준수 모드에는 @supports not 탈출구를 남기세요.
stable이 아주 짧은 랜딩에서 공간을 낭비하나요?
약간은 그렇습니다. 항상 보이는 스크롤바와 비교해 CLS 영향을 보고 브랜드가 받아들일 정책을 고르세요.
100vw 배경과 상호작용하나요?
그렇습니다. 텍스트 칼럼에 묶인 배경에는 raw 뷰포트 단위보다 논리 폭 토큰을 선호하세요.
Apple Silicon Mac mini는 WebKit 스크롤바 논쟁을 가장 빨리 정리할 수 있는 플랫폼입니다. 네이티브 오버레이 휴리스틱, 긴 녹화 세션에서 예측 가능한 발열, 리눅스 VM이 흉내 내기 어려운 macOS 접근성 토글이 그 이유입니다. MacHTML은 SSH·VNC를 갖춘 클라우드 Mac mini 호스트를 임대해, 정적 사이트 팀이 scrollbar-gutter·다이얼로그·sticky 크롬을 또 다른 CapEx 주기 없이 검증할 수 있게 합니다. 스프린트에 맞춰 프로비저닝하고, 증거를 모은 뒤, 녹색이면 내리면 됩니다.
클라우드 Mac mini에서 Safari 레이아웃 QA
실제 WebKit 동작으로 scrollbar-gutter, 모달 스크롤 잠금, 고정 내비게이션을 검증하세요.