SVG 검색 엔진 최적화와 웹 접근성: title, desc 태그와 ARIA 라벨 활용

구글 검색 로봇은 사이트의 이미지 정보와 신뢰도를 읽어 검색 노출 순위(SEO)를 결정합니다. 또한 웹 표준 접근성 지침에 따라 시각 장애인의 스크린 리더 기기가 이미지를 올바르게 해석할 수 있도록 보장해야 합니다. SVG 내장 시맨틱 요소를 적극적으로 배치하여 접근성과 검색 노출 점수를 극대화하는 노하우를 공유합니다.

1. SVG 접근성의 핵심: title과 desc 노드

SVG 루트 바로 하단에 배치하는 내장 메타데이터 텍스트입니다.

<title>: 그래픽의 대표 이름을 제공합니다. 데스크톱 브라우저에서 마우스를 갖다 대면 브라우저 내장 툴팁으로 표기됩니다.
<desc>: 스크린 리더기가 시각 장애 유저에게 읽어줄 그래픽의 상세 묘사를 기재합니다.

2. 접근성(A11y) 보증을 위한 표준 마크업 템플릿

<svg role="img" aria-labelledby="svg-title svg-desc" width="100" height="100" viewBox="0 0 100 100">
  <title id="svg-title">서비스 실시간 모니터링 그래프</title>
  <desc id="svg-desc">서버 응답 속도 추이를 나타내는 꺾은선 꺾임 차트</desc>
  
  <path d="M 10 90 L 30 50 60 70 90 20" fill="none" stroke="#2563eb" stroke-width="3" />
</svg>

role="img" 지정: 브라우저에 이 XML 구조가 단순 노드들의 집합이 아닌 하나의 '의미 있는 이미지'임을 각인시킵니다.
aria-labelledby: 스크린 리더기가 `title`과 `desc`에 매핑된 ID를 추적해 읽도록 유도합니다.

"웹 표준 접근성을 올바르게 준수한 SVG는 구글 라이트하우스(Lighthouse) 접근성 검증 점수 100점을 획득하는 가장 확실한 지름길입니다."

3. 단순 장식용 SVG 처리법

단순 장식용 아이콘이나 의미 없는 배경 무늬 SVG는 스크린 리더가 일일이 읽어 유저에게 소음 공해를 일으키지 않도록 `aria-hidden="true"` 속성을 추가하여 스크린 리더의 탐색 범위에서 제외해 주는 것이 웹 접근성 모범 규범입니다.

4. 요약: 다정한 웹 디자인의 초석

오늘부터 사이트 내의 모든 중요한 SVG에 title과 desc, ARIA 라벨을 입혀 구글 로봇과 사회적 약자 모두에게 친화적인 명품 웹 아카이브를 구축해 보십시오.