팝업 띄울 때마다 화면이 덜컹! '스크롤바 밀림 현상' 1줄 해결법
쇼핑몰에서 상품 이미지를 클릭해 확대 창(팝업)을 띄우거나 닫을 때, 뒤에 깔린 배경 화면 전체가 오른쪽으로 덜컹거리며 밀렸다가 다시 돌아오는 현상을 겪어보셨나요?
별것 아닌 것 같지만, 이 미세한 흔들림은 웹사이트의 첫인상을 매우 엉성하고 '싼 티 나게' 만드는 치명적인 UX 버그입니다.
💡 팝업을 띄우면 왜 화면이 밀릴까요?
팝업창을 띄우면 뒤쪽 배경이 스크롤되지 않도록 막아두게 됩니다. 이때 화면 우측에 있던 약 15px 두께의 '수직 스크롤바'가 사라지면서, 스크롤바가 차지하고 있던 공간만큼 전체 화면이 우측으로 팽창해버리기 때문입니다.
1. 과거의 꼼수: 자바스크립트로 여백 채우기
이전에는 이 현상을 막기 위해 개발자가 자바스크립트로 "현재 브라우저의 스크롤바 너비가 몇 픽셀인지 계산해서, 팝업이 뜰 때 우측에 15px만큼 투명한 여백(Padding)을 강제로 넣어라"라는 매우 복잡하고 무거운 꼼수 코드를 짜야만 했습니다.
2. 모던 CSS의 마법: scrollbar-gutter 적용
이제는 CSS에 새롭게 추가된 scrollbar-gutter: stable; 단 1줄이면 모든 게 해결됩니다.
이 명령어는 브라우저에게 "스크롤바가 숨겨지더라도, 스크롤바가 있던 자리(Gutter)는 뼈대처럼 빈 공간으로 남겨두어라!"라고 지시하여 레이아웃이 밀리는 것을 원천 차단합니다.
/* 웹사이트 최상단 HTML 태그에 딱 한 줄만 선언해 두세요 */
html {
/* 스크롤바가 사라져도 레이아웃이 흔들리지 않게 공간을 고정합니다 */
scrollbar-gutter: stable;
}
"개발자의 맥북에서는 보이지 않는 버그까지 잡아냅니다."
스크롤바가 투명한 맥(Mac) 환경에서는 이 현상이 보이지 않기 때문에 수많은 에이전시가 이를 놓칩니다.
나눔웹은 윈도우 사용자의 비율까지 완벽하게 계산하여 단 1px의 흔들림도 허용하지 않습니다.