대체 텍스트 Alt Text
대체 텍스트(Alt Text)는 img 태그의 alt 속성에 넣어 이미지를 글로 설명하는 짧은 텍스트로, 흔히 '알트 태그'라고도 부릅니다. 원래 주목적은 접근성으로, 눈으로 이미지를 볼 수 없는 사용자를 위해 스크린리더가 이 글을 읽어줍니다. 동시에 구글이 이미지의 내용을 파악하는 신호로 쓰여 이미지 검색에도 영향을 줍니다.
대체 텍스트란 무엇인가
대체 텍스트(Alt Text)는 img 태그의 alt 속성에 넣어, 이미지를 글로 짧게 설명하는 텍스트입니다. 흔히 '알트 태그'라고도 부릅니다. 쓰임은 크게 세 가지입니다.
- 접근성(원래 주목적) - 눈으로 이미지를 볼 수 없는 사용자를 위해 스크린리더(화면을 소리로 읽어주는 프로그램)가
alt에 적힌 글을 소리로 읽어주거나 점자로 바꿔 전달합니다. - 로딩 실패 시 대체 표시 - 이미지가 깨지거나 불러오지 못하면 그 자리에 대체 텍스트가 대신 나타납니다.
- 이미지 검색 - 구글이 이미지의 내용을 파악하는 신호로 씁니다.
웹 접근성 세계 표준을 만드는 W3C는 모든 이미지가 그것이 담은 정보나 기능을 설명하는 대체 텍스트를 가져야 다양한 장애를 가진 사람도 같은 정보를 얻는다고 규정합니다. 이 텍스트는 소리로 읽히거나 점자로 변환됩니다. W3C
<img src="dalmatian-puppy.jpg" alt="공을 물어오는 달마시안 강아지">
알트 '태그'가 아니라 alt '속성'
실무에서 '알트 태그'라는 말이 흔하지만 엄밀히는 정확하지 않습니다. 태그는 <img>이고, alt은 그 태그 안에 들어가는 여러 속성 가운데 하나입니다. 구글 공식 문서도 W3C도 일관되게 'alt 속성'이라 부릅니다. Google 공식 뜻은 서로 통하니 굳이 고쳐 부를 필요는 없지만, 정확한 이름은 alt 속성입니다.
구글은 대체 텍스트를 어떻게 쓰나
구글은 alt 텍스트를 컴퓨터 비전(이미지를 분석하는 기술)과 그 페이지의 내용과 함께 사용해 이미지가 무엇에 관한 것인지 파악합니다. 즉 alt은 이미지 주제를 이해하는 핵심 신호 가운데 하나입니다. Google 공식
구글은 alt만 보지 않습니다. 파일명, 주변 텍스트, 캡션, 이미지 제목까지 함께 봅니다. 그래서 파일명도 IMG00023.JPG보다 my-new-black-kitten.jpg처럼 내용을 담아 짓고, 이미지는 관련 있는 글 가까이에 두라고 안내합니다. Google 공식
작성 원칙은 페이지 맥락에 맞게 유용하고 정보가 풍부하게, 키워드를 알맞게 담아 서술하는 것입니다. 반대로 alt을 키워드로 가득 채우는 행위(키워드 스터핑)는 사용자 경험을 해치고 사이트가 스팸으로 간주될 수 있어 피하라고 명시합니다. Google 공식
다만 대체 텍스트가 순위에 미치는 영향은 검색 종류에 따라 다릅니다. 구글 이미지 검색에서는 순위 요소지만, 일반 웹 검색에서는 별도의 순위 요소가 아닙니다. 구글의 존 뮬러는 이미지 검색에 신경 쓰지 않는다면 웹 검색 관점에서 alt을 크게 걱정할 필요가 없으며, alt이 마법 같은 SEO 특효약은 아니라고 말했습니다. Search Engine Journal
잘 쓰는 법
접근성과 검색이라는 두 목적을 동시에 만족시키는 지점을 찾는 것이 핵심입니다. 존 뮬러도 이 두 측면의 균형이 까다로운 대목이라고 짚었습니다. Search Engine Journal 다음 원칙을 따르면 대부분 해결됩니다.
- 구체적으로, 그러나 간결하게 서술합니다. W3C는
alt을 이미지의 목적을 담은 가장 짧은 설명으로 쓰라고 안내합니다. W3C 구글의 예시로 보면alt="puppy"(강아지)보다alt="Dalmatian puppy playing fetch"(공을 물어오는 달마시안 강아지)가 더 좋은 대체 텍스트입니다. Google 공식 - 길이는 짧게 유지합니다. 업계에서는 125자 이내가 널리 통용됩니다. 스크린리더 사용자는 낭독 중간을 멈추고 건너뛸 수 없어, 길면 성가시기 때문입니다. Semrush
- '이미지:', '사진:', '아이콘:' 같은 접두어는 넣지 않습니다. 스크린리더와 구글이 이미 그것이 이미지임을 알기 때문입니다. W3C Ahrefs 단, 대상이 정말 인화된 사진 한 장일 때는 예외로 그 사실을 밝혀도 됩니다. Semrush
- 키워드를 억지로 욱여넣지 않습니다. 먼저 이미지를 정확하고 구체적으로 서술하고, 설명에 자연스럽게 맞을 때만 관련 키워드를 한둘 담습니다. Semrush
- 맥락을 반영합니다. 같은 이미지라도 페이지의 목적에 따라 알맞은 대체 텍스트가 달라집니다.
alt은 보이는 그대로의 직역이 아니라, 그 이미지가 전하려는 의미를 담아야 합니다. W3C - 장식용 이미지는 빈
alt(alt="")로 둡니다. 내용에 정보를 더하지 않는 순수 장식 이미지는 빈 대체 텍스트를 주어 스크린리더가 건너뛰게 합니다. 속성을 아예 빼면 일부 스크린리더가 파일명을 대신 읽어버리므로, 지우지 말고alt=""로 비워 두는 것이 맞습니다. W3C - 이미지 유형에 맞춥니다. 링크나 버튼 안의 기능적 이미지는 겉모습이 아니라 기능(예: 프린터 아이콘은 '인쇄')을, 그래프 같은 복잡한 이미지는 그 데이터의 완전한 텍스트 대응물을 제공합니다. 판단이 어려우면 W3C의 'alt 결정 트리'를 따라, 링크·버튼 여부 → 페이지에 의미를 더하는지 → 순수 장식인지를 순서대로 확인합니다. W3C
흔한 실수
alt자체를 빠뜨림 - 속성이 없으면 일부 스크린리더가 파일명을 그대로 읽어 사용자를 혼란스럽게 합니다. W3C- 키워드 스터핑 -
alt="puppy dog baby dog pup pups puppies..."처럼 같은 뜻을 반복해 채우는 방식으로, 구글이 스팸 신호로 봅니다. Google 공식 - '이미지:', '사진:' 류 군더더기 접두어 - 대체로 불필요합니다. Ahrefs
- 장식용 이미지에 굳이 설명을 넣음 - 소리로 읽을 때 잡음이 되어 사용자를 방해합니다. W3C
alt대신title속성에 의존 -title은 보통 마우스를 올렸을 때만 뜨는 말풍선이라 키보드·터치 사용자는 볼 수 없습니다.title은alt을 대신할 수 없고, 같은 글을alt과title에 중복하면 스크린리더가 두 번 읽어 혼란을 줍니다. 중요한 정보는alt이나 본문에 넣습니다. MDN