이미지를 검색되는 HTML로 바꾸는 4단계
코딩 없이, 기존 디자인 그대로.
상세페이지가 검색엔진에 보이기 시작합니다.
↓ 아래에서 각 단계를 자세히 살펴보세요
초보자 모드 — 클릭만으로 완성
코딩을 몰라도 됩니다. 이미지 올리고, 영역 나누고, 버튼 누르면 끝.
대부분의 셀러는 이 모드만으로 충분해요.
상세페이지 이미지 업로드
긴 상세페이지 이미지 한 장을 드래그 앤 드롭으로 업로드합니다. 업로드한 이미지를 구간별로 나눠 이미지 유지 또는 HTML 변환을 선택하게 됩니다.
긴 이미지 한 장을 올리거나 여러 장의 이미지로 나눠져 있는 경우 하나씩 업로드해서 변환한 후 코드를 순서대로 합쳐서 자사몰에 적용하세요.
구간 나누고 타입 선택
빨간 절단선으로 이미지를 구간별로 나눕니다. 공백 줄을 클릭하면 절단선이 추가되고, 기존 절단선을 클릭하면 제거됩니다. 최대 60개 구간까지 나눌 수 있어요.
- • “이미지 유지” — 해당 구간은 이미지 그대로 유지
- • “HTML 변환” — 해당 구간의 텍스트를 AI가 시맨틱 HTML로 변환
키워드 입력, 코드 생성, 복사
HTML 변환 요청 화면에서 두 가지를 입력할 수 있습니다.
입력 옵션
키워드를 입력하면 alt 태그와 figcaption이 더 정확하게 생성됩니다. 상품명, 특징, 주요 키워드를 넣어주세요.
유닛 소모 안내
생성 전에 소모 예정 유닛이 표시됩니다. 잔여 유닛과 이번 생성 후 잔액을 확인할 수 있어요.
마음에 안 들면, 그 부분만 다시
결과가 원본 이미지와 다른 부분이 있다면 수정 요청을 누르세요. 전체를 다시 만들지 않고, 그 부분만 다시 생성합니다. 수정 요청은 1회 1유닛만 소모됩니다.
원본 재현율은 평균 80% 수준입니다. 나머지 20%를 채우는 게 바로 이 버튼이에요.
세온코더가 생성하는 것들
버튼 한번으로 검색엔진이 이해할 수 있는 구조가 만들어집니다.
시맨틱 HTML 구조
검색엔진이 콘텐츠의 구조를 이해할 수 있는 HTML 코드를 생성합니다. 제목, 본문, 이미지가 의미에 맞게 정리되고, 스타일은 전부 태그 안에 인라인으로 들어갑니다.
<figure style="margin: 0;">
<img src="product.jpg"
alt="..." style="width: 100%;">
<figcaption style="...">
...</figcaption>
</figure>alt 태그 AI 생성
입력한 키워드를 기반으로 이미지 설명(alt 태그)을 AI가 생성합니다. 검색엔진 최적화와 웹 접근성을 동시에 확보합니다.
<img alt="수파카즈 바테일 로드바이크 바테이프 블랙" ...>
figcaption 자동 생성
이미지 아래에 설명 텍스트를 자동으로 추가합니다. 사용자와 검색엔진 모두에게 맥락을 제공합니다.
<figcaption>가볍고 내구성 좋은 프리미엄 바테이프</figcaption>
바로 붙여넣는 인라인 코드
모든 스타일이 태그 안에 들어 있는 인라인 방식으로 출력됩니다. 클립보드에 복사해서 카페24 상세페이지 에디터에 붙여넣으면, 에디터를 거쳐도 디자인이 변형 없이 유지돼요.
모바일 가독성 개선
PC 기준으로 만든 이미지 상세페이지는 모바일에서 글씨가 작게 표시되고, 고객은 확대하다가 이탈합니다. 세온코더는 이미지 안의 텍스트를 HTML 텍스트로 전환하면서, 모바일 화면 폭에 맞춰 글자 크기가 조절되도록 생성합니다. 고객이 확대하지 않아도 읽을 수 있어요.
이렇게 바꾼 상세페이지가 실제로 어떤 검색 성과를 냈는지는 사례 페이지에서 확인할 수 있습니다.
이미지는 어디에 저장되나요?
설정은 처음 한 번뿐입니다. 영상을 따라 하면 10분이면 끝나요.
세온코더에서 상세페이지를 변환하면, 코딩이 필요 없는 이미지 구간은 호스팅 서버에 저장되어야 합니다. 쇼핑몰에 코드를 붙여넣었을 때 이미지가 정상적으로 로딩되려면, 이미지가 접근 가능한 URL에 있어야 하기 때문입니다.
이미지가 세온코더 서버에 저장됩니다. 체험용이므로 실제 쇼핑몰에 적용하기에는 적합하지 않습니다.
고도이미지호스팅(쇼핑몰 솔루션과 별개로, 변환된 이미지를 보관하고 쇼핑몰로 불러오는 외부 이미지 보관 서비스)에 이미지가 저장됩니다. 지정한 폴더 경로에 업로드되어, 쇼핑몰에 코드를 입력하면 호스팅 서버에서 이미지가 로딩됩니다.
- 1고도이미지호스팅 계정 설정 (호스트, 포트, 사용자명, 공개 URL)
- 2상세페이지 변환 시 업로드 경로(폴더명) 지정
- 3“이미지 유지” 구간의 이미지가 고도이미지호스팅 → 지정 폴더에 업로드
- 4생성된 HTML의 이미지 경로 = 고도이미지호스팅 공개 URL
- 5쇼핑몰에 코드 붙여넣기 → 이미지 정상 로딩
보안 안내
고도이미지호스팅 비밀번호는 세온코더 서버에 저장되지 않습니다. 브라우저에만 저장되며, 작업할 때마다 직접 입력하는 방식입니다. 비밀번호가 서버를 거치지 않으므로 정보 유출이 원천 차단됩니다.
코딩에 익숙하시다면, 블록 단위로 더 세밀하게 제어할 수도 있습니다.
코드 생성 후, 검색 결과 문구까지
생성된 코드를 그대로 넣으면 메타 디스크립션(검색 결과에 보이는 설명 문구) 초안이 나옵니다.
세온코더 토큰을 쓰지 않는 무료 보조 도구입니다. Gemini와 ChatGPT 어디서든 쓸 수 있어요.
세온코더 앱에서 HTML을 생성하면, 결과 화면에 “다음 단계” 영역이 나타납니다. 여기서 바로 전용 도구로 이동할 수 있습니다.
메타 디스크립션 작성
- 1세온코더에서 생성된 코드 복사
- 2Gemini 또는 ChatGPT 전용 도구에 붙여넣기
- 3메타 디스크립션 초안 출력
- 4쇼핑몰 관리자 페이지에 입력
지원 플랫폼
세온코더는 카페24 자사몰 전용입니다.
생성된 코드는 각 플랫폼의 상세페이지 에디터에 붙여넣으면 됩니다.
상품 상세설명 에디터에 붙여넣기
세온코더의 코드는 스타일이 전부 태그 안에 들어 있는 인라인 방식입니다. 에디터를 거쳐도 디자인이 변형 없이 유지돼요.
알아두세요
스마트스토어 등 오픈마켓은 자체 에디터가 붙여넣은 코드를 임의로 변형하기 때문에 지원하지 않습니다. 검색 노출이 대표님의 자산으로 남는 자사몰에 집중합니다.
영상으로 배우기
텍스트보다 영상이 편하다면, 여기서 확인하세요.
세온코더 사용법부터 활용 팁까지 영상으로 안내합니다.
세온코더 사용법
3단계 사용법 영상 가이드
FTP 설정
FTP 서버 설정 방법
GPTs/GEMs 활용
메타 디스크립션 작성
* 영상은 이전 버전 화면 기준입니다. 현재 버전에는 수정 요청 기능이 추가되었습니다.
자주 묻는 질문
"이미지 유지" 구간은 원본 그대로 사용되고, "HTML 변환" 구간만 텍스트로 전환됩니다. HTML로 전환된 구간은 원본 디자인을 평균 80% 수준으로 재현합니다. 100% 동일한 픽셀 재현보다는, 검색엔진이 읽을 수 있는 텍스트를 만드는 것이 목적입니다. 달라진 부분은 수정 요청으로 그 부분만 다시 만들 수 있어요.
직접 해보세요
10유닛 무료 체험으로 실제 작동 방식을 확인할 수 있습니다. 코딩 지식 불필요, 1분이면 시작할 수 있어요.
실제 쇼핑몰 적용은 크레딧 충전 후 가능합니다.