티스토리를 위한 Alt 태그 삽입 - 사진올릴때

티스토리 블로그 작성 시 alt태그 적용의 장단점에 대해서 알아보고 적용 방법을 알아보자.

 

티스토리 블로그를 운영하다 보면 alt 태그라는 말을 가끔 들어 볼 수 있다. alt태그? 그게 뭐지? 궁금하신 분들을 위해 alt 태그에 대해서 알아보자.

 

alt 태그가 뭔가요?

우리가 보는 브라우저 화면은 인터넷의 언어로 되어 있다. 그 대표적인 것이 HTML이라는 언어이다. 여러분의 브라우저로 네이버나 다음에 가서 마우스 오른쪽을 누른 후, 페이지 소스보기 또는 페이지 원본보기를 누르면 html 문법으로 된 화면을 볼 수 있다. 

 

페이지 원본보기 화면

 

인터넷 웹페이지의 대부분이 HTML 로 되어 있다. 네이버나 구글 등의 검색엔진이 수많은 주소를 돌아다니면서 이러한 HTML 언어를 검색해서 내용을 정리하고 검색 시 이를 기반으로 결과를 출력시킨다. alt 태크(tag)는 이러한 HTML 언어의 문법 중 하나이다. 

 

 

alt 태그는 어디에 쓰고 어떤 기능을 할까? 

alt 태그는 사진 연결 부분에 작성된다. 사진의 간략한 설명이라고 이해하면 된다. 필수 사항은 아니고 권장사항 이다.

이러한 alt 태그는 인터넷 환경에서 인터넷이 느려서 사진을 로딩하지 못하거나 사진 링크가 깨졌을 때 보여준다. 인터넷이 느린 환경에서 브라우저를 켰을때, 사진이 안 뜨고 글자만 나오는 경우를 한 번쯤은 경험해 보았을 것이다. 이러한 글자들이 alt태그를 보여준 것이다.

 또한 시각장애인들이 웹페이지를 읽을 때, alt 태그를 읽어서 들려준다.

alt 태그는 alternative tag이다. 대체 텍스트라고도 부른다.

 

블로그를 올릴 때, 사진 등을 캡처해서 올리거나 할 경우, 인터넷 환경은 이것이 무슨 사진인지 알지 못한다. 그러므로 사진을 설명해 주어야 한다. 그 기본이 alt태그이다. 구글이나 네이버가 웹 환경을 검색할 때, 이 alt 태그도 함께 인덱싱 한다.

 

티스토리에 alt 태그 삽입하기

티스토리에서는 이러한 alt 태그를 이전에는 HTML 모드로 변환한 뒤에 하나씩 붙여 줬어야 했다.

 

티스토리 글쓰기 모드 변경

 

html 모드에서 사진이 있는 항목을 찾은 뒤 Alt 태그를 사진마다 추가해 주어야 했다.

<img src="ti_text1.gif" alt="alt태그 화면" >

 

 

현재는 방법이 변경되어서, 이미지를 선택하면 메뉴에 대체 텍스트 삽입 항목이 생겨서 쉽게 추가할 수 있다.

 

 

현재 티스토리 alt 태그 삽입

 

 

좋은 글쓰기를 위한 alt 태그 사용

이러한 alt 태그를 삽입할 때에는 다음과 같은 사항들을 주의해서 작성하자.

( 참고 링크 : https://accessibility.huit.harvard.edu/describe-content-images )

 

• 모든 이미지에 추가하라
• 명확하고 간결하게 작성하라.
• ~의 이미지, ~의 사진 등의 표현은 지양하자.
• 의미 없는(장식 등) 이미지에는 사용을 지양하자.
• 아이콘에는 "PDF 다운로드" 같이 아이콘의 의도와 동일한 정보로 하자.
• 링크로서의 이미지일 경우, 이미지의 모양이 아닌 이미지를 클릭했을 때의 설명을 한다.