대체텍스트, 사진이 다 보여주니 안 써도 될까요?

상세페이지 이미지 alt — 사진을 다 올렸으니 설명은 생략해도 될까요?

상세페이지 작업에서 사진을 올리고 나면 '대체 텍스트' 입력칸은 비워두고 넘어가는 경우가 많습니다. 어차피 화면에는 사진이 보이니 굳이 설명을 또 적을 필요가 없다고 생각하기 쉽습니다.

하지만 이미지가 느리게 뜨는 모바일 환경이나 스크린리더로 쇼핑하는 사용자에게는 그 사진이 'IMG_4821.jpg' 같은 파일 이름으로만 전달됩니다. 검색엔진도 사진 자체의 색상·소재·모양을 읽어내지 못해 alt 글자에 의존합니다.

결론부터 말하면 대체텍스트는 이미지마다 역할이 다르고, 역할에 맞춰 쓰는 법도 달라집니다.

대체텍스트(alt)란 무엇인가 — 화면 밖에서도 상품이 보이게 하는 글자

대체텍스트는 이미지 태그의 alt 속성에 들어가는 설명 글자로, 이미지를 볼 수 없는 상황에서 그 자리를 대신합니다. 스크린리더는 이 글자를 읽어 사용자에게 전달하고, 검색엔진은 이 글자로 이미지의 내용을 추측합니다.

실무에서는 이미지를 정보용·장식용·기능용 세 가지로 나누면 판단이 쉬워집니다. 정보용은 상품 사진처럼 내용 자체가 중요한 이미지, 장식용은 구분선이나 배경 패턴처럼 없어도 이해에 지장이 없는 이미지, 기능용은 버튼이나 링크 아이콘처럼 클릭 동작이 있는 이미지입니다.

장식용 이미지는 alt를 빈 값(alt="")으로 두는 편이 맞습니다. 속성 자체를 생략하면 일부 환경에서 파일 경로가 그대로 읽히므로, 비워두더라도 속성은 남겨야 합니다.

이미지 유형 구분하기 — 정보용·장식용·기능용에 따라 쓰는 법이 다릅니다

정보용 이미지는 상세페이지의 상품 사진, 사용 장면, 비교 컷이 해당합니다. 이 사진이 없다면 독자가 알 수 없는 정보(색상, 형태, 구성)를 글자로 옮겨야 합니다.

기능용 이미지는 장바구니 아이콘, 공유 버튼, 확대 돋보기처럼 클릭하면 어떤 동작이 일어나는지가 핵심입니다. 돋보기 아이콘의 alt는 '돋보기'가 아니라 '이미지 확대'처럼 동작을 써야 합니다.

• 정보용: 상품 사진, 사용 장면, 비교 사진 — 내용을 구체적으로 묘사
• 장식용: 구분선, 배경 패턴 — alt="" 로 비우되 속성은 유지
• 기능용: 버튼·링크 아이콘 — 모양이 아니라 클릭 뒤 동작을 설명

이미지를 지웠을 때도 상세페이지 내용이 그대로 이해된다면 장식용일 가능성이 크고, 반대로 색상·사이즈·사용법 같은 정보가 사라진다면 정보용으로 분류해 제대로 된 설명을 채워야 합니다.

상품 사진 alt 쓰는 법 — 구매 판단에 필요한 정보부터 담기

상품 사진의 alt는 '신발', '가방'처럼 한 단어로 끝내기보다, 구매 판단에 필요한 색상·소재·형태를 구체적으로 적는 편이 유용합니다.

예를 들어 검은색 밑창이 있는 러닝화 사진이라면 '신발'보다는 '검은색 갑피에 흰색 밑창이 달린 러닝화, 옆면에 통기성 매시 소재가 보이는 구성'처럼 쓰면 화면을 보지 못하는 사용자도 모양을 그려볼 수 있고, 검색엔진에도 색상·소재 키워드가 함께 전달됩니다.

• 나쁜 예: '신발' — 어떤 색상·형태인지 전혀 알 수 없음
• 나쁜 예: '신발 운동화 러닝화 신발끈 스니커즈 신발 할인' — 키워드 나열은 검색엔진이 건너뜀
• 좋은 예: '검은색 갑피에 흰색 밑창이 달린 러닝화, 옆면 메시 소재'

키워드를 나열한 alt는 화면을 보지 못하는 사용자에게 혼란만 주고 검색엔진도 그대로 읽지 않고 건너뛴다는 점을 기억해야 합니다.

글자 들어간 배너·카드뉴스 alt — 이미지 속 문구를 놓치지 않기

할인 배너나 카드뉴스처럼 이미지 안에 직접 글자를 넣는 경우가 많습니다. 이 문구가 본문 텍스트로 따로 제공되지 않는다면, alt에 핵심 문구를 그대로 옮겨야 합니다.

예를 들어 배너 안에 '전 상품 20% 할인, 이번 주말까지'라는 문구가 이미지로만 들어가 있다면, alt에도 그 내용을 그대로 담아야 화면을 못 보는 사용자가 할인 기간과 폭을 놓치지 않습니다.

반대로 차트나 비교표처럼 정보가 많은 이미지는 alt 한 줄에 전부 담으려 하지 말고, 이미지를 식별할 수 있는 짧은 문장만 alt에 쓰고 자세한 수치는 바로 아래 본문이나 표로 따로 제공하는 편이 낫습니다.

이미지 유형별 alt 작성법 — 한눈에 보기

지금까지 다룬 유형별 alt 작성 기준을 정리하면 다음과 같습니다.

표에 없는 이미지라도 '이 사진이 없으면 어떤 정보가 사라지는가'를 먼저 물으면 어느 줄에 해당하는지 판단하기 쉽습니다.

발행 전 alt 체크리스트 — 10초 안에 확인하는 5가지

상세페이지를 올리기 전에 아래 다섯 가지만 확인해도 흔한 실수는 대부분 걸러집니다.

• 모든 이미지 태그에 alt 속성이 있나요 (비워두더라도 속성 자체는 있어야 합니다)
• 파일명(IMG_1234.jpg)을 그대로 alt로 쓰고 있지 않나요
• 같은 단어를 반복 나열한 키워드형 alt는 아닌가요
• 글자가 들어간 배너의 문구가 alt나 본문에 그대로 담겨 있나요
• 장식용 이미지에는 alt=""로 비워두었나요

다섯 항목 중 하나라도 '아니오'가 나오면, 발행 전에 그 이미지의 alt부터 다시 확인하는 편이 낫습니다.

셀러리로 만든 이미지 — alt까지 매번 새로 고민하지 않아도 됩니다

상품 사진마다 alt를 하나하나 새로 쓰려면 상세페이지 하나에도 시간이 꽤 걸립니다.

셀러리는 상품 URL과 사진만 넣으면 핵심 특징과 소재·색상 같은 정보를 지식베이스에 정리해두므로, 상세페이지를 만들 때마다 상품 설명을 처음부터 다시 찾아 쓰지 않아도 됩니다.