이미지와 동영상은 콘텐츠에서 중요한 역할을 합니다. 시각적 요소를 통해 메시지를 전달하고 사용자 경험을 풍부하게 만들어 주기 때문입니다. 하지만 시각적 정보를 이용할 수 없는 사람들은 이미지를 느낄 수 없습니다. 이러한 이유로, 웹 접근성의 중요한 요소로 자리 잡은 것이 바로 ‘대체 텍스트(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
Apple은 “누구나 쓸 수 있는 기술이야말로 가장 뛰어난 기술인 법. 그래서 우리는 제품 및 서비스를 설계할 때부터 포용성을 염두에 둡니다.”라는 말로 포용성 있는 제품/서비스를 만드는 회사입니다.
웹사이트에서도 Apple은 시각적으로 설명이 필요한 모든 이미지에서 대체 텍스트를 활용하여 사진을 자세하게 설명하고 있습니다.
2) 한국관광공사 – 대한민국 구석구석
한국관광공사에서 운영하는 ‘대한민국 구석구석’ 홈페이지는 한국의 다양한 지역 여행지를 소개하는 웹사이트입니다. 여행지의 풍경을 담은 이미지를 활용해 콘텐츠를 구성하다 보니 이미지가 많을 수밖에 없는데요.
한국관광공사에서는 이미지에 대체 텍스트(예: alt=”스키 시즌이 한창인 무주 덕유산리조트”)를 추가하여 이미지를 설명하고 있습니다. 또한, 이미지 아래에 작은 글씨로 이미지와 관련된 설명을 첨부해 사용자에게 이미지를 더욱 쉽게 이해할 수 있도록 돕고 있습니다.
3) Stanley
스탠리는 웹사이트에서 텀블러를 판매하기 때문에, 제품을 보여주는 이미지가 있습니다. 각 제품 이미지에 대체 텍스트(예: alt=”The New Frequency Quencher H2.0 FlowState™ Tumbler | 40 OZ”)를 추가하여 어떤 제품을 나타내는 이미지인지 설명하고 있습니다.
검색 엔진은 대체 텍스트로도 이미지를 읽는다.
이미지나 동영상에 올바른 대체 텍스트를 작성하면 모든 사용자가 콘텐츠를 이해할 수 있도록 돕고, 검색 엔진에도 도움을 주어 SEO에 효과적입니다. 대체 텍스트 작성이 귀찮을 수 있지만, 몇 분의 시간이 수년의 시간을 효율적으로 사용할 수 있게 해준다는 점을 잊지 마세요!
대체 텍스트를 사용했음에도 내 웹사이트가 노출되지 않다면, 웹사이트 문제점 진단부터 해결까지 TBWA Data Lab의 SEO 컨설팅을 통해 도움을 받아보세요!
TBWA Data Lab은 성과로 증명하는 SEO 컨설팅을 제공합니다.
📌 이런 주제의 글은 어떠신가요? 😊
TBWA Data Lab의 이가영입니다. 비즈니스 성장을 위한 SEO와 관련된 정보를 공유하겠습니다.