이미지 대체 텍스트란 무엇이며 왜 중요한가
HTML에서 이미지를 삽입할 때 사용하는 <img> 태그에는 다양한 속성이 들어갑니다. 그중에서도 alt 속성은 이미지가 화면에 정상적으로 표시되지 않거나 시각장애인이 스크린 리더를 사용할 때 이미지를 대신하여 설명해 주는 핵심적인 역할을 합니다. 초보 웹 개발자들이 흔히 놓치는 부분이지만, 웹 접근성 준수와 검색엔진 최적화(SEO) 관점에서 매우 중요한 요소입니다.
[목차]
이번 글에서는 img alt 속성을 어떤 기준으로 작성해야 하는지, 상황별로 올바른 대체 텍스트를 부여하는 방법과 흔히 저지르는 실수를 함께 살펴보겠습니다. 이 글을 읽고 나면 다양한 성격의 이미지에 알맞은 대체 텍스트를 직접 고민하고 적용할 수 있게 됩니다.
alt 속성 작성의 기본 원칙
대체 텍스트를 작성할 때는 이미지가 가진 의미와 목적을 정확하게 전달하는 것이 가장 중요합니다. 단순히 파일명을 그대로 적거나 무조건 키워드를 반복하는 행위는 웹 접근성을 해치는 주원인이 됩니다.
- 간결함과 명확함 유지: 이미지가 전달하는 핵심 정보를 짧고 굵게 표현합니다. 보통 100자 이내로 작성하는 것이 좋습니다.
- 맥락 고려: 전후 텍스트의 흐름을 파악하여 이미지가 어떤 역할을 하는지 분석합니다. 이미 주변 텍스트에 설명이 적혀 있다면 alt값을 비워두는 것이 현명할 수 있습니다.
- 이미지 파일명 지양:
image1.jpg나screenshot.png같은 무의미한 파일명을 그대로 alt 속성에 넣지 않아야 합니다. - 중복 정보 피하기: 본문에 이미 적혀 있는 문장을 그대로 다시 alt에 적으면 스크린 리더 사용자가 같은 내용을 두 번 듣게 되므로 피해야 합니다.
- 사진이라는 단어 반복:
alt="고양이 사진"보다는alt="창가에 앉아있는 치즈 태비 고양이"처럼 구체적인 묘사가 좋습니다. - 검색 키워드 무단 삽입: 검색엔진 상위 노출을 노리고
alt="컴퓨터, 노트북, 맥북, IT 정보, 블로그"처럼 관련 없는 키워드를 무분별하게 나열하는 경우 스팸으로 처리될 수 있습니다. - alt 속성 누락: 아예 속성을 적지 않으면 브라우저나 검색엔진이 이미지를 제대로 해석하지 못하고 파일명 전체를 노출하거나 오류를 발생시킵니다.
- 복잡한 이미지 설명 부족: 복잡한 통계표를
alt="통계표"하나만 낭비하듯 적으면 시각장애인 이용자는 내용을 전혀 알 수 없습니다. 이 경우longdesc속성이나 주변 본문 텍스트를 적극 활용해야 합니다. - 모든
<img>태그에 alt 속성이 빠짐없이 들어가 있는가? - 장식용 이미지에는
alt=""형태로 빈 값이 정확히 할당되어 있는가? - 정보성 이미지의 alt 내용이 이미지의 본질적인 의미를 충실히 담고 있는가?
- 링크가 걸린 이미지의 alt가 목적지나 기능을 명확하게 설명하는가?
- 의미 없는 파일명이나 키워드 나열이 포함되지 않았는가?
상황별 alt 속성 작성 요령
모든 이미지에 똑같은 방식으로 대체 텍스트를 달 수는 없습니다. 이미지의 목적에 따라 접근 방식이 달라져야 합니다.
1. 정보 전달용 이미지
도표, 그래프, 인포그래픽, 주요 제품 사진 등 사용자가 반드시 보아야 하는 정보성 이미지입니다. 이 경우에는 이미지 안에 담긴 데이터나 핵심 메시지를 텍스트로 충실히 풀어주어야 합니다.
예시: <img src="sales-chart.png" alt="2025년 상반기 매출액 30% 증가를 보여주는 막대그래프">
2. 장식 및 디자인용 이미지
사이트의 시각적 완성도를 높이기 위한 아이콘, 배경 장식, 의미 없는 선 등의 이미지입니다. 스크린 리더 사용자가 읽을 필요가 없으므로 alt 속성을 빈 값(alt="")으로 비워두어 스크린 리더가 건너뛰도록 만들어야 합니다.
예시: <img src="bullet-dot.png" alt="">
3. 링크가 포함된 이미지
배너나 로고처럼 클릭했을 때 다른 페이지로 이동하는 이미지입니다. 이때의 alt 속성은 이미지가 무엇을 보여주는지가 아니라, 클릭했을 때 어디로 이동하는지 또는 어떤 기능이 실행되는지를 설명해야 합니다.
예시: <img src="home-logo.png" alt="토이리 블로그 홈으로 이동">
초보자가 자주 하는 실수
대체 텍스트를 작성할 때 현업 초보자들이 흔히 범하는 대표적인 오류들을 정리했습니다. 자신의 코드를 점검할 때 아래 항목들을 확인해 보세요.
img alt 속성 점검 체크리스트
웹사이트에 이미지를 업로드하고 코드를 마무리하기 전에 아래 체크리스트를 통해 alt 속성이 올바르게 작성되었는지 확인해 보세요.
마무리하며
HTML의 img alt 속성은 웹사이트의 완성도를 높이는 작지만 강력한 도구입니다. 철저하게 작성된 대체 텍스트는 시각장애인뿐만 아니라 이미지 검색을 통해 유입되는 일반 방문자에게도 긍정적인 경험을 제공합니다. 오늘부터 웹페이지를 만들거나 수정할 때 이미지의 역할을 한 번 더 고민하고 올바른 대체 텍스트를 부여하는 습관을 들여보시기 바랍니다.
