홈페이지 사진 설명, 무료 점검 도구 3가지

상품 사진이 한 장도 뜨지 않는 상태로 우리 홈페이지를 열면 어떻게 보일까요? 설명이 없으면 화면 읽기 프로그램이 IMG_3021.jpg 같은 파일명을 읽어 주기도 해요. 이미지 대체 텍스트는 바로 그 빈자리를 채우는 짧은 문장입니다.

그런데 사진이 수십 장, 수백 장이면 하나씩 열어 확인할 수가 없죠. 다행히 빠진 곳을 찾아 주는 도구는 이미 무료로 공개돼 있어요.

사진마다 맡은 역할부터 나누세요

W3C 웹 접근성 이니셔티브(WAI)가 공개한 alt 결정표는 이미지를 용도에 따라 나눠요. 소상공인 홈페이지라면 세 가지로 충분합니다.

▲ 이미지 역할별 alt 처리 · 출처: W3C WAI 이미지 튜토리얼 (Decision Tree·Tips·Functional·Decorative)

첫째는 내용을 이해하는 데 필요한 사진이에요. 제품 사진이나 시공 전후 사진이 여기에 들어가요. W3C는 이런 이미지에 의미가 전달되도록 짧게 설명하라고 안내해요. 예를 들면 식탁 사진보다 밝은 오크색 원목 식탁, 4인용이 낫습니다. 중요한 정보를 앞쪽에 두라는 것도 W3C의 이미지 작성 팁이에요.

둘째는 링크나 버튼으로 쓰인 이미지입니다. 이때는 그림의 모양이 아니라 누르면 일어나는 일을 적어요. W3C 예시도 프린터 이미지가 아니라 print this page, 돋보기가 아니라 search처럼 동작을 쓰라고 해요.

셋째는 꾸밈용 이미지예요. 옆 문장이 이미 설명하는 사진이나 분위기용 무늬는 alt=""처럼 빈 값을 넣습니다(꾸밈 이미지 안내). 중요한 점이 하나 있어요. alt 속성을 아예 빼면 일부 화면 읽기 프로그램이 파일명을 읽어 버려요. 빈 값과 누락은 다르다는 뜻입니다.

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — 팀 버너스리, W3C 디렉터이자 월드와이드웹 발명가 (W3C 웹 접근성 소개)

웹의 힘은 보편성에 있고, 장애와 상관없이 모두가 접근할 수 있어야 한다는 말이에요. 쉽게 말해 이미지 대체 텍스트는 사진을 못 보는 손님에게도 가게 문을 열어 두는 일입니다.

그럼 이 확인을 사람이 일일이 하지 않아도 되는 도구에는 무엇이 있을까요?

무료 점검 도구 비교: 무엇이 낫고 무엇이 아쉬울까

빠진 곳을 찾는 일은 도구에 맡기고, 문구를 정하는 일은 사람이 맡는 것이 효율적이에요. 무료 도구 세 가지를 나란히 놓아 봤어요.

Lighthouse 공식 저장소에서 확인한 내용은 이래요. 크롬 개발자도구 안에 통합되어 있고, "Lighthouse" 패널에서 "Generate report"를 누르면 됩니다. 접근성 항목에는 Image elements do not have [alt] attributes가 있어서 alt가 없는 이미지를 바로 찾아 줘요. Pa11y는 WCAG2AA가 기본 기준이고 --reporter csv로 결과를 CSV 파일로 남길 수 있어요.

WAVE는 WebAIM이 무료 커뮤니티 서비스로 제공하는 브라우저 확장이에요. 공식 페이지에 따르면 확장이 브라우저 안에서만 돌아가고 WAVE 서버로 정보를 보내지 않아서, 로그인해야 보이는 관리자 페이지도 점검할 수 있다고 해요. 설명 문서에는 Missing alternative text(대체 텍스트 없음)라는 오류 항목도 있습니다. 혼자 한 페이지씩 눈으로 확인하고 싶다면 WAVE, 여러 페이지를 기록으로 남기고 싶다면 Pa11y가 어울려요. 사람이 직접 보거나 제작 업체에 맡기는 방법도 있지만, 사진이 많으면 시간이나 견적이 늘어난다는 점은 감안하세요.

한계도 분명해요. 도구가 알려 주는 것은 alt가 없다는 사실이고, 그 문구가 사진과 맞는지는 사람이 봐야 해요. W3C도 장식인지 정보인지는 글쓴이만 정할 수 있는 판단이라고 밝혀요. 그래서 도구가 찾고, 사람이 고치는 역할 분담이 필요합니다.

우리 상품 목록으로 설명 문구를 한 번에 정리하기

어려운 점은 도구 사용이 아니라 문구 쓰기예요. 그런데 상품이 많은 가게일수록 이미 가진 데이터가 큰 자산이 됩니다.

예를 들어 가구 쇼핑몰이라면 상품 엑셀에 상품명, 색상, 소재, 규격이 이미 있을 거예요. 이 칸을 이어 붙이면 설명 문구 초안이 나와요. A열 상품명, B열 색상, C열 소재, D열 규격이라면 이런 수식을 쓰면 됩니다.

=B2&" "&C2&" "&A2&", "&D2

그러면 밝은 오크색 원목 식탁, 4인용처럼 상품마다 서로 다른 문구가 만들어져요. 이 열을 제작 업체나 관리자에게 넘기면, 사진마다 같은 설명을 반복하던 문제가 한꺼번에 사라집니다.

점검 자동화는 이런 흐름이에요.

1. 점검할 주소를 urls.txt 한 줄에 하나씩 적어 둡니다. 상품 목록 엑셀의 주소 열을 복사하면 돼요.
2. 매월 첫 업무일에 Pa11y를 반복 실행해 CSV로 저장합니다.
3. CSV를 열어 문제가 나온 페이지만 상품 엑셀과 맞춰 문구를 고칩니다.

결국 매달 같은 목록을 돌려 보고, 새로 올린 사진에서 빠진 설명만 골라내는 겁니다.

사진 설명 초안을 AI 도구로 뽑고 싶다면 아래 요청문을 그대로 붙여 넣어 보세요. 다만 고객 정보나 내부 자료는 외부 AI에 올리지 말고, 상품 정보처럼 공개된 내용만 쓰세요.

다음은 쇼핑몰 상품 정보입니다. 상품마다 이미지 대체 텍스트를 40자 이내 한 문장으로 써 주세요.
- "사진", "이미지"로 시작하지 마세요.
- 구매 판단에 필요한 특징(색상, 소재, 규격)을 앞쪽에 쓰세요.
- 홍보 문구나 검색어 나열은 넣지 마세요.
[여기에 상품명, 색상, 소재, 규격 표 붙여넣기]

초안은 초안일 뿐이에요. 사진과 맞는지는 반드시 담당자가 보고 확정해 주세요.

(주)비젼솔루션의 생각

점검 도구를 쓰다 보면 점수에 마음이 쏠리기 쉬워요. 그런데 대체 텍스트의 목적은 100점을 받는 것이 아니라, 사진이 맡은 일을 글로도 해내는지 확인하는 것입니다. (주)비젼솔루션은 도구를 장부 확인에, 문구를 정하는 일을 운영자의 판단에 맡기라고 권해요. 기계는 빠진 곳을 찾고, 그 사진이 이 페이지에서 무슨 일을 하는지는 우리가 가장 잘 알기 때문이에요.

오늘 10분 실습: 한 페이지만 먼저 점검하세요

여기까지는 직접 해볼 수 있어요. 홈페이지 전체 개편이나 사이트 구조에 맞춘 맞춤 설정은 제작 업체에 맡기는 편이 안전합니다.

방법 1: 설치 없이 해보기 (Chrome)

1. 상품 페이지 하나를 크롬으로 엽니다.
2. 크롬 개발자도구를 열고 "Lighthouse" 패널을 선택합니다.
3. "Generate report"를 누릅니다.
4. 보고서의 접근성 항목에서 Image elements do not have [alt] attributes가 보이면 펼쳐서 해당 이미지를 확인합니다.

방법 2: 명령어로 해보기 (Node 22.19 이상 설치 후)

터미널(윈도우는 PowerShell)에서 한 줄씩 실행하세요.

npm install -g lighthouse
lighthouse https://내홈페이지주소 --only-categories=accessibility --output=html --output-path=./report.html

만들어진 report.html을 브라우저로 열면 같은 보고서를 볼 수 있어요. 결과를 엑셀로 모으고 싶다면 Pa11y를 쓰세요.

npm install -g pa11y
pa11y https://내홈페이지주소 --reporter csv > report.csv

report.csv를 엑셀로 열면 문제 목록이 표로 나옵니다. 주소가 여러 개라면 윈도우 PowerShell에서 다음 한 줄로 반복할 수 있어요.

Get-Content urls.txt | ForEach-Object { pa11y $_ --reporter csv } | Out-File report.csv

방법 3: 명령어 없이 해보기 (WAVE 확장)

1. WAVE 확장 안내 페이지에서 쓰는 브라우저(Chrome·Firefox·Edge)에 맞는 설치 링크를 누릅니다.
2. 점검할 페이지를 열고 주소창 오른쪽의 WAVE 아이콘을 누릅니다.
3. 이미지 옆에 표시된 오류 중 대체 텍스트가 없다는 항목부터 확인합니다.

설치 명령은 개발 환경에 패키지를 추가하니, 회사 PC라면 IT 담당자와 먼저 상의하세요. 고친 뒤에는 같은 명령을 다시 실행해서 목록이 줄었는지 비교하면 끝입니다.

자주 묻는 질문

장식 이미지는 정말 빈 값으로 둬도 되나요?

네. W3C는 장식 이미지에 alt=""를 쓰면 화면 읽기 프로그램이 건너뛸 수 있다고 안내해요. 다만 alt 속성 자체를 빼면 파일명을 읽는 경우가 있으니 속성은 남기세요.

설명은 몇 글자가 적당한가요?

W3C는 이미지의 목적을 가장 간결하게 설명하라고 해요. 짧은 구절이나 한 문장 이상이 필요하면 더 긴 설명 방법을 쓰는 것이 낫습니다. 그래프처럼 복잡한 이미지는 담긴 정보를 페이지의 다른 곳에도 적어 주세요.

도구에서 문제가 없다고 나오면 끝인가요?

아니요. Lighthouse 항목 이름도 [alt] 속성이 있는지를 따지는 것이라서, 문구가 사진과 맞는지는 눈으로 한 번 훑어 주세요.

이 글이 도움이 되셨다면 홈페이지 운영이 막막한 분께 공유해 주세요.