대체 텍스트(alt)는 이미지가 보이지 않는 상황에서 그 자리를 대신하는 글입니다. 화면 낭독기를 쓰는 사람뿐 아니라 이미지 로딩이 실패한 방문자, 그리고 검색엔진이 같은 글을 읽습니다.
흔한 오해가 하나 있습니다 — 모든 이미지에 설명을 붙이는 것이 좋은 것은 아닙니다. 장식용 이미지에까지 설명이 달리면 낭독기 사용자는 아무 정보도 없는 문장을 계속 듣게 됩니다. 그래서 규칙이 하나가 아니라 둘입니다.
먼저 물을 것 — 이 이미지가 없어지면 정보가 사라지나
왼쪽이라면 alt 를 빈 값으로 둡니다(alt=""). 빈 값은 “이 이미지는 건너뛰어도 된다” 는 명시적인 신호라, 낭독기가 조용히 지나갑니다. 반면 alt 속성을 아예 빼면 도구에 따라 파일 이름을 읽어 주는 일이 생깁니다 — 빈 값과 없는 값은 다릅니다.
정보 이미지는 그림이 아니라 정보를 적습니다
“막대 그래프 이미지” 라고 적는 것은 아무 도움이 되지 않습니다. 그 그래프가 무엇을 말하려고 거기 있는지를 적어야 합니다. 도표라면 결론 한 문장을 쓰고, 값 자체가 중요하다면 이미지 옆에 표나 목록으로 같은 내용을 두는 편이 낫습니다.
아이콘만 있는 버튼은 조금 다릅니다. 여기서 alt 는 그림이 아니라 동작을 적습니다 — 돋보기 아이콘의 대체 텍스트는 “돋보기” 가 아니라 “검색” 입니다. 로고 이미지가 홈으로 가는 링크라면 “로고” 가 아니라 사이트 이름을 적습니다.
같은 이미지라도 놓인 자리에 따라 답이 달라집니다. 제품 목록에서는 제품 이름이면 충분하지만, 상세 페이지에서는 색이나 소재처럼 구매 판단에 쓰이는 정보를 적어야 합니다.
이미지 안의 글자는 어디에도 없습니다
배너나 인포그래픽에 문구를 그려 넣는 것은 디자인 자유도가 높아 자주 쓰는 방법입니다. 다만 그 글자는 검색에도, 보조기술에도, 번역에도 존재하지 않습니다.
해결은 간단합니다. 배경과 장식은 이미지로 두고, 문구는 그 위에 실제 텍스트로 얹습니다. 이렇게 하면 폰트 크기 조절 · 다국어 · 검색 노출이 한꺼번에 해결되고, 앞 회차에서 다룬 대비 기준도 계산이 가능해집니다.
마지막으로, alt 에 키워드를 밀어 넣지 않습니다. 검색 노출을 노린 부자연스러운 문장은 낭독기 사용자에게 그대로 들리고, 검색엔진에도 좋은 신호가 아닙니다.
이미지와 검색 노출의 관계는 SEO 아카이브에서 더 다루고, 사이트 전반의 이미지 · 마크업 상태를 점검하고 싶다면 무료 도구 쪽의 사이트 진단을 먼저 돌려 보셔도 됩니다.
다음 회차
다음 회차는 초점 표시입니다. 기본 초점 링이 디자인과 안 맞아 지우고 싶어지는데, 지우는 순간 키보드 사용자는 자기가 어디 있는지 알 방법을 완전히 잃습니다.