상세페이지 사진 한 장이 뜨지 않았다고 가정해 보세요. 흰 사각형만 남고 치수와 구성품 설명도 함께 사라진다면, 이미지는 장식이 아니라 구매 판단의 유일한 자료였던 셈입니다. 오류 아이콘을 예쁜 그림으로 바꾸기 전에 사진이 없을 때도 무엇을 알 수 있어야 하는지 정해야 합니다.

사진이 없어졌을 때 사라지는 정보를 먼저 적습니다

가상 정리 트레이 페이지를 예로 들면 대표 사진은 형태와 색상을, 치수 그림은 폭과 깊이를, 구성 사진은 포함 부품을 알려 줄 수 있습니다. 이 역할이 다른데 모든 이미지에 “상품 이미지”라는 설명만 붙이면 실제로 필요한 내용을 복구하기 어렵습니다.

이미지의 역할에 따른 대체 정보
이미지남겨야 할 정보본문에서 받을 위치
분위기용 배경핵심 정보가 없으면 별도 설명 불필요주변 본문 자체로 의미 완성
제품 형태 사진독자가 구별해야 할 형태·색상사진 설명과 옵션명
치수 도면측정 방향과 각 치수텍스트 사양표
링크 안의 썸네일이동할 자료의 목적같은 링크 안의 명확한 제목

W3C의 alt 결정 트리는 문맥상 정보인지, 장식인지, 링크 기능을 전달하는지에 따라 설명을 정하도록 안내합니다. 복잡한 정보는 페이지 안에 텍스트로 제공할 수 있습니다. 긴 사양 전체를 alt 하나에 몰아넣기보다 이미지 역할별 설명과 본문의 정보 배치를 함께 정합니다.

공간과 정보는 다른 방법으로 남깁니다

img의 width와 height는 브라우저가 이미지 비율을 파악하는 데 도움을 줍니다. 실제 이미지의 비율에 맞춰 지정하고 CSS에서 유연한 폭을 사용하면 로딩 전후 공간 변화를 줄일 수 있습니다. 하지만 공간이 유지돼도 치수 정보가 이미지 안에만 있으면 독자는 여전히 값을 모릅니다.

다음은 가상 사양을 담은 HTML 예입니다. 파일 주소는 실제 이미지로 바꿔야 하며, 1200×800은 그 파일의 크기라고 가정합니다. 예제 치수는 실제 제품 정보가 아닙니다.

<figure>
  <img src="tray-front.jpg"
       width="1200" height="800"
       style="max-width:100%;height:auto"
       alt="낮은 테두리와 네 모서리 받침이 있는 트레이의 정면">
  <figcaption>제품 형태를 보여 주는 정면 사진</figcaption>
</figure>
<dl>
  <dt>외경 폭</dt><dd>240 mm</dd>
  <dt>외경 깊이</dt><dd>100 mm</dd>
  <dt>구성</dt><dd>트레이 1개, 받침 4개</dd>
</dl>

이 구조에서는 사진이 실패해도 사양과 구성은 문서에 남습니다. 사진으로만 판단할 수 있는 색상이나 표면 질감까지 텍스트가 완전히 대신한다고 보지는 않습니다. 색상 확인이 구매의 전제라면 오류 상태에서 이미지를 다시 확인할 경로를 제공하고, 확인이 끝난 것처럼 안내하지 않습니다. 공간 예약의 원리는 이미지가 늦게 뜰 때 본문이 밀리는 문제와 연결됩니다.

느린 로딩·404·요청 차단을 따로 확인합니다

느린 네트워크에서는 기다리는 동안의 상태를, 404에서는 파일이 없는 상태를 봅니다. 콘텐츠 차단이나 네트워크 단절은 파일 주소가 맞아도 요청이 실패할 수 있는 조건입니다. 실제 운영 파일을 삭제하지 말고 허용된 개발 환경이나 브라우저 개발자 도구에서 조건을 만듭니다.

실패 상태별로 확인할 질문
조건만드는 방법의 예확인할 내용
지연개발자 도구에서 네트워크 속도 제한공간 유지·읽을 수 있는 본문·끝없는 로딩 여부
파일 없음개발용 사본에서 존재하지 않는 이미지 주소 사용오류 안내·사양 유지·링크 이름
요청 차단대상 이미지 요청을 개발자 도구에서 차단차단과 파일 삭제를 혼동하지 않는 안내
이미지 화면 진입 전지연 로딩 이미지까지 아직 스크롤하지 않음미요청 상태를 즉시 오류로 분류하지 않음

이미지를 교체하며 검사할 때 srcset이 남아 있으면 브라우저가 다른 파일을 선택할 수 있습니다. src 하나를 틀린 주소로 바꿨는데 사진이 계속 보인다면 캐시만 의심하지 말고 실제 선택된 currentSrc를 확인합니다. 소스 선택은 srcset·sizes 검수 순서가 설명합니다.

complete가 true여도 이미지 성공은 아닙니다

MDN의 complete 설명에는 이미지가 깨진 경우에도 값이 true일 수 있다고 나옵니다. 또 naturalWidth는 고유 너비를 얻을 수 없으면 0입니다. 두 값을 함께 읽으면 조사할 대상을 좁힐 수 있지만, 로딩 전 상태와 최종 실패를 구분해야 합니다.

const images = [...document.querySelectorAll('main img')];
console.table(images.map(img => ({
  url: img.currentSrc || img.src,
  complete: img.complete,
  naturalWidth: img.naturalWidth,
  state: !img.complete ? '로딩 전 또는 진행 중'
    : img.naturalWidth > 0 ? '크기 확인됨' : '확인 필요'
})));

위 코드는 현재 DOM의 상태를 읽는 점검 예입니다. 화면 아래의 지연 로딩 이미지라면 그 위치까지 이동한 뒤 다시 봅니다. “크기 확인됨”이어도 CSS로 가려졌거나 다른 요소가 덮었을 수 있으므로 실제 화면 표시까지 자동으로 통과시키지 않습니다.

대체 화면이 원래 정보를 속이지 않게 합니다

실패한 상품 사진 대신 비슷한 제품 사진을 넣으면 오히려 잘못된 색상·구성으로 오해할 수 있습니다. 중립적인 자리표시자와 “이미지를 불러오지 못했습니다” 같은 상태 안내를 쓰고, 텍스트 사양과 실제 확인 경로를 남기는 편이 안전합니다. 다시 시도 버튼을 둔다면 실패 시 무한히 요청하지 않도록 동작과 횟수를 정합니다.

장식 이미지 하나가 실패했다고 매번 큰 경고를 읽히게 할 필요는 없습니다. 반대로 이미지가 링크의 유일한 내용이라면 실패 후에도 링크 이름이 남아야 합니다. 공간이 유지되는지, 판단 정보가 남는지, 다음 행동을 이해할 수 있는지 세 항목을 각각 확인하면 단순히 “이미지가 있다”는 검사에서 벗어날 수 있습니다.

W3C·MDN 원문 확인일: 2026년 10월 4일. 코드와 제품 수치는 설명용이며 실제 서비스의 오류를 재현한 결과를 주장하지 않습니다.