대체 텍스트 (Alt Text)
Alt Text(대체 텍스트)란 HTML `<img>` 태그의 `alt` 속성에 작성하는 이미지 설명 문구로, 이미지를 표시할 수 없거나 시각적으로 확인할 수 없는 상황에서 이미지 대신 전달되는 텍스트입니다.
Alt Text(대체 텍스트)란 HTML <img> 태그의 alt 속성에 작성하는 이미지 설명 문구로, 이미지를 표시할 수 없거나 시각적으로 확인할 수 없는 상황에서 이미지 대신 전달되는 텍스트입니다.
왜 중요한가
Alt Text는 접근성과 SEO 두 가지 측면에서 핵심적인 역할을 합니다.
첫째, 스크린 리더는 alt 속성값을 음성으로 출력하여 시각 장애인 사용자가 이미지의 내용을 파악할 수 있도록 돕습니다. WCAG(웹 콘텐츠 접근성 가이드라인) Level A 기준에서도 모든 비텍스트 콘텐츠에 대체 텍스트를 제공하도록 요구하고 있습니다.
둘째, 검색엔진 크롤러는 이미지를 직접 "볼" 수 없기 때문에 alt 속성을 통해 이미지의 주제를 파악합니다. Google은 alt text를 이미지 검색의 랭킹 시그널로 공식 확인하고 있으며, 적절한 Alt Text가 작성된 이미지는 Google 이미지 검색과 Google Lens 등 시각 검색 도구에 노출될 가능성이 높아집니다.
셋째, ChatGPT, Perplexity 등 생성형 AI도 이미지를 분석할 때 Alt Text를 중요한 정보원으로 활용하고 있어, GEO(Generative Engine Optimization) 관점에서도 중요성이 커지고 있습니다.
작성 가이드
- 구체적으로 묘사합니다. "이미지가 보이지 않는 사용자에게 어떤 정보가 누락되는가?"를 기준으로 작성합니다.
- 125자 이내로 간결하게 유지합니다. 대부분의 스크린 리더는 약 125자 이후의 Alt Text를 잘라내기 때문입니다.
- 핵심 키워드를 자연스럽게 포함합니다. 페이지 본문의 맥락과 일치하는 키워드를 1~2개 녹여 넣습니다.
- "이미지", "사진", "그림" 등의 접두어를 생략합니다. 스크린 리더가 이미
<img>요소임을 사용자에게 알려주므로 중복됩니다. - 장식용 이미지는 빈 alt(
alt="")를 사용합니다. 콘텐츠 전달 목적이 없는 장식 이미지에 설명을 넣으면 오히려 스크린 리더 사용자에게 불필요한 소음이 됩니다.
좋은 예시 vs 나쁜 예시
| 구분 | Alt Text | 이유 |
|---|---|---|
| 좋은 예시 | 흰 접시 위에 놓인 수제 비건 초콜릿 케이크 | 구체적이고 간결하며, 이미지의 핵심 정보를 전달합니다 |
| 좋은 예시 | 2025년 월별 오가닉 트래픽 추이를 보여주는 꺾은선 그래프 | 차트의 종류와 데이터 주제를 명확히 설명합니다 |
| 나쁜 예시 | 케이크 | 너무 모호하여 어떤 케이크인지 알 수 없습니다 |
| 나쁜 예시 | 케이크 사진 이미지 디저트 맛있는 케이크 초콜릿 케이크 수제 케이크 비건 케이크 | 키워드를 나열한 키워드 스터핑으로, 스팸으로 판정될 수 있습니다 |
| 나쁜 예시 | IMG_20250301_142055.jpg | 파일명을 그대로 넣은 것으로, 사용자와 검색엔진 모두에게 무의미합니다 |
자주 하는 실수
- 키워드 스터핑: Alt Text에 키워드를 반복적으로 나열하는 것은 Google이 스팸으로 간주할 수 있으며, 사용자 경험을 심각하게 해칩니다. 키워드는 문맥에 맞게 자연스럽게 포함하는 것이 원칙입니다.
- 모든 이미지에 동일한 Alt Text 사용: 페이지 내 여러 이미지에 같은 설명을 복사·붙여넣기 하면 검색엔진이 중복 콘텐츠로 판단할 수 있습니다. 각 이미지의 고유한 내용을 반영해야 합니다.
- Alt Text를 아예 생략: alt 속성 자체를 누락하면 스크린 리더가 파일명을 읽어주게 되어 접근성이 크게 저하됩니다. 장식 이미지라도 빈 alt 속성(
alt="")은 반드시 포함해야 합니다. - AI 생성 Alt Text를 검토 없이 사용: AI 도구가 제안하는 Alt Text는 맥락을 충분히 반영하지 못할 수 있습니다. 반드시 사람이 검토하고 페이지 콘텐츠에 맞게 최적화하는 과정이 필요합니다.
- 본문 텍스트를 그대로 복사: 이미지 바로 옆에 있는 캡션이나 본문 내용을 Alt Text에 그대로 넣으면 스크린 리더 사용자가 같은 내용을 두 번 듣게 됩니다. Alt Text는 본문과 보완 관계를 이루도록 작성해야 합니다.
관련 인블로그 게시물
inblog에서 활용하기
inblog 에디터에서 이미지 삽입 시 Alt Text 입력 필드를 제공하며, 미입력 시 경고를 표시합니다.