웹사이트를 만들 때 이미지의 디자인과 해상도에는 많은 시간을 투자하지만, 이미지의 내용을 설명하는 ALT 태그는 빠뜨리는 경우가 있습니다. 제품 사진, 서비스 소개 이미지, 포트폴리오, 인포그래픽처럼 페이지의 핵심 정보를 담은 이미지라면 대체 텍스트도 함께 점검할 필요가 있습니다.
ALT 태그는 이미지를 볼 수 없는 사용자에게 이미지의 의미를 전달하고, 검색엔진이 이미지와 페이지의 관계를 이해하는 데 도움을 주는 정보입니다. 다만 ALT 태그를 추가한다고 이미지가 반드시 검색 결과에 노출되거나 페이지 순위가 상승하는 것은 아닙니다.
이 글에서는 ALT 태그의 의미, 이미지 유형별 작성법, 잘못된 작성 사례, HTML 적용 방법, 대량 이미지 점검 기준을 살펴봅니다.
실무에서 ‘ALT 태그’라고 부르는 것은 보통 HTML 이미지 요소의 alt 속성을 뜻합니다.
<img
src="/images/company-office.jpg"
alt="회의실에서 프로젝트를 검토하는 디자인팀"
>이 예시에서 alt 속성은 이미지가 무엇을 보여 주는지 설명합니다.
ALT 텍스트는 다음 상황에서 중요합니다.
스크린 리더를 사용하는 사람이 이미지의 정보를 이해해야 할 때
이미지가 표시되지 않는 상황에서도 이미지의 목적을 전달해야 할 때
검색엔진이 이미지의 주제와 페이지 맥락을 이해하는 데 도움이 필요할 때
ALT 텍스트는 이미지 파일명이나 이미지 아래에 표시되는 캡션과 다릅니다. 파일명은 이미지 파일을 식별하는 이름이고, 캡션은 화면에 보이는 설명이며, ALT는 이미지의 정보 또는 기능을 텍스트로 대체합니다.
검색엔진은 ALT 텍스트만으로 이미지의 모든 의미를 판단하지 않습니다. 이미지 자체의 시각적 정보, 주변 텍스트, 페이지의 주제 등 다양한 단서를 함께 활용합니다.
따라서 이미지와 관련된 본문을 가까이에 배치하고, 이미지가 해당 페이지에서 어떤 역할을 하는지 명확하게 설명하는 것이 좋습니다.
이미지에 설명적인 ALT 텍스트를 제공하면 검색엔진이 이미지의 주제를 파악하는 데 도움이 됩니다. 다만 실제 노출 여부는 이미지 접근 가능성, 페이지의 관련성, 기술 설정, 이미지 품질 등 여러 조건에 영향을 받습니다.
이미지가 클릭 가능한 링크라면 ALT 텍스트는 이미지의 외형뿐 아니라 링크의 목적을 전달해야 합니다.
예를 들어 회사 로고를 클릭하면 홈페이지로 이동하는 경우, 로고의 시각적 특징을 길게 설명하기보다 링크의 목적을 이해할 수 있도록 작성합니다.
모든 이미지에 동일한 규칙을 적용하면 안 됩니다. 가장 먼저 판단해야 할 것은 이미지가 페이지에서 정보를 전달하는지, 기능을 수행하는지, 단순 장식인지입니다.
제품 사진, 서비스 작업 화면, 실제 프로젝트 결과물처럼 본문 이해에 필요한 이미지는 핵심 정보를 간결하게 설명합니다.
나쁜 예: alt="이미지"
개선 예: alt="모바일 화면에서 확인한 온라인 예약 페이지"
이미지에서 확인할 수 있는 중요한 특징이 있다면 구체적으로 표현하되, 이미지에 없는 내용을 추측해서 넣지 않습니다.
이미지 자체가 버튼이나 링크로 사용되는 경우에는 기능 또는 목적을 설명합니다.
<a href="/contact/">
<img src="/images/contact-icon.png" alt="상담 문의하기">
</a>이 경우 사용자가 알아야 할 핵심은 아이콘이 어떤 모양인지보다 어디로 이동하거나 어떤 작업을 수행하는지입니다.
배경 장식, 구분선, 의미가 없는 장식 그래픽처럼 콘텐츠 이해에 추가 정보를 제공하지 않는 이미지라면 빈 ALT 속성을 사용합니다.
<img src="/images/decorative-pattern.png" alt="">장식 이미지에 불필요한 설명을 넣으면 스크린 리더가 의미 없는 정보를 반복해서 읽을 수 있습니다. alt 속성을 생략하는 것과 alt=""로 비워 두는 것은 같지 않습니다.
W3C 웹 접근성 안내에 따르면 alt=""로 비운 이미지는 스크린 리더가 건너뛰지만, alt 속성이 아예 없으면 일부 스크린 리더는 이미지 파일명을 대신 읽습니다.
복잡한 그래프나 인포그래픽은 ALT 속성 하나에 모든 설명을 넣는 것이 적절하지 않을 수 있습니다.
이미지가 전달하는 핵심 내용을 짧게 설명하고, 주요 수치와 해석은 본문이나 표로도 제공합니다.
<img
src="/images/traffic-report.png"
alt="분기별 웹사이트 방문자 수 변화 그래프"
>
<p>
방문자 수는 1분기보다 2분기에 증가했으며,
3분기에는 전 분기 대비 감소했습니다.
</p>수치가 핵심인 그래프라면 실제 데이터를 텍스트나 표로 제공해야 이미지에 접근하기 어려운 사용자도 내용을 확인할 수 있습니다.
이미지 안의 문구가 페이지 어디에도 텍스트로 제공되지 않고 정보 전달에 필수적이라면 해당 정보를 대체 텍스트나 주변 본문에 포함해야 합니다. 다만 가능하다면 중요한 문구는 이미지에만 넣지 말고 실제 텍스트로도 제공하는 것이 좋습니다.
예를 들어 홈페이지의 모든 이미지에 alt="회사명 홈페이지 제작"을 넣으면 이미지마다 전달하는 정보가 사라집니다.
각 이미지의 역할에 따라 서로 다른 대체 텍스트를 작성해야 합니다.
alt="홈페이지 제작 웹사이트 제작 SEO 검색엔진 최적화 홈페이지 제작 업체"처럼 관련 단어를 나열하는 방식은 이미지의 의미를 자연스럽게 전달하지 못합니다.
ALT는 키워드를 반복해서 넣는 공간이 아닙니다. 실제 이미지와 페이지 맥락에 맞는 설명을 우선합니다.
Google 검색 센터의 이미지 SEO 권장사항도 alt 속성을 키워드로 채우면 사용자 경험이 나빠지고 사이트가 스팸으로 간주될 수 있다고 경고합니다.
alt="IMG_20261009_001.jpg"는 파일명을 알려 줄 뿐 이미지의 의미를 설명하지 않습니다. 파일명은 별도로 관리하고 ALT에는 이미지의 정보나 기능을 작성합니다.
장식용 이미지가 본문에 정보를 추가하지 않는다면 빈 ALT가 적절할 수 있습니다. 모든 이미지에 무조건 설명을 넣는 것이 접근성에 더 좋은 것은 아닙니다.
이미지는 제품 소개인데 ALT에 다른 제품명이나 제공하지 않는 서비스를 적으면 사용자와 검색엔진 모두에게 잘못된 정보를 전달할 수 있습니다.
모든 이미지에 적용되는 고정 글자 수 기준을 정하기보다 이미지의 목적을 짧고 정확하게 설명하는 것을 기준으로 삼습니다.
작성할 때는 다음 질문을 확인합니다.
이미지에서 중요한 정보가 무엇인가?
이 이미지가 페이지의 이해에 어떤 도움을 주는가?
이미지가 링크나 버튼이라면 그 기능은 무엇인가?
주변 텍스트와 중복되는 정보를 반복하고 있지는 않은가?
보이지 않는 내용을 추측하거나 과장하지 않았는가?
이미지 설명이 한두 문장 이상으로 길어져야 한다면, ALT에 모든 내용을 몰아넣기보다 본문이나 표로 상세 정보를 제공하는 방식을 검토합니다.
<!-- 정보를 전달하는 이미지 -->
<img
src="/images/product-dashboard.jpg"
alt="월별 매출과 주문 현황을 보여 주는 관리자 대시보드"
>
<!-- 장식용 이미지 -->
<img src="/images/background-shape.svg" alt="">워드프레스 등 CMS에서는 미디어 라이브러리나 이미지 편집 화면에서 대체 텍스트를 입력할 수 있습니다. 다만 입력란의 명칭과 실제 HTML 반영 방식은 플랫폼과 테마에 따라 다를 수 있으므로 게시된 페이지에서도 확인해야 합니다.
이미지가 많은 쇼핑몰이나 기업 사이트는 모든 이미지를 수작업으로 확인하기보다 페이지 유형별 기준을 정해 관리하는 편이 효율적입니다.
상품 이미지: 실제 상품명과 식별에 필요한 특징
포트폴리오 이미지: 프로젝트의 실제 대상과 핵심 내용
팀 사진: 사진이 전달하는 맥락
UI 스크린샷: 화면에서 확인할 수 있는 주요 기능
장식 이미지: 의미가 없다면 빈 ALT
링크 이미지: 연결 대상이나 기능
자동 생성 기능을 사용할 때도 모든 이미지에 같은 문구가 들어가지 않는지, 장식 이미지까지 불필요하게 설명하지 않는지 검수해야 합니다.
ALT 속성은 이미지 검색 최적화의 한 요소일 뿐입니다. 이미지가 검색되지 않는 경우에는 다음 항목을 함께 확인합니다.
이미지 접근성: 이미지 URL이 정상적으로 열리는가?
크롤링 및 색인: 이미지나 해당 페이지가 검색엔진에 접근 가능하도록 설정되어 있는가?
페이지 맥락: 이미지와 관련된 텍스트가 페이지에 충분히 있는가?
파일명: 파일명이 이미지의 주제를 간결하게 설명하는가?
이미지 품질: 이미지가 선명하고 주제를 확인하기 쉬운가?
기술 구현: 반응형 이미지 설정에서 실제 이미지 URL이 올바르게 제공되는가?
검색 의도: 이미지가 사용자가 찾는 주제와 실제로 관련이 있는가?
이미지의 ALT만 수정한 뒤 노출을 보장할 수는 없습니다. 이미지가 포함된 페이지의 내용과 기술적 접근성까지 함께 확인해야 합니다.
제목 구조까지 함께 점검하려면 H 태그 제목 구조 설계법을, 제품 사진을 많이 쓰는 글이라면 제품 소개 콘텐츠 설계법을 참고하세요.
정보를 전달하는 이미지에 의미 있는 대체 텍스트가 있다.
장식용 이미지는 필요에 따라 alt=""로 처리했다.
링크 이미지의 ALT가 링크 목적을 전달한다.
이미지마다 내용에 맞는 설명을 사용한다.
키워드 나열과 불필요한 반복을 피했다.
파일명과 ALT 텍스트를 혼동하지 않는다.
복잡한 차트의 핵심 데이터는 본문이나 표에도 제공한다.
실제 게시된 HTML에 ALT 속성이 반영되어 있다.
이미지 URL과 페이지가 검색엔진에 접근 가능한지 확인했다.
ALT 태그를 제대로 설정하려면 먼저 이미지가 왜 필요한지 판단해야 합니다. 정보를 전달하는 이미지에는 핵심 내용을, 기능을 수행하는 이미지에는 목적을, 장식용 이미지에는 불필요한 설명을 넣지 않는 방식으로 구분합니다.
이렇게 작성하면 검색엔진이 이미지의 주제를 이해하도록 돕는 동시에, 이미지를 직접 확인하기 어려운 사용자에게도 필요한 정보를 제공할 수 있습니다.