운영 중인 WordPress 사이트에 HTML을 붙여넣는 것은 신뢰를 전제로 한 행동입니다. 그 HTML이 템플릿이나 AI, 또는 다른 사람의 페이지에서 온 것이라면 더욱 그렇습니다. 가장 안전한 방법은 조심하는 것이 아니라, 무엇이든 편집기에 도달하기 전에 정확히 무엇이 제거되는지 아는 것입니다. 아래가 그 목록이며, 나머지를 보완하는 실천 방법도 함께 정리했습니다.
붙여넣기 전에 제거되는 것들
변환은 전적으로 브라우저 안에서 실행되며, 결과물은 원본 마크업이 아니라 Elementor 데이터입니다. 그 과정에서 다음 항목이 제거되거나 무력화됩니다.
- 모든 script 태그. 원본의 JavaScript는 하나도 남지 않습니다. 예외는 없습니다. 상호작용이 필요한 부분은 정적 마크업으로 전달되므로 Elementor 자체 위젯으로 다시 만들어야 합니다.
- 모든 인라인 이벤트 핸들러.
onclick,onmouseover같은 속성은 각 요소에서 개별적으로 제거됩니다. 이는 “script 태그가 없는” 마크업에 스크립트를 몰래 끼워 넣는 고전적인 수법입니다. - 폼 전송 주소. 폼의
action과method가 제거됩니다. 보이는 필드는 그대로 남지만, 붙여넣은 폼이 방문자의 데이터를 원본 페이지 작성자에게 몰래 전송하는 일은 절대 일어나지 않습니다. - 알 수 없는 임베드.
object,embed,applet태그는 차단됩니다. iframe은 YouTube, 그 nocookie 버전, Vimeo 플레이어 등 정확히 네 개의 호스트에서만 허용되며 동영상 위젯이 됩니다. 그 밖의 iframe은 동작하는 프레임으로 옮겨지지 않습니다. iframe 태그 안에 문서 전체를 숨길 수 있는srcdoc속성도 제거됩니다. - 위험한 링크 대상과 위험 소지가 있는 CSS. 링크 대상과 스타일 선언은 그대로 복사되지 않고 정리됩니다.
제거된 모든 항목은 결과 화면의 안전 보고서에 나열되므로, 보이지 않는 곳에서 적용되는 규칙이 아닙니다. 붙여넣기 전에 여러분의 페이지에서 구체적으로 무엇이 빠졌는지 확인할 수 있습니다.
CSS가 테마로 새어 나가지 않는 이유
스타일이 적용된 HTML을 붙여넣을 때 더 알아차리기 어려운 위험은 악의가 아니라 충돌입니다. 원본 페이지의 스타일시트가 body { font-family: … }나 h2 { color: … }를 선언하고 있으면, 그 규칙이 사이트 전체의 스타일을 바꿔 버립니다.
이를 막기 위해 가져온 스타일에는 범위가 지정됩니다. 가져온 CSS의 모든 선택자는 가져온 콘텐츠 내부에서만 적용되도록 다시 작성됩니다. html, body, :root를 대상으로 하는 선택자는 페이지 전체에 닿지 못하고, 가져온 블록 자체를 가리키도록 바뀝니다. 가져온 섹션은 모양을 유지하고, 테마는 그 규칙의 영향을 전혀 받지 않습니다.
같은 이유로 position: fixed는 변환 중에 absolute로 낮춰집니다. 그렇지 않으면 다른 사람 페이지의 고정 요소가 해당 템플릿을 사용하는 모든 페이지에서 사이트 전체 위에 떠 있게 됩니다.
“안전”이 의미하지 않는 것
솔직하게 밝혀야 할 경계가 두 가지 있습니다. 첫째, 이 도구는 콘텐츠를 심사할 수 없습니다. HTML에 여러분이 권리를 갖지 않은 텍스트, 이미지, 링크가 들어 있다면 변환한다고 해서 그 사실이 달라지지 않습니다. 둘째, 제거는 무엇이 실행되고 데이터가 어디로 가는지에 관한 것이며, 페이지가 무엇을 말하는지는 검토하지 않습니다. 붙여넣는 내용을 직접 읽어 보세요.
붙여넣기 전 모범 사례
- 변환하고, 원본 그대로 붙여넣지 마세요. 위험한 경로는 제3자의 마크업을 HTML 위젯에 그대로 붙여넣는 것입니다. 이 경로에서는 제거가 전혀 이루어지지 않아 원본에 들어 있던 것이 그대로 들어갑니다. 네이티브 위젯으로 변환하는 것이 바로 안전 계층입니다.
- 결과 화면에서 안전 보고서를 읽으세요. 제거된 스크립트 네 개와 정리된 폼 하나가 나열되어 있다면, 어떤 동작을 다시 만들어야 하는지, 그리고 원본 페이지가 무엇을 하고 있었는지 알 수 있습니다.
- 먼저 임시글에 붙여넣으세요. 변환이 위험해서가 아니라, 레이아웃 검토는 아무도 방문하지 않는 페이지에서 해야 하기 때문입니다.
- 폼은 의도적으로 다시 연결하세요. 전송 주소는 일부러 제거되었습니다. 원래 목적지를 찾아다니지 말고, Elementor 폼 위젯을 여러분의 액션에 연결하세요.
- 어떤 경우든 백업을 유지하세요. 어떤 도구로 어떤 종류의 가져오기를 하든 적용되는 기본적인 조언입니다.
그리고 여러분의 HTML은 브라우저를 떠나지 않습니다
안전은 반대 방향으로도 작동합니다. 변환하는 페이지는 로컬에서 분석, 렌더링, 변환됩니다. HTML과 이미지는 이 사이트나 다른 어느 곳에도 업로드되지 않고, 유출될 계정도 존재하지 않으며, WordPress 자격 증명에도 전혀 닿지 않습니다. 도구는 데이터를 만들어 낼 뿐이며, 그것을 어떻게 할지는 여러분의 편집기 안에서 여러분이 결정합니다.
가장 안전한 방법, 한 단락으로
원본 HTML을 위젯에 붙여넣지 말고 네이티브 구성요소 모드로 변환하세요. 안전 보고서를 읽으세요. 임시글에 붙여넣고, 상호작용 부분을 Elementor 자체 위젯으로 다시 만들고, 폼을 여러분의 사이트에 다시 연결한 다음, 세 가지 브레이크포인트 모두에서 제대로 보일 때 게시하세요. 이것이 방법의 전부입니다. 위의 제거 과정이 보이지 않는 부분을 처리하고, 이 체크리스트가 보이는 부분을 처리합니다.