국내 쇼핑몰 상세페이지를 열어 마우스로 문구를 드래그해 보십시오. 대부분 선택되지 않습니다. 제품 설명도, 사이즈 표도, 배송 안내도 전부 이미지이기 때문입니다.
브랜드 사이트도 사정이 비슷합니다. 소개 페이지 전체가 디자이너가 만든 긴 이미지 한 장인 경우가 흔합니다.
그리고 같은 회사가 이렇게 말합니다.
"네이버랑 구글에 저희 제품이 안 나와요. 요즘은 AI한테 물어봐도 안 나오고요."
두 사실은 같은 이야기입니다.
왜 다들 이미지로 만들까
이 관행에는 이유가 있습니다. 비난할 일이 아닙니다.
디자인 자유도 — 폰트, 자간, 곡선 배치, 그림자. 웹 텍스트로 구현하려면 공수가 드는 표현을 이미지에서는 그냥 그리면 됩니다.
에디터의 한계 — 오픈마켓과 임대형 쇼핑몰의 상세페이지 편집기는 자유로운 레이아웃을 지원하지 않습니다. 이미지 한 장을 올리는 것이 가장 확실합니다.
납품 단위 — 상세페이지 디자인 외주의 결과물은 보통 JPG·PNG입니다. 그 파일이 그대로 사이트에 올라갑니다.
여러 채널 재사용 — 같은 이미지를 스마트스토어, 쿠팡, 자사몰, 인스타그램에 그대로 씁니다.
합리적인 선택입니다. 문제는 자사 홈페이지에서도 같은 방식을 쓸 때 생깁니다. 오픈마켓은 플랫폼 자체가 검색 트래픽을 데려다주지만, 자사 홈페이지는 스스로 검색에 잡혀야 합니다.
이미지 안의 글자로 잃는 것
검색엔진이 읽지 못한다
가장 큰 손실입니다. 검색엔진은 페이지의 텍스트를 색인합니다. 이미지 안의 픽셀로 그려진 글자는 색인 대상이 아닙니다.
제품명, 성분, 사이즈, 사용법, 가격 정책 — 사람들이 실제로 검색하는 단어가 전부 이미지 안에 있으면 그 페이지는 검색엔진 입장에서 거의 빈 문서입니다.
AI 검색은 더 불리하다
최근 유입 경로에서 비중이 커진 쪽입니다. AI 검색 도구들은 웹 문서의 텍스트를 읽어 답변을 만듭니다. 읽을 텍스트가 없으면 인용 대상에서 빠집니다. 검색 결과에서 밀리는 것보다 조용하게 손해를 봅니다.
복사·검색·번역이 안 된다
사용자가 성분명을 복사해 검색해 보려 해도 되지 않습니다.
페이지 안에서 Ctrl+F로 원하는 항목을 찾을 수도 없습니다.
브라우저 자동 번역도 동작하지 않아 해외 유입 고객은 아무것도 읽지 못합니다.
수정할 때마다 디자이너가 필요하다
가격이 바뀌었습니다. 전화번호가 바뀌었습니다. 텍스트라면 관리자 화면에서 1분이면 끝날 일이, 이미지면 원본 파일을 찾아 열어야 합니다. 원본 파일을 분실했다면 그 페이지는 사실상 수정 불가입니다. 실제로 자주 벌어지는 일입니다.
접근성에서 탈락한다
화면을 읽어주는 보조기기 사용자에게 이미지 상세페이지는 존재하지 않는 것과 같습니다. 공공기관 납품이나 접근성 요건이 걸린 사업이라면 그 자체로 미달입니다.
"alt 텍스트 넣으면 되지 않나요"
자주 나오는 질문인데, 대체 수단이 되지 못합니다.
alt 속성은 이미지가 무엇인지 한 줄로 설명하는 자리입니다.
상세페이지 한 장에 들어간 3,000자 분량의 본문을 alt에 밀어 넣는 것은 용도에서 벗어난 사용이고,
검색엔진도 그런 텍스트를 본문과 동등하게 취급하지 않습니다.
alt는 넣어야 하는 것이지, 본문을 대신하는 것이 아닙니다.
그럼 어떻게 만드나
핵심은 단순합니다. 배경과 글자를 분리합니다.
- 사진·질감·장식은 그대로 이미지로 둡니다
- 글자는 이미지에서 빼내 웹 텍스트로 다시 조판합니다
- 제목은 제목 태그로, 목록은 목록 태그로, 표는 표 태그로 구조를 잡습니다
결과 화면은 원본과 거의 같아 보입니다. 다만 문구가 드래그되고, 검색엔진이 읽어갑니다.
이 작업이 왜 '면당 얼마'로 계산되나
외주 견적서에서 이 항목이 페이지 수 기준으로 잡히는 이유가 있습니다. 자동화가 되지 않는 반복 작업이기 때문입니다.
한 면을 처리하려면 이만큼 합니다.
- 이미지에서 문구를 하나씩 옮겨 적는다 (OCR은 한글 디자인 폰트에서 오탈자가 많아 결국 사람이 검수합니다)
- 어디가 제목이고 어디가 본문인지 구조를 판단한다
- 원본과 비슷해 보이도록 폰트·크기·여백을 맞춘다
- 배경으로 쓸 이미지를 글자 없이 다시 만들거나 잘라낸다
- 모바일에서 줄바꿈이 깨지지 않는지 확인한다
한 면에 반나절이 걸리기도 합니다. 그래서 페이지 수가 곧 금액입니다. 견적서에서 "상세페이지 30면"과 "상세페이지 5면"의 차이는 이 반복 횟수입니다.
발주자가 비용을 낮추는 방법
이 작업의 비용은 자료를 어떻게 주느냐에 따라 크게 달라집니다.
① 원본 텍스트를 따로 준다
디자이너에게 넘겼던 원고 파일이 남아 있다면 그것만으로 1번 단계가 통째로 사라집니다. 한글 파일, 메모장, 메신저로 주고받은 문구 — 형식은 상관없습니다.
② 레이어가 살아 있는 디자인 원본을 준다
PSD·AI·피그마 파일이 있으면 텍스트를 그대로 추출할 수 있고, 글자를 지운 배경 이미지도 바로 뽑아낼 수 있습니다. 4번 단계까지 없어집니다.
③ 중복을 먼저 정리한다
상세페이지 여러 장에 같은 배송 안내, 같은 브랜드 소개가 반복되는 경우가 많습니다. 한 번만 만들어 공통으로 쓰면 그만큼 면수가 줄어듭니다.
④ 어디까지 필요한지 정한다
이게 가장 크게 절약됩니다. 다음 항목에서 다룹니다.
전부 바꿀 필요는 없다
모든 이미지를 텍스트로 바꾸는 것은 과잉입니다. 우선순위를 나누면 비용의 상당 부분이 빠집니다.
반드시 웹 텍스트로 — 검색에 직접 영향
- 페이지 대표 제목과 소제목
- 제품명·모델명·성분·규격·용량
- 가격과 가격 정책
- 서비스 범위, 진행 방식, 이용 조건
- 자주 묻는 질문
- 회사·매장 정보, 연락 방법
이 항목들이 사람들이 실제로 검색창에 치는 단어입니다.
이미지로 둬도 되는 것
- 감성 컷, 연출 사진, 배경 질감
- 캡처 형태의 리뷰 이미지
- 인포그래픽 중 핵심 수치를 옆에 텍스트로 한 번 더 적어 두는 경우
- 이벤트 배너처럼 수명이 짧은 것
절충안: 대표 항목만 텍스트로
리뷰가 30장이라고 전부 옮겨 적을 필요는 없습니다. 갤러리로 그대로 걸고, 대표 리뷰 3~5건만 텍스트로 옮기면 검색 효과의 대부분을 가져갑니다. 비용은 30분의 5입니다.
확인하는 법
지금 운영 중인 페이지가 어느 쪽인지 30초면 확인됩니다.
드래그해 봅니다. 문구가 선택되면 텍스트, 안 되면 이미지입니다.
Ctrl+F로 제품명을 찾아봅니다. 화면에 보이는데 검색되지 않으면 이미지입니다.
브라우저 번역을 걸어봅니다. 그대로면 이미지입니다.
세 가지 중 하나라도 걸린다면, 그 페이지의 내용은 검색엔진에게 아직 전달되지 않았습니다.
정리
- 이미지 안의 글자는 검색엔진도 AI도 읽지 못합니다.
alt는 대체 수단이 아닙니다. - 해법은 배경 이미지와 글자를 분리해 글자를 웹 텍스트로 다시 조판하는 것입니다.
- 자동화가 안 되는 반복 작업이라 견적에서 면당 단가로 잡힙니다. 페이지 수가 곧 금액입니다.
- 원본 텍스트나 레이어 살린 디자인 파일을 주면 비용이 눈에 띄게 내려갑니다.
- 전부 바꿀 필요는 없습니다. 제목·제품명·가격·조건·FAQ만 텍스트로 옮겨도 대부분의 효과를 가져갑니다.
외주 견적을 받을 때 "상세페이지를 이미지 그대로 올리는지, 텍스트로 다시 조판하는지" 를 물어보시기 바랍니다. 같은 '상세페이지 제작'이라는 항목 아래 전혀 다른 작업이 들어 있고, 금액도 그만큼 다릅니다.