[접근성연구·고령] 확대하면 무너지는 화면들

글씨를 키울 때 레이아웃에 생기는 일

〈디지털 접근성 연구 ②〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다. 앞 편(①)이 "글자를 어디까지 키워야 하나"였다면, 이번 편은 "글자를 키웠을 때 화면이 어떻게 무너지는가"를 유형별로 관찰합니다.

들어가며 — 글자는 커졌는데, 왜 더 못 쓰게 됐을까

앞 편에서 우리는 "공공 웹의 글자는 키울 수 있고, 키워도 흐트러지지 않으며, 키우기 전에도 충분히 읽혀야 한다"고 정리했습니다. 이번 편은 그 가운데 두 번째 — "키워도 흐트러지지 않는다" 가 실제로 깨지는 순간들을 들여다봅니다.

흥미로운 역설이 하나 있습니다. 고령 사용자가 글자를 키우는 이유는 "더 잘 보려고"입니다. 그런데 어떤 화면에서는 글자를 키운 직후부터 오히려 더 못 쓰게 됩니다. 버튼이 사라지고, 글자가 잘리고, 화면이 옆으로 넘칩니다. 사용자 입장에서는 "내가 뭘 잘못 눌렀나" 싶어 당황합니다. 사실 잘못한 것은 아무것도 없습니다. 화면이 확대를 견디도록 만들어지지 않았을 뿐입니다.

이 편에서 우리는 "글자를 키우면 화면이 깨진다"는 막연한 말을 구체적인 유형으로 쪼개 보려 합니다. 무너짐에도 패턴이 있고, 그 패턴을 알면 어디를 봐야 하는지가 분명해집니다. 모든 사례는 익명으로(○○시·△△청) 일반화했고, 특정 기관을 지목하지 않습니다. 우리가 보려는 것은 '누가 틀렸나'가 아니라 '무엇이 반복되나'입니다.

1. 무너짐은 '글자'가 아니라 '그릇'에서 온다

먼저 원인을 한 줄로 요약하면 이렇습니다. 글자가 커질 때 화면이 깨지는 진짜 원인은 글자가 아니라, 그 글자를 담은 그릇(레이아웃)이 함께 커지지 못하기 때문입니다.

웹 화면은 글자, 그리고 그 글자를 담는 상자(버튼·카드·입력칸·영역)로 이뤄져 있습니다. 글자만 커지고 상자가 고정돼 있으면, 커진 글자가 상자를 비집고 나오거나, 상자 안에서 잘리거나, 옆 상자와 부딪힙니다. 그래서 "확대에 견디는 화면"이란 결국 글자가 커질 때 그릇도 함께 늘어나는 화면입니다.

이 사실이 중요한 이유는, 많은 사람들이 "글자 크기 문제"를 글자만의 문제로 여기기 때문입니다. 그러나 우리의 관찰로는, 글자 크기 대응에서 실제로 깨지는 지점의 대부분은 레이아웃의 경직성 쪽에 있습니다. 글자는 잘 커지는데 그릇이 안 따라와서 생기는 일이 훨씬 많습니다. 그래서 이 편의 유형 분류도 '그릇이 어떻게 실패하는가'를 축으로 삼았습니다.

2. 표준이 말하는 '손실' — 무엇을 무너짐으로 보는가

무너짐의 유형을 보기 전에, 표준이 이를 어떻게 규정하는지 짧게 인용하겠습니다.

인용 (WCAG 2.1, 성공 기준 1.4.4 Resize Text, AA): 텍스트는 200%까지 확대할 수 있어야 하며, 그때 콘텐츠나 기능의 손실이 없어야 한다.

인용 (WCAG 2.1, 성공 기준 1.4.10 Reflow, AA): 콘텐츠는 가로 스크롤 없이 너비 320px 상당까지 재배치되어야 한다.

여기서 우리가 주목하는 단어는 "손실(loss)" 입니다. 표준은 "보기 싫어진다"가 아니라 "잃는다"고 말합니다. 즉 확대했을 때 단지 모양이 어색해지는 것을 넘어, 읽을 수 없게 되거나(콘텐츠 손실), 누를 수 없게 되는(기능 손실) 상태를 문제로 봅니다. 이 글에서 우리가 '무너짐'이라고 부르는 것도 같은 의미입니다 — 미감의 문제가 아니라, 사용자가 정보를 잃거나 기능을 잃는 상태입니다.

우리의 해석은 이렇습니다. 확대 후의 화면을 평가할 때 기준은 "예쁜가"가 아니라 "여전히 읽고 누를 수 있는가"여야 한다. 디자인 감각으로 보면 어색해도 기능이 살아 있으면 통과고, 깔끔해 보여도 버튼이 사라졌다면 실패입니다. 평가의 잣대를 미감에서 기능으로 옮기는 것 — 이것이 이 편의 전제입니다.

3. 무너짐의 여섯 가지 유형

공공 웹에서 글자 확대 시 반복적으로 관찰되는 무너짐을 여섯 유형으로 정리합니다. 각 유형은 서로 겹치기도 하지만, 나눠 보면 점검할 때 빠뜨리지 않게 됩니다.

유형 1 — 넘침(Overflow): 화면 밖으로 새는 콘텐츠

가장 흔한 유형입니다. 글자가 커지면서 한 줄이 화면 너비를 넘어, 콘텐츠가 오른쪽으로 삐져나갑니다. 그 결과 가로 스크롤이 생깁니다. 사용자는 한 문장을 읽기 위해 좌우로 밀어야 하고, 다음 줄로 넘어갈 때마다 다시 왼쪽 끝으로 돌아와야 합니다. 위아래 스크롤에는 익숙한 사람도, 좌우로 밀며 읽는 동작에는 금세 지칩니다. 원인은 대개 고정 너비(px)로 박힌 요소나, 줄바꿈이 막힌 긴 텍스트입니다.

유형 2 — 잘림(Clipping): 상자 안에서 잘리는 글자

상자의 높이나 너비가 고정돼 있어, 커진 글자가 상자를 벗어나는 부분이 잘려 보이지 않는 유형입니다. 입력칸 안의 안내 문구가 "주민등록번..."처럼 끊기거나, 버튼의 글자 끝이 사라지거나, 카드 제목의 아랫부분이 가려집니다. 넘침과 달리 스크롤로도 볼 수 없습니다. 잘린 정보는 그냥 사라진 것이라, 사용자는 무엇이 적혀 있었는지조차 알 수 없습니다.

유형 3 — 겹침(Overlap): 서로 부딪히는 요소

커진 글자나 상자가 옆·아래 요소와 겹쳐서 읽기 어려워지는 유형입니다. 글자 위에 다른 글자가 얹히거나, 버튼이 텍스트를 가립니다. 특히 위치를 고정해 둔 요소(화면에 붙어 있는 헤더·하단 바)가 본문과 겹칠 때 자주 나타납니다. 겹침은 보기에도 혼란스럽고, 어디를 눌러야 할지 판단을 어렵게 만듭니다.

유형 4 — 사라짐(Hidden control): 화면 밖으로 밀려난 버튼

글자가 커지면서 전체 콘텐츠가 길어져, 정작 중요한 버튼이 화면 아래나 옆으로 밀려나 보이지 않는 유형입니다. '다음', '제출', '동의' 같은 버튼이 화면 밖에 있으면, 사용자는 그 버튼의 존재 자체를 모른 채 "여기서 막혔다"고 느낍니다. 과업이 끝나기 직전에 멈추는 가장 아까운 실패입니다.

유형 5 — 깨진 정렬(Broken alignment): 어긋나는 표·그리드

여러 칸이 나란히 정렬된 표나 카드 묶음에서, 한 칸의 글자만 커져도 줄이 어긋나 읽는 순서가 무너지는 유형입니다. 표의 머리글과 내용이 어긋나면, 어느 값이 어느 항목인지 알 수 없게 됩니다. 데이터를 다루는 공공 페이지(요금표·일정표·자격 기준표)에서 특히 치명적입니다.

유형 6 — 갇힌 상호작용(Trapped UI): 닫을 수 없는 팝업

확대 상태에서 팝업·모달의 닫기 버튼이 화면 밖으로 나가거나 다른 요소에 가려져, 사용자가 그 화면을 빠져나오지 못하는 유형입니다. 정보를 얻기는커녕 갇히는 셈이라, 사용자는 앱을 강제로 종료하거나 처음부터 다시 시작합니다. 빈도는 낮지만 한 번 걸리면 가장 큰 좌절을 줍니다.

유형을 가로지르는 한 가지 신호 — 가로 스크롤

여섯 유형은 서로 다르게 보이지만, 실은 하나의 신호로 상당수가 드러납니다. 바로 가로 스크롤의 등장입니다. 글자를 키웠을 때 화면 아래에 좌우로 미는 스크롤이 생긴다면, 그 화면은 거의 틀림없이 어딘가에서 고정 너비를 쓰고 있고, 넘침·잘림·정렬 깨짐 중 하나 이상을 동반합니다. 우리는 가로 스크롤을 "무너짐의 연기 신호"로 봅니다. 불이 어디서 났는지는 더 봐야 알지만, 연기가 보이면 불이 있다는 뜻입니다. 그래서 점검할 때 가장 먼저 보는 것도 "확대 후 가로 스크롤이 생기는가"입니다.

4. 같은 무너짐도 고령 사용자에게는 더 무겁다

같은 무너짐이라도 사용자에 따라 타격의 크기가 다릅니다. 디지털에 익숙한 사람은 화면이 깨져도 "아, 이건 버그네" 하고 스크롤을 내리거나 새로고침을 하며 우회합니다. 그러나 고령 사용자에게는 그 우회 자체가 어렵습니다. 우리는 이 차이를 분명히 짚어야 한다고 봅니다. 무너짐의 비용은 모두에게 같지 않기 때문입니다.

첫째, 원인을 '자기 탓'으로 돌린다. 화면이 깨지면 디지털에 익숙한 사람은 "사이트가 잘못 만들어졌네"라고 생각하지만, 고령 사용자는 흔히 "내가 뭘 잘못 눌렀나"라고 자신을 탓합니다. 그 결과 더 위축되고, 다음 시도를 망설입니다. 무너짐은 단지 불편이 아니라, 사용자의 자신감을 깎는 경험이 됩니다.

둘째, 우회 동작을 모른다. 버튼이 화면 밖으로 밀려났을 때, 익숙한 사용자는 "더 내려보자"고 스크롤합니다. 그러나 고령 사용자는 "여기서 끝"이라고 받아들이고 멈추는 경우가 많습니다. 가로 스크롤이 생겨도 옆으로 밀 생각을 못 하기도 합니다. 우회 동작이 직관적이지 않으면, 무너진 화면은 곧 막다른 길이 됩니다.

셋째, 되돌리기를 두려워한다. 화면이 이상해졌을 때, 익숙한 사용자는 뒤로 가기나 새로고침을 부담 없이 누릅니다. 고령 사용자는 "괜히 눌렀다가 처음부터 다시 해야 할까 봐" 망설입니다. 그래서 깨진 화면 앞에서 아무것도 하지 못한 채 시간을 보내다 결국 창을 닫습니다.

넷째, 도움을 청할 곳이 마땅치 않다. 옆에 물어볼 사람이 있으면 다행이지만, 혼자라면 그 화면에서 막힙니다. 공공 서비스는 대체재가 없는 경우가 많아, "다른 데서 하면 되지"가 통하지 않습니다. 막힌 사람은 결국 기관에 직접 전화하거나 방문하게 되고, 이는 사용자에게도 기관에도 부담입니다.

이 네 가지를 종합하면, 우리는 이렇게 봅니다. 무너짐의 비용은 가장 취약한 사용자에게 가장 크게 청구된다. 그래서 "이 정도 깨짐은 사소하다"는 판단은 위험합니다. 만든 사람에게 사소한 깨짐이, 어떤 사용자에게는 서비스의 문을 닫는 일일 수 있기 때문입니다.

5. 왜 이런 일이 반복될까 — 설계 단계의 보이지 않는 결정

여섯 유형은 증상이고, 원인은 대개 설계·개발 단계의 몇 가지 결정에서 비롯됩니다. 여기는 사실에 기반한 설명이므로 단정적으로 적습니다.

첫째, 단위를 px로 고정했다. 글자를 px로 박으면 사용자 글꼴 설정이 잘 반영되지 않고, 상자를 px로 박으면 글자가 커져도 늘어나지 않습니다. 넘침·잘림·겹침의 뿌리에는 거의 항상 고정 단위가 있습니다.

둘째, '딱 맞게' 그렸다. 디자인 시안에서 글자 한 줄이 버튼이나 카드에 빈틈없이 들어맞으면 깔끔해 보입니다. 그러나 그 '딱 맞음'은 글자가 조금만 커져도 깨집니다. 여백을 남기지 않은 설계는 확대를 위한 예비 공간이 없는 설계입니다.

셋째, 한 화면에 너무 많이 담았다. 정보가 빽빽할수록 글자를 작게 할 수밖에 없고, 작은 글자를 키우면 더 빨리 부딪힙니다. 정보 과잉은 무너짐의 간접 원인입니다.

넷째, 확대 상태를 한 번도 보지 않았다. 가장 단순하면서 흔한 원인입니다. 만든 사람이 기본 크기에서만 화면을 확인하고, 200% 확대 상태를 한 번도 열어보지 않은 것입니다. 확대는 사용자에게는 일상이지만, 만드는 사람에게는 종종 사각지대입니다.

우리의 관점에서 이 네 원인의 공통점은 "사용자의 환경이 아니라 제작자의 환경을 기준으로 화면을 봤다" 는 것입니다. 큰 모니터·기본 글꼴·좋은 시력이라는 제작자의 조건은, 작은 폰·키운 글꼴·노안이라는 사용자의 조건과 다릅니다. 무너짐은 그 간극에서 생깁니다.

6. 우리가 공공 웹에서 관찰한 장면들

앞의 유형이 실제로 어떻게 나타나는지, 익명의 장면으로 옮겨 봅니다.

장면 하나(넘침). ○○ 지역의 한 고지서 조회 페이지는 표의 칸 너비가 px로 고정돼 있었습니다. 글자를 키우자 표가 화면 오른쪽으로 넘쳐 가로 스크롤이 생겼고, 금액과 항목이 한 화면에 함께 보이지 않았습니다. 사용자는 항목을 보려 왼쪽으로, 금액을 보려 오른쪽으로 번갈아 밀어야 했습니다.

장면 둘(잘림). △△ 기관의 신청 폼은 입력칸 높이가 고정돼 있어, 글자를 키우자 칸 안의 예시 문구가 위아래로 잘렸습니다. "예: 010-0000-0000" 같은 안내가 "예: 010-..."처럼 끊겨, 무엇을 어떤 형식으로 넣어야 하는지 알기 어려웠습니다.

장면 셋(사라짐). 한 예약 페이지는 글자를 키우자 본문이 길어지면서 '예약하기' 버튼이 화면 아래로 밀려났습니다. 사용자는 모든 정보를 다 채우고도 마지막 버튼을 찾지 못해, 화면 중간에서 멈췄습니다. 스크롤을 더 내리면 보였지만, "여기서 끝인 줄" 알고 창을 닫는 경우가 적지 않았습니다.

장면 넷(갇힘). 어느 안내 팝업은 확대 상태에서 닫기(X) 버튼이 화면 밖으로 나가, 사용자가 팝업을 닫지 못했습니다. 본 화면으로 돌아갈 수 없어 앱을 강제 종료해야 했고, 다시 들어오니 처음부터였습니다.

장면 다섯(깨진 정렬). 어느 자격 안내 페이지는 여러 조건을 표로 정리해 두었는데, 글자를 키우자 한 칸의 내용만 길어지면서 표 전체의 줄이 어긋났습니다. 어느 조건이 어느 결과에 해당하는지 한눈에 맞춰 보기 어려워졌고, 사용자는 자신이 자격이 되는지조차 헷갈려 했습니다.

장면 여섯(겹침). 한 페이지는 화면 하단에 '신청' 버튼 바를 고정해 두었는데, 글자를 키우자 본문 마지막 줄이 그 고정 바에 가려졌습니다. 정작 읽어야 할 마지막 안내가 버튼에 덮여, 사용자는 동의 내용을 끝까지 보지 못한 채 버튼을 눌러야 하는 상황이 됐습니다.

이 장면들에서 우리가 읽는 공통점은 앞 편과 같습니다. 무너짐은 거창한 결함이 아니라 작은 설계 결정에서 갈렸다. 칸 너비를 px로 둘지, 입력칸 높이를 고정할지, 버튼을 화면에 고정할지 — 알았다면 다르게 선택했을 지점들이었습니다. 그리고 이 결정들은 하나같이 화면을 만들 때는 합리적으로 보였습니다. "버튼을 항상 보이게 하단에 고정하자"는 결정은 친절에서 나왔지만, 확대 상황을 고려하지 않으면 오히려 본문을 가리는 결과를 낳습니다. 선의가 사용자 환경의 다양함을 만나 어긋나는 순간들입니다.

7. 무너짐을 어떻게 알아챌까 — 관찰의 관점

무너짐은 기본 크기에서는 거의 보이지 않습니다. 만든 사람이 기본 상태에서만 확인하면 영영 모를 수 있습니다. 그래서 우리는 확대된 상태를 '기본 점검 조건'에 포함하는 것을 권합니다. 화면을 만들거나 검수할 때, 한 번은 글자를 키우고 한 번은 화면을 좁혀 보는 것입니다.

구체적으로 보면, 다음 질문들이 여섯 유형과 연결됩니다.

글자를 키웠을 때 가로 스크롤이 생기는가?(넘침)
버튼·입력칸 안의 글자 끝이 잘리지 않는가?(잘림)
요소들이 서로 겹치지 않는가?(겹침)
'다음'·'제출' 같은 버튼이 여전히 화면 안에 있는가?(사라짐)
표·카드의 정렬이 유지되는가?(깨진 정렬)
팝업의 닫기가 여전히 가능한가?(갇힘)

이 질문들은 인상이 아니라 사실로 답할 수 있습니다. "어색해 보인다"가 아니라 "이 버튼은 확대 시 화면 밖으로 나간다"처럼요. 우리가 점검을 '느낌'이 아니라 '데이터'로 하자고 말하는 이유가 여기에 있습니다. 그리고 이런 항목은 페이지마다 일관되게 확인하는 편이, 사람의 눈대중보다 정확합니다.

8. 무너짐을 줄이는 방향 — 우리의 관점

원인이 설계 결정에 있다면, 해법도 설계 결정에 있습니다. 우리가 권하는 방향을 정리합니다. 정확한 수치를 못 박기보다, 어떤 결정이 무너짐을 줄이는지를 봅니다.

그릇이 함께 늘어나게 둔다. 상자의 높이·너비를 고정값으로 박는 대신, 안의 글자에 따라 자연스럽게 늘어나도록 둡니다. 그러면 잘림과 겹침의 상당수가 사라집니다.

여백을 예비 공간으로 남긴다. 글자와 상자 경계 사이에 여유를 두면, 글자가 조금 커져도 부딪히지 않습니다. 여백은 낭비가 아니라 확대를 위한 완충입니다.

위아래로 흐르게 한다. 화면을 좁히거나 글자를 키웠을 때 콘텐츠가 가로로 넘치는 대신 세로로 재배치되도록 두면(WCAG 1.4.10의 취지), 넘침과 가로 스크롤이 줄어듭니다.

중요한 버튼을 흐름 안에 둔다. 제출·다음 같은 핵심 버튼이 확대 후에도 콘텐츠 흐름 안에서 닿을 수 있게 하면, '사라짐'으로 인한 마지막 단계 실패를 막을 수 있습니다.

이 방향들의 공통점은 "고정"을 줄이고 "유연"을 늘리는 것입니다. 화면을 사용자의 조건에 맞춰 변형될 수 있도록 열어두는 것 — 우리는 이것이 고령 친화 설계의 본질에 가깝다고 봅니다.

9. 작은 수정이 만드는 큰 차이 — 우선순위의 관점

무너짐을 한 번에 다 없앨 수는 없습니다. 그러나 앞의 여섯 유형은 사용자에게 주는 타격의 크기가 다릅니다. 우리가 보는 우선순위는 이렇습니다. 가장 먼저 손볼 곳은 '사라짐'과 '갇힘' 입니다. 이 둘은 단순한 불편이 아니라 과업 자체를 멈추게 하기 때문입니다. 제출 버튼이 사라지면 신청이 끝나지 않고, 팝업에 갇히면 아예 빠져나오지 못합니다.

그다음은 '잘림' 입니다. 잘린 정보는 스크롤로도 복구되지 않아, 사용자가 무엇을 해야 할지 알 수 없게 만듭니다. 그 뒤로 '넘침'과 '깨진 정렬', 마지막으로 비교적 회복 가능한 '겹침' 순입니다. 물론 화면마다 사정이 다르므로 이 순서가 절대적이지는 않습니다. 다만 "보기 싫은 것"보다 "기능을 멈추게 하는 것"을 먼저 본다는 원칙은 어디서나 유효하다고 우리는 봅니다.

한 가지 덧붙이면, 이 모든 수정의 공통 토대는 앞 편에서 말한 단위 전환(px→상대 단위) 과 확대 상태 점검의 습관화입니다. 토대가 갖춰지면 여섯 유형의 상당수가 함께 줄어듭니다. 무너짐은 개별 증상처럼 보이지만, 뿌리는 의외로 공통적입니다.

10. 자주 만나는 오해 — 무너짐을 둘러싼 네 가지 통념

무너짐 이야기를 하면 현장에서 비슷한 통념을 만납니다. 우리는 이 통념들이 근거 없다고 보지 않습니다. 다 나름의 맥락이 있습니다. 다만 우리의 관점에서 어떻게 다시 볼 수 있는지 정리합니다.

"반응형이면 글자 확대도 당연히 된다." — 가장 흔한 오해입니다. 반응형(화면 너비에 따라 레이아웃이 바뀌는 것)과 글자 확대(사용자가 글자를 키우는 것)는 서로 다른 동작입니다. 반응형이 잘 되어 있어도 글자 단위가 px로 고정돼 있으면 글자는 안 커지고, 반대로 글자는 커지는데 상자가 고정돼 깨지기도 합니다. 둘은 함께 가야 하지만 하나가 다른 하나를 보장하지 않습니다. "반응형이라 괜찮다"는 말은, 실제로 글자를 키워 확인하기 전까지는 짐작일 뿐입니다.

"화면을 확대해 쓰는 사람은 소수다." — 앞 편에서 다뤘듯, 노안은 40대 중반부터 시작되는 보편적 변화이고, 야외·이동 중·피로 같은 상황적 저시력까지 더하면 확대를 원하는 사람은 결코 소수가 아닙니다. 게다가 공공 서비스는 디지털에 덜 익숙한 사람이 더 많이 의존합니다. "소수를 위한 예외"라는 전제 자체가 사실과 다르다고 우리는 봅니다.

"확대하면 디자인이 좀 깨지는 건 어쩔 수 없다." — 어느 정도의 시각적 변형은 자연스럽습니다. 그러나 우리가 이 글에서 '무너짐'이라 부른 것은 단순한 시각적 변형이 아니라, 읽을 수 없거나 누를 수 없게 되는 기능적 손실입니다. 모양이 조금 달라지는 것과, 제출 버튼이 사라지는 것은 전혀 다른 차원의 일입니다. 전자는 받아들일 수 있어도 후자는 받아들이기 어렵습니다. "어쩔 수 없다"는 말로 기능 손실까지 덮어서는 안 된다고 봅니다.

"큰 글씨 모드를 따로 만들면 된다." — 별도 모드는 그 모드를 켜는 것 자체가 어려운 분들에게는 닿지 않고, 본 화면보다 관리가 소홀해져 시간이 지나면 뒤처지기 쉽습니다. 우리는 별도 모드를 만드는 것보다, 본 화면 자체가 확대에 견디게 만드는 편이 더 견고하다고 봅니다. 모두를 위한 하나의 화면이, 일부를 위한 두 번째 화면보다 오래 갑니다.

11. 무너짐이 남기는 것 — 보이지 않는 비용

무너짐의 비용은 그 화면 하나에서 끝나지 않습니다. 우리가 보는 더 넓은 영향은 세 가지입니다.

신뢰의 손상. 공공 서비스에서 한 번 화면이 깨지는 경험을 하면, 사용자는 "여기는 어렵다", "여기는 못 믿겠다"는 인상을 갖습니다. 그 인상은 그 페이지만이 아니라 기관 전체, 나아가 '디지털 공공 서비스 전반'에 대한 불신으로 번지기 쉽습니다. 한 번의 무너짐이 남기는 자국은 생각보다 넓습니다.

대체 비용의 이동. 온라인에서 막힌 사용자는 결국 전화하거나 직접 방문합니다. 즉 온라인에서 줄이려던 비용이 콜센터와 창구로 옮겨갈 뿐, 사라지지 않습니다. 화면을 견고하게 만드는 일은 단지 친절이 아니라, 전체 서비스 비용을 줄이는 일이기도 합니다.

격차의 고착. 무너지는 화면은 디지털에 능숙한 사람은 우회하고, 그렇지 못한 사람은 멈추게 합니다. 결과적으로 같은 서비스가 누구에게는 열리고 누구에게는 닫힙니다. 이런 차이가 쌓이면 디지털 격차는 줄지 않고 굳어집니다. 우리는 무너짐을 '작은 버그'가 아니라 '격차를 만드는 작은 장치'로 봐야 한다고 생각합니다.

이 세 가지를 종합하면, 무너짐을 줄이는 일의 가치는 "화면이 예뻐진다"를 훨씬 넘어섭니다. 신뢰를 지키고, 비용을 아끼고, 격차를 줄이는 일 — 그 모든 것이 "키운 글자를 담을 그릇을 함께 키운다"는 작은 결정에서 시작됩니다.

12. 무너짐은 혼자 오지 않는다 — 다른 요소와의 관계

마지막으로, 글자 확대 시의 무너짐이 다른 접근성 요소들과 어떻게 얽히는지 짚겠습니다. 이 시리즈가 글자 크기에서 출발해 모바일·저시력·키오스크로 넓어지는 이유이기도 합니다. 무너짐은 결코 글자 하나의 문제로 끝나지 않습니다.

터치 타겟과 얽힌다. 글자가 커지면 버튼도 함께 커지는 것이 자연스럽지만, 그릇이 고정돼 있으면 글자만 커지고 버튼 영역은 그대로입니다. 그러면 보기에는 큰 글자가 작은 버튼 안에 갇혀, 정작 누르는 영역은 좁은 상태가 됩니다. 손이 떨리는 고령 사용자에게 이는 이중의 어려움입니다(터치 타겟은 모바일 편에서 따로 다룹니다).

대비와 얽힌다. 앞 편에서 보았듯, 글자가 크면 대비 요건이 완화됩니다. 반대로 확대가 막혀 글자가 작은 채로 남으면, 그 작은 글자는 더 높은 대비를 요구합니다. 무너짐으로 글자가 잘리거나 가려지면, 남은 글자의 가독성 부담은 더 커집니다. 크기·대비·무너짐은 서로를 밀고 당깁니다(대비는 저시력 편에서 다룹니다).

스크린리더와 얽힌다. 시각적으로 무너진 화면이라도 마크업이 잘 되어 있으면 스크린리더 사용자는 순서대로 읽을 수 있습니다. 반대로 시각적으로 멀쩡해 보여도 구조가 엉켜 있으면 스크린리더에서 길을 잃습니다. 무너짐은 '보이는 무너짐'과 '들리는 무너짐'으로 나뉘고, 둘은 늘 같이 가지 않습니다(시맨틱 구조는 저시력 편에서 다룹니다).

모바일 환경에서 증폭된다. 같은 무너짐도 큰 모니터에서는 사소해 보이지만, 작은 폰 화면에서는 치명적이 됩니다. 화면이 좁을수록 확대의 압력이 크고, 깨질 여지도 큽니다. 그래서 우리는 무너짐을 점검할 때 항상 모바일을 기준으로 봅니다(모바일은 별도 카테고리로 다룹니다).

이렇게 보면, 글자 확대 시의 무너짐은 접근성이라는 더 큰 그림의 한 조각입니다. 한 조각을 당기면 다른 조각들이 따라옵니다. 우리가 이 시리즈를 유형별·주제별로 나눠 다루면서도 끊임없이 서로를 참조하는 이유가 여기에 있습니다. 결국 한 사람의 한 경험 안에서, 이 모든 요소가 동시에 작동하기 때문입니다.

13. 고친 뒤가 아니라 만들 때 — 예방의 관점

지금까지는 이미 만들어진 화면에서 무너짐을 '찾아내는' 이야기였습니다. 그러나 가장 좋은 것은 처음부터 무너지지 않게 만드는 것입니다. 사후 점검도 중요하지만, 우리는 예방이 훨씬 싸고 확실하다고 봅니다. 다 만든 뒤에 깨진 곳을 하나하나 찾아 고치는 것보다, 만들 때 몇 가지 습관을 들이는 편이 결과가 좋습니다.

디자인 단계 — 글자가 커질 자리를 비워둔다. 시안을 그릴 때 글자를 상자에 '딱 맞게' 채우지 않고, 위아래·좌우에 여유를 둡니다. 그리고 디자인 검토 자리에서 한 번은 "이 버튼 글자가 1.5배 커지면 어떻게 될까"를 함께 그려봅니다. 종이 위에서 미리 상상하면, 코드로 옮기기 전에 많은 무너짐을 막을 수 있습니다.

개발 단계 — 단위를 처음부터 상대 단위로. 글자와 그릇의 단위를 px가 아니라 상대 단위로 시작하면, 나중에 일괄로 바꾸는 수고가 사라집니다. 처음 한 줄의 선택이 가장 쌉니다. 다 만든 뒤에 px를 상대 단위로 바꾸는 일은, 처음부터 상대 단위로 시작하는 것보다 몇 배 더 듭니다.

검수 단계 — 확대 상태를 '기본 조건'으로. 화면을 확인할 때 기본 크기뿐 아니라 200% 확대, 좁은 화면을 표준 점검 조건에 넣습니다. "확대해서도 봤는가"를 검수 통과의 필수 항목으로 두면, 무너짐이 출시 전에 걸러집니다.

조직의 습관 — 한 번 정한 토대를 공유한다. 단위·여백·확대 점검 같은 결정을 한 사람의 머릿속이 아니라 팀의 공통 기준(디자인 시스템·체크리스트)으로 박아두면, 사람이 바뀌어도 무너짐이 다시 늘지 않습니다. KRDS 같은 공통 디자인 시스템이 의미 있는 이유도, 이런 토대를 기관 단위로 공유해 주기 때문입니다.

우리의 관점에서 예방의 핵심은 "특별한 노력"이 아니라 "기본값의 전환"입니다. 한 번 상대 단위로, 한 번 여백을 넉넉히, 한 번 확대해서 보기 — 이 작은 기본값들이 자리 잡으면, 무너짐은 찾아 고치는 대상이 아니라 애초에 잘 생기지 않는 것이 됩니다.

14. 한 사례로 보는 무너짐의 생애 — 발견에서 예방까지

추상적인 원칙보다, 무너짐이 어떻게 생기고 어떻게 사라지는지 한 흐름으로 따라가 보면 이해가 또렷해집니다. 우리가 사례를 드는 이유는, 무너짐이 '기술적 결함 목록'이 아니라 '한 사람의 좌절과 그 해소'라는 이야기로 이해될 때 가장 잘 기억되기 때문입니다. 결함 보고서의 항목은 잊혀도, 한 사람이 멈춘 장면은 오래 남습니다. 익명으로 일반화한 한 사례를 처음부터 끝까지 옮겨 봅니다.

처음 신호는 사용자에게서 왔습니다. ○○ 지역의 한 어르신이 가족에게 "그 사이트에서 신청이 안 된다"고 말했습니다. 가족이 대신 해 보니 멀쩡했습니다. 여기서 어긋남이 시작됩니다. 가족은 기본 글꼴을 썼고, 어르신은 글꼴을 크게 키워 두었던 것입니다. 같은 화면이 두 사람에게 다르게 작동하고 있었습니다.

담당자가 어르신의 조건을 그대로 재현했습니다. 폰의 시스템 글꼴을 키운 뒤 신청 화면을 열자, 본문이 길어지면서 '다음' 버튼이 화면 아래로 밀려났습니다(유형: 사라짐). 어르신은 모든 칸을 다 채우고도 마지막 버튼을 찾지 못해, "여기서 끝"이라 여기고 멈췄던 것입니다. 화면은 오류 하나 없이 정상이었고, 그래서 아무도 몰랐습니다.

원인을 따라 들어가니, 화면 하단의 버튼 영역이 고정 위치로 박혀 있었고 본문 컨테이너의 높이도 고정값이었습니다. 글자가 커지자 본문이 그 고정된 틀을 넘어섰고, 버튼은 제자리에 갇힌 채 본문에 가려졌습니다. 뿌리에는 역시 '고정'이 있었습니다.

수정은 두 갈래로 이뤄졌습니다. 하나는 그 화면의 그릇을 글자에 따라 늘어나게 바꾼 것이고, 다른 하나는 더 근본적이었습니다 — 검수 통과 조건에 "글꼴을 키운 폰에서도 끝까지 진행되는가"를 넣은 것입니다. 그 자리에서의 수정이 한 화면을 살렸다면, 검수 조건의 변경은 앞으로의 모든 화면을 지켰습니다.

이 사례에서 우리가 읽는 것은 세 가지입니다. 첫째, 무너짐은 사용자에게서 먼저 드러나지만, 사용자는 그것을 신고하지 않는다. 둘째, 사용자의 조건을 재현하지 않으면 영영 보이지 않는다. 셋째, 한 화면을 고치는 것보다 한 절차를 바꾸는 것이 더 멀리 간다. 무너짐의 생애는 늘 비슷한 모양으로 시작하고, 늘 비슷한 자리에서 끝납니다.

맺으며 — 키운 글자를 담을 그릇을 함께 키우자

이번 편의 결론은 한 문장으로 줄일 수 있습니다. 글자를 키우는 일과, 그 글자를 담을 그릇을 키우는 일은 함께 가야 한다. 글자만 커지고 그릇이 그대로면, 사용자는 더 잘 보려다 오히려 화면을 잃습니다. 우리가 여섯 유형으로 무너짐을 쪼갠 것도, 결국은 "어느 그릇이 따라오지 못하는가"를 분명히 보기 위함이었습니다.

다시 강조하지만, 이 글은 규정이 아니라 관점입니다. 무너짐의 유형도, 그것을 줄이는 방향도, 더 나은 자료가 나오면 갱신될 수 있습니다. 다만 한 가지는 분명합니다 — 확대된 화면을 한 번도 보지 않은 채로는, 무너짐을 알아챌 수 없습니다. 사용자가 매일 보는 그 상태를, 만드는 우리도 한 번은 봐야 합니다.

끝으로, 이 글에서 여섯 유형으로 무너짐을 쪼갠 것은 분류 자체가 목적이 아니었습니다. 분류는 "어디를 봐야 하는지"를 알려주는 지도일 뿐입니다. 실제로 중요한 것은 그 지도를 들고 한 번 화면을 키워보는 행동입니다. 가장 정교한 유형 분류도, 한 번도 확대해 보지 않는 습관 앞에서는 무력합니다. 반대로 가장 단순한 점검 — "키워보고, 좁혀보고, 끝까지 해 보기" — 만으로도 대부분의 무너짐은 모습을 드러냅니다. 우리가 다음 편에서 그 '점검'을 따로 다루는 이유가 여기에 있습니다. 무너짐을 아는 것과, 무너짐을 찾아내는 것은 다른 일이기 때문입니다.

그리고 무너짐을 찾아내는 일은, 결국 사용자의 자리에 한 번 서 보는 일입니다. 우리가 늘 보는 기본 크기의 화면이 아니라, 누군가가 글자를 키워 둔 화면 — 그 낯선 화면을 한 번 열어보는 작은 수고가, 보이지 않던 벽을 드러냅니다. 화면을 만드는 사람과 쓰는 사람의 조건이 다르다는 단순한 사실을 기억하는 것, 그것이 이 모든 점검의 출발점입니다. 글자는 키울 수 있어야 하고, 키운 글자는 담을 그릇이 있어야 하며, 그 그릇은 우리가 한 번 확대해 봐야 비로소 확인됩니다. 이 작은 순환이 끊기지 않을 때, 공공 서비스의 문은 더 많은 사람에게 열린 채로 유지됩니다.

다음 편 예고 (003): [접근성연구·고령] 우리 사이트는 글자 확대에 견디는가 — 무너짐을 미리 알아채는 자가점검의 관점을, 단계별로 정리합니다.

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

WCAG 2.1 성공 기준 1.4.4 Resize Text / 1.4.10 Reflow (W3C WAI)
한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2 공개 문서
디지털 정부서비스 UI/UX 가이드라인(KRDS) 소개