alt 태그 작성 기준 · 무엇을 적고 무엇을 비우나

alt 텍스트는 이미지가 화면에 보이지 않을 때 그 자리를 대신하는 문장이다. 스크린 리더는 이 문장을 소리 내어 읽고, 검색 엔진은 이 문장으로 이미지의 내용을 파악한다. 작성 기준은 한 줄로 요약된다. 이미지가 그 페이지에서 하는 일을 그대로 문장으로 옮기고, 하는 일이 없으면 alt를 빈 값(alt="")으로 둔다. 사진은 무엇이 찍혀 있는지, 버튼과 아이콘은 누르면 무엇이 일어나는지, 차트는 그 차트가 말하는 결론을 적는다. 이미지의 겉모습이나 파일명, 노리는 검색어를 적는 자리가 아니다. 접근성 기준과 검색 기준이 서로 다른 문장을 요구하는 경우는 생각보다 드물고, 충돌할 때는 듣는 사람 쪽을 따르는 편이 결과적으로 검색에도 낫다.

alt 텍스트는 무엇을 적는 자리인가

alt는 <img> 태그의 속성이다. 이미지가 로드되지 않거나, 이미지를 볼 수 없는 사람이 페이지를 읽을 때 이미지 대신 전달되는 텍스트다.

읽는 주체는 크게 셋이다.

첫째, 스크린 리더 사용자. 시각장애가 있는 사람이 웹을 쓸 때 화면 낭독 프로그램이 문서를 위에서 아래로 읽어 준다. 이미지 차례가 오면 alt에 적힌 문장을 읽는다.

둘째, 검색 엔진. 구글 이미지 가이드는 대체 텍스트와 컴퓨터 비전 알고리즘, 페이지 콘텐츠를 함께 사용해 이미지의 주제를 파악한다고 밝힌다. 픽셀만으로 문맥을 온전히 읽어내기는 어렵기 때문에, 사람이 붙인 설명이 여전히 쓰인다.

셋째, 이미지가 깨졌을 때의 일반 방문자. 이미지 서버가 죽거나 데이터 절약 모드에서 이미지가 차단되면 브라우저는 alt를 대신 표시한다.

세 주체가 원하는 문장이 거의 같다는 점이 이 작업을 단순하게 만든다. 접근성을 위해 잘 쓴 alt는 대부분 검색에도 잘 맞는다. 반대로 검색만 노리고 쓴 alt는 대개 양쪽에서 실패한다.

이미지에 텍스트 대체를 제공하는 일은 웹 접근성 지침이 공통으로 요구해 온 항목이다. alt는 선택적인 마케팅 장치가 아니라 문서의 기본 요건에 가깝다는 뜻이다.

접근성과 검색은 왜 대부분 같은 방향을 보나

구글이 콘텐츠 평가 기준으로 반복해서 말하는 것은 사람에게 유용한가다. alt도 예외가 아니다. 이미지를 못 보는 사람에게 정보를 정확히 전달하는 문장이라면, 그 문장은 이미지가 무엇인지 검색 엔진에도 정확히 설명한다.

두 목적이 갈리는 지점은 하나다. 검색 담당자는 키워드를 넣고 싶어 하고, 듣는 사람은 키워드가 아니라 정보를 원한다.

이 충돌은 실제로는 충돌이 아니다. 이미지가 정말 그 키워드에 해당하는 대상을 담고 있다면 자연스러운 설명 안에 키워드가 이미 들어간다. 자연스럽게 안 들어간다면 그 이미지는 그 키워드와 상관이 없는 이미지다. 그때 필요한 건 alt 수정이 아니라 이미지 교체다.

예외는 있다. 브랜드 로고처럼 이미지의 의미가 곧 고유명사인 경우, 설명적인 문장보다 상표명 하나가 더 정확하다. 이때는 짧게 쓰는 쪽이 맞다.

장식용 이미지는 alt를 비운다, 지우지 않는다

가장 자주 틀리는 지점이다. 정보가 없는 장식용 이미지는 alt를 아예 없애는 것이 아니라 빈 문자열로 둔다.

<!-- 정보가 없는 장식 -->
<img src="divider.png" alt="">

<!-- 잘못된 처리 -->
<img src="divider.png">

차이가 왜 중요한가. alt=""는 스크린 리더에 이 이미지는 건너뛰어도 된다는 뜻으로 전달되고, 낭독기는 조용히 지나간다. alt 속성 자체가 없으면 낭독기는 대체할 정보를 찾지 못해 파일명을 읽어 주는 식으로 동작하기도 한다. hero-bg-final-v3-copy.png가 소리로 읽히는 상황을 상상하면 된다.

빈 alt는 게으름이 아니라 명시적인 선언이다. 이 이미지는 의미가 없다고 작성자가 판단했다는 기록이다.

장식인지 아닌지 헷갈릴 때 쓰는 판단법이 하나 있다. 그 이미지를 지웠을 때 문단의 뜻이 달라지는지 본다. 달라지지 않으면 장식이다.

CSS 배경 이미지로 넣은 그래픽은 처음부터 alt가 없다. 구글 이미지 가이드도 CSS 이미지는 색인을 생성하지 않는다고 못 박아 두었다. 정보가 있는 이미지를 배경으로 넣으면 그 정보는 낭독기와 검색 양쪽에서 함께 사라진다는 뜻이다. 정보성 이미지는 <img>로 넣는 것이 원칙이다.

이미지 종류별로 무엇을 적어야 하나

이미지가 페이지에서 맡은 역할이 다르면 alt에 들어갈 내용도 달라진다.

마지막 줄이 의외로 중요하다. 캡션이나 바로 앞 문장이 이미 이미지를 설명하고 있다면, alt에 같은 말을 또 넣으면 낭독기 사용자는 같은 문장을 두 번 듣는다. 중복은 정보가 아니라 소음이다.

버튼과 아이콘은 생김새가 아니라 기능을 적는다

이미지가 클릭 가능한 요소라면 기준이 바뀐다. 그 이미지는 무엇처럼 생겼는가가 아니라 누르면 무슨 일이 생기는가를 전달해야 한다.

돋보기 아이콘의 alt는 "돋보기"가 아니라 "검색"이다. 종이비행기 아이콘은 "종이비행기"가 아니라 "보내기"다. 세 줄 아이콘은 "햄버거"가 아니라 "메뉴 열기"다.

듣는 사람 입장에서 생각하면 당연하다. 화면을 못 보는 사람에게 "돋보기"라고 말해 주면 그 사람은 그게 검색인지 확대인지 알 수 없다.

같은 원리로, 링크를 감싼 이미지의 alt는 링크의 목적지를 담는 것이 좋다. 헤더 로고가 홈으로 가는 링크라면 "회사명 홈"처럼 쓴다. 구글 이미지 가이드도 이미지를 링크로 쓸 때 대체 텍스트가 앵커 텍스트처럼 쓰일 수 있다고 설명한다.

버튼 안에 아이콘과 텍스트가 나란히 있는 경우는 반대다. 텍스트가 이미 "저장"이라고 말하고 있으니 아이콘 이미지는 alt=""로 비운다. 안 그러면 "저장 저장"으로 읽힌다.

차트는 "그래프 이미지"가 아니라 결론을 적는다

데이터 시각화는 alt를 가장 많이 낭비하는 구역이다. "월별 매출 그래프"라고 적힌 alt를 자주 본다. 이 문장은 이미지를 못 보는 사람에게 아무것도 주지 않는다. 그래프가 있다는 사실은 이미 알고 있고, 알고 싶은 건 그 그래프가 무엇을 말하느냐다.

기준은 이렇다. 차트의 alt에는 그 차트를 보고 독자가 가져가야 할 결론을 적는다. 축 이름이나 차트 종류가 아니다.

데이터 포인트가 많아 한 문장에 담기지 않으면 두 단계로 나눈다. alt에는 결론을, 본문이나 표에는 실제 수치를 둔다. 표로 옮겨 두면 낭독기 사용자가 값을 하나씩 확인할 수 있고, 검색 엔진도 그 수치를 텍스트로 읽는다. 이미지 안에만 있는 숫자는 어느 쪽에도 닿지 않는다.

이건 접근성 조치인 동시에 검색 조치다. 이미지 안에 갇힌 데이터를 텍스트로 꺼내는 작업이기 때문이다.

"이미지:"로 시작하지 않는다

alt를 "이미지:", "사진:", "그림 -"으로 시작하는 습관이 있다. 지워야 한다.

대부분의 스크린 리더는 <img> 요소를 만나면 그래픽 또는 이미지라고 먼저 알린 다음 alt를 읽는다. 그래서 "이미지: 원목 책상"은 "이미지 이미지 원목 책상"으로 들린다.

같은 이유로 "~의 사진", "~을 보여 주는 그림" 같은 꼬리표도 대개 불필요하다. 다만 예외가 있다. 매체 자체가 정보인 경우, 예를 들어 1970년대 흑백 신문 스크랩이나 손으로 그린 스케치처럼 형식이 내용의 일부일 때는 그 형식을 적는 것이 맞다.

키워드를 밀어 넣으면 두 쪽 모두에서 손해다

alt에 키워드를 나열하는 방식은 오래된 관행이다. 구글 이미지 가이드는 alt 속성을 키워드로 채우는 것을 두고 사용자 환경에 악영향을 미치고 스팸 사이트로 간주될 수 있다고 적어 두었다.

검색 쪽에서 보면 얻을 것이 없다. 구글이 alt를 참고하는 이유 자체가 이미지의 주제를 파악하기 위해서인데, 단어를 이어 붙인 문자열은 그 주제를 말해 주지 않는다.

듣는 쪽에서 보면 더 나쁘다. "강남 치과 임플란트 가격 강남 임플란트 잘하는 곳 치과 추천"이 소리로 읽히는 경험을 한번 상상해 보면 된다. 정보를 얻으려던 사람에게 소음을 들려주는 일이다.

기준은 간단하다. 그 alt를 소리 내어 읽었을 때 문장으로 들리면 통과, 목록으로 들리면 탈락이다.

글자가 들어간 이미지는 어떻게 처리하나

배너, 인포그래픽, 가격표 캡처처럼 이미지 안에 글자가 있는 경우가 있다. 이때 원칙은 이미지 속 글자를 텍스트로도 존재하게 만드는 것이다.

가장 좋은 해법은 애초에 글자를 이미지로 만들지 않는 것이다. 텍스트로 넣으면 확대해도 깨지지 않고, 복사할 수 있고, 번역되고, 검색되고, 낭독된다. 이미지로 만들면 그 다섯 가지를 전부 포기하는 셈이다.

디자인상 이미지를 써야 한다면 최소한 같은 내용이 페이지 어딘가에 텍스트로 있어야 한다.

고치기 전과 후 예시

실제로 고칠 때 어떤 모양이 되는지가 규칙 열 줄보다 빠르다.

패턴이 보인다. 고친 문장은 전부 그 이미지 하나를 다른 이미지와 구별해 주는 문장이다. "로고", "버튼", "그래프"처럼 어느 페이지에 붙여도 말이 되는 단어는 alt로서 가치가 없다.

자주 나오는 실수와 대응

alt와 캡션, 파일명, 주변 텍스트의 역할 분담

alt 하나로 다 해결하려 들면 문장이 길어지고 읽기 나빠진다. 네 자리가 각각 다른 일을 한다.

alt는 이미지를 못 보는 사람에게 이미지를 대신한다. 이미지가 없어도 문서가 완결되게 만드는 장치다.

캡션은 모두에게 보이는 보충 설명이다. 출처, 촬영 시점, 맥락처럼 이미지 자체에는 없지만 알면 좋은 정보를 담는다.

파일명은 사람이 거의 읽지 않지만 검색 엔진은 참고한다. IMG_2841.jpg보다 wooden-floor-desk.jpg가 낫다. 다만 파일명 최적화는 alt를 대신하지 못한다. 우선순위는 alt가 위다. 파일을 다루는 김에 용량도 같이 정리해 두면 좋은데, 리사이즈와 압축의 순서는 이미지 용량 줄이는 기준에 따로 적었다.

주변 텍스트, 즉 이미지 앞뒤 문단은 검색 엔진이 이미지의 주제를 판단할 때 함께 본다. 그래서 이미지는 관련 내용 옆에 배치하는 편이 좋다. 글 맨 아래에 이미지를 몰아 두면 문맥이 끊긴다.

길이는 얼마나 길어야 하나

몇 자 이내라는 숫자를 기준으로 삼는 것은 실무에서 별 도움이 안 된다. 소리 내어 읽었을 때 견딜 만한 길이인지를 기준으로 삼는 편이 낫다.

실무에서 쓰는 감각은 이렇다. 대부분의 이미지는 한 문장으로 충분하다. 두 문장이 필요하면 그중 하나는 본문에 있어야 할 내용일 가능성이 높다. 세 문장을 넘어가면 그 이미지는 alt가 아니라 본문 설명이 필요한 이미지다.

복잡한 다이어그램이나 인포그래픽이 여기 해당한다. 이런 이미지는 alt에 요약을 두고, 전체 설명은 본문이나 접이식 영역에 텍스트로 두는 방식이 낫다. 낭독기 사용자는 요약만 듣고 넘어갈지 자세히 볼지 스스로 고를 수 있고, 검색 엔진은 그 상세 텍스트를 본문으로 읽는다.

반대로 너무 짧아도 문제다. "차트", "사진", "제품"처럼 한 단어짜리 alt는 대개 아무 정보가 없다.

이미 발행한 글은 어떤 순서로 점검하나

이미 발행된 글이 수십 개라면 한꺼번에 다 고칠 수는 없다. 순서를 정해서 하는 편이 낫다.

첫째, 유입이 가장 많은 페이지 다섯 개를 먼저 연다. 어느 페이지가 실제로 검색에서 읽히는지는 블로그 방문자 줄었을 때 원인 찾는 순서에서 확인하는 방법을 다뤘다. 브라우저 개발자 도구에서 이미지 요소를 훑거나, 이미지를 잠시 차단해 보면 alt가 그대로 드러난다.

둘째, 그 페이지의 이미지를 세 무더기로 나눈다. 정보가 있는 것, 클릭되는 것, 장식.

셋째, 장식부터 처리한다. 전부 alt=""로 만든다. 가장 빠르고 체감 효과가 크다.

넷째, 클릭되는 이미지를 처리한다. 생김새 대신 동작 이름으로 바꾼다.

다섯째, 정보성 이미지를 처리한다. 차트가 있으면 결론 문장을 쓰고, 이미지 속 숫자는 본문 표로 옮긴다.

여섯째, 새 글 작성 템플릿에 alt 칸을 넣는다. 발행 전에 채우게 하면 나중에 되돌아와 고칠 일이 줄어든다.

이 순서를 지키면 완벽하지는 않아도 상태는 확실히 나아진다. 그리고 alt는 완벽할 필요가 없다. 비어 있는 것보다 대충이라도 정확한 편이 훨씬 낫다.

도구로 자동 생성한 alt는 믿어도 되나

이미지 인식으로 alt를 자동 생성해 주는 도구가 늘었다. 초안으로는 쓸 만하다. "책상 위에 놓인 노트북"처럼 눈에 보이는 것을 적는 데는 무리가 없다.

한계는 맥락이다. 자동 생성기는 그 이미지가 이 페이지에서 왜 여기 있는지 모른다. 같은 대시보드 스크린샷이라도 기능을 설명하는 글에서는 "키워드 목록 화면"이, 성과를 설명하는 글에서는 "노출이 늘어난 추이"가 맞는 alt다. 픽셀만 봐서는 구별할 수 없다.

그래서 자동 생성은 초안 생성기로 쓰고, 발행 전에 사람이 문맥을 반영해 고치는 방식을 권한다. 특히 차트, 아이콘, 로고 세 종류는 자동 생성이 빗나가기 쉽다. 각각 결론, 기능, 고유명사를 요구하는데 셋 다 이미지 표면에 없는 정보이기 때문이다.

자주 묻는 질문

alt와 title 속성은 무엇이 다릅니까

alt는 이미지를 대신하는 텍스트이고, title은 마우스를 올렸을 때 뜨는 툴팁입니다. title은 터치 기기에서 표시되지 않고 낭독기 동작도 일관되지 않아, 필수 정보를 title에만 담으면 안 됩니다. 접근성과 검색에 필요한 것은 alt입니다. title은 없어도 되는 보조 장치로 보시면 됩니다.

장식용 이미지가 아닌지 애매할 때는 어떻게 판단합니까

이미지를 지웠다고 가정하고 문단을 다시 읽어 보십시오. 뜻이 그대로면 장식이므로 빈 alt로 둡니다. 뜻이 흐려지거나 빠진 정보가 생기면 정보성 이미지이므로 그 빠진 정보를 alt에 적으면 됩니다. 판단이 계속 애매하면 정보성으로 처리하는 편이 안전합니다. 불필요한 설명은 성가신 정도지만, 빠진 설명은 정보 손실입니다.

alt를 고치면 검색 순위가 오릅니까

단독으로 순위를 끌어올리는 항목으로 기대하지 않으시는 편이 좋습니다. alt는 이미지 검색 노출과 본문 문맥 이해에 기여하는 여러 신호 중 하나입니다. 다만 이미지 검색 유입이 중요한 업종이거나, 이미지 안에만 있던 정보를 텍스트로 꺼내는 작업을 함께 하는 경우에는 체감되는 변화가 생기기도 합니다. 순위보다는 문서의 완성도를 올리는 작업으로 접근하시길 권합니다.

같은 이미지를 여러 글에 쓸 때 alt도 같아야 합니까

같을 필요는 없습니다. alt는 이미지의 고정된 속성이 아니라 그 자리에서의 역할을 적는 것이므로, 문맥이 다르면 다르게 쓰는 것이 맞습니다. 같은 스크린샷이라도 기능 설명 글과 성과 설명 글에서 강조할 지점이 다릅니다. 다만 로고처럼 의미가 고정된 이미지는 전 페이지에서 통일하는 편이 낫습니다.

이모지나 SVG 아이콘에도 alt가 필요합니까

<img>로 넣은 SVG라면 동일하게 alt가 필요합니다. 인라인 SVG는 alt 속성이 없으므로 접근성 속성으로 이름을 주거나, 장식이면 보조기기에서 숨기는 처리를 합니다. 본문에 직접 쓴 이모지는 낭독기가 이름을 읽어 주므로 별도 처리가 필요 없지만, 문장의 의미가 이모지에만 걸려 있지 않도록 쓰시는 편이 안전합니다.

참고 자료

• Google 이미지 SEO 권장사항 — alt 텍스트 작성과 이미지 색인에 대한 구글 공식 가이드
• 사람에게 유용한 콘텐츠 만들기 — 검색 엔진이 콘텐츠의 유용성을 평가하는 기준