이미지 설명은 모두 똑같지 않습니다: 대체 텍스트 세 가지 판단

설명을 쓰기 전 세 갈래로 판단하세요

1. 클릭 동작이 있는 이미지라면 이동 목적부터 설명합니다.

2. 본문 이해에 필요한 정보 이미지라면 필요한 정보만 설명합니다.

3. 기능도 정보도 없는 순수 장식이라면 빈 alt를 검토합니다.

아래 A·B·C 상황을 이 기준으로 분류해 보세요. 주변 글자와의 중복 여부도 함께 봅니다.

사진을 묘사하기 전에 쓰임새를 봅니다

AI에게 사진 설명을 부탁하면 색상과 사물을 길게 나열하기 쉽습니다. 하지만 웹페이지에서 필요한 설명은 이미지가 놓인 문맥에 따라 달라집니다. 이번에는 실제 사진 분석 대신 세 가지 가상 배치 상황으로 대체 텍스트 초안을 연습합니다.

세 상황을 구분합니다

A. 조리 안내 글에서 완성 상태를 보여주는 사진. 옆 본문에는 고명 배치 설명이 없습니다.

B. 제목 뒤에 놓인 장식용 잎사귀 그림. 내용이나 기능을 전달하지 않습니다.

C. 홈으로 이동하는 로고 링크. 링크 안에 다른 글자는 없습니다.

W3C의 이미지 설명 판단 안내는 정보 전달, 장식, 기능 등 이미지의 역할과 주변 문맥을 고려하도록 안내합니다. 모든 이미지에 같은 길이의 설명을 붙이는 방식으로 해결하지 않습니다.

설명 초안을 씁니다

A의 예시: ‘면 위에 콩나물과 볶은 애호박을 나누어 얹은 비빔국수’. 완성 상태를 설명하는 데 필요한 요소를 중심으로 씁니다. ‘최고의 맛’처럼 사진만으로 알 수 없는 평가는 넣지 않습니다.

B는 순수 장식인 경우 웹 구현에서 빈 대체 텍스트 alt=""를 고려합니다. 단순히 속성을 빠뜨리는 것과는 다릅니다. 같은 잎사귀라도 본문에서 식물 종류를 설명하는 핵심 사진이면 장식으로 처리하면 안 됩니다.

C의 예시: ‘FAMOS 홈’. 그림의 외형보다 클릭했을 때의 기능을 전달합니다. 이미 같은 링크 안에 ‘FAMOS 홈’ 글자가 있다면 중복 읽기가 생기지 않는지 구현 상태를 함께 점검합니다.

AI 요청에는 배치 정보도 넣습니다

복사할 요청문:

“이미지의 보이는 내용은 [내용]이고, 페이지 목적은 [목적], 주변 문장은 [문장], 클릭 기능은 [없음 또는 기능]입니다. 대체 텍스트가 필요한지 먼저 판단하고 짧은 초안을 제안하세요. 보이지 않는 사실은 추정하지 말고, 장식 여부가 불명확하면 질문을 남기세요.”

사진 속 작은 글자가 읽히지 않으면 AI가 추측한 문자열을 설명에 넣지 않습니다. 중요한 글자는 원자료로 확인해 본문에도 제공하는 편이 독자의 정보 접근에 도움이 됩니다.

실제 페이지에서 확인할 것

이번 초안은 웹 접근성 전체 검증 결과가 아닙니다. 게시 시 편집기에 대체 텍스트 입력란이 있는지, 실제 HTML에 반영되는지, 링크 이름이 이해되는지 확인해야 합니다. 긴 데이터 표를 담은 이미지라면 짧은 설명 한 줄만으로 모든 정보를 전달하기 어렵습니다. 본문 표나 자세한 설명이 추가로 필요한지 검토하세요.

페이지에 반영한 뒤 확인

□ 이미지의 역할을 정보·장식·기능으로 구분했다.

□ 주변 본문과 중복되는 설명을 줄였다.

□ 보이지 않는 사실과 홍보 문구를 넣지 않았다.

□ 링크 이미지는 이동 목적이 드러난다.

□ 실제 페이지 반영과 읽기 순서는 게시 단계의 확인 항목으로 남겼다.

이어서 해볼 실습

이미지 부분 수정 명세에서 관련 작업을 이어갈 수 있습니다.

이미지 / 정보·장식·기능 역할 / 문맥 / 대체 텍스트

자료와 작성 방식

AI 보조로 작성한 FAMOS 교육용 가상 예시입니다. 실제 고객 자료나 특정 AI의 실행·성능 측정 결과가 아닙니다.

W3C WAI, An alt Decision Tree: 출처 보기 — 역할·문맥에 따른 대체 텍스트 판단 참고. 확인일 2026-10-06. 세 상황과 문장 예시는 FAMOS 자체 작성.

편집 원칙 · 오류 문의

공유된 첨부파일이 없습니다.