옵션을 바꾸면 사진도 바뀌어야 할까: 색상·구성 이미지 연결 검수

선택 이름과 보이는 사진이 같은 구성을 말해야 합니다

색상 옵션을 바꿨는데 대표 사진은 이전 색상으로 남으면 사용자는 무엇이 선택됐는지 다시 확인해야 합니다. 반대로 대표 사진만 바뀌고 구성 목록과 가격 조건은 그대로 남을 수도 있습니다. 옵션 이미지 검수는 사진이 전환되는 모습만 보는 작업이 아닙니다. 선택 이름, 대표 장면, 구성 설명, 조건과 다음 행동이 같은 상태를 가리키는지 확인하는 작업입니다.

가상의 트레이 옵션 A·B를 사용해 선택 이름·이미지·구성 설명이 같은 상태인지 대조합니다. 색상과 구성은 설명용 설정입니다.

옵션과 이미지의 연결표를 먼저 만듭니다

운영자는 옵션 식별, 표시 이름, 대표 이미지, 상세 이미지 묶음, 적용 구성, 자료 상태를 나누어 기록할 수 있습니다. 이름만 “A”로 적으면 이미지 담당자가 어느 상품 상태를 보여줘야 하는지 알기 어려울 수 있습니다. 내부 식별과 공개 이름이 어떤 관계인지 확인하고, 파일 이름이 바뀌어도 같은 옵션의 자료를 찾을 수 있게 연결합니다.

실제 상품에서는 사진의 제품과 선택 옵션의 사양을 맞춥니다. 촬영 소품이나 별도 판매품은 포함 구성과 구분해 표시해야 합니다.

연결표에는 이미지가 없는 상태도 표시합니다. 옵션별 사진이 준비되지 않았는데 공통 사진을 복사해 마치 해당 색상을 촬영한 것처럼 소개하지 않습니다. 공통 자료로 사용할 수 있는 정보가 무엇인지와 확인하지 않은 부분을 구분해야 합니다. 실제 색상이나 구성의 자료가 부족하면 그 부분을 임의로 완성하지 않습니다.

옵션 이름과 제공 조건부터 정리해야 한다면 옵션 선택의 부담을 줄이는 정보 구성을 먼저 확인하세요.

공통 도식과 옵션별 사진은 다른 자료입니다

모든 옵션이 같은 구조를 가진다는 확인 자료가 있다면 구조 설명 도식을 공통으로 사용할 수 있습니다. 그러나 색상, 치수, 구성, 부품이 달라지는 옵션에서는 무엇이 같은지와 무엇이 다른지를 실제 자료에서 확인해야 합니다. 파일 하나를 여러 옵션에 연결할 수 있다는 기술적 사실과 내용이 모든 옵션에 맞는다는 사실은 다릅니다.

두 옵션의 색상만 다르다고 확인했다면 구조 도식은 공통으로 쓸 수 있습니다. 치수나 뚜껑 포함 여부가 다르면 해당 자료를 옵션별로 나누어야 합니다.

치수선이 있는 사진이나 구성 목록이 들어 있는 도식은 옵션별 수치와 맞는지 다시 확인합니다. 대표 사진만 바꾸고 도식의 숫자는 이전 옵션으로 남아 있으면 읽는 위치에 따라 다른 제품을 설명할 수 있습니다. 이미지 안의 숫자·범례·구성 이름을 본문 표와 같은 항목으로 관리해야 합니다.

옵션 변경을 한 묶음의 상태 변화로 봅니다

옵션을 선택한 뒤 대표 이미지, 선택 이름, 구성 설명, 가격과 조건, 행동 버튼이 어느 상태를 표시하는지 확인합니다. 모든 항목이 항상 달라질 필요는 없습니다. 실제로 달라지는 항목과 공통으로 남는 항목을 정의해야 합니다. 바뀌어야 할 정보를 이전 상태로 남기거나, 공통 정보를 선택별로 달라진 것처럼 보이게 만들지 않습니다.

옵션을 연속으로 바꾸며 사진 요청 중의 상태도 봅니다. 새 선택 이름 아래에 이전 사진이 남는지, 준비 중인 구성을 주문할 수 있게 표시하는지 확인하세요.

새 이미지가 늦거나 실패해도 선택 의미는 남아야 합니다

선택 이름과 사진 준비 상태를 따로 보여주면 무엇을 골랐고 무엇을 기다리는지 알 수 있습니다. 로딩 표시만으로 이전 사진의 의미가 분명해지는 것은 아닙니다.

요청이 실패했다면 다른 옵션의 사진을 정상 자료처럼 계속 보여주지 않습니다. 오류 표시와 대체 정보, 다시 확인할 방법을 검토하고 해당 옵션의 사양과 조건은 본문에서 읽을 수 있게 남깁니다. 이미지 하나의 실패를 전체 주문 실패나 재고 없음으로 임의로 해석하지 않습니다. 실패한 단계와 실제 판매 상태를 구분해야 합니다.

레이아웃을 안정적으로 유지하기 위한 이미지 공간도 확인합니다. 옵션마다 비율이 다르면 전환 중 아래 문장이 이동하거나 중요한 장면이 잘릴 수 있습니다. 보여줘야 하는 정보가 무엇인지 정하고 비율·구도·표시 규칙을 함께 검수합니다. 공간을 맞추기 위해 색상 구분이나 구성품을 임의로 잘라내지는 않습니다.

요청 실패 화면의 구체적인 문구와 대체 영역은 이미지가 없을 때 남길 안내에서 비교합니다.

이미지 설명과 선택 이름을 이어 읽습니다

대체 설명은 이미지가 문맥에서 전달하는 정보와 기능에 맞춰 작성합니다. 정보 사진, 장식, 링크 이미지의 역할을 구분하는 기준은 W3C WAI의 결정 트리를 참고할 수 있습니다. 옵션 카드에서 이미지와 텍스트가 같은 링크 안에 있다면 전체 이름이 어떻게 읽히는지 확인합니다. 한 요소의 설명이 있다는 사실만으로 카드 전체 의미가 충분하다고 보지 않습니다.

색상 선택 구간에서는 실제로 확인된 색상 이름이 정보의 일부일 수 있습니다. 구조를 보여주는 공통 도식에서는 색상을 강조하는 설명이 오히려 의미를 흐릴 수도 있습니다. 파일의 분위기나 홍보 문장을 길게 쓰기보다 현재 문맥에서 구분해야 하는 정보를 남깁니다. 실제 제품 자료에서 확인하지 못한 평가나 성능을 이미지 설명에 더하지 않습니다.

여러 장의 이미지가 한 정보를 설명하는지, 관련된 서로 다른 장면을 보여주는지도 구분합니다. W3C WAI의 이미지 묶음 안내는 한 정보의 집합과 개별 장면의 묶음에 대한 설명을 나누어 다룹니다. 대표 사진, 상세 장면, 구성 안내가 어떤 관계인지 본문과 캡션에서 알려주고 실제 읽기 순서는 대상 환경에서 검수해야 합니다.

생성 이미지·참고 장면·실제 제품 자료를 섞지 않습니다

공통 설명 도식과 실제 옵션 사진은 역할을 표시합니다. 도식을 특정 색상이나 제품을 촬영한 자료처럼 소개하지 않습니다.

상품 색상은 촬영·조명·표시 환경에 따라 다르게 보일 수 있지만 이 사실을 부정확한 사진을 정당화하는 문구로 사용하지 않습니다. 사진과 제품이 어떤 자료 관계를 가지는지 운영자가 먼저 확인해야 합니다. 실제로 확인한 구성과 조건, 참고용으로만 제공한 장면을 구분해 독자가 어디까지 판단할 수 있는지 알게 합니다.

선택 정보와 검색용 데이터도 실제 상품을 기준으로 봅니다

상품 변형 구조화 데이터를 제공한다면 화면의 옵션 식별·사양과 같은 제품을 가리켜야 합니다. Google의 상품 변형 안내는 ProductGroup과 Product의 관계를 설명합니다. 이 글의 가상 트레이는 판매 상품 데이터로 제공하지 않습니다.

이미지 교체 승인은 옵션 단위로 기록합니다

대표 사진만 교체하지 말고 선택 이름, 본문 사양, 캡션과 공통 도식까지 대조합니다. 모든 옵션을 차례로 선택하고 연속 변경·뒤로 가기·요청 실패도 확인하세요. 사진의 해상도만 바뀐 경우와 실제 구성 정보가 바뀐 경우를 구분해 기록하면 다음 교체 범위가 명확해집니다.

선택은 차콜인데 사진은 화이트인 상태를 기록하는 예시

demo-CH·demo-WH는 가상의 옵션 식별자입니다. 실제 상품 사진·SKU 또는 판매 결과가 아닙니다.

파일명이 차콜이라고 되어 있어도 실제 이미지와 설명이 그 옵션을 보여주는지는 확인이 남습니다. 연결표에는 옵션 식별자·파일·설명·공통 여부와 확인 상태를 한 행으로 기록합니다. 실패 상태에서는 선택 의미를 텍스트로 유지하고 재시도 또는 확인 경로를 제공하되 미확인 사진으로 빈자리를 채우지 않습니다. 공통 그림의 조건이 바뀌면 모든 연결 옵션의 재검수 범위도 함께 찾습니다.

참고 자료와 설명용 정보의 범위

• W3C WAI: 이미지 설명 결정 트리 — 문맥과 기능에 따른 역할 구분.
• W3C WAI: 이미지 묶음 — 한 정보의 집합과 개별 장면의 관계.
• Google: 상품 변형 구조화 데이터 — 실제 판매 상품의 그룹과 변형 맥락.