잘 디자인된 WeChat 아티클을 열면, 전문적으로 보이게 하는 부분이 글자가 아니라 스타일링된 블록임을 알아챌 것이다. 상단의 그라데이션 제목 카드, 색 막대가 달린 작은 섹션 헤더, 끝의 "팔로우하세요" 카드, 둥근 모서리의 인용 상자. 그중 많은 것이 SVG로 만들어져 있고, SVG가 바로 어떤 휴대폰이 렌더링하든 정확한 모양과 색을 유지하게 해준다.
짜증 나는 부분은 이렇다. 마음에 드는 것을 찾아 재사용하려 하면, 복사가 대개 그것을 망친다. WeChat 편집기에 붙여넣으면 레이아웃이 무너지고, 색이 밋밋해지거나, 블록의 절반이 사라진다. 이 가이드는 왜 그런 일이 일어나는지, 그리고 그 블록을 온전히 유지되도록 추출하는 법을 설명한다.
WeChat이 레이아웃에 SVG를 기대는 이유
WeChat 편집기는 대부분의 CSS를 걷어낸다. 스타일시트를 붙일 수 없고, 많은 인라인 스타일이 걸러진다. 그래서 디자이너들은 우회로를 찾았다. 장식 조각을 SVG로 만드는 것이다. 모양, 그라데이션, 텍스트 위치가 모두 SVG 마크업 안에 산다. WeChat은 그 마크업을 대체로 건드리지 않으므로 블록이 어디서나 똑같이 렌더링된다.
그것이 또한 이 블록들이 원리상 그토록 재사용 가능한 이유다. SVG 제목 카드는 자기 완결적이다. 외부 파일이나 페이지 어딘가에 정의된 클래스에 의존하지 않는다. 이론상 뽑아내 나만의 아티클에 넣을 수 있다. 문제는 오직 뽑아내는 데 있다.
순진한 복사가 블록을 망치는 이유
렌더링된 페이지에서 스타일링된 블록을 선택해 복사하면, 대개 원본 소스가 아니라 브라우저의 렌더링된 버전을 잡는다. 세 가지가 잘못된다:
- 감싸는 마크업이 사라진다. 블록은 종종 위치 지정을 지닌 중첩 컨테이너 안에 있다. 보이는 부분만 잡으면 그 상자를 잃는다.
- 인코딩된 조각이 뭉개진다. SVG는 종종 배경 이미지나 폰트를 인코딩된 데이터로 담는다. 잘못된 경로를 거친 복사-붙여넣기가 그 문자열을 손상시킬 수 있다.
- 깔끔하게 다시 칠할 수 없다. 살아남더라도 색이 마크업의 열두 군데에 구워져 있다. 손으로 테마를 바꾸려면 원시 코드를 뒤져야 한다.
이 블록을 안정적으로 재사용하려면 스크린샷도, 브라우저 클립보드의 추측도 원치 않는다. 독립 단위로 뽑아낸 실제 블록 마크업을 원한다.
안정적인 방식으로 블록 추출하기
깔끔한 접근은 화면에서 블록 하나를 손으로 선택하려 애쓰는 대신, 아티클 전체의 소스 콘텐츠를 복사해 도구가 파싱하게 하는 것이다. IMG.DIY의 레이아웃 모듈 추출기가 정확히 이것을 한다. 콘텐츠를 붙여넣으면, 브라우저 자체의 DOM 파서로 마크업을 읽고, 재사용 가능한 스타일링된 블록 — SVG 타이포그래피 카드, 제목 헤더, 팔로우 카드, 스타일링된 인용, 구분선 — 을 각각 독립 모듈로 분리한다.
한 가지 중요한 유의점, 솔직히 말하자면: 도구는 URL로 아티클을 가져올 수 없다. 브라우저가 mp.weixin.qq.com의 교차 사이트 가져오기를 막으므로, 어떤 브라우저 도구도 링크로 WeChat 페이지를 내려받을 수 없다. 콘텐츠를 복사해 붙여넣는다. 이것은 돌아갈 한계라기보다 웹의 보안 모델이 작동하는 방식이다.
각 블록이 자체 Shadow DOM 샌드박스에서 분리되어 미리보기되므로, 한 모듈의 스타일이 다른 모듈로 새어들 수 없다. 미리보기에서 보는 것이 그 블록의 실제 모습이다.
코드를 건드리지 않고 다시 칠하기
블록이 추출되면, 앞서 언급한 색 문제가 대신 해결된다. 모듈의 아무 색이나 클릭해 바꾸면 — 그 블록에서 나타나는 모든 곳에서 같은 색이 업데이트된다. 그래서 파란 제목 카드가 SVG에 묻힌 여섯 개의 hex 값을 편집하는 대신 한 번의 동작으로 당신 브랜드의 초록이 된다. 모듈 안의 자리표시 이미지를 당신 것으로 바꿀 수도 있다.
여기서 "재사용"이 이론이기를 멈춘다. 남의 아티클에서 마음에 든 블록이 당신의 팔레트에, 당신의 색으로, 다음 글에 넣을 준비가 된 블록이 된다.
나만의 모듈 라이브러리 만들기
진짜 보상은 이것을 몇 번 하고 추출한 것을 간직하는 데 있다. 마음에 드는 각 모듈은 브라우저에 사는(localStorage를 통해) 로컬 라이브러리에 저장할 수 있고, 전체 라이브러리를 JSON 파일로 내보내 백업하거나 다른 기기로 옮길 수 있다. 아무것도 업로드되지 않고 계정도 없다 — 라이브러리는 당신 것이고, 당신 기기에 있다.
몇 주에 걸쳐 개인 키트를 만든다. 제목 카드 몇 개, 신뢰하는 섹션 헤더, 푸터 카드, 구분선 한둘. 새 아티클을 배치할 때가 되면 남의 게시물을 다시 뒤지는 대신 당신 자신의 세트에서 꺼낸다. 스타일링된 블록을 편집기에 넣으려면 인라인 HTML로 복사해 붙여넣는다 — 스타일링이 마크업과 함께 이동하므로 블록이 서식을 유지한다.
늘 마음에 들었던 블록 하나로 시작해, 깔끔하게 추출하고, 당신 브랜드로 다시 칠하고, 저장하라. 그것이 전체 흐름이고, 복리로 쌓인다.