[접근성연구·모바일] 세 화면에서 다 멀쩡한가
앞의 두 편에서 우리는 세 화면 일관성의 기준(018)과 그 일관성이 무너지는 붕괴의 장면(019)을 살펴봤다. 이번 편은 시선을 바깥에서 안으로 돌린다. 다른 사이트를 관찰하는 대신, '우리 화면은 세 뷰포트에서 다 멀쩡한가'를 스스로 확인하는 점검의 관점이다. 점검이라고 하면 전문 장비나 복잡한 도구가 필요할 것 같지
![[접근성연구·모바일] 세 화면에서 다 멀쩡한가](https://xbbhievqdmccsexxrdtn.supabase.co/storage/v1/object/sign/covers/content/tke0z7j2-119216.jpeg?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV8yOWQwYWZmNy1mOWJhLTRkNmUtYmZlZi0yMzg2NTc0ZWUzODQiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJjb3ZlcnMvY29udGVudC90a2UwejdqMi0xMTkyMTYuanBlZyIsInNjb3BlIjoiZG93bmxvYWQiLCJpYXQiOjE3ODQ0NjU3MzUsImV4cCI6MjA5OTgyNTczNX0.7u0LAKsdYQaUrGDqdabWoO3vHyr8PFWrnUeJpPLS-6I)
뷰포트 점검 관점
〈디지털 접근성 연구 020〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.
들어가며
앞의 두 편에서 우리는 세 화면 일관성의 기준(018)과 그 일관성이 무너지는 붕괴의 장면(019)을 살펴봤다. 이번 편은 시선을 바깥에서 안으로 돌린다. 다른 사이트를 관찰하는 대신, '우리 화면은 세 뷰포트에서 다 멀쩡한가'를 스스로 확인하는 점검의 관점이다.
점검이라고 하면 전문 장비나 복잡한 도구가 필요할 것 같지만, 실제로 가장 많은 문제를 잡아내는 것은 단순한 행위다. 같은 페이지를 데스크탑·태블릿·모바일 너비에서 차례로 열어, 같은 기능과 정보가 끝까지 닿는지 비교하는 일이다. 이 글은 그 비교를 '무엇을, 어떤 순서로, 어떤 신호를 보며' 할지로 정리한다.
목적은 점수를 매기는 것이 아니라, 놓치기 쉬운 자리를 체계적으로 훑는 것이다. 데스크탑에서 멀쩡한 것은 출발점일 뿐이며, 세 화면을 모두 통과해야 '괜찮다'고 말할 수 있다는 관점에서 출발한다.
1. 점검의 준비 — 무엇을 갖추면 충분한가
세 화면 점검에 필요한 것은 의외로 단출하다. 첫째, 실제 휴대폰 한 대. 둘째, 데스크탑 브라우저. 셋째, 같은 페이지를 여러 너비로 볼 수 있는 환경이다. 대부분의 데스크탑 브라우저에는 화면 너비를 휴대폰·태블릿 크기로 바꿔 미리 볼 수 있는 기능이 들어 있어, 별도 설치 없이 세 너비를 흉내 낼 수 있다.
다만 미리보기는 실제 기기를 완전히 대체하지 못한다. 미리보기는 레이아웃을 보여주지만, 실제 손가락 조작감·터치 정확도·실기기에서만 나타나는 글꼴 차이는 직접 만져봐야 드러난다. 그래서 가능하면 레이아웃은 미리보기로 빠르게 훑고, 핵심 흐름(신청·검색 등)은 실제 휴대폰에서 손으로 확인하는 이중 점검이 안전하다.
1-1. 너비를 정하는 법
대표 너비는 절대값보다 '구간'으로 생각하는 편이 낫다. 가장 좁은 휴대폰(대략 360픽셀 안팎), 중간(태블릿, 대략 768픽셀 안팎), 넓은 데스크탑(대략 1280픽셀 이상)을 기준 지점으로 잡되, 그 사이를 천천히 끌어가며 보는 것을 함께 한다. 정확한 경계는 사이트마다 다르므로, 외워서 적용하기보다 '가장 좁을 때 어떻게 되나'를 가장 중요하게 본다는 원칙만 기억하면 된다.
세 기준 너비와 그 자리에서 무엇을 가장 주의 깊게 볼지 정리하면 다음과 같다.
| 기준 너비(대략) | 대표 기기 | 이 자리에서 특히 볼 것 | 비고 |
|---|---|---|---|
| 360px 안팎 | 작은 휴대폰 | 가로 스크롤·겹침·잘림이 가장 잘 드러남 | 가장 중요 — 여기서 통과해야 안심 |
| 768px 안팎 | 태블릿 세로 | 2단↔1단 전환이 자연스러운가 | 접기 조건이 빠지면 여기서 겹침 |
| 1280px 이상 | 데스크탑 | 기준선(여백이 결함을 덮는 자리) | 출발점 — '멀쩡함'을 과신 금지 |
정확한 경계 픽셀은 사이트마다 다르므로 수치는 참고용이다. 핵심은 '가장 좁을 때 무사한가'를 가장 무겁게 본다는 원칙이다. (관점)
2. 점검의 첫 시선 — 가로로 새는 것이 있는가
세 화면 점검에서 가장 먼저 볼 신호는 가로 스크롤이다. 좁은 화면에서 페이지를 열었을 때 화면이 옆으로 밀리거나, 아래에 가로 스크롤 막대가 생긴다면 어딘가 화면 너비를 초과하는 요소가 있다는 뜻이다.
가로 스크롤은 붕괴의 가장 흔하고 가장 눈에 띄는 증상이다. 페이지를 위에서 아래로 천천히 내리면서, 화면을 살짝 왼쪽·오른쪽으로 밀어본다. 어느 구간에서 화면이 옆으로 따라 움직이면, 그 부근에 너비를 초과한 요소(표·이미지·긴 문자열·고정 박스)가 있을 가능성이 크다. 원인이 되는 요소를 찾아 그 자리를 표시해 두는 것이 점검의 출발이다.
2-1. 가로 스크롤의 흔한 범인들
관찰에 비추어 보면 가로 스크롤의 원인은 대체로 정해져 있다. 칸이 많은 표, 화면 너비를 무시한 큰 이미지·배너, 끊기지 않는 긴 영문 주소·참조번호, 픽셀로 고정된 박스나 동영상 틀이다. 가로 스크롤을 발견했다면 이 후보들을 먼저 의심하는 것이 빠르다. 표시해 둔 자리 근처에서 이 중 하나가 발견되면, 그것이 새는 지점일 확률이 높다.
흔한 범인들을 의심 단서·확인 방법과 함께 정리한다.
| 흔한 범인 | 의심 단서 | 확인 방법 |
|---|---|---|
| 칸 많은 표 | 표 근처에서 페이지가 옆으로 밀림 | 표를 좁은 화면에서 열어 폭 초과 확인 |
| 큰 이미지·배너 | 상단·중간 배너 자리에서 잘림 | 이미지 오른쪽이 화면을 넘는지 확인 |
| 긴 영문 주소·번호 | 특정 단락만 정렬이 어긋남 | 해당 단락의 긴 문자열 줄바꿈 확인 |
| 고정 박스·동영상 틀 | 특정 박스만 화면을 초과 | 박스 너비가 픽셀 고정인지 의심 |
3. 점검의 둘째 시선 — 겹치거나 잘린 것이 있는가
가로로 새지 않더라도 겹침과 잘림은 따로 확인해야 한다. 겹침은 좌우로 있던 요소가 좁은 화면에서 접히지 못하고 같은 자리에 그려질 때 생긴다. 글자 위에 글자가, 버튼 위에 텍스트가 포개진다. 페이지를 내리며 '읽기 어렵게 뭉친 자리'가 없는지 본다.
잘림은 더 은밀하다. 넘치는 부분을 잘라내도록 설정된 컨테이너에서는, 화면 밖으로 나간 내용이 가로 스크롤도 없이 그냥 보이지 않게 된다. '여기 뭔가 더 있어야 할 것 같은데 끊긴 것 같은' 느낌이 드는 자리, 문장이 갑자기 끝나거나 표의 한쪽이 사라진 자리를 의심한다.
3-1. 데스크탑과 나란히 비교하기
겹침과 잘림은 모바일만 봐서는 '원래 그런 건지' 판단하기 어렵다. 그래서 데스크탑 화면을 옆에 띄워 놓고 같은 부분을 비교하는 것이 효과적이다. 데스크탑에는 있는 안내 문장이 모바일에서 사라졌다면 그것은 잘림이고, 데스크탑에서는 떨어져 있던 두 요소가 모바일에서 붙어 읽기 어렵다면 그것은 겹침이다. 두 화면을 나란히 두는 것만으로 '누락'과 '깨짐'이 함께 드러난다.
겹침과 잘림을 구별하는 기준을 표로 정리하면 다음과 같다.
| 구분 | 데스크탑에서 | 모바일에서 | 판정 |
|---|---|---|---|
| 겹침 | 두 요소가 떨어져 있음 | 둘이 같은 자리에 포개짐 | 접기 조건 누락 |
| 잘림 | 안내 문장·표가 다 보임 | 일부가 보이지 않게 사라짐 | 넘침 숨김 |
| 누락 | 항목이 있음 | 항목 자체가 빠짐 | 모바일 전용 숨김 설정 의심 |
| 정상 축약 | 길게 표시 | 의도적으로 접거나 요약 | 문제 아님(설계된 동작) |
'정상 축약'과 '잘림'을 혼동하지 않는 것이 중요하다. 의도적으로 접은 것은 문제가 아니며, 펼침 수단이 있는지까지 확인해야 판정이 정확하다. (관점)
4. 점검의 셋째 시선 — 기능이 끝까지 닿는가
레이아웃이 깔끔해도 기능이 닿지 않으면 점검은 통과가 아니다. 세 화면 점검의 가장 중요한 시선은 '같은 일을 세 화면 모두에서 끝까지 할 수 있는가'이다.
데스크탑에서 할 수 있던 일을 모바일에서 직접 해본다. 메뉴를 열어 데스크탑에 있던 항목이 모바일 메뉴에도 모두 있는지 본다. 검색을 실제로 해보고, 결과까지 닿는지 확인한다. 신청·문의 폼이 있다면 입력란을 채우고 제출 버튼까지 도달하는지, 마지막 버튼이 화면 밖으로 밀려 손이 닿지 않는 일이 없는지 본다. 다운로드·첨부 같은 보조 기능도 모바일에서 동작하는지 확인한다.
4-1. '보이는 것'과 '되는 것'의 구분
화면에 버튼이 보인다고 해서 기능이 되는 것은 아니다. 버튼이 다른 요소에 가려 눌리지 않거나, 너무 작아 정확히 닿지 않거나, 눌러도 다음 화면이 좁은 화면에서 또 깨지는 일이 있다. 점검은 '보이는가'에서 멈추지 않고 '끝까지 되는가'까지 따라가야 한다. 신청을 시작할 수 있다면 완료까지, 검색을 입력할 수 있다면 결과 확인까지 직접 밟아보는 것이 점검의 완성이다.
기능 흐름별로 '보이는 것'과 '끝까지 되는 것'을 나란히 점검표로 정리하면 빠뜨림이 줄어든다.
| 기능 흐름 | 보이는가 | 끝까지 되는가 |
|---|---|---|
| 메뉴 | 메뉴 버튼이 보이는가 | 데스크탑 항목이 모바일 메뉴에 다 있는가 |
| 검색 | 입력란이 보이는가 | 입력→결과 확인까지 닿는가 |
| 신청·문의 폼 | 첫 입력란이 보이는가 | 제출 버튼까지 도달·제출되는가 |
| 다운로드·첨부 | 버튼이 보이는가 | 실제 내려받기·첨부가 동작하는가 |
'보임'은 점검의 절반일 뿐이다. 마지막 버튼이 화면 밖으로 밀려 손이 닿지 않는 일은 '보이는데 안 되는' 전형이다. (관점)
5. 점검의 넷째 시선 — 확대·회전에서도 견디는가
세 화면 점검은 '보통 상태'만으로 끝나지 않는다. 사용자는 화면을 확대하기도, 가로로 돌리기도 한다. 이 두 변화에서 레이아웃이 견디는지 함께 본다.
글자를 키우거나 화면을 확대했을 때, 콘텐츠가 잘리거나 겹치지 않는지 본다. 확대는 사실상 화면을 더 좁게 쓰는 것이므로, 보통 너비에서는 없던 가로 스크롤이 확대하는 순간 생기기도 한다. 저시력 사용자에게 확대는 필수 사용 방식이므로, 확대 상태의 점검은 곁가지가 아니라 본 과정에 가깝다.
화면을 가로로 돌렸을 때도 같은 점검을 한다. 세로에서 멀쩡하던 레이아웃이 가로에서 깨지거나, 가로 모드에서 핵심 버튼이 키보드·주소창에 가려 보이지 않는 일이 있는지 본다. 회전과 확대는 다음 편(027~028)에서 더 깊이 다루므로, 여기서는 '세 화면 점검의 일부로 빠뜨리지 않는다'는 정도로 둔다.
6. 점검의 기록 — 무엇을 어떻게 남기나
점검의 가치는 발견을 기록으로 남길 때 커진다. 머릿속에만 둔 발견은 다음 점검에서 다시 처음부터 찾아야 한다. 기록은 거창할 필요 없이, '어느 화면 너비에서 / 어느 페이지의 / 어느 요소가 / 어떻게 깨졌는가'만 적으면 충분하다.
특히 같은 유형의 붕괴가 여러 페이지에서 반복된다면, 그것은 한 페이지의 실수가 아니라 공통 부품(공통 헤더·표 양식·배너 틀 등)의 문제일 가능성이 크다. 페이지별로 흩어진 증상을 모아 보면 '한 곳을 고치면 여러 페이지가 함께 나아지는' 공통 원인이 드러난다. 기록은 그 공통 원인을 찾는 단서가 된다.
6-1. 우선순위를 가르는 기준
발견을 모두 동시에 처리할 수는 없으므로 우선순위가 필요하다. 우리는 '닿지 못하는 정도'를 기준으로 본다. 기능이 아예 안 되는 붕괴(제출 버튼에 손이 닿지 않음, 모바일 메뉴에서 항목이 통째로 빠짐)가 가장 무겁고, 정보가 잘려 사라지는 경우가 그다음, 가로 스크롤처럼 불편하지만 우회 가능한 경우가 그다음이다. 미관상 어색하지만 기능·정보에 지장이 없는 것은 가장 나중이다. 보기에 거슬리는 순서가 아니라, 닿지 못하게 막는 순서로 줄을 세우는 것이 핵심이다.
우선순위를 '닿지 못하는 정도'로 줄 세우면 다음과 같다.
| 순위 | 붕괴 유형 | 사용자 영향 | 우회 가능성 |
|---|---|---|---|
| 1(가장 무거움) | 기능 차단(제출 버튼·메뉴 항목 누락) | 일을 아예 끝낼 수 없음 | 없음 |
| 2 | 정보 잘림(내용이 사라짐) | 필요한 정보를 못 봄 | 거의 없음 |
| 3 | 가로 스크롤(밀림) | 불편하지만 도달 가능 | 우회 가능 |
| 4(가장 가벼움) | 미관상 어색(기능·정보 지장 없음) | 거슬리나 사용 가능 | 영향 적음 |
6-2. 반론·한계 — 자가 점검의 약점
자가 점검은 강력하지만 만능이 아니다. 반론과 한계를 함께 짚는다.
| 반론·한계 | 내용 | 보완 방향 |
|---|---|---|
| "사람마다 결과가 다르다" | 눈으로 보는 점검은 주관·숙련도에 좌우됨 | 점검 항목을 표준화해 편차 축소 |
| "재현·기록이 약하다" | 손으로 끌어 본 결과는 다시 보이기 어려움 | 여러 너비 자동 캡처로 근거 남김 |
| "전수 점검이 어렵다" | 페이지가 많으면 일일이 못 봄 | 자동 점검으로 폭 초과 일괄 탐지 후 사람 확인 |
| "기준 수치가 확정이 아니다" | 너비·등급은 원문마다 다름 | WCAG/KWCAG/KRDS 원문 대조 권장 |
자가 점검과 자동 점검은 대체가 아니라 보완이다. 사람은 '장벽인가'를 판단하고, 도구는 '어디서 폭을 넘었나'를 빠르게 좁힌다. (관점)
6-3. ViewCheck 관점 — 세 화면 점검의 분담
세 화면 점검에서 사람과 자동 점검이 잘하는 영역을 표로 정리한다. 이 글은 특정 도구 사용을 권하지 않으며 분담 구조만 관점으로 둔다.
| 점검 시선 | 자동 점검이 잘하는 것 | 사람이 잘하는 것 |
|---|---|---|
| 가로 새는가 | 여러 너비에서 문서 폭 초과 일괄 탐지 | 원인 요소가 무엇인지 맥락 판단 |
| 겹침·잘림 | 좌표 겹침·넘침 영역을 구조적으로 식별 | 그것이 '읽기·정보'를 막는지 판단 |
| 기능 도달 | 버튼 존재·크기를 기계적으로 점검 | 신청·검색을 끝까지 직접 밟아 확인 |
| 확대·회전 | 여러 상태를 자동 캡처·비교 | 확대 상태의 실제 사용감 체감 |
자동 점검은 폭넓게 '의심 지점'을 좁혀 주고, 사람은 '실제 장벽'을 판정한다. 둘을 합치면 빠짐과 오판을 동시에 줄인다. (관점)
7. 한 장 요약
| 점검 시선 | 확인 질문 |
|---|---|
| 준비 | 실기기 + 데스크탑 + 너비 변경 환경. 핵심 흐름은 실기기로 |
| 가로로 새는가 | 좁은 화면에서 가로 스크롤·옆 밀림이 생기는가 |
| 겹치거나 잘리는가 | 글자·박스 겹침, 보이지 않게 잘린 내용이 있는가 |
| 기능이 닿는가 | 데스크탑에서 되던 일이 모바일에서 끝까지 되는가 |
| 확대·회전 | 확대·가로 회전에서도 잘림·겹침 없이 견디는가 |
| 기록·우선순위 | 너비/페이지/요소/증상 기록, '닿지 못하는 정도'로 우선순위 |
맺으며
세 화면 점검은 특별한 기술이 아니라 '같은 페이지를 세 너비에서 끝까지 써보는' 성실함에 가깝다. 가로로 새는가, 겹치거나 잘리는가, 기능이 끝까지 닿는가, 확대·회전에서도 견디는가 — 이 네 시선으로 훑으면 큰 붕괴는 대부분 걸러진다. 그리고 그 발견을 너비·페이지·요소·증상으로 기록해 두면, 공통 원인을 찾아 한 번에 여러 페이지를 함께 고칠 단서가 된다.
우리는 점검을 '점수 매기기'가 아니라 '닿지 못하는 자리를 찾아내는 일'로 본다. 데스크탑에서 멀쩡하다는 것은 점검의 시작이지 끝이 아니다. 다음 편부터는 모바일에서 특히 자주 막히는 구체적 영역으로 들어간다. 먼저 '작은 화면에서 폼을 끝까지 마칠 수 있는가'라는 모바일 폼 완결성의 문제를 다룬다.
다음 편 예고 (021): 〈작은 화면에서 끝까지 / 모바일 폼 완결성 연구〉 — 좁은 화면에서 신청·문의 폼을 시작부터 제출까지 끊김 없이 마칠 수 있는가. 모바일에서 폼이 자주 막히는 지점과 그 기준을 연구 관점으로 정리한다.
참고한 공개 자료(출처):
- W3C, Web Content Accessibility Guidelines (WCAG) 2.1 — Reflow(1.4.10), Resize Text(1.4.4), Orientation(1.3.4) 등 (정확한 적용 범위·예외는 원문 확인 권장)
- 한국지능정보사회진흥원(NIA), 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.x — 콘텐츠 재배치·확대 관련 항목
- 행정안전부·디지털플랫폼정부, KRDS(공공 디자인 시스템) 반응형·점검 관련 공개 문서
- MDN Web Docs — Responsive design testing, Device mode 개요
관련 글
[접근성연구·디지털포용] 한 사람이 여러 벽을 동시에
앞 편(081)에서 디지털 포용이 여러 갈래의 사용자를 하나의 목표로 묶는다고 봤다. 그리고 끝에서 한 가지를 남겼다 — 현실의 한 사람은 여러 조건을 동시에 가질 수 있다고. 이 시리즈를 닫는 이번 편은 그 '겹침'을 정면으로 본다. 영역의 경계를 가로질러, 조건이 겹칠 때 접근성이 어떻게 더 가팔라지는지를 관찰한다.
[접근성연구·디지털포용] 디지털포용법이 말하는 '포용'
앞 편(080)에서 초고령사회라는 인구구조의 신호를 봤다. 그리고 끝에서 한 가지를 분명히 했다 — 디지털 격차는 고령에만 있는 것이 아니라고. 이번 편은 그 여러 갈래의 격차를 '디지털 포용(digital inclusion)'이라는 하나의 정책 틀에서 함께 본다. 이 시리즈는 그동안 사용자를 영역별로 나눠 다뤘다. 고령
[접근성연구·디지털포용] 초고령사회, 공공웹은 준비됐나
공공앱 세 편(077~079)으로 매체의 확장을 닫았다. 이제 시선을 한 번 더 넓힌다. 지금까지 이 시리즈는 주로 '한 사람이 화면 앞에서 겪는 어려움'을 다뤘다. 고령(001~014), 저시력(029~043), 키보드(047~049)처럼, 개별 사용자의 자리에서 벽을 봤다. 이번 묶음(080~082)은 그 시선을 거시