[웹 퍼블리싱 70] 접근성 - 확대와 사용자 설정

저시력 사용자가 웹을 쓰는 가장 흔한 방법은 화면을 확대하는 것이다. 글자를 키우고, 화면을 당겨 크게 보는 것이다. 그런데 어떤 웹사이트는 이 확대를 막아 버린다. 사용자가 화면을 키우려 해도 꿈쩍하지 않는 것이다. 이번 편은 사용자가 화면을 자기에게 맞게 바꾸려는 시도를 존중하는 확대와 사용자 설정을 다룬다.

나는 예전에 화면이 흐트러지는 게 싫어서 확대를 막아 둔 적이 있다. 레이아웃이 깔끔하게 유지되니 좋아 보였다. 그런데 그것은 저시력 사용자에게서 화면을 키울 권리를 빼앗는 일이었다. 확대를 막는 순간 그들은 내 사이트를 읽을 수 없게 된다. 나는 이 사실을 알고 나서 확대를 막는 코드를 모두 걷어냈다. 이 편은 그 반성의 기록이다.

1. 확대를 막지 마라

저시력 사용자에게 확대는 필수 도구다. 작은 글자를 읽을 수 있는 크기로 키우는 것이 이들이 웹을 쓰는 방법이다. 그런데 화면 설정으로 이 확대를 막아 버리는 코드가 있다. 사용자가 손가락을 벌려 화면을 키우려 해도 아무 반응이 없게 만드는 것이다. 나는 이 확대 차단을 접근성에서 가장 해로운 실수 중 하나로 여긴다.

확대를 막는 대표적인 코드가 화면 설정에 확대를 못 하게 하는 값을 넣는 것이다. 사용자 확대를 끄는 user-scalable=no나 확대 배율의 상한을 좁게 잡는 maximum-scale 같은 값이다. 이 값들이 들어가면 사용자가 화면을 키우려 해도 막힌다. 나는 화면 설정에서 이런 값을 절대 쓰지 않고, 사용자가 원하는 만큼 확대할 수 있게 열어 둔다.

확대를 막는 이유는 대개 레이아웃이 흐트러지는 게 싫어서다. 그러나 그것은 만드는 사람의 편의일 뿐, 사용자의 필요를 짓밟는 것이다. 나는 레이아웃의 깔끔함과 사용자의 읽을 권리가 부딪칠 때 사용자를 택한다. 확대했을 때 화면이 조금 흐트러지더라도, 확대 자체를 막아 아예 못 읽게 하는 것보다는 훨씬 낫기 때문이다.

사실 확대를 잘 지원하면 레이아웃이 크게 흐트러지지도 않는다. 뒤에서 다룰 유연한 설계를 해두면, 확대해도 화면이 알아서 재배치되어 무너지지 않는다. 나는 확대를 막을 게 아니라 확대에 잘 견디는 화면을 만드는 쪽으로 방향을 바꿨다. 막는 것은 회피이고, 견디게 만드는 것이 진짜 해결이다. 문제를 덮지 않고 푸는 것이다.

확대는 저시력 사용자만 쓰는 것이 아니다. 나이가 들어 눈이 침침한 사람, 작은 화면에서 글자를 키우고 싶은 사람, 잠깐 세밀한 부분을 크게 보고 싶은 사람 모두가 확대를 쓴다. 나는 확대를 특정 소수가 아니라 넓은 사용자가 쓰는 기본 기능으로 이해하게 됐다. 확대를 막으면 이 모든 사용자가 불편을 겪는다.

정리하면 확대는 저시력 사용자의 필수 도구이므로 화면 설정으로 확대를 막는 값을 넣지 않고, 레이아웃의 깔끔함보다 읽을 권리를 우선하며, 막는 대신 확대에 견디는 화면을 만든다. 나는 확대를 늘 열어 둔다. 그렇다면 확대에 잘 견디는 화면은 어떻게 만들까. 그 첫걸음이 상대 단위다.

2. 글자 확대와 상대 단위

화면 확대에는 두 가지가 있다. 화면 전체를 당겨 키우는 확대와, 글자 크기만 키우는 확대다. 후자는 브라우저 설정에서 글자만 크게 하는 것으로, 저시력 사용자가 자주 쓴다. 그런데 글자 크기를 고정해 두면 이 설정이 통하지 않는다. 나는 글자 크기를 사용자가 바꿀 수 있게 열어 두는 것을 확대 지원의 중요한 부분으로 여긴다.

글자 크기를 고정하는 원인이 절대 단위다. 글자 크기를 고정된 절대 단위 px로만 지정하면, 브라우저의 글자 키우기 설정을 무시할 수 있다. 사용자가 글자를 키우려 해도 그 크기에 묶여 버리는 것이다. 나는 이 문제를 알고 나서 글자 크기를 고정 단위로만 못 박는 것을 피하게 됐다. 고정은 사용자의 설정을 가둔다.

그 대안이 사용자 설정을 따르는 상대 단위다. 루트 글자 크기를 기준으로 하는 단위 rem으로 글자 크기를 지정하면, 사용자가 브라우저에서 기본 글자 크기를 키웠을 때 그에 맞춰 함께 커진다. 나는 글자 크기를 이 상대 단위로 지정해, 사용자의 글자 키우기 설정을 존중한다. 상대 단위는 사용자의 뜻을 따라 유연하게 늘어난다.

상대 단위를 쓰면 화면 전체가 사용자 설정에 맞춰 조화롭게 커진다. 글자만 커지는 게 아니라 여백과 간격도 함께 비례해 늘어나, 확대해도 균형이 유지된다. 나는 글자뿐 아니라 간격과 여백도 상대 단위로 지정해, 사용자가 크기를 바꿀 때 화면 전체가 한 덩어리처럼 자연스럽게 늘어나고 줄어들게 한다. 조화가 유지되는 것이다.

모든 것을 상대 단위로 할 필요는 없다. 테두리 두께처럼 커지지 않아야 자연스러운 것은 고정 단위가 낫다. 나는 사용자 설정에 따라 커져야 하는 것과 그대로여야 하는 것을 가려, 글자와 간격은 상대 단위로, 얇은 선 같은 것은 고정 단위로 둔다. 무엇을 사용자 뜻에 맡기고 무엇을 고정할지 가리는 것이 요령이다.

정리하면 글자만 키우는 확대를 지원하려면 글자 크기를 고정 단위로 못 박지 말고 사용자 설정을 따르는 상대 단위로 지정하며, 간격과 여백도 함께 상대 단위로 두어 조화를 유지한다. 나는 사용자 설정에 유연한 단위를 쓴다. 그런데 화면을 크게 확대하면 또 다른 문제가 생긴다. 바로 가로 스크롤이다.

3. 크게 확대해도 무너지지 않게

화면을 크게 확대하면 좁은 폭에 많은 내용을 담아야 하는 상황이 된다. 이때 화면이 잘 설계돼 있지 않으면 내용이 옆으로 삐져나가 가로 스크롤이 생긴다. 가로로도 세로로도 스크롤해야 하는 화면은 읽기가 몹시 어렵다. 나는 크게 확대했을 때 가로 스크롤이 생기지 않게 하는 것을 확대 지원의 핵심 관문으로 여긴다.

접근성 지침도 상당히 크게 확대했을 때 가로 스크롤 없이 세로로만 읽을 수 있어야 한다고 요구한다. 내용이 좁은 폭에 맞춰 다시 흐르며 쌓여야 한다는 것이다. 이것을 흔히 리플로우라 부른다. 나는 확대했을 때 내용이 옆으로 넘치지 않고 아래로 다시 흐르는지를 반드시 확인한다. 내용이 다시 흐르면 좁은 폭에서도 읽을 수 있다.

내용이 잘 다시 흐르게 하려면 유연한 설계가 필요하다. 폭을 고정한 요소나 옆으로만 늘어놓은 배치는 확대하면 넘친다. 반대로 폭에 맞춰 접히고 쌓이는 유연한 배치는 확대해도 무너지지 않는다. 나는 요소의 폭을 고정하기보다 담기는 공간에 맞춰 유연하게 두어, 화면이 좁아지면 내용이 아래로 자연스럽게 재배치되게 한다.

이 유연한 설계는 사실 반응형 설계와 같은 뿌리다. 화면이 작은 기기에서 잘 보이게 만든 화면은, 크게 확대한 화면에서도 잘 보인다. 둘 다 좁은 폭에 내용을 담는 문제이기 때문이다. 나는 반응형을 잘 해두면 확대 지원도 저절로 따라온다는 걸 알고, 두 가지를 하나의 유연한 설계로 함께 챙긴다. 뿌리가 같으니 함께 해결된다.

확대 상태를 직접 확인하는 것이 중요하다. 코드만 봐서는 확대했을 때 무너지는지 알 수 없다. 나는 브라우저에서 실제로 화면을 크게 확대해 보며, 가로 스크롤이 생기지 않는지, 내용이 잘리지 않는지, 겹치는 요소가 없는지를 눈으로 확인한다. 확대 지원은 상상이 아니라 실제 확대로 검증해야 확실하다. 직접 키워 봐야 안다.

정리하면 크게 확대해도 가로 스크롤 없이 세로로만 읽히도록 내용이 다시 흐르는 유연한 설계를 하고, 이는 반응형과 같은 뿌리이며, 실제로 확대해 검증한다. 나는 확대에 견디는 화면을 만든다. 확대와 함께 챙길 것이 하나 더 있다. 손가락이나 포인터로 누르는 대상의 크기다.

4. 누르는 대상은 넉넉하게

버튼이나 링크처럼 누르는 대상이 너무 작으면 정확히 누르기 어렵다. 손이 떨리는 사람, 큰 손가락으로 작은 화면을 쓰는 사람, 정밀한 조작이 힘든 사람에게 작은 대상은 큰 벽이다. 나는 누르는 대상을 넉넉한 크기로 만드는 것을 접근성의 한 부분으로 챙긴다. 정확히 겨냥하지 않아도 눌리는 크기가 필요하다.

접근성 지침은 누르는 대상에 최소 크기를 권한다. 손가락이나 포인터로 무리 없이 누를 수 있는 크기를 확보하라는 것이다. 나는 버튼과 링크, 아이콘 조작 요소가 이 최소 크기를 넘는지 확인한다. 특히 작은 아이콘 버튼이 이 기준에 못 미치기 쉬우니, 아이콘은 작아도 누를 수 있는 영역은 넉넉히 잡는다.

누르는 영역은 보이는 크기보다 클 수 있다. 아이콘 자체는 작게 두더라도, 그 주위에 눈에 안 보이는 여백을 더해 누를 수 있는 영역을 넓히면 된다. 나는 작은 아이콘 버튼에 넉넉한 안쪽 여백을 주어, 겉보기엔 작아도 실제 누르는 영역은 넓게 만든다. 보이는 크기와 누르는 크기를 나누어 생각하는 것이 요령이다.

서로 가까이 붙은 작은 대상들도 문제다. 작은 버튼이 다닥다닥 붙어 있으면, 하나를 누르려다 옆것을 누르기 쉽다. 나는 누르는 대상들 사이에 충분한 간격을 두어, 서로 잘못 눌리지 않게 한다. 크기가 넉넉하지 않다면 최소한 간격이라도 넉넉해야, 겨냥이 살짝 빗나가도 엉뚱한 것이 눌리지 않는다.

확대와 대상 크기는 함께 챙기면 더 좋다. 확대한 상태에서도 대상들이 겹치거나 너무 붙지 않아야 한다. 나는 확대했을 때 누르는 대상들이 여전히 넉넉하고 서로 떨어져 있는지 확인한다. 화면을 키운 저시력 사용자가 커진 화면에서도 정확히 누를 수 있어야 하기 때문이다. 확대와 대상 크기는 같은 사용자를 위한 배려다.

정리하면 누르는 대상은 정확히 겨냥하지 않아도 눌리도록 넉넉한 크기를 확보하고, 보이는 크기가 작으면 여백으로 누르는 영역을 넓히며, 대상들 사이에 충분한 간격을 둔다. 나는 누르는 대상을 넉넉하게 만든다. 마지막으로, 사용자가 미리 선언해 둔 여러 선호를 존중하는 문제를 살펴보자.

5. 사용자 선호를 존중한다

사용자는 자기 기기에 여러 선호를 미리 설정해 둔다. 어두운 화면을 선호한다거나, 움직임을 줄여 달라거나, 글자를 크게 보고 싶다는 것들이다. 웹은 이 선호들을 감지해 존중할 수 있다. 나는 이 설정들을 사용자가 미리 건네는 부탁의 목록으로 이해한다. 이 부탁을 알아듣고 응답하는 것이 사용자를 존중하는 웹이다.

대표적인 것이 밝고 어두운 화면 선호다. 어두운 화면을 선호하는 사용자는 기기에 그렇게 설정해 둔다. 이를 감지하는 조건 prefers-color-scheme으로 사용자의 선호를 알아채, 어두운 화면을 선호하면 어두운 테마를, 밝은 화면을 선호하면 밝은 테마를 보여줄 수 있다. 나는 이 선호를 감지해 사용자가 편한 밝기로 화면을 내어준다.

어두운 화면 선호는 취향만의 문제가 아니다. 빛에 예민한 사용자나 눈이 쉽게 피로한 사용자에게 어두운 화면은 편안함의 문제다. 반대로 어떤 사용자에게는 밝은 화면이 더 잘 읽힌다. 나는 어느 한쪽을 강요하지 않고, 사용자가 선택한 밝기를 따르는 것을 원칙으로 삼는다. 편한 밝기는 사람마다 다르니, 사용자에게 맡기는 것이 옳다.

앞 편에서 다룬 움직임 줄이기 선호도 같은 맥락이다. 사용자가 움직임을 줄여 달라고 설정했으면 애니메이션을 걷어낸다. 이처럼 여러 선호를 감지하는 조건들이 있고, 각각을 존중하면 사용자가 자기에게 맞는 화면을 받는다. 나는 밝기든 움직임이든, 사용자가 미리 선언한 선호를 웹이 먼저 알아듣고 따르게 한다.

이 선호들을 존중하는 바탕에는 하나의 태도가 있다. 화면을 만드는 사람이 모든 것을 정하는 게 아니라, 사용자가 자기 화면을 자기에게 맞게 바꿀 수 있게 여지를 남기는 것이다. 나는 웹을 내가 완성하는 것이 아니라 사용자가 자기 몫을 채워 완성하는 것으로 본다. 확대든 밝기든 움직임이든, 마지막 결정은 사용자에게 맡긴다.

정리하면 사용자는 밝기, 움직임, 글자 크기 같은 선호를 기기에 미리 설정해 두므로, 웹은 이 선호를 감지해 존중하고, 어느 한쪽을 강요하지 않으며, 마지막 결정을 사용자에게 맡긴다. 나는 사용자의 선택을 따른다. 지금까지 접근성의 여러 갈래를 다뤘다면, 다음 편에서는 이 모든 것을 점검하는 자동 검사 도구를 살펴본다.