Alt Text 작성법: 장식·정보·기능 이미지와 파일명·캡션 구분
대체 텍스트, 파일명, 캡션, 이미지 제목과 URL의 역할을 구분해 접근성과 이미지 검색 문맥을 동시에 개선하는 실무 가이드입니다.
Alt Text는 이미지 키워드 순위를 높이기 위한 입력란이 아니라 이미지를 볼 수 없는 사용자에게 같은 정보나 기능을 전달하는 대체 텍스트입니다. 모든 이미지에 긴 설명을 넣는 것도, 모든 alt를 비우는 것도 정답이 아닙니다. 이미지가 현재 페이지에서 어떤 역할을 하는지 먼저 판단합니다.
이미지 유형별 alt 결정표
| 이미지 유형 | alt 처리 | 예시 |
|---|---|---|
| 장식 이미지 | alt="" | 구분선·배경 장식 |
| 정보 사진·도해 | 핵심 의미를 간결하게 설명 | “모바일 LCP가 4.2초인 보고서 화면” |
| 기능 이미지 | 모양보다 동작·목적 설명 | “검색”, “파일 다운로드” |
| 링크 이미지 | 링크 목적지 설명 | “INXSEO 홈으로 이동” |
| 복합 차트 | 짧은 alt + 본문·표에 전체 데이터 | 추세 요약 후 데이터 표 제공 |
좋은 대체 텍스트의 작성 순서
- 이미지가 없으면 독자가 놓치는 정보나 기능을 적습니다.
- 주변 제목·캡션·본문에서 이미 설명한 내용은 반복하지 않습니다.
- “이미지”, “사진” 같은 불필요한 말을 기본적으로 생략합니다.
- 중요한 정보와 기능을 문장 앞부분에 둡니다.
- 길어지면 상세 설명을 본문·표·별도 링크로 옮깁니다.
키워드는 문맥에 있을 때만 사용합니다
이미지가 실제로 “워드프레스 robots.txt 설정 화면”을 보여 준다면 해당 용어를 alt에 넣을 수 있습니다. 그러나 모든 이미지에 같은 키워드를 반복하거나 보이지 않는 상품명·지역명을 추가하면 접근성을 해치고 스팸처럼 보일 수 있습니다.
파일명·캡션·제목의 역할은 다릅니다
| 필드 | 주요 역할 | 작성 기준 |
|---|---|---|
| 파일명 | 관리·발견의 약한 단서 | 짧고 설명적, 버전·크기 구분 |
| alt | 이미지 정보·기능의 대체 | 현재 문맥에서 필요한 의미 |
| 캡션 | 모든 사용자에게 보이는 설명·출처 | 해석·출처·주의사항 |
| title 속성 | 보조 정보 | 핵심 정보 전달에 의존하지 않음 |
| 미디어 설명 | CMS 내부 관리 또는 첨부 페이지 | 사이트 구조에 맞게 사용 |
잘못된 예와 수정
- 나쁨:
alt="SEO SEO 이미지 SEO 구글 상위노출"
수정:alt="Search Console에서 페이지별 클릭과 노출을 비교한 표" - 나쁨: 장식 파란 곡선에
alt="파란색 아름다운 장식"
수정:alt="" - 나쁨: 돋보기 버튼에
alt="돋보기 아이콘"
수정: 버튼에 접근 가능한 이름 “검색” 제공
복합 이미지와 스크린샷
차트의 모든 수치를 alt 하나에 넣지 않습니다. 핵심 결론을 짧게 적고 동일 데이터를 HTML 표나 본문에 제공합니다. 스크린샷은 화면 전체를 묘사하기보다 독자가 찾아야 하는 메뉴·오류·변경 결과를 설명합니다.
발행 전 검사
- 이미지를 끄거나 스크린 리더로도 정보 흐름이 이해되는가
- 장식 이미지에 빈 alt가 있는가
- 링크·버튼 이미지의 목적이 명확한가
- 본문과 alt가 불필요하게 반복되지 않는가
- 키워드·상품명을 이미지에 없는 내용까지 넣지 않았는가
언어가 다른 페이지에서는 alt도 현지화합니다
같은 이미지라도 페이지 언어가 다르면 대체 텍스트도 해당 언어와 문맥에 맞춰 제공합니다. 원문 alt를 기계적으로 복사해 주변 콘텐츠와 언어가 섞이지 않게 하세요. 제품명처럼 유지해야 할 고유명사와 번역할 설명을 구분합니다.
CMS 자동 입력을 검수합니다
파일명이나 미디어 제목을 alt에 자동 복사하는 기능은 초안으로만 사용합니다. 장식 이미지, 링크 이미지와 복합 차트의 목적을 자동화가 정확히 판단하지 못할 수 있습니다. 대표 템플릿과 자주 쓰는 블록을 표본 검사하고 빈 alt가 필요한 경우를 별도로 설정합니다.
대체 텍스트 검수는 실제 문맥에서 진행합니다
미디어 라이브러리 화면에서 alt만 보면 주변 제목·캡션과 중복되는지 알기 어렵습니다. 실제 게시 페이지에서 이미지 앞뒤 문장을 읽고, 이미지를 숨긴 상태에서도 흐름과 기능이 유지되는지 확인하세요. 동일 이미지도 사용 목적이 달라지면 페이지별 alt가 달라질 수 있습니다.
공식 확인 자료
대체 텍스트는 이미지의 모양을 무조건 묘사하는 문장이 아니라, 이미지가 사라졌을 때 사용자가 잃는 정보나 기능을 가장 짧게 보충하는 문장입니다.