Gutenberg 편집기에 HTML을 붙여넣는 올바른 방법

외부에서 작성한 HTML 코드나 다른 사이트의 콘텐츠를 워드프레스 Gutenberg(블록) 편집기에 붙여넣었더니 태그가 깨지거나, 스타일이 다 날아가거나, 코드가 그대로 텍스트로 노출된 경험이 있으신가요? Gutenberg는 붙여넣는 방식에 따라 결과물이 완전히 달라집니다. 이 글에서는 상황별로 HTML을 올바르게 붙여넣는 방법을 정리합니다.

왜 그냥 붙여넣으면 깨질까?

Gutenberg는 기본적으로 붙여넣은 콘텐츠를 최대한 자동으로 “블록”으로 변환하려고 시도합니다. 워드나 구글 독스, 다른 웹페이지에서 복사한 콘텐츠에는 원본 서식 정보(폰트, 색상, 인라인 스타일 등)가 함께 딸려오는데, Gutenberg가 이를 해석하는 과정에서 다음과 같은 문제가 생깁니다.

• 불필요한 인라인 스타일(style="...")이 그대로 삽입되어 사이트 테마 디자인과 충돌
• <div>, <span> 등이 각각 별도의 커스텀 HTML 블록으로 쪼개짐
• HTML 코드 자체를 “텍스트”로 인식해서 태그가 화면에 그대로 노출됨 (<div>처럼 이스케이프 처리됨)

원인을 이해하면, 아래 방법 중 원하는 결과에 맞는 방식을 선택하면 됩니다.

방법 1) 커스텀 HTML 블록 사용 (가장 안전하고 확실한 방법)

코드를 있는 그대로, 수정 없이 정확하게 삽입하고 싶다면 이 방법이 가장 확실합니다.

1. 블록 추가 버튼(+)을 클릭
2. 검색창에 “커스텀 HTML” 또는 “Custom HTML” 입력
3. 커스텀 HTML 블록을 추가
4. 블록 안에 HTML 코드를 그대로 붙여넣기

이 블록 안에서는 Gutenberg가 내용을 자동으로 블록화하거나 변형하지 않고, 입력한 코드를 그대로 저장합니다. 블록 우측 상단의 “미리보기(Preview)” 탭을 눌러 실제 렌더링 결과를 바로 확인할 수 있어, 임베드 코드나 폼(form) 스니펫, 서드파티 위젯 코드를 넣을 때 특히 유용합니다.

주의: 커스텀 HTML 블록에 삽입한 <script> 태그는 편집기 화면에서는 실행되지 않지만, 실제 게시된 페이지에서는 실행됩니다. 신뢰할 수 없는 출처의 스크립트는 넣지 않도록 주의하세요.

방법 2) 코드 편집기(Code Editor) 모드로 전체 전환

이미 여러 블록으로 구성된 글 전체를 HTML 단위로 다루고 싶다면, Gutenberg 자체의 코드 편집기 모드를 활용할 수 있습니다.

1. 화면 우측 상단의 점 3개(옵션) 메뉴 클릭
2. “코드 편집기(Code editor)” 선택
3. 전체 글이 블록 주석과 함께 원시 HTML 형태로 표시됨
4. 원하는 위치에 HTML 코드를 직접 붙여넣거나 수정
5. 다시 점 3개 메뉴에서 “비주얼 편집기(Visual editor)”로 전환하면 Gutenberg가 이를 다시 블록으로 파싱

이 방법은 여러 블록에 걸쳐 구조를 손봐야 하거나, 블록 주석(<!-- wp:paragraph --> 등)까지 포함해 전체 마크업을 세밀하게 다루고 싶을 때 유용합니다. 다만 블록 주석 구조를 잘못 건드리면 저장 시 “블록 복구(recovery)” 경고가 뜰 수 있으니, 익숙하지 않다면 백업 삼아 원본을 미리 복사해두는 것이 안전합니다.

방법 3) 일반 텍스트로 붙여넣기 (서식만 제거하고 싶을 때)

반대로, HTML 태그나 서식은 다 필요 없고 순수 텍스트 내용만 가져오고 싶은 경우도 많습니다. 이럴 때는 운영체제의 “서식 없이 붙여넣기” 단축키를 사용하면 됩니다.

• Windows: Ctrl + Shift + V
• Mac: Cmd + Shift + V

이렇게 붙여넣으면 원본의 스타일이나 태그 없이 순수 텍스트만 삽입되어, 이후 Gutenberg 블록 스타일을 처음부터 새로 지정하기에 깔끔합니다.

방법 4) 여러 개의 HTML 블록으로 나눠서 붙여넣고 싶을 때

긴 HTML 문서를 섹션별로 나눠서 각각 별도의 블록으로 관리하고 싶다면, 처음부터 한 번에 붙여넣기보다 섹션 단위로 나눠 커스텀 HTML 블록을 여러 개 추가하는 방식을 추천합니다. 이렇게 하면 이후 특정 섹션만 수정하거나 순서를 바꾸는 작업이 훨씬 수월해집니다.

5. 붙여넣은 후 반드시 확인할 것

코드가 이스케이프 처리되지 않았는지 확인

일반 단락(Paragraph) 블록에 HTML 코드를 그대로 붙여넣으면, 태그가 실행되지 않고 화면에 <div>처럼 글자 그대로 노출되는 경우가 많습니다. 미리보기에서 태그가 실제 요소로 렌더링되지 않고 텍스트로 보인다면, 커스텀 HTML 블록으로 옮겨야 합니다.

사이트 미리보기로 실제 프론트엔드 확인

편집기 내 미리보기와 실제 게시된 페이지의 렌더링이 테마 CSS 영향으로 다르게 보일 수 있습니다. 저장 후 반드시 “미리보기” 버튼으로 실제 프론트엔드 화면을 확인하세요.

반응형(모바일) 화면 확인

외부에서 가져온 HTML에는 고정 너비(width="600px" 등)가 박혀 있는 경우가 흔합니다. 모바일 화면에서 레이아웃이 깨지지 않는지 별도로 확인하는 것이 좋습니다.

6. 보안 관련 주의사항

워드프레스 계정 권한에 따라 커스텀 HTML 블록에 <script> 태그를 포함한 코드를 저장할 수 없도록 제한되는 경우가 있습니다(기여자, 작성자 등급 등). 관리자나 편집자 권한이 아니라면 이런 제약이 걸려 있을 수 있으니, 저장이 되지 않는다면 권한 문제부터 확인해보세요.

또한 출처가 불분명한 사이트에서 복사한 HTML/스크립트는 악성 코드가 섞여 있을 위험이 있으므로, 신뢰할 수 있는 출처의 코드만 삽입하는 것이 안전합니다.

마무리

Gutenberg에 HTML을 붙여넣을 때는 목적에 맞는 방법을 고르는 것이 핵심입니다. 코드를 그대로 정확히 살리고 싶다면 커스텀 HTML 블록, 글 전체 구조를 다루고 싶다면 코드 편집기 모드, 서식 없이 텍스트만 필요하다면 서식 없이 붙여넣기를 사용하세요. 붙여넣은 뒤에는 항상 실제 프론트엔드 미리보기로 렌더링 결과를 확인하는 습관을 들이면 예상치 못한 레이아웃 깨짐을 미리 방지할 수 있습니다.