티스토리 글쓰기의 새로운 기능 - 대체 텍스트 (alt 태그)

글(=텍스트)로 설명을 대신한다는 뜻의 대체 텍스트는 alt 속성, alt 설명, alt 태그로도 불리며, 주로 사진(=이미지)이나 영상을 설명해주는 기능을 말합니다.

최근 티스토리 글쓰기 에디터의 사진 편집, 링크 삽입 도구에 '대체 텍스트'라는 기능이 추가되었는데요. 티스토리의 대체 텍스트에 대해 다뤄보겠습니다.

사진 편집 도구의 대체 텍스트 = alt 태그

alt 태그란 포스팅이나 블로그 등 웹사이트 상에 업로드된 사진(=이미지)이나 영상을 자세하게 설명해주는 기능입니다.

예를 들어 볼까요?

인터넷 검색창에 '안경'이라는 이미지를 검색해보겠습니다. 그리고 화면에 뜨는 이미지에 커서를 대보겠습니다.

알트 태그 참고 사진

화살표가 가리키는 흰색의 네모 박스가 보이시나요? 이것이 알트 태그인데
알트 태그를 입력하면 안경보다 구체적인 '안경테'라는 정보를 얻을 수 있습니다.

영상에서는 자막이나 상황을 나타내는 지문이 이에 해당됩니다.


이제 티스토리 글쓰기 에디터에 알트 태그를 적용시키는 방법을 알아보겠습니다.

알트 태그 삽입 방법 티스토리 화면 캡쳐 사진

글쓰기 에디터에 사진을 업로드 한 다음 사진을 클릭합니다. 그러면 사진 바로 위에 도구 모음이 뜨는데요. 도구 모음에서 맨 오른쪽의 그림 탭(=대체 텍스트 삽입 탭)을 클릭해주세요.

대체 텍스트 삽입 칸에 사진과 관련된 내용이나 정보를 입력하고 확인을 누르면 끝입니다.

어떤 내용을 적느냐? 키워드나 이슈가 아닌 사진을 표현할 수 있는 내용이어야 합니다. 여기서는 [안경이-진열된-유리-쇼케이스-위에-있는-둥근-모양의-갈색-안경테를-찍은-사진] 정도면 설명이 되겠죠?

그리고 띄어쓰기 없이 텍스트를 입력해야 하는데요. 띄어쓰기를 인식하지 못하는 검색 엔진이 있기 때문에 띄어 쓰는 공간에는 하이픈(-)을 넣어 공백이 없도록 해주세요.


※ TMI
알트 태그 입력하고 저장을 해도 포스팅 발행을 하지 않으면 내용이 날아갔는데... 업데이트 이후에는 발행 안 해도 저장돼요!

링크 대체 텍스트

링크 대체 텍스트는 포스팅 내용과 관련된 링크 또는 이전에 발행한 포스팅 URL을 삽입할 때 사용할 수 있는 기능입니다.

글쓰기 에디터의 편집 도구 모음에서 링크 삽입/수정 탭을 누르고 URL 란에 URL을, 대체 텍스트 란에는 URL의 내용을 요약할 만한 단어를 넣으면

링크 대체 텍스트 삽입 방법 티스토리 화면 캡쳐 사진

삽입한 링크에 커서를 댔을 때 대체 텍스트 란에 입력한 대로 뜹니다.
('링크 대체 텍스트'를 입력함. )

영어와 기호, 숫자 등으로 이루어진 URL만으로는 페이지 정보를 알 수 없기 때문에 대체 텍스트를 통해 사용자에게 명확한 정보 전달이 가능해집니다.


뇌피셜입니다만 이런 맥락으로 알트 태그의 범위를 확장해서 이해해도 되지 않을까 싶습니다.

대체 텍스트의 중요성

대체 텍스트(=알트 태그)는 단순 오류로 인해 웹사이트 로딩 시간이 길어져 게재된 자료 등이 곧바로 뜨지 않을 때 텍스트로 정보를 대신해주면서 동시에 시, 청각 장애인을 위한 요소이기도 합니다.

사회 복지사업에도 힘쓰고 있는 구글과 같은 대기업들은 검색자에게 보다 정확한 정보를 제공해 줄 수 있는 알트 태그가 있는 글을 신뢰하며, 잘 쓴 글이라 판단합니다.

위에서 이야기한 것처럼 게시자는 전달하려는 정보를 더욱 자세하고 정확하게, 내용에 맞는 알트 태그를 입력하는 것이 좋겠습니다.