마케팅

[HOW TO 마케팅] 대체 텍스트, 대체 어떻게 쓰는 거냐고요?

정의부터 작성 팁까지… 대체 텍스트 총정리

2025.05.29

실전 마케팅이 궁금하다고요? ? <디지털 인사이트>가 마케팅 기업이 발행하는 자체 콘텐츠 가운데 실무에 활용하기 좋은 글만 추려 읽기 좋게 정리했습니다. 원문을 참고하면 더 자세한 내용을 알 수 있어요.

---

이미지와 동영상은 콘텐츠에서 중요한 역할을 합니다. 시각적 요소를 통해 메시지를 전달하고 사용자 경험을 풍부하게 만들어 주기 때문입니다. 하지만 시각적 정보를 이용할 수 없는 사람들은 이미지를 느낄 수 없습니다. 이러한 이유로, 웹 접근성의  중요한 요소로 자리 잡은 것이 바로 ‘대체 텍스트(alt 속성)’입니다.

대체 텍스트는 이미지가 제공하는 정보를 텍스트로 표현해 화면 읽기 프로그램과 같은 보조 기술을 통해 전달될 수 있도록 도와줍니다. 시각 장애가 있는 사용자도 콘텐츠를 이미지와 함께 이해할 수 있게 됩니다. 또한, 검색엔진이 이미지 또는 동영상을 더 잘 이해할 수 있게 도와줍니다.

이 글에서는 대체 텍스트가 무엇인지부터 작성 방법, 그리고 웹 접근성을 고려한 효과적인 활용법까지 자세히 알아보겠습니다.

대체 텍스트란?

대체 텍스트(Alternative Text)는 이미지나 동영상의 내용을 설명하는 텍스트로, 시각장애인이나 텍스트 전용 브라우저를 사용하는 사람들에게 시각적 정보를 텍스트로 제공해 콘텐츠의 이해를 높이는 역할을 합니다.

대체 텍스트의 중요성

대체 텍스트는 웹 접근성과 SEO 두 가지 측면에서 중요합니다.

첫 번째로, 웹 접근성 측면에서는 시각장애인, 저시력자 뿐만 아니라 이미 지나 동영상이 나타나지 못하는 환경에 처한 사람들에게도 대체 텍스트로 대신 정보를 전달해 줍니다.

두 번째로, SEO 측면에서 대체 텍스트는 검색 엔진이 콘텐츠를 이해하는 데 도움을 줍니다. 이미지 또는 동영상이 있을 때, 콘텐츠의 맥락과 내용을 이해하는 데 도움을 주기 때문에 크롤링과 색인 과정에서 대체 텍스트를 입력하지 않은 콘텐츠보다 검색엔진에게 더 노출될 수 있습니다.

대체 텍스트 작성하는 방법

한국뿐만 아니라 글로벌 기업들도 웹사이트에 활용하는 대체 텍스트, 어떻게 작성하는 걸까요?

웹사이트에 사용되는 대체 텍스트는 일반적으로 HTML을 통해 작업할 수 있으며, 이미지의 alt 속성을 사용해 추가할 수 있습니다.

웹사이트 호스팅사에서 제공하는 HTML 편집기를 이용하거나 또는 직접 HTML을 작성해 이용할 수 있습니다.

1. HTML 대체 텍스트 작성하는 방법

<img src=”이미지 주소” alt=”이미지와 관련한 내용 작성”>

<img src=”https://seo.tbwakorea.com/wp-content/uploads/2024/01/SEO-구글-네이버-가이드-총정리-1024×1024.png” alt=”SEO-검색엔진최적화-구글-네이버-가이드총정리”>

로 HTML에 적용하면 됩니다.

2. 워드프레스에서 HTML로 대체 텍스트 작성하는 방법

–워드프레스에서 이미지를 클릭합니다

-메뉴에서 가장 오른쪽에 있는 항목을 선택합니다.

-HTML로 편집을 클릭하고 <img src=”이미지 주소” alt=”이미지와 관련한 내용 작성”>

내용을 삽입합니다.

대체 텍스트 작성 팁

1. 스팸같이 키워드를 넣지 않기

예를 들어, <img src=”이미지 주소” alt=”SEO, 글로벌 마케팅, 디지털 마케팅”>처럼 대체 텍스트에 많은 키워드를 나열하면 SEO에 유리하다고 생각할 수 있습니다. 그러나, 이러한 방식은 사용자 경험을 저해한다고 검색 엔진이 판단해 오히려 페널티를 받을 수 있습니다.

대체 텍스트는 키워드 남발이 아닌, 이미지를 명확히 설명하는 데 초점을 맞춰 작성해야 합니다.

2. 동일한 대체 텍스트 사용은 피하기

비슷한 내용을 가진 이미지를 여러 개 사용하는 경우, 대체 텍스트를 동일하게 작성하는 경우가 종종 있습니다. 하지만 비슷한 내용이라도 각 이미지에 적합한 고유한 대체 텍스트를 작성하거나, 필요에 따라 하나의 이미지에만 대체 텍스트를 작성하는 것이 좋습니다.

3. 디자인용 이미지에 대체 텍스트 넣지 않기

위 이미지처럼 웹사이트 디자인 과정에서 설명이 필요 없는 이미지가 포함될 수 있습니다. 이러한 이미지는 억지로 대체 텍스트를 작성하기보다는 alt=””로 설정해 화면 읽기 프로그램이 해당 이미지를 건너뛰고 중요한 이미지에 집중할 수 있도록 해야 합니다.

대체 텍스트 예시

1. 애플

애플은 “누구나 쓸 수 있는 기술이야말로 가장 뛰어난 기술인 법. 그래서 우리는 제품 및 서비스를 설계할 때부터 포용성을 염두에 둡니다.”라는 말로 포용성 있는 제품/서비스를 만드는 회사입니다.

웹사이트에서도 Apple은 시각적으로 설명이 필요한 모든 이미지에서 대체 텍스트를 활용해 사진을 자세하게 설명하고 있습니다.

2. 한국관광공사 – 대한민국 구석구석

한국관광공사에서 운영하는 ‘대한민국 구석구석’ 홈페이지는 한국의 다양한 지역 여행지를 소개하는 웹사이트입니다. 여행지의 풍경을 담은 이미지를 활용해 콘텐츠를 구성하다 보니 이미지가 많을 수밖에 없는데요. 한국관광공사에서는 이미지에 대체 텍스트(예: alt=”스키 시즌이 한창인 무주 덕유산리조트”)를 추가해 이미지를 설명하고 있습니다. 또한, 이미지 아래에 작은 글씨로 이미지와 관련된 설명을 첨부해 사용자에게 이미지를 더욱 쉽게 이해할 수 있도록 돕고 있습니다.

3. 스탠리

스탠리는 웹사이트에서 텀블러를 판매하기 때문에, 제품을 보여주는 이미지가 있습니다. 각 제품 이미지에 대체 텍스트(예: alt=”The New Frequency Quencher H2.0 FlowState™ Tumbler | 40 OZ”)를 추가해 어떤 제품을 나타내는 이미지인지 설명하고 있습니다.

검색 엔진은 대체 텍스트로도 이미지를 읽는다.

이미지나 동영상에 올바른 대체 텍스트를 작성하면 모든 사용자가 콘텐츠를 이해할 수 있도록 돕고, 검색 엔진에도 도움을 주어 SEO에 효과적입니다. 대체 텍스트 작성이 귀찮을 수 있지만, 몇 분의 시간이 수년의 시간을 효율적으로 사용할 수 있게 해준다는 점을 잊지 마세요!

대체 텍스트를 사용했음에도 내 웹사이트가 노출되지 않다면, 웹사이트 문제점 진단부터 해결까지 TBWA Data Lab의 SEO 컨설팅을 통해 도움을 받아보세요!

TBWA Data Lab은 성과로 증명하는 SEO 컨설팅을 제공합니다.

? 원문 링크: 대체 텍스트란?, 정의 및 작성하는 방법

? TBWA DataLab SEO 컨설팅 서비스 바로가기

• SEO

• 에디터이민호 (treewords@ditoday.com)