WeChat 공식 계정(또는 어떤 리치 텍스트 매체든)을 운영한다면, 재사용하고 싶었던 레이아웃을 본 적이 있을 겁니다 — 제목이 달린 섹션 카드, 팔로우 블록, 스타일 인용구, 구분선 말입니다. 손으로 복사하려면 중첩된 HTML을 뒤져야 하고, 편집 한 번 잘못하면 SVG 전체가 깨집니다. 이 도구가 그 번거로운 일을 대신합니다: 글을 붙여넣으면 각 스타일 블록을 독립적이고 재사용 가능한 모듈로 뽑아냅니다.
거기서부터 블록 안의 이미지를 교체하고(새 이미지 업로드 또는 URL 붙여넣기), 사용된 색을 클릭해 색을 바꾸고, 블록을 WeChat 편집기·CMS·리치 텍스트 상자에 바로 붙여넣을 인라인 HTML로 복사하고 — 마음에 드는 것을 이 브라우저 안에 사는 로컬 라이브러리에 저장할 수 있습니다. 아무것도 업로드되지 않으며, 여러분의 자료는 여러분의 것입니다.
모든 것이 Clipboard와 localStorage API로 클라이언트에서 돌아가기 때문에 계정도, 클라우드도, 백엔드도 없습니다 — IMG.DIY의 나머지 도구를 관통하는 로컬 우선 원칙 그대로입니다.
사용 방법
- 글 붙여넣기WeChat 글(또는 어떤 리치 콘텐츠든)을 복사해 상자에 붙여넣으세요. 원본 HTML을 붙여넣어도 됩니다.
- 모듈 추출추출을 클릭하면 각 스타일 블록이 페이지 스타일의 간섭을 받지 않도록 격리된 미리보기 카드로 나타납니다.
- 편집하고 재사용이미지를 교체하고 색을 바꾼 뒤, HTML 복사로 다른 곳에 붙여넣거나 다음을 위해 로컬 라이브러리에 저장하세요.
레이아웃 모듈을 다시 만들지 않고 추출하는 이유
위챗 글의 보기 좋은 블록들(제목이 있는 섹션 카드, 팔로우 유도 문구, 스타일링된 인용구, SVG 구분선)은 거의 언제나 손으로 조립한 인라인 HTML과 SVG입니다. 그런 것을 처음부터 다시 만들려면 여백, 색상, 그라디언트, 중첩된 span을 정확히 맞춰야 하고, 편집 한 번만 잘못해도 SVG가 무너집니다. 대신 완성된 블록을 추출하면 모든 디테일이 온전히 유지되고, 몇 초 만에 재사용할 수 있는 것으로 바뀝니다.
이 도구는 여러분이 붙여 넣은 글을 파싱해 각 스타일 블록을 독립적인 모듈로 뽑아냅니다. 페이지 전체를 하나의 덩어리로 긁어 오는 게 아니라, 개별적이고 재사용 가능한 조각들의 깔끔한 목록을 얻습니다. 다른 사람의 글에서 멋진 레이아웃을 봤을 때 여러분이 원했던 바로 그것이죠.
로컬 우선, 그래서 에셋이 진짜 여러분의 것
클라우드 편집기는 저장한 블록을 계정 뒤 자기네 서버에 보관합니다. 여기서는 라이브러리가 localStorage를 통해 여러분의 브라우저 안에 살고, JSON 파일로 내보내 백업하거나 기기 간에 옮길 수 있습니다. 아무것도 업로드되지 않고, 가입도 없으며, 파싱·이미지 교체·색상 변경이 모두 브라우저 자체의 DOM과 Clipboard API로 여러분의 기기에서 실행됩니다.
실질적인 이득은 작업하면서 자라나는 개인적이고 이동 가능한 모듈 라이브러리입니다. 글을 붙여 넣고, 재사용할 가치가 있는 두세 블록을 남기고, 다음번에 인라인 HTML로 곧바로 다시 끌어내세요.
이럴 때 사용해요
마음에 든 레이아웃 재사용 — 다른 글에서 멋진 제목 카드나 구분선을 봤나요? 추출해 브랜드에 맞게 색을 바꾸고 여러분의 초안에 복사하세요.
하우스 스타일 키트 구축 — 매 호에 쓰는 섹션 헤더, 인용구 스타일, 팔로우 카드를 하나의 로컬 라이브러리에 모으세요.
템플릿 블록의 이미지 교체 — 좋아하는 이미지 카드 레이아웃을 유지하고, 매번 사진만 여러분이 업로드한 것으로 바꾸세요.
브랜드에 맞게 색 변경 — 인라인 스타일을 뒤지지 않고 블록의 강조색을 한 번에 모두 바꾸세요.
편집기 간 블록 이동 — 스타일이 그대로 붙는 인라인 HTML을 복사해 위챗 편집기, CMS, 또는 어떤 리치 텍스트 상자에도 넣으세요.
비공개이고 이동 가능한 보관함 유지 — 라이브러리를 JSON으로 내보내 백업하거나 다른 브라우저로 가져가세요. 계정도, 클라우드도 없습니다.
좋은 레이아웃 블록이 남의 글 안에 갇혀 있습니다
WeChat 공식 계정을 운영하는 사람은 누구나 레이아웃 블록을 느린 방식으로 모읍니다. 아름다운 SVG 제목 카드, 깔끔한 "팔로우하기" 패널, 옆에 컬러 탭이 붙은 섹션 헤더가 있는 글을 읽으며 생각하죠. 저 구조를 갖고 싶다. 그래서 글 전체를 편집기로 복사한 뒤, 원하던 블록 하나만 남기고 전부 지우느라 20분을 쓰며, SVG를 무너뜨리는 떠도는 <span> 하나를 건드리지 않기를 기도합니다. WeChat의 SVG 타이포그래피는 악명 높게 취약합니다. 잘못 놓인 속성 하나, 엉뚱한 곳에서 크기를 바꾼 이미지 하나면 카드가 절반의 독자 휴대폰에서 깨진 상자로 렌더링됩니다. 원하는 블록은 실재하고, 재사용 가능하며, HTML 안에 바로 있는데, 하나를 깔끔하게 들어내 간직할 방법이 없습니다.
고통의 나머지 절반은 소유권입니다. 뻔한 답은 秀米나 135编辑器 같은 템플릿 편집기입니다. 방대한 라이브러리, 드래그 앤 드롭, 진짜로 강력하죠. 하지만 자산이 그들의 클라우드에, 계정 뒤에, 흔히 멤버십 등급 뒤에 삽니다. 공들여 조립한 스타일 키트는 여러분이 소유한 폴더가 아니라 여러분이 빌리는 로그인입니다. 블록을 동료에게 건네거나, 모든 카드의 색을 한 번에 손보거나, 그저 실제로 재사용하는 헤더 다섯 개의 개인 라이브러리를 갖고 싶다면, 남의 제품 안에서 남의 조건으로 일하는 것입니다.
이 도구는 반대 접근을 취합니다. 글(또는 어떤 리치 콘텐츠, 또는 원시 HTML)을 붙여 넣으면 여러분의 브라우저에서 바로 마크업을 파싱해, 재사용 가능한 스타일 블록 하나하나—SVG 타이포그래피 카드, 제목 있는 섹션 헤더, 팔로우 카드, 스타일 인용문, 구분선—를 각자의 독립 모듈로 뽑아냅니다. 거기서 각각을 직접 편집합니다. 카드 안 이미지를 바꾸고, 색을 다시 칠하고, WeChat 편집기나 어떤 리치 텍스트 상자에 붙여 넣을 준비가 된 깔끔한 인라인 HTML로 복사하고, JSON으로 내보낼 수 있는 로컬 라이브러리에 저장합니다. 아무것도 업로드하지 않고, 계정이 없으며, 페이지가 로드되고 나면 오프라인으로 계속 작동합니다. 미리 밝히는 솔직한 한계 하나: URL로 글을 가져올 수 없습니다. 브라우저가 mp.weixin.qq.com으로의 교차 사이트 요청을 막으므로, 입력은 언제나 복사-붙여넣기입니다.
무엇이 다른가
- 로컬 우선, 아무것도 업로드 안 함. 파싱이
DOMParser로 브라우저에서 일어납니다. 붙여 넣은 글은 절대 기기를 떠나지 않습니다. 서버도, 계정도, 백엔드도 없습니다. - 모듈별 추출. 각 스타일 블록이 손으로 쳐내야 할 엉킨 마크업 덩어리가 아니라 별개의 독립적인 모듈로 나옵니다.
- 제자리 이미지 교체. 새 이미지를 업로드하거나 이미지 URL을 붙여 넣어 카드 안 사진을 바꿉니다. 취약성을 만드는 주변 SVG 구조를 건드리지 않고요.
- 한 번에 전부 다시 칠하기. 모듈이 쓰는 어떤 색이든 클릭해 한 번의 동작으로 블록 전체에 걸쳐 바꾸므로, HEX 코드를 뒤지지 않고 카드가 브랜드에 맞춰집니다.
- 깔끔한 인라인 HTML 복사. 한 번의 클릭으로 모듈을 인라인 HTML로 클립보드에 올려(Clipboard API를 통해), WeChat 편집기, CMS, 어떤 리치 텍스트 필드에든 바로 붙여 넣을 준비를 합니다.
- 여러분이 소유하는 라이브러리. 모듈을 로컬 저장소에 저장하고 모음 전체를 JSON으로 내보내거나 가져옵니다. 빌리는 로그인이 아니라 진짜 이식 가능한 자산 키트죠.
- 격리된 미리보기. 각 모듈이 Shadow DOM 안에서 렌더링되므로 한 블록의 스타일이 다른 블록으로 새지 않고, 미리보기가 여러분이 붙여 넣을 것을 정확히 보여줍니다.
- 로드되면 오프라인 작동. 페이지가 로드된 뒤로는 추출, 편집, 복사에 연결이 필요 없습니다.
IMG.DIY와 다른 레이아웃 도구 비교
| IMG.DIY Module Extractor | 秀米 (xiumi.us) | 135编辑器 | i排版 | HTML을 손으로 복사 | |
|---|---|---|---|---|---|
| 핵심 목적 | 재사용 블록 추출 및 소유 | 완전한 템플릿 편집기 | 완전한 템플릿 편집기 | 완전한 템플릿 편집기 | — |
| 템플릿 라이브러리 | 없음 (붙여 넣은 것으로 만듦) | 방대함 | 방대함 | 큼 | 없음 |
| 계정 필요 | 아니오 | 예 | 예 | 예 | 아니오 |
| 업로드 여부 | 없음 | 있음 (클라우드) | 있음 (클라우드) | 있음 (클라우드) | 없음 |
| 자산 소유 | 예 (로컬 JSON) | 임대 / 클라우드 | 임대 / 클라우드 | 임대 / 클라우드 | 예, 다만 수동 |
| 블록별 이미지 교체 | 있음 | 있음 (편집기 내) | 있음 (편집기 내) | 있음 (편집기 내) | 수동 |
| 블록 전체 다시 칠하기 | 있음, 한 번의 클릭 | 있음 (편집기 내) | 있음 (편집기 내) | 있음 (편집기 내) | 수동 |
| 오프라인 작동 | 가능, 로드되면 | 불가 | 불가 | 불가 | 가능 |
| 가격 | 무료 | 무료 등급 + 유료 | 무료 등급 + 유료 | 무료 등급 + 유료 | 무료 |
공정하게 말하면, 이것은 템플릿 편집기의 대체가 아니고 그런 척하지도 않습니다. 秀米, 135编辑器, i排版은 방대한 템플릿 라이브러리, 실시간 드래그 앤 드롭 레이아웃, 수년의 다듬음을 갖춘 성숙한 제품입니다. 풍성한 글을 처음부터 짓는다면 그곳으로 가야 하고, 그것들은 명성값을 합니다. 그것들이 주지 않는 것은 여러분이 재사용하는 구체적 블록들의 사적이고 이식 가능한 폴더입니다. 로그인 없이 편집하고 아무것도 기기를 떠나지 않는 것 말이죠. 이 도구는 편집기가 아니라 추출기이자 정리기입니다. 세상에서 감탄한 블록을 여러분이 소유하고, 다시 칠하고, 이미지를 바꾸고, 어디든 붙여 넣는 모듈로 바꿉니다. 큰 편집기로 구성하고, 이것으로 조각을 간직하세요.
IMG.DIY를 선택하는 이유
블록 추출
SVG 카드, 헤더, 인용구, 구분선을 독립 모듈로 뽑아냅니다.
인라인 이미지 교체
블록 안의 어떤 이미지든 여러분 것으로 교체 — 업로드 또는 URL.
원클릭 색 변경
블록이 쓰는 색을 클릭하면 한 번에 전체에서 바꿉니다.
인라인 HTML 복사
WeChat 편집기, CMS, 리치 텍스트 상자에 바로 붙여넣기.
로컬 라이브러리
모듈을 이 브라우저에 저장하고 JSON으로 내보내기/가져오기.
업로드 없음
전부 브라우저에서 실행 — 여러분의 자료는 기기를 벗어나지 않습니다.