쇼핑몰에서 상품 이미지를 클릭해 확대 창(팝업)을 띄우거나 닫을 때, 뒤에 깔린 배경 화면 전체가 오른쪽으로 덜컹거리며 밀렸다가 다시 돌아오는 현상을 겪어보셨나요?
별것 아닌 것 같지만, 이 미세한 흔들림은 웹사이트의 첫인상을 매우 엉성하고 '싼 티 나게' 만드는 치명적인 UX 버그입니다.

1. 과거의 꼼수: 자바스크립트로 여백 채우기

이전에는 이 현상을 막기 위해 개발자가 자바스크립트로 "현재 브라우저의 스크롤바 너비가 몇 픽셀인지 계산해서, 팝업이 뜰 때 우측에 15px만큼 투명한 여백(Padding)을 강제로 넣어라"라는 매우 복잡하고 무거운 꼼수 코드를 짜야만 했습니다.

2. 모던 CSS의 마법: scrollbar-gutter 적용

이제는 CSS에 새롭게 추가된 scrollbar-gutter: stable; 단 1줄이면 모든 게 해결됩니다.
이 명령어는 브라우저에게 "스크롤바가 숨겨지더라도, 스크롤바가 있던 자리(Gutter)는 뼈대처럼 빈 공간으로 남겨두어라!"라고 지시하여 레이아웃이 밀리는 것을 원천 차단합니다.

/* 웹사이트 최상단 HTML 태그에 딱 한 줄만 선언해 두세요 */
html {
    /* 스크롤바가 사라져도 레이아웃이 흔들리지 않게 공간을 고정합니다 */
    scrollbar-gutter: stable; 
}