모바일에서 화면이 옆으로 밀리면 대개 개발자 도구 콘솔에서 document.documentElement.scrollWidth 를 먼저 확인합니다. 이 숫자가 화면 폭보다 크면 범인이 있다는 뜻입니다. 문제는 이 숫자가 멀쩡한데 화면은 잘려 있는 경우가 있다는 것입니다.
숫자는 멀쩡한데 화면은 잘려 있습니다
중간의 어떤 조상에 overflow: hidden 이 걸려 있으면, 그 안에서 넘친 내용은 거기서 잘려 나갑니다. 문서 전체로 보면 넘침이 없으므로 scrollWidth 는 정확히 화면 폭입니다. 그런데 눈에는 카드의 오른쪽이 잘려 있고 버튼의 절반이 사라져 있습니다.
반대 경우도 있습니다. scrollWidth 는 큰데 눈에 보이는 요소는 전부 제자리인 상황 — 화면 밖에 놓아 둔 장식 요소나 닫힌 메뉴 패널이 원인입니다. 어느 쪽이든 문서 하나짜리 숫자로는 위치를 알 수 없습니다.
요소 사각형으로 범인을 찾는 방법
모든 요소의 사각형을 재서 화면 오른쪽 경계를 넘는 것을 골라냅니다. 콘솔에 그대로 붙여 넣을 수 있습니다.
const w = document.documentElement.clientWidth; [...document.querySelectorAll('*')].filter(el => { const r = el.getBoundingClientRect(); return r.right > w + 1 || r.left < -1; }).slice(0, 20);
결과가 여러 개 나오는 것이 정상입니다. 자식 하나가 밀려나면 그 부모들도 함께 밀려나기 때문입니다. 그래서 목록의 마지막 쪽, 가장 깊은 요소부터 봅니다. 진짜 원인은 대개 거기 있습니다. 확인할 때는 그 요소에 outline: 2px solid 를 잠깐 주면 화면에서 바로 보입니다.
흔한 원인 다섯
첫 줄을 짚어 두겠습니다. 100vw 는 세로 스크롤바 폭을 포함하므로, 스크롤바가 자리를 차지하는 환경에서는 언제나 실제 콘텐츠 폭보다 큽니다. 전폭 배경을 만들려고 margin-left: calc(50% - 50vw) 같은 계산을 쓰면 여기에 더해 그 요소가 화면 중앙에 있지 않을 때 한쪽이 어긋납니다 — 목차 레일처럼 한쪽으로 치우친 배치 옆에서는 반드시 어긋납니다. 전폭 배경이 필요하면 그 구역 자체를 전폭 요소로 만드는 편이 확실합니다.
overflow-x: hidden 으로 덮지 않습니다
가장 빠른 해결처럼 보이는 것이 body { overflow-x: hidden; } 입니다. 증상은 사라지지만 원인은 그대로 남고, 대가가 둘 있습니다. 넘친 요소는 여전히 화면 밖에 있어 일부가 잘린 채로 보이고, 무엇보다 가로만 숨기고 세로를 보이게 두면 세로 쪽이 자동으로 스크롤 컨테이너가 됩니다.
이 두 번째 대가가 조용합니다. 스크롤 컨테이너가 하나 생기면 그 안의 position: sticky 가 전부 동작을 멈춥니다 — 에러도 경고도 없이 그냥 붙지 않습니다. 마지막 회차에서 이 이야기를 정면으로 다룹니다.
화면 점검을 절차로 만드는 방법은 개발 워크플로우 아카이브에 있고, 사이트 상태를 항목별로 점검하는 도구는 무료 도구에 공개돼 있습니다.
다음 회차
배치가 자리를 잡았다면 다음은 조작입니다. 다음 회차는 손가락으로 누를 수 있는 크기 — 커서 기준으로 만든 화면이 터치에서 실패하는 지점입니다.