상품 이미지 대체 텍스트: 빈칸으로 읽히는 6가지 패턴

상품 이미지 대체 텍스트는 스펙 도면이 조용히 사라지는 지점입니다. 사진은 정상적으로 로드되고 치수는 48포인트 크기로 그 자리에 찍혀 있지만, 사람의 눈이 아닌 모든 독자 — 스크린 리더, 검색 크롤러, AI 답변 엔진 — 에게 돌아오는 것은 빈칸입니다.

Baymard Institute의 이커머스 접근성 벤치마크는 이런 상황이 얼마나 흔한지를 숫자로 보여줍니다. 이커머스 사이트의 55%는 정보성 이미지의 핵심 내용을 대체 텍스트로 전달하지 않고, 64%는 텍스트를 이미지 안에 직접 넣으며, 9%는 복잡한 정보를 이미지로만 제공합니다. 가구, 하드웨어, 건축자재를 판매한다면 마지막 9%는 거의 확실히 본인 이야기입니다. 사이즈 표가 JPEG이기 때문입니다.

아래는 실제 상품 갤러리에서 뽑은 여섯 가지 대체 텍스트 패턴과, 각각이 실패하는 이유, 그리고 대신 무엇을 써야 하는지입니다.

상품 이미지 대체 텍스트가 실제로 해야 하는 일

상품 이미지 대체 텍스트는 이미지의 alt 속성에 저장되는 텍스트 대안입니다. 스크린 리더가 사진 대신 읽어 주는 문장이자, 그림을 볼 수 없는 모든 시스템이 확보할 수 있는 유일한 설명입니다.

독자는 둘인데, 대부분의 판매자는 첫 번째 독자만 염두에 둡니다.

W3C 웹 접근성 이니셔티브는 근본 문제를 분명하게 짚습니다. 텍스트를 이미지 안에 구워 넣는 것과 관련해 "이미지 기반 텍스트 표현보다 CSS로 스타일을 입힌 실제 텍스트를 사용하는 것이 좋은 설계 관행"이며, 텍스트 이미지가 정말로 불가피한 경우에는 텍스트 대안에 이미지에 보이는 것과 똑같은 텍스트가 들어가야 한다는 것입니다. JPEG 안에 인쇄된 치수는 상품 데이터가 아닙니다. 상품 데이터를 찍은 사진이고, 사람의 눈 말고는 아무것도 읽을 수 없습니다.

유럽에서는 여기에 법적인 측면까지 붙었습니다. 유럽 접근성법(European Accessibility Act) — 지침 (EU) 2019/882 — 은 제2조 제2항 (f)에서 이커머스 서비스를 적용 대상 서비스로 열거하고 있고, 회원국들은 2025년 6월 28일부터 이를 적용하고 있습니다. 서비스를 제공하는 마이크로기업은 제4조 제5항에 따라 면제되며, 마이크로기업은 제3조 제23항에서 인원 10명 미만이면서 연간 매출액 또는 대차대조표 총액이 200만 유로를 넘지 않는 사업자로 정의됩니다. 그보다 규모가 크고 EU 소비자에게 판매한다면, 사이즈 표 JPEG은 더 이상 전환율만의 문제가 아닙니다.

안티패턴 1: 파일명

alt="IMG_4821.jpg". alt="sofa-3-final-v2-USE-THIS". alt="chair_dim_01".

폴더에서 이미지를 내보내 대량 업로드하면서 아무도 캡션을 쓰지 않으면 이런 결과가 나옵니다. alt 속성이 빠진 페이지에서 대부분의 스크린 리더는 파일명을 대신 읽습니다. 그래서 고객은 "아이 엠 지 언더바 사 팔 이 일 점 제이 피 지"를 듣고 그냥 떠납니다.

해결책은 기발할 것이 없습니다. 그 컷에 담긴 그 상품을 구체적으로 설명하는 문장 하나면 됩니다.

안티패턴 2: 키워드 나열

alt="sofa couch settee 3 seater sofa cheap sofa modern sofa living room sofa buy sofa online".

구글의 이미지 가이드는 이 문제를 직접 지적합니다. 대체 텍스트는 "이미지에 대한 메타데이터를 제공할 때 가장 중요한 속성"이지만, 여기에 키워드를 쑤셔 넣으면 "사용자 경험이 나빠지고 사이트가 스팸으로 간주될 수 있다"는 것입니다. 구글이 좋은 예시로 게시한 문구는 단어 네 개짜리입니다. alt="Dalmatian puppy playing fetch".

아무도 언급하지 않는 두 번째 비용도 있습니다. 스크린 리더는 문자열 전체를 사용자의 읽기 속도로 읽어 주며, 건너뛰며 훑을 방법이 없습니다. 반복되는 키워드 아홉 개는 상품에 대해 아무것도 알기 전에 들어야 하는 9초짜리 소음입니다.

진짜 설명 하나를 쓰세요. 노리는 키워드는 그 안에 자연스럽게 한 번 들어갑니다.

안티패턴 3: 사진으로만 존재하는 사이즈 표

비용이 가장 큰 유형이고, 가구·의류·건축자재에서는 사실상 기본값입니다. 전체 치수 표를 1200px PNG로 내보내 갤러리에 던져 넣는 방식입니다.

W3C는 이것을 복잡한 이미지로 보고, 두 부분으로 된 텍스트 대안이 필요하다고 말합니다. 이미지를 식별하고 긴 설명의 위치를 알려 주는 짧은 설명, 그리고 "이미지가 전달하는 핵심 정보를 텍스트로 표현한" 긴 설명이며, 이 긴 설명은 숨기지 않고 모두가 볼 수 있어야 합니다.

실무적으로는 "모두가 볼 수 있어야 한다"가 답의 전부입니다. 치수 열두 개를 alt 속성에 욱여넣으려 하지 마세요. 표를 페이지 안에 실제 HTML 표로 게시하고, alt 속성은 그 표를 가리키게 하세요.

alt="Size chart for the Larsen sofa range; the same measurements are listed in the table below"

그리고 바로 아래에 표를 두세요. 비용은 들지 않습니다. 마크업된 표는 색인되고, AI 답변 엔진이 인용할 수 있고, 번역되며, 휴대폰 화면에 맞게 늘어나거나 줄어듭니다. 9포인트 글자가 박힌 1200px PNG는 그중 어느 것도 하지 못합니다. 표준 소파 치수 같은 참조 페이지가 텍스트로 존재하는 이유가 바로 이것입니다. 스크롤하지 않는 구매자를 위해 이미지 위에도 치수를 남기고 싶다면 둘 다 두면 됩니다. 이미지와 표는 경쟁 관계가 아닙니다. 표 없는 이미지가 문제일 뿐입니다.

안티패턴 4: 숫자 대신 사진을 설명하기

치수 도면에 alt="grey fabric sofa in a bright living room"이라고 쓰는 경우입니다.

가장 알아채기 어려운 실패입니다. 문장 자체는 기술적으로 정확하기 때문입니다. 어떤 사진을 설명하고 있기는 합니다. 다만 이 사진을 설명하지 못합니다. 이 사진이 존재하는 이유는 상품 설명에 없는 치수 다섯 개를 담고 있다는 것 하나인데 말입니다.

거의 모든 경우를 커버하는 두 가지 규칙이 있습니다.

• 이미지의 역할이 보기 좋게 하는 것이라면, 어떻게 보이는지를 설명하세요.
• 이미지의 역할이 정보를 나르는 것이라면, 대체 텍스트가 그 정보를 날라야 합니다. 숫자, 단위, 그리고 각 숫자가 무엇을 재는지까지.

사람들이 이 부분을 틀리는 지점은 같은 상품에 둘 다 있을 때입니다. 같은 소파의 대표 이미지와 치수 도면은 완전히 다른 대체 텍스트가 필요하며, 대표 이미지의 대체 텍스트를 도면에 그대로 붙여 넣으면 "우리 집에 들어갈까"에 답하는 유일한 이미지를 버리는 셈이 됩니다.

안티패턴 5: 장식용 이미지에 붙은 문단 하나짜리 대체 텍스트

배경 텍스처, 구분선 그래픽, A+ 모듈 상단의 브랜드 장식. 누군가 이 모두에 alt="beautiful natural oak wood grain texture background"를 붙여 놓으면, 스크린 리더 사용자는 실제 상품 이미지 사이사이마다 풍경 묘사 세 문장을 듣게 됩니다.

장식용 이미지에는 빈 alt 속성 — alt="" — 을 씁니다. 보조 기술에 이 이미지를 통째로 건너뛰라고 알려 주는 신호입니다. 이는 속성을 아예 빼는 것과 다릅니다. 속성을 빼면 이미지는 라벨 없는 미지의 대상이 되어 어차피 읽힙니다. 비어 있는 것과 없는 것은 CMS에서는 똑같아 보이지만 정반대로 동작합니다.

명시해 둘 만한 판단 기준이 하나 있습니다. 크기 비교용 컷은 장식이 아닙니다. 상품 옆에 A4 용지를 놓고 찍은 사진은 정보를 전달하는 일을 하고 있으며, 대체 텍스트도 그렇게 말해야 합니다.

안티패턴 6: 대체 텍스트 하나, 갤러리 이미지 열두 장

일괄 편집 도구를 쓰면 너무 쉽게 벌어지는 일입니다. 상품 페이지의 모든 이미지에 alt="Larsen 3-seat sofa"가 붙어서, 스크린 리더 사용자는 같은 다섯 단어를 열두 번 듣고도 4번 이미지가 치수 도면이고, 7번이 원단 클로즈업이며, 9번이 포장 박스라는 사실은 끝내 알지 못합니다.

위치가 아니라 기능을 기준으로 번호를 매기세요. 치수가 중요한 상품을 등록하는 분들에게 건네는 템플릿은 다음과 같습니다.

60초 점검

다른 어디보다 먼저, 가장 잘 팔리는 상품 페이지 다섯 개에 이 점검을 돌려 보세요.

• alt 속성에 파일 확장자(.jpg, .png, .webp)가 들어간 곳이 없다
• 같은 상품 페이지의 두 이미지가 동일한 대체 텍스트를 공유하지 않는다
• 모든 치수 도면의 대체 텍스트에 숫자와 단위가 최소 하나씩 들어 있다
• 모든 사이즈 표 이미지에 같은 데이터를 담은 HTML 표가 함께 있다
• 장식용 이미지에는 alt=""가 있고, 속성이 누락되거나 설명이 들어가 있지 않다
• 한 키워드를 두 번 이상 반복하는 alt 속성이 없다
• 대체 텍스트가 영어만이 아니라 해당 스토어의 언어로 작성되어 있다
• 대체 텍스트의 치수가 스펙 표의 치수와 일치한다 — 확인해 보세요, 안 맞는 경우가 흔합니다

마지막 항목이 나머지를 다 합친 것보다 많은 오류를 잡아냅니다. 숫자가 이미지 위에 그려지는 순간 그 숫자는 원래 나온 기록과의 연결이 끊기고, 스펙이 몇 번 개정되는 동안에도 틀린 채로 남습니다. 같은 실패가 피드에서도 나타납니다. 똑같은 이유로 비어 있는 필드들은 상품 치수 구조화 데이터에서 다룹니다.

인용되는 것과 무슨 상관이 있는가

검색 엔진은 20년 동안 alt 속성을 색인해 왔습니다. 달라진 것은 그 외에 누가 그것을 읽느냐입니다. "작은 아파트에 맞는 소파 깊이"에 대한 답변을 조립하는 AI 답변 엔진은 여러분의 JPEG을 열어 볼 수 없습니다. HTML 안의 텍스트 — 상품 설명, 스펙 표, alt 속성 — 만 가지고 작업할 수 있습니다. 이미지에만 그려 넣고 다른 어디에도 적지 않은 것은 전부 그 엔진에게 보이지 않습니다.

접근성 법규와도 무관하고 스크린 리더와도 무관한, 위 규율을 지켜야 할 실무적인 이유가 여기 있습니다. 텍스트로 게시한 치수만이 인용될 수 있는 치수입니다.

자주 묻는 질문

상품 이미지 대체 텍스트는 얼마나 길어야 하나요?

이미지가 보여 주는 것을 전달할 만큼 길고, 한 호흡에 들을 수 있을 만큼 짧아야 합니다. 대표 이미지라면 보통 단어 5~12개 정도입니다. 치수 도면은 숫자 자체가 내용이므로 더 깁니다. 두 줄을 넘어간다 싶으면 그 이미지는 복잡한 이미지이며, 두 부분으로 된 처리 — 짧은 alt 하나 + 페이지 텍스트로 게시한 전체 데이터 — 가 필요합니다.

대체 텍스트가 SEO에 도움이 되나요?

도움이 되지만, 당길 수 있는 순위 레버가 아니라 맥락으로서 작동합니다. 구글은 대체 텍스트를 이미지에 대한 가장 중요한 메타데이터 출처로 설명하면서, 키워드를 채워 넣는 행위는 스팸으로 명시하고 있습니다. 이미지를 볼 수 없는 사람을 위해 쓰세요. SEO 이득은 그것을 잘 해냈을 때 따라오는 부수 효과입니다.

사이즈 표 이미지에는 어떤 대체 텍스트를 써야 하나요?

실제 표를 가리키는 짧은 식별 문장 — 예를 들어 "Size chart for the Larsen sofa range; the same measurements are listed in the table below" — 을 쓰고, 그 표를 실제로 HTML로 게시하세요. 치수 표 전체를 alt 속성에 끼워 넣으려 하면 스크린 리더 사용자는 따라갈 수 없고 크롤러는 행 단위로 파싱할 수 없는 결과물이 나옵니다.

장식용 상품 이미지에도 대체 텍스트가 필요한가요?

빈 alt 속성 alt=""가 필요하며, 이는 속성을 빼 버리는 것과 같지 않습니다. 비어 있으면 보조 기술이 이미지를 건너뜁니다. 누락되면 미지의 대상이 되어 보통 파일명으로 읽힙니다.

유럽 접근성법이 우리 온라인 스토어에도 적용되나요?

EU 소비자에게 이커머스 서비스를 제공하고 마이크로기업이 아니라면 적용됩니다. 이커머스 서비스는 지침 (EU) 2019/882 제2조 제2항 (f)에 열거되어 있으며 2025년 6월 28일부터 적용되고 있습니다. 제4조 제5항의 마이크로기업 면제는 인원 10명 미만이고 연간 매출액 또는 대차대조표 총액이 200만 유로 이하인 서비스 제공자를 대상으로 합니다. 집행과 제재 수준은 회원국별로 정해지므로, 세부 사항은 해당 국가의 국내법 이행 내용을 확인하세요.

치수 라벨이 읽히기도 전에 잘려 나가는 이유는 무엇인가요?

뿌리가 같은 별개의 문제입니다. 정보가 픽셀 안에만 살고 있다는 것이죠. 마켓플레이스 갤러리는 각자의 비율로 잘라내기 때문에 가장자리 근처에 배치한 라벨은 사라집니다. 채널별 안전 영역 규칙은 상품 이미지 종횡비에서 다룹니다.

출처 및 참고자료

• Baymard Institute — "정보성" 이미지의 핵심 내용을 전달하는 데 "ALT" 텍스트를 사용하라 (사이트의 55%는 그렇게 하지 않는다)
• W3C 웹 접근성 이니셔티브 — 이미지 튜토리얼: 텍스트 이미지
• W3C 웹 접근성 이니셔티브 — 이미지 튜토리얼: 복잡한 이미지
• W3C 웹 접근성 이니셔티브 — 이미지 튜토리얼: 장식용 이미지
• Google 검색 센트럴 — Google 이미지 권장사항 및 대체 텍스트 가이드
• EUR-Lex — 지침 (EU) 2019/882 (유럽 접근성법): 제2조 제2항 (f), 제3조 제23항, 제4조 제5항, 제31조
• 유럽연합 집행위원회 — 유럽 접근성법: 적용 대상 제품 및 서비스

이미지마다 고치는 대신 한 번에 고치기

위의 안티패턴은 전부 모자만 바꿔 쓴 같은 실패입니다. 치수가 그림 안에 그려졌고, 기계가 읽을 수 있는 곳에는 어디에도 기록되지 않았다는 것. 대체 텍스트 습관을 개선하는 것만으로는 해결되지 않습니다. 설명하려는 그 숫자들 자체가 사진 위에 손으로 타이핑된 것이고, 이미 스펙에서 어긋나고 있기 때문입니다.

오래 버티는 방식은 치수 레이어를 그림이 아니라 데이터로 다루는 것입니다. 상품의 실제 모서리에 맞춰 측정해서 숫자가 눈대중이 아닌 실측값이 되게 하고, 주석 레이어를 JPEG으로 눌러 붙이는 대신 살아 있는 편집 가능한 상태로 유지하며, 그다음 같은 원본에서 두 가지를 내보내세요. 채널별 규격에 맞춘 라벨 이미지, 그리고 스펙 표와 alt 속성에 붙여 넣을 텍스트 형태의 치수 목록입니다. 이것이 실측 기반 주석 도구와, 상품 옆에 그럴듯해 보이는 숫자를 만들어 내는 AI 이미지 생성기의 차이입니다. 하나는 무엇을 쟀는지 말해 줄 수 있고, 다른 하나는 지어냈습니다. 어차피 상품 페이지 소재를 다시 만들 계획이라면, 숫자를 살아 있게 만들기 좋은 곳은 스펙 시트입니다. 구매자와 자사 카탈로그가 함께 읽는 문서이기 때문입니다.