Alt 텍스트: SEO 및 접근성 가이드

개요

Alt 텍스트(이미지의 <img> 요소에 있는 alt 속성)는 주로 접근성 목적과 이미지가 로드되지 않을 때의 대체 설명으로 사용하는 짧은 텍스트 설명입니다. 스크린 리더는 시각장애나 저시력 사용자에게 Alt 텍스트를 제공하고, 검색 엔진은 이미지의 주제에 관한 여러 텍스트 신호 중 하나로 alt 텍스트를 사용합니다. Alt 텍스트는 이미지에 대해 파싱 가능한 텍스트를 제공해 색인화에 도움을 주지만, 순위와 가시성에 영향을 주는 여러 신호 중 하나에 불과합니다.

이미지가 의도된 대상에게 전달하는 정보를 설명하는 Alt 텍스트를 작성하세요. 순수하게 장식적인 이미지에는 빈 alt 속성(<img src="..." alt="">)을 사용해 스크린 리더가 이를 건너뛰도록 하세요. 차트, 인포그래픽, 다이어그램처럼 복잡한 시각적 자료에는 인접한 텍스트 요약을 제공하거나 ARIA/HTML 기법을 사용해 더 긴 설명을 제공하세요.

단계별 가이드

1) 이미지의 역할을 파악하세요: 정보 제공(informative), 기능성(예: 버튼), 또는 장식용인지 판단합니다. 정보 제공 및 기능성 이미지는 설명적인 Alt 텍스트가 필요하고, 장식용 이미지는 빈 alt 속성을 사용해야 합니다.

2) 핵심 내용을 간결하게 설명하세요: 사용자가 이미지에서 알아야 할 정보를 작성합니다. Alt 텍스트는 간결하게 유지하세요—주요 아이디어를 한 문장이나 구로 전달하는 것을 목표로 합니다. 표준 정보성 Alt 예시: <img src="/photos/harbor.jpg" alt="일출에 바위가 많은 항구에 정박한 빨간 낚시배">.

3) 키워드 스태핑과 불필요한 중복 문구를 피하세요. “image of”나 “picture of” 같은 표현을 앞에 붙이지 마세요—스크린 리더가 이미지 역할을 이미 알립니다. 텍스트는 검색 엔진크롤러.

4) 기능성 이미지와 컨트롤 처리: 이미지가 링크나 버튼인 경우 수행하는 동작을 설명하세요. 예: <img src="/icons/download.svg" alt="제품 데이터 시트 다운로드">. 컨트롤에 가시 텍스트가 있는 경우 alt는 그 목적과 일치시키거나, 텍스트가 이미 동작을 전달하면 빈 값으로 두세요.

5) 복잡한 이미지에는 더 긴 설명을 제공하세요: 차트나 인포그래픽에 대해 인접한 캡션, 링크된 상세 설명, aria-describedby 또는 눈에 보이는 HTML 텍스트를 사용해 확장합니다. 인쇄물 수준의 세부사항(데이터 테이블, 축 레이블 등)은 페이지 본문에 핵심 정보를 포함하세요.

6) 일관된 편집 규칙을 사용하세요: 기여자를 위한 간단한 스타일 가이드(길이 목표, 약어 사용 시점, 언어 규칙 등)를 만들고 템플릿이나 CMS 필드에 적용해 대규모로도 Alt 텍스트가 신뢰성 있게 수집되도록 하세요.

HTML 예시

설명형 이미지: <img src="https://example.com/park.jpg" alt="도시 공원에서 빨간 연을 날리는 아이">. 장식용 이미지: <img src="/decorative-divider.png" alt="">. 링크로 사용되는 기능성 이미지: <a href="/download"><img src="/icons/pdf.svg" alt="보고서 PDF 다운로드"></a>.

Alt 텍스트 검증: 기술 체크리스트

alt 속성 존재 여부 — 확인 위치: view-source, Chrome DevTools Elements 또는 curl(전체 HTML을 가져오려면 -I 없이 curl 사용) — 의미 있는 모든 <img>에 alt 속성이 있고 장식용 이미지는 alt=""을 사용하는 경우 통과합니다.

JS로 삽입된 이미지의 렌더된 DOM — 확인 위치: Chrome DevTools Elements(최종 DOM 검사) — 사용자에게 보이는 이미지가 렌더된 DOM에 적절한 Alt 텍스트를 포함하면 통과합니다.

접근성 감사 — 확인 위치: Chrome DevTools의 Lighthouse 또는 자동화된 접근성 도구 — 감사에서 정보성 이미지에 대한 누락된 Alt 텍스트가 보고되지 않고 의도된 장식용 이미지만 표시되면 통과합니다.

사람이 읽을 수 있는지 확인 — 확인 위치: 콘텐츠 편집자 샘플 검토 또는 스크린 리더(NVDA, VoiceOver) 테스트 — Alt 텍스트가 보조 기술 사용자에게 시각적 정보와 동일하게 유용한 정보를 전달하면 통과합니다.

페이지의 인덱스 등록 여부 — 확인 위치(자신의 페이지의 경우): Google Search Console URL Inspection; 제3자 페이지는 site: 연산자로 대략 확인 — 페이지가 크롤링 가능(즉, robots.txt 또는 noindex로 차단되지 않았는지)이고 URL Inspection이 해당 페이지를 Google이 인식하고 있음을 보여야 합니다. 참고: site:는 단지 대략적인 표시일 뿐이며, 소유한 페이지에 대해서는 URL Inspection이 권위적입니다.

실무 도구 팁

특정 사용자 에이전트로 페이지 HTML을 가져오려면 curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html 을 사용하세요. 본문이 필요하면 -I를 사용하지 마세요. 저장한 파일을 텍스트 편집기에서 열거나 DOM 파서를 실행해 <img> 태그와 alt 속성을 찾으세요.

Chrome DevTools → Lighthouse에서 Lighthouse를 실행해 일반적인 접근성 문제를 확인하고, 스크린 리더(NVDA(Windows), VoiceOver(macOS))로 사용자 경험을 테스트하세요.

이미지를 참조하는 구조화 데이터(예: Product 또는 Recipe 스키마)를 사용하는 경우, 마크업을 Rich Results Test 또는 Schema Markup Validator로 검증해 JSON-LD에서 참조된 이미지가 존재하고 접근 가능한지 확인하세요.

일반적인 문제

정보성 이미지에 Alt 텍스트가 없는 경우. 이는 접근성에 해를 주며 시각장애인에게 페이지의 시각적 정보를 제공하지 못합니다.

키워드 스태핑: Alt 속성에 대상 키워드나 브랜드명을 부자연스럽게 반복하는 경우. 이는 경험을 저하시킬 수 있고 검색 엔진에 의해 무시될 수 있습니다.

파일명이나 일반적인 문구(예: "image1.jpg", "picture")를 Alt 텍스트로 사용하는 것 — 보조 기술이나 색인화에 의미가 없습니다.

중요한 정보를 위해 title 속성에 의존하는 것; 많은 스크린 리더가 title을 일관되게 제시하지 않습니다.

Alt 텍스트만이 이미지 순위를 결정한다고 믿는 것. Alt 텍스트는 검색 엔진이 이미지를 이해하는 데 도움이 되지만 색인화 및 가시성은 페이지 컨텍스트, structured data, 크롤링 가능성 및 기타 신호에 달려 있습니다.

이미지가 클라이언트 측에서 JavaScript로 삽입되는 경우 작성자가 렌더된 DOM에 alt 속성을 포함하는 것을 잊는 경우가 있습니다; 항상 서버 측 HTML뿐 아니라 최종 DOM을 검사하세요.

Technical SEO Guide 읽기

자주 묻는 질문

Q: Alt 텍스트는 어느 정도 길어야 하나요? A: 이미지의 목적을 전달하는 간결한 설명을 목표로 하세요. 보통 한 문장이나 짧은 구가 적당하며, 복잡한 시각 자료는 페이지의 다른 곳에 더 긴 접근 가능한 설명을 제공하세요.

Q: Alt 텍스트가 SEO 순위에 영향을 주나요? A: Alt 텍스트는 색인화와 이미지 검색 관련성에 도움이 되는 텍스트 신호를 제공하지만, 그 자체로 순위를 결정하지는 않습니다. 순위는 페이지 관련성, structured data, 크롤링 가능성 및 전체 콘텐츠 품질 등 여러 신호에 의해 결정됩니다.

Q: 장식용 이미지에도 Alt 텍스트가 필요하나요? A: 아니요. 장식용 이미지는 빈 alt 속성(alt="")을 사용해 스크린 리더가 무시하도록 해야 접근성 경험에 불필요한 잡음을 주지 않습니다.

Q: 자동화 도구가 수용 가능한 Alt 텍스트를 생성할 수 있나요? A: CMS나 이미지 인식의 자동 제안이 도움이 될 수 있지만, 게시하기 전에 기계 생성 Alt 텍스트를 정확성, 명확성, 개인정보 문제 관점에서 항상 검토하고 편집하세요.

Q: CSS 배경 이미지의 경우는요? A: CSS 배경 이미지는 <img> 요소로 노출되지 않으므로 alt 속성이 없습니다; 배경 이미지에 포함된 정보성 내용은 HTML로 제공해 접근 가능하도록 해야 합니다.

Technical SEO는 유기적 성장의 한 부분입니다. 주제별 권위를 구축하려면 양질의 backlinks와 색인화된 접근 가능한 콘텐츠가 필요합니다—퍼블리셔의 색인화 가능성과 편집 맥락을 우선시하는 검증된 마켓플레이스와 파트너십을 고려하세요.양질의 backlinks로 권위를 쌓으세요