이미지 alt 태그 작성법, 검색 노출과 접근성까지 같이 챙기는 실무 기준
이미지 alt 태그는 사진이 무엇인지 글로 알려 주는 속성으로, 이미지 검색 노출과 화면낭독기 사용자 모두에게 쓰입니다.
그런데 막상 사이트를 점검해 보면 비어 있거나, 파일명 그대로이거나, 키워드만 잔뜩 넣어 둔 경우가 대부분입니다. 실무에서 쓰는 작성 기준을 상황별로 정리했습니다.
💡 alt가 없으면 무엇이 문제일까요?
검색엔진은 사진 자체보다 주변 글과 alt 텍스트로 이미지 내용을 파악합니다. 구글 검색 센터의 이미지 가이드에서도 alt를 중요하게 다룹니다. 또 alt가 아예 없으면 화면낭독기가 파일명을 읽어 버려서, 시각장애인 사용자는 'IMG 2031 점 jpg' 같은 소리를 듣게 됩니다. Lighthouse 접근성 검사에서도 감점 항목입니다.
1. 보이는 내용을 한 문장으로, 키워드는 자연스럽게
가장 흔한 실수는 alt에 키워드를 쉼표로 나열하는 것입니다. 검색엔진은 이런 방식을 스팸에 가까운 신호로 보고, 사용자에게도 의미가 없습니다. 사진을 못 보는 사람에게 전화로 설명한다고 생각하고, 무엇이 어떤 상태로 보이는지 한 문장으로 쓰면 됩니다. 업종 키워드는 그 문장 안에 한 번 자연스럽게 들어가는 정도가 적당합니다.
<!-- 아쉬운 예 -->
<img src="IMG_2031.jpg">
<img src="main.jpg" alt="이미지">
<img src="a.jpg" alt="인테리어 인테리어업체 인테리어견적 강남인테리어">
<!-- 좋은 예: 사진에 실제로 보이는 내용 -->
<img src="kitchen-after.jpg"
alt="32평 아파트 주방 리모델링 후, 화이트 상판과 우드 수납장">2. 장식용 이미지는 alt="", 링크 이미지는 목적지를
모든 이미지에 설명을 달 필요는 없습니다. 구분선, 배경 무늬처럼 의미 없는 장식은 alt=""로 비워 두면 화면낭독기가 건너뜁니다. 속성 자체를 빼는 것과 빈 값은 다르니, 속성은 꼭 남겨 두세요. 반대로 버튼이나 배너처럼 클릭하는 이미지는 그림 묘사보다 누르면 어디로 가는지를 적어야 합니다.
<!-- 장식용 이미지: 빈 alt로 건너뛰게 -->
<img src="line-deco.png" alt="">
<!-- 링크나 버튼 역할 이미지: 이동할 곳을 적기 -->
<a href="/web/page_WxJw60">
<img src="btn-quote.png" alt="홈페이지 제작 견적 문의">
</a>3. 상황별로 이렇게 정리하면 편합니다
| 이미지 종류 | alt 작성법 |
|---|---|
| 상품·시공 사진 | 무엇이, 어떤 상태인지 구체적으로 |
| 글자가 든 배너 | 배너 속 문구를 그대로 |
| 링크·버튼 이미지 | 이동할 페이지나 동작 |
| 로고 | 회사명만 (로고라는 단어는 생략) |
| 구분선·배경 장식 | alt="" (빈 값) |
기존 사이트라면 한 번에 다 고치기보다 메인 배너, 대표 상품, 포트폴리오처럼 검색 유입이 기대되는 이미지부터 손보는 것을 권합니다.
"alt는 검색엔진보다 먼저, 사진을 볼 수 없는 사람을 위한 글입니다."
나눔웹은 납품 전에 페이지마다 이미지 대체 텍스트를 점검하고
검색과 접근성 양쪽에서 빠지는 곳이 없도록 마무리합니다.