스마트스토어 상세페이지 HTML 준비하기

스마트에디터에서 만든 상세페이지에는 편집 기능을 위한 클래스와 중첩 요소가 많이 포함됩니다. 다른 채널로 옮길 때는 상품 설명 영역을 정확히 골라내는 것이 첫 단계입니다.

편집기 전용 코드가 많은 이유

스마트에디터는 문단, 이미지 묶음, 캡션, 동영상 등을 화면에서 편집할 수 있도록 각 블록에 se-component, se-text, se-image 같은 표식을 붙입니다. 원래 서비스에서는 유용하지만 다른 채널에는 해당 스타일 파일이 없어서 불필요한 여백이나 깨진 정렬이 생길 수 있습니다.

어떤 범위를 준비해야 하나요?

가능하면 se-main-container 내부처럼 상품 설명 컴포넌트가 모인 범위를 사용하세요. 페이지의 head, 메뉴, 로그인 영역, 구매 버튼, 리뷰는 변환 대상이 아닙니다. 전체 페이지 소스를 넣어도 도구는 주요 컨테이너를 찾지만, 관련 없는 내용이 섞일 가능성이 커집니다.

<div class="se-main-container">
  <div class="se-component se-text">...</div>
  <div class="se-component se-image">...</div>
</div>

복사 전에 확인할 항목

• 상품 설명과 무관한 고객 정보나 내부 메모가 없는지 확인합니다.
• 이미지의 사용 권한과 상품 정보가 현재 판매 상품과 일치하는지 확인합니다.
• 상대 경로 이미지라면 다른 도메인에서 표시되지 않을 수 있음을 예상합니다.
• 표, 지도, 슬라이드, 맞춤 스크립트는 단순 문단처럼 변환되지 않을 수 있습니다.

컴포넌트를 찾지 못하는 경우

상태 문구에서 처리한 컴포넌트가 0개로 표시되면 HTML이 스마트에디터 형식이 아니거나 필요한 상위 요소가 빠졌을 수 있습니다. 원본 범위를 조금 넓혀 다시 복사하되 페이지 전체의 개인 정보는 제거하세요. 다른 편집기에서 만든 코드라면 문단과 이미지만 남기는 수동 정리가 필요할 수 있습니다.

원본은 따로 보관하세요

정리 과정에서는 동영상과 복잡한 레이아웃이 제거될 수 있으므로 원본 HTML을 별도 파일로 보관하는 것이 좋습니다. 변환 결과는 새로운 판매 채널용 복사본으로 다루고 원본을 덮어쓰지 마세요.