스크린샷도 모두가 읽을 수 있어야 합니다: 웹 접근성 alt text 작성 가이드

블로그나 웹사이트에 스크린샷을 올릴 때 대부분의 사람들은 이미지 파일 이름이나 간단한 설명만 남기고 넘어간다. 하지만 스크린샷이라는 시각적 정보를 텍스트로 전달하지 못하면, 시각장애인뿐 아니라 화면 읽기 기술을 쓰는 모든 사람들이 그 내용을 이해할 수 없다. 이것이 웹 접근성의 출발점이다. 오늘은 캡쳐 이미지마다 어떻게 대체 텍스트를 써야 하는지, 실전 기준을 정리해본다.

웹 접근성, 왜 이미지에 집중할까

웹 접근성은 장애의 유무와 상관없이 모든 사용자가 동등하게 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 원칙이다. 특히 이미지는 대체 텍스트 없이는 화면 읽기 프로그램으로 인식할 수 없는 요소다. 스크린샷도 마찬가지다. 도움말 화면, UI 요소, 오류 메시지 같은 시각 정보가 포함된 스크린샷은 그것을 설명하는 텍스트 없이는 일부 사용자에게 아무 의미가 없다. 웹 접근성 기준(WCAG)에서도 이미지마다 대체 텍스트를 붙이도록 명확히 권고한다.

스크린샷 alt text가 중요한 세 가지 이유

첫째, 정보 접근의 평등성이다. 시각장애인이나 저시력인, 또는 인지 장애가 있는 사용자도 스크린샷이 담은 내용을 이해해야 한다. 좋은 대체 텍스트는 그들이 다른 사람과 동일한 수준의 정보를 얻도록 돕는다.

둘째, SEO 효과다. 검색 엔진의 크롤러는 이미지 파일 자체를 '읽지' 못한다. 대체 텍스트를 통해서만 스크린샷이 어떤 내용인지 파악한다. 정확한 alt text는 검색 결과에서 이미지가 노출될 확률을 높인다.

셋째, 문맥 전달의 정확성이다. 스크린샷의 맥락을 짧고 명확하게 설명하면 모든 독자가 그 내용의 의도를 더 잘 이해한다.

효과적인 alt text를 쓰는 다섯 가지 원칙

1. 간결하되 설명적으로 — 너무 길지 않되 필요한 정보는 모두 담아야 한다. 보통 125자 이내가 적당하다.

2. 스크린샷 내용을 정확히 기술하기 — 무엇이 보이는지, 그것이 무엇을 하는지를 명확히 한다. "예시 이미지" 같은 막연한 표현은 피한다.

3. "이미지입니다" 같은 중복 표현 빼기 — 이미 이미지 태그(img)로 인식되므로 "이미지", "사진", "스크린샷" 같은 단어를 alt text에 굳이 넣을 필요 없다.

4. 스크린샷 속 텍스트는 그대로 옮기기 — 버튼, 메뉴, 에러 메시지 등 화면에 보이는 텍스트는 alt text에도 포함해야 한다.

5. 문맥에 맞게 조정하기 — 같은 스크린샷이라도 글의 맥락에 따라 어떤 부분을 강조할지는 달라진다. 그 문단에서 독자가 알아야 할 정보를 우선순위로 둔다.

상황별 alt text 작성 예시

UI 요소 스크린샷: "Gmail 설정 페이지의 '전달' 탭에서 이메일 전달 주소를 입력하는 텍스트 필드와 '저장' 버튼"

그래프나 차트: "2024년 1월부터 3월까지의 월별 방문자 수를 나타낸 막대 그래프. 1월 3,500명, 2월 4,200명, 3월 5,100명"

오류 메시지: "빨간 배경의 오류 팝업 창에 '요청이 시간 초과되었습니다. 다시 시도하세요'라는 메시지 표시"

긴 텍스트 블록: "블로그 포스트의 서문 섹션으로, 흰 배경에 검은 글씨로 약 150자의 소개 문구"

작성할 때 피해야 할 흔한 실수들

너무 짧은 설명은 피한다 — "화면"이나 "스크린샷"만으로는 정보가 부족하다. 스크린샷의 목적과 주요 내용을 포함해야 한다.

주관적인 표현으로 채우지 말자 — "멋진 인터페이스"나 "복잡한 메뉴"보다는 객관적으로 "파란 배경의 헤더 영역에 로고와 네비게이션 메뉴"처럼 쓴다.

구두점과 대문자를 무시하지 말 것 — 화면에 보이는 그대로를 옮긴다면 문장 부호도 정확히 포함해야 한다.

여러 스크린샷을 구분 없이 쓰지 말기 — 각 이미지의 alt text는 그 이미지만의 고유한 내용을 담아야 한다.

alt text 작성은 단순한 SEO 기법이 아니다. 그것은 웹을 더 포용적으로 만드는 기본 예의다. 스크린샷 하나하나에 시간을 들여 정확한 설명을 붙인다면, 시각장애인도, 검색 엔진도, 모든 방문자도 당신의 콘텐츠를 더 잘 이해할 수 있다.