KWCAG 33항목, 다 못 외워도 이 5개는

공감·문제제기

“접근성 점검 받으셨어요?”

공공 웹 담당자라면 이 질문 앞에서 한 번쯤은 등에 식은땀이 흐른 경험이 있을 거다. 나도 그랬다. 사이트 개편 막바지에, 담당 사업 점검 보고를 앞두고, 혹은 민원이 한 건 들어왔을 때. 그럴 때마다 ‘접근성’이라는 세 글자는 묵직한 숙제처럼 다가온다. 분명 중요한 건 알겠는데, 막상 “뭘 어떻게 챙겨야 하는데요?”라고 물으면 머릿속이 하얘진다.

그도 그럴 것이, 웹 접근성 지침이라는 게 항목이 한두 개가 아니다. 우리나라 웹 콘텐츠 접근성 지침, 흔히 KWCAG라고 부르는 그 기준만 해도 검사 항목이 무려 33개다. 33개. 처음 목록을 펼쳐 보면 ‘인식의 용이성’ ‘운용의 용이성’ ‘이해의 용이성’ ‘견고성’ 같은 딱딱한 분류 아래에, 또 줄줄이 세부 항목이 달려 있다. 한 줄 한 줄 읽다 보면 ‘이걸 다 외워서 챙기라고?’ 하는 막막함이 밀려온다.

솔직히 고백하자면, 나는 이 33개를 한 번도 다 외운 적이 없다. 그리고 지금도 다 외우지 못한다. 그런데 이 일을 몇 년 하다 보니 한 가지 깨달은 게 있다. 다 외울 필요가 없다는 거다. 정확히 말하면, 33개를 똑같은 무게로 짊어지려는 태도 자체가 잘못됐다는 거다.

33개 항목 중에는 ‘웬만하면 잘 안 걸리는 것’도 있고, ‘거의 모든 사이트에서 반복적으로 걸리는 것’도 있다. 실무에서 정말 중요한 건, 자주 걸리고 영향이 큰 핵심 몇 개를 먼저 몸에 익히는 거다. 그 핵심만 잡아도 사이트의 접근성 수준은 눈에 띄게 올라간다. 나머지는 그 다음에, 도구의 도움을 받아 가며 차근차근 챙기면 된다.

이 글은 바로 그 ‘핵심 5개’를 이야기하려고 쓴다. KWCAG 33항목 전부를 해설하는 백과사전 같은 글이 아니다. 그건 읽다가 지친다. 그 대신, 처음 접근성을 접하는 공공 웹 담당자가 ‘이 5개만 먼저 잡으면 절반은 한 거다’ 싶은 가장 중요한 다섯 가지를, 어려운 용어 없이 쉬운 비유로 풀어 설명하려 한다. 디자인 전공자가 아니어도, 개발자가 아니어도 괜찮다. 사이트 하나 운영해본 사람이라면 충분히 따라올 수 있는 이야기다.

왜 하필 ‘5개’냐고 물을 수 있다. 거기엔 이유가 있다. 사람이 한 번에 기억하고 실천할 수 있는 항목은 그리 많지 않다. 열 개, 스무 개를 들이밀면 머리에 남는 건 결국 하나도 없다. 그래서 ‘딱 다섯 개만 확실히’ 하는 전략이 오히려 더 많은 걸 바꾼다. 그리고 이 다섯 개는 내가 임의로 고른 게 아니다. 공공 사이트를 점검하다 보면 ‘거의 모든 사이트에서, 반복적으로, 큰 영향을 미치며’ 걸리는 항목들이 있는데, 그 교집합이 바로 이 다섯이다. 빈도와 영향, 둘 다 높은 항목들이라는 뜻이다. 그러니 이 다섯을 먼저 잡는 건 ‘가장 적은 노력으로 가장 큰 효과’를 내는 길이기도 하다.

미리 한 가지 안심시켜 드리고 싶다. 이 글은 접근성을 ‘무서운 규제’로 그리려는 글이 아니다. 오히려 그 반대다. 접근성은 ‘특별한 사람을 위한 특별한 배려’가 아니라, ‘결국 모두에게 더 편한 사이트를 만드는 일’이라는 걸 보여주고 싶다. 그리고 그 일이 생각보다 멀지 않고, 핵심만 잡으면 의외로 손에 잡힌다는 것도 함께 이야기하려 한다.

먼저 큰 그림부터 잡자. 웹 접근성이란, 한마디로 ‘누구나 웹을 쓸 수 있게 만드는 것’이다. 시각장애가 있는 분도, 손을 자유롭게 못 쓰는 분도, 색을 잘 구분 못 하는 분도, 나이가 들어 작은 글씨가 안 보이는 분도, 똑같이 정보를 얻고 서비스를 신청할 수 있어야 한다는 원칙이다. 그리고 KWCAG는 이 원칙을 ‘구체적으로 어떻게 하면 되는가’로 정리해둔 우리나라의 공식 지침이다.

여기서 가장 중요한 사실 하나. 공공기관에서 웹 접근성은 ‘하면 좋은 것’이 아니라 ‘반드시 해야 하는 것’이다. 법으로 정해진 의무다. 민간 쇼핑몰이라면 접근성이 떨어져도 ‘불편하면 떠나면 그만’이지만, 공공 서비스는 다르다. 증명서를 떼고, 세금을 내고, 복지를 신청하는 일은 다른 사이트로 갈 수가 없다. 그 기관 사이트가 유일한 창구다. 떠날 수 없는 사용자가 그 창구 앞에서 ‘나는 이걸 못 쓰는구나’ 하고 돌아서야 한다면, 그건 단순한 불편이 아니라 권리의 박탈이다. 접근성이 공공 영역에서 특히 무겁게 다뤄지는 이유가 여기에 있다.

이 글의 흐름을 미리 일러두면 이렇다. 먼저 ‘웹 접근성이 대체 뭔지’를 보청기와 점자블록 같은 일상의 비유로 풀고, KWCAG 33항목이라는 숫자의 정체를 짚는다. 그다음 본론에서 ‘다 못 외워도 이건 꼭’ 하는 핵심 5개를 하나씩, 깊게 다룬다. 대체 텍스트, 색에만 기대지 않기, 키보드만으로 쓰기, 입력칸에 이름표 붙이기, 글씨 키워도 안 깨지기 — 이렇게 다섯이다. 이어서 ‘그래서 이걸 사람이 일일이 챙기는 게 가능한가’라는 현실적인 질문을 던지고, 자동 검사가 왜 필요한지 이야기한다. 마지막으로 ‘우리는 무엇부터 시작하면 되는지’ 실무 단계로 정리한다. 처음부터 끝까지 ‘어려운 말을 쉬운 비유로 바꾸는 것’을 원칙으로 삼았으니, 편하게 읽어 내려가면 된다.

본론 1 — 개념·왜 중요한가

■ 웹 접근성, 점자블록과 경사로처럼 생각하면 쉽다

‘웹 접근성’이라는 말이 어렵게 들린다면, 우리가 일상에서 이미 익숙한 것들을 떠올리면 된다. 지하철역의 점자블록, 건물 입구의 경사로, 횡단보도의 음향 신호기, 버스의 저상 발판. 이것들의 공통점이 뭘까? ‘특정한 누군가가 시설을 쓸 수 없는 상황’을 미리 헤아려서, 그 사람도 똑같이 쓸 수 있게 만들어둔 장치라는 점이다.

웹 접근성은 바로 이 발상을 웹사이트로 옮긴 거다. 화면을 볼 수 없는 사람은 어떻게 웹을 쓸까? 화면 낭독기라는 프로그램이 화면의 글자를 음성으로 읽어준다. 그렇다면 그 사람이 정보를 제대로 얻으려면, 화면의 모든 내용이 ‘소리로 읽힐 수 있게’ 만들어져 있어야 한다. 마우스를 쓸 수 없는 사람은 키보드만으로 사이트를 조작한다. 그렇다면 모든 기능이 ‘키보드만으로도’ 작동해야 한다. 이런 식이다.

여기서 한 가지 흔한 오해를 짚고 가자. 접근성을 ‘장애인만을 위한 특별 배려’로 생각하는 사람이 많다. 하지만 실제로는 그렇지 않다. 경사로를 떠올려 보라. 휠체어 이용자를 위해 만들었지만, 유아차를 끄는 부모도, 무거운 짐을 실은 카트도, 다리를 다쳐 깁스를 한 사람도, 캐리어를 끄는 여행자도 다 그 경사로의 덕을 본다. 접근성도 똑같다. 시각장애인을 위해 대체 텍스트를 잘 달아두면, 이미지가 안 뜨는 느린 인터넷 환경의 사용자도, 데이터를 아끼려고 이미지를 끈 사용자도, 검색 엔진도 그 정보를 읽는다. 접근성은 ‘소수를 위한 비용’이 아니라 ‘모두를 위한 투자’에 가깝다.

이 점을 조금 더 밀고 가보자. 우리는 누구나 ‘일시적으로’ 혹은 ‘상황에 따라’ 장애와 비슷한 처지에 놓인다. 한 손에 아이를 안고 한 손으로만 폰을 만질 때, 우리는 ‘한 손 사용자’다. 시끄러운 지하철에서 영상을 볼 때, 우리는 ‘소리를 못 듣는 사용자’와 같은 처지다. 밝은 햇빛 아래서 화면을 볼 때, 우리는 ‘저시력 사용자’와 비슷한 어려움을 겪는다. 나이가 들면 누구나 눈이 침침해지고 손이 떨린다. 그러니 접근성은 ‘남의 일’이 아니라 ‘언젠가의 내 일’이기도 하다. 이렇게 생각하면 접근성을 챙기는 일이 조금 다르게 느껴진다.

특히 공공 웹은 사용자층이 민간보다 훨씬 넓다. 특정 연령, 특정 디지털 숙련도의 사람만 오는 게 아니다. 스무 살 대학생도, 여든 살 어르신도, 시각장애가 있는 분도, 한국어가 서툰 외국인 주민도 같은 사이트를 써야 한다. 사용자층이 넓다는 건 ‘가장 약한 고리’에 맞춰 설계해야 한다는 뜻이다. 가장 어려움을 겪는 사람이 쓸 수 있으면 나머지 모두가 쓸 수 있지만, 그 반대는 성립하지 않는다. 그래서 공공 웹에서 접근성은 ‘선택 영역’이 아니라 ‘기본 전제’다.

■ KWCAG 33항목, 그 숫자의 정체

자, 그럼 ‘무엇을 어떻게 챙겨야 접근성이 좋은 사이트’일까? 이걸 막연히 ‘잘 만들어 주세요’로 두면 아무도 검증할 수 없다. 그래서 기준이 필요하다. 우리나라에는 한국형 웹 콘텐츠 접근성 지침, 줄여서 KWCAG라는 공식 기준이 있다. 이게 바로 ‘우리 사이트가 접근성을 지키고 있는가’를 따질 때 잣대가 되는 항목들이다.

KWCAG는 큰 네 개의 원칙 아래 세부 항목이 정리돼 있다. 네 원칙의 이름은 다음과 같다. 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성. 이름이 딱딱하니 한 줄씩 쉽게 풀어보자.

‘인식의 용이성’은 ‘콘텐츠를 감각으로 받아들일 수 있는가’를 본다. 화면을 못 보는 사람도 정보를 ‘인식’할 수 있어야 한다는 거다. 이미지에 설명을 달았는가, 색에만 의존하지 않았는가, 글자 대비가 충분한가 같은 항목들이 여기 들어간다.

‘운용의 용이성’은 ‘기능을 조작할 수 있는가’를 본다. 마우스 없이 키보드만으로 모든 걸 쓸 수 있는가, 깜빡이는 콘텐츠로 사용자를 위험에 빠뜨리지 않는가, 충분한 시간을 주는가 같은 항목이다.

‘이해의 용이성’은 ‘내용과 동작을 이해할 수 있는가’를 본다. 입력칸에 무슨 정보를 넣어야 하는지 명확한가, 오류가 났을 때 어떻게 고쳐야 하는지 알려주는가, 페이지의 언어를 명시했는가 같은 항목이다. 여기서 ‘페이지의 언어를 명시한다’는 게 의외로 중요하다. 화면 낭독기는 페이지가 한국어인지 영어인지를 코드에서 읽어, 그에 맞는 발음으로 읽어준다. 이게 안 돼 있으면 한국어 문장을 어색한 외국어 발음으로 읽어버려, 듣는 사람이 내용을 알아듣지 못하게 된다. 작은 표시 하나가 ‘읽히느냐 안 읽히느냐’를 가르는 셈이다.

‘견고성’은 ‘다양한 환경에서 안정적으로 작동하는가’를 본다. 화면 낭독기 같은 보조기술이 콘텐츠를 제대로 해석할 수 있게 코드가 짜여 있는가를 따진다.

이 네 원칙 아래에 세부 검사 항목이 쭉 매달려서, 합치면 33개가 된다. ‘33개’라는 숫자가 처음엔 부담스럽겠지만, 이렇게 네 개의 큰 서랍으로 나눠서 보면 한결 정리가 된다. 무작정 33개를 외우는 게 아니라, ‘아, 이건 인식의 문제구나’ ‘이건 운용의 문제구나’ 하고 분류해 가며 이해하면 된다.

그리고 다시 한번 강조하지만, 이 33개를 다 같은 무게로 짊어질 필요는 없다. 실무에서 자주 걸리고 영향이 큰 핵심부터 잡는 게 현실적이다.

■ ‘하면 좋은 것’이 아니라 ‘해야 하는 것’

핵심으로 들어가기 전에, 한 가지를 분명히 짚고 가자. 공공 영역에서 웹 접근성은 권장 사항이 아니라 ‘의무’라는 점이다. 이건 정서적 호소가 아니라 제도의 영역이다. 우리나라에서 웹 접근성은 법으로 규정된 의무이고, 공공기관의 웹사이트는 누구나 차별 없이 정보에 접근할 수 있어야 한다는 원칙이 명시돼 있다. 즉, 접근성이 떨어지는 공공 사이트는 ‘조금 불친절한 사이트’가 아니라 ‘법적 의무를 충분히 다하지 못한 사이트’가 될 수 있다는 뜻이다.

그래서 접근성을 ‘여유가 되면 챙기는 항목’으로 미뤄두면 안 된다. 디자인이 예뻐야 한다거나 속도가 빨라야 한다는 건 ‘잘하면 더 좋은’ 영역이지만, 접근성은 ‘기본으로 갖춰져 있어야 하는’ 영역이다. 이 차이를 담당자가 분명히 인식하고 있어야, 사업을 발주할 때도 ‘접근성은 옵션이 아니라 필수 요건’으로 명시할 수 있다. 검수할 때도 ‘이건 빠지면 안 되는 것’으로 단호하게 요구할 수 있다.

또 하나 현실적인 이야기를 덧붙이면, 접근성은 ‘민원의 단골 소재’이기도 하다. 사이트를 쓰다가 벽에 부딪힌 사용자가, 특히 그게 권리 행사에 관한 일이라면, 그 불편을 그냥 넘기지 않고 정식으로 문제 제기를 하는 경우가 늘고 있다. 한 건의 민원이 들어오면 그때서야 부랴부랴 고치는 ‘사후 대응’은, 비용도 더 들고 평판에도 흠이 난다. 평소에 기준에 맞게 만들고 정기적으로 점검하는 ‘사전 예방’이 결국 가장 싸고 안전한 길이다. 접근성을 잘 챙기는 건 ‘착한 일’이기 이전에 ‘현명한 위험 관리’이기도 하다.

그렇다고 겁부터 먹을 필요는 없다. 법이라는 단어가 무겁게 들리지만, 실제로 챙겨야 할 일의 출발점은 결국 오늘 이야기할 ‘핵심 5개’ 같은 구체적인 항목들이다. 거대한 법의 세계가 아니라, 손에 잡히는 작은 점검 항목에서 시작하면 된다. 이제 그 핵심 다섯 개를 하나씩 들여다보자.

본론 2 — 핵심 5개 항목 하나씩

■ 핵심 ① 대체 텍스트 — 이미지에 ‘이름표’를 붙여라

가장 먼저, 그리고 가장 자주 걸리는 항목이 바로 이거다. 이미지의 대체 텍스트. 영어로 ‘alt text’라고 부르는, 그 익숙하면서도 자꾸 빠뜨리는 그것이다.

먼저 ‘대체 텍스트가 대체 뭔가’부터 보자. 웹페이지에 사진이나 그림, 아이콘을 넣을 때, 그 이미지가 ‘무엇을 담고 있는지’를 글자로 적어 코드에 함께 넣어두는 게 대체 텍스트다. 눈으로 보는 사람에게는 이 글자가 보이지 않는다. 하지만 화면을 못 보는 사람이 화면 낭독기로 사이트를 들을 때, 낭독기는 이미지를 ‘볼’ 수 없으니 대신 이 대체 텍스트를 읽어준다. 그러니 대체 텍스트는 ‘눈으로 볼 수 없는 사람을 위한 그림 설명’인 셈이다.

비유하자면 이렇다. 라디오 진행자가 청취자에게 사진을 설명한다고 생각해보자. “지금 화면에 보이는 건…”이라고 말하면 라디오 청취자는 아무것도 모른다. 좋은 진행자는 “파란 하늘 아래 노란 은행나무가 줄지어 선 가을 거리입니다”라고 풀어서 말한다. 대체 텍스트는 바로 그 ‘라디오용 설명’이다. 화면이라는 시각 매체를 소리라는 청각 매체로 옮겨주는 다리다.

그런데 실무에서 이게 왜 그렇게 자주 걸릴까? 이유는 단순하다. 눈으로 보는 사람에게는 대체 텍스트가 ‘보이지 않으니까’, 있는지 없는지 신경을 안 쓰게 되는 거다. 화면은 멀쩡해 보인다. 이미지도 잘 떠 있다. 그러니 ‘다 됐다’고 생각하고 넘어간다. 정작 그 이미지에 설명이 하나도 안 달려 있어서, 화면 낭독기로 들으면 “이미지” “이미지” “이미지”만 반복되는 황량한 페이지라는 걸 모른 채로 말이다.

특히 공공 사이트에서 자주 보는 패턴이 ‘이미지로 만든 안내문’이다. 중요한 공지사항이나 행사 안내를, 디자인이 예쁘게 나오라고 통째로 이미지 한 장으로 만들어 올리는 경우다. 보는 사람에게는 멀쩡하지만, 그 이미지에 대체 텍스트가 없으면 화면 낭독기 사용자에게는 ‘아무 정보도 없는 빈 페이지’가 된다. 가장 중요한 정보가, 가장 접근하기 어려운 형태로 올라가 있는 셈이다. 이건 정말 자주 걸리는, 그리고 영향이 큰 문제다.

이런 ‘이미지 안내문’이 위험한 또 다른 이유는, 그 안에 든 정보가 ‘검색도 안 되고, 복사도 안 되고, 번역도 안 된다’는 점이다. 글로 적힌 안내라면 사용자가 일부를 복사해 검색해보거나, 자동 번역으로 외국어로 바꿔 읽거나, 글자 크기를 키워 볼 수 있다. 하지만 이미지 안에 갇힌 글자는 그 어느 것도 안 된다. 한국어가 서툰 외국인 주민에게는 번역의 기회조차 막혀버린다. 그러니 ‘중요한 내용일수록 이미지가 아니라 글로 올린다’는 원칙은, 단지 시각장애인뿐 아니라 훨씬 더 많은 사람을 위한 배려다. 디자인이 아쉬우면, 글로 핵심을 올리고 이미지는 보조로 곁들이는 방식이 정답이다.

그럼 대체 텍스트는 어떻게 잘 다는 걸까? 핵심은 ‘그 이미지가 그 자리에서 전달하려는 의미’를 적는 거다. 단순히 ‘사진’이라고 적으면 의미가 없다. ‘무엇의 사진인지’를 적어야 한다. 다만 모든 이미지에 똑같이 길게 설명할 필요는 없다. 정보 전달이 목적인 이미지는 그 정보를 담아 적고, 단순히 장식용인 이미지는 오히려 ‘이건 장식이니 건너뛰어도 된다’는 표시를 해서 낭독기가 불필요하게 읽지 않게 하는 게 더 친절하다. 정보용은 채우고, 장식용은 비우는 것. 이 구분이 핵심이다.

여기서 한 가지 더. 대체 텍스트는 ‘짧고 정확하게’가 원칙이다. 라디오 설명을 떠올리면 된다. 너무 짧으면 정보가 부족하고, 너무 길면 듣는 사람이 지친다. 그 이미지가 ‘왜 거기 있는지’를 한 문장 정도로 압축하는 게 좋다. 버튼 역할을 하는 아이콘이라면, 그림 묘사가 아니라 ‘무슨 동작을 하는 버튼인지’를 적어야 한다. 돋보기 아이콘이라면 ‘돋보기 그림’이 아니라 ‘검색’이라고 적는 식이다. 사용자가 알아야 하는 건 그림의 생김새가 아니라 그 버튼의 기능이기 때문이다.

한 가지 더, 실무에서 헷갈리기 쉬운 지점을 짚자. ‘같은 이미지가 여러 페이지에 반복해서 들어가는 경우’다. 예를 들어 모든 페이지 상단에 똑같은 기관 로고가 들어간다고 하자. 이 로고에 대체 텍스트가 빠지면, 그 사이트의 ‘모든 페이지’에서 동시에 접근성 문제가 발생한다. 한 군데 실수가 사이트 전체로 번지는 셈이다. 반대로 공통 영역의 이미지 하나를 제대로 고치면, 모든 페이지가 한꺼번에 좋아진다. 그래서 ‘반복되는 공통 이미지’부터 점검하는 게 효율적이다. 머리글과 바닥글에 들어가는 로고, 아이콘, 배너 같은 것들 말이다. 이건 적은 노력으로 가장 넓은 효과를 보는 지점이다.

또 자주 묻는 질문이 ‘차트나 그래프 같은 복잡한 이미지는 어떻게 하나’이다. 짧은 한 줄로는 그 안의 정보를 다 담을 수 없으니까. 이런 경우엔 짧은 대체 텍스트로 ‘무엇에 관한 그래프인지’를 알려주고, 그 그래프가 전하려는 핵심 수치나 추세는 본문 글로 따로 풀어 적어주는 게 정석이다. 그림 안에만 숨어 있던 정보를 글로 꺼내두면, 화면을 못 보는 사람도 그 핵심을 읽을 수 있다. ‘그림에 있는 중요한 정보는 어떤 형태로든 글로도 존재해야 한다’ — 이 원칙 하나만 기억해도 복잡한 이미지 문제의 대부분이 풀린다.

이 대체 텍스트 하나만 제대로 챙겨도, 사이트의 접근성은 체감상 크게 달라진다. 화면 낭독기 사용자에게 ‘읽을 수 있는 사이트’와 ‘읽을 수 없는 사이트’를 가르는 가장 큰 분기점이 바로 여기이기 때문이다. 그래서 핵심 5개 중 첫 번째로 꼽았다.

■ 핵심 ② 색에만 기대지 마라 — 빨강·초록만으로 말하지 않기

두 번째 핵심은 ‘색으로만 정보를 전달하지 않기’다. 이것도 정말 흔하게 걸리는데, 막상 설명을 들으면 ‘아, 이게 그렇게 중요한 거였구나’ 하고 무릎을 치는 항목이다.

먼저 상황을 그려보자. 어떤 표가 있다. 정상 항목은 초록색 글씨로, 문제 항목은 빨간색 글씨로 표시돼 있다. 보는 사람 입장에서는 직관적이다. 빨강은 위험, 초록은 안전. 그런데 여기에 큰 함정이 있다. 색을 잘 구분하지 못하는 사람, 즉 색각 이상이 있는 사람에게는 이 빨강과 초록이 비슷한 톤의 색으로 보인다는 거다. 그러면 그 표는 ‘아무 구분도 없는 표’가 돼버린다. 어느 게 정상이고 어느 게 문제인지 알 수가 없다.

색각 이상은 생각보다 드물지 않다. 특히 남성에게서는 상당한 비율로 나타난다. 즉, 당신의 사이트를 보는 사람 중 적지 않은 수가 ‘빨강과 초록을 비슷하게’ 보고 있을 수 있다는 얘기다. 그뿐만이 아니다. 화면이 흑백 모드인 경우, 밝은 햇빛 아래 화면이 바래 보이는 경우, 오래된 모니터에서 색이 정확히 안 나오는 경우 — 이런 상황에서도 ‘색으로만 구분한 정보’는 전달에 실패한다.

그래서 접근성의 원칙은 이렇다. 색은 ‘보조 수단’으로만 써라. 색으로 정보를 주는 건 좋지만, 색을 빼도 정보가 전달되게 만들어라. 무슨 말이냐면, 빨강·초록만으로 정상·문제를 구분하지 말고, 색에 더해 ‘다른 단서’를 함께 주라는 거다.

예를 들어보자. 문제 항목에는 빨간색을 쓰되, 그 옆에 ‘주의’라는 글자나 느낌표 아이콘을 함께 붙인다. 그러면 색을 못 보는 사람도 글자나 아이콘으로 그게 문제 항목이라는 걸 안다. 필수 입력칸을 빨간색으로만 표시하는 대신, 별표 기호나 ‘필수’라는 글자를 함께 붙인다. 링크를 본문 글씨와 색만 다르게 하는 대신, 밑줄을 함께 그어준다. 이렇게 ‘색 + 또 다른 단서’를 함께 주는 게 핵심이다.

이걸 신호등에 비유하면 이해가 쉽다. 우리나라 신호등은 단순히 빨강·노랑·초록 색만 다른 게 아니다. 위치도 다르다. 위가 빨강, 아래가 초록. 그래서 색을 구분 못 하는 사람도 ‘위쪽 불이 켜지면 멈춤’이라는 위치 정보로 신호를 읽을 수 있다. 좋은 디자인은 이렇게 ‘색 말고도 단서를 하나 더’ 준다. 색은 빠르게 인지되는 강력한 신호지만, 그 신호를 못 받는 사람이 있다는 걸 잊지 않는 게 접근성이다. 한 가지 단서에 모든 걸 거는 설계는, 그 단서가 통하지 않는 사람 앞에서 무력해진다. 그래서 ‘이중 단서’가 안전하다. 색이 안 통하면 글자가, 글자가 안 통하면 형태가 정보를 대신 전한다. 이렇게 길을 여러 갈래로 열어두는 게 접근성의 기본 발상이다.

여기서 한 가지 흔한 반론을 짚자. “그렇게 단서를 자꾸 더하면 화면이 지저분해지지 않나?”라는 걱정이다. 충분히 이해되는 우려지만, 실제로는 잘 설계하면 오히려 화면이 더 명료해진다. 느낌표 아이콘이나 ‘필수’ 표시는 색을 못 보는 사람뿐 아니라 ‘바쁘게 훑어보는 모든 사람’에게도 빠른 단서가 된다. 정보를 한 가지 방식으로만 전하는 것보다, 여러 방식으로 겹쳐 전하는 게 결과적으로 더 잘 읽히는 화면을 만든다. ‘과하다’ 싶을 만큼 친절한 안내가, 사실은 모두를 위한 친절이라는 걸 경험하게 될 거다.

조금 더 실무적인 사례를 들어보자. 공공 사이트에서 색에만 의존하는 전형적인 장면이 몇 개 있다. 첫째, 달력에서 ‘오늘 날짜’나 ‘예약 가능한 날’을 색깔만 다르게 칠해두는 경우. 색을 못 보는 사람은 어느 날이 선택 가능한 날인지 알 수가 없다. 둘째, 진행 단계를 보여주는 막대에서 ‘완료한 단계’를 초록으로, ‘남은 단계’를 회색으로만 구분하는 경우. 셋째, 그래프에서 여러 항목을 색깔로만 구분하고 별도의 표시나 이름표를 안 붙이는 경우. 이 모두가 ‘색이 사라지는 순간 정보도 사라지는’ 설계다.

해법은 매번 같다. 색에 더해 ‘형태’나 ‘글자’를 하나 더 얹는 거다. 선택 가능한 날짜에는 테두리를 두르거나 점을 찍는다. 완료한 단계에는 체크 표시를 더한다. 그래프 항목에는 색뿐 아니라 무늬나 이름표를 붙인다. 색을 ‘없애라’는 게 아니다. 색은 그대로 두되, 색이 안 보이는 사람도 알 수 있게 단서를 ‘추가’하라는 거다. 색은 빠르고 직관적인 좋은 신호다. 다만 그 신호를 못 받는 사람을 위한 ‘예비 신호’를 함께 두는 것, 그게 전부다.

이 항목이 중요한 또 하나의 이유는, 막상 고치는 비용이 그리 크지 않다는 점이다. 이미 색으로 구분해둔 게 있다면, 거기에 글자나 아이콘, 밑줄 같은 단서를 하나 더 얹기만 하면 된다. 큰 공사가 아니다. 작은 보완으로 적지 않은 사람을 챙길 수 있으니, 가성비 면에서도 우선순위가 높은 항목이다.

■ 핵심 ③ 키보드만으로 다 되게 하라

세 번째 핵심은 ‘키보드 접근성’이다. 마우스 없이, 오직 키보드만으로 사이트의 모든 기능을 쓸 수 있어야 한다는 원칙이다.

‘마우스 안 쓰는 사람이 얼마나 된다고?’ 싶을 수 있다. 그런데 의외로 많다. 게다가 ‘마우스를 아예 못 쓰는 사람’만의 문제가 아니다. 손목 통증으로 마우스 쓰기가 불편한 사람, 노트북 터치패드가 익숙지 않은 어르신, 키보드 단축키로 빠르게 일하는 데 익숙한 사람까지 — 키보드로 조작하는 상황은 생각보다 넓다. 그러니 키보드 접근성은 ‘특정 장애를 위한 기능’이라기보다 ‘모든 조작 방식을 막지 않는 기본기’에 가깝다. 손을 정밀하게 움직이기 어려운 지체장애가 있는 분은 마우스의 작은 점을 정확히 클릭하는 게 매우 힘들다. 그래서 키보드의 탭(Tab) 키로 항목을 하나씩 이동하고, 엔터(Enter) 키로 선택하는 방식으로 웹을 쓴다. 시각장애가 있어 화면 낭독기를 쓰는 분도 마찬가지다. 화면을 못 보니 마우스로 ‘어디’를 클릭할지 가늠할 수가 없다. 그래서 키보드로 순서대로 이동하며 낭독기의 안내를 듣고 조작한다.

그러니 ‘키보드만으로 작동하는가’는 이 사용자들에게는 사이트를 쓸 수 있느냐 없느냐를 가르는 결정적인 문제다. 마우스로만 눌리는 버튼이 하나라도 있으면, 그 사람은 거기서 막힌다. 마우스를 올려야만 펼쳐지는 메뉴가 있으면, 키보드 사용자는 그 메뉴 안으로 들어갈 수가 없다. 신청 흐름 중간에 키보드로 못 누르는 ‘다음’ 버튼이 하나 있으면, 그 사람의 민원 신청은 거기서 끝난다.

여기서 키보드 접근성의 두 축을 알아두면 좋다. 하나는 ‘이동할 수 있는가’이고, 다른 하나는 ‘지금 내가 어디 있는지 보이는가’다.

먼저 ‘이동’. 탭 키를 누르면 화면의 조작 가능한 요소들을 순서대로 옮겨 다닐 수 있어야 한다. 그리고 그 순서가 ‘눈으로 보는 순서’와 자연스럽게 맞아야 한다. 화면 위에서 아래로, 왼쪽에서 오른쪽으로 읽는 순서대로 이동돼야지, 갑자기 화면 맨 아래로 튀었다가 다시 위로 올라오는 식이면 사용자는 길을 잃는다. 이 ‘이동 순서’가 엉켜 있으면 키보드 사용자는 미로 속을 헤매는 기분이 된다.

다른 하나는 ‘지금 어디 있는지’. 키보드로 이동하다 보면, 지금 어느 요소에 와 있는지가 화면에 표시돼야 한다. 보통 선택된 요소 주위에 테두리나 외곽선이 생기는데, 이걸 ‘초점 표시’라고 한다. 그런데 디자인을 깔끔하게 한다고 이 초점 표시를 일부러 없애버리는 경우가 적지 않다. 마우스 쓰는 사람에게는 그 외곽선이 거슬려 보일 수 있으니까. 하지만 키보드 사용자에게 이 초점 표시는 ‘내가 지금 화면 어디에 있는지’를 알려주는 유일한 단서다. 이걸 없애면, 키보드 사용자는 깜깜한 방에서 손전등 없이 길을 찾는 처지가 된다.

이걸 비유하자면 이렇다. 마우스가 손전등이라면, 키보드는 점자블록이다. 손전등을 든 사람은 원하는 곳을 바로 비추지만, 점자블록을 따라 걷는 사람은 정해진 길을 순서대로 밟아야 목적지에 닿는다. 그 길이 끊겨 있거나, 지금 어디쯤 왔는지 알 수 없으면 그 사람은 길을 잃는다. 키보드 접근성을 챙긴다는 건, 이 ‘점자블록 같은 길’이 화면 전체에 끊김 없이 깔려 있고, 지금 위치가 늘 보이게 한다는 뜻이다.

키보드 접근성에서 또 하나 자주 걸리는 게 ‘건너뛰기 링크’의 부재다. 화면 낭독기나 키보드 사용자는 페이지에 들어올 때마다 맨 위에서부터 차례로 이동한다. 그런데 모든 페이지 상단에는 보통 똑같은 메뉴가 길게 늘어서 있다. 만약 ‘본문으로 바로 가기’ 같은 건너뛰기 장치가 없으면, 이 사람은 새 페이지에 들어갈 때마다 그 긴 메뉴를 처음부터 다 거쳐야 본문에 닿는다. 메뉴 항목이 스무 개라면, 페이지를 옮길 때마다 스무 번씩 탭을 눌러야 본론이 시작되는 셈이다. 상상만 해도 진이 빠진다. 그래서 ‘반복되는 메뉴를 건너뛰고 본문으로 바로 가는’ 장치를 페이지 맨 앞에 두는 게 키보드 접근성의 기본 배려다. 눈으로 보는 사람에겐 잘 안 보이지만, 키보드로 다니는 사람에겐 엘리베이터 같은 존재다.

키보드 접근성은 한번 점검해보면 의외로 재밌다. 마우스를 책상 옆으로 치워두고, 오직 탭 키와 엔터 키, 화살표 키만으로 내 사이트를 처음부터 끝까지 써보는 거다. 로그인하고, 메뉴를 열고, 검색하고, 신청서를 작성하고, 제출까지. 이 여정을 키보드만으로 끝까지 해보면, ‘아, 여기서 막히는구나’ 하는 지점이 생생하게 드러난다. 직접 해보길 권한다. 백 마디 설명보다 한 번의 체험이 훨씬 강하게 와닿는다. 그리고 이 체험은 ‘접근성이 추상적인 규정이 아니라 누군가의 실제 불편’이라는 걸 몸으로 알게 해준다. 한 번 겪고 나면, 그다음부터는 버튼 하나를 만들 때도 ‘이거 키보드로 눌리나?’를 자연스럽게 떠올리게 된다.

■ 핵심 ④ 입력칸마다 ‘이름표’를 붙여라 — 폼 레이블

네 번째 핵심은 ‘입력칸의 레이블’이다. 폼, 그러니까 이름이나 전화번호, 주소 따위를 입력하는 칸마다 ‘이 칸에 뭘 넣어야 하는지’를 명확히 연결해두는 것이다.

공공 사이트는 유난히 입력할 게 많다. 회원가입, 민원신청, 예약, 설문, 자료 신청… 사용자가 뭔가를 ‘하려면’ 거의 항상 폼을 채워야 한다. 그런데 이 폼의 입력칸들이 접근성 관점에서는 자주 문제를 일으킨다.

먼저 ‘레이블’이 뭔지부터 보자. 레이블은 입력칸 옆이나 위에 붙는 ‘이름’이다. ‘이름’ ‘전화번호’ ‘생년월일’ 같은. 눈으로 보는 사람에게는 이 레이블이 바로 옆 칸과 시각적으로 가까이 있으니 ‘아, 이 칸에 이름을 넣으라는 거구나’ 하고 직관적으로 안다. 위치만으로 연결이 되는 거다.

그런데 화면을 못 보는 사람은 이 ‘위치로 연결되는 정보’를 받을 수가 없다. 화면 낭독기는 입력칸을 만나면 ‘여기에 뭔가 입력하는 칸입니다’라고는 읽지만, 그 칸이 ‘무엇을 입력하는 칸인지’는 코드상으로 레이블이 제대로 연결돼 있어야만 읽어준다. 위치만 가까운 건 소용없다. 코드 안에서 ‘이 레이블은 이 입력칸의 이름이다’라고 명시적으로 묶여 있어야, 낭독기가 “이름, 입력란”이라고 정확히 읽어준다.

이게 안 돼 있으면 어떻게 될까? 화면 낭독기 사용자에게는 폼이 ‘이름 없는 빈칸들의 나열’로 들린다. “입력란, 입력란, 입력란.” 어느 칸에 이름을 넣고 어느 칸에 전화번호를 넣어야 하는지 알 수가 없다. 신청서 한 장을 채우는 게 거의 불가능해진다. 정보를 ‘읽는’ 것보다 ‘입력하는’ 게 훨씬 어렵다는 점에서, 폼 레이블은 특히 신경 써야 하는 항목이다. 눈으로 보는 사람에게는 ‘레이블이 입력칸 위에 있으니 당연히 연결돼 보이는’ 것이, 코드 차원에서는 전혀 연결돼 있지 않을 수 있다. 보이는 것과 코드가 다를 수 있다는 점 — 이게 접근성에서 가장 자주 어긋나는 지점이다. 그래서 ‘눈으로 멀쩡해 보인다’는 게 ‘접근성이 괜찮다’는 보증이 절대 못 된다.

자주 보는 또 다른 함정이 있다. 디자인을 깔끔하게 한다고 입력칸 위의 레이블을 없애고, 칸 안에 흐릿한 글씨로 ‘이름을 입력하세요’라고 띄워두는 방식이다. 이 흐릿한 안내 글씨를 ‘플레이스홀더’라고 하는데, 보기엔 깔끔해도 접근성 면에서는 위험하다. 사용자가 그 칸에 뭔가를 입력하기 시작하면 안내 글씨가 사라져버려서, ‘내가 이 칸에 뭘 넣고 있었더라’를 잊게 만든다. 게다가 플레이스홀더는 진짜 레이블의 역할을 온전히 대신하지 못하는 경우가 많다. 그래서 ‘플레이스홀더로 레이블을 대체하지 말 것’은 폼 접근성의 기본 중 기본이다. 레이블은 레이블대로 두고, 안내가 더 필요하면 플레이스홀더를 보조로 쓰는 게 맞다.

레이블의 가치는 비단 시각장애인에게만 있는 게 아니다. 레이블이 입력칸과 제대로 연결돼 있으면, 그 레이블 글씨를 눌러도 해당 칸이 활성화된다. 작은 체크박스를 정확히 클릭하기 어려운 사람에게는, 그 옆의 넓은 글씨 영역을 눌러도 체크가 되니 훨씬 편하다. 손이 떨리는 어르신, 작은 화면의 모바일 사용자 모두가 덕을 본다. 또 한 번, 접근성을 챙기면 결국 모두가 편해진다는 원칙이 여기서도 작동한다.

폼과 관련해 하나 더 챙길 게 있다. ‘오류 안내’다. 사용자가 입력칸을 잘못 채웠을 때, 어디가 왜 틀렸는지 명확히 알려줘야 한다. 그런데 이걸 ‘틀린 칸을 빨갛게 칠하는 것’으로만 처리하는 경우가 많다. 앞서 ‘색에만 기대지 마라’에서 봤듯, 이건 색을 못 보는 사람에게는 아무 안내가 안 된다. ‘전화번호 형식이 올바르지 않습니다’처럼 글로 무엇이 틀렸는지 알려주고, 그 안내가 화면 낭독기로도 읽히게 연결해야 한다. 게다가 그 오류 안내는 ‘틀린 칸 바로 곁’에 있어야 한다. 화면 맨 위에 ‘입력값에 오류가 있습니다’라고만 뜨고 정작 어느 칸이 틀렸는지는 안 알려주면, 사용자는 긴 폼을 처음부터 다시 뒤져야 한다. 무엇이, 어디서, 왜 틀렸고, 어떻게 고치면 되는지 — 이 네 가지가 함께 안내돼야 좋은 오류 처리다.

폼은 사용자가 ‘목적을 이루는’ 마지막 관문인 경우가 많다. 정보를 아무리 잘 보여줘도, 신청서 한 장을 못 채우면 그 사람은 결국 서비스를 받지 못한다. 그래서 입력칸의 레이블은, 작아 보여도 ‘서비스의 완성’을 좌우하는 핵심이다. 정보를 ‘읽는’ 접근성은 챙겼는데 ‘입력하는’ 접근성을 놓치면, 사용자는 문 앞까지 와서 문턱을 못 넘는 셈이 된다. 공공 서비스의 본질이 ‘무언가를 신청하고 처리받는’ 것이라는 점을 떠올리면, 폼 접근성이 왜 그렇게 중요한지가 분명해진다.

■ 핵심 ⑤ 글씨 키워도 안 깨지게 하라 — 확대와 명도 대비

다섯 번째 핵심은 ‘글자를 키우거나 화면을 확대해도 내용이 깨지지 않기’, 그리고 그와 짝을 이루는 ‘글자와 배경의 충분한 명도 대비’다. 둘 다 ‘저시력’ 사용자, 그리고 사실상 ‘나이 든 모든 사람’과 직결되는 항목이라 함께 묶어 다룬다.

먼저 ‘확대’ 이야기. 눈이 침침한 사람은 브라우저 설정으로 글자를 키우거나 화면 전체를 확대해서 본다. 우리도 폰으로 작은 글씨를 볼 때 두 손가락으로 화면을 키우지 않나. 그게 일상이다. 문제는, 이렇게 확대했을 때 사이트가 ‘제대로 따라와 주느냐’다. 잘 만든 사이트는 글자를 키우면 내용이 자연스럽게 재배치되면서 다 읽힌다. 못 만든 사이트는 글자를 키우는 순간 글씨가 서로 겹치고, 박스 밖으로 삐져나가고, 버튼이 화면 밖으로 밀려나 누를 수도 없게 된다. 확대하자마자 사이트가 ‘깨지는’ 거다.

이게 왜 중요할까? 글자를 키워야만 읽을 수 있는 사람에게, ‘키우면 깨지는 사이트’는 ‘키워서 읽으려는 시도 자체를 막는 사이트’다. 작게 보면 안 보이고, 키우면 깨지니, 결국 못 쓴다. 특히 어르신 사용자가 많은 공공 서비스에서 이건 치명적이다. 복지 정보를, 건강 정보를, 가장 필요로 하는 분들이 글씨가 안 보여 돌아서야 한다면, 그건 서비스의 존재 이유를 무색하게 만드는 일이다.

여기 짝을 이루는 게 ‘명도 대비’다. 명도 대비란, 글자색과 배경색이 얼마나 뚜렷하게 구분되는가를 말한다. 흰 배경에 검은 글씨는 대비가 아주 높아서 누구나 잘 읽는다. 반대로 흰 배경에 연한 회색 글씨는 대비가 낮아서, 시력이 좋은 사람도 눈을 찡그리게 되고 저시력 사용자는 아예 못 읽는다. 디자인을 ‘세련되게’ 한다고 글씨를 연하게, 더 연하게 만들다 보면, 어느 순간 ‘예쁘지만 안 읽히는’ 화면이 된다. 멋과 가독성이 충돌하는 지점에서, 접근성은 가독성의 손을 들어준다.

명도 대비는 ‘안개 속 글씨’에 비유하면 쉽다. 짙은 안개 속에서는 가까이 있는 표지판도 흐릿해서 안 보인다. 안개가 걷히면 또렷이 보인다. 낮은 대비는 글자에 안개를 씌우는 것과 같다. 디자이너의 눈에는 그 옅은 회색이 ‘은은하고 고급스러워’ 보일지 몰라도, 그걸 읽어야 하는 사람에게는 그저 안개일 뿐이다. 충분한 대비는 그 안개를 걷어내, 모두가 또렷이 읽게 해준다.

확대가 깨지는 사이트가 생기는 흔한 원인 하나만 짚자. 글자나 박스의 크기를 ‘절대 크기’로 못 박아두면, 글자를 키워도 박스는 안 커져서 내용이 박스 밖으로 넘친다. 반대로 ‘상대 크기’로 유연하게 짜두면, 글자가 커질 때 박스도 함께 늘어나 내용이 자연스럽게 흐른다. 그래서 ‘확대해도 안 깨지는 사이트’는 우연이 아니라 처음부터 유연하게 설계된 결과다. 이건 화면 크기가 제각각인 요즘 시대에 ‘반응형’으로 잘 만드는 일과도 맞닿아 있다. 접근성을 챙기는 설계가, 결국 다양한 기기에서 잘 보이는 설계와 한 몸이라는 뜻이다. 하나를 잘하면 둘이 같이 좋아진다.

확대와 명도 대비, 이 둘을 핵심에 넣은 이유는 분명하다. 이건 ‘특수한 소수’만의 문제가 아니라, ‘나이 드는 모든 사람’의 문제이기 때문이다. 누구나 마흔을 넘기면 가까운 글씨가 침침해지기 시작한다. 즉, 지금 이 항목을 챙기는 건 미래의 나 자신을 위한 일이기도 하다. 그리고 공공 서비스의 주 사용자층에 고령층이 두텁다는 점을 떠올리면, 우선순위는 더 분명해진다. 작은 글씨로 멋을 부린 화면이 누군가에게는 ‘들어갈 수 없는 문’이 된다는 걸 떠올리면, 가독성을 양보하는 디자인이 얼마나 위험한지 분명해진다.

자, 여기까지가 ‘다 못 외워도 이건 꼭’ 하는 핵심 다섯 개다. 정리하면 이렇다. ①이미지에 대체 텍스트로 이름표를 달고, ②색에만 기대지 말고 다른 단서를 함께 주고, ③마우스 없이 키보드만으로 다 되게 하고, ④입력칸마다 레이블로 이름표를 붙이고, ⑤글씨를 키워도 안 깨지고 대비가 충분하게 한다. 이 다섯은 서로 다른 영역에 흩어져 있지만, 공통점이 하나 있다. ‘눈으로 보는 사람에게는 티가 안 나지만, 누군가에게는 쓸 수 있느냐 없느냐를 가르는 결정적 차이’라는 점이다. 그래서 이 다섯을 먼저 잡으라고 하는 거다.

본론 3 — 그래서 이걸 어떻게 다 챙기나

■ 33개를, 게다가 페이지마다, 사람이 다 본다고?

여기까지 읽고 나면 이런 생각이 들 거다. ‘핵심 5개는 알겠는데, 그럼 나머지 28개는? 그리고 이걸 우리 사이트 수백 페이지마다 다 봐야 하나?’ 아주 합리적인 걱정이다. 그리고 이 지점에서 접근성 실무의 가장 큰 현실적 장벽이 드러난다. ‘양’이다.

생각해보자. 접근성 항목은 33개. 그런데 사이트는 한 페이지가 아니다. 공공 사이트는 보통 수백, 많게는 수천 페이지에 달한다. 각 페이지마다 이미지가 수십 장, 입력칸이 여럿, 버튼과 링크가 빼곡하다. 이 모든 걸 사람이 일일이 ‘대체 텍스트가 달렸나, 레이블이 연결됐나, 키보드로 눌리나, 대비가 충분한가’를 손으로 점검한다고 상상해보라. 한 페이지를 꼼꼼히 보는 데만도 한참이 걸린다. 그걸 수백 페이지에 곱하면, 사실상 불가능에 가까운 작업량이 된다.

그래서 현실에서 벌어지는 일은 둘 중 하나다. 첫째, ‘메인 페이지만’ 점검하고 나머지는 ‘비슷하겠지’ 하고 넘긴다. 그런데 앞서 사례에서 봤듯, 공공 사이트는 부서마다 시기마다 따로 만들어져서 페이지마다 품질이 들쭉날쭉하다. 메인은 멀쩡한데 안쪽 페이지가 엉망인 경우가 허다하다. 둘째, 점검을 외주에 맡기는데, 사람이 하는 수작업이다 보니 비용도 크고 시간도 오래 걸리고, 무엇보다 ‘한 번 점검하고 끝’이 되기 쉽다. 사이트는 계속 바뀌는데, 점검은 1년에 한 번 몰아서 한다면, 그사이 새로 올라간 콘텐츠는 점검의 사각지대에 놓인다.

이게 접근성의 ‘불편한 진실’이다. 기준을 아는 것과 그 기준을 ‘모든 페이지에서 지속적으로 확인하는 것’은 전혀 다른 차원의 일이라는 거다. 좋은 기준이 있어도, 그 기준과 실제 사이트 사이의 거리를 ‘계속’ 측정하지 못하면, 기준은 문서로만 남는다. 측정되지 않는 품질은 관리되지 않는다.

■ 사람은 방향을, 도구는 디테일을

그래서 등장하는 게 ‘자동 검사’다. 접근성 항목 중 상당수는 사실 ‘기계가 판정하기에 적합한’ 것들이다. ‘이미지에 대체 텍스트가 달려 있는가’ ‘입력칸에 레이블이 연결돼 있는가’ ‘글자와 배경의 대비 수치가 기준 이상인가’ — 이런 건 코드를 읽어 들여 규칙대로 따지면 기계가 순식간에, 게다가 수백 페이지를 똑같은 잣대로, 지치지 않고 판정할 수 있다.

물론 모든 걸 기계가 다 할 수 있는 건 아니다. ‘이 대체 텍스트가 그림의 의미를 제대로 담았는가’ 같은 건 결국 사람이 봐야 한다. 기계는 ‘대체 텍스트가 있는지 없는지’는 알아도, 그 내용이 적절한지까지는 완벽히 판단하지 못한다. 그래서 가장 현실적인 역할 분담은 이거다. ‘사람은 방향을 잡고, 도구는 디테일을 챙긴다.’ 기계가 수백 페이지를 훑어 ‘여기 대체 텍스트가 빠졌다, 저기 레이블이 없다, 이 색 조합은 대비가 부족하다’를 싹 잡아주면, 사람은 그 목록을 받아 ‘진짜 의미 있는 우선순위’를 판단하고 고친다. 기계가 양을 감당하고, 사람이 질을 책임지는 거다.

이렇게 분업하면, 앞서 말한 ‘불가능에 가까운 작업량’이 갑자기 손에 잡히는 일이 된다. 사람이 수백 페이지를 다 볼 필요가 없다. 도구가 훑어준 ‘문제 목록’만 보면 되니까. 그리고 콘텐츠가 새로 올라갈 때마다 다시 돌리면, ‘1년에 한 번 몰아 점검’이 아니라 ‘상시 점검’이 된다. 측정이 일상이 되면 품질도 일상적으로 관리된다.

■ 그래서, 무엇부터 시작하면 될까

여기까지 읽은 담당자라면 ‘그래서 당장 뭘 하면 되는데?’가 궁금할 거다. 현실적인 순서로 정리해보자.

첫째, ‘현황 파악’부터다. 막연한 걱정은 아무것도 바꾸지 못한다. 우리 사이트가 지금 어느 수준인지를 먼저 알아야 한다. 자동 진단을 한 번 돌려서, 접근성 점수가 몇 점이고 어떤 문제가 몇 건이나 있는지를 눈으로 확인하는 게 출발점이다. 현황을 알아야 ‘어디가 급한지’ 우선순위가 잡힌다.

둘째, ‘영향 큰 것부터’다. 문제 목록이 나왔다면, 다 한꺼번에 고치려 들지 말자. 앞서 말한 ‘공통 영역’부터 손대는 게 효율적이다. 모든 페이지에 반복되는 머리글·바닥글·메뉴의 문제를 고치면, 한 번의 수정이 사이트 전체로 번진다. 그다음 사용자가 가장 많이 찾는 페이지, 신청·민원처럼 ‘목적을 이루는’ 핵심 흐름의 페이지를 우선 챙긴다. 방문이 거의 없는 구석 페이지보다, 많은 사람이 거치는 길목을 먼저 닦는 게 맞다.

셋째, ‘개편 시점에 맞춰 점진적으로’다. 기존 사이트를 하루아침에 다 뜯어고치는 건 비현실적이다. 새로 만드는 페이지부터 기준에 맞게 만들고, 기존 페이지는 개편이나 콘텐츠 교체 시점에 맞춰 차근차근 정리하면 된다. 중요한 건 ‘완벽’이 아니라 ‘방향’이다. 어제보다 오늘 한 건이라도 나아지면, 그 방향이 쌓여 결국 큰 차이를 만든다.

넷째, ‘기록하고 다시 측정하기’다. 고쳤으면 다시 진단을 돌려 ‘정말 나아졌는지’ 확인하자. 점검 결과를 시점별로 남겨두면, ‘우리가 이만큼 개선했다’는 증거가 된다. 이건 윗선 보고에도, 사업 성과를 정리할 때도 큰 도움이 된다. 막연한 노력보다, 숫자로 보이는 개선이 훨씬 설득력 있다.

이 네 단계를 한 문장으로 줄이면 이렇다. ‘재본다 → 급한 것부터 고친다 → 점진적으로 넓힌다 → 다시 재본다.’ 거창한 프로젝트가 아니라, 작은 순환을 꾸준히 돌리는 일이다. 그리고 이 순환에서 ‘재보는’ 부분을 사람이 아니라 도구가 맡아주면, 담당자는 ‘고치고 넓히는’ 데 집중할 수 있다.

본론 4 — ViewCheck로 접근성, 어떻게 챙기나

■ KWCAG 33항목을 자동으로 훑어주는 도구

이쯤에서 우리가 만드는 도구 이야기를 잠깐 하려 한다. 홍보처럼 들릴 수 있지만, 앞에서 한 ‘사람은 방향, 도구는 디테일’ 이야기의 가장 자연스러운 연장이라 짚고 넘어간다.

ViewCheck는 공공 웹사이트를 입력하면, 행정안전부 「전자정부 웹사이트 품질관리 지침」의 7대 영역 — 호환성, 접근성, 개방성, 접속성, 편의성, 효율성, 신뢰성 — 을 자동으로 진단하는 도구다. 이 중 ‘접근성’ 영역에서 바로 오늘 이야기한 KWCAG 33항목을 자동으로 검사한다. 이미지에 대체 텍스트가 달렸는지, 입력칸에 레이블이 연결됐는지, 색에만 의존한 정보 전달은 없는지, 명도 대비는 충분한지 — 오늘 다룬 핵심 5개를 포함한 항목들을, 사람이 일일이 보지 않아도 페이지마다 훑어준다.

그리고 ViewCheck의 진짜 강점은 ‘한 페이지’가 아니라 ‘사이트 전체’를 본다는 데 있다. 메인 페이지만 보고 ‘우리 사이트 괜찮네’ 하는 함정에 빠지지 않게, 수십에서 수백 페이지를 따라 들어가 같은 잣대로 점검한다. 부서마다 들쭉날쭉한 품질, 안쪽 페이지에 숨어 있던 문제까지 한눈에 드러난다. 앞에서 ‘메인은 멀쩡한데 안쪽이 엉망인 경우가 허다하다’고 했는데, 바로 그 사각지대를 들춰내는 게 사이트 전체 진단의 핵심 가치다. 사람이라면 엄두도 못 낼 ‘모든 페이지를 같은 기준으로’ 보는 일을, 도구는 지치지 않고 해낸다.

또 한 가지, 진단 결과는 단순히 ‘몇 점’이라는 숫자로 끝나지 않는다. ‘어느 페이지의 어떤 부분이 왜 문제인지’를 짚어주기 때문에, 담당자는 그 목록을 그대로 ‘할 일 목록’으로 쓸 수 있다. 막연히 ‘접근성을 높여야 한다’가 아니라 ‘이 이미지에 대체 텍스트를 달고, 저 입력칸에 레이블을 연결하고, 이 색 조합의 대비를 높인다’처럼 구체적인 작업으로 바뀐다. 추상적인 목표가 손에 잡히는 과제가 되는 것, 그게 도구가 주는 가장 실질적인 도움이다.

접근성만 보는 것도 아니다. ViewCheck는 KRDS 846규칙 — 디자인 기반 요소 DS 120개, 컴포넌트 CP 446개, 기본 패턴 BP 108개, 서비스 패턴 SP 172개 — 까지 함께 진단해서, ‘접근성’과 ‘디자인 표준 준수’를 한 자리에서 보여준다. 접근성은 결국 잘 만든 공공 웹의 한 축이고, 그 전체 그림을 함께 봐야 우선순위가 제대로 잡히기 때문이다. 접근성과 디자인 표준은 서로 동떨어진 게 아니다. 버튼이 KRDS 기준에 맞게 제대로 만들어지면, 그 버튼은 키보드로도 눌리고 레이블도 명확한 경우가 많다. 좋은 표준을 따르는 것 자체가 접근성을 함께 끌어올리는 셈이다. 그래서 두 가지를 한 화면에서 보는 게 의미가 있다.

■ 점수 카드 한 장으로 ‘지금 우리 수준’을 본다

진단을 돌리면 결과 화면 맨 위에 점수 카드가 뜬다. 우리 사이트의 접근성이, 디자인 표준 준수가, 지금 어느 수준인지를 한눈에 보여주는 요약이다. 33개 항목을 일일이 들여다보기 전에, ‘전체적으로 어디쯤 와 있나’를 먼저 잡아주는 나침반 같은 화면이다. 보고용으로도 요긴하다. 윗선에 ‘접근성 챙기고 있습니다’라고 말로만 하는 것과, 점수 카드 한 장을 보여주며 ‘여기까지 왔고 다음은 이걸 잡겠습니다’라고 하는 건 설득력이 다르다.

그리고 무엇보다, 자동 진단은 ‘한 번 보고 끝’이 아니라 ‘필요할 때마다 다시’ 돌릴 수 있다. 콘텐츠를 새로 올리고 나서, 개편을 마치고 나서, 점검 보고를 앞두고 — 그때마다 다시 돌려 ‘지난번보다 나아졌나, 새로 생긴 문제는 없나’를 확인할 수 있다. 접근성을 ‘1년에 한 번 큰일’이 아니라 ‘평소에 챙기는 일’로 바꿔주는 거다.

마무리

■ 다시 정리하면

긴 이야기를 했지만, 핵심은 단순하다. 웹 접근성은 ‘특별한 누군가를 위한 특별한 배려’가 아니라, ‘떠날 수 없는 사용자가 공공 서비스를 똑같이 쓸 수 있게 하는 기본’이다. 그리고 그 기준인 KWCAG 33항목은, 다 외울 필요 없이 핵심부터 잡으면 된다.

그 핵심 다섯 개를 다시 한 줄씩 떠올려보자. 첫째, 이미지에는 대체 텍스트로 이름표를 달아라 — 화면을 못 보는 사람을 위한 라디오 설명이다. 둘째, 색에만 기대지 마라 — 빨강·초록 옆에 글자든 아이콘이든 단서를 하나 더 줘라. 셋째, 키보드만으로 다 되게 하라 — 마우스 없이도 끊기지 않는 점자블록 같은 길을 깔아라. 넷째, 입력칸마다 레이블로 이름표를 붙여라 — 이름 없는 빈칸의 나열이 되지 않게. 다섯째, 글씨를 키워도 안 깨지고 대비가 충분하게 하라 — 미래의 나를 포함한 모든 침침한 눈을 위해.

이 다섯만 몸에 익혀도, 당신 사이트의 접근성은 분명히 한 단계 올라간다. 나머지 28개는 그다음에, 도구의 도움을 받아 가며 차근차근 채워 가면 된다. 처음부터 33개를 다 짊어지려다 지쳐 포기하는 것보다, 핵심 5개를 확실히 잡고 점점 넓혀 가는 게 훨씬 현실적이고 오래간다. 운전을 배울 때 모든 교통 법규를 외우고 차에 타는 사람이 없는 것과 같다. 핵심 원칙을 몸에 익히고, 세부는 필요할 때 찾으면 된다.

그리고 ‘양’의 문제는 도구에 맡기자. 사람이 수백 페이지를 일일이 손으로 점검하는 건 불가능에 가깝다. 기계가 잘하는 ‘있는지 없는지, 기준에 맞는지’는 기계에 맡기고, 사람은 ‘무엇이 정말 중요한가’를 판단하는 데 힘을 쓰면 된다. 사람은 방향을, 도구는 디테일을. 이게 접근성을 지치지 않고 오래 챙기는 비결이다.

마지막으로, 가장 추천하는 첫걸음은 ‘우리 사이트가 지금 어디쯤 있는지부터 아는 것’이다. 막연히 ‘잘 안 돼 있겠지’ 걱정만 하는 것보다, 한 번 진단을 돌려 점수 카드를 눈으로 확인하는 게 백 배 낫다. 현황을 알아야 우선순위가 잡히고, 우선순위가 잡혀야 손이 움직인다.

한 가지만 더 덧붙이고 마치자. 접근성을 챙기는 일이 처음엔 ‘남을 위한 배려’처럼 느껴질 수 있다. 하지만 이 일을 오래 하다 보면 생각이 바뀐다. 접근성이 좋은 사이트는 결국 모두에게 편한 사이트다. 대비가 또렷하니 누구나 잘 읽고, 키보드로도 되니 빠르게 쓰고, 레이블이 명확하니 헷갈리지 않는다. 누군가를 위해 만든 길이, 알고 보면 모두가 걷는 큰길이 되는 거다. 그러니 접근성을 ‘부담’이 아니라 ‘더 좋은 사이트를 만드는 기준’으로 바라봐 주면 좋겠다. 떠날 수 없는 사용자를 끝까지 배려하는 사이트가, 결국 가장 신뢰받는 공공 창구가 된다.

다음 글에서는 오늘 핵심 5개 중 ‘키보드 접근성’을 더 깊이, 실제로 점검해보는 방법까지 풀어볼 생각이다. 접근성은 한 번에 다 끝낼 수 없는 일이지만, 한 걸음씩 가면 분명히 닿는 일이기도 하다. 오늘은 여기까지. 핵심 5개, 부담 없이 하나씩 시작해보자.

키워드/태그: #KRDS #공공웹 #웹접근성 #KWCAG #접근성검사 #전자정부 #행정안전부 #공공웹사이트 #대체텍스트 #키보드접근성 #명도대비 #ViewCheck