[접근성연구·모바일] 가로 스크롤은 왜 생기나

고정 너비 사고 연구

〈디지털 접근성 연구 023〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.

들어가며

휴대폰으로 어떤 페이지를 보다가, 화면이 자꾸 옆으로 미끄러진 적이 있을 것이다. 위아래로만 읽고 싶은데 손가락이 살짝만 비뚤어져도 화면이 좌우로 흔들리고, 오른쪽 끝에는 무언가가 잘려 있다. 이것이 '가로 스크롤'이다. 세로로만 읽으면 되는 페이지가 옆으로도 밀리는 상태다.

가로 스크롤은 모바일에서 가장 흔하고 가장 눈에 띄는 붕괴 증상이다. 그런데 그 뒤에는 거의 항상 하나의 사고방식이 숨어 있다. '고정 너비(fixed width)'다. 어떤 요소의 너비를 화면에 맞춰 늘었다 줄었다 하게 두지 않고, 픽셀 단위의 정해진 값으로 못박아 두는 설계다. 이 고정값이 화면 너비보다 크면, 그 차이만큼 콘텐츠가 화면 밖으로 새어 나가 가로 스크롤이 된다.

이번 편은 가로 스크롤이라는 증상이 아니라 그 뿌리인 '고정 너비 사고'를 기준 연구의 관점에서 들여다본다. 왜 고정 너비가 좁은 화면에서 문제가 되는지, 어떤 요소들이 자주 고정되는지, 표준은 무엇을 권하는지, 그리고 어떤 관점으로 봐야 하는지를 정리한다.

1. 고정 너비란 무엇인가 — 사고의 출발

웹의 레이아웃에서 어떤 요소의 너비를 정하는 방법은 크게 두 가지다. 하나는 '고정'이다. '이 박스는 800픽셀'처럼 절대값으로 못박는다. 다른 하나는 '유연'이다. '이 박스는 부모 영역의 100%'처럼 비율로 정해, 화면이 좁아지면 함께 좁아지게 둔다.

데스크탑 시대에는 고정 너비가 자연스러운 사고였다. 화면 크기가 대체로 비슷했고, 디자이너는 '폭 몇 픽셀짜리 도화지'를 떠올리며 그 위에 요소를 배치했다. 도화지 크기가 일정하다면 그 위의 박스를 픽셀로 고정해도 문제가 없다. 오랫동안 웹은 이 '고정된 도화지' 위에서 그려졌다.

문제는 도화지 크기가 천차만별이 된 모바일 시대에 생겼다. 같은 페이지를 1920픽셀 데스크탑부터 360픽셀 휴대폰까지 다양한 폭에서 봐야 하는데, 그 안의 요소가 800픽셀로 고정되어 있으면, 360픽셀 화면에서는 440픽셀이 화면 밖으로 삐져나간다. 고정 너비 사고는 '도화지가 일정하다'는 옛 전제 위에 서 있고, 그 전제가 무너진 환경에서 가로 스크롤을 낳는다.

1-1. 고정이 늘 나쁜 것은 아니다

오해를 피하기 위해 분명히 해 두면, 고정 너비 자체가 죄는 아니다. 작은 아이콘처럼 화면과 무관하게 일정한 크기를 유지해야 하는 요소도 있다. 문제는 '화면 너비에 맞춰 줄어들어야 하는 큰 요소'를 고정값으로 묶을 때다. 본문 영역, 표, 큰 이미지, 콘텐츠 묶음처럼 화면을 가득 채우는 요소가 고정되면, 좁은 화면에서 곧장 새어 나간다. 고정과 유연을 '요소의 성격'에 맞게 나누어 쓰는 것이 핵심이다.

고정 너비가 적절한 요소와 유연해야 하는 요소를 나누어 정리하면 다음과 같다.

너비 방식	적절한 요소	부적절하게 쓰면	결과
고정(픽셀)	작은 아이콘·고정 배지	본문·표·큰 이미지에 적용	좁은 화면에서 새어 나감
유연(비율·최대너비)	본문 영역·콘텐츠 묶음	작은 아이콘까지 늘림	의도치 않은 확대(드묾)

고정과 유연은 옳고 그름이 아니라 '요소의 성격'에 맞춰 나눠 쓰는 문제다. 화면을 채우는 큰 요소는 유연이 기본이다. (관점)

2. 무엇이 자주 화면을 넘는가 — 흔한 범인들

가로 스크롤을 만드는 요소는 대체로 정해져 있다. 점검의 지도를 그리기 위해 유형별로 정리한다.

고정 너비 박스. 본문 영역이나 콘텐츠 묶음을 픽셀로 고정하면, 그 값보다 좁은 화면에서 그대로 새어 나간다. 가장 직접적인 원인이다.

큰 이미지·배너. 이미지가 자기 칸의 너비를 넘지 않도록 제한되어 있지 않으면, 원본 크기 그대로 출력되어 화면을 넘는다. 특히 가로로 긴 배너에서 자주 발생한다.

넓은 표. 칸이 많은 표는 본질적으로 넓다. 좁은 화면에 맞춰 접거나 가로로 따로 스크롤되게 처리하지 않으면, 표 전체가 페이지를 옆으로 밀어낸다.

끊기지 않는 긴 문자열. 긴 영문 주소, 참조번호, 띄어쓰기 없는 긴 단어는 줄바꿈되지 못하면 한 줄이 칸을 밀어내며 화면을 넘긴다.

화면 밖으로 절대 위치를 잡은 요소. 특정 요소를 화면의 정해진 위치에 띄우면서 그 위치가 화면 밖이면, 보이지 않는 채로 페이지 너비를 늘린다. 원인을 찾기 가장 어려운 유형이다.

다섯 범인을 눈에 보이는지·의심 단서·확인 난이도로 정리하면, 점검의 지도가 그려진다.

흔한 범인	눈에 보이나	의심 단서	확인 난이도
고정 너비 박스	보임	박스 근처에서 옆 밀림	쉬움
큰 이미지·배너	보임	이미지 오른쪽 잘림	쉬움
넓은 표	보임	표가 본문 폭 초과	쉬움
긴 문자열	보임	특정 단락만 정렬 어긋남	보통
화면 밖 절대 위치 요소	안 보임	넘치는 게 안 보이는데 스크롤 생김	어려움

2-1. 보이지 않는 범인이 가장 까다롭다

이 범인들 중 가장 까다로운 것은 '보이지 않는' 유형이다. 화면 밖에 절대 위치로 놓인 요소나, 투명하게 처리되어 눈에 안 띄는 요소가 페이지 너비를 늘리고 있으면, 화면에는 가로 스크롤만 보이고 그 원인은 어디에도 보이지 않는다. 눈에 보이는 표나 이미지가 범인일 때는 찾기 쉽지만, 보이지 않는 요소가 범인일 때는 점검에 더 큰 인내가 필요하다.

3. 표준은 무엇을 권하나 — 한 방향 스크롤

가로 스크롤과 가장 직접 맞닿는 국제 기준은 웹 콘텐츠 접근성 지침(WCAG)의 리플로(Reflow) 항목이다. 큰 화면에서 작은 화면 수준으로 콘텐츠 폭을 좁혔을 때, 정보나 기능을 잃지 않고 '한 방향 스크롤'만으로 내용을 볼 수 있어야 한다는 취지다. 세로로 읽는 페이지라면 세로 스크롤만으로, 가로로 읽는 콘텐츠라면 가로 스크롤만으로 충분해야 하며, 두 방향을 모두 강요해선 안 된다는 것이다.

여기에는 예외도 있다. 표나 지도처럼 2차원 배치 자체가 정보의 본질인 콘텐츠는, 가로 스크롤이 불가피할 수 있다. 다만 그런 경우라도 '본문 전체가 옆으로 밀리는' 것과 '표 영역만 따로 가로 스크롤되는' 것은 다르다. 전자는 페이지 전체의 붕괴이고, 후자는 표라는 특수 콘텐츠를 위한 제한적 처리다. 정확한 적용 폭(흔히 좁은 폭을 기준으로 함)과 예외 조건은 지침 원문에서 확인하는 것이 안전하다. 한국형 웹 콘텐츠 접근성 지침(KWCAG)과 공공 디자인 기준(KRDS)도 같은 방향을 가리키는 것으로 알려져 있으나, 항목과 문구는 각 문서를 직접 대조하는 편이 정확하다.

3-1. 표준이 가리키는 설계 원칙

이 기준을 설계의 언어로 옮기면 '화면을 넘지 않게 하라'가 된다. 큰 요소는 고정값 대신 화면에 맞춰 줄어드는 유연한 너비로, 이미지는 자기 칸을 넘지 않도록 최대 너비를 제한해, 긴 문자열은 줄바꿈되도록, 표는 따로 스크롤되거나 좁은 화면용으로 재배치되도록. 가로 스크롤을 없애는 일은 결국 '모든 요소가 화면 너비 안에 들어오게 하는' 설계로 귀결된다.

4. 관찰 — 옆으로 새는 페이지들

공공 영역의 여러 화면을 좁은 너비에서 열어 가로 스크롤이 생기는 자리를 모은 관찰을, 익명으로 정리한다.

한 장면에서는 본문 가운데 끼어 있던 안내 표가 화면 오른쪽 밖으로 빠져나가, 페이지 전체가 옆으로 밀렸다. 표만 따로 스크롤되는 것이 아니라 본문 전체가 함께 흔들렸다. 다른 장면에서는 상단 배너 이미지가 화면 너비를 무시하고 원본 크기로 출력되어, 이미지 오른쪽이 화면 밖으로 나갔다. 또 다른 장면에서는 어디를 봐도 넘치는 요소가 보이지 않는데 가로 스크롤만 생겼다. 화면 밖에 놓인 보이지 않는 요소가 너비를 늘린 것으로 추정되었으나, 화면만 봐서는 원인을 특정할 수 없었다.

이 관찰들의 공통점은 '데스크탑에서는 모두 멀쩡했다'는 데 있다. 넓은 화면에서는 모든 요소가 화면 안에 들어왔기에 가로 스크롤이 생기지 않았다. 고정 너비의 결함은 좁은 화면에서만 모습을 드러낸다.

세 관찰 장면을 추정 범인·스크롤 범위로 정리한다.

관찰 장면(익명)	추정 범인	스크롤 범위	데스크탑에서
본문 표가 옆으로 밀림	넓은 표·고정 너비	페이지 전체	본문 폭 안에 들어옴
상단 배너가 화면 넘침	큰 이미지	페이지 전체	화면 안에 들어옴
넘치는 게 안 보이는데 스크롤	화면 밖 절대 위치 요소(추정)	페이지 전체	너비 초과 없음

익명 관찰이며, 특히 마지막 장면의 '추정 범인'은 화면만으로는 단정할 수 없는 가설이다. 정확한 원인은 코드 확인이 필요하다. (관찰)

4-1. 가로 스크롤은 '작은 불편'이 아니다

가로 스크롤을 '조금 불편한 정도'로 가볍게 보기 쉽지만, 사용자 경험에서 그 비용은 작지 않다. 세로로 읽다가 손가락이 비뚤어질 때마다 화면이 옆으로 미끄러지면, 읽기의 흐름이 끊긴다. 한 손 조작에서는 이 미끄러짐이 더 잦다. 그리고 오른쪽으로 새어 나간 내용이 잘려 있으면, 사용자는 그 정보가 거기 있다는 것조차 모를 수 있다. 가로 스크롤은 불편을 넘어 정보 누락으로 이어질 수 있는 증상이다.

5. 점검의 관점 — 새는 자리를 찾아내려면

가로 스크롤은 좁은 화면에서 의도적으로 '옆으로 밀어보는' 것으로 가장 잘 드러난다. 점검의 시선은 다음과 같다.

좁은 화면에서 페이지를 위에서 아래로 내리며, 각 구간에서 화면을 좌우로 살짝 밀어본다. 화면이 따라 움직이는 구간이 있으면 그 부근에 넘치는 요소가 있다는 뜻이다. 그 자리 근처에서 넓은 표, 큰 이미지·배너, 긴 문자열, 고정 너비 박스를 먼저 의심한다. 눈에 보이는 범인이 없는데도 가로 스크롤이 생긴다면, 화면 밖에 놓인 보이지 않는 요소를 의심하고 별도로 확인한다. 화면을 확대했을 때 새로 가로 스크롤이 생기는지도 함께 본다.

5-1. '표만 스크롤'과 '페이지 전체 스크롤'을 구분하기

점검에서 중요한 구분은 가로 스크롤이 '특정 영역(표 등)에 한정되는가', 아니면 '페이지 전체가 밀리는가'다. 표나 지도처럼 2차원 정보가 본질인 콘텐츠가 그 영역 안에서만 가로 스크롤된다면, 그것은 불가피한 처리일 수 있다. 그러나 본문 전체가 옆으로 밀린다면 그것은 명백한 붕괴다. 이 둘을 구분해 기록하면, '고쳐야 할 것'과 '용인할 수 있는 것'을 나눌 수 있다.

스크롤 범위에 따른 판정을 표로 정리한다.

스크롤 범위	예시	판정	점검 기록
영역 한정(표·지도 내부)	표 안에서만 가로 스크롤	불가피할 수 있음	'용인 가능' 표시
페이지 전체 밀림	본문 전체가 옆으로 흔들림	명백한 붕괴	'고칠 것' 표시

5-2. 반론·한계 — 가로 스크롤 점검의 약점

가로 스크롤 점검에도 반론과 한계가 있다.

반론·한계	내용	보완 방향
"가로 스크롤이 늘 잘못은 아니다"	표·지도·코드는 영역 내 스크롤이 자연스러움	영역 한정 vs 전체 밀림을 구분
"보이지 않는 원인을 못 찾는다"	화면 밖 요소는 눈으로 특정 불가	코드/도구로 넘침 요소를 식별
"눈으로 밀어보기는 재현이 약하다"	손 점검은 기록·재현이 어려움	여러 너비 자동 캡처로 근거 남김
"기준 폭은 확정이 아니다"	Reflow 적용 폭·예외는 원문마다 다름	WCAG/KWCAG/KRDS 원문 대조

점검은 '증상을 가리기'가 아니라 '뿌리(고정 너비)를 찾기'에 가깝다. 눈 점검과 도구 점검이 서로를 보완할 때 보이지 않는 범인까지 좁힐 수 있다. (관점)

5-3. ViewCheck 관점 — 오버플로 점검의 분담

가로 스크롤·오버플로 점검에서 사람과 자동 점검의 분담을 표로 정리한다. 특정 도구 사용을 권하는 것이 아니라 구조만 둔다.

점검 항목	자동 점검이 잘하는 것	사람이 잘하는 것
문서 폭 초과	여러 너비에서 폭 초과를 일괄 탐지	어느 요소가 원인인지 맥락 판단
보이지 않는 범인	화면 밖 요소·넘침 영역을 구조적으로 식별	그 요소가 '정보를 가리는지' 판단
표·지도 예외	영역 내 스크롤을 구분해 표시	'용인 가능/붕괴'를 가치 판단
확대 시 새 스크롤	확대 상태를 자동 캡처·비교	확대 사용의 실제 부담 체감

자동 점검은 '어디서 폭을 넘었나'를 빠르게, 특히 보이지 않는 범인까지 좁혀 주고, 사람은 '용인 가능한가/고쳐야 하는가'를 판정한다. 둘은 분담 관계다. (관점)

6. 한 장 요약

구분	핵심
증상	세로로 읽으면 되는데 화면이 옆으로 밀림
뿌리	고정 너비 사고 — 큰 요소를 픽셀로 못박음
고정의 옳고 그름	작은 요소는 고정 가능, 화면 채우는 큰 요소는 유연해야
흔한 범인	고정 박스·큰 이미지·넓은 표·긴 문자열·화면 밖 요소
가장 까다로운 것	보이지 않는 요소가 너비를 늘리는 경우
표준 방향	한 방향 스크롤(Reflow), 표·지도는 예외 (수치·예외는 원문 확인)
점검 핵심	좌우로 밀어보며 새는 자리 찾기, 영역 한정 vs 전체 구분

맺으며

가로 스크롤은 증상이고, 그 뿌리는 '고정 너비 사고'다. 도화지 크기가 일정하던 시절의 설계 습관이, 도화지가 천차만별이 된 모바일 환경에서 화면을 넘치는 요소를 만든다. 데스크탑에서 멀쩡한 것은 넓은 화면이 그 결함을 덮어주기 때문일 뿐, 좁은 화면에서는 차이만큼 콘텐츠가 새어 나간다.

우리는 가로 스크롤을 '작은 불편'이 아니라 '읽기의 흐름을 끊고 정보를 잃게 할 수 있는 붕괴'로 본다. 그리고 그 해법은 증상을 가리는 것이 아니라, 큰 요소를 화면에 맞춰 유연하게 두는 설계로 뿌리를 바꾸는 데 있다. 다음 편에서는 이 새어 나감을 점검의 시선으로 더 좁혀, '화면 밖으로 새는 콘텐츠'를 어떻게 찾아내는지를 다룬다.

다음 편 예고 (024): 〈화면 밖으로 새는 콘텐츠 / 오버플로 점검 관점〉 — 화면 너비를 넘어 새어 나가거나 보이지 않게 잘리는 콘텐츠를, 점검에서 어떻게 드러내고 원인을 좁혀갈지 다룬다.

참고한 공개 자료(출처):

W3C, Web Content Accessibility Guidelines (WCAG) 2.1 — Reflow(1.4.10) (정확한 적용 폭·예외는 원문 확인 권장)
한국지능정보사회진흥원(NIA), 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.x — 콘텐츠 재배치 관련 항목
행정안전부·디지털플랫폼정부, KRDS(공공 디자인 시스템) 반응형·레이아웃 관련 공개 문서
MDN Web Docs — Overflow, max-width, Responsive images, Word-break 개요