블로그 이미지 대체텍스트·캡션 규칙
의미 없는 alt 텍스트를 막고 스크린리더와 검색엔진 양쪽이 이미지 맥락을 얻게 하는 규칙.
내 환경에 맞게 만들기
무엇을 하는 규칙인가
이 규칙을 쓰는 이유
AI에게 이미지 대체텍스트(alt)를 맡기면 "이미지", "스크린샷", 파일명 그대로("IMG_2034.png") 같은 **의미 없는 텍스트**가 나온다. 스크린리더 사용자는 이 이미지가 왜 거기 있는지 전혀 알 수 없고, 검색엔진도 맥락을 얻지 못한다. 아래 규칙은 이미지가 안 보이는 사람에게도 **같은 정보**가 전달되게 만드는 것이 목적이다.
alt는 이미지가 전달하는 정보를 쓴다
"이미지", "그림", 파일명을 그대로 쓰지 않는다. **이 이미지가 본문에서 어떤 역할을 하는지**를 쓴다. - 이렇게 쓰지 않는다: `alt="스크린샷"` - 이렇게 쓴다: `alt="배포 파이프라인에서 스테이징 헬스체크 단계가 실패로 표시된 로그 화면"`
장식용 이미지는 빈 alt로 남긴다
내용과 무관한 장식용 이미지(구분선, 배경 패턴 등)에 억지로 설명을 채우지 않는다. **빈 alt(`alt=""`)로 남겨 스크린리더가 건너뛰게** 한다. 이건 실패가 아니라 규칙이다. - 이렇게 쓰지 않는다: `alt="파란색 그라데이션 배경 이미지"` (내용과 무관한 장식) - 이렇게 쓴다: `alt=""` (장식용임을 명시)
alt와 캡션의 역할을 구분한다
alt는 이미지가 안 보일 때의 대체이고, 캡션은 화면에 보이는 부가 설명이다. **같은 문장을 그대로 복붙하지 않는다.** - 이렇게 쓰지 않는다: alt와 캡션에 똑같이 `"성능 비교 그래프"`만 넣는다 - 이렇게 쓴다: `alt="인덱스 적용 전후 쿼리 응답 시간 막대 그래프, 200ms에서 12ms로 감소"`, 캡션 `"그림 3. 부하 테스트 환경: PostgreSQL 15, 데이터 100만 건"`
alt에 키워드를 욱여넣지 않는다
검색 노출을 노리고 관련 키워드를 나열하지 않는다. **사람이 읽어도 자연스러운 한 문장**이어야 한다. - 이렇게 쓰지 않는다: `alt="성능 최적화 쿼리 최적화 인덱스 데이터베이스 성능개선 방법"` - 이렇게 쓴다: `alt="인덱스 추가 전후 쿼리 실행 계획 비교"`
분량
- alt는 한두 문장 이내로 쓴다. 자세한 맥락(측정 환경, 출처 등)은 캡션이나 본문에 쓴다. - 정보 전달용 표·차트 이미지는 alt에 핵심 수치를 요약한다. 표 전체를 옮기지 않는다.
쓰기 전에 확인할 것
- alt에 "이미지", "그림", 파일명 같은 의미 없는 텍스트가 없는가 - 장식용 이미지는 빈 alt로 처리했는가 - alt와 캡션이 같은 문장을 복붙한 게 아닌가 - alt에 키워드가 자연스럽지 않게 나열되어 있지 않은가 흔히 나오는 실패 예시는 `bad-examples.md`에 정리해 두었다. 처음 몇 번은 그것과 비교해 보면 빠르다.
원문 전문
넣기 전에 전부 읽어보실 수 있습니다. 이 파일은 AI에게 지시를 주는 문서입니다. 내용을 확인하고 넣으세요.
item.md
## 이 규칙을 쓰는 이유
AI에게 이미지 대체텍스트(alt)를 맡기면 "이미지", "스크린샷", 파일명 그대로("IMG_2034.png") 같은 **의미 없는 텍스트**가 나온다. 스크린리더 사용자는 이 이미지가 왜 거기 있는지 전혀 알 수 없고, 검색엔진도 맥락을 얻지 못한다.
아래 규칙은 이미지가 안 보이는 사람에게도 **같은 정보**가 전달되게 만드는 것이 목적이다.
## alt는 이미지가 전달하는 정보를 쓴다
"이미지", "그림", 파일명을 그대로 쓰지 않는다. **이 이미지가 본문에서 어떤 역할을 하는지**를 쓴다.
- 이렇게 쓰지 않는다: `alt="스크린샷"`
- 이렇게 쓴다: `alt="배포 파이프라인에서 스테이징 헬스체크 단계가 실패로 표시된 로그 화면"`
## 장식용 이미지는 빈 alt로 남긴다
내용과 무관한 장식용 이미지(구분선, 배경 패턴 등)에 억지로 설명을 채우지 않는다. **빈 alt(`alt=""`)로 남겨 스크린리더가 건너뛰게** 한다. 이건 실패가 아니라 규칙이다.
- 이렇게 쓰지 않는다: `alt="파란색 그라데이션 배경 이미지"` (내용과 무관한 장식)
- 이렇게 쓴다: `alt=""` (장식용임을 명시)
## alt와 캡션의 역할을 구분한다
alt는 이미지가 안 보일 때의 대체이고, 캡션은 화면에 보이는 부가 설명이다. **같은 문장을 그대로 복붙하지 않는다.**
- 이렇게 쓰지 않는다: alt와 캡션에 똑같이 `"성능 비교 그래프"`만 넣는다
- 이렇게 쓴다: `alt="인덱스 적용 전후 쿼리 응답 시간 막대 그래프, 200ms에서 12ms로 감소"`, 캡션 `"그림 3. 부하 테스트 환경: PostgreSQL 15, 데이터 100만 건"`
## alt에 키워드를 욱여넣지 않는다
검색 노출을 노리고 관련 키워드를 나열하지 않는다. **사람이 읽어도 자연스러운 한 문장**이어야 한다.
- 이렇게 쓰지 않는다: `alt="성능 최적화 쿼리 최적화 인덱스 데이터베이스 성능개선 방법"`
- 이렇게 쓴다: `alt="인덱스 추가 전후 쿼리 실행 계획 비교"`
## 분량
- alt는 한두 문장 이내로 쓴다. 자세한 맥락(측정 환경, 출처 등)은 캡션이나 본문에 쓴다.
- 정보 전달용 표·차트 이미지는 alt에 핵심 수치를 요약한다. 표 전체를 옮기지 않는다.
## 쓰기 전에 확인할 것
- alt에 "이미지", "그림", 파일명 같은 의미 없는 텍스트가 없는가
- 장식용 이미지는 빈 alt로 처리했는가
- alt와 캡션이 같은 문장을 복붙한 게 아닌가
- alt에 키워드가 자연스럽지 않게 나열되어 있지 않은가
흔히 나오는 실패 예시는 `bad-examples.md`에 정리해 두었다. 처음 몇 번은 그것과 비교해 보면 빠르다.
references/bad-examples.md
# 흔한 실패 예시와 교정 이미지 alt·캡션에서 반복적으로 나오는 세 가지 패턴이다. 왼쪽이 자주 나오는 것, 오른쪽이 교정이다. ## 1. 의미 없는 alt **자주 나오는 것** > alt="이미지1" 스크린리더 사용자는 이 이미지가 로그 화면인지 그래프인지 전혀 알 수 없다. **교정** > alt="배포 파이프라인에서 스테이징 헬스체크 단계가 실패로 표시된 로그 화면" ## 2. 장식용 이미지에 억지로 채운 설명 **자주 나오는 것** > alt="회색과 흰색이 교차하는 물결 무늬 배경 장식" 내용과 무관한 장식인데 굳이 설명을 채우면 스크린리더 사용자는 본문과 상관없는 문장을 억지로 듣게 된다. **교정** > alt="" (장식용 이미지는 빈 alt로 남겨 건너뛰게 한다) ## 3. 키워드를 욱여넣은 alt **자주 나오는 것** > alt="성능 최적화 쿼리 최적화 인덱스 데이터베이스 성능개선 방법 총정리" 검색 노출을 노린 나열이지 사람이 읽을 문장이 아니다. 스크린리더로 들으면 무슨 뜻인지 알 수 없다. **교정** > alt="인덱스 적용 전후 쿼리 실행 계획 비교, 풀 스캔에서 인덱스 스캔으로 변경" ## 확인 순서 작성 후 위에서부터 훑으며 세 가지를 본다. 1. alt가 "이미지", "그림", 파일명 같은 텍스트인가 2. 장식용 이미지에 설명이 채워져 있는가 3. alt에 키워드가 문장이 아니라 나열로 들어 있는가 하나라도 걸리면 그 alt만 고친다. 전체 이미지를 다시 볼 필요는 없다.