슈퍼플래닝은 상세페이지 HTML 변환을 어떻게 진행하나요?
슈퍼플래닝은 전문 퍼블리셔가 함께하는 UX디자인 에이전시로, JPG·PNG 이미지로 만든 제품 상세페이지를 HTML 텍스트로 변환하는 퍼블리싱 작업을 진행합니다.
제품명, 성분, 용량, 사용법처럼 이미지 안에 갇혀 있던 정보를 텍스트로 바꿔 검색엔진과 생성형 AI가 읽을 수 있게 하고, 고객도 브라우저 찾기(Ctrl+F)로 원하는 정보를 바로 찾을 수 있게 만듭니다.
- 온라인몰 규격 HTML 소스 제공 — 각 온라인몰이 요청하는 형식에 맞춰, 바로 적용할 수 있는 HTML 소스를 전달합니다.
- 테스트 작업부터 시작 — 대표 상세페이지 2~3개로 몰 적용을 먼저 확인한 뒤 전체 제품으로 확대합니다.
- 디자인 톤 유지 — 제품 사진과 연출 이미지는 그대로 두고, 정보성 문구만 텍스트로 분리합니다.
이미지 속 문구는 사람 눈에는 보이지만, 검색엔진과 AI에게는 읽기 어려운 정보입니다.
이미지로 만든 상세페이지는 왜 검색에 잘 보이지 않나요?
국내 온라인몰의 상세페이지는 여러 판매 채널에 같은 파일을 쉽게 올리기 위해 통이미지로 제작하는 경우가 많습니다.
하지만 이미지 안의 글자는 HTML 텍스트가 아니어서, 검색엔진과 AI 검색이 페이지의 핵심 정보를 정확하게 읽고 인용하기 어렵습니다.
- 검색 노출의 한계 — 구글 검색 센터에 따르면 구글은 이미지를 이해할 때 대체 텍스트(alt)를 가장 중요한 정보로 활용하지만, alt는 이미지를 짧게 설명하는 용도입니다. 상세페이지 전체 문구를 대신할 수는 없습니다.
- AI 검색 인용의 한계 — AI 검색은 웹 문서를 수집할 때 이미지 분석보다 텍스트를 우선 활용하는 경향이 있어, 통이미지 상세페이지는 AI 답변에 인용되기 어렵다는 분석이 나오고 있습니다.
- 페이지 안 검색 불가 — 고객이 Ctrl+F로 "성분"이나 "용량"을 찾아도 이미지 속 글자는 검색되지 않습니다.
- 웹 접근성 — 국제 웹 접근성 지침(WCAG 2.2)은 기술적으로 가능하다면 글자 이미지 대신 텍스트로 정보를 전달하도록 권고합니다.
| 항목 | 이미지 상세페이지 | HTML 텍스트 상세페이지 |
|---|---|---|
| 검색엔진 읽기 | 이미지 alt 설명 정도만 읽음 | 제품명·성분·사용법 문구를 텍스트로 읽음 |
| AI 검색 인용 | 핵심 정보 인용이 어려움 | 문장 단위로 인용될 가능성이 높아짐 |
| 페이지 안 검색 | Ctrl+F 검색 불가 | Ctrl+F로 원하는 정보 바로 찾기 |
| 문구 수정 | 이미지를 다시 제작해야 함 | 텍스트만 고쳐 빠르게 반영 |
| 모바일 가독성 | 작은 글자를 확대해야 읽힘 | 화면 폭에 맞춰 글자가 읽힘 |
상세페이지 전체를 텍스트로 바꿔야 하나요?
아닙니다.
제품 연출 사진, 패키지 이미지, 감성 비주얼처럼 이미지로 보여 줘야 하는 영역은 그대로 두고, 정보성 문구만 HTML 텍스트로 분리하는 방식이 가장 현실적입니다.
- 텍스트로 바꾸면 효과가 큰 정보 — 제품명, 핵심 효능 문구, 전성분, 용량·규격, 사용 방법, 주의사항, 자주 묻는 질문
- 이미지로 유지하는 영역 — 제품 컷, 모델·연출 사진, 브랜드 로고, 비포·애프터 같은 시각 자료
이렇게 나누면 기존 상세페이지의 디자인 톤은 유지하면서, 검색에 필요한 정보는 텍스트로 노출할 수 있습니다.
온라인몰마다 HTML 규격이 다른데 바로 적용할 수 있나요?
오픈마켓과 종합몰은 보안과 화면 통일을 위해 상세설명에 넣을 수 있는 HTML을 제한하는 경우가 많습니다.
스크립트나 별도 스타일 파일이 지워지거나, 예시처럼 <center>, <img>, <br> 위주의 단순한 HTML 소스만 받는 몰도 있습니다.
그래서 상세페이지 HTML 변환은 "코드를 예쁘게 짜는 일"보다 몰별 규격 안에서 깨지지 않는 HTML을 만드는 일이 핵심입니다.
| 항목 | 확인 내용 |
|---|---|
| 허용 태그 | 스크립트·iframe·style 태그 허용 여부, 사용 가능한 기본 태그 |
| 스타일 방식 | 외부 CSS 대신 태그 안에 직접 적는 인라인 스타일만 되는지 |
| 이미지 호스팅 | 이미지를 어느 서버에 올리고 어떤 절대 경로로 연결할지 |
| 가로 폭·모바일 | 상세 영역 가로 폭과 모바일 화면에서의 표시 방식 |
| 폰트 | 웹폰트 사용 가능 여부, 기본 글꼴로 대체될 때의 모양 |
몰별 허용 규칙은 공개되지 않은 경우도 많습니다.
따라서 소수 페이지로 먼저 테스트 등록을 해 보고, 정상 적용을 확인한 뒤 전체 제품으로 확대하는 방식을 권장합니다.
상세페이지 HTML 변환은 어떤 순서로 진행되나요?
- 원본 확인 — 상세페이지 이미지와 원고(텍스트 원본), 디자인 원본 파일 유무를 확인합니다.
- 영역 설계 — 이미지로 유지할 영역과 텍스트로 바꿀 영역을 나눕니다.
- 몰 규격 확인 — 적용할 온라인몰의 HTML 제출 형식과 제한 사항을 정리합니다.
- HTML 퍼블리싱 — 몰 규격에 맞춘 HTML 소스를 작성하고, 문구 오탈자와 표기를 교정합니다.
- 테스트 적용·확대 — 테스트 페이지를 몰에 등록해 PC·모바일 표시를 검수한 뒤 전체 제품으로 확대합니다.
처음부터 전 제품을 맡기기보다 대표 상세페이지 2~3개로 테스트 작업을 먼저 진행하면, 몰별 적용 가능 여부와 작업 기준을 빠르게 확정할 수 있습니다.
비용과 기간은 무엇으로 정해지나요?
상세페이지 HTML 변환 비용과 기간은 페이지 수만으로 정해지지 않습니다.
아래 내용을 정리해 문의하시면 더 정확한 견적을 빠르게 받을 수 있습니다.
- 페이지 수와 길이 — 변환할 상세페이지 개수와 페이지당 분량
- 원고 유무 — 텍스트 원본이 있는지, 이미지 속 문구를 옮겨 적어야 하는지
- 적용 몰 수 — 몰마다 HTML 형식이 다르면 버전을 나눠 제작
- 이미지 재편집 — 텍스트를 뺀 이미지로 다시 잘라야 하는지
- 자사몰 추가 작업 — 자사몰이라면 상품 구조화 데이터 등 검색 최적화 작업 포함 여부
슈퍼플래닝에 상세페이지 퍼블리싱을 맡기면 무엇이 다른가요?
슈퍼플래닝은 2019년 설립 이후 누적 100건 이상의 UX 프로젝트를 수행한 UX디자인 에이전시입니다.
웹/앱 개발팀에 전문 퍼블리셔들이 함께하고 있어, 상세페이지 HTML 변환 작업을 안정적으로 진행합니다.
- 복잡한 화면의 퍼블리싱 경험 — 데이터 그리드와 대시보드처럼 까다로운 화면까지 퍼블리싱해 온 실무진이 작업합니다.
- 문구까지 함께 정리 — UX라이팅을 전담하는 UX기획팀이 변환 과정에서 오탈자와 표기를 함께 다듬습니다.
- 검색 최적화 경험 — 슈퍼플래닝 홈페이지도 검색엔진과 AI 검색에 맞춰 직접 최적화하며 운영하고 있습니다.
슈퍼플래닝 퍼블리셔들은 국토교통부, KT, CJ대한통운, HD현대인프라코어(구 두산인프라코어), 한국비씨피솔루션즈 등의 퍼블리싱 프로젝트를 수행했습니다.
공공 빅데이터 시스템, 통신사 네트워크 관리 화면, 데이터 그리드(RealGrid)를 쓰는 업무 포털, 대시보드처럼 복잡한 화면을 안정적으로 구현해 왔습니다.
제품 상세페이지 HTML 변환이 필요하다면 문의하기에 상세페이지 예시와 적용할 온라인몰을 남겨 주세요.
담당 실무진이 진행 가능 여부와 기간, 견적을 빠르게 안내해 드립니다.
상세페이지 HTML 변환, 자주 묻는 질문
이미지 상세페이지를 HTML로 바꾸면 검색 상위 노출이 보장되나요?
검색 순위는 검색엔진이 여러 요소로 결정하므로 상위 노출을 보장할 수는 없습니다.
다만 이미지 속에 갇혀 있던 제품 정보가 텍스트가 되면, 검색엔진과 AI 검색이 내용을 읽고 활용할 수 있는 기반이 마련됩니다.
기존 상세페이지 디자인은 그대로 유지되나요?
제품 사진과 연출 이미지는 그대로 두고 정보성 문구만 텍스트로 바꾸므로, 기존 디자인 톤을 최대한 유지할 수 있습니다.
몰 규격상 표현이 어려운 부분은 테스트 단계에서 미리 확인해 조정합니다.
오픈마켓, 종합몰, 자사몰에 모두 적용할 수 있나요?
몰마다 허용하는 HTML 형식이 달라 몰별로 확인이 필요합니다.
슈퍼플래닝은 각 몰이 요청하는 형식에 맞춘 HTML 소스를 제공하며, 자사몰은 검색 최적화 작업까지 함께 검토할 수 있습니다.
원고 파일 없이 상세페이지 이미지만 있어도 되나요?
가능합니다.
이미지 속 문구를 텍스트로 옮겨 적은 뒤 오탈자와 표기를 교정하는 과정을 거칩니다.
원고 파일이 있으면 작업 기간을 줄일 수 있습니다.
상세페이지 몇 개부터 의뢰할 수 있나요?
상세페이지 2~3개 정도의 테스트 작업부터 의뢰할 수 있습니다.
테스트로 몰 적용과 작업 기준을 확인한 뒤 전체 제품으로 확대하는 방식을 권장합니다.