상세페이지 HTML은 어떻게 정리되나요?

변환기의 목적은 원본 디자인을 픽셀 단위로 복제하는 것이 아니라, 다른 판매 채널에서도 읽을 수 있는 문단과 이미지 중심의 코드를 만드는 것입니다.

처리 순서

1. 브라우저가 입력 문자열을 HTML 문서로 해석합니다.
2. se-main-container 또는 개별 se-component를 찾습니다.
3. 컴포넌트 종류에 따라 문단, 이미지, 이미지 묶음, 캡션과 인용문을 추출합니다.
4. 편집기 전용 속성을 제거하고 필요한 최소 인라인 스타일을 생성합니다.
5. 전체 결과를 최대 600px 너비의 중앙 정렬 컨테이너로 감쌉니다.

문단과 글자 스타일

문단 내부의 편집기 클래스와 식별자는 제거합니다. 글자색과 일부 글자 크기는 유지하지만, 이벤트 속성이나 서비스 전용 데이터 속성은 결과에 포함하지 않습니다. 채널의 기본 스타일과 충돌을 줄이기 위한 선택입니다.

<!-- 변환 전 -->
<p class="se-text-paragraph se-fs-fs16" data-id="123">설명</p>

<!-- 변환 후 -->
<p style="margin:8px 0;">설명</p>

이미지 처리

이미지는 src 또는 지연 로딩에 쓰이는 data-src 주소를 읽습니다. 단일 이미지는 가로 폭을 컨테이너에 맞추고 높이는 자동 계산합니다. 두 장 이상의 이미지 묶음은 지정한 비율로 한 줄에 배치하지만, 대상 채널이 flex 레이아웃을 제거하면 세로로 표시될 수 있습니다.

동영상과 외부 임베드

동영상 제거 옵션이 켜져 있으면 iframe, video 및 외부 링크형 임베드 컴포넌트를 건너뜁니다. 이는 보안과 자동재생 문제, 판매 채널의 태그 제한을 피하기 위한 기본값입니다. 옵션을 끄더라도 모든 비디오 코드가 그대로 보존되는 것은 아닙니다.

의도적으로 지원하지 않는 것

• 스크립트 실행과 사용자 추적 코드
• 상품 등록을 자동으로 제출하는 기능
• 원본 서비스의 비공개 이미지 권한 우회
• 모든 편집기의 맞춤 표, 지도, 슬라이드 복제
• 판매 채널 정책 준수 여부의 자동 판정

이 제한을 이해하고 사용하면 결과를 어디까지 신뢰하고 어디부터 직접 검토해야 하는지 분명해집니다.