대체 텍스트
alt text
뜻과 개념
이미지의 의미나 기능을 텍스트로 전달하는 설명입니다.
어떻게 작동하나요?
대체 텍스트는 이미지를 볼 수 없을 때 그 이미지가 전달하는 내용이나 기능을 대신 설명하는 텍스트입니다. HTML의 alt 속성으로 제공하며 화면 낭독기 사용이나 이미지 로딩 실패 상황에서 의미가 있습니다. 같은 그림이라도 페이지 안에서 어떤 역할을 하는지에 따라 적절한 문구가 달라집니다.
왜 알아야 하나요?
이미지를 이해하지 못하면 중요한 정보나 버튼의 목적을 놓칠 수 있습니다. 대체 텍스트는 접근성을 높이는 기본 요소이며 검색 시스템이 이미지의 맥락을 이해하는 데도 도움이 됩니다. 키워드를 넣기 위한 숨은 입력란으로 생각하지 않는 것이 중요합니다.
실무에서 적용하는 방법
이미지를 정보 전달용, 기능용, 장식용으로 나누어 판단합니다. 제품 사진은 구분에 필요한 특징을 간결하게 설명하고, 이미지로 된 버튼은 눌렀을 때 하는 일을 전달합니다. 주변 문장과 완전히 중복되는 장식 이미지는 빈 alt가 적합할 수 있습니다.
그래프나 복잡한 도표는 짧은 alt에 모든 수치를 밀어 넣지 말고 본문에 데이터와 결론을 설명합니다. 이미지가 사라진 상태에서 앞뒤 문장과 대체 텍스트를 읽어보면 빠진 의미와 불필요한 반복을 발견하기 쉽습니다.
실무에서는 이렇게 봅니다
검색 성과 그래프에 ‘SEO 그래프’라고만 적으면 변화가 무엇인지 알기 어렵습니다. ‘월별 자연 검색 클릭 변화’처럼 목적을 알리고, 본문에 비교 기간과 주요 변화의 값을 설명하면 정보를 함께 전달할 수 있습니다. 반면 배경에 놓인 장식 화살표에는 긴 설명이 필요하지 않을 수 있습니다.
주의할 점
파일 이름이나 ‘이미지입니다’라는 말만 쓰면 실질적인 대체 정보가 부족합니다. 이미지에 없는 내용을 억지로 설명하거나 같은 키워드를 나열하지 마세요. title 속성은 alt의 대체물이 아니며 둘을 중복하면 일부 보조 기술에서 혼란이 생길 수 있습니다.
자주 묻는 질문
모든 이미지에 긴 설명을 넣어야 하나요?
아닙니다. 전달해야 할 의미와 기능에 맞추어 간결하게 작성합니다. 순수한 장식에는 빈 alt를 사용하고 복잡한 내용은 본문에서 설명할 수 있습니다.
로고를 링크로 쓰면 어떻게 적나요?
주변 텍스트와 함께 링크의 목적을 이해할 수 있게 작성합니다. 예를 들어 홈으로 연결되는 브랜드 로고라면 브랜드와 이동 목적을 명확히 전달하도록 검토하세요.