목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Alt Tag의 역할
“Alt attributes”나 “Alt descriptions”라고도 불리는 Alt Tag는 접근성(예: 스크린 리더)과 SEO에 필수적인 요소입니다. Google과 같은 검색 엔진은 이 Alt Tag를 사용하여 이미지의 내용을 파악하기 때문에, 이를 잘 설정해두는 것이 중요합니다. 또한 불필요한 키워드 반복은 되려 패널티를 초래할 수 있으므로 피하는 게 좋습니다.
Note: 이미지의 내용을 간결한 문장으로 설명하는 게 좋으며, 문장은 마침표로 끝내면 접근성이 더 좋아집니다.
(출처, 출처)
캔버스에서 Alt 태그 추가하는 방법
Framer 캔버스에 직접 업로드한 이미지에는 아래와 같이 Alt 태그를 추가할 수 있습니다.
캔버스에서 이미지를 선택하기
오른쪽 패널의 Styles > Fill 항목을 클릭하기
팝업 창이 열리면, Alt 텍스트 입력란에 설명을 입력하기
CMS 이미지에 Alt 태그 추가하기
CMS를 통해 관리되는 이미지에도 Alt 태그를 설정할 수 있습니다.
CMS 페이지로 이동하기
수정하려는 콘텐츠를 선택하고 “
Choose Image” 클릭하기팝업 창에서 Alt 텍스트를 입력한 후 저장하기
CMS의 텍스트 필드에 alt 태그 추가
텍스트 필드에 이미지를 업로드할 때도 Alt 태그를 지정할 수 있습니다.
텍스트 필드 안에서 이미지를 업로드하기
이미지 위에 나타나는 “
Media Upload” 아이콘을 클릭하기팝업 창의 Alt 텍스트 입력란에 설명을 추가하기
마무리
Alt Tag는 사소해 보이지만, SEO의 접근성을 높이는 좋은 도구입니다. 사이트의 접근성을 높여 더 많은 사용자를 유입시키기 위해, 여러분의 웹사이트 이미지에 적합한 Alt Tag를 작성해 보세요.
본 글은 Framer 공식 블로그의 ‘How to add Alt Tags to images’를 번역·각색한 콘텐츠입니다.
