이미지 대체 텍스트

도시 이름과 시간 숫자 패널이 둘러진 야외 세계 시계

ChatGPT로 이미지 대체 텍스트를 작성할 때는 먼저 페이지에서 이미지가 어떤 역할을 하는지 살펴보세요. 이 이미지는 독자가 무엇을 이해하거나 실행하도록 돕나요? 사진만 올리고 설명을 요청하면 겉모습은 그럴듯하게 묘사하면서도 쓰임새는 놓칠 수 있습니다. 주변 내용과 이미지의 역할을 함께 알려주고, 웹사이트에 적용하기 전에 제안을 검토하세요.

이 글의 세계 시계 사진으로 그 차이를 살펴보겠습니다. 야외에 설치된 시계에는 도시 이름과 시간 숫자 패널이 있고, 위에는 금속 지구본이 있습니다. 아래 세 가지는 같은 사진을 서로 다른 용도로 사용한다고 가정한 편집 예시입니다.

이미지가 전달하는 내용을 판단하기

초안을 만들기 전에 W3C WAI의 대체 텍스트 결정 트리를 확인하세요. 정보를 전달하는 이미지에는 그 의미를 담은 대체 텍스트가 필요합니다. 장식용 이미지는 추가 정보를 전달하지 않습니다. 이미지가 링크나 버튼의 이름 역할을 한다면 이동할 곳이나 실행할 동작을 알려주는 문구가 필요합니다.

이 판단은 이미지를 넣은 이유를 아는 작성자가 해야 합니다. 사진이라고 해서 모두 정보 전달용은 아니며, 주변에 글이 있다고 해서 곧바로 장식용이 되는 것도 아닙니다. 2025년 10월 14일 일리노이대학교의 접근성 토론에서도 이 경계와 빈 대체 텍스트에 대한 검사 도구의 경고를 두고 혼란이 논의됐습니다.

실제 이미지와 페이지 맥락 함께 전달하기

파일 이름으로 이미지를 추측하게 하기보다 실제 이미지를 첨부하세요. OpenAI의 이미지 입력 안내는 이미지를 첨부하고 무엇을 살펴볼지, 어떤 결과가 필요한지 설명하도록 안내합니다. 페이지의 목적, 독자, 작성 언어, 주변 텍스트와 함께 이미지가 링크나 버튼으로 쓰이는지도 알려주세요. 링크라면 목적지와 같은 링크 안에 표시되는 문구도 제공하세요.

이미지의 역할 제안, 짧은 판단 이유, 정확한 alt 속성, 확인이 필요한 부분을 요청하세요. 실제 사진을 보며 검토하고, 근거 없이 추측한 장소·날짜·인물 정보나 작은 시계 표기의 판독을 그대로 받아들이지 마세요. ChatGPT 이미지 대체 텍스트 프롬프트를 사용하면 필요한 맥락을 빠짐없이 전달하기 쉽습니다.

같은 사진을 세 가지 용도로 사용하기

1. 시계의 구조를 설명하는 글

시계가 어떻게 구성되어 있는지 설명하는 글이라고 가정해 보세요. 도시 이름과 숫자 패널은 이 글에 필요한 시각 정보입니다. WAI의 정보 전달용 이미지 안내에 따라, 도시나 현재 시간을 추측하지 않고 구조를 전달하는 대체 텍스트를 제안할 수 있습니다.

alt="도시 이름과 시간 숫자 패널이 둘러진 야외 세계 시계"

2. 회의 알림에 분위기를 더하는 사진

같은 사진이 회의 알림에 사용된다고 가정해 보세요. 제공된 글에 회의 정보가 모두 있고, 사진은 분위기만 더하며 정보나 기능을 추가하지 않습니다. WAI의 장식용 이미지 안내에 따르면 이 경우에는 빈 대체 텍스트를 사용할 수 있습니다.

alt=""

alt 속성을 생략하지 말고 따옴표 사이를 완전히 비워 두세요. 공백도 넣지 않습니다. 이는 이 알림에서 사진이 하는 역할에 따른 판단입니다. 시계 사진이나 주변 텍스트 유무에 일괄 적용하는 규칙은 아닙니다.

3. 사진만으로 가이드에 연결하는 링크

이번에는 사진만 해외 회의 시간 가이드로 연결되며, 링크에 보이는 문구나 별도의 접근 가능한 이름이 없다고 가정해 보세요. WAI의 기능성 이미지 안내에 따라 이동할 곳을 알려줍니다.

alt="해외 회의 시간 가이드 읽기"

같은 링크 요소 안에 동일한 의미의 문구가 표시된다면 이미지의 대체 텍스트를 비워 반복을 줄일 수 있습니다. 이 경우에도 링크에는 그 문구를 통해 이름이 남아 있어야 합니다.

적용한 이미지와 실제 페이지 확인하기

검토한 대체 텍스트는 해당 페이지의 이미지 사용 사례에 맞게 적용하세요. 미디어 라이브러리의 한 값이 용도가 다른 여러 페이지에 재사용될 수 있습니다. CMS의 입력란을 비웠다고 해서 실제 페이지에 빈 alt 속성이 생성된다고 보장할 수도 없습니다.

렌더링된 페이지에서 alt 속성과 링크 또는 버튼의 접근 가능한 이름을 확인하세요. 가능하다면 키보드 탐색과 스크린 리더 출력도 점검하세요. 목적에 맞게 간결하게 쓰고 관련 없는 검색 키워드는 빼세요. 이 글은 단순한 사진을 중심으로 설명합니다. 중요한 텍스트나 복잡한 차트 정보에는 동등한 내용을 담은 본문 또는 더 긴 설명이 함께 필요할 수 있습니다. 유용한 초안도 최종 HTML과 페이지 맥락에 대한 사람의 검토를 거쳐야 합니다.

사진: feinschliff / Unsplash.

Similar Posts