[Frontend] 이미지의 alt 속성, 단순 설명 그 이상

들어가며

이미지를 HTML에 삽입할 때 <img> 태그의 alt 속성은 자칫 사소하게 보일 수 있지만,
사실은 접근성, 사용자 경험(UX), 검색 엔진 최적화(SEO)에 있어 매우 중요한 역할을 담당합니다. 이번 글에서는 alt 속성이 어떤 목적을 가지는지, 언제 어떻게 사용해야 하는지 예시와 함께 살펴보겠습니다.

목차

1. alt 속성이란?
2. alt 속성의 주요 목적
   • 1) 이미지 로드 실패 시 대체 텍스트
   • 2) 접근성 향상 (스크린 리더)
   • 3) SEO 최적화
3. alt 속성 작성 시 주의할 점
4. 실제 예시
5. 정리

1. alt 속성이란?

alt는 alternative text의 줄임말로, 이미지가 로딩되지 않을 경우 대체 텍스트를 보여주기 위한 속성입니다.

<img src="profile.jpg" alt="정우의 프로필 사진" />

그러나 단순한 “대체 설명” 이상의 역할을 수행합니다.

2. alt 속성의 주요 목적

✅ 1) 이미지 로드 실패 시 대체 텍스트

네트워크 오류나 이미지 경로가 잘못된 경우, 이미지를 불러올 수 없습니다. 이때 alt 속성이 있다면 사용자는 이미지 대신 설명을 볼 수 있습니다.

<img src="not-found.jpg" alt="제품 이미지 로딩 실패: 스마트폰 모델 A" />

✅ 2) 접근성 향상 (스크린 리더)

시각 장애 사용자는 화면을 스크린 리더(screen reader)로 탐색합니다. 스크린 리더는 alt 속성에 정의된 내용을 음성으로 읽어주기 때문에, 이미지의 의미를 전달하고자 한다면 반드시 alt 속성을 작성해야 합니다.

<img src="graph.png" alt="2024년 매출 성장 추이 그래프" />

의미 없는 이미지에 alt를 넣을 경우 오히려 방해가 될 수 있으므로, 그런 경우는 빈 alt 속성을 사용해 건너뛰도록 설정합니다.

<img src="decorative-line.png" alt="" />

✅ 3) SEO 최적화

검색 엔진은 이미지를 시각적으로 분석하지 못하기 때문에, alt 속성의 내용을 통해 이미지의 내용을 이해합니다.

• 이미지 검색에 노출될 가능성이 높아짐
• 관련 키워드를 포함하면 검색 최적화에 도움

<img src="seo-guide.jpg" alt="2025년 SEO 가이드 PDF 썸네일" />

3. alt 속성 작성 시 주의할 점

항목	설명
✅ 의미 있는 이미지	콘텐츠 전달 목적이라면 alt 작성 필수
❌ 장식용 이미지	alt=""로 비워서 스크린 리더가 건너뛰게
❌ 중복된 텍스트	이미지 바로 옆에 동일한 설명 텍스트가 있다면 alt는 생략 가능
🔑 핵심 키워드 포함	SEO를 고려한다면 관련 키워드 자연스럽게 포함

📌 alt 속성은 짧고 명확하게 쓰는 것이 좋습니다. 이미지 자체가 설명이 필요한 경우에는 별도의 figcaption 등을 사용하는 것이 더 바람직합니다.

4. 실제 예시

🎯 의미 있는 이미지

<!-- 제품 상세 페이지 썸네일 -->
<img src="product-a.jpg" alt="스마트폰 A - 블랙 색상, 128GB 모델" />

🎨 장식용 이미지

<!-- 구분선 이미지 -->
<img src="divider.png" alt="" />

💡 대체 텍스트가 필요한 경우

<!-- 실패 시 대체 설명 제공 -->
<img src="profile.jpg" alt="사용자 프로필 사진" />

5. 정리

목적	설명
대체 텍스트	이미지 로드 실패 시 사용자에게 설명 제공
접근성 향상	시각 장애 사용자에게 이미지 설명 전달
SEO 기여	검색 엔진이 이미지를 이해하고 색인할 수 있도록 도움

꼭 모든 이미지에 alt를 작성할 필요는 없습니다. 하지만 의미가 있는 이미지라면 정확하고 유의미한 텍스트로 작성하는 것이 중요합니다.

참고 자료

• MDN Web Docs -