이미지를 검색되는 HTML로 바꾸는 3단계
코딩 없이, 기존 디자인 그대로.
상세페이지가 검색엔진에 보이기 시작합니다.
↓ 아래에서 각 단계를 자세히 살펴보세요
초보자 모드 — 클릭만으로 완성
코딩을 몰라도 됩니다. 이미지 올리고, 영역 나누고, 버튼 누르면 끝.
대부분의 셀러는 이 모드만으로 충분합니다.
상세페이지 이미지 업로드
긴 상세페이지 이미지 한 장을 드래그 앤 드롭으로 업로드하세요. 업로드한 이미지를 구간별로 나눠 이미지 유지 또는 HTML 변환을 선택하게 됩니다.
긴 이미지 한 장을 올려주세요. 여러 장을 따로 올리는 방식이 아닙니다.
구간 나누고 타입 선택
빨간 절단선으로 이미지를 구간별로 나눕니다. 공백 줄을 클릭하면 절단선이 추가되고, 기존 절단선을 클릭하면 제거됩니다. 최대 60개 구간까지 나눌 수 있어요.
- • “이미지 유지” — 해당 구간은 이미지 그대로 유지
- • “HTML 변환” — 해당 구간의 텍스트를 AI가 시맨틱 HTML로 변환
키워드 입력, 코드 생성, 복사
HTML 변환 요청 화면에서 두 가지를 입력할 수 있습니다.
입력 옵션
키워드를 입력하면 alt 태그와 figcaption이 더 정확하게 생성됩니다. 상품명, 특징, 주요 키워드를 넣어주세요.
유닛 소모 안내
생성 전에 소모 예정 유닛이 표시됩니다. 잔여 유닛과 이번 생성 후 잔액을 확인할 수 있어요.
세온코더가 생성하는 것들
버튼 한번으로 검색엔진이 이해할 수 있는 구조가 만들어집니다.
시맨틱 HTML 구조
검색엔진이 콘텐츠의 구조를 이해할 수 있는 HTML 코드를 생성합니다. 제목, 본문, 이미지가 의미에 맞게 정리됩니다.
<figure> <img src="product.jpg" alt="..."> <figcaption>...</figcaption> </figure>
alt 태그 AI 생성
입력한 키워드를 기반으로 이미지 설명(alt 태그)을 AI가 생성합니다. 검색엔진 최적화와 웹 접근성을 동시에 확보합니다.
<img alt="수파카즈 바테일 로드바이크 바테이프 블랙" ...>
figcaption 자동 생성
이미지 아래에 설명 텍스트를 자동으로 추가합니다. 사용자와 검색엔진 모두에게 맥락을 제공합니다.
<figcaption>가볍고 내구성 좋은 프리미엄 바테이프</figcaption>
2개 버전 코드 출력
일반 코드(스마트스토어, Cafe24 등 대부분 플랫폼)가 기본 출력됩니다. 쿠팡·텐바이텐·GUUD는 GPTs/GEMs 보조 도구로 추가 변환이 필요합니다.
모바일 가독성 개선
이미지 안의 텍스트를 HTML 텍스트로 전환하면, 모바일 화면 크기에 맞게 글씨가 자동으로 조절됩니다. 고객이 확대하지 않아도 읽을 수 있어요.
이미지는 어디에 저장되나요?
세온코더에서 상세페이지를 변환하면, 코딩이 필요 없는 이미지 구간은 호스팅 서버에 저장되어야 합니다. 쇼핑몰에 코드를 붙여넣었을 때 이미지가 정상적으로 로딩되려면, 이미지가 접근 가능한 URL에 있어야 하기 때문이에요.
이미지가 세온코더 서버에 저장됩니다. 체험용이므로 실제 쇼핑몰에 적용하기에는 적합하지 않습니다.
고도이미지호스팅에 이미지가 저장됩니다. 지정한 폴더 경로에 업로드되어, 쇼핑몰에 코드를 입력하면 호스팅 서버에서 이미지가 로딩됩니다.
- 1고도이미지호스팅 계정 설정 (호스트, 포트, 사용자명, 공개 URL)
- 2상세페이지 변환 시 업로드 경로(폴더명) 지정
- 3“이미지 유지” 구간의 이미지가 고도이미지호스팅 → 지정 폴더에 업로드
- 4생성된 HTML의 이미지 경로 = 고도이미지호스팅 공개 URL
- 5쇼핑몰에 코드 붙여넣기 → 이미지 정상 로딩
보안 안내
고도이미지호스팅 비밀번호는 세온코더 서버에 저장되지 않습니다. 브라우저에만 저장되며, 작업할 때마다 직접 입력하는 방식입니다. 비밀번호가 서버를 거치지 않으므로 정보 유출이 원천 차단됩니다.
전문가 모드 — 더 세밀한 컨트롤
코딩에 익숙한 분은 블록 단위로 더 세밀하게 제어할 수 있습니다.
초보자 모드로 충분하지만, 필요한 분을 위해 준비했습니다.
순수 이미지
이미지를 업로드하면 <img> 태그를 생성합니다.
AI HTML 변환
이미지를 업로드하면 AI가 시맨틱 HTML로 변환합니다.
컴포넌트 빌더
드롭다운에서 사이즈표, 스펙표 등 미리 만들어진 컴포넌트를 선택합니다.
HTML 직접 입력
기존에 만들어둔 HTML 코드를 직접 붙여넣어 사용합니다.
보조 도구 — 메타 디스크립션 & 전용 플랫폼 코드
세온코더에서 생성한 코드를 활용해서 추가 작업을 할 수 있습니다.
별도 서비스(GPTs/GEMs)에서 무료로 이용 가능합니다.
세온코더 앱에서 HTML을 생성하면, 화면 하단에 “다음 단계” 영역이 나타납니다. 여기서 바로 GPTs/GEMs로 이동할 수 있어요.
쿠팡·텐바이텐·GUUD 전용 코드 변환
세온코더에서 생성된 HTML은 카페24·스마트에디터 기준입니다. 쿠팡은 규칙이 달라서, 아래 도구에 생성된 코드를 붙여 넣으면 채널에 맞게 정리할 수 있어요.
- 1세온코더에서 HTML 생성
- 2생성된 코드를 GPTs 또는 GEMs에 붙여넣기
- 3쿠팡/텐바이텐/GUUD용 코드 출력
메타 디스크립션 작성
검색 결과에 노출되는 설명 문구(메타 디스크립션)는 세온코더 앱에서 토큰을 쓰지 않습니다. 전용 도구에서 같은 코드를 넣으면 메타 문구 초안을 만들 수 있어요.
- 1세온코더에서 생성된 코드 복사
- 2GPTs 또는 GEMs에 붙여넣기
- 3메타 디스크립션 초안 출력
- 4쇼핑몰 관리자 페이지에 입력
지원 플랫폼
세온코더에서 생성되는 일반 코드는 대부분의 쇼핑몰 에디터에서 작동합니다.
쿠팡·텐바이텐·GUUD는 GPTs/GEMs로 추가 변환이 필요합니다.
일반 코드 — 바로 적용 가능
전용 코드 — GPTs/GEMs 추가 변환 필요별도 작업 필요
알아두세요
- • 스마트스토어와 일부 플랫폼은 텍스트 배경색 적용에 제한이 있을 수 있습니다. 흰색 배경 텍스트를 권유합니다.
- • 지원 플랫폼은 계속 테스트하여 업데이트하고 있습니다.
영상으로 배우기
텍스트보다 영상이 편하다면, 여기서 확인하세요.
세온코더 사용법부터 활용 팁까지 영상으로 안내합니다.
세온코더 사용법
3단계 사용법 영상 가이드
FTP 설정
FTP 서버 설정 방법
GPTs/GEMs 활용
쿠팡 변환, 메타 디스크립션 작성
자주 묻는 질문
온라인 쇼핑몰 상세페이지 이미지를 검색엔진이 인식할 수 있는 SEO 최적화 HTML 코드로 변환해주는 도구입니다. 디자이너에게 받은 이미지를 그대로 업로드하면, 코딩 없이 검색에 잡히는 상세페이지를 만들 수 있습니다.
직접 해보세요
10세션 무료 체험으로 실제 작동 방식을 확인하세요. 코딩 지식 불필요, 1분이면 시작할 수 있습니다.
실제 쇼핑몰 적용은 크레딧 충전 후 가능합니다.