이미지 접근성 잘 쓰는 법 + 점검

공감·문제제기

이번 주는 ‘이미지’ 이야기로 채웠다. 월요일엔 이미지가 왜 접근성의 단골 사고 지점인지, 수요일엔 대체텍스트가 빠졌을 때 화면이 어떻게 무너지는지를 풀었다. 오늘 금요일은 가장 손에 잡히는 이야기다. ‘우리 사이트의 이미지가 접근성 기준을 지키고 있는지’를 담당자가 직접, 그것도 오늘 당장 점검할 수 있는 방법을 정리했다. 거창한 도구 없이, 마우스와 키보드와 약간의 인내심만 있으면 된다.

먼저 솔직하게 털어놓자. 나도 한참 동안 대체텍스트(alt)를 우습게 봤다. 이미지 올릴 때 alt 칸이 비어 있으면 그냥 ‘이미지’라고 적거나, 귀찮으면 빈칸으로 두고 넘어갔다. 그래도 화면에는 멀쩡하게 사진이 보였으니까. 눈으로 보이는데 뭐가 문제냐고 생각했다. 그런데 어느 날 화면을 못 보는 사용자가 우리 사이트를 ‘귀로 듣는’ 장면을 옆에서 지켜보고 나서 생각이 완전히 바뀌었다. 그 사용자에게 우리 사이트의 절반은 ‘이미지’라는 단어 하나, 혹은 아무 소리도 나지 않는 침묵이었다. 공들여 만든 안내 배너도, 신청 절차를 그림으로 풀어둔 인포그래픽도, 그 사람에게는 존재하지 않는 거나 마찬가지였다.

이게 오늘 글의 출발점이다. 대체텍스트는 ‘있으면 좋은 것’이 아니라 ‘없으면 그 콘텐츠가 누군가에게는 통째로 사라지는 것’이다. 그리고 이건 일부 소수만의 문제가 아니다. 눈이 침침한 어르신, 화면을 끄고 음성으로 듣는 출퇴근길 사용자, 이미지가 안 뜨는 느린 통신 환경의 사용자, 검색엔진까지 — alt 텍스트는 생각보다 훨씬 많은 사람과 상황을 위해 일한다. 시각장애인을 위한 배려로만 좁게 보면, 이 작업이 왜 이렇게 광범위하게 효과를 내는지 이해하지 못한다.

공공 사이트라면 이건 ‘배려’를 넘어 ‘의무’에 가깝다. 행정안전부의 「전자정부 웹사이트 품질관리 지침」은 7대 영역(호환성·접근성·개방성·접속성·편의성·효율성·신뢰성)을 두는데, 그중 접근성은 가장 자주 지적받는 영역이다. 그리고 그 접근성 점검의 가장 첫 줄, 가장 기본 항목이 바로 ‘이미지에 대체텍스트가 있는가’다. 한국형 웹 접근성 지침인 KWCAG의 33개 항목 중에서도 ‘대체텍스트 제공’은 맨 앞에 놓인다. 가장 기본이라는 건 ‘가장 쉽다’는 뜻이 아니라 ‘가장 먼저 보고, 못 지키면 가장 먼저 걸린다’는 뜻이다.

공공 사이트의 무게는 민간 사이트와 또 다르다. 민간 쇼핑몰이 불편하면 사용자는 다른 곳으로 가면 그만이다. 하지만 공공 사이트는 ‘대체재가 없다’. 어떤 지원금을 신청하려면 그 기관의 사이트밖에 길이 없고, 어떤 증명서를 떼려면 그 사이트를 거쳐야만 한다. 그 유일한 통로가 누군가에게 막혀 있다면, 그 사람은 ‘서비스를 못 받는’ 것이 된다. 더구나 그 ‘누군가’가 디지털 환경에서 더 어려움을 겪는 사람일수록, 그 벽은 더 높고 더 가혹하다. 공공 사이트의 접근성이 단순한 권고가 아니라 의무로 다뤄지는 건, 바로 이 ‘대체할 수 없음’ 때문이다. 우리가 무심코 비워둔 alt 한 칸이, 누군가에겐 ‘유일한 길이 막힌 것’일 수 있다는 무게를 안고 오늘 점검을 시작하자.

그런데 여기서 함정이 하나 있다. 많은 담당자가 ‘alt만 채우면 끝’이라고 생각한다는 점이다. 실제로는 그렇지 않다. 빈 alt도 문제지만, ‘잘못 채운 alt’는 어떤 면에선 더 고약하다. 의미 없는 이미지에 굳이 설명을 붙여 음성을 어지럽히는 경우, 파일 이름이 그대로 alt로 들어가 ‘img_20260817_final2_수정본’이 읽히는 경우, 핵심 정보가 이미지 안에만 박혀 있어 alt 한 줄로는 도저히 담을 수 없는 경우 — 이런 ‘있긴 한데 잘못된’ 상태가 현장에는 정말 많다. 그래서 오늘 점검은 ‘있다/없다’만 보는 게 아니라 ‘제대로 있는가’까지 본다.

오늘 글의 목표는 분명하다. 디자인이나 개발을 전혀 모르는 담당자라도, 이 글을 따라 한 바퀴 돌고 나면 ‘우리 사이트의 이미지 접근성이 대충 어느 수준인지’ 스스로 가늠하고, ‘무엇부터 고쳐야 하는지’ 메모를 손에 쥘 수 있게 만드는 것. 그래서 이론은 최소한으로 줄이고, 실제로 손을 움직여 확인하는 방법과 자가 점검 항목 위주로 채웠다. 준비물은 우리 기관 사이트, 마우스, 키보드, 그리고 종이나 메모 앱 하나면 충분하다. 시간은 처음엔 30분쯤 잡되, 익숙해지면 핵심 페이지 기준 10분 안에도 돈다.

조금 더 솔직하게 덧붙이면, 이 일이 ‘귀찮은 추가 업무’처럼 느껴지는 게 당연하다. 가뜩이나 할 일이 많은데 이미지마다 설명까지 달라니, 처음엔 부담스럽다. 나도 그랬다. 그런데 막상 해보면 두 가지를 알게 된다. 하나는, 생각보다 손이 많이 안 간다는 것이다. 이미지 하나에 alt 한 줄이고, 익숙해지면 사진을 보는 순간 ‘아 이건 이렇게 적으면 되겠다’가 바로 떠오른다. 둘은, 이게 ‘남을 위한 일’인 줄 알았는데 결국 ‘우리를 위한 일’이기도 하다는 것이다. alt를 잘 챙긴 사이트는 검색 결과에 더 잘 노출되고, 행정안전부·NIA의 품질 평가에서 점수를 잃지 않으며, 무엇보다 ‘민원 전화가 줄어든다’. 사용자가 사이트에서 스스로 일을 끝낼 수 있으면, 그만큼 창구로 오는 문의가 줄기 때문이다. 접근성은 비용이 아니라 투자에 가깝다.

또 하나 미리 말해둘 게 있다. 오늘 글은 ‘완벽’을 목표로 하지 않는다. 처음부터 모든 이미지를 흠 없이 만들려고 하면 시작조차 못 한다. 그보다는 ‘오늘보다 내일 한 장 더 나아지게’가 현실적인 목표다. 대표 페이지의 가장 중요한 이미지 몇 개만 제대로 챙겨도, 그 사이트는 어제보다 분명히 더 많은 사람에게 열린다. 완벽주의는 접근성의 적이다. 작게 시작해, 꾸준히 늘려가는 것 — 그게 오래가는 비결이다.

한 가지 마음가짐만 미리 챙기자. 이 점검은 ‘우리 사이트를 흠잡는 일’이 아니라 ‘우리 사이트가 닿지 못하던 사람에게 닿게 하는 일’이다. ‘아니오’가 많이 나와도 자책하지 말자. 못 찾는 것보다 찾는 게 백배 낫다. 찾은 만큼 고칠 수 있고, 고친 만큼 더 많은 사람이 우리 사이트를 ‘쓸 수 있게’ 된다. 자, 이미지 접근성의 세계로 한 걸음 들어가 보자.

본론 1 — 개념: 대체텍스트가 정확히 무슨 일을 하나

■ 대체텍스트는 ‘이미지의 자막’이다

대체텍스트가 뭔지 한 문장으로 말하면 ‘이미지를 볼 수 없는 사람·상황을 위해, 그 이미지가 전하는 내용을 글로 옮겨둔 것’이다. 영화에 자막이 있듯, 이미지에는 alt가 있다. 자막이 없으면 소리를 못 듣는 사람이 영화를 따라갈 수 없듯, alt가 없으면 화면을 못 보는 사람이 이미지를 따라갈 수 없다.

여기서 ‘이미지를 볼 수 없는 사람·상황’의 범위가 핵심이다. 우리는 보통 시각장애인만 떠올리지만, 실제로는 훨씬 넓다. 화면 낭독 프로그램(스크린리더)으로 사이트를 ‘듣는’ 사용자, 시력이 약해 화면을 크게 확대해 쓰는 사용자, 이미지가 깨지거나 안 뜨는 환경의 사용자, 데이터를 아끼려고 이미지 로딩을 꺼둔 사용자, 그리고 사람이 아닌 검색엔진까지. 이 모두가 ‘이미지 자체’ 대신 ‘이미지를 설명하는 글’에 의존한다. alt 한 줄이 이 모든 통로를 동시에 연다.

스크린리더가 어떻게 동작하는지 한 번 그려보면 alt의 무게가 실감 난다. 화면을 못 보는 사용자는 화면을 위에서 아래로 ‘읽어 내려가는’ 음성에 의지해 사이트를 파악한다. 제목을 읽고, 본문을 읽고, 링크를 읽고, 그러다 이미지를 만난다. 이때 alt가 있으면 “(이미지) ○○ 신청 절차 안내도, 1단계 자격 확인 2단계 서류 제출 3단계 결과 확인”처럼 그 이미지의 내용을 음성으로 들려준다. alt가 비어 있으면? 아무 말 없이 다음으로 넘어가거나, 최악의 경우 파일 이름을 그대로 읽는다. 사용자는 ‘방금 거기 뭔가 있었는데 뭐였지’ 하고 멈칫하거나, 그런 게 있었는지도 모른 채 지나친다.

실제 현장에서 본 한 장면을 익명으로 옮겨본다. A광역지자체의 한 안내 페이지는 ‘이런 분이 신청할 수 있어요’라는 자격 안내를 통째로 이미지 한 장에 담아두었다. 화면으로 보면 깔끔하고 보기 좋았다. 그런데 그 이미지의 alt는 비어 있었다. 화면을 못 보는 사용자가 그 페이지를 들으면, 정작 ‘누가 신청할 수 있는지’라는 가장 중요한 정보 앞에서 음성이 아무 말 없이 다음으로 넘어가버린다. 보는 사람에겐 친절한 페이지가, 듣는 사람에겐 ‘핵심이 통째로 빠진 페이지’였던 셈이다. 더 안타까운 건, 그 자격 정보를 본문에 글로 한 줄만 더 적어두었어도 문제가 깔끔히 해결됐을 거라는 점이다. 작은 누락 하나가 누군가에겐 ‘이 서비스를 받을 수 있는지조차 알 수 없는’ 큰 벽이 된다.

또 다른 장면. B공공기관의 게시판에는 공지가 전부 이미지로 올라와 있었다. 담당자가 워드로 공지를 예쁘게 꾸민 뒤 통째로 캡처해 올린 것이다. 보기엔 정갈했지만, 그 안의 모든 글자가 ‘그림’이라 검색도 안 되고, 듣는 사람에게도 들리지 않았다. 사용자가 ‘지원금’으로 검색해도 그 공지는 결과에 뜨지 않았다. 분명 사이트엔 있는데, 찾을 수가 없는 정보였던 것이다. 이런 경우는 특정 기관의 잘못이라기보다, ‘이미지로 올리는 게 편하니까’ 어디서나 반복되는 전형이다. 우리 사이트의 게시판도 한번 열어, 공지가 진짜 글자인지 그림인지 확인해보길 권한다.

■ ‘의미 있는 이미지’와 ‘장식 이미지’를 가르는 게 출발점

대체텍스트에서 가장 먼저 익혀야 할 개념은 ‘모든 이미지에 설명을 다는 게 정답이 아니다’라는 것이다. 이미지는 크게 두 부류로 나뉜다. 하나는 ‘의미 있는 이미지’, 다른 하나는 ‘장식 이미지’다. 이 둘을 가르는 기준이 alt 작업의 절반이라 해도 과장이 아니다.

의미 있는 이미지는 ‘그 이미지가 사라지면 사용자가 정보를 잃는’ 이미지다. 신청 절차를 그린 안내도, 통계 수치를 담은 그래프, 버튼 역할을 하는 아이콘, 본문 내용을 보충하는 사진, 글자가 박힌 배너 — 이런 건 반드시 alt로 그 내용을 옮겨야 한다. 사라지면 사용자가 ‘무엇을 신청하는지’ ‘수치가 얼마인지’ ‘이걸 누르면 어디로 가는지’를 알 수 없게 되기 때문이다.

장식 이미지는 반대다. ‘있으면 보기 좋지만 없어도 정보 손실이 없는’ 이미지다. 페이지 위아래를 꾸미는 배경 무늬, 단락 사이의 구분선 역할 그림, 분위기용 추상 일러스트 — 이런 건 굳이 음성으로 읽어주면 오히려 방해가 된다. “(이미지) 파란색 장식 곡선” 같은 소리가 페이지마다 끼어들면, 듣는 사람은 정신만 사납다. 그래서 장식 이미지는 alt를 ‘빈 값’으로 두어, 스크린리더가 ‘건너뛰도록’ 알려주는 게 맞다. 여기서 핵심은 ‘alt 속성을 아예 안 쓰는 것’과 ‘alt를 빈 값으로 명시하는 것’이 다르다는 점이다. 빈 값으로 명시하면 스크린리더가 ‘이건 장식이니 건너뛰어라’로 받아들이지만, 속성 자체가 없으면 도구에 따라 파일 이름을 읽어버리기도 한다.

그러니 점검의 첫 단계는 늘 똑같다. 이미지 하나를 보며 스스로 묻는 것이다. “이게 사라지면 사용자가 뭔가를 잃는가?” 잃는다면 의미 있는 이미지이니 내용을 옮긴 alt를 달고, 잃지 않는다면 장식 이미지이니 빈 alt로 건너뛰게 한다. 이 한 질문이 alt 작업 전체의 나침반이다.

■ ‘좋은 alt’의 세 가지 조건

의미 있는 이미지라고 판단했다면, 이제 ‘어떻게 잘 쓰느냐’가 남는다. 좋은 alt에는 세 가지 조건이 있다. 첫째, 정확해야 한다. 이미지가 실제로 담은 내용과 어긋나면 안 된다. ‘신청 절차 안내도’인데 alt에 ‘기관 로고’라고 적혀 있으면, 듣는 사람은 엉뚱한 안내를 받는다. 둘째, 간결해야 한다. alt는 보통 한두 문장이면 충분하다. 너무 길면 듣는 사람이 지친다. 이미지가 워낙 복잡해 한두 문장으로 안 되면, alt에는 요약만 담고 ‘자세한 내용은 본문 아래 표 참고’처럼 본문으로 안내하는 게 낫다. 셋째, 맥락에 맞아야 한다. 같은 사진이라도 어디에 쓰였느냐에 따라 alt가 달라진다. 인물 사진이 ‘기관장 인사말’ 옆에 있으면 ‘○○ 기관장’이지만, ‘민원 응대 안내’ 옆에 있으면 ‘상담원이 민원인을 응대하는 모습’이 더 맞다. alt는 ‘이미지가 무엇인가’보다 ‘이 자리에서 무엇을 전하려 하는가’를 적는 것이다.

여기에 흔한 실수 몇 가지를 미리 짚어두자. ‘이미지’ ‘사진’ ‘그림’처럼 종류만 적은 alt는 아무 정보가 없다. 스크린리더는 이미 ‘이미지’라고 알려주므로, alt에 또 ‘이미지’라고 적으면 “이미지 이미지”가 된다. 파일 이름을 그대로 둔 alt(‘banner_final_v3’)도 소음일 뿐이다. ‘~의 이미지’ ‘~사진입니다’ 같은 군더더기도 뺀다. 그냥 내용을 적으면 된다. ‘클릭하세요’ 같은 행동 지시를 alt에 넣는 것도 피한다. 그건 alt가 아니라 버튼·링크가 할 일이다.

■ 글자가 박힌 이미지가 가장 위험하다

이미지 접근성에서 가장 자주, 가장 크게 사고가 나는 지점이 따로 있다. 바로 ‘글자가 이미지 안에 박힌’ 경우다. 공지 배너, 행사 안내 포스터, 카드뉴스, 인포그래픽 — 이런 건 보기엔 예쁘지만, 그 안의 글자는 ‘그림’이라 컴퓨터가 글자로 인식하지 못한다. 화면을 못 보는 사용자에게는 그 안의 모든 정보가 통째로 사라진다. 신청 마감일, 행사 장소, 문의 전화번호가 전부 이미지 안에만 있다면, 그건 일부 사용자에게는 ‘존재하지 않는 정보’다.

이런 이미지는 alt 한 줄로 다 담기도 어렵다. 카드뉴스 다섯 장에 깨알같이 적힌 내용을 alt 하나에 욱여넣을 수는 없다. 그래서 원칙은 ‘되도록 글자를 이미지 밖으로 빼라’다. 핵심 정보(날짜·장소·연락처·신청 링크)는 이미지 옆이나 아래에 ‘진짜 글자’로 다시 적어두는 것이다. 이렇게 하면 화면을 보는 사람은 예쁜 이미지를, 못 보는 사람은 글자 정보를 각각 온전히 받는다. 이건 단순히 장애인을 위한 게 아니다. 글자가 진짜 텍스트로 있으면 검색도 되고, 복사도 되고, 번역도 되고, 화면 확대 시에도 깨지지 않는다. ‘이미지 속 글자를 밖으로 빼라’ 이 한 가지 습관만 들여도 이미지 접근성의 절반은 해결된다.

이 대목에서 한 가지 더 짚고 싶은 게 있다. 글자 박힌 이미지가 위험한 이유는 ‘안 보이는 사람’ 때문만이 아니라는 점이다. 잘 보이는 사람에게도 이건 불편을 준다. 예를 들어 어떤 사용자가 행사 포스터에 적힌 전화번호로 전화를 걸고 싶다고 하자. 진짜 글자라면 길게 눌러 복사하거나, 스마트폰에선 번호를 인식해 바로 전화 버튼이 뜬다. 그런데 그게 ‘그림 속 숫자’면 일일이 눈으로 보고 손으로 옮겨 적어야 한다. 외국인 방문자가 번역 기능을 켜도 이미지 속 글자는 번역되지 않는다. 글자가 작아 화면을 확대하면, 진짜 글자는 또렷하게 커지지만 이미지 속 글자는 흐릿하게 깨진다. 그러니까 ‘이미지 속 글자를 밖으로 빼는 일’은 장애인 한 명을 위한 양보가 아니라, 거의 모든 사용자의 편의를 동시에 끌어올리는 작업이다. 접근성을 챙기면 결국 모두가 편해진다는 말이 가장 잘 들어맞는 사례가 바로 이것이다.

■ 링크와 버튼 역할을 하는 이미지는 ‘목적지’를 적는다

이미지 중에는 단순히 ‘보여주는’ 게 아니라 ‘누르면 어딘가로 가는’ 것이 있다. 메뉴 아이콘, 배너 광고, 바로가기 버튼, 로고(누르면 메인으로 이동) 같은 것들이다. 이런 ‘기능을 가진 이미지’의 alt는 일반 이미지와 규칙이 조금 다르다. 여기서는 ‘이미지가 어떻게 생겼는가’가 아니라 ‘누르면 무엇이 되는가’를 적어야 한다. 예를 들어 집 모양 아이콘이 메인으로 가는 버튼이라면 alt는 ‘집 모양 아이콘’이 아니라 ‘처음으로’ 혹은 ‘메인 화면’이어야 한다. 돋보기 아이콘이 검색 버튼이라면 ‘검색’이라고 적는다. 듣는 사람에게 필요한 정보는 ‘이게 무슨 그림인지’가 아니라 ‘이걸 누르면 어디로 가는지’이기 때문이다.

이 차이를 놓치면 듣는 사용자는 길을 잃는다. 모양만 적힌 alt를 들으면 ‘아이콘이 하나 있구나’까지만 알고, 그게 누를 수 있는 버튼인지, 누르면 어디로 가는지는 모른다. 결국 그 기능은 듣는 사람에게 ‘없는 거나 마찬가지’가 된다. 그래서 점검할 때 ‘이 이미지가 클릭 가능한가’를 먼저 확인하고, 클릭 가능하다면 그 alt에 ‘목적지나 동작’이 적혀 있는지를 본다. 기능 이미지의 alt는 ‘설명’이 아니라 ‘이정표’여야 한다.

■ 같은 이미지라도 ‘자리’가 바뀌면 alt도 바뀐다

대체텍스트가 어려운 또 하나의 이유는 ‘정답이 하나로 고정돼 있지 않다’는 점이다. 똑같은 사진 한 장이라도, 그게 어느 페이지 어느 위치에 놓이느냐에 따라 적어야 할 alt가 달라진다. 앞서 잠깐 말한 인물 사진 예가 대표적이다. 같은 인물 사진이 ‘인사말’ 옆에 있으면 그 사람이 누구인지가 중요하니 직책과 이름 성격을 담고, ‘민원 안내’ 옆에 있으면 그 장면이 무엇을 보여주는지(상담 모습)가 중요하다. 풍경 사진도 마찬가지다. ‘우리 지역 소개’ 페이지에 있으면 어디의 어떤 풍경인지가 정보가 되지만, 단순히 페이지 분위기를 살리려 깐 배경이라면 장식으로 봐 빈 alt가 맞다.

그래서 alt를 쓸 때 늘 스스로에게 던질 질문은 ‘이 자리에서 이 이미지는 무슨 역할을 하는가’이다. 이미지 파일 자체에 매달리지 말고, 그 이미지가 놓인 ‘문맥’을 읽어야 한다. 이건 사람만 할 수 있는 판단이다. 도구는 ‘alt가 비었다/찼다’는 사실은 잘 잡아내지만, ‘이 자리에서 이 내용이 맞느냐’는 결국 그 페이지의 의도를 아는 담당자가 정해야 한다. 그래서 alt 작업은 ‘기계적 채우기’가 아니라 ‘맥락 읽기’에 가깝다.

본론 2 — 자가 점검 체크리스트: 손으로 직접 확인하기

이제 본격적인 점검이다. 아래 체크리스트는 ‘예/아니오’로 답하게 만들었다. 우리 사이트의 대표 페이지 몇 개(메인, 자주 쓰는 안내 페이지, 신청 페이지, 공지·게시판 한 곳)를 열어놓고, 항목마다 답을 적어가며 따라오면 된다. ‘아니오’ 옆에는 짧은 메모를 남기자. 그 메모가 나중에 ‘무엇을 고쳐야 하는지’ 알려주는 작업 지시서가 된다.

■ A. ‘있는가’ 점검 — 대체텍스트 존재 여부

A-1. 메인 페이지의 주요 이미지(배너·아이콘·로고)에 대체텍스트가 들어 있는가?

→ 자주 보이는 문제: 배너는 화려한데 alt가 통째로 비어 있어, 듣는 사람에겐 메인의 절반이 침묵이다.

A-2. 본문 안의 안내용 이미지(절차도·표·그래프)에 그 내용을 옮긴 alt가 있는가?

→ 자주 보이는 문제: 신청 절차가 그림으로만 설명되고 alt는 ‘절차’ 한 단어뿐이라, 정작 단계 내용을 알 수 없다.

A-3. 버튼·링크 역할을 하는 아이콘 이미지에 ‘무엇을 하는지’가 alt로 적혀 있는가?

→ 자주 보이는 문제: 돋보기 아이콘의 alt가 비어 있어, 듣는 사람은 그게 ‘검색’ 버튼인지 모른 채 지나친다.

이 ‘있는가’ 점검을 가장 빠르게 하는 방법을 하나 일러두겠다. 데스크탑 브라우저에서 페이지를 연 뒤, ‘이미지가 안 뜨게’ 만들어보는 것이다. 통신을 잠깐 끊거나, 브라우저 설정에서 이미지 표시를 꺼보면, 모든 이미지가 ‘깨진 네모’로 바뀌면서 그 자리에 alt 텍스트가 드러난다. 이때 네모마다 적절한 설명이 떠 있으면 alt가 잘 들어간 것이고, 텅 빈 네모나 ‘img_001’ 같은 파일 이름만 보이면 비어 있거나 잘못 들어간 것이다. 이 방법은 코드를 몰라도, 마우스 클릭 몇 번이면 사이트 전체의 alt 상태를 ‘눈으로’ 훑을 수 있어 특히 유용하다. 한 페이지를 이렇게 보면, 우리가 평소 ‘이미지’로만 보던 화면이 사실은 ‘설명의 빈칸 투성이’였다는 걸 단번에 깨닫게 된다.

조금 더 정확히 보려면 ‘마우스 오른쪽 버튼’도 동원해보자. 이미지 위에서 오른쪽 클릭을 해 ‘이미지 정보 보기’류의 메뉴를 띄우면, 그 이미지의 대체텍스트가 무엇으로 지정돼 있는지 확인할 수 있는 경우가 많다. 브라우저마다 메뉴 이름은 조금씩 다르지만, 핵심은 ‘이 이미지에 붙은 글자가 뭔지’ 직접 확인하는 것이다. 몇 개만 찍어 봐도 우리 사이트가 alt를 어떻게 다루고 있는지 감이 온다. 전부 비어 있다면 ‘alt를 아예 안 챙기는 사이트’이고, 파일 이름이 그대로라면 ‘업로드만 하고 손을 안 댄 사이트’이며, 내용이 또박또박 적혀 있다면 ‘누군가 신경 쓴 사이트’다.

■ B. ‘제대로인가’ 점검 — 대체텍스트 품질

존재만 한다고 끝이 아니다. ‘잘못 채운 alt’를 걸러내는 게 B 영역이다.

B-1. alt에 ‘이미지’ ‘사진’ ‘그림’ 같은 종류 표시나 파일 이름이 그대로 들어가 있지 않은가?

→ 자주 보이는 문제: alt가 ‘img_20260817’이라 “아이엠지 이공이육공팔일칠”이 그대로 음성으로 읽힌다.

B-2. 의미 있는 이미지의 alt가 ‘그 이미지가 전하는 핵심 내용’을 담고 있는가? (모양 묘사가 아니라)

→ 자주 보이는 문제: 그래프 alt가 ‘막대그래프’뿐이라, 정작 ‘무슨 수치가 얼마인지’는 알 수 없다.

B-3. alt가 지나치게 길어 한 문장을 한참 넘기지 않는가? (요약+본문 안내가 더 나은 경우)

→ 자주 보이는 문제: 복잡한 표를 통째로 alt에 욱여넣어, 듣는 사람이 끝없는 설명에 지친다.

B-4. 같은 이미지가 여러 곳에 쓰일 때, 그 자리의 맥락에 맞게 alt가 달려 있는가?

→ 자주 보이는 문제: 어디서나 똑같은 alt를 복사해 써, 맥락과 어긋나는 설명이 읽힌다.

B 영역을 점검하는 가장 좋은 방법은 ‘직접 들어보는 것’이다. 요즘은 데스크탑·스마트폰 모두에 화면 낭독 기능이 기본으로 들어 있다. 운영체제 설정에서 화면 낭독(스크린리더) 기능을 잠깐 켜고, 우리 페이지를 위에서 아래로 읽혀보라. 이미지 차례가 됐을 때 어떤 소리가 나는지 귀로 직접 확인하는 것이다. ‘○○ 신청 절차 안내도, 1단계 자격 확인…’처럼 또렷이 내용이 들리면 합격, ‘이미지’ ‘아이엠지 이공이육’ 같은 소리가 나거나 아무 말 없이 휙 넘어가면 손볼 곳이다. 처음엔 빠른 음성이 낯설겠지만, 딱 한 페이지만 끝까지 들어봐도 ‘아, 우리 사이트가 이렇게 들리는구나’ 하는 충격적인 깨달음을 얻는다. 화면으로만 보던 사이트를 ‘귀로 듣는’ 경험은, 어떤 점검 도구보다 강력한 동기 부여가 된다.

화면 낭독을 켜는 게 부담스럽다면, 차선책으로 ‘alt만 소리 내어 읽어보기’가 있다. 앞서 본 방법으로 각 이미지의 alt를 확인한 뒤, 그 글자를 입으로 직접 소리 내어 읽어보는 것이다. 이미지를 안 보고 그 소리만 들었을 때 ‘무슨 이미지인지, 무엇을 하라는 건지’ 이해가 되면 좋은 alt다. 반대로 소리만 들어선 도무지 감이 안 잡히면, 그 alt는 다시 써야 한다. 이 ‘눈 감고 듣기’ 테스트는 코드도, 도구도 필요 없이 alt의 품질을 가늠하는 가장 직관적인 방법이다.

B 영역을 볼 때 한 가지 더 챙기면 좋은 항목이 있다. 바로 ‘로고에 기관 이름이 들어 있는가’다. 기관 로고 이미지는 거의 모든 페이지 맨 위에 있는데, 의외로 alt가 비어 있거나 ‘로고’라고만 적힌 경우가 많다. 듣는 사용자에게 로고는 ‘여기가 어느 기관 사이트인가’를 알려주는 첫 신호인데, 그게 비어 있으면 ‘어딘지 모를 사이트’에 들어선 셈이 된다. 로고의 alt에는 기관 이름을 또박또박 적어야 한다. 그리고 로고가 ‘누르면 메인으로 가는 버튼’이라면, 그 동작도 자연스럽게 전해지도록 챙긴다. 사이트의 첫인사인 로고부터 제대로 챙기는 게, 듣는 사용자에 대한 기본 예의다.

품질 점검에서 마지막으로 권하는 건 ‘우리끼리 서로 채점해보기’다. 자기가 쓴 alt는 자기 눈엔 다 그럴듯해 보인다. 그래서 동료가 쓴 alt를 ‘눈 감고 듣기’로 검수해주고, 내 alt도 동료에게 맡겨보는 ‘교차 점검’이 효과적이다. ‘이 alt만 들으면 무슨 이미지인지 모르겠는데요?’라는 동료의 한마디가, 내가 놓친 빈틈을 정확히 짚어준다. 혼자 백 개를 검수하는 것보다, 둘이 오십 개씩 바꿔 보는 쪽이 품질이 더 고르게 나온다.

■ C. ‘글자 박힌 이미지’ 점검 — 가장 위험한 구간

C-1. 공지 배너·행사 포스터에 적힌 핵심 정보(날짜·장소·연락처)가 이미지 ‘밖’에도 진짜 글자로 적혀 있는가?

→ 자주 보이는 문제: 행사 정보가 포스터 이미지 안에만 있어, 듣는 사람은 마감일조차 알 수 없다.

C-2. 카드뉴스·인포그래픽처럼 글자가 많은 이미지에, 그 내용을 풀어쓴 본문이나 별도 안내가 함께 있는가?

→ 자주 보이는 문제: 카드뉴스 다섯 장이 통째로 이미지라, alt 한 줄로는 도저히 그 내용을 담을 수 없다.

C-3. 이미지 속 글자의 크기·대비가 충분해, 화면을 보는 사용자도 어렵지 않게 읽히는가?

→ 자주 보이는 문제: 배경과 글자색 대비가 약해, 시력이 약한 사용자는 이미지 글자조차 읽기 힘들다.

C 영역은 다섯 묶음 중에서도 ‘파급력이 가장 큰’ 곳이다. 글자가 이미지 안에 갇히면, 화면을 못 보는 사용자뿐 아니라 검색·복사·번역·확대까지 한꺼번에 막히기 때문이다. 점검 방법은 단순하다. 페이지에서 ‘글자가 들어간 이미지’를 찾아낸 뒤, 그 안의 핵심 정보가 이미지 밖에도 진짜 텍스트로 적혀 있는지 확인하는 것이다. 확인하는 손쉬운 요령은 ‘드래그로 글자 선택해보기’다. 마우스로 이미지 속 글자 부분을 긁어 선택이 되면 진짜 텍스트이고, 아무리 긁어도 선택이 안 되고 이미지 전체가 통째로 잡히면 그건 ‘그림 속 글자’다. 그림 속 글자로만 정보가 있다면, 그 정보를 이미지 밖으로 빼내는 게 가장 시급한 개선 과제다.

여기서 현실적인 조언 하나. 이미 만들어 올린 수많은 배너와 카드뉴스를 전부 다시 만들 수는 없다. 그러니 ‘앞으로 올리는 것부터 글자를 밖으로 빼는 습관’을 들이고, 기존 것은 ‘마감일이 살아 있는 공지’나 ‘조회수가 높은 안내’처럼 중요도가 높은 것부터 차례로 손보는 게 현실적이다. 완벽하게 한 번에 다 고치려다 지쳐 포기하는 것보다, 중요한 것부터 꾸준히 줄여가는 쪽이 훨씬 멀리 간다.

본론 3 — 단계별 실행법: 점검에서 개선까지

점검으로 ‘아니오’를 모았다면, 이제 그걸 ‘개선’으로 옮길 차례다. 무턱대고 다 고치려 들면 시작도 전에 지친다. 순서가 필요하다.

■ 1단계 — 전수 조사보다 ‘대표 페이지’부터

처음부터 사이트 전체 이미지를 다 뒤지려 하지 말자. 페이지가 수백 개인 기관 사이트에서 그건 끝이 안 보이는 일이다. 대신 ‘사용자가 가장 많이 들르는 길목’부터 본다. 메인 페이지, 가장 인기 있는 안내·서비스 페이지 서너 개, 핵심 신청 흐름의 화면들. 방문이 많은 페이지의 이미지 한 장을 고치면, 적은 페이지 열 장을 고치는 것보다 더 많은 사람에게 가닿는다. 접근성 개선의 효율은 ‘얼마나 많은 사람이 그 화면을 거치는가’에 비례한다.

대표 페이지를 정하는 기준이 막막하다면, ‘방문 통계’를 보면 된다. 대부분의 기관이 방문 분석 도구를 쓰고 있으니, 방문이 많은 상위 페이지 목록을 뽑아 그 순서대로 점검하면 된다. 통계가 없다면 ‘민원실에 전화 문의가 가장 많이 들어오는 업무’가 무엇인지 떠올려, 그 업무와 관련된 페이지부터 보는 것도 좋은 방법이다. 사람들이 많이 찾는 곳에 문제가 있으면, 그 문제는 가장 많은 사람을 불편하게 만들고 있는 것이다.

■ 2단계 — ‘위험도’로 우선순위를 매긴다

모인 ‘아니오’도 다 같은 무게가 아니다. 우선순위를 매기는 간단한 기준이 있다. 첫째, ‘정보가 통째로 사라지는’ 문제가 최우선이다. 신청 마감일이 이미지 안에만 있거나, 절차 안내가 그림으로만 돼 있어 alt가 비었다면 — 이건 사용자가 ‘할 일을 못 하게’ 만드는 치명적 문제다. 가장 먼저 고친다. 둘째, ‘기능을 막는’ 문제가 그다음이다. 검색 버튼 아이콘의 alt가 비어 그게 무슨 버튼인지 모르는 경우처럼, 사용자의 행동을 가로막는 것들이다. 셋째, ‘불편하지만 막지는 않는’ 문제는 그 뒤다. 장식 이미지에 불필요한 alt가 달려 음성이 조금 어수선한 정도라면, 급하진 않다.

이 우선순위를 메모에 ‘별표 개수’로 표시해두면 편하다. 별 셋은 ‘정보 손실’, 별 둘은 ‘기능 차단’, 별 하나는 ‘소소한 불편’. 이렇게 분류해두면, 시간과 인력이 제한된 상황에서 ‘무엇부터 손댈지’가 한눈에 정리된다. 접근성 개선은 마라톤이다. 전부를 한 번에 끝낼 수 없다는 걸 인정하고, ‘가장 아픈 곳부터’ 차례로 줄여가는 게 지치지 않고 오래 가는 길이다.

■ 3단계 — alt를 새로 쓸 땐 ‘소리 내어 검수’한다

이제 실제로 alt를 채우거나 고친다. 이때 가장 좋은 검수법은 앞서 말한 ‘눈 감고 듣기’다. 새로 쓴 alt를 입으로 소리 내어 읽어보고, 그 소리만으로 ‘이 이미지가 무엇인지’ 이해되는지 확인한다. 이해되면 통과, 안 되면 다시 쓴다. 글로 적을 땐 그럴듯해 보여도 소리로 들으면 어색한 경우가 많다. ‘~의 이미지’ 같은 군더더기, 지나치게 긴 묘사, 핵심을 비껴간 설명은 소리 내어 읽을 때 금방 티가 난다.

여러 담당자가 함께 작업한다면 ‘alt 작성 기준’을 한 장으로 정리해 공유하는 게 좋다. ‘장식 이미지는 빈 alt’ ‘파일 이름·종류 표시 금지’ ‘한두 문장으로 핵심만’ ‘이미지 속 글자는 본문으로’ — 이 네 줄짜리 약속만 모두가 지켜도, 사이트의 이미지 접근성은 눈에 띄게 좋아진다. 기준이 머릿속에만 있으면 사람마다 다르게 쓰지만, 한 장으로 적어 공유하면 누가 작업해도 비슷한 품질이 나온다.

■ 4단계 — 이미지 속 글자를 ‘밖으로’ 빼낸다

C 영역에서 찾은 ‘글자 박힌 이미지’는 별도 작업이 필요하다. 새 배너·공지를 만들 땐, 처음부터 핵심 정보를 이미지 옆이나 아래에 진짜 텍스트로 함께 적는 걸 기본 규칙으로 삼는다. 기존 것은 우선순위 높은 것부터, 이미지 아래에 핵심 정보(날짜·장소·연락처·신청 링크)를 텍스트로 보강한다. 이미지 자체를 다시 만들 여력이 없어도, ‘이미지 밑에 글자 몇 줄 보태기’는 누구나 당장 할 수 있는 일이다. 이 작은 보강 하나가, 화면을 못 보는 사용자에게는 ‘있던 정보가 비로소 들리게 되는’ 큰 변화다.

■ 5단계 — ‘한 번 하고 끝’이 아니라 ‘업로드 습관’으로

이미지 접근성의 진짜 승부처는 ‘앞으로 올리는 것’에 있다. 아무리 기존 이미지를 열심히 고쳐도, 새 이미지를 올릴 때마다 alt를 비워두면 밑 빠진 독에 물 붓기다. 그래서 가장 효과적인 개선은 ‘업로드 절차에 alt를 끼워 넣는 것’이다. 이미지를 올리는 모든 담당자가 ‘alt를 안 채우면 다음으로 못 넘어가게’ 습관을 들이거나, 그게 어렵다면 ‘올릴 때 alt 한 줄 적기’를 업무 체크리스트에 박아둔다. 이렇게 ‘새로 들어오는 것’의 수문을 막으면, 시간이 지날수록 사이트의 이미지 접근성은 저절로 좋아진다. 고치는 속도가 망가지는 속도를 앞지르기 때문이다.

이 ‘업로드 습관’을 정착시키는 작은 요령 하나. 처음엔 ‘alt가 뭔지’부터 헷갈리는 담당자가 많으니, 콘텐츠 관리 화면 옆에 ‘alt 작성 예시 세 줄’을 붙여두는 것이다. ‘좋은 예: ○○ 행사 안내 포스터, 8월 20일 오후 2시 시민회관’ ‘나쁜 예: 포스터, img_001’ 같은 식으로 눈에 보이게 두면, 매번 고민하지 않아도 손이 알아서 따라간다. 그리고 한 달에 한 번쯤, 그달에 새로 올라온 이미지만 빠르게 훑어 alt가 잘 들어갔는지 확인하는 ‘짧은 점검 시간’을 두면, 습관이 흐트러지기 전에 다잡을 수 있다. 거창한 제도가 아니라, ‘예시 붙이기’와 ‘월말 5분 점검’ 같은 작은 장치들이 결국 사이트의 품질을 오래 지켜준다. 접근성은 한 번의 큰 개편이 아니라, 매일의 작은 습관이 쌓여 만들어지는 것이다.

본론 4 — 자주 나오는 오해와 현장의 진짜 어려움

■ “이미지가 몇 개 안 되는데 그게 큰 문제일까?”

작은 사이트 담당자가 흔히 하는 말이다. 그런데 ‘이미지 개수’보다 ‘그 이미지가 무엇을 담았는가’가 중요하다. 이미지가 딱 세 장인데 그 셋이 전부 ‘신청 절차 안내도’ ‘마감일이 박힌 공지 배너’ ‘본인인증 방법 그림’이라면, 그 세 장이 막히는 순간 사이트의 핵심 기능 셋이 함께 막힌다. 반대로 이미지가 백 장이어도 전부 분위기용 장식이라면 접근성 영향은 크지 않다. 그러니 ‘개수’가 아니라 ‘중요한 이미지가 막혔는가’로 봐야 한다.

■ “alt만 채우면 접근성 끝 아닌가?”

대체텍스트는 접근성의 ‘첫 줄’이지 ‘전부’가 아니다. KWCAG 33항목은 이미지뿐 아니라 색 대비, 키보드 사용, 초점 표시, 표의 구조, 동영상 자막 등 넓은 범위를 다룬다. 다만 이미지 대체텍스트가 ‘가장 기본이고 가장 자주 걸리는’ 항목이라, 여기부터 잡는 게 순서일 뿐이다. 이미지를 챙기고 나면 자연스럽게 ‘다음은 색 대비’ ‘다음은 키보드’로 시야가 넓어진다. 첫 단추를 잘 끼우면 나머지가 따라온다.

■ “외주가 만든 사이트라 우리가 손댈 수 없다”

많은 기관이 처한 현실이다. 그런데 손을 못 댄다고 점검까지 못 하는 건 아니다. 오히려 담당자가 직접 점검해 ‘어디가 어떻게 잘못됐는지’ 구체적으로 정리하는 게 더 중요하다. ‘우리 사이트 접근성 좀 봐주세요’라는 막연한 요청으로는 외주가 움직이지 않는다. 반면 ‘메인 배너 3개와 신청 절차 안내도의 alt가 비어 있고, 행사 포스터의 마감일이 이미지 안에만 있다’처럼 구체적으로 짚어주면, 그건 명확한 작업 지시가 된다. 자가 점검은 외주에게 ‘무엇을 고쳐달라’고 말할 수 있게 해주는 가장 강력한 무기다.

■ “alt를 길게 쓸수록 친절한 거 아닌가?”

의외로 흔한 오해다. alt는 ‘길수록 친절’이 아니라 ‘필요한 만큼만 정확히’가 친절이다. 듣는 사람 입장에서 생각해보자. 이미지 하나에 alt가 다섯 문장이면, 그 다섯 문장을 음성으로 다 들어야 다음으로 넘어간다. 정작 핵심은 첫 문장에 있는데 말이다. 그래서 복잡한 이미지일수록 alt에는 요약만 담고, 자세한 내용은 본문에 글로 풀어 ‘본문 참고’로 안내하는 게 듣는 사람을 배려하는 길이다. 친절은 양이 아니라 정확함과 간결함에서 나온다.

■ “담당자가 바뀌면 또 원점 아닌가?”

공공기관의 고질적 고민이다. 사람이 바뀌면 노하우가 함께 떠나고, 새 담당자는 처음부터 다시 시작한다. 이미지 접근성도 마찬가지여서, 전임자가 열심히 챙겨놓아도 후임자가 모르면 새 이미지부터 다시 alt가 비어간다. 이걸 막는 방법은 ‘사람’이 아니라 ‘절차’에 노하우를 심는 것이다. 앞서 말한 ‘alt 작성 기준 한 장’을 업무 인수인계 문서에 넣어두고, 콘텐츠 업로드 매뉴얼에 ‘이미지 올릴 땐 alt 필수’ 한 줄을 박아두면, 담당자가 바뀌어도 기준은 남는다. 그리고 정기적인 자동 검사를 ‘분기 업무’로 고정해두면, 누가 담당이든 분기마다 사이트 상태를 확인하게 된다. 개인의 의지에 기대지 말고 절차에 박아두는 것 — 이게 공공기관에서 품질을 ‘유지’하는 거의 유일한 방법이다.

■ “디자인이 예뻐야 하는데 접근성 챙기면 못생겨지지 않나?”

가끔 듣는 오해다. 접근성과 디자인이 상충한다는 인식인데, 사실은 정반대다. 좋은 접근성은 ‘보이지 않는다’. alt는 화면에 나타나지 않으니 디자인을 전혀 건드리지 않는다. 이미지 속 글자를 밖으로 빼는 것도, 잘 배치하면 오히려 정보가 더 또렷하게 정리돼 보기 좋아진다. 색에만 의존하던 표시에 글자나 모양을 더하는 것도, 모든 사용자에게 더 명확한 화면이 된다. 접근성을 챙긴다고 못생겨지는 게 아니라, 오히려 ‘아무나 봐도 명확한’ 디자인으로 가는 길이다. 진짜 좋은 디자인은 ‘예쁜 디자인’이 아니라 ‘누가 봐도 잘 통하는 디자인’이고, 접근성은 그 ‘잘 통함’의 다른 이름이다.

■ 현장의 진짜 어려움 — ‘판단이 애매한 이미지들’

이론은 명쾌한데 현장은 늘 애매하다. ‘이게 의미 있는 이미지인가 장식인가’ 헷갈리는 순간이 반드시 온다. 인사말 옆 기관장 사진은? 본문 분위기를 살리는 풍경 사진은? 표 옆에 같은 내용을 그림으로 한 번 더 보여주는 경우는? 이럴 때 기준은 하나다. ‘이 이미지가 없어도 사용자가 같은 정보를 다른 데서 얻을 수 있는가’. 본문에 이미 글로 다 설명돼 있고 이미지는 그걸 보기 좋게 반복한 것뿐이라면, 그 이미지는 장식에 가깝게 다뤄도 된다(빈 alt). 반대로 그 이미지에만 있는 정보가 조금이라도 있다면, 그건 의미 있는 이미지다. 애매할 땐 ‘사용자 편에서 더 챙기는 쪽’으로 기울이되, 음성을 어지럽힐 정도로 과하지 않게 균형을 잡는 것 — 이 감각은 몇 번 직접 해보면 자연스럽게 길러진다.

본론 5 — 자동 검사가 필요한 이유: 손 점검의 한계

여기까지 ‘손으로 직접 하는’ 점검을 길게 다뤘다. 그런데 솔직히 인정할 게 있다. 손 점검에는 분명한 한계가 있다.

■ 손 점검은 ‘몇 페이지’가 한계다

오늘 소개한 방법은 대표 페이지 몇 개를 보는 데는 충분하지만, 사이트 전체로 넓히면 금세 벽에 부딪힌다. 페이지가 수백 개인 사이트에서 모든 이미지를 일일이 화면 낭독으로 들어보고, 드래그해 글자를 확인하고, alt를 하나하나 점검하는 건 사람이 할 수 있는 일이 아니다. 한 페이지 점검에 익숙해져도 10분은 걸린다. 500페이지면 단순 계산으로도 80시간이 넘는다. 그래서 손 점검은 ‘감을 잡고 핵심을 확인하는’ 데 쓰고, ‘전체를 빠짐없이 훑는’ 일은 도구에 맡기는 게 맞다.

■ 사람의 눈은 ‘놓치고, 후해진다’

손 점검의 또 다른 한계는 사람의 눈이 일관되지 않다는 점이다. 같은 사람도 아침과 저녁이 다르고, 100번째 이미지쯤 되면 집중력이 떨어져 빈 alt를 그냥 넘긴다. 게다가 자기 사이트엔 후해지기 마련이라, ‘이 정도면 됐지’ 하고 통과시키는 일이 잦다. 도구는 다르다. 첫 번째 이미지든 만 번째 이미지든 같은 기준으로, 지치지 않고, 봐주는 것 없이 본다. ‘빠짐없이, 일관되게’가 도구의 가장 큰 강점이다.

■ ViewCheck의 접근성 자동 검사

이 지점에서 ViewCheck를 소개한다. ViewCheck는 공공웹을 KRDS(한국 정부 디자인 시스템) 기준으로 자동 진단하는 서비스다. KRDS 846규칙 — 기초(DS) 120, 부품(CP) 446, 흐름(BP) 108, 서비스(SP) 172 — 을 한 번에 점검하는데, 그 안에 웹 접근성 KWCAG 33항목 진단이 함께 들어 있다. 그리고 그 33항목의 맨 앞에 있는 게 바로 오늘 다룬 ‘이미지 대체텍스트’다.

URL 하나만 넣으면, ViewCheck는 사이트의 페이지들을 돌며 이미지마다 alt가 있는지, 비어 있는지, 그 자리에 맞는지를 훑는다. 손으로는 몇 페이지가 한계였던 일을, 도구는 수십·수백 페이지로 한 번에 넓힌다. 결과는 분석 화면 상단의 점수 카드(OverviewCards)에 영역별로 요약되어, ‘접근성이 전체적으로 어느 수준인지’ ‘어느 페이지의 어떤 이미지가 문제인지’가 한눈에 정리된다. 오늘 손으로 확인한 항목들이 ‘숫자와 목록’으로 정돈되어 돌아오는 셈이다.

여기서 오해하지 말 것은, 자동 검사가 사람을 대체하는 게 아니라는 점이다. 도구는 ‘alt가 비어 있다’는 사실을 빠르고 빠짐없이 찾아준다. 하지만 ‘그 alt에 무슨 내용을 담을지’ ‘이 이미지가 의미 있는지 장식인지’를 최종 판단하는 건 여전히 사람의 몫이다. 그래서 가장 좋은 방식은 ‘도구로 넓게 훑어 문제 목록을 받고, 사람이 그 목록을 보며 깊게 고치는’ 협업이다. 오늘 익힌 손 점검의 감각이, 도구가 준 목록을 ‘읽을 줄 아는 눈’이 되어준다. 도구가 ‘여기 alt가 비었다’고 짚어줬을 때, 그게 왜 문제이고 어떻게 채워야 하는지를 아는 담당자와 모르는 담당자의 결과물은 하늘과 땅 차이다.

■ 손 점검과 자동 검사를 ‘섞어 쓰는’ 현실적인 운영법

그럼 실무에서 둘을 어떻게 엮어야 할까. 내가 권하는 건 ‘분기 한 번은 도구로 전체를 훑고, 평소엔 손으로 신규 페이지만 챙기는’ 리듬이다. 분기마다 사이트 전체를 자동 검사에 돌리면, 그사이 새로 쌓인 이미지들 중 alt가 빠진 것, 잘못 채워진 것이 한꺼번에 목록으로 나온다. 그 목록을 받아 들고, 오늘 익힌 ‘눈 감고 듣기’ ‘드래그로 글자 확인’ 같은 손 기술로 하나씩 검수해 고친다. 그리고 평소에는 새 콘텐츠를 올릴 때마다 그 자리에서 alt를 챙기는 것으로 ‘새로 망가지는 것’을 막는다. 이렇게 ‘큰 검진은 도구로, 일상 관리는 손으로’ 역할을 나누면, 사람의 노동은 줄고 빠짐은 없어진다.

이 운영법의 좋은 점은 ‘추세’가 보인다는 것이다. 같은 사이트를 분기마다 같은 도구로 검사하면, 접근성 점수가 오르는지 내리는지 그래프가 그려진다. 점수가 꾸준히 오르면 ‘우리가 올바른 방향으로 가고 있구나’ 하는 확신이 생기고, 어느 분기에 갑자기 떨어졌다면 ‘그 사이 무슨 일이 있었지’ 하고 원인을 찾게 된다. 대개는 ‘새로 만든 어떤 코너가 이미지를 잔뜩 올렸는데 alt를 안 챙겼다’는 식이다. 추세를 보면 문제를 ‘터지고 나서’가 아니라 ‘커지기 전에’ 잡을 수 있다. 이게 한 번 점검하고 잊는 것과, 정기적으로 추적하는 것의 결정적 차이다.

■ ‘보고할 수 있는 자료’가 된다

자동 검사 결과의 또 다른 쓸모는 ‘윗선과 외주를 설득하는 자료’가 된다는 점이다. 접근성 개선은 담당자 혼자 마음먹는다고 되는 일이 아니다. 예산이 필요하고, 외주 일정이 필요하고, 윗선의 승인이 필요하다. 그런데 ‘우리 사이트 접근성이 좀 부족한 것 같습니다’라는 막연한 말로는 누구도 움직이지 않는다. 반면 ‘자동 검사 결과 접근성 점수가 7대 영역 중 가장 낮고, 그중 이미지 대체텍스트 누락이 가장 큰 비중을 차지합니다’처럼 숫자와 항목으로 정리된 자료를 내밀면, 그건 ‘안건’이 된다. 점수 카드 한 장이 미뤄지던 개선 논의를 시작하게 만드는 방아쇠가 되는 것이다. 손 점검은 ‘내가 문제를 아는’ 데까지지만, 자동 검사 결과는 ‘남을 설득하는’ 데까지 간다. 이 둘은 서로를 보완한다.

본론 6 — 흔히 마주치는 까다로운 이미지 유형별 처방

여기까지 원칙과 점검법을 다뤘으니, 이제 현장에서 ‘이건 어떻게 해야 하지’ 하고 자주 멈칫하게 되는 까다로운 유형들을 따로 모아 처방을 정리한다. 우리 사이트에서 비슷한 장면을 마주치면 바로 꺼내 쓸 수 있게, 유형별로 끊어 적는다.

■ 통계 그래프·차트

수치가 담긴 그래프는 가장 까다로운 축에 든다. ‘막대그래프’ ‘원그래프’ 같은 모양만 적은 alt로는 정작 중요한 ‘수치’가 빠진다. 그렇다고 모든 막대의 값을 alt에 다 욱여넣으면 끝없이 길어진다. 처방은 이렇다. alt에는 ‘무엇에 관한 그래프이고, 가장 큰 메시지가 무엇인지’만 요약한다(예: ‘연도별 민원 처리 건수, 최근 3년 연속 증가’). 그리고 그래프 바로 아래에 같은 수치를 ‘표’로 한 번 더 제공한다. 표는 글자라 스크린리더가 행과 열을 따라 또박또박 읽어준다. 이렇게 하면 보는 사람은 그래프로 직관을, 듣는 사람은 표로 정확한 수치를 얻는다. 핵심은 ‘그래프 안의 데이터를 글로 접근할 통로를 따로 열어두는 것’이다.

■ 지도·약도

오시는 길 안내에 흔히 쓰는 지도 이미지도 까다롭다. 약도를 alt로 다 묘사하는 건 사실상 불가능하다. ‘지도’라고만 적으면 듣는 사람에겐 아무 쓸모가 없다. 처방은 ‘지도는 보조로 두고, 진짜 정보는 글로’다. 정확한 주소, 가까운 지하철역과 출구 번호, 버스 노선, 주차 안내를 지도 아래에 텍스트로 또박또박 적어둔다. 그러면 화면을 못 보는 사용자도 ‘몇 번 출구에서 어느 방향으로 몇 분’이라는 실질 정보를 얻는다. 지도 이미지의 alt에는 ‘약도, 자세한 위치는 아래 주소 안내 참고’ 정도로 짧게 두고, 무게중심을 글자 안내로 옮기는 게 정답이다.

■ 표를 캡처한 이미지

엑셀이나 문서의 표를 ‘이미지로 캡처해’ 올린 경우가 의외로 많다. 보기엔 깔끔하지만, 그 표의 모든 내용이 ‘그림’이라 듣는 사람에겐 통째로 사라지고, 검색·복사·확대도 막힌다. 처방은 단순하다. ‘표는 이미지가 아니라 진짜 표로 만들라’. 표는 본래 글자와 칸으로 이루어진 구조라, 진짜 표로 만들면 스크린리더가 ‘몇 번째 행, 몇 번째 열, 무슨 값’ 식으로 읽어줘 오히려 이미지보다 훨씬 잘 전달된다. 이미 이미지로 올라간 표가 많다면, 조회가 잦은 것부터 진짜 표로 바꿔간다. 표를 이미지로 올리는 습관 하나만 끊어도 접근성이 크게 올라간다.

■ 의미가 ‘색’에만 담긴 이미지

‘빨강은 마감, 초록은 접수 중’처럼 색으로만 상태를 구분하는 이미지·아이콘도 함정이다. 색을 구분하기 어려운 사용자(색약·색맹)나 화면을 못 보는 사용자에겐 그 구분이 전달되지 않는다. 처방은 ‘색 말고 다른 단서를 하나 더’ 주는 것이다. 색과 함께 글자(‘마감’ ‘접수 중’)나 모양(○, ×) 같은 단서를 곁들이고, alt에도 그 상태를 글로 적는다. 색은 ‘하나의 단서’일 뿐, ‘유일한 단서’가 되어선 안 된다. 이건 KWCAG에서도 따로 강조하는 원칙으로, 이미지든 표든 버튼이든 ‘색만으로 정보를 전하지 말라’는 게 핵심이다.

■ 움직이는 이미지·배너 슬라이드

여러 장이 자동으로 넘어가는 메인 슬라이드 배너도 점검 대상이다. 각 슬라이드가 의미 있는 정보(행사 안내, 신규 서비스)를 담고 있다면, 슬라이드마다 alt를 챙겨야 한다. 그런데 자동으로 빠르게 넘어가면 듣는 사람이 미처 다 읽기 전에 다음으로 넘어가버린다. 그래서 ‘멈춤 버튼’을 함께 두는 게 좋다. 사용자가 슬라이드를 멈추고 천천히 볼 수 있게 하는 것이다. 화려한 자동 배너가 보기엔 좋아도, 듣는 사람·천천히 읽는 사람에겐 ‘쫓기는 화면’이 될 수 있다는 걸 기억하자.

■ 본문에 같은 내용이 글로도 있는 이미지

마지막으로, 헷갈리기 쉬운 경우 하나. 본문에 이미 충분히 글로 설명돼 있고, 그 옆에 같은 내용을 보기 좋게 그림으로 한 번 더 보여준 경우다. 이때 그림에까지 똑같은 내용을 alt로 길게 달면, 듣는 사람은 ‘같은 말’을 두 번 듣게 돼 오히려 번거롭다. 이럴 땐 그 이미지를 장식에 가깝게 봐 빈 alt로 두거나, ‘위 내용을 요약한 그림’ 정도로 짧게 처리하는 게 듣는 사람을 배려하는 길이다. ‘정보가 이미지에만 있으면 꼼꼼히, 본문에도 있으면 간결하게’ — 이 균형 감각이 alt 작업의 마지막 묘미다.

마무리

오늘 이야기를 한 번에 꿰어보자. 이미지 접근성의 핵심은 세 가지였다. 첫째, 의미 있는 이미지와 장식 이미지를 가른다 — ‘사라지면 정보를 잃는가’를 묻는다. 둘째, 의미 있는 이미지엔 정확하고 간결하며 맥락에 맞는 alt를 단다 — ‘눈 감고 들어도 이해되는가’로 검수한다. 셋째, 글자가 박힌 이미지는 그 글자를 이미지 밖으로 빼낸다 — 핵심 정보는 진짜 텍스트로 한 번 더 적는다. 이 세 가지만 챙겨도, 화면을 못 보는 사용자에게 우리 사이트의 절반이 ‘침묵’에서 ‘목소리’로 바뀐다.

점검의 순서도 다시 정리하자. ‘있는가(A)’를 보고, ‘제대로인가(B)’를 보고, ‘글자 박힌 이미지(C)’를 본다. 확인 방법은 코드 없이도 가능했다. 이미지를 안 뜨게 해 alt를 드러내 보고, 화면 낭독으로 직접 들어보고, 글자를 드래그해 진짜 텍스트인지 가려낸다. 그렇게 모은 ‘아니오’에 위험도로 우선순위를 매겨, 정보가 사라지는 것부터 차례로 고쳐나간다. 그리고 가장 중요한 건 — ‘앞으로 올리는 이미지부터 alt를 챙기는 습관’이다. 이 습관 하나가 다른 모든 노력을 헛되지 않게 만든다.

그리고 오늘 다룬 까다로운 유형별 처방도 한 번 더 되새기자. 그래프는 표를 곁들이고, 지도는 글로 된 길 안내를 더하고, 표는 이미지가 아닌 진짜 표로 만들고, 색에만 기댄 표시엔 글자나 모양을 더한다. 움직이는 배너엔 멈춤 버튼을, 본문에 이미 있는 내용을 반복한 그림엔 간결한 처리를. 이 처방들은 외워둘 필요 없이, 막힐 때마다 다시 꺼내 보면 된다. 중요한 건 ‘이런 경우엔 어떻게 하지’ 하고 멈췄을 때, ‘사용자 입장에서 정보가 닿는가’라는 한 가지 질문으로 돌아오는 것이다. 그 질문이 거의 모든 애매한 상황의 답을 알려준다.

기억하자. 대체텍스트는 ‘있으면 좋은 친절’이 아니라, ‘없으면 누군가에겐 콘텐츠가 통째로 사라지는 일’이다. 그리고 그 ‘누군가’는 우리 생각보다 훨씬 많다. 시각장애인뿐 아니라, 눈이 침침한 어르신, 음성으로 듣는 사용자, 이미지가 안 뜨는 환경의 사용자, 그리고 우리 사이트를 찾아주는 검색엔진까지. alt 한 줄이 이 모두에게 닿는다. 작은 글자 한 줄이 이렇게 멀리 간다는 게, 접근성 작업의 보람이다.

오늘 손으로 직접 해보니 ‘우리 대표 페이지’ 정도는 감이 잡혔을 것이다. 그렇다면 다음 단계는 ‘사이트 전체가 어떤 상태인지’ 빠짐없이 확인하는 것이다. 그 일은 도구에 맡기는 게 현명하다. ViewCheck 진단 플랫폼(krds.viewcheck.co.kr)에 우리 기관 사이트 주소를 넣어보길 권한다. 이미지 대체텍스트를 포함한 KWCAG 접근성 항목은 물론, KRDS 846규칙 전반의 점검 결과를 화면 상단 점수 카드로 한눈에 받아볼 수 있다. 오늘 손으로 익힌 감각과 도구가 준 목록을 나란히 놓으면, ‘무엇부터 어떻게 고칠지’가 또렷해진다. 손으로 감을 잡고, 도구로 전체를 확인하고, 다시 사람의 판단으로 깊게 고치는 것 — 이 세 박자가 맞아 들어갈 때, 우리 사이트는 ‘모두가 쓸 수 있는 사이트’에 한 걸음 더 가까워진다. 오늘 점검한 그 한 페이지가, 그 시작이다.

이미지 한 장에 붙이는 alt 한 줄. 사소해 보이지만, 누군가에겐 그 한 줄이 ‘들리느냐 안 들리느냐’를 가른다. 그 한 줄을 챙기는 사이트가, 진짜로 ‘공공’이라는 이름에 어울리는 사이트다. 오늘 우리 사이트의 이미지를 사용자의 귀로 한 번 들어보자. 거기서 모든 개선이 시작된다.

키워드/태그: #KRDS #공공웹 #웹접근성 #KWCAG #대체텍스트 #alt텍스트 #이미지접근성 #스크린리더 #전자정부 #접근성자동검사 #공공기관홈페이지 #ViewCheck