아마 이런 일을 겪어 보셨을 겁니다. 멋지게 스타일된 블록 — 제목 카드, 색깔 있는 콜아웃 — 을 복사해 WeChat 편집기나 CMS에 붙여넣습니다. 어떨 땐 딱 맞게 도착합니다. 어떨 땐 디자인이 죄다 벗겨진 맨 텍스트로 떨어집니다. 같은 행동, 다른 결과, 그리고 무작위처럼 느껴지죠. 그렇지 않습니다. 차이는 여러분이 인라인 HTML 을 복사했는지 여부입니다.
이 한 가지 개념을 이해하면 스타일 콘텐츠 붙여넣기가 도박이 아니라 예측 가능해집니다.
인라인 HTML이란 실제로 무엇인가
웹 스타일은 두 곳에 살 수 있습니다. 보통의 웹사이트에서는 스타일이 별도 스타일시트에 있고, HTML은 클래스 이름으로 그것을 참조할 뿐입니다: <div class="title-card">. 이 div는 그 자체로 무의미합니다 — 디자인은 어딘가 다른 CSS 파일에 삽니다.
인라인 HTML은 스타일을 요소 안 에 넣습니다: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. 블록을 렌더링하는 데 필요한 모든 것이 블록과 함께 이동합니다. 의존할 외부 파일이 없습니다.
그 구분이 어떤 붙여넣기는 디자인을 유지하고 어떤 것은 아닌 이유의 전부입니다. 편집기에 붙여넣을 때, 편집기는 원본 웹사이트의 스타일시트를 받지 못합니다. 디자인이 그 스타일시트에 있었다면 사라집니다 — 맨 구조, 즉 밋밋한 텍스트를 얻죠. 디자인이 인라인이었다면 함께 오고, 블록이 제대로 렌더링됩니다.
WeChat과 리치 편집기가 그것을 필요로 하는 이유
WeChat 편집기는 엄격합니다. 외부 스타일시트를 제거하고 많은 스타일을 걸러냅니다. 다른 곳에 정의된 클래스에 의존한 블록은 WeChat 안에 들어가면 기댈 것이 없습니다. 많은 리치텍스트 편집기와 CMS 붙여넣기 필드가 같은 식으로 동작합니다 — 붙여넣은 것을 소독하고 인라인 속성만 남깁니다.
그래서 스타일 블록을 이런 편집기로 옮기는 안정적인 방법은 스타일이 자기완결적인 인라인 HTML 로 복사하는 것입니다. 그러면 엄격한 편집기도 블록을 디자인대로 보여주는 데 필요한 모든 것을 갖습니다.
블록을 "서식과 함께" 복사하는 원리
현대 브라우저에는 일반 텍스트뿐 아니라 리치 콘텐츠 — 서식이 있는 HTML — 를 클립보드에 올릴 수 있는 Clipboard API가 있습니다. 도구가 블록을 "인라인 HTML로" 복사할 때, 그 API를 써서 블록의 자기완결적 마크업을 여러분 클립보드에 올립니다. 그다음 여러분이 편집기에 붙여넣으면(Ctrl/Cmd+V), 스타일이 인라인이었고 클립보드가 HTML을 실어 날랐기 때문에 블록이 스타일된 채 나타납니다.
이게 작동하려면 두 가지가 참이어야 합니다.
- 마크업이 인라인 스타일이어야 외부 파일이 필요 없습니다.
- 클립보드가 그것을 HTML로 실어야 하며, 꺾쇠괄호의 일반 텍스트 덤프가 아니어야 합니다.
둘 다 맞추면 붙여넣기가 "그냥 됩니다." 어느 하나라도 놓치면 일반 텍스트나 눈에 보이는 코드 덩어리를 얻습니다.
코드를 손으로 편집하지 않고 하기
원칙적으로는 스타일 블록을 가져다 모든 스타일을 손으로 인라인화 — 각 클래스의 규칙을 각 요소의 style="" 속성으로 옮기기 — 할 수도 있습니다. 사소한 블록을 넘어서면, 특히 스타일이 여러 노드에 퍼진 SVG 카드에서는 지루하고 실수하기 쉽습니다.
이것을 처리하는 도구가 더 쉽습니다. IMG.DIY의 레이아웃 모듈 추출기는 붙여넣은 WeChat 콘텐츠에서 스타일 블록을 추출하고, 각각에 Clipboard API를 통해 인라인 HTML로 클립보드에 올리는 복사 버튼을 줍니다. 복사를 클릭하고, WeChat 편집기(또는 CMS, 또는 리치텍스트 필드)로 전환해, 붙여넣으면 블록이 서식을 유지합니다. 손수 인라인화도, 깨진 마크업 고치기도 없습니다.
빠른 붙여넣기 체크리스트
스타일 붙여넣기가 잘못됐다면, 이걸 훑어보세요.
- 인라인 HTML을 복사했나요, 아니면 스크린샷/일반 텍스트인가요? 인라인 HTML만 작동하는 스타일 블록으로 붙습니다.
- 편집기의 일반 본문에 붙여넣으세요. 마크업을 벗기거나 이스케이프할 수 있는 "소스 코드"나 "일반 텍스트" 모드가 아니라요.
- 미리보기에서 블록을 확인하세요. WeChat 자체 미리보기는 블록이 폰에서 실제로 어떻게 렌더링될지 보여줍니다 — 게시 전에 거기서 확인하세요.
- 색이 이상하면 복사 전에 색을 바꾸세요. 추출기에서 색을 클릭해 블록 전체에서 바꿀 수 있으니, 이미 브랜드 색인 상태로 복사하세요.
되짚을 만한 정직한 한계 하나: 이런 도구는 블록을 복사하고 정리합니다 — 맨손 템플릿 디자이너가 아니라 추출기이며, URL로 글을 가져올 수 없습니다(브라우저가 WeChat 페이지의 교차 사이트 가져오기를 막으므로 콘텐츠를 붙여넣습니다). 그 경계 안에서, 인라인 HTML은 스타일 블록이 한 편집기에서 다른 편집기로 디자인이 온전히 살아남아 이동하게 해 주는 것입니다.
블록이 완벽하게 붙는 걸 몇 번 보고 나면 앞서의 무작위성이 이해됩니다. 결코 무작위가 아니었습니다. 언제나 스타일이 블록 안에 담겨 이동했는지의 문제였습니다.