이미지 대체 텍스트와 크기와 로딩 순서를 함께 점검하는 법

웹페이지에 사진 한 장을 넣는 일은 파일 주소만 연결하면 끝나는 것처럼 보입니다. 하지만 이미지를 볼 수 없는 사람에게 무엇을 전할지, 파일이 늦게 와도 화면이 밀리지 않을지, 지금 보이지 않는 이미지까지 처음부터 모두 받을지에 따라 읽는 경험이 달라집니다.

사진 전시회를 준비하는 큐레이터를 떠올려 보세요. 작품 옆에는 눈으로 보지 않아도 의미를 알 수 있는 설명이 필요하고, 작품이 도착하기 전에도 벽에는 액자 크기만큼 자리를 비워 둬야 합니다. 먼 전시실 작품은 관람객이 가까이 갈 때 가져와도 되지만 입구의 대표 작품까지 늦게 가져오면 첫인상이 비어 보입니다.

alt는 파일 이름이 아니라 이미지가 맡은 뜻을 전한다

대체 텍스트는 이미지를 볼 수 없을 때 그 정보나 기능을 대신하는 짧은 문장입니다. HTML에서는 alt 속성에 적습니다. 화면 읽기 도구는 화면의 글과 버튼을 음성이나 점자로 전달하는 보조 기술이며, 이미지의 alt도 읽어 사용자가 문맥을 이어가도록 돕습니다.

alt="photo.jpg"처럼 파일 이름을 적거나 “이미지”라고만 쓰면 무엇을 알아야 하는지 전달되지 않습니다. 같은 사진도 페이지 목적에 따라 설명이 달라질 수 있습니다. 여행 글에서는 바닷가 위치가 중요할 수 있고, 건축 글에서는 건물의 재료와 형태가 더 중요할 수 있습니다. 사진에 보이는 모든 물건을 나열하기보다 이 문단에서 이미지가 보태는 핵심을 적습니다.

정보와 장식과 기능을 먼저 구분한다

W3C WAI의 이미지 안내는 이미지가 현재 문맥에 의미를 더하는지, 링크나 버튼의 기능을 설명하는지, 순수한 장식인지부터 판단하도록 안내합니다. 정보 이미지라면 의미를 짧게 설명하고, 장식 이미지라면 alt=""처럼 빈 대체 텍스트를 둡니다. alt를 아예 빼는 것과 빈 값으로 두는 것은 다릅니다. 속성이 없으면 일부 화면 읽기 도구가 파일 이름을 읽을 수 있습니다.

버튼 안에 이미지만 있고 주변 글로 기능을 알 수 없다면 겉모양보다 동작을 설명합니다. 프린터 그림이라면 “프린터 그림”보다 “문서 인쇄”가 버튼의 목적을 더 잘 전합니다. 그래프처럼 정보가 복잡하다면 모든 수치를 alt 한 줄에 억지로 넣지 않고, 본문이나 표에서 같은 내용을 충분히 제공합니다.

• 본문 이해에 필요한 사진은 문맥에 맞는 짧은 설명을 씁니다.
• 주변 문장과 같은 뜻을 반복하는 장식은 alt=""로 둡니다.
• 이미지만 있는 링크나 버튼은 도착지나 실행할 일을 설명합니다.
• 차트와 도표의 핵심 데이터는 화면에 보이는 글이나 표로도 제공합니다.
• “이미지”, “사진”, 파일 이름처럼 의미 없는 표현은 피합니다.

width와 height는 작품이 오기 전 액자 자리를 비워 둔다

브라우저는 HTML을 먼저 읽고 이미지 파일을 나중에 받을 수 있습니다. 이미지의 크기를 모르면 처음에는 작은 빈칸으로 그렸다가 파일을 받은 뒤 주변 글과 버튼을 밀어낼 수 있습니다. 읽던 문장이 움직이거나 누르려던 버튼의 위치가 바뀌면 사용자는 페이지가 불안정하다고 느낍니다.

width와 height에는 원본 이미지의 가로와 세로 크기를 단위 없이 적습니다. MDN은 두 값을 함께 주면 브라우저가 이미지가 오기 전에 가로세로 비율을 계산하고 필요한 공간을 예약할 수 있다고 설명합니다. CSS로 화면 폭에 맞게 줄이더라도 원본 비율을 알 수 있어 자리 이동을 줄이는 데 도움이 됩니다.

loading은 모든 이미지를 늦추는 스위치가 아니다

loading="lazy"는 지연 로딩, 즉 이미지가 화면 가까이에 올 때까지 다운로드를 미루도록 브라우저에 알리는 값입니다. 긴 글 아래쪽 사진처럼 지금 당장 보이지 않는 자료에 쓰면 처음에 받아야 할 파일을 줄일 수 있습니다. 다만 브라우저가 정확히 어느 거리에서 받기 시작할지는 정하므로 “스크롤한 순간에만 내려받는다”고 단정하지 않습니다.

첫 화면의 대표 이미지처럼 페이지를 열자마자 보여야 하는 자료에는 지연 로딩을 기계적으로 붙이지 않습니다. 기본값인 즉시 로딩 흐름을 유지하고, 화면 아래의 보조 이미지부터 후보로 고릅니다. 지연 로딩 이미지에도 width와 height를 함께 적어 자리를 잡아야 이미지가 나타날 때 본문이 크게 움직이는 일을 줄일 수 있습니다.

짧은 코드에서 세 가지 역할을 나눠 읽는다

아래 코드는 긴 글 중간에 있는 정보 이미지를 넣는 예시입니다. 실제 파일 크기가 1200×675라서 같은 값을 적었고, 화면 아래에 있어 지연 로딩을 적용했습니다.

<img
  src="/images/gallery-guide.png"
  alt="전시실 입구와 관람 동선을 나눈 평면도"
  width="1200"
  height="675"
  loading="lazy"
/>

alt는 이 그림이 본문에 보태는 뜻을 전달합니다. width와 height는 표시 크기를 무조건 1200×675로 고정하는 명령이 아니라 원본 비율을 계산할 단서를 줍니다. loading은 화면 아래 이미지의 다운로드 시점을 늦춥니다. 장식용 무늬라면 같은 코드에서 alt=""를 쓰되, 의미 있는 그림의 설명을 비우면 안 됩니다.

개발자 도구에서는 속성과 실제 요청을 따로 본다

Elements에서 img 요소를 선택하면 src, alt, width, height, loading이 있는지 읽을 수 있습니다. Network를 연 뒤 새로고침하면 이미지 요청이 성공했는지 확인할 수 있습니다. 속성이 올바르게 적혀도 주소가 틀리면 파일을 받지 못하고, 파일이 보여도 alt가 문맥과 맞는지는 사람이 본문과 함께 읽어야 판단할 수 있습니다.

화면 폭을 390픽셀 정도로 줄여 이미지가 본문 밖으로 넘치거나 찌그러지지 않는지도 봅니다. width와 height 비율이 실제 파일과 다른지, CSS가 한쪽 크기만 억지로 고정하는지 확인합니다. 자동 검사에서 alt가 있다는 결과만으로 설명 품질과 접근성이 모두 검증됐다고 기록하지 않습니다.

공개 파일과 민감한 이미지의 경계를 지킨다

이미지 점검에는 삭제 명령이나 결제 설정 변경이 필요하지 않습니다. 의미를 모르는 최적화 명령을 실행하거나 원본을 덮어쓰기 전에 대상 폴더와 백업, 결과 파일 이름을 확인하세요. 변환 결과가 작아 보인다는 이유로 원본을 바로 지우지 말고 실제 페이지와 여러 화면 크기에서 먼저 비교합니다.

사진의 촬영 위치, 문서 화면의 이메일, 주문 번호, 얼굴처럼 공개하면 안 되는 정보도 확인합니다. alt에 비밀키와 사용자 정보, 내부 파일 경로를 옮겨 적지 않습니다. 라이선스를 모르는 이미지를 출처 표시만 하고 재사용하거나, 다른 사이트 주소를 그대로 연결해 소유권과 전송 비용을 넘겨받는 행동도 피합니다.

오늘 바로 해볼 작은 실습

로그인하지 않은 공개 페이지 한 곳을 열고 10분 동안 읽기만 합니다.

1. 본문 이미지 하나를 골라 정보, 장식, 기능 중 어느 역할인지 적습니다.
2. Elements에서 그 이미지의 alt가 문맥의 핵심을 대신하는지 읽습니다.
3. width와 height가 모두 있고 실제 이미지와 같은 비율인지 확인합니다.
4. 첫 화면 이미지와 아래쪽 이미지를 나누고 loading 값을 비교합니다.
5. Network를 연 뒤 새로고침해 이미지 요청의 주소와 상태 코드를 확인합니다.
6. 화면 폭을 줄여 이미지가 찌그러지거나 본문을 가로로 미는지 봅니다.
7. 개인정보와 쿠키를 복사하지 않고 발견한 사실과 아직 모르는 점만 기록합니다.

실습의 목표는 모든 이미지에 같은 속성을 붙이는 것이 아닙니다. 이 그림이 전달하는 뜻, 미리 비워 둘 자리, 지금 받아야 할 순서를 각각 설명할 수 있으면 첫 점검을 마친 것입니다. 이후 수정은 공개 저장소의 파일과 실제 화면을 함께 확인하고, 저장과 빌드와 배포와 공개 확인을 서로 다른 상태로 기록하세요.