상세페이지 이미지 설명은 무엇을 써야 할까: 사진·장식·링크 구분

같은 트레이 사진도 놓인 자리에서 역할이 달라집니다

상품 대표 사진의 설명을 쓰다가 “깔끔한 흰색 트레이 이미지”에서 멈추기 쉽습니다. 그러나 독자에게 필요한 것은 사진에 흰색 물체가 있다는 사실만이 아닐 수 있습니다. 치수표 옆에서는 물건의 외형과 측정 방향이 중요하고, 관련 상품 링크 안에서는 어디로 이동하는지가 중요합니다. 이미지를 잠시 가렸을 때 이 구간에서 무엇을 잃는지 먼저 적으면 설명의 범위를 정하기 쉬워집니다.

이 글의 예제는 폭 24cm, 깊이 10cm인 가상 트레이입니다. 같은 소재를 상품 정보, 배경 장식, 구성 안내로 가는 링크, 치수 도해라는 네 상황에 놓습니다. 실제 브랜드나 제품 시험 결과를 사용하지 않으며, 아래 선택기는 상황에 따른 설명 후보를 보여 줍니다. 사진만으로 확인할 수 없는 내구성, 미끄럼 방지 성능, 판매량을 문장에 더하지 않는 것이 출발점입니다.

W3C의 대체텍스트 결정 트리는 이미지 안의 글자, 링크나 버튼의 기능, 현재 문맥에 기여하는 정보, 장식 여부를 차례로 살펴보도록 안내합니다. 모든 이미지를 같은 길이로 설명하라는 지침은 아닙니다. 여기서는 이 질문을 상품 상세페이지의 네 역할로 좁혀 적용합니다.참고: W3C WAI · An alt Decision Tree

정보 사진에는 독자의 판단에 필요한 차이를 남깁니다

대표 사진이 트레이의 구조를 처음 보여 준다면 테두리, 칸의 수, 손잡이처럼 구매자가 구분해야 할 특징을 짧게 설명할 수 있습니다. 반대로 본문에 이미 같은 특징이 바로 적혀 있고 사진이 그 내용을 반복하는 보조 장면이라면 설명을 그대로 한 번 더 읽게 만들 필요가 있는지 살펴봅니다. 이미지 자체와 주변 문장을 한 묶음으로 읽어야 중복과 누락을 함께 찾을 수 있습니다.

색상을 언급할지도 문맥으로 결정합니다. 색상 옵션을 비교하는 구간이라면 흰색과 차콜을 구분하는 말이 중요합니다. 구조만 설명하는 구간에서 “빛이 비치는 감각적인 화이트 톤”을 길게 쓰면 필요한 정보보다 분위기가 앞섭니다. 설명을 줄일 때는 제품 구분에 필요한 특징을 먼저 남기고 감상과 홍보 문구부터 덜어 냅니다.참고: W3C WAI · Images Tutorial

장식에는 긴 설명을 붙이지 않고 중복부터 확인합니다

제목 뒤에 깔린 옅은 선, 반복되는 점무늬, 의미 없이 배치한 장식 사진은 주변 문장을 이해하는 데 필요하지 않을 수 있습니다. 이런 img 요소에는 빈 alt를 사용하는 방식이 있습니다. alt 속성을 아예 생략하는 것과 빈 값을 지정하는 것은 다릅니다. 생략하면 도구나 환경에 따라 파일 이름처럼 의도하지 않은 정보가 전달될 수 있으므로 장식이라는 판단도 코드에 명시합니다.참고: W3C WAI · An alt Decision Tree

<img src="soft-pattern.svg" alt="">

빈 설명을 남발하면 반대 문제가 생깁니다. 옵션별 구성을 비교하는 사진, 사용 순서를 나타내는 도해, 상품 치수가 들어 있는 그림을 장식으로 취급하면 화면을 보지 않는 독자가 핵심 자료를 잃습니다. “예쁘게 보이기 위해 넣었다”는 제작자의 의도만으로 결정하지 말고, 독자가 이 그림에서 실제로 읽게 되는 정보를 기준으로 판단해야 합니다.

이미지가 링크라면 생김새보다 도착할 곳이 먼저입니다

트레이 사진 한 장만 링크로 쓰면서 설명을 “트레이”라고 붙이면 독자는 상품 상세를 여는지, 큰 사진을 여는지, 구성 안내를 여는지 알기 어렵습니다. 주변에 별도의 링크 이름이 없다면 “트레이 구성과 관리 안내”처럼 실제 도착 내용을 알려 주는 표현을 검토합니다. W3C의 기능 이미지 안내도 링크나 버튼에 사용된 이미지에서는 기능과 목적을 전달하는 쪽에 초점을 둡니다.참고: W3C WAI · Functional Images

이미지 옆의 텍스트가 이미 링크의 목적을 충분히 설명한다면 두 설명을 합쳤을 때 어떻게 읽히는지도 확인합니다. 시각적으로는 한 카드인데 보조기술에서는 같은 상품 이름이 두 번 반복될 수 있습니다. 반대로 이미지 설명을 줄였더니 카드 전체 링크의 이름이 없어지는 경우도 있습니다. 한 요소의 alt만 보지 말고 링크가 갖는 전체 이름을 점검해야 합니다.

치수와 비교 도해는 짧은 설명과 본문 자료를 함께 둡니다

여러 치수, 범례, 예외가 들어 있는 그림을 한 문장으로 모두 전달하기는 어렵습니다. 짧은 설명에는 그림의 종류와 핵심 관계를 담고, 수치와 조건은 가까운 본문이나 표로 제공합니다. 예제 트레이라면 “폭과 깊이를 표시한 트레이 치수 도해”라는 설명 옆에 폭 24cm, 깊이 10cm라는 표를 둘 수 있습니다. 중요한 값이 그림 안에만 남지 않게 하는 방식입니다.참고: W3C WAI · Complex Images

그림을 고친 날에는 설명과 본문 표도 함께 고쳐야 합니다. 이미지에는 폭 24cm가 남아 있는데 표를 26cm로 바꾸거나, 이미지에서 제거한 받침을 설명에 계속 적어 두면 접근 경로마다 다른 상품을 소개하게 됩니다. 파일 이름을 바꿨는지보다 같은 항목을 같은 단위로 말하는지를 확인합니다. 이 일치는 검색용 문구를 늘리는 작업이 아니라 콘텐츠 정확성 관리에 가깝습니다.

설명을 작성한 뒤 화면 밖의 읽기 순서로 다시 봅니다

실무에서는 이미지 목록에 사용 위치, 역할, 설명 후보, 본문 중복, 도착 링크라는 다섯 열을 두면 편집 이력을 관리하기 좋습니다. 설명을 작성하는 사람과 이미지를 교체하는 사람이 다르더라도 어느 문장까지 다시 확인해야 하는지 알 수 있습니다. 이미지 교체 요청에 파일만 첨부하지 말고 변경된 정보와 그대로 남는 정보를 함께 적습니다.

1. 이미지가 있는 구간의 제목과 주변 문장을 먼저 읽습니다.
2. 정보·장식·기능·복합 도해 중 주된 역할을 정합니다.
3. 사진에서 확인할 수 없는 평가·성능·후기 표현을 제거합니다.
4. 링크 목적, 주변 텍스트, 이미지 설명을 이어 읽어 중복과 공백을 찾습니다.
5. 치수와 조건이 바뀌면 이미지·alt·본문 표를 같은 시점에 갱신합니다.

위 선택기는 설명 후보의 차이를 이해하기 위한 도구입니다. 실제 화면 판독기에서 자연스럽게 읽히는지, 링크 이름이 충분한지, 이미지 안의 모든 정보가 다른 방식으로 제공되는지는 대상 페이지에서 다시 확인해야 합니다. alt를 넣었다는 사실만으로 사이트 전체의 접근성이나 검색 성과를 판정하지 않습니다.

이미지 역할에 맞는 대체 설명을 확인한 순서

1. 같은 그림의 역할을 정보·장식·링크·치수 도해로 바꾸고 설명 후보를 비교합니다.
2. 장식의 빈 alt와 링크의 도착 목적 설명을 주변 본문과 함께 읽습니다. 핵심 치수 그림을 장식으로 숨기면 안 됩니다.
3. 도해의 수치·조건은 본문 표에도 제공해야 합니다. 옵션명이나 연결 문서가 바뀌면 설명도 다시 대조합니다.

이미지 역할에 맞는 대체 설명 판단에서 제외한 범위

• 이 선택기는 특정 이미지의 접근성을 자동 판정하지 않습니다.
• 상품 사양은 설명용 가상 값이며 실제 제품 정보를 뜻하지 않습니다.
• 실제 링크 이름과 보조기술 출력은 적용할 페이지에서 확인해야 합니다.

이미지 역할에 맞는 대체 설명에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. An alt Decision TreeW3C WAI · 확인 2026-09-03

   이미지의 문맥·기능·장식 여부를 구분하는 질문을 참고했습니다.

2. Images TutorialW3C WAI · 확인 2026-09-03

   정보 이미지와 다른 이미지 유형의 역할 차이를 참고했습니다.

3. Functional ImagesW3C WAI · 확인 2026-09-03

   링크·버튼 이미지의 목적을 설명하는 기준을 참고했습니다.

4. Complex ImagesW3C WAI · 확인 2026-09-03

   짧은 설명과 상세한 정보 제공을 함께 사용하는 방식을 참고했습니다.