본문 바로가기
블로그로 돈벌기

블로그에 이미지 업로드 시, '대체 텍스트' 꼭 입력해주세요

by 어쩌다흙수저 2023. 1. 4.
반응형

블로그를 시작하면서 '대체 텍스트'라는 말을 알게 되었습니다. 글을 쓰는데 도대체 뭘 또 입력해줘야 하나 궁금했습니다. 그래서 찾아보았습니다.

 

작성한 글에 이미지를 넣는 이유

우리가 글을 쓸 때, 길게 설명해야 전달되는 경우가 있습니다. 또, 글로 표현하기 어려운 부분도 있을 수 있습니다. 이럴 때는 이미지 한 장으로 이 모든 것을 설명할 수 있는 경우도 있습니다. 백문이 불여일견(百聞不如一見)이라고 했습니다. 

아주 복잡한 설명이 이미지 한 장으로 모든 것을 쉽게 말해주는 경우입니다. 그래서 글을 작성할 때 적절한 이미지를 삽입시키는 것은 중요합니다. 

 

대체 텍스트가 필요한 이유

시각 장애를 가지신 분들도 인터넷을 이용합니다. 전용 장비와 프로그램을 이용해서 인터넷에 접속하여 정보를 얻고 있습니다. 이 분들은 전용 프로그램인 스크린 리더로 인터넷의 글을 읽어 들여 내용을 파악합니다.

 

스크린-리더-아이콘
스크린 리더 아이콘

시각장애인은 음성 인식기를 PC 등에 장착하여 웹사이트에 있는 내용을 음성으로 듣게 됩니다. 그렇게 듣다가 사진이 있는 부분에서는 사진이 있다는 것은 알게 되지만, 그 사진이 어떤 사진인지는 모릅니다. 그런 때에 사진이나 이미지에 대한 설명이 적혀있는 '대체 텍스트'를 통하여 사진의 설명을 듣게 됩니다. 

즉, 이것은 시각장애인을 위한 배려이며 사진을 볼 수 없는 시각장애인들도 대체 텍스트를 이용해서 검색을 가능케 합니다. 또한 인터넷 환경에 따라서는 이미지를 제대로 불러오지 못하는 경우도 있는데, 이때 '대체 텍스트'를 불러와서 어떤 이미지인지 나타낼 수도 있기 때문에 유용한 기능입니다. 하지만, 일반 방문자들은 이 이미지의 대체 텍스트를 볼 수는 없습니다.

대체 텍스트는 이미지에 설명을 부여해줌으로써 이미지를 텍스트로 표현할 수 있게 해주는 하나의 기능입니다. 영어로는 'Alternate Text'라고 하며, 다른 말로는 '알트 태그(Alt Tag)'라고도 합니다.

이미지 대체 텍스트는 이미지 제목 또는 캡션과 혼동되기도 합니다. 이미지 제목은 사용자가 이미지 위에 마우스를 가져가면 팝업 텍스트로 표시되는 것을 말하지만, 블로그 설정 스킨에 따라서 나타나지 않는 것도 있습니다. 반면에 캡션은 사진 설명문으로써 이미지와 함께 나타납니다.

 

대체 텍스트가 필요한 또 다른 이유

또한 구글 검색엔진 봇(Googlebot)이 사이트를 크롤링하고 색인을 생성해 순위를 지정할 때 이미지를 해석하는 데 사용합니다.

※ 크롤링(crawling)은 '기다'라는 뜻의 crawl의 명사형인데, 소프트웨어와 같은 무언가가 인터넷을 돌아다니며 정보를 수집해 오는 작업을 의미합니다.

전 세계의 다양한 사람들이 구글 검색엔진을 사용하다 보니 구글이나 빙(bing) 등 외국의 검색엔진 최적화(SEO)에서는 모든 사람들이 읽을 수 있는 포스팅을 선호하며, 이 '대체 텍스트'를 굉장히 중요한 요소로 보고 있습니다. 

구글은 대체 텍스트가 없는 이미지가 포함된 블로그 포스팅에 대하여 대단히 심각하게 평가하고 있다고 공식적으로 발표하고 있습니다. 구글 봇이 웹 페이지를 평가하는 데 있어서 이미지에 대체 텍스트가 있으면 좀 더 좋은 평가를 받을 수 있게 됩니다. 구글 검색 엔진은 해당 게시물을 사용자 친화적인 게시물로 판단하여 상위에 검색 결과를 노출시켜 주기도 합니다.

따라서 웹 접근성 향상과 구글 최적화를 위해서도 중요하지만, 시각장애인을 위해서도 이제부터라도 내 이미지에 대체 텍스트를 넣는 습관을 가지도록 합니다.

 

이미지 '대체 텍스트' 작성을 위한 팁

대체 텍스트(Alt Tag)를 만들 때 명심해야 할 몇 가지 핵심 사항이 있습니다. 이러한 모범 사례를 준수하면 대체 텍스트를 보다 효과적으로 만들 수 있습니다.

* 구체적이고 서술적이어야 한다: 대체 텍스트의 목적은 이미지를 설명하는 것이므로 가능한 한 구체적이어야 합니다.

* 짧게 유지한다: 자세하게 설명하고 싶지만, 대체 텍스트를 단락 길이로 만들 필요는 없다. 최대 100–125자를 목표로 한다.

* 중복하지 말아야 한다: 대체 텍스트를 최대한 활용하기 위해 불필요한 단어를 포함하지 않도록 한다. 여기에는 설명 앞에 '그림의' 또는 '이미지의'를 추가하는 것이 포함된다. 이러한 요소는 이미 암시되어 있으므로 불필요하다.

* 관련성 높은 키워드를 자연스럽게 통합한다: 타깃 키워드를 고려한다. 텍스트와 일치하는 관련성이 높은 이미지를 사용할 때 더 쉽다.

* 키워드 스터핑(Keyword stuffing)을 피하라: 대체 텍스트에 키워드를 사용하면 검색엔진 최적화(SEO)를 개선할 수 있지만 과도하게 사용하지 않도록 주의한다. 키워드 스터핑은 실제로 검색엔진 최적화(SEO)에 해를 끼치고 사용자 경험을 저하할 수 있다.

* 텍스트 대신 이미지를 사용하지 말아야 한다: 대체 텍스트의 주요 목적은 페이지의 시각적 요소를 처리하고 해석할 수 없는 컴퓨터에 텍스트를 제공하는 것이다. 따라서 이미지 내에서 텍스트, 특히 제목과 페이지 제목에 텍스트를 사용하는 것은 적합하지 않다.

 

Google 이미지 검색엔진 최적화 권장사항 | Google 검색 센터  |  문서  |  Google Developers

Google 이미지를 사용하면 웹상의 정보를 시각적으로 찾을 수 있습니다. 이미지 캡션 및 배지와 같은 이미지 검색엔진 최적화 권장사항을 살펴보세요.

developers.google.com

※ 위의 팁 내용은 '구글 이미지 검색엔진 최적화(SEO) 권장사항' 문서의 내용입니다.

 

티스토리 블로그에서 대체 텍스트 넣는 방법

티스토리에서 대체 텍스트를 입력하는 것은 매우 쉽기 때문에 번거롭더라도 이미지에는 무조건 넣어 주는 것이 좋습니다. 

 

글쓰기-메뉴-버튼
블로그 글쓰기 메뉴 버튼

1. '새 글쓰기'를 선택하여 글을 작성합니다.

 

첨부-아이콘의-사진-불러오기-메뉴
첨부 아이콘의 사진 불러오기 예시

2. 왼쪽 상단에 있는 '첨부' 아이콘을 클릭하여 이미지를 불러옵니다.

 

대체-텍스트-예시-1
대체 텍스트 입력 예시 1

3. 업로드된 이미지를 클릭하면 이미지 위에 도구 모음이 뜹니다.

 

대체-텍스트-예시-2
대체 텍스트 입력 예시 2

4. 도구 모음에서 맨 오른쪽 톱니바퀴 아이콘을 클릭하면 바로 아래에 '대체 텍스트'를 입력할 수 있는 입력창이 나타납니다. 이미지와 관련된 내용이나 정보를 입력하고 '확인'을 누르면 됩니다. 이때 띄어쓰기는 하이픈(-)을 넣어 공백을 없애주는 겁니다.

 

이미지-캡션-입력-예시
이미지 캡션 입력

7. 대체 텍스트를 입력하였으면 이미지 하단에 이미지 캡션도 함께 입력해 줍니다.

이렇게 이미지를 업로드하고 나서 대체 텍스트와 이미지 캡션을 함께 입력하면 됩니다.

 

오늘은 대체 텍스트에 대해서 알아보았습니다.

다음 시간에 뵙겠습니다. 감사합니다.

 

반응형

댓글