alt=_이미지_… 이렇게 쓰면 안 됩니다

alt=_이미지_… 이렇게 쓰면 안 됩니다

【 공감·문제제기 】 

오늘은 좀 부끄러운 이야기부터 시작하려고 한다. 몇 해 전, 내가 어떤 공공 사이트의 접근성 점검을 처음 맡았을 때다. 화면을 보면 멀쩡했다. 사진도 예쁘게 들어가 있고, 배너도 시원시원하고, 누가 봐도 ‘잘 만든 사이트’였다. 그런데 화면 읽기 프로그램(스크린리더)을 켜고 그 사이트를 ‘귀로’ 들어봤더니, 전혀 다른 세상이 펼쳐졌다. 메인 배너에서 스크린리더가 이렇게 읽었다. “이미지. 이미지. 이미지. 이미지.” 그 다음 페이지로 넘어가니 “image_2024_final_v3.jpg. image_2024_final_v3.jpg.” 하고 파일 이름을 또박또박 읽어주는 거다. 눈을 감고 그 소리만 들어보니, 그 사이트는 ‘잘 만든 사이트’가 아니라 ‘눈으로 보는 사람에게만 잘 만든 사이트’였다.

그날 이후로 나는 alt 텍스트(대체텍스트)를 절대 가볍게 보지 않게 됐다. 솔직히 고백하면, 그 전까지 나도 alt가 뭔지는 알았지만 ‘있으면 좋고 없어도 그만’인, 그런 자잘한 항목으로 여겼다. ‘이미지에 설명 좀 안 붙었다고 큰일 나겠어?’ 싶었던 거다. 그런데 직접 귀로 들어보니 생각이 완전히 바뀌었다. 대체텍스트가 없거나 엉망인 이미지는, 눈으로 보지 못하는 사용자에게는 ‘있어도 없는 정보’다. 아니, 더 나쁘다. ‘이미지’라는 말만 수십 번 반복되니, 사용자는 ‘여기 뭔가 있긴 한데 그게 뭔지는 끝까지 알 수 없는’ 답답함 속에 갇힌다.

이번 주 수요일 글은 그 alt 텍스트 이야기다. 제목 그대로, alt=‘이미지’ 이렇게 쓰면 왜 안 되는지, 현장에서 실제로 어떤 실수들이 반복되는지, 그리고 그걸 어떻게 알아채고 고칠 수 있는지를 익명 사례 중심으로 풀어보려 한다. 특정 기관을 흉보려는 게 아니다. 어디서나 반복되는 ‘전형적인 실수’를 모아 보여주려는 거다. 읽으면서 ‘우리 사이트도 저런데’ 싶은 대목이 나와도 너무 자책하지는 말자. 대부분이 겪는 일이고, 대부분이 같은 방법으로 풀어왔다.

그리고 이 ‘들어보는 경험’은 한 번 해보면 결코 잊히지 않는다. 머리로 ‘대체텍스트가 중요하다더라’고 아는 것과, 직접 눈을 감고 ‘이미지 이미지 이미지’를 듣는 것은 완전히 다른 차원의 이해다. 전자는 지식이고 후자는 공감이다. 그래서 나는 접근성 교육을 할 때 늘 ‘일단 한 번 들어보세요’부터 시작한다. 설명 백 마디보다 1분의 체험이 사람을 바꾼다. 화면을 끄고 자기가 매일 관리하는 사이트를 귀로만 탐색해본 담당자는, 그날로 ‘alt에 이미지라고 쓰던 사람’에서 ‘alt를 정성껏 쓰는 사람’으로 바뀐다. 그만큼 이 체험의 힘은 세다. 

먼저 큰 그림부터. 대체텍스트는 웹 접근성(KWCAG, 한국형 웹 콘텐츠 접근성 지침)에서 가장 기본이자 가장 자주 어기는 항목이다. 웹 접근성이라고 하면 사람들은 흔히 ‘장애인을 위한 특별한 배려’ 정도로 생각하는데, 그건 절반만 맞는 말이다. 접근성은 ‘특정 누군가를 위한 추가 기능’이 아니라 ‘누구도 빠뜨리지 않는 기본 설계’다. 눈이 안 보이는 분, 색을 구분하기 어려운 분뿐 아니라, 데이터가 안 터져서 이미지가 안 뜨는 사람, 너무 밝은 야외에서 화면이 잘 안 보이는 사람, 나이가 들어 작은 글씨가 흐릿해진 사람 — 이 모두가 접근성의 수혜자다. 그리고 대체텍스트는 이 모든 상황에서 ‘그림 대신 말로 정보를 전하는’ 가장 직접적인 장치다.

특히 공공 사이트라면 이 문제를 가볍게 넘길 수가 없다. 사기업 사이트라면 ‘우리 고객은 주로 이런 분들이니까’라며 일부 사용자를 사실상 배제해도 — 좋은 일은 아니지만 — 사업적 선택으로 넘어갈 여지가 있다. 그런데 공공 서비스는 다르다. 공공 정보와 서비스는 ‘모든 국민’이 대상이다. 어떤 시민이 눈이 안 보인다는 이유로 민원 신청 방법을 알 수 없다면, 그건 그 시민이 받아야 할 공적 서비스를 받지 못한다는 뜻이다. 그래서 공공 사이트의 접근성은 ‘배려’가 아니라 ‘의무’에 가깝다. 행정안전부의 「전자정부 웹사이트 품질관리 지침」이 접근성을 7대 영역의 하나로 못 박아 둔 것도 같은 맥락이다.

그런데 막상 현장에서는 이 ‘기본 중의 기본’이 너무 자주 무너진다. 왜 그럴까? 가장 큰 이유는 ‘눈에 안 보이기 때문’이다. 색이 제각각이거나 글꼴이 뒤섞이면 만든 사람 눈에도 ‘좀 어수선한데’ 하고 보인다. 그런데 대체텍스트는 다르다. 화면에는 안 나온다. 코드 속에, 이미지 뒤에 숨어 있다. 그래서 만든 사람이 ‘잘 됐는지’를 눈으로 확인할 방법이 없다. 스크린리더를 켜서 직접 들어보지 않는 한, alt가 ‘이미지’든 빈칸이든 파일명이든 화면상으로는 똑같이 멀쩡해 보인다. 보이지 않으니 관리가 안 되고, 관리가 안 되니 무너진다. 오늘 글의 목적은 이 ‘보이지 않는 무너짐’을 눈에 보이게 만드는 거다.

한 가지 더 짚고 싶은 게 있다. 대체텍스트 문제는 ‘큰 사고처럼 빨간불이 켜지지 않는다’는 점에서 특히 위험하다. 사이트가 다운되면 즉시 민원이 빗발치고 다들 달려든다. 그런데 시각장애인이 우리 사이트에서 정보를 못 얻고 조용히 떠나는 건, 통계에도 잡히지 않고 민원으로도 잘 들어오지 않는다. 그분은 ‘여긴 안 되는구나’ 하고 포기할 뿐, 굳이 항의하지 않는다. 그래서 담당자 입장에선 ‘문제가 있다는 것조차 모르는’ 상태가 오래 이어진다. 손해는 분명히 나고 있는데, 그 손해가 눈에 안 보이니 고칠 동기도 안 생긴다. 이게 접근성 문제의 가장 무서운 점이다 — 피해자는 있는데 비명이 들리지 않는다. 그러니 우리가 먼저 귀를 기울여 ‘들리지 않는 비명’을 찾아내야 한다.

그리고 이건 ‘남의 일’이 아니다. 통계를 보면 시각장애를 포함해 어떤 형태로든 화면을 온전히 보기 어려운 사람의 비율은 결코 적지 않다. 거기에 앞서 말한 ‘일시적·상황적 제약’까지 더하면, ‘대체텍스트가 필요한 순간’은 사실상 모든 사용자에게 한 번쯤 찾아온다. 데이터가 안 터지는 지하철, 햇빛이 강한 야외, 손이 바쁜 출근길 — 그 순간엔 누구나 ‘이미지를 못 보는 사용자’가 된다. 그러니 대체텍스트는 ‘소수를 위한 배려’를 넘어 ‘모두가 언젠가 기대게 될 안전망’이라고 봐야 맞다.

반응형

【본론 1 — 대체텍스트란 정확히 무엇인가】

■ ‘대체텍스트’가 하는 일은 ‘번역’이다

대체텍스트가 정확히 뭔지부터 짚자. 웹페이지에 이미지를 넣으면, 그 이미지에는 보이지 않는 ‘설명 글’을 붙일 수 있다. 이게 대체텍스트, 영어로는 alternative text, 줄여서 alt다. 화면에는 안 나오지만, 화면을 ‘읽어주는’ 스크린리더가 이 글을 소리 내어 읽는다. 이미지가 어떤 이유로 안 떴을 때도 이 글이 대신 표시된다. 그러니까 대체텍스트는 ‘그림을 못 보는 상황에서, 그림을 대신하는 글’이다.

여기서 ‘번역’이라는 비유가 잘 들어맞는다. 이미지는 시각 언어로 정보를 담는다. 사진 한 장, 도표 하나, 아이콘 하나에 담긴 의미가 있다. 대체텍스트는 그 시각 언어를 ‘말의 언어’로 옮기는 번역이다. 번역의 핵심이 뭔가? ‘원문의 뜻을 정확히 옮기는 것’이다. 원문에 “신청 마감일은 8월 23일입니다”라고 적힌 안내 이미지가 있다면, 그 번역(대체텍스트)도 “신청 마감일은 8월 23일입니다”여야 한다. 그런데 이걸 ‘이미지’라고 번역하면? ‘원문은 한 페이지인데 번역은 그냥 〈그림〉이라고 한 단어만 적은’ 황당한 번역이 된다. 정보가 통째로 증발한다.

그래서 좋은 대체텍스트의 기준은 의외로 간단하다. ‘이 이미지를 안 보고 이 글만 들어도, 같은 정보를 얻을 수 있는가?’ 이 질문에 ‘그렇다’면 좋은 대체텍스트고, ‘아니다’면 고쳐야 할 대체텍스트다. ‘이미지’, ‘사진’, ‘그림’, 파일명, 빈칸 — 이런 건 전부 ‘아니다’에 해당한다. 들어봐야 아무 정보가 없으니까.

 

■ 모든 이미지에 설명이 필요한 건 아니다 — ‘의미’의 유무

여기서 한 가지 오해를 미리 풀어야 한다. ‘그럼 페이지에 있는 모든 이미지에 빠짐없이 긴 설명을 달아야 하나요?’라고 묻는다면, 답은 ‘아니오’다. 이게 대체텍스트의 의외로 까다로운 부분이다. 이미지에는 크게 두 종류가 있다.

하나는 ‘의미를 담은 이미지’다. 안내 포스터, 통계 그래프, 행사 사진, 버튼 역할을 하는 아이콘처럼, 그 이미지가 사용자에게 뭔가 정보를 전달하는 경우다. 이런 이미지는 반드시 그 정보를 담은 대체텍스트가 필요하다.

다른 하나는 ‘장식용 이미지’다. 페이지를 예쁘게 보이게 하려고 넣은 배경 무늬, 의미 없는 구분선, 단순 장식 아이콘처럼, 정보가 없는 경우다. 이런 이미지에는 오히려 대체텍스트를 ‘비워둬야’ 한다. 코드로는 alt=““ 처럼 빈 값을 명시한다. 그래야 스크린리더가 이 이미지를 ‘건너뛰어’ 읽는다. 

왜 굳이 비워두냐고? 만약 장식용 무늬 하나하나에 “파란색 곡선 장식”, “물결 무늬” 같은 설명을 다 붙이면, 스크린리더 사용자는 정작 중요한 정보 사이사이에 ‘장식 설명’을 끝없이 들어야 한다. 마치 책을 읽는데 문장마다 “여기 줄 그어져 있음”, “여백 있음” 하고 누가 옆에서 떠드는 것과 같다. 정보의 흐름이 끊기고 피로해진다. 그래서 ‘장식은 비워서 건너뛰게, 의미는 채워서 전하게’ — 이 둘을 구분하는 게 대체텍스트의 핵심 기술이다.

 이 구분이 왜 어렵냐면, ‘같은 이미지도 맥락에 따라 의미가 달라지기 때문’이다. 똑같은 ‘우산 아이콘’이라도, 그게 그냥 페이지를 꾸미는 장식이면 비워야 하고, ‘우천 시 행사 취소’를 뜻하는 신호로 쓰였으면 “우천 시 취소”라는 설명이 필요하다. 그래서 대체텍스트는 ‘이미지가 무엇을 그렸나’가 아니라 ‘이 자리에서 이 이미지가 무슨 역할을 하나’를 보고 정해야 한다. 이건 기계가 자동으로 완벽하게 채우기 어려운, 사람의 판단이 필요한 영역이기도 하다. 그래서 더더욱 ‘기준’과 ‘점검’이 중요하다.

 

■ 대체텍스트는 KWCAG의 첫 관문이다 

웹 접근성 지침인 KWCAG는 여러 항목으로 이루어져 있는데, 그중에서도 대체텍스트는 거의 ‘1번 타자’ 같은 위치다. 가장 먼저 나오고, 가장 기본이며, 가장 많이 어긴다. 접근성 점검을 하면 대체텍스트 관련 문제가 거의 항상 가장 많이 적발된다. 왜 그럴까? 앞서 말했듯 ‘눈에 안 보여서’이기도 하지만, ‘이미지가 워낙 많아서’이기도 하다. 요즘 공공 사이트는 텍스트보다 이미지가 더 많다고 해도 과언이 아니다. 배너, 카드뉴스, 인포그래픽, 아이콘, 첨부 미리보기… 이미지가 수백 개인 사이트에서 그 수백 개에 모두 적절한 대체텍스트가 들어가 있을 확률은, 솔직히 말해 매우 낮다.

그래서 대체텍스트는 ‘접근성 수준을 가늠하는 리트머스 시험지’ 같은 역할을 한다. 어떤 사이트의 대체텍스트 상태를 보면, 그 사이트가 접근성을 얼마나 신경 쓰는지가 거의 그대로 드러난다. 대체텍스트가 잘 관리된 사이트는 다른 접근성 항목도 대체로 챙기고 있고, 대체텍스트가 ‘이미지’ 천지인 사이트는 십중팔구 다른 항목도 부실하다. 그래서 점검할 때도 대체텍스트부터 본다. 가장 빠르게 그 사이트의 ‘접근성 체력’을 알 수 있는 지표이기 때문이다.

 비유하자면 대체텍스트는 건강검진의 ‘혈압’ 같은 항목이다. 측정하기 쉽고, 빠르게 나오고, 그 하나만으로도 전반적인 건강 상태를 꽤 짐작하게 해준다. 혈압이 높으면 다른 곳도 살펴봐야 하듯, 대체텍스트가 엉망이면 그 사이트의 다른 접근성 항목도 의심해봐야 한다. 그래서 ‘대체텍스트 점검’은 단순히 이미지 설명 하나를 확인하는 게 아니라, ‘이 사이트가 사용자 모두를 염두에 두고 만들어졌는가’를 가늠하는 첫 번째 신호 측정인 셈이다. 작은 항목 하나가 전체를 비추는 거울이 된다.

 

【본론 2 — 현장에서 만나는 ‘잘못된 alt’ 5가지 유형 (익명)】

이제 본격적으로 ‘이렇게 쓰면 안 되는’ 대체텍스트의 전형들을 보자. 점검 현장에서 거의 매번 만나는 단골들이다. 미리 말해두지만, 이 사례들은 전부 익명 처리했다. ○○시, A광역지자체, 한중앙부처, B공공기관, C기관 — 실제 어디인지는 중요하지 않다. 중요한 건 ‘어디서나 똑같이 반복되는 패턴’이라는 사실이다.

■ 잘못된 alt 1: 그냥 ‘이미지’라고 쓴 경우

가장 흔하고, 가장 허무한 유형이다. ○○시의 한 페이지를 점검했을 때, 메인 배너 다섯 장의 대체텍스트가 전부 ‘이미지’였다. 스크린리더로 들으면 “이미지, 이미지, 이미지, 이미지, 이미지.” 그게 끝이다. 

이게 왜 생기냐면, 많은 콘텐츠 관리 도구가 이미지를 올릴 때 ‘대체텍스트’ 입력란을 비워두면 경고를 띄운다. 그러면 담당자는 경고를 없애려고 일단 아무거나 채운다. 가장 손쉬운 게 ‘이미지’다. 빈칸 경고는 사라지고, 화면도 멀쩡하니, ‘처리 완료’로 보인다. 하지만 실제로는 아무것도 처리되지 않았다. 오히려 더 나쁘다. 빈칸이면 점검 도구가 ‘대체텍스트 없음’으로 명확히 잡아내기라도 하는데, ‘이미지’라는 글자가 들어가 있으면 ‘대체텍스트 있음’으로 통과되는 경우가 있어서, 문제를 숨겨버린다.

이 배너가 실은 ‘여름철 폭염 대비 행동요령 안내’ 포스터였다면? 눈으로 보는 사람은 그 중요한 안전 정보를 얻지만, 듣는 사람은 그냥 “이미지”만 듣고 지나간다. 폭염에 취약한 분일수록 그 정보가 더 절실할 텐데, 정작 그분이 정보에서 가장 멀어지는 역설이 생긴다.

 이 ○○시 사례에서 더 안타까웠던 건, 그 사이트가 결코 ‘대충 만든 사이트’가 아니었다는 점이다. 디자인도 깔끔하고, 정보 구성도 나름 체계적이었다. 담당자가 분명 애를 쓴 흔적이 보였다. 다만 ‘대체텍스트를 어떻게 써야 하는지’에 대한 인식이 없었을 뿐이다. 그래서 콘텐츠 도구가 ‘대체텍스트를 입력하세요’라고 요구할 때 ‘이미지’라는 두 글자로 그 칸을 메우는 게, 그 순간 할 수 있는 최선이었던 거다. 악의도 게으름도 아니다. 그저 ‘이 칸이 누구에게, 어떻게 쓰이는지’를 한 번도 들어본 적이 없었던 것뿐이다. 그래서 나는 늘 말한다 — 대체텍스트 문제의 절반은 ‘교육의 문제’라고. 한 번이라도 ‘이미지 이미지 이미지’가 어떻게 들리는지를 들어본 담당자는 절대 그렇게 쓰지 않는다.

 

■ 잘못된 alt 2: 파일명이 그대로 들어간 경우

두 번째로 흔한 게 파일명이다. A광역지자체의 한 게시판을 점검했더니, 첨부된 사진들의 대체텍스트가 “DSC_0481.JPG”, “KakaoTalk_20240817.png”, “화면캡처_최종_진짜최종.png” 같은 식이었다. 스크린리더가 이걸 한 글자씩 또박또박 읽는 장면을 상상해 보라. “디 에스 씨 언더바 영사팔일 점 제이피지.” 사용자에게 이건 정보가 아니라 소음이다. 

이게 생기는 이유도 단순하다. 일부 시스템은 대체텍스트를 안 넣으면 ‘파일명’을 자동으로 채워 넣는다. 시스템 입장에선 ‘뭐라도 넣는’ 친절을 베푼 건데, 결과적으로는 사용자에게 암호 같은 파일명을 들려주는 셈이 된다. 자동으로 채워진 거라 담당자는 ‘비어 있지 않으니 됐다’고 안심하지만, 정작 그 내용은 사용자에게 무의미하다.

파일명 대체텍스트가 특히 고약한 건, ‘부분적으로 그럴듯해 보일 때’가 있다는 점이다. 요즘은 사진 파일명을 한글로 저장하는 경우도 많아서, ‘여름축제_무대공연.jpg’ 같은 파일명이 대체텍스트로 들어가면 ‘여름 축제 무대 공연’이라고 어느 정도 읽히긴 한다. 그래서 ‘이 정도면 괜찮은 거 아닌가’ 싶을 수 있는데, 함정이 있다. 첫째, ‘.jpg’ 확장자가 끝에 붙어 “점 제이피지”라고 읽힌다. 둘째, 파일명은 보통 띄어쓰기 대신 언더바(_)나 하이픈(-)을 쓰는데, 이게 어떻게 읽힐지 일정하지 않다. 셋째, 파일명은 어디까지나 ‘파일을 구분하려고’ 붙인 이름이지 ‘내용을 설명하려고’ 붙인 게 아니라서, 정작 핵심 정보(날짜·장소·신청법)는 거의 안 담긴다. 그래서 파일명은 ‘운 좋게 조금 읽히는’ 경우라도 결국 부실한 대체텍스트일 뿐이다. ‘있는데 부실한’ 유형의 또 다른 얼굴인 셈이다.

 

■ 잘못된 alt 3: 한 글자도 없이 비어 있는데, 의미 있는 이미지인 경우 

앞에서 ‘장식 이미지는 비워야 한다’고 했는데, 그 반대 실수다. 정보가 담긴 이미지인데 대체텍스트가 통째로 비어 있는 경우. 한중앙부처의 한 보도자료 페이지에서, 핵심 통계를 담은 인포그래픽이 대체텍스트 없이 들어가 있었다. 그 그래프 안에는 ‘올해 지원 대상 확대’, ‘신청 기간 변경’ 같은 중요한 내용이 글자로 박혀 있었는데, 전부 이미지 안에 갇혀 있었다. 스크린리더 사용자에게 그 페이지는 ‘통계 발표 보도자료인데 정작 통계는 하나도 없는’ 빈 페이지였다.

이 유형이 특히 위험한 건, ‘이미지 안에 글자를 박는’ 관행과 결합하기 때문이다. 인포그래픽이나 카드뉴스는 정보를 예쁘게 보여주려고 글자를 이미지로 만들어 넣는다. 그런데 그 이미지에 대체텍스트가 없으면, 그 안의 모든 글자 정보가 통째로 사라진다. 보기엔 정보가 풍부한 페이지인데, 듣기엔 텅 빈 페이지가 되는 거다. 그래서 ‘글자가 많이 박힌 이미지일수록 대체텍스트가 더 길고 꼼꼼해야 한다’는 역설적인 원칙이 생긴다.

이 한중앙부처 사례에서 짚고 넘어갈 게 하나 더 있다. 사실 ‘글자를 이미지로 박는’ 관행 자체가 접근성 관점에서는 권장되지 않는다. 가능하면 글자는 ‘진짜 글자’로 넣는 게 제일 좋다. 진짜 글자는 스크린리더가 그대로 읽고, 사용자가 확대해도 깨지지 않고, 복사도 되고, 검색에도 잡힌다. 반면 글자를 이미지로 만들어버리면 이 모든 장점이 사라진다. 그래서 카드뉴스나 인포그래픽처럼 ‘부득이하게 글자를 이미지로 만들어야 하는’ 경우라면, 최소한 그 안의 핵심 내용을 대체텍스트로 옮기거나, 같은 내용을 본문 텍스트로 함께 제공해야 한다. ‘예쁜 그림 따로, 읽히는 글 따로’ — 이 두 가지를 같이 주는 게 정석이다. 보는 사람에겐 그림으로, 듣는 사람에겐 글로, 같은 정보가 가닿게 하는 거다.

 

■ 잘못된 alt 4: 장식 이미지에 굳이 설명을 단 경우

이번엔 반대 방향의 ‘과잉’이다. B공공기관의 한 페이지는 접근성에 꽤 신경을 쓴 흔적이 있었는데, 너무 신경 쓴 나머지 ‘모든’ 이미지에 설명을 달아버렸다. 페이지 양옆의 장식 곡선, 문단 사이의 구분선, 단순 배경 무늬에까지 “파란색 곡선 장식”, “회색 가로 구분선” 같은 설명이 붙어 있었다. 의도는 좋았지만 결과는 나빴다. 스크린리더 사용자는 본문 한 줄을 듣기 위해 그 사이사이의 장식 설명을 다 들어야 했다. ‘제목 — 파란색 곡선 장식 — 본문 — 회색 가로 구분선 — 다음 문단 — 물결 무늬 …’ 정보의 흐름이 자꾸 끊긴다.

이 사례가 주는 교훈은, ‘접근성은 무조건 많이 채우는 게 아니라 정확히 채우는 것’이라는 점이다. 의미 있는 곳은 채우고, 의미 없는 곳은 비운다. 이 ‘판단’이 빠진 채로 ‘일단 다 달자’고 하면, 좋은 의도가 오히려 사용성을 해친다. 접근성은 양이 아니라 정확함의 문제다.

이 B공공기관 사례가 흥미로운 건, ‘접근성을 신경 쓴 사이트일수록 이런 과잉 실수를 한다’는 점이다. 아예 신경 안 쓴 사이트는 죄다 ‘이미지’나 빈칸이고, 조금 신경 쓴 사이트는 ‘다 채워야 한다’는 강박에 장식까지 설명을 단다. 둘 다 ‘대체텍스트의 목적’을 정확히 이해하지 못한 데서 온다. 목적은 ‘정보를 전하는 것’이지 ‘칸을 채우는 것’이 아니다. 이 목적을 분명히 하면, ‘정보가 있으면 전하고, 없으면 비운다’는 단순한 원칙이 자연스럽게 따라온다. 그래서 나는 ‘대체텍스트를 다 채웠다’는 말을 칭찬으로 듣지 않는다. ‘대체텍스트를 정확히 다뤘다’가 진짜 칭찬이다. 채움과 비움의 판단이 모두 들어가 있을 때 말이다.

 

■ 잘못된 alt 5: 설명은 있는데 정작 ‘핵심’을 안 담은 경우

가장 미묘하고, 그래서 가장 자주 놓치는 유형이다. C기관의 한 행사 안내 페이지에는 큼지막한 포스터 이미지가 있었고, 그 대체텍스트는 “행사 포스터”라고 적혀 있었다. 얼핏 보면 ‘이미지’나 파일명보다 훨씬 나아 보인다. 비어 있지도 않고, 무의미한 파일명도 아니고, 나름 ‘설명’을 했으니까. 하지만 이것도 부족하다. 그 포스터 안에는 ‘8월 20일 오후 2시, ○○문화회관, 사전 신청 필수’ 같은 핵심 정보가 다 들어 있었는데, 대체텍스트는 그걸 하나도 옮기지 않았다. “행사 포스터”라는 말만 듣고 사용자가 알 수 있는 건, ‘여기 행사 포스터가 한 장 있구나’뿐이다. 정작 그 행사가 언제, 어디서, 어떻게 신청하는지는 끝내 알 수 없다.

이게 가장 까다로운 이유는, 점검 도구가 ‘대체텍스트 없음’이나 ‘파일명’ 같은 명백한 오류는 잡아내도, ‘설명은 있는데 부실하다’는 건 기계적으로 판단하기 어렵기 때문이다. “행사 포스터”는 형식상으론 멀쩡한 대체텍스트다. 그래서 자동 검사를 ‘통과’해버린다. 하지만 사람이 그 이미지와 대체텍스트를 나란히 놓고 ‘이 설명만 듣고 같은 정보를 얻을 수 있나?’를 따져보면, 단번에 ‘부족하다’가 나온다. 그래서 대체텍스트 점검은 ‘자동’과 ‘사람의 눈’이 함께 가야 완성된다. 자동 검사가 명백한 오류를 빠르게 걸러주고, 사람이 그 위에서 ‘의미의 충실함’을 판단하는 식이다. 

이 다섯 가지 유형은 따로 노는 게 아니라 대개 한 사이트에 뒤섞여 나타난다. 배너는 ‘이미지’, 첨부 사진은 파일명, 인포그래픽은 빈칸, 장식은 과잉, 포스터는 ‘행사 포스터’ — 한 사이트 안에서 다섯 유형이 다 발견되는 일이 흔하다. 왜냐하면 이 모든 게 ‘대체텍스트를 어떻게 쓸지에 대한 공유된 기준이 없다’는 하나의 원인에서 비롯되기 때문이다. 기준이 없으니 사람마다, 페이지마다 제각각 처리하고, 그 제각각이 모여 이런 풍경이 된다.

 

■ 잘못된 alt 6: 같은 그림인데 페이지마다 설명이 다른 경우 

다섯 가지 외에 ‘보너스’로 하나 더 짚자. 같은 로고나 같은 안내 아이콘이 여러 페이지에 반복해서 들어가는 경우가 많다. 그런데 이 똑같은 그림의 대체텍스트가 페이지마다 제각각인 사이트가 의외로 많다. 어떤 페이지에선 ‘기관 로고’, 어떤 페이지에선 ‘로고 이미지’, 또 어떤 페이지에선 그냥 ‘이미지’, 어디선가는 빈칸. 사용자가 여러 페이지를 옮겨 다니며 같은 그림을 만날 때마다 다른 설명을 듣게 되는 거다. 이건 마치 한 사람을 페이지마다 다른 이름으로 부르는 것과 같아서, 듣는 사람을 혼란스럽게 만든다. 

이게 생기는 이유도 결국 ‘기준이 없어서’다. ‘우리 기관 로고의 대체텍스트는 이렇게 통일한다’는 약속이 없으니, 이미지를 넣는 사람마다 그 순간의 기분대로 적는다. 사소해 보이지만, 이런 ‘같은 그림 다른 설명’이 쌓이면 사이트 전체의 일관성이 무너진다. 대체텍스트도 디자인 토큰처럼 ‘반복되는 요소는 한 번 정해서 끝까지 같게’가 정석이다. 

대체텍스트와 직접 맞닿은 ‘아이콘 버튼’ 이야기도 잠깐 보태자. 글자 없이 그림만으로 된 버튼이 많다. 돋보기 모양 검색 버튼, 줄 세 개 모양 메뉴 버튼, X자 닫기 버튼 같은 것들이다. 이런 아이콘 버튼에 대체텍스트가 없으면, 스크린리더 사용자는 그게 무슨 기능인지 알 수 없다. ‘버튼’이라고만 읽히거나, 심하면 아이콘 이미지의 파일명이 읽힌다. 검색 버튼인데 사용자는 그게 검색인지 메뉴인지 닫기인지 모른 채 ‘버튼 하나’만 듣게 되는 거다. 그래서 아이콘 버튼에는 반드시 ‘검색’, ‘메뉴 열기’, ‘닫기’처럼 그 버튼의 ‘기능’을 대체텍스트로 달아줘야 한다. 여기서도 원칙은 똑같다 — ‘생김새(돋보기 모양)’가 아니라 ‘역할(검색)’을 적는 것. 아이콘 버튼의 대체텍스트는 곧 그 버튼의 ‘이름표’다. 이름표가 없으면 그 버튼은 보이긴 해도 쓸 수 없는, 유령 같은 버튼이 된다. 이건 대체텍스트가 ‘단순한 이미지 설명’을 넘어 ‘기능의 안내’로까지 쓰이는 대표적인 예다. 

이 부분을 짚으면서 다시 한번 강조하고 싶은 건, 대체텍스트 문제의 거의 모든 뿌리가 ‘공유된 기준의 부재’라는 점이다. ‘이미지’든 파일명이든 빈칸이든 과잉이든 부실이든 들쭉날쭉이든 — 증상은 여섯 가지지만 병의 뿌리는 하나다. 그래서 처방도 하나로 통한다. ‘대체텍스트를 어떻게 쓸지’에 대한 명확한 약속을 정하고, 그 약속이 지켜지는지 점검하는 것. 이 두 가지만 자리 잡으면 여섯 가지 증상이 동시에 사라진다.

 

【본론 3 — 왜 이런 실수가 반복될까】

■ 첫째, ‘만든 사람이 확인할 수 없다’

앞서도 말했지만, 가장 근본적인 이유다. 색이나 글꼴은 만든 사람 눈에도 보인다. 그런데 대체텍스트는 화면에 안 나온다. 만든 사람은 자기가 단 대체텍스트가 사용자에게 어떻게 들리는지를 ‘체험’하지 않는다. 그래서 ‘이미지’라고 적어두고도 그게 얼마나 무의미한지를 실감하지 못한다.

이걸 깨는 가장 좋은 방법은, 한 번이라도 직접 스크린리더로 자기 사이트를 ‘들어보는’ 거다. 눈을 감고, 화면을 끄고, 오직 소리로만 사이트를 탐색해보면, 대체텍스트의 중요성이 머리가 아니라 몸으로 와닿는다. 내가 그랬듯이 말이다. ‘이미지 이미지 이미지’를 직접 들어보면, 다시는 alt에 ‘이미지’라고 못 적게 된다.

 

■ 둘째, ‘누구의 일인지 애매하다’ 

대체텍스트는 디자이너의 일일까, 개발자의 일일까, 콘텐츠 담당자의 일일까? 현장에서 이게 늘 애매하다. 디자이너는 ‘난 이미지를 예쁘게 만드는 사람이지, 글을 쓰는 사람이 아니다’라고 생각하고, 개발자는 ‘난 시스템이 자동으로 넣게 만들었으니 내 일은 끝’이라고 여기고, 콘텐츠 담당자는 ‘기술적인 건 잘 모른다’며 손을 놓는다. 이렇게 ‘다들 자기 일이 아니라고 생각하는’ 틈에서 대체텍스트는 방치된다.

사실 대체텍스트는 ‘이미지에 담긴 의미를 가장 잘 아는 사람’이 써야 한다. 그건 대개 그 콘텐츠를 만든 담당자다. 행사 포스터를 올리는 사람이 그 행사의 날짜와 장소를 가장 잘 안다. 그러니 ‘이미지를 올리는 사람이, 올리는 그 순간에, 그 이미지가 무슨 정보를 담고 있는지 한 줄로 적는다’ — 이게 정착되면 대체텍스트 문제의 8할은 풀린다. 문제는 이 ‘한 줄’의 습관이 안 들어 있다는 거다. 그래서 기준과 교육, 그리고 ‘안 했을 때 알려주는 점검’이 필요하다.

이 ‘올리는 순간에 적는다’는 원칙이 왜 중요한지 한 번 더 강조하고 싶다. 콘텐츠를 올린 그 순간엔 담당자 머릿속에 그 이미지의 모든 정보가 생생하다. 행사 날짜, 장소, 신청 방법이 손끝에 있다. 그런데 시간이 지나 ‘나중에 한꺼번에 대체텍스트를 채우자’고 미뤄두면, 그땐 이미 그 이미지가 무슨 내용이었는지 기억이 흐려져 있다. 수백 장의 이미지를 뒤늦게 하나하나 열어보며 ‘이게 무슨 안내였더라’를 다시 파악하는 건 엄청난 노동이다. 그래서 대체텍스트는 ‘미루면 미룰수록 비싸지는’ 전형적인 작업이다. 올리는 순간 한 줄 적는 데는 10초면 되는데, 미뤄두면 나중에 몇 분이 걸린다. 디자인 부채와 똑같이, 대체텍스트도 ‘쌓이기 전에 막는 게’ 압도적으로 싸다. 

그래서 가장 이상적인 그림은 이렇다. ‘콘텐츠 담당자가 올리는 순간 대체텍스트를 한 줄 적고(예방), 그래도 빠지거나 부실한 게 생기면 자동 점검이 정기적으로 잡아내고(발견), 그 지적받은 곳을 사람이 손본다(교정).’ 예방·발견·교정의 세 단계가 맞물려 돌면, 대체텍스트는 더 이상 ‘쌓이는 빚’이 아니라 ‘관리되는 자산’이 된다. 어느 한 단계만으로는 부족하다. 예방만 믿으면 사람이 깜빡한 게 그대로 새어 나가고, 발견·교정만 하면 매번 뒷수습에 지친다. 셋이 함께 가야 지속 가능하다.

 

■ 셋째, ‘이미지가 너무 많고, 계속 늘어난다’

공공 사이트는 매일 새 콘텐츠가 올라온다. 보도자료, 공지, 행사 안내, 카드뉴스… 그때마다 이미지가 따라붙는다. 한 번 사이트를 잘 정비해서 모든 대체텍스트를 채워놨다고 해도, 그 다음 날부터 또 새 이미지가 대체텍스트 없이 올라오기 시작한다. 즉 대체텍스트 관리는 ‘한 번 하고 끝’이 아니라 ‘계속되는 일’이다. 댐을 한 번 막는 게 아니라, 끊임없이 흘러드는 물을 계속 관리하는 일에 가깝다. 

그래서 ‘사람이 일일이 전수 점검’하는 방식은 금방 한계에 부딪힌다. 처음엔 할 수 있어도, 콘텐츠가 쌓이고 페이지가 늘어나면 도저히 손으로 다 못 본다. 결국 ‘자동으로 새 이미지의 대체텍스트 상태를 점검해주는 장치’가 있어야 지속 가능하다. 사람은 자동 점검이 짚어준 문제 지점만 골라서 ‘의미의 충실함’을 손보면 된다. 자동이 양을 감당하고, 사람이 질을 책임지는 분업이다.

 

■ 넷째, ‘점검 도구가 통과시키면 다 된 줄 안다’ 

이건 좀 더 미묘한 함정이다. 앞서 말한 ‘이미지’라고 적힌 대체텍스트나 파일명이 자동 채워진 대체텍스트는, 일부 점검 방식에서 ‘대체텍스트 있음’으로 잡혀 ‘통과’돼버린다. 그러면 담당자는 ‘점검 도구가 통과시켰으니 우리 사이트는 접근성 문제없네’라고 안심한다. 그런데 그 ‘통과’는 ‘대체텍스트라는 칸이 비어 있지 않다’만 확인한 거지, ‘그 내용이 쓸모 있다’를 확인한 게 아니다. 형식은 통과했지만 본질은 실패한 거다. 

그래서 점검의 ‘기준’ 자체가 중요하다. 단순히 ‘대체텍스트가 있냐 없냐’만 보는 점검은 ‘이미지’ 같은 빈말을 걸러내지 못한다. 좋은 점검은 한 발 더 들어가서, ‘대체텍스트의 내용이 의심스러운 패턴인지’까지 본다. ‘이미지’, ‘사진’, ‘그림’ 같은 일반 명사로만 돼 있거나, 파일 확장자(.jpg, .png)가 들어가 있거나, 무의미한 숫자 나열이거나 — 이런 패턴을 잡아내야 ‘있는데 부실한’ 대체텍스트를 솎아낼 수 있다. 즉 점검의 수준이 곧 발견의 수준을 좌우한다. 허술한 점검은 허술한 사이트를 ‘괜찮다’고 도장 찍어주고, 까다로운 점검은 숨은 문제까지 들춰낸다.

 

■ 다섯째, ‘한 번 잘해도 운영하며 다시 무너진다’

이건 앞에서 ‘이미지가 계속 늘어난다’고 한 것과 통하는 이야기지만, 한 번 더 강조할 만하다. 사이트를 개편할 때 비싼 비용을 들여 접근성을 싹 정비했다고 치자. 그 순간엔 대체텍스트가 완벽할 수 있다. 그런데 개편 이후 운영이 시작되면, 매일 새 콘텐츠가 올라오면서 대체텍스트가 다시 흐트러진다. 게시판에 사진이 첨부되고, 보도자료에 인포그래픽이 붙고, 행사 배너가 교체되고 — 이 모든 ‘운영 중 변화’가 접근성을 조금씩 갉아먹는다.

 그래서 ‘개편 시점의 접근성 점수’와 ‘운영 1년 후의 접근성 점수’는 거의 항상 차이가 난다. 정비 직후엔 90점이었는데 1년 뒤 점검해보면 70점으로 떨어져 있는 식이다. 이건 누가 게을러서가 아니라, 운영이라는 게 본질적으로 ‘끊임없는 추가’이기 때문이다. 그래서 접근성은 ‘개편 때 한 번 잡는 것’이 아니라 ‘운영하며 계속 지키는 것’으로 봐야 한다. 그리고 ‘계속 지키려면’ 사람의 의지만으로는 부족하고, 정기적으로 상태를 측정해 ‘떨어졌으면 알려주는’ 장치가 필요하다.

【본론 3.5 — KRDS와 접근성, 그리고 846규칙 속의 대체텍스트】

여기서 잠깐 큰 그림을 짚고 가자. 대체텍스트는 ‘접근성’이라는 큰 우산 아래에 있고, 접근성은 다시 ‘공공 웹사이트가 지켜야 할 품질’이라는 더 큰 우산 아래에 있다. 이 구조를 알아두면 대체텍스트가 ‘왜 그렇게 중요한지’가 더 선명해진다. 

■ 행안부 7대 영역 속의 접근성

행정안전부의 「전자정부 웹사이트 품질관리 지침」은 공공 사이트가 갖춰야 할 품질을 7대 영역으로 정리해둔다. 호환성, 접근성, 개방성, 접속성, 편의성, 효율성, 신뢰성. 이 일곱 가지는 각각 ‘여러 브라우저에서 잘 도나(호환성)’, ‘누구나 쓸 수 있나(접근성)’, ‘정보가 개방돼 있나(개방성)’, ‘잘 접속되나(접속성)’, ‘쓰기 편한가(편의성)’, ‘빠르게 뜨나(효율성)’, ‘믿을 만한가(신뢰성)’를 묻는다. 

이 중에서 접근성은 ‘누구나’에 방점이 찍힌 영역이다. 그리고 그 ‘누구나’의 첫 관문이 바로 대체텍스트다. 화면을 못 보는 사람에게 이미지 정보를 전하는 것 — 이게 안 되면 ‘누구나 쓸 수 있다’는 말이 성립하지 않는다. 그래서 7대 영역을 평가할 때, 접근성 점수에서 대체텍스트가 차지하는 비중이 결코 작지 않다. 대체텍스트가 부실하면 접근성 점수가 깎이고, 접근성 점수가 깎이면 사이트의 전체 품질 등급이 내려간다. 작은 alt 한 줄이 사이트 전체 평가에까지 영향을 미치는 거다.

 

■ KWCAG 33항목 — 접근성을 ‘점검 가능한 항목’으로 쪼갠 것

‘접근성을 지키자’는 말은 너무 막연하다. 그래서 이걸 ‘점검할 수 있는 구체적인 항목’으로 쪼개둔 게 한국형 웹 콘텐츠 접근성 지침(KWCAG)이고, 거기엔 33개의 점검 항목이 있다. 대체텍스트는 그 33항목 중에서도 가장 앞자리에 놓이는 항목이다. 나머지 항목들도 중요하다 — 키보드로만 조작할 수 있는지, 색만으로 정보를 구분하지 않는지, 깜빡이는 요소가 발작을 유발하지 않는지, 표가 제대로 구조화돼 있는지 등등. 하지만 그 모든 항목 중에서 대체텍스트가 ‘1번 타자’로 불리는 건, 이미지가 가장 많고, 가장 자주 어기며, 그래서 가장 먼저 점검되기 때문이다.

KWCAG 33항목을 하나하나 사람이 손으로 점검한다고 생각해보라. 페이지 하나에도 수십 가지를 확인해야 하고, 사이트엔 페이지가 수백 개다. 이걸 전부 수작업으로 하는 건 사실상 불가능하다. 그래서 ‘자동으로 점검 가능한 항목은 자동으로, 사람 판단이 필요한 항목은 사람이’ 나누는 게 현실적인 접근이다. 대체텍스트의 ‘존재 여부’와 ‘의심스러운 패턴’은 자동으로 거를 수 있고, ‘의미의 충실함’은 사람이 본다 — 앞에서 말한 그 분업이 KWCAG 전체 점검에도 그대로 적용된다.

 

■ KRDS 846규칙은 어디에 있나

여기서 ViewCheck가 다루는 KRDS 846규칙 이야기를 짚자. KRDS(공공 디자인 시스템)의 846개 규칙은 크게 네 묶음으로 나뉜다. 디자인 기초를 다루는 DS 120개, 화면을 이루는 부품(컴포넌트)을 다루는 CP 446개, 폼이나 필터 같은 기본 패턴을 다루는 BP 108개, 검색·로그인·신청 같은 서비스 흐름을 다루는 SP 172개. 합치면 정확히 846개다.

대체텍스트와 접근성은 이 846규칙과 ‘겹치면서도 보완하는’ 관계다. 예를 들어 이미지가 들어가는 컴포넌트(CP)나 카드, 배너 같은 요소에는 ‘이미지에는 적절한 대체텍스트가 있어야 한다’는 원칙이 따라붙는다. 즉 KRDS 규칙을 잘 지키면 접근성의 상당 부분이 자연스럽게 충족되고, 거꾸로 접근성을 챙기면 KRDS 규칙 준수에도 가까워진다. 둘은 별개의 시험이 아니라, 같은 ‘잘 만든 공공 사이트’라는 목표를 다른 각도에서 보는 두 개의 렌즈다.

 그래서 제대로 된 점검은 이 둘을 따로 보지 않고 한 화면에서 함께 본다. ‘이 사이트는 KRDS 846규칙을 얼마나 지켰나’와 ‘이 사이트는 접근성(KWCAG)을 얼마나 지켰나’를 같이 보여줘야, 담당자가 ‘어디서부터 손대야 하나’를 종합적으로 판단할 수 있다. 대체텍스트 하나만 봐도, 그게 접근성 항목이면서 동시에 이미지 컴포넌트 규칙과도 맞닿아 있으니, 한쪽만 봐서는 전체 그림이 안 그려진다.

 

■ ‘부분 점수’가 아니라 ‘사람의 경험’으로

마지막으로 한 가지 관점의 전환을 권하고 싶다. 접근성 점수를 ‘시험 점수’처럼 받아들이면, ‘몇 점 넘기면 된다’는 식의 형식적 대응에 그치기 쉽다. 그런데 접근성의 진짜 의미는 점수가 아니라 ‘한 사람의 경험’이다. 우리 사이트의 대체텍스트가 부실하다는 건, 추상적인 ‘60점’이 아니라 ‘눈이 안 보이는 어떤 시민이 우리 행사 안내를 끝내 알지 못했다’는 구체적인 사건이다. 점수 뒤에는 늘 사람이 있다.

이 관점을 가지면 대체텍스트 한 줄을 쓰는 마음가짐이 달라진다. ‘점검에서 안 걸리려고’ 쓰는 게 아니라 ‘이걸 귀로 들을 누군가가 같은 정보를 얻게 하려고’ 쓰게 된다. 그리고 신기하게도, 그런 마음으로 쓴 대체텍스트가 점검도 가장 잘 통과한다. 본질을 챙기면 형식은 따라오는 법이다. 

내가 처음에 ‘이미지 이미지 이미지’를 귀로 듣고 충격받았던 그날을 다시 떠올린다. 그날 이후 나는 어떤 사이트를 보든 ‘이건 눈을 감고 들어도 알 수 있을까’를 먼저 상상하게 됐다. 그 작은 습관 하나가 일을 대하는 태도를 바꿨다. 우리가 만드는 건 ‘보는 화면’이 아니라 ‘닿는 정보’다. 화면은 정보가 사용자에게 가닿는 하나의 통로일 뿐이고, 어떤 사용자에겐 그 통로가 소리이거나 글이다. 대체텍스트는 바로 그 ‘다른 통로’를 열어두는 일이다. 통로 하나를 막아두면, 그 통로로만 올 수 있는 사람은 영영 들어오지 못한다. 반대로 통로 하나를 열어두면, 생각지도 못한 누군가가 그 길로 우리 정보에 닿는다. 대체텍스트 한 줄이 바로 그 ‘열어둠’이다. 

그래서 나는 대체텍스트를 ‘귀찮은 의무’가 아니라 ‘작지만 분명한 환대’라고 부르고 싶다. ‘당신도 우리 정보를 받을 자격이 있고, 우리는 당신을 잊지 않았습니다’라는 말을, 화면에 드러나지 않는 한 줄로 건네는 거다. 공공 서비스가 마땅히 해야 할 일이 있다면, 바로 이 ‘아무도 빠뜨리지 않겠다’는 약속을 코드 한 줄 한 줄에 새기는 일이 아닐까. 대체텍스트는 그 약속의 가장 작고 구체적인 실천이다. 

 

【본론 4 — 그래서 어떻게 점검하고 고치나】

■ 좋은 대체텍스트를 쓰는 5가지 원칙

복잡하게 생각할 것 없다. 다음 다섯 가지만 기억하면 대체텍스트의 8할은 잘 쓴다.

 첫째, ‘이 이미지가 안 보일 때, 무슨 정보를 전해야 하나’를 먼저 생각한다. 이미지의 ‘생김새’를 묘사하는 게 아니라, 이미지의 ‘역할·의미’를 옮기는 거다. ‘파란 배경에 흰 글씨가 있는 포스터’가 아니라 ‘8월 20일 오후 2시, ○○문화회관 행사, 사전 신청 필수’라고 쓰는 거다. 

둘째, 장식용이면 과감히 비운다. 정보가 없는 이미지에까지 설명을 다는 건 오히려 방해다. ‘이 이미지가 사라져도 정보 손실이 없나?’를 자문해서, ‘없다’면 비운다. 

셋째, 핵심을 빠뜨리지 않되, 간결하게. 대체텍스트는 소설이 아니다. 너무 길면 듣는 사람이 지친다. 그 이미지의 핵심 정보를 ‘한 호흡에 들을 수 있는 길이’로 압축하는 게 좋다. 다만 인포그래픽처럼 정보가 많은 이미지는, 짧은 대체텍스트로 요약하고 같은 내용을 본문 텍스트로도 따로 제공하는 게 정석이다.

넷째, ‘이미지’, ‘사진’, ‘그림’ 같은 군더더기를 빼라. 스크린리더는 이미 ‘이미지’라고 알려준 다음에 대체텍스트를 읽는다. 그러니 대체텍스트에 또 ‘이미지’라고 쓰면 “이미지, 이미지 …”처럼 중복된다. ‘무엇의 이미지인지’만 쓰면 된다.

다섯째, 같은 의미의 이미지는 같은 방식으로. 사이트 전체에서 ‘대체텍스트를 어떻게 쓸지’ 약속을 정해두면, 누가 콘텐츠를 올려도 일관된 품질이 나온다. 이게 결국 KRDS 같은 ‘공유된 기준’이 하는 일이다.

이 다섯 원칙을 실제로 적용해보면 의외로 빨리 손에 익는다. 처음엔 ‘이걸 채워야 하나 비워야 하나’ ‘얼마나 자세히 써야 하나’가 헷갈리지만, 몇 번만 해보면 감이 온다. 핵심은 늘 하나의 질문으로 돌아온다 — ‘이걸 귀로만 듣는 사람이 같은 정보를 얻나?’ 이 질문 앞에 이미지를 세워놓으면, 채울지 비울지, 얼마나 자세히 쓸지가 거의 자동으로 결정된다. 행사 포스터는 ‘언제 어디서 어떻게’를 담아야 하고, 통계 그래프는 ‘무엇이 얼마나 늘고 줄었는지’를 담아야 하고, 장식 무늬는 ‘정보가 없으니’ 비워야 한다. 어렵게 외울 규칙이 아니라, ‘듣는 사람 입장에서 한 번 생각하는’ 습관일 뿐이다.

한 가지 실용적인 팁을 더하자면, 대체텍스트를 쓸 때 ‘소리 내어 읽어보는’ 게 큰 도움이 된다. 내가 쓴 대체텍스트를 직접 입으로 읽어보면, ‘이미지’ 같은 군더더기나 어색한 부분이 단번에 느껴진다. 글로 볼 땐 그럴듯한데 소리 내어 읽으면 ‘아, 이건 무슨 말인지 모르겠네’ 싶은 게 드러난다. 대체텍스트는 결국 ‘소리로 전달되는 글’이니까, 소리로 검토하는 게 가장 정확하다. 거창한 도구 없이도, 입으로 한 번 읽어보는 것만으로 대체텍스트의 질이 확 올라간다.

 

■ 자동 점검의 힘 — 보이지 않는 걸 보이게

대체텍스트의 가장 큰 적이 ‘안 보임’이라면, 해법의 핵심은 ‘보이게 만드는 것’이다. 그게 바로 접근성 자동 검사의 역할이다. 자동 검사 도구는 사이트의 모든 이미지를 훑어서, ‘대체텍스트가 없는 이미지’, ‘대체텍스트가 의심스러운 이미지(이미지·사진·파일명 패턴)’를 한눈에 보이게 짚어준다. 사람 눈으로는 수백 장을 일일이 못 보지만, 기계는 순식간에 전부 훑는다. 

물론 앞서 말했듯 자동 검사가 ‘의미의 충실함’까지 완벽히 판단하진 못한다. “행사 포스터” 같은 부실 설명은 형식상 통과해버릴 수 있다. 하지만 그렇다고 자동 검사가 무용한 건 절대 아니다. 자동 검사는 ‘명백한 오류’를 순식간에 걷어내서, 사람이 ‘판단이 필요한 미묘한 부분’에 집중할 수 있게 해준다. 빈칸·파일명·‘이미지’ 같은 명백한 문제를 자동으로 다 잡아내고 나면, 사람이 봐야 할 건 ‘설명은 있는데 충분한가’ 정도로 확 줄어든다. 양을 기계가 감당해주니 사람은 질에 집중하는 거다.

 

■ 점검 결과를 ‘숫자’로 보면 관리가 시작된다 

여기서 한 가지 중요한 이야기. 접근성을 ‘잘 챙기자’는 다짐만으로는 좀처럼 개선되지 않는다. 막연한 다짐은 막연한 결과를 낳는다. 개선이 일어나려면 ‘지금 우리 사이트의 대체텍스트 상태가 몇 점인가’를 숫자로 볼 수 있어야 한다. 측정되지 않는 건 관리되지 않는다는 말이 있다. 접근성도 똑같다. 

이미지가 100장인데 그중 60장이 적절한 대체텍스트를 갖췄고 40장이 부실하다면, ‘대체텍스트 충족률 60%’라는 숫자가 나온다. 이 숫자가 보이는 순간 비로소 ‘아, 우리가 절반 좀 넘는 수준이구나, 이걸 80%로 올리자’ 같은 목표가 생긴다. 그리고 한 달 뒤 다시 측정해서 그 숫자가 올랐는지 내렸는지를 보면, 개선이 실제로 되고 있는지를 확인할 수 있다. 숫자는 ‘막연함’을 ‘관리 가능함’으로 바꾼다.

그리고 숫자에는 또 하나의 힘이 있다. ‘설득’이다. 접근성을 개선하려면 대개 윗선의 결정과 예산이 필요한데, ‘우리 사이트 접근성이 좀 부족한 것 같습니다’라는 막연한 보고로는 결재가 나지 않는다. 반면 ‘우리 사이트 이미지 100장 중 40장에 대체텍스트가 부실하고, 그중 12장은 핵심 정보가 담긴 인포그래픽이라 시각장애인이 그 정보를 전혀 얻을 수 없습니다’라고 숫자와 함께 보고하면, 문제가 손에 잡힌다. 숫자는 ‘이게 진짜 문제다’를 증명하는 가장 강력한 언어다. 그래서 개선의 출발점은 늘 측정이다. 측정해서 숫자로 만들고, 그 숫자로 문제를 드러내고, 그 드러난 문제로 사람을 설득하고, 설득된 힘으로 고친다. 이 사이클이 돌기 시작하면 접근성은 ‘하면 좋은 것’에서 ‘해야 하는 것’으로 격상된다.

 

■ 자동 점검이 짚어주는 ‘위치’의 가치

자동 점검의 또 다른 미덕은 ‘어디가 문제인지 위치를 콕 집어준다’는 거다. ‘대체텍스트 충족률 60%’라는 숫자만으로는 ‘그래서 어느 이미지를 고치라는 거야?’라는 막막함이 남는다. 그런데 좋은 점검 도구는 ‘몇 번째 페이지의, 어느 위치에 있는, 이 이미지의 대체텍스트가 이래서 문제다’까지 짚어준다. 그러면 담당자는 그 위치로 바로 가서 고치면 된다. 막막한 전수조사가 아니라, ‘지목된 곳만 손보는’ 정확한 작업이 되는 거다.

이게 왜 중요하냐면, 대체텍스트 문제의 가장 큰 진입 장벽이 ‘어디서부터 손대야 할지 모르겠다’는 막막함이기 때문이다. 이미지가 수백 장인 사이트에서 ‘다 뒤져서 고쳐라’는 건 사실상 ‘고치지 말라’는 말과 같다. 시작할 엄두가 안 나니까. 그런데 ‘이 12곳이 문제니 여기부터 고치세요’라고 명확히 지목해주면, 막막함이 ‘할 수 있겠다’로 바뀐다. 자동 점검의 진짜 가치는 ‘문제를 찾아주는 것’을 넘어 ‘시작할 수 있게 해주는 것’에 있다.

 

【본론 5 — 대체텍스트는 ‘배려’가 아니라 ‘기본기’다】

■ 모두를 위한 설계라는 관점

대체텍스트 이야기를 하다 보면 ‘장애인을 위한 거’라는 틀에 갇히기 쉬운데, 사실 대체텍스트의 혜택은 훨씬 넓다. 

데이터가 약한 환경을 생각해보자. 산간 지역이거나, 데이터를 다 써서 속도 제한이 걸렸거나, 통신이 불안정한 상황에서는 이미지가 안 뜨는 경우가 많다. 이때 대체텍스트가 잘 들어가 있으면, 이미지 대신 그 설명 글이 표시돼서 무슨 내용인지 알 수 있다. 대체텍스트가 ‘이미지’라고 적혀 있으면? 안 뜬 이미지 자리에 ‘이미지’라는 글자만 덩그러니 남는다. 멀쩡히 눈이 보이는 사용자도 정보를 놓치는 거다.

 검색도 마찬가지다. 검색 엔진은 이미지 안의 그림 자체는 못 읽지만 대체텍스트는 읽는다. 그래서 대체텍스트가 충실하면 그 이미지가 담은 정보까지 검색에 잡힌다. 공공 정보가 검색에 더 잘 노출된다는 건, 그 정보가 필요한 시민에게 더 잘 가닿는다는 뜻이다. 즉 대체텍스트는 접근성 항목인 동시에, 정보 전달력 자체를 높이는 장치다. 

나이 든 사용자도 빼놓을 수 없다. 시력이 예전 같지 않은 어르신 중에는 화면을 크게 키워 쓰거나, 화면 읽기 기능을 부분적으로 켜서 쓰는 분들이 적지 않다. 이런 분들에게 대체텍스트는 ‘작은 글씨를 대신 읽어주는 목소리’가 된다. 공공 서비스는 특히 고령 사용자 비중이 높다. 복지, 건강, 연금, 민원 — 어르신이 자주 찾는 정보일수록 그게 이미지 속에 갇혀 있으면 안 된다. 대체텍스트는 ‘특별한 누군가’가 아니라 ‘우리 모두가 언젠가 될 사용자’를 위한 장치이기도 하다. 누구나 나이가 들고, 누구나 언젠가는 작은 글씨가 흐릿해진다. 

상황적 제약도 생각해볼 만하다. 한 손에 짐을 들고 다른 손으로 휴대폰을 보는 사람, 시끄러운 곳이라 소리를 못 켜는 사람, 반대로 운전 중이라 화면을 못 보고 음성으로만 듣는 사람 — 일상엔 ‘일시적으로 한쪽 감각을 못 쓰는’ 순간이 끝없이 많다. 접근성을 ‘영구적 장애가 있는 소수’만의 문제로 좁혀 생각하면 그 가치를 절반밖에 못 본다. 잘 만든 대체텍스트는 ‘지금 이 순간 화면을 제대로 볼 수 없는 모든 사람’에게 정보를 전한다. 그게 바로 ‘모두를 위한 설계(유니버설 디자인)’의 정신이고, 공공 서비스가 지향해야 할 방향이다.

 

■ 작은 항목 같지만, 가장 상징적인 항목 

대체텍스트는 코드로 보면 정말 작다. 이미지 태그 안에 글 몇 자 넣는 게 전부다. 그런데 이 작은 항목이 상징하는 바는 크다. ‘우리 사이트가 눈으로 보지 못하는 사용자를 염두에 두고 만들어졌는가’를 가장 정직하게 보여주는 지표이기 때문이다.

화려한 디자인, 빠른 속도, 멋진 애니메이션 — 다 좋다. 하지만 그 모든 게 ‘눈으로 보는 사람’만을 위한 거라면, 그건 절반의 완성이다. 진짜 잘 만든 공공 사이트는, 눈을 감고 들어도 같은 정보를 얻을 수 있는 사이트다. 대체텍스트 한 줄 한 줄이 그 ‘들어도 알 수 있음’을 만든다. 작아 보이지만, 결코 작지 않은 일이다.

 

■ ‘완벽’보다 ‘시작’ 

마지막으로 솔직한 이야기 하나. 대체텍스트를 처음부터 완벽하게 다 채우려고 하면 시작도 못 한다. 이미지가 수백 장인 사이트에서 ‘모든 대체텍스트를 한 번에 완벽하게’는 비현실적이다. 그러니 ‘완벽’ 대신 ‘시작’을 목표로 삼자. 

먼저 ‘명백히 잘못된 것’부터 고친다. ‘이미지’, 파일명, 빈칸 — 이 세 가지만 걷어내도 사이트가 크게 좋아진다. 그 다음에 ‘의미는 있는데 부실한’ 것들을 차차 손본다. 그리고 새로 올라오는 콘텐츠는 처음부터 제대로 쓰는 습관과 점검 장치를 둔다. 이렇게 ‘쌓인 빚을 갚으면서, 새 빚은 안 지는’ 방식으로 가면, 어느새 사이트의 대체텍스트가 정돈된다. 중요한 건 시작이고, 시작의 첫걸음은 ‘지금 우리 사이트가 어떤 상태인지 아는 것’이다.

여기서 ‘우선순위’ 이야기를 잠깐 하자. 빚을 갚을 때도 ‘이자가 비싼 빚’부터 갚는 게 정석이듯, 대체텍스트도 ‘중요한 이미지’부터 고치는 게 효율적이다. 모든 이미지가 똑같이 중요한 건 아니다. 메인 페이지의 핵심 배너, 자주 찾는 민원·신청 안내, 중요한 통계 발표 — 이런 ‘많은 사람이 보고, 중요한 정보를 담은’ 이미지가 부실하면 피해가 크다. 반대로 깊숙한 페이지의 사소한 장식 이미지는 우선순위가 낮다. 그래서 ‘방문이 많은 페이지 × 정보가 중요한 이미지’를 먼저 손보면, 같은 노력으로 가장 큰 개선 효과를 얻는다. 한정된 시간과 인력으로 일하는 공공 현장에서는, 이 ‘우선순위 감각’이 특히 중요하다. 다 못 고치더라도, 중요한 것부터 고치면 체감되는 개선은 빠르게 온다.

그리고 이 모든 과정에서 ‘혼자 완벽하게 하려는 부담’을 내려놓는 게 중요하다. 접근성은 한 사람의 영웅적인 노력으로 완성되는 게 아니라, 여러 사람이 ‘각자 자기 자리에서 조금씩’ 챙겨야 유지된다. 콘텐츠 담당자는 올릴 때 한 줄 적고, 개발자는 시스템이 빈칸을 경고하게 만들고, 관리자는 정기 점검 결과를 챙기고 — 이렇게 역할이 나뉘어 돌아갈 때 비로소 지속된다. ‘완벽한 한 명’보다 ‘꾸준한 여럿’이 접근성을 지킨다. 그러니 ‘내가 다 못 해서 미안하다’가 아니라 ‘다 같이 조금씩 하자’로 마음을 바꾸는 게, 어쩌면 가장 중요한 출발점일지 모른다.

 

【 마무리 】

오늘 이야기를 한 문장으로 줄이면 이렇다. ‘대체텍스트는 그림을 못 보는 상황에서 그림을 대신하는 글이고, alt=이미지 같은 빈말은 그 글의 자리를 차지한 채 아무것도 전하지 않는다.’ 

다시 정리해보자. 좋은 대체텍스트의 기준은 ‘이 글만 들어도 같은 정보를 얻는가’ 하나다. 의미 있는 이미지는 그 정보를 충실히 옮기고, 장식 이미지는 비워서 건너뛰게 한다. ‘이미지’, ‘사진’, 파일명, 무의미한 빈칸은 전부 잘못이다. 그리고 이 모든 게 잘 지켜지려면, ‘보이지 않는 대체텍스트를 보이게 만드는’ 점검이 반드시 필요하다. 

그런데 솔직히, 이걸 사람이 일일이 들여다보는 건 한계가 있다. 이미지 수백 장의 대체텍스트를 하나하나 확인하고, 빠진 곳을 찾고, 새로 올라온 것까지 챙기는 일은 — 의지만으로는 지속되기 어렵다. 그래서 ‘자동으로 한 번에 훑어주는 도구’가 있으면 출발이 훨씬 쉬워진다.

ViewCheck는 바로 그 ‘보이지 않는 걸 보이게 만드는’ 일을 한다. 사이트 URL만 넣으면, 모든 페이지의 이미지를 훑어서 대체텍스트가 없거나 부실한 곳을 자동으로 짚어준다. 웹 접근성(KWCAG 33항목) 분석 결과가 점수로 나오고, 어느 이미지가 왜 문제인지를 위치까지 콕 집어 보여준다. 대체텍스트뿐 아니라 행정안전부 「전자정부 웹사이트 품질관리 지침」 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)과 KRDS 846규칙(DS 120 + CP 446 + BP 108 + SP 172)까지 한 번에 진단해준다. ‘우리 사이트 접근성이 지금 몇 점이지?’ 하는 막연한 궁금증을, 구체적인 숫자와 ‘여기를 이렇게 고치세요’라는 안내로 바꿔주는 거다.

 부담 가질 것 없다. krds.viewcheck.co.kr 에서 사용해 볼 수 있다. 우리 사이트의 대체텍스트가 ‘이미지 이미지 이미지’로 들리고 있지는 않은지, 한 번 가볍게 들여다보는 것부터 시작하면 된다. 측정해야 관리가 시작되고, 관리가 시작돼야 ‘눈을 감고 들어도 알 수 있는 사이트’에 가까워진다. 그 첫걸음을, 오늘 한번 떼어보시길 권한다.

다음 글에서는 같은 접근성 큰 주제 안에서, 키보드만으로 사이트를 쓰는 사용자 이야기를 다뤄보려 한다. 마우스 없이, 오직 키보드만으로 우리 사이트를 끝까지 쓸 수 있는지 — 이것도 대체텍스트만큼이나 자주 무너지는 ‘보이지 않는 기본기’다. 그럼 그때 또 현장 이야기로 찾아오겠다.

키워드/태그: #KRDS #공공웹 #웹접근성 #KWCAG #대체텍스트 #alt텍스트 #스크린리더 #전자정부 #행정안전부 #디지털접근성 #공공사이트품질 #ViewCheck