티스토리 신형 글쓰기 에디터에서 이미지에 수동으로 대체텍스트 Alt 속성 넣기

구형 글쓰기 에디터에서는 대체텍스트 기능을 따로 제공하는데, 신형으로 넘어가면 해당 기능을 따로 제공하지 않습니다. 물론 없어도 됩니다. <figure>와 <figcaption> 태그로 이 기능을 충분히 커버할 수 있기 때문입니다. 단, 대체텍스트 즉 alt 속성을 이미지에 따로 넣는 가장 큰 이유는 네이버 웹마스터도구에서 링크관리에서 느낌표로 경고가 뜨는 부분때문에 그렇습니다.

사실 이렇게 대체텍스트를 입력한다해도 100% 해결이 된다는 보장은 없습니다. 네이버 웹마스터도구를 떠나서 원래 이미지에는 무조건 alt 속성이 들어가는게 정석으로 알려져 있습니다. 브라우저의 오류나 서버 이상으로 이미지가 손상되어 깨지는 경우에 해당 공란을 대체텍스트로 채워서 사용자가 알아볼 수 있도록 만든 일종의 사용자 편의성 부분 때문에 이미지에는 alt 속성이 들어가는게 거의 공식화 되어 있습니다. 티스토리도 오픈형 블로그 이므로 사용자가 임의의 alt 속성을 부여할 수 있습니다.

구형 글쓰기 에디터의 alt 속성

이것은 구형 글쓰기 에디터에서의 이미지를 클릭했을 때 오른쪽에 출력되는 사진 옵션의 모습 입니다. 보시면 대체텍스트와 자막 부분이 있습니다. 자막은 이미지에 대한 설명을 입력하는 부분이고, 대체 텍스트 부분이 방금 위에서 설명드린 이미지 손상 시 대신 출력되는 텍스트 부분 입니다. 이것을 글쓰기 HTML 상태에서 보면 제대로 나오지 않으므로 미리보기 이후 크롬에서 검사 기능을 사용하여 HTML 상태를 살펴보도록 하겠습니다.

보시면 이렇게 img 태그 안쪽에 alt 속성이 들어가 있는 것을 살펴볼 수 있습니다. 문제는 신형 글쓰기 에디터 입니다.

신형 글쓰기 에디터의 alt 속성

위의 스크린샷 이미지는 신형 글쓰기 에디터에서 이미지를 삽입한 모습 입니다. 업로드가 완료된 이미지를 클릭하면 저렇게 이미지 아래에 "이미지를 설명해 보세요" 라는 텍스트 입력 칸이 있습니다. 여기가 바로 구형 글쓰기 에디터에서 자막 부분에 해당됩니다. 대체 텍스트가 아닙니다.

임의로 텍스트를 이렇게 입력해 봤습니다. 이제 미리보기 이후 HTML 코딩 상태를 살펴보도록 하겠습니다.

<figcaption>이것은 스폿용접기 이다.</figcaption>

</figure>

구형 에디터와는 다르게 대체 텍스트를 입력하는 항목이 없었으니 당연히 img 태그 안에 alt 속성도 없습니다. 다만 주황색으로 표시된 data-alt 라는 매소드가 들어가게 되는데 아마 이것이 티스토리 자체에서 alt 속성을 부여하는 매소드가 아닐까하는 추측을 해봅니다. 가장 확실한 방법은 태그를 수동으로 입력하는 방법일 것입니다.

신형 글쓰기 에디터에서 alt 속성 수동 입력 방법

먼저 신형 글쓰기 에디터에서 이미지를 업로드 합니다. 그리고 HTML 모드로 변경합니다. 그러면 올린 이미지 태그 부분이 보일텐데 다음과 같은 형태로 되어 있을 겁니다. (자꾸 이미지가 로드되서 태그에서 대괄호는 제거함)

##_Image|kage@HMV/btqBiDJCpoz/Exu2L34rYItzoS2WZll3TK/img.png|alignCenter|data-filename="20200117_180005_15792516.png" alt="스폿용접기" data-origin-width="1718" data-origin-height="961"|||_##

이 태그에서 노란색 부분은 자신이 올린 이미지의 파일명이 됩니다. 바로 오른쪽에 초록색처럼 alt 속성을 수동으로 입력해 주시면 됩니다. 입력 시 따옴표를 주의해 주세요. 그리고 완료된 이미지의 HTML 태그 상태를 살펴보면 이렇게 되어 있을겁니다.

<figcaption>이것은 스폿용접기 이다.</figcaption>

</figure>

이런 방법으로 신형 글쓰기 에디터에서는 비록 에디터상에서 alt 속성을 만족시키는 대체 텍스트 입력 옵션은 없지만, 얼마든지 수동으로 alt 속성을 부여해서 대체텍스트를 채워넣을 수 있습니다. 유용하게 사용해 보시기 바랍니다. 끝.