이미지의 Alt태그와 Title태그의 중요성

HTML에 쓰이는 이미지태그(img)에 보면 Alt속성Title속성이 있습니다. 이 두가지 속성의 존재를 아는 분들은 귀찮아서 안쓰고, 모르는 분들은 몰라서 못쓰고 하는 그런 속성이죠. 아시는 분들은 아시겠지만 의외로 쓸모 없어보이는 이 두가지 속성이 웹사이트 또는 블로그 유입에 영향을 끼칩니다.(국내는 그렇게 큰 영향은 없습니다만;;) 긴 글이긴 한데, 저도 한번 자세히 알고싶어서 번역해보았습니다.

이 글은 The Importance of Adding Alt Tags and Title Tags to Images on Your Website의 번역입니다.


검색엔진최적화(이하 SEO)의 전문가가 아닌 사람들에게는 ‘SEO’가 뭔가 대단해 보일 수 있습니다. 하지만 의외로 여러분이 기본적인 내용만 잘 따른다면, 관리하고 있는 웹사이트를 검색엔진(구글, 빙, 야후 등)에 성공적으로 최적화 시킬 수 있습니다.
웹디자이너나 웹개발자들조차 간과하고 넘어가는 중요한 사항 중 하나는 ‘웹사이트에 있는 이미지를 검색엔진에 최적화시키기’입니다. 이미지는 방문객 수에 꽤 큰 영향을 끼칠 수 있습니다.

사람들은 일상적으로 ‘구글 이미지 검색’과 같은 도구를 사용하여 웹서핑을 합니다. 만약 웹사이트에 올려진 이미지에 올바른 키워드로 검색엔진에 맞춰져있다면, 더 많은 트래픽을 유도할 수 있을 것입니다.

이미지의 Alt태그란?

Alt태그 또는 Alt속성은 이미지의 “대체문구”(alternative text)입니다. 보통 Alt태그는 이미지를 설명하는 목적으로 만들어집니다. 웹사이트라면 Alt태그는 사람들에게 보여지지 않습니다. 웹사이트에서 Alt태그가 사용되는 경우가 한가지 있는데, 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 쓰입니다. Alt태그는 시각장애인들에게 어떤 컨텐츠가 지금 보고있는 웹사이트에 있는지 알려주는데 도움을 줍니다. 반면에 시각장애인들을 제외한 다른 대부분의 사람들을 위해서는 검색엔진에 사용됩니다. 검색엔진이 여러분의 웹사이트를 크롤링할때, Alt태그를 이용하여 컨텐츠를 더 잘 이해하고 검색결과 순위에서 적절하게 색인합니다.

Alt태그를 “볼 수 있는” 곳이 한군데 있습니다. 바로 HTML형식의 이메일을 읽을때죠. HTML형식의 이메일을 Macy’sKohl’s와 같은 회사에서 받아본 적이 있나요? 가끔 이런 이메일들은 이미지를 보여줄 것인지 물어봅니다. 그러면 여러분은 상단의 어딘가를 클릭해서 이미지를 표시합니다. 이렇게 이미지를 표시하기 전에 스크롤을 내려보면 이미지의 배치와 그 안에 있는 글을 볼 수 있을 것입니다(Alt태그가 있다면 말이죠)

Alt태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

이미지의 Title태그란?

Title태그는 간단하게 말하면 이미지의 제목입니다. 웹사이트에 있는 이미지에 마우스를 올리면 나오는 문구를 본 적이 있나요? 바로 그 문구는 이미지의 Title태그가 표시되는 것입니다. Title태그의 가장 큰 목적은 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 좀 더 제공하기 위함입니다. Title태그는 이미지 이외에 다른 웹페이지를 링크할때도 쓰입니다. 물론 이 경우에도 링크된 컨텐츠에 마우스커서를 올리면 Title태그의 내용을 볼 수 있습니다. 보이지 않는 Alt태그에는 딱히 완전한 문구를 넣을 필요가 없지만, Title태그는 여러분의 독자가 볼 수 있기 때문에 정확한 키워드와 완전한 문구가 들어가야 합니다.

Title태그는 3~5개정도의 단어로 구성되어야 합니다. 어떤 사람들은 미련하게 긴 문장(문단)을 Title태그에 넣습니다. Title태그는 짧으면서 유익해야 합니다. Alt태그에서 이야기했던 SEO가 Title태그에도 같이 적용됩니다.

Title태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

Alt태그와 Title태그 사용의 장점

Alt태그와 Title태그로 이미지를 최적화했을 때 얻을 수 있는 장점은 다음과 같습니다.

  • 검색유입의 증가
  • 웹사이트에 대한 높은 품질의 검색
  • 더 많은 유효방문자

Alt태그와 Title태그를 적용한다고 해서 다양한 이익을 가져다 주지는 않습니다. 하지만, 가장 큰 장점은 검색유입의 (꽤 큰) 증가입니다. 잠깐만 생각해보세요. 여러분 웹사이트의 트래픽과 관련한 문제에 두 손 놓고 있을건가요? 여러분들은 약 25% 더 트래픽을 높일 수 있습니다. 단지 지금 올려져 있는 이미지를 최적화하고 새로 업로드 할 이미지를 최적화하는 것만으로 말이죠. 특히 이미지검색으로 큰 효과를 볼 수 있을 것입니다.


국내사정에는 다 맞는다고 할 수는 없지만, 안하는 것보다는 낫다는 생각입니다. 네이버에서 안받아 주더라도 구글에서는 받아주겠죠?(…)

덧) 제목만 보고 번역해봤는데 어째 글이 좀 그렇네요.
덧2) 워드프레스에는 자동으로 Alt태그와 Title태그를 달아주는 플러그인도 있습니다.

에버노트, 간단하게 전자책(epub)으로 만들기

요새 에버노트 많이들 쓰시는 것으로 알고있습니다. 저도 요즘 아이패드에서 문서작성할때나 공부할때 많이 활용하고 있습니다. 저는 에버노트에 이것저것 정리한 내용이 많아 전자책으로 만들수 없을까 하다가 쉽게 만들 수 있다는 사실을 알게되었습니다.

준비물

에버노트 데스크탑 프로그램
‘내보내기’기능을 사용하기 위해 필요합니다.

Sigil
오픈소스 전자책 제작툴입니다.

에버노트 내보내기

에버노트 데스크탑 프로그램에서 ‘노트 내보내기’를 할 수 있습니다.

에버노트 데스크탑 프로그램을 실행하시고 원하는 노트를 클릭하신 후 마우스 오른쪽버튼 메뉴에서 ‘내보내기’를 누르면 됩니다. 여러노트도 가능합니다.

내보내기를 하실때 ‘단일 HTML 웹페이지’형식으로 하시고 ‘설정’에서 ‘노트 제목’을 체크해주시기 바랍니다.

정상적으로 내보내기가 완료된 것을 볼 수 있습니다. 이미지가 있다면, 같은 이름의 폴더가 하나 만들어지고 그곳에 이미지가 저장됩니다.

전자책 만들기

Sigil을 이용하면 간단하게 epub형식으로 만들 수 있습니다.

Sigil 실행 후 왼쪽 패널의 ‘Text’마우스 오른쪽 메뉴에서 ‘Add Existing Files’를 눌러 아까 내보내기 했던 HTML파일을 선택합니다.

신기하게도 이미지는 물론이고 노트별로 목차도 알아서 들어가는 모습을 볼 수 있습니다.

빈 화면인 ‘Section0001’은 삭제합니다.

‘Edit → Meta Editor’를 실행하여 제목과 저자명, 언어를 설정해줍니다. 그리고 ‘File → Save’로 저장해주시면 epub파일 완성입니다.

가독성비교: 에버노트 앱 VS 전자책(iBooks)

에버노트 앱은 읽는 쪽 보다는 노트의 작성이나 편집에 초점이 맞춰져있다보니 읽기 편한 구조는 아닙니다.

하지만 iBooks로 보면 훨씬 읽기가 편해집니다. 이 차이는 직접 확인해보시면 크게 느끼실겁니다.


다행히 에버노트를 HTML형식으로 쉽게 내보내기가 가능해서, 전자책으로도 쉽게 만들 수 있는 장점이 있네요.
저처럼 에버노트에 이것저것 열심히(?) 정리하시는 분들에게 좋은 팁이 되리라 생각합니다:)

덧) 이런 팁 올린다고 geek한건 아닌거죠? 그런거죠?(…)
덧2) Sigil에 대해서는 구글링하시면 참고할만한 글이 많습니다~