loading

친절한효자손 취미생활

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

 

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

 

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

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

 

<img srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F9996B0505E239494195812" src="https://t1.daumcdn.net/cfile/tistory/9996B0505E23949419" style="max-width:100%;height:auto" width="860" height="481" alt="스폿용접기" filename="20200117_180005_1579251605.png" filemime="image/jpeg" original="yes">

 

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

 

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

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

 

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

 

<figure class="imageblock alignCenter"><span data-url="https://k.kakaocdn.net/dn/kAhuc/btqBh0Fkjvk/g9sCrLa3u4pYjeG8EjBBkk/img.png" data-lightbox="lightbox" data-alt="이것은 스폿용접기 이다."><img src="https://k.kakaocdn.net/dn/kAhuc/btqBh0Fkjvk/g9sCrLa3u4pYjeG8EjBBkk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fk.kakaocdn.net%2Fdn%2FkAhuc%2FbtqBh0Fkjvk%2Fg9sCrLa3u4pYjeG8EjBBkk%2Fimg.png" data-filename="20200117_180005_1579251605.png" data-origin-width="1718" data-origin-height="961"></span>

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

</figure>

 

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

 

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

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

 

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

 

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

 

<figure class="imageblock alignCenter"><span data-url="https://k.kakaocdn.net/dn/qtBYb/btqBj6qMNkv/IGoosOvciXsGYeVtRWenTK/img.png" data-lightbox="lightbox" data-alt="이것은 스폿용접기 이다."><img src="https://k.kakaocdn.net/dn/qtBYb/btqBj6qMNkv/IGoosOvciXsGYeVtRWenTK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fk.kakaocdn.net%2Fdn%2FqtBYb%2FbtqBj6qMNkv%2FIGoosOvciXsGYeVtRWenTK%2Fimg.png" data-filename="20200117_180005_15792516.png" alt="스폿용접기" data-origin-width="1718" data-origin-height="961"></span>

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

</figure>

 

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

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. Favicon of https://eastsky3483.tistory.com
    신형에디터에서 슬라이드로 이미지를 여러장 업로드할 시 alt태그는 어떻게 넣어줘야 할까요?
    2020.04.02 09:53 신고
    • 안녕하세요, 나중에 신형에서 슬라이드 이미지를 사용하게 될 때 확인해 보겠습니다.
      2020.04.16 03:16 신고
  2. 항상 좋은 정보 감사합니다. 궁금한게 있어서 질문드려요.
    꼭 데이터 파일네임 옆에다 알트 속성을 추가해야하나요? 관련 내용때문에 여러곳에서 찾아봤는데 어떤곳은 width=xxx" alt
    부분으로 설명을 하던데 어떤말이 맞는건지 ㅠ 직접 입력을하고 마이크로소프트 엣지로 확인했을때
    data-alt=""
    img alt="xxx xxxxxx" 이렇게 확인이 되는데 문제가 없는건가용?
    2020.04.16 01:03 신고
  3. 개발자님
    티스토리내의 포스팅글중 이미지를
    클릭안되게 하고싶은데
    이건 안되는것 같아요.
    해결법이 있을까요?
    2020.12.31 18:48 신고
  4. 라이트박스 구동안되게 스크립트로
    처리했습니다.
    2021.01.14 09:22 신고
  5. 신에디터에서 자막을 안넣는건 딱히 SEO에 영향이없나요?
    2021.02.19 22:24 신고
  6. html모드에서 data-origin-width, data-origin-height 옆에 'data-orgin-alt'가 뜨는데 이건 alt랑 다른 건가요?
    2021.04.26 13:58 신고
  7. png"다음에 alt를 넣을 때, 한 칸을 반드시 띄어야하나요? 지금까지 한 칸띄기 없이 곧바로 alt=""를 삽입했는데...
    그러면 제대로 alt태그가 삽입되지 않은 건가요?

    답변 부탁드립니다!!
    2021.05.20 14:46 신고