라비아

티스토리 글쓰기 팁 - 이미지 대체텍스트 기능과 활용




오늘은 블로그 글쓰기 관련 포스팅을 하려고 합니다.
제가 생각하기에 우리나라에서 블로그를 개설하고자 할 때 가장 좋은 선택은
네이버블로그 또는 티스토리 블로그라고 생각합니다.

저도 블로그생활을 그리 오래했다고 볼 수는 없지만
그동안의 경험으로 보면 이 두 곳이 포털의 블로그영역에 잘 노출되는 것 같더라구요 ㅎ

그 중에서도 티스토리는 네이버 블로그와는 조금 다르게
html 수정 등을 포함하여 블로거에게 좀더 다양한 자유를 제공합니다.
오늘 말씀드릴 대체텍스트 또한 이 부분과 관련되는 건지 아닌지 잘 모르겠지만
아무튼 이번 글의 주제는 이미지 대체텍스트에 관한 내용입니다.

이미지 대체텍스트란?

물음표 이미지

포털의 인터넷 사전을 검색해보니
원하는 결과가 나오지 않더군요 ㅎ 그래서 그냥 제가 이해하고 있는 대로 설명을 드리면...
말 그대로 이미지를 대체할 수 있는 텍스트입니다.

일반인들은 인터넷을 이용할 때, 웹 상에서 이미지를 접하게 되면
눈을 통해서 인지하고 그 이미지의 형태와 이미지가 전달하고자하는 메시지를 쉽게 짐작할 수 있습니다.
하지만 이미지를 확인할 수 없는 환경에서 인터넷접속을 하거나, 시각장애를 가지고 계신 분들같은 경우,
이미지 자체를 인식할 수가 없습니다.



그래서 이미지가 포함된 컨텐츠 제작자 입장에서 할 수 있는 작업이 바로
[대체텍스트] 의 삽입니다. 컨텐츠 제작자 중에서는 저와같은 블로거도 포함이 되겠죠 ㅎ
한마디로 대체텍스트의 기능은 이미지에 대한 설명을 이미지 자체에 문자로 표기해놓는 것이라 할 수 있습니다.

티스토리 글쓰기에서 대체텍스트 활용하기

태그를 활용하면
이미지 대체텍스트를 사용할 수 있습니다.

<img src="이미지 주소" alt="삽입할 대체텍스트">

위와같이 이미지에 alt 태그를 추가해주면 되는건데요,
사실 티스토리에서는 글쓰기모드 자체에서 이 기능을 지원합니다.
따라서 일일이 이미지주소를 불러와서 alternative text (alt 태그) 를 작성할 필요가 없죠 ㅎ 

티스토리

위와같은 이미지를 포스트 내에 삽입한다고 할 때,
글쓰기 모드에서 이미지를 선택하면 오른쪽 메뉴 상단부분에 다음과 같은 메뉴가 있습니다.

티스토리 대체텍스트 메뉴

중앙부분에 있는 [대체 텍스트] 항목 아랫부분에
이미지에 맞는 설명을 간단하게 문자로 입력해주시면 됩니다.
그러면 작성한 글을 저장했을 때, 글 안에 들어가 있는 이미지에는 대체 텍스트가 들어가있게 됩니다.

대체텍스트 적용 후 확인해보기

적용을 모두 마쳤는데
이게 제대로 된건지 아닌지 모르시겠다구요?
간단히 확인해볼 수 있는 방법이 있습니다. 글 저장을 완료하고
완성된 포스트에 삽입된 이미지에 마우스를 가져다 대 보는 방법입니다.

대체텍스트 확인

그러면 위처럼
자신이 적용한 대체텍스트의 내용이 글자로 보이게됩니다.
저는 [티스토리] 라는 문자를 삽입해두어서 저렇게 표기가 된 거죠 ㅎ

마치며...

사실 저도 그동안 글을 쓰면서 이 기능을 활용하지 않고 있었습니다.
하지만 앞으로는 이미지마다 대체텍스트를 넣어두어야 겠다는 생각을 해봅니다.

이미지를 확인할 수 없는 상황에서도
모든 방문자들이 사진에 대한 이해를 할 수 있도록 대체텍스트 기능을 활용해보세요 !!