티스토리 이미지 캡션과 대체 텍스트 입력 방법 (Caption & Alt tag)

티스토리 글쓰기에서 이미지를 추가한 경우 캡션(caption tag) 및 대체 텍스트(alt tag) 정보를 입력하는 방법에 대해서 각각 알아보겠습니다. 글과 이미지의 가독성을 위해서 그리고 시각장애인을 위한 정보로 충실하게 입력하는 것을 추천합니다.

티스토리 이미지 캡션과 대체 텍스트 입력 방법 (Caption & Alt tag)

---

티스토리 이미지 캡션과 대체 텍스트 태그 정보를 입력하는 방법

티스토리 블로그 관리 홈으로 들어가서 글쓰기를 시작합니다. 글과 함께 전체적인 글의 이해를 돕기 위한 이미지를 사용할 경우 해당 이미지를 선택하면 캡션을 넣거나 대체 텍스트를 입력하는 기능을 다음과 같이 찾으실 수 있습니다.

1. 티스토리 이미지 캡션 넣기 (caption tag)
2. 티스토리 이미지 대체 텍스트 입력 (alt tag))

1. 티스토리 이미지 캡션 넣기 (caption tag)

마우스로 이미지 선택하는 방법 (이미지 설명 부분)

티스토리 글쓰기에서 본문에 사진이나 캡쳐한 이미지를 가져온 후에 해당 이미지를 마우스로 한번 클릭해서 선택해주면 이미지 바로 아래에 '이미지를 설명해 보세요'란 테스트 부분이 나타납니다.

이미지 캡션 부분 나타나는 화면

마우스로 이미지 선택 후 엔터 키 누르는 방법

또 하나의 방법은 해당 이미지를 마우스로 한번 클릭해서 선택한 다음 키보드에서 엔터 키를 한번 쳐주면 이미지 바로 아래에 캡션을 입력할 수 있는 부분이 생깁니다.

이미지 캡션 입력하는 화면

해당 이미지를 가장 잘 설명할 수 있는 문구로 캡션 내용을 입력하시면 됩니다. 캡션 태그의 내용은 글의 본문에 이미지 바로 아래에 보이기 때문에 사용된 이미지에 대한 이해도를 높이고 전체적인 글의 가독성을 높여주게 됩니다.

html 모드 캡션 태그 확인 화면 (caption tag)

글쓰기의 모드를 기본모드에서 html으로 전환해서 보면 html 코드 속에서 alt 그리고 caption tag를 발견하실 수 있는데요. 동일한 내용을 쓰더라도 tag 정보가 다르기 때문에 두 군데에 나뉘어 들어갑니다.

 

2. 티스토리 이미지 대체 텍스트 입력 (alt tag)

대체 텍스트 삽입 아이콘 이용 방법

이미지의 캡션(caption)을 넣는 것과 구분해서 이미지의 대체 텍스트를 입력하는 방법은, 이미지를 하나 마우스로 한번 클릭해서 선택하면 이미지 바로 위에 기능 바(bar)가 나타나는데요. 여기서 가장 우측에 톱니바퀴처럼 생긴 대체 텍스트 삽입 아이콘을 클릭하세요.

티스토리 이미지 설정 기능 중 대체 텍스트 삽입 클릭 화면

대체 텍스트를 삽입을 클릭한 다음 나타나는 입력창에 시각 장애인을 위해 이미지를 설명하는 내용을 입력하고 확인 버튼을 눌러주면 됩니다.

시각장애인을 위한 대체텍스트 입력 화면

대체 텍스트를 입력해도 이미지에는 안보이기 때문에 입력한 내용이 이미지 아래에 보이는 캡션과는 차이점이 있습니다. 대체 텍스트는 글쓰기 모드를 html 모드로 바꾸고 알트 태그를 찾으실 수 있습니다.

html 모드 알트 태그 확인 화면 (alt tag)

---

티스토리 이미지 캡션과 대체 텍스트 입력하는 방법 요약

티스토리 글쓰기에서 사용하는 이미지들에 대하여 이미지에 대한 설명에 해당되는 캡션(Caption)과 대체 텍스트(alt)를 입력하는 방법에 대해서 각각 알아보고 다음과 같이 요약해보았습니다. 거의 동일한 정보이지만 한 번에 입력할 수 없어 각각의 입력 기능을 이용하여 따로 입력할 수 있었습니다.

1. 티스토리 이미지 캡션 넣기 (caption tag)
   • 마우스로 이미지 선택하는 방법 (이미지 설명 부문)
   • 마우스로 이미지 선택 후 엔터 키 누르는 방법
2. 티스토리 이미지 대체 텍스트 입력 (alt tag))
   • 대체 텍스트 삽입 아이콘 이용 방법

---

티스토리에서 이미지 캡션과 대체 텍스트를 반드시 입력해야 하는가?

지금까지의 경험상, 아직가지 캡션과 대체 텍스트 정보의 입력 없이도 검색엔진 상위 노출은 가능하였다. 그렇기 때문에 현재는 캡션(caption)과 대체 텍스트(alt) 태그 정보들을 반드시 입력해야 한다는 것에 동의할 수는 없다. 

 

그러나 이미지만 덩그러니 있고 이미지에 대한 설명이 없으면 구독자의 이해도가 떨어지기 때문에 캡션 정보가 없는 것에 비해 있는 것이 가독성에 상당히 도움이 된다. 또한 시각장애인들이 사용하는 스크린 리더 프로그램은 대체 텍스트인 alt tag 정보가 없으면 이미지를 음성으로 변환하여 설명할 방법이 있기 때문에 앞으로 지속 적극적으로 사용해나가는 것을 추천합니다.

---

그럼 지금까지 티스토리 이미지 캡션과 대체 텍스트 입력하는 방법에 대해서 알아보았습니다. 두 가지 태그가 사용한 이미지에 대한 설명 정보에 해당되지만 티스토리 글을 읽을 때 캡션은 바로 보이지만 대체 텍스트는 시간 장애인용 스크린 리더를 통해서 확인이 가능하다는 점도 참고하시기 바랍니다.(Caption & Alt tag)

---

▶ 티스토리 블로그 강의 관련 글 바로가기 

[N잡] - 1강. 티스토리 블로그 글쓰기 편 강의 준비 및 계획 (마을활동가 역량 강화 교육과정)

1강. 티스토리 블로그 글쓰기 편 강의 준비 및 계획 (마을활동가 역량 강화 교육과정)

[N잡] - 2강. 티스토리 블로그 글쓰기 방법 편 (마을활동가 역량 강화 교육과정)

2강. 티스토리 블로그 글쓰기 방법 편 (마을활동가 역량 강화 교육과정)