고객이 실제로 보는 것부터 파악하기
많은 사람이 '이미지 링크'를 기술적인 문제로 생각하지만, 고객은 링크 코드를 볼 수 없습니다. 고객이 페이지에서 보는 것은 세 가지입니다: 이미지 자체, 이미지 옆의 텍스트, 그리고 이미지가 로드되지 않을 때 나타나는 대체 텍스트입니다. 이해 비용을 줄인다는 것은 이 세 가지가 같은 내용을 가리키도록 하여 고객이 이 이미지를 클릭하면 무엇이 나올지 추측하지 않아도 되게 만드는 것입니다.
흔한 반례는 다음과 같습니다: 이미지는 제품 포장 사진인데 파일명은 IMG_2043.jpg, alt는 'banner', 옆 텍스트는 '자세히 알아보기'로 되어 있는 경우입니다. 고객은 클릭하기 전까지 무엇이 나올지 전혀 알 수 없고 그저 감으로 시도할 뿐입니다. 이것이 이해 비용이 높은 전형적인 모습입니다.
파일명: 먼저 팀 내에서 검색 가능하게 만들기
파일명은 페이지에 직접 표시되지는 않지만 두 가지에 영향을 미칩니다. 첫째, 검색엔진이 이미지를 크롤링할 때 판단 근거 중 하나가 됩니다. 둘째, 운영팀이 나중에 백엔드 자료실에서 이 이미지를 찾을 수 있는지 여부입니다. 작성 시에는 '콘텐츠 주제 + 용도 또는 위치' 조합을 권장하며, 중간은 하이픈으로 연결합니다. 예: valve-product-cover.jpg, factory-workshop-01.jpg. 카메라 기본 번호, 한글+공백, 여러 개의 밑줄 등은 피하세요.
판단 기준은 간단합니다: 파일명만 동료에게 보냈을 때 그가 대략 어떤 이미지인지 말할 수 있는가? 말할 수 없다면 이름 짓기가 제 역할을 못한 것입니다. 같은 배치의 이미지는 스타일을 통일하는 것이 좋습니다. 일부는 영어, 일부는 병음, 일부는 번호로 되어 있으면 나중에 정리하기 매우 번거로워집니다.
alt 텍스트: 이미지를 볼 수 없는 사람을 위한 한 줄 설명
alt는 이미지의 대체 텍스트로, 이미지 로드 실패 시 표시되고 스크린 리더도 읽어줍니다. 그 역할은 키워드를 나열하는 것이 아니라 이 이미지가 무엇을 표현하는지 설명하는 것입니다. 작성 시에는 이미지 내용을 한 문장으로 명확히 설명하고, 필요하면 이미지가 가리키는 페이지 주제를 포함합니다. 예: '작업장 품질 검사 흐름도' (O), '작업장 품질 검사 공정 제조사 가격' (X).
이 이미지 자체가 링크 진입점이라면 alt는 고객이 클릭했을 때 보게 될 내용을 쓸 수 있습니다. 예: '품질 검사 흐름 설명 보기'. 여기서 주의할 경계가 있습니다: alt 작성법은 콘텐츠 구성 차원의 경험이며, 구체적으로 검색엔진이 alt를 어떻게 활용하는지, 순위에 영향을 주는지는 검증이 필요한 메커니즘 문제로 이 글에서는 결론을 내리지 않습니다. 운영 측면에서는 우선 고객과 보조 도구가 이해할 수 있도록 하는 방향이 안정적입니다.
주변 텍스트: 이미지와 텍스트가 따로 말하지 않게 하기
고객이 이미지를 이해하는 것은 이미지 자체보다 옆의 텍스트에 의존하는 경우가 많습니다. 이미지가 제품 사진이고 옆에 '상세 사양 보기'라고 쓰여 있으면 고객은 클릭 시 사양 페이지가 나온다고 생각합니다. 옆에 '문의 환영'이라고 쓰여 있으면 고객은 상담 창이 나온다고 생각합니다. 이 두 가지 기대는 완전히 다릅니다.
주변 텍스트를 작성할 때는 먼저 이 이미지를 클릭하면 어느 페이지로 이동하는지 정하고, 그 페이지가 제공하는 내용을 한 문장으로 명확히 설명하세요. 이미지, alt, 주변 텍스트 세 가지가 같은 내용을 가리키면 이해 비용은 자연히 낮아집니다. 반대로 세 가지가 일치하지 않으면 고객이 올바르게 클릭해도 어색함을 느낍니다.
클릭 영역과 위치: 여기가 클릭 가능하다는 것을 알게 하기
어떤 이미지 링크는 고객이 클릭 가능한지 전혀 모릅니다. 일반 삽화와 구분이 안 되기 때문입니다. 조정할 수 있는 사항은 다음과 같습니다: 클릭 가능한 이미지에 명확한 시각적 상태 부여(예: 호버 시 약간 변화), 고객이 클릭할 것으로 예상하는 위치에 클릭 가능한 이미지 배치(예: 제품 목록), 텍스트 중간에 클릭 가능한 이미지를 삽입하여 이미지 클릭인지 텍스트 클릭인지 혼란스럽게 하지 않기.
또한 같은 이미지에 서로 다른 두 개의 이동 대상을 동시에 연결하지 마세요. 어떤 페이지는 이미지 왼쪽 클릭 시 제품 페이지, 오른쪽 클릭 시 상담 페이지로 이동하여 고객이 판단하기 어렵고 잘못 클릭하기 쉽습니다. 정말 두 개의 진입점이 필요하다면 두 개의 이미지나 두 개의 텍스트 버튼으로 분리하세요.
게시 전 이 순서로 점검하기
- 페이지의 모든 이미지 링크를 나열하고 각각 클릭 시 어느 페이지로 이동하는지 확인합니다.
- 파일명이 검색 가능한지, 같은 배치의 이미지 명명 스타일이 통일되었는지 확인합니다.
- alt가 이미지 내용을 명확히 설명하는지, 키워드가 나열되어 있지 않은지 확인합니다.
- 이미지 옆 텍스트가 클릭 후 페이지 내용과 일치하는지 확인합니다.
- 모바일로 페이지를 열어 클릭 가능한 이미지가 명확하고 쉽게 클릭되는지 확인합니다.
- 이미지를 임시로 숨기거나 오프라인 로딩하여 대체 텍스트만으로 고객이 여기가 무엇인지 이해할 수 있는지 확인합니다.
이 점검은 전문 도구가 필요 없으며 운영 담당자가 직접 할 수 있습니다. 완료 후 이미지 링크는 '고객이 감으로 클릭'에서 '고객이 클릭하면 무엇이 나올지 아는' 상태로 바뀝니다. 이것이 이해 비용을 줄이는 실제 효과입니다.
