구조·마크업 · 공식 문서
alt 태그 작성법, 장식 이미지 빈 alt 판단 기준
alt 는 이미지가 그 페이지에서 전하는 뜻을 짧은 문장 하나로 씁니다. 장식용 이미지는 alt 속성을 지우지 말고 alt="" 로 비워 두며, 가능하면 CSS 배경으로 넣습니다.
alt 는 <img> 태그에 붙는 대체 텍스트로, 이미지를 볼 수 없는 사람과 검색엔진에게 이미지의 뜻을 글로 알려 줍니다. 화면 낭독 프로그램이 이 글을 읽습니다.
그래서 쓰는 기준은 하나입니다. 이미지가 사라져도 페이지의 뜻이 그대로 전해지게 쓰는 것입니다.
발견 01
구글은 alt 를 이미지 정보에서 가장 중요한 속성으로 적었고, 키워드 나열은 스팸으로 볼 수 있다고 했습니다
The most important attribute when it comes to providing more metadata for an image is the alt text (text that describes an image), which also improves accessibility for people who can't see images on web pages, including users who use screen readers or have low-bandwidth connections.
이미지 정보를 줄 때 가장 중요한 속성은 대체 텍스트이고, 화면 낭독 프로그램 사용자나 느린 연결 사용자처럼 이미지를 볼 수 없는 사람의 접근성도 높입니다.
| 구글이 적은 것 | 원문 |
|---|---|
| 구글이 alt 를 쓰는 곳 | Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.구글은 대체 텍스트와 컴퓨터 비전, 페이지 내용을 함께 써서 이미지의 주제를 파악합니다. |
| 링크 이미지 | Also, alt text in images is useful as anchor text if you decide to use an image as a link.이미지를 링크로 쓰면 대체 텍스트가 앵커 텍스트 역할을 합니다. |
| 쓰는 법 | When writing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page.대체 텍스트는 페이지 맥락에 맞게 키워드를 적절히 쓴 유용하고 정보가 담긴 글로 씁니다. |
| 피할 것 | Avoid filling alt attributes with keywords (also known as keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.alt 를 키워드로 채우면 사용자 경험이 나빠지고 사이트가 스팸으로 보일 수 있으니 피합니다. |
| CSS 이미지 | Google doesn't index CSS images.구글은 CSS 이미지를 색인하지 않습니다. |
| 접근성 기준 | Also consider the accessibility of your alt text, per W3 guidelines.대체 텍스트의 접근성은 W3 지침도 함께 봅니다. |
| 구글 예시 | 코드 |
|---|---|
| 나쁜 예(alt 없음) | <img src="puppy.jpg"/> |
| 나쁜 예(키워드 나열) | <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/> |
| 나은 예 | <img src="puppy.jpg" alt="puppy"/> |
| 가장 좋은 예 | <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/> |
발견 02
alt 를 쓸지 비울지는 이미지가 하는 일로 정하고, 종류는 6가지로 나뉩니다
The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image.
대체 텍스트는 이미지가 눈으로 전하는 뜻이나 내용을 전해야 하며, 보통 이미지를 글자 그대로 묘사하는 것이 아닙니다.
| 이미지 종류 | alt 에 쓸 것 | 예 | 원문 |
|---|---|---|---|
| 정보를 주는 사진·그림 | 이미지가 전하는 뜻을 짧게 | alt="스테인리스 원심 펌프 정면" | Use a brief description of the image in a way that conveys that meaning in the alt attribute.이미지가 전하는 뜻이 드러나게 짧게 설명하는 글을 alt 에 씁니다. |
| 링크·버튼으로 쓰는 이미지 | 이동할 곳이나 동작 | alt="견적 문의 페이지로 이동" | Use the alt attribute to communicate the destination of the link or action taken.링크가 가는 곳이나 버튼이 하는 동작을 alt 에 씁니다. |
| 본문에 없는 글자가 든 이미지 | 이미지 속 글자 그대로 | alt="주말 무료 배송" | Use the alt attribute to include the text of the image.이미지 속 글자를 alt 에 그대로 씁니다. |
| 그래프·도표처럼 내용이 많은 이미지 | 무엇의 그래프인지 짧게, 수치는 본문이나 표로 | alt="월별 방문자 수 그래프" | Include the information contained in the image elsewhere on the page.이미지에 담긴 정보를 페이지의 다른 곳에도 적습니다. |
| 옆 글과 같은 내용의 이미지 | 비움 | alt="" | Use an empty alt attribute.빈 alt 속성을 씁니다. |
| 테두리·배경·분위기용 장식 이미지 | 비움, 가능하면 CSS 배경으로 | alt="" | In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Where possible, decorative images should be provided using CSS background images instead.장식 이미지는 화면 낭독 프로그램이 건너뛰도록 alt="" 로 비워 둡니다. 가능하면 장식 이미지는 CSS 배경 이미지로 넣습니다. |
| 순서 | W3C 판단 트리의 질문 |
|---|---|
| 1 | Does the image contain text?이미지에 글자가 들어 있나요? |
| 2 | Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?링크나 버튼에 쓰인 이미지이고, 이미지가 없으면 무엇을 하는 링크·버튼인지 알기 어렵나요? |
| 3 | Does the image contribute meaning to the current page or context?이미지가 지금 페이지나 맥락에 뜻을 더하나요? |
| 4 | Is the image purely decorative or not intended for users?순수한 장식이거나 사용자에게 보여 줄 목적이 아닌 이미지인가요? |
발견 03
장식 이미지 2종류는 alt="" 로 비우고, alt 속성 자체를 지우면 안 됩니다
Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.
alt 속성을 빼는 것도 답이 아닙니다. alt 가 없으면 일부 낭독 프로그램이 이미지 파일 이름을 읽습니다.
| W3C가 적은 것 | 원문 |
|---|---|
| 장식 이미지의 뜻 | Decorative images don’t add information to the content of a page.장식 이미지는 페이지 내용에 정보를 더하지 않는 이미지입니다. |
| 빈 alt | In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers.이런 이미지는 화면 낭독 프로그램 같은 보조 기술이 건너뛰도록 빈 alt(alt="")를 줍니다. |
| 누가 판단하나 | Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page.장식인지 정보인지는 이미지를 넣은 이유를 아는 작성자만 판단할 수 있습니다. |
| 넣는 방법 | Where possible, decorative images should be provided using CSS background images instead.가능하면 장식 이미지는 CSS 배경 이미지로 넣습니다. |
장식 이미지를 CSS 배경으로 넣으면 검색과 접근성 기준이 함께 맞습니다. 구글은 CSS 이미지를 색인하지 않고, W3C도 장식 이미지는 가능하면 CSS 배경으로 넣으라고 적었습니다.
반대로 상품 사진처럼 이미지 검색에 나오길 바라는 이미지는 <img> 로 넣고 alt 를 씁니다.
발견 04
같은 alt 기준이라도 B2B·B2C·B2G 는 많이 틀리는 이미지가 다릅니다
예시 ① 제품 사진과 인증서 이미지가 많은 장비 제조사(B2B)
제품 사진 수백 장의 alt 가 모두 회사 이름입니다. 제품명과 모델명, 보이는 면(정면·측면)으로 사진마다 다르게 고칩니다.
인증서 이미지에는 인증 이름과 번호가 글자로만 들어 있습니다. 본문에 같은 내용이 없다면 alt 에 이미지 속 글자를 그대로 적습니다.
예시 ② 상세 페이지를 통이미지로 만든 쇼핑몰(B2C)
상품 설명 전체가 글자가 든 긴 이미지 한 장입니다. alt 한 줄로는 다 담을 수 없으니, 핵심 정보(소재·사이즈·세탁법)를 본문 글로 옮깁니다.
구분선과 배경 무늬 이미지는 alt="" 로 비웁니다. 상품 사진에는 상품명과 색상을 씁니다.
예시 ③ 아이콘 메뉴가 많은 공공기관 누리집(B2G)
첫 화면의 아이콘 메뉴가 글자 없이 그림뿐이고 alt 도 「아이콘」입니다. 링크로 쓰는 이미지이므로 「민원 신청 바로가기」처럼 이동할 곳을 씁니다.
아이콘 옆에 같은 글이 이미 있으면 아이콘은 alt="" 로 비웁니다. 같은 말을 두 번 읽지 않게 됩니다.
그럼 우리 사이트 이미지는 어떤 순서로 고치나요?
- 대표 페이지를 열고 페이지 소스 보기에서 <img 를 찾아, alt 가 없거나 모두 같은 값인 이미지를 적습니다.
- 이미지마다 위 판단 기준 표의 6가지 중 어디에 드는지 정합니다.
- 정보·링크·글자 이미지는 alt 를 쓰고, 장식 이미지는 alt="" 로 비웁니다.
- 키워드를 늘어놓은 alt 는 이미지가 실제로 보여 주는 내용 한 문장으로 바꿉니다.
- 그래프·도표는 수치를 본문이나 표로도 적습니다.
- 브라우저 개발자 도구의 접근성 점검으로 alt 가 빠진 이미지가 남았는지 다시 봅니다.
조사 방법
- Google Search Central 「Image SEO best practices」 (문서 수정일 2026-03-02) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/appearance/google-images
- W3C Web Accessibility Initiative (WAI) 「An alt Decision Tree」 (문서 수정일 2024-05-13) · 최종 확인일 2026-10-25 · https://www.w3.org/WAI/tutorials/images/decision-tree/
- W3C Web Accessibility Initiative (WAI) 「Decorative Images」 (문서 수정일 2019-07-27) · 최종 확인일 2026-10-25 · https://www.w3.org/WAI/tutorials/images/decorative/
- W3C Web Accessibility Initiative (WAI) 「Informative Images」 (문서 수정일 2019-06-17) · 최종 확인일 2026-10-25 · https://www.w3.org/WAI/tutorials/images/informative/
- 이미지 종류 6가지는 W3C 판단 트리의 질문과 답을 종류별로 바꿔 묶은 것입니다. 묶는 방식과 예 문구는 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 구글 원문은 영어판(hl=en)이고, 「대체 텍스트」 표기는 같은 문서 한국어판(hl=ko)을 따랐습니다. W3C 문서는 영어 원문입니다.