[접근성연구·모바일] 화면 밖으로 새는 콘텐츠

오버플로 점검 관점

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

들어가며

앞 편(023)에서 가로 스크롤의 뿌리인 '고정 너비 사고'를 기준 연구로 다뤘다. 이번 편은 그 시선을 점검의 현장으로 옮긴다. '오버플로(overflow)', 즉 콘텐츠가 자기 칸이나 화면을 넘쳐 흘러나가는 상태를 어떻게 찾아내고 원인을 좁혀갈지에 관한 점검 관점이다.

오버플로는 두 얼굴을 가진다. 하나는 '새어 나감'이다. 콘텐츠가 화면 밖으로 빠져나가 가로 스크롤을 만든다. 이것은 눈에 띈다. 다른 하나는 '잘림'이다. 넘친 부분이 가로 스크롤도 없이 그냥 보이지 않게 잘려 사라진다. 이것은 눈에 띄지 않는다. 두 얼굴 모두 '콘텐츠가 제자리에 다 담기지 못했다'는 같은 원인에서 나오지만, 점검에서 드러나는 방식이 다르다.

이 글은 오버플로를 점검의 시선으로 정리한다. 새어 나감과 잘림을 어떻게 구분해 찾는지, 어떤 신호를 보는지, 원인을 어떻게 좁혀가는지, 그리고 발견을 어떻게 기록하는지를 다룬다. 특정 사이트를 지목하지 않고, 점검 방법 자체에 초점을 둔다.

1. 오버플로의 두 얼굴 — 새어 나감과 잘림

오버플로 점검의 출발은 두 얼굴을 구분하는 것이다. 같은 '넘침'이라도 결과가 정반대로 나타나기 때문이다.

새어 나감. 넘친 콘텐츠가 화면 밖으로 빠져나가되, 스크롤하면 볼 수 있는 상태다. 가로 스크롤 막대가 생기고, 화면을 옆으로 밀면 잘린 부분이 나타난다. 사용자는 불편하지만 적어도 그 정보에 닿을 수는 있다.

잘림. 넘친 콘텐츠가 잘려나가 보이지 않게 되는 상태다. 넘치는 부분을 잘라내도록 설정된 컨테이너에서 일어난다. 가로 스크롤조차 생기지 않아, 사용자는 그 자리에 더 많은 내용이 있었다는 사실조차 모른다. 정보가 조용히 사라진 것이다.

이 둘 중 더 위험한 것은 잘림이다. 새어 나감은 불편하지만 정보가 살아 있고, 점검에서도 가로 스크롤이라는 신호로 쉽게 드러난다. 잘림은 정보가 사라지고, 신호도 없어 점검에서 놓치기 쉽다. 그래서 오버플로 점검은 '눈에 띄는 새어 나감'뿐 아니라 '눈에 띄지 않는 잘림'을 의식적으로 찾아야 한다.

오버플로의 두 얼굴을 신호·정보 생존·점검 난이도로 대비하면 차이가 또렷해진다.

구분	신호(가로 스크롤)	정보 생존	점검 난이도	위험도
새어 나감	있음(옆 밀림)	스크롤하면 닿음	쉬움	보통
잘림	없음(화면 깔끔)	보이지 않게 사라짐	어려움	높음

깔끔해 보이는 화면이 더 위험할 수 있다. 신호가 없는 잘림은 의식적으로 찾지 않으면 놓친다. (관점)

1-1. 점검의 두 질문

두 얼굴에 대응해 점검은 두 질문을 던진다. 첫째, '화면이 옆으로 밀리는 곳이 있는가'(새어 나감 신호). 둘째, '데스크탑에는 있었는데 모바일에서 사라진 내용이 있는가'(잘림 신호). 첫 질문은 모바일만 봐도 알 수 있지만, 둘째 질문은 데스크탑과 비교해야만 답할 수 있다. 두 질문을 함께 던지는 것이 오버플로 점검의 기본 자세다.

두 질문을 확인 방법·드러나는 대상으로 정리한다.

점검 질문	대응하는 얼굴	확인 방법	모바일만으로 가능?
옆으로 밀리는 곳이 있는가	새어 나감	좁은 화면에서 좌우로 밀어봄	가능
사라진 내용이 있는가	잘림	데스크탑과 나란히 비교	불가(비교 필요)

2. 새어 나감을 찾는 법 — 가로 스크롤 추적

새어 나감은 가로 스크롤이라는 분명한 신호를 남기므로, 추적이 비교적 단순하다.

좁은 화면에서 페이지를 위에서 아래로 천천히 내리며, 각 구간에서 화면을 좌우로 살짝 민다. 화면이 따라 움직이는 구간을 찾으면, 그 부근에 새어 나가는 요소가 있다. 그 자리에서 넘치는 요소를 눈으로 확인한다. 넓은 표, 큰 이미지, 긴 문자열, 고정 너비 박스가 흔한 범인이다.

눈에 보이는 범인이 없는데도 화면이 옆으로 밀린다면, 보이지 않는 요소가 너비를 늘리고 있을 가능성이 있다. 화면 밖에 놓인 요소나 투명 처리된 요소가 그런 경우다. 이때는 데스크탑 브라우저의 화면 검사 기능으로 페이지 전체 너비와 화면 너비를 비교해, 무엇이 화면보다 넓은지를 좁혀가는 방법이 있다. 다만 이 글은 점검 관점의 정리이므로, 구체적 도구 사용보다 '보이지 않는 범인도 의심하라'는 자세를 강조한다.

2-1. 한 페이지에 여러 새어 나감이 있을 수 있다

주의할 점은, 한 페이지에 새어 나가는 요소가 하나만 있다는 보장이 없다는 것이다. 가장 많이 넘치는 요소 하나를 찾아 고쳐도, 그보다 덜 넘치던 다른 요소가 여전히 남아 가로 스크롤이 계속될 수 있다. 그래서 점검은 '하나 찾으면 끝'이 아니라, 페이지 전체를 끝까지 훑어 모든 새어 나감을 모으는 태도가 필요하다.

3. 잘림을 찾는 법 — 비교와 의심

잘림은 신호가 없어 더 까다롭다. 가로 스크롤도 생기지 않고, 화면은 깔끔해 보인다. 그래서 잘림을 찾는 핵심은 '데스크탑과의 비교'와 '끊긴 느낌에 대한 의심'이다.

데스크탑 화면을 옆에 띄워 같은 페이지의 같은 부분을 비교한다. 데스크탑에 있던 안내 문장, 표의 한쪽 열, 버튼이 모바일에서 보이지 않는다면, 그것은 단순한 레이아웃 차이가 아니라 잘림일 수 있다. 또 모바일 화면을 보다가 '여기 뭔가 더 있어야 할 것 같은데 갑자기 끊긴' 느낌이 드는 자리를 의심한다. 문장이 어색하게 끝나거나, 표의 오른쪽이 사라졌거나, 목록의 항목이 도중에 멈춘 자리다.

잘림은 특히 텍스트가 한 줄로 제한된 영역에서 자주 생긴다. 긴 제목이나 안내가 한 줄에 다 들어가지 못해 뒷부분이 잘리고, 그 자리가 '…'으로 표시되거나 아예 사라진다. 이런 자리는 데스크탑에서는 한 줄에 다 들어갔기에 문제가 없었다가, 좁은 화면에서 비로소 잘린다.

3-1. '의도된 줄임'과 '의도되지 않은 잘림'

여기서 구분이 필요하다. 긴 제목을 일부러 '…'으로 줄여 보여주는 것은 의도된 처리일 수 있다. 전체 내용을 다른 방법(누르면 펼침 등)으로 볼 수 있다면 문제가 아니다. 그러나 줄여진 내용을 어디에서도 볼 수 없다면, 그것은 정보의 손실이다. 점검은 '줄임이 있는가'가 아니라 '줄여진 내용에 다른 경로로 닿을 수 있는가'를 본다. 닿을 수 없는 줄임만이 고쳐야 할 잘림이다.

4. 관찰 — 새거나 잘린 자리들

공공 영역의 여러 화면을 모바일에서 점검하며 모은 오버플로 장면을, 익명으로 정리한다.

새어 나감의 장면에서는, 본문 안의 표가 화면 오른쪽으로 빠져나가 페이지 전체에 가로 스크롤이 걸렸다. 화면을 옆으로 밀면 표의 뒷부분 열을 볼 수는 있었으나, 그 사실을 모르는 사용자라면 앞쪽 몇 개 열만 보고 정보가 그게 전부라고 여겼을 것이다.

잘림의 장면에서는, 데스크탑에 또렷이 있던 안내 문구가 모바일에서 사라졌다. 가로 스크롤도 없고 화면도 깔끔해, 그 문구가 원래 없는 것처럼 보였다. 데스크탑과 나란히 비교하지 않았다면 잘림을 알아챌 수 없었을 것이다. 또 다른 장면에서는 긴 공지 제목이 한 줄로 잘려, 핵심 키워드가 들어 있던 뒷부분이 보이지 않았다. 누르면 전체가 펼쳐지는 구조였으나, 잘린 채로는 무슨 공지인지 가늠하기 어려웠다.

세 관찰 장면을 유형·정보 도달 여부로 정리한다.

관찰 장면(익명)	유형	모바일에서 정보 도달	데스크탑 대비
본문 표가 오른쪽으로 빠짐	새어 나감	옆으로 밀면 닿음(모르면 못 봄)	앞 열만 보고 전부로 오인 가능
안내 문구가 사라짐	잘림	닿을 경로 없음	비교해야만 누락 인지
긴 공지 제목이 한 줄 잘림	줄임	누르면 펼쳐짐(닿음)	잘린 채로는 내용 가늠 어려움

익명 관찰이다. '줄임' 장면은 펼침 경로가 있어 정보 손실은 아니나, 잘린 상태의 가독성은 별개 문제다. (관찰·관점)

4-1. 잘림은 '정보 격차'를 만든다

이 관찰들이 드러내는 것은, 오버플로가 사용자 사이에 '정보 격차'를 만든다는 점이다. 데스크탑을 쓰는 사용자는 모든 정보를 보지만, 모바일만 쓰는 사용자는 새어 나간 표의 뒷부분이나 잘린 안내 문구를 보지 못한다. 같은 페이지인데 화면에 따라 닿는 정보가 달라진다. 모바일을 유일한 창구로 쓰는 사람일수록 이 격차의 영향을 더 크게 받는다.

5. 점검의 관점 — 종합 시선과 기록

오버플로 점검을 종합하면 다음 시선으로 정리된다.

좁은 화면에서 페이지를 끝까지 내리며 가로 스크롤이 생기는 구간을 모두 찾는다(새어 나감). 데스크탑과 나란히 비교해, 모바일에서 사라진 내용이 있는지 확인한다(잘림). 한 줄로 제한된 제목·안내가 잘렸다면, 줄여진 내용에 다른 경로로 닿을 수 있는지 본다. 화면을 확대했을 때 새로 새어 나가거나 잘리는 곳이 생기는지 확인한다. 발견한 자리를 '페이지 / 요소 / 새어 나감인지 잘림인지 / 데스크탑과의 차이'로 기록한다.

5-1. 공통 부품을 의심하라

여러 페이지에서 같은 유형의 오버플로가 반복된다면, 그것은 개별 페이지의 실수가 아니라 공통으로 쓰이는 부품(공통 표 양식, 공통 배너 틀, 제목 표시 방식 등)의 문제일 가능성이 크다. 점검 기록을 모아 패턴을 보면, '한 곳을 고치면 여러 페이지의 오버플로가 함께 사라지는' 공통 원인이 드러난다. 흩어진 증상을 개별로 쫓기보다, 모아서 공통 부품을 의심하는 것이 효율적이다.

오버플로 점검을 시선·확인 방법·기록 항목으로 정리하면 다음과 같다.

점검 시선	확인 방법	기록 항목
새어 나감 찾기	좁은 화면에서 좌우로 밀어 스크롤 구간 추적	페이지/요소/위치
잘림 찾기	데스크탑과 나란히 비교	사라진 내용/데스크탑 차이
줄임 판정	줄여진 내용에 다른 경로로 닿는가	닿음/못 닿음
확대 점검	확대 시 새 새어 나감·잘림 확인	확대 배율/증상
공통 부품 의심	반복 유형을 모아 공통 부품 추적	부품명/영향 페이지 수

5-2. 반론·한계 — 오버플로 점검의 약점

오버플로 점검에도 반론과 한계가 있다.

반론·한계	내용	보완 방향
"데스크탑 비교가 늘 가능하진 않다"	모바일 전용 화면은 비교 기준이 없음	콘텐츠 명세·원문과 대조
"줄임/잘림 구분이 모호하다"	펼침 경로 유무를 일일이 확인해야 함	펼침 동작까지 점검에 포함
"보이지 않는 새어 나감은 눈으로 못 찾음"	화면 밖 요소는 도구가 필요	폭 비교 도구로 보완
"기준 항목은 확정이 아니다"	잘림 관련 명문 항목 단정 곤란	상위 원칙(정보 인식)에서 해석, 원문 대조

점검은 '깔끔해 보임'을 통과로 삼지 않는다. 보이지 않는 잘림까지 의심하고, 모바일만 쓰는 사용자의 정보 도달을 기준으로 본다. (관점)

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

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

점검 항목	자동 점검이 잘하는 것	사람이 잘하는 것
새어 나감	여러 너비에서 폭 초과를 일괄 탐지	어느 요소가 원인인지 맥락 판단
잘림	넘침 숨김 영역을 구조적으로 식별	사라진 내용이 '중요한지' 가치 판단
줄임	한 줄 제한 영역을 식별	펼침 경로가 '실제로 닿는지' 확인
공통 부품	같은 부품의 반복 사용을 추적	'한 곳 고치면 여럿 낫는지' 판단

자동 점검은 새어 나감·잘림·줄임의 후보를 빠르게 좁혀 주고, 사람은 '정보 도달의 형평'을 판정한다. 둘은 분담 관계다. (관점)

6. 한 장 요약

구분	핵심
두 얼굴	새어 나감(스크롤로 닿음)과 잘림(보이지 않게 사라짐)
더 위험한 것	잘림 — 신호 없이 정보가 사라짐
새어 나감 찾기	좌우로 밀어 가로 스크롤 구간 추적, 보이지 않는 범인도 의심
잘림 찾기	데스크탑과 비교, '끊긴 느낌' 의심
줄임의 구분	줄여진 내용에 다른 경로로 닿는가가 기준
영향	화면에 따라 닿는 정보가 달라지는 '정보 격차'
점검 핵심	페이지/요소/유형/차이로 기록, 공통 부품 의심

맺으며

오버플로는 '새어 나감'과 '잘림'이라는 두 얼굴을 가진다. 새어 나감은 가로 스크롤로 드러나 찾기 쉽지만, 잘림은 신호 없이 정보를 사라지게 해 더 위험하다. 그래서 오버플로 점검은 모바일만 보는 데서 멈추지 않고, 데스크탑과 나란히 비교해 '사라진 것'까지 찾아야 한다. 그래야 화면에 따라 정보가 달라지는 격차를 메울 수 있다.

우리는 오버플로를 '레이아웃의 미관'이 아니라 '정보 도달의 형평'으로 본다. 모바일만 쓰는 사람도 데스크탑을 쓰는 사람과 같은 정보에 닿아야 하고, 그것이 새거나 잘려선 안 된다. 다음 편에서는 모바일에서 길 자체를 찾는 문제, 즉 '햄버거 뒤에 숨은 길'이라는 모바일 내비게이션의 영역으로 넘어간다.

다음 편 예고 (025): 〈햄버거 뒤에 숨은 길 / 모바일 내비게이션 연구〉 — 좁은 화면에서 메뉴가 햄버거 아이콘 뒤로 접힐 때, 사용자가 길을 찾는 일은 어떻게 달라지는가. 모바일 내비게이션의 기준을 연구 관점으로 정리한다.

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

W3C, Web Content Accessibility Guidelines (WCAG) 2.1 — Reflow(1.4.10), Content on Hover or Focus, Truncation 관련 일반 원칙 (정확한 항목·등급은 원문 확인 권장)
한국지능정보사회진흥원(NIA), 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.x — 콘텐츠 재배치·정보 인식 관련 항목
행정안전부·디지털플랫폼정부, KRDS(공공 디자인 시스템) 레이아웃·텍스트 관련 공개 문서
MDN Web Docs — Overflow, text-overflow, Responsive design testing 개요