크롬 확장 프로그램으로 HTML 코드 추출, 자동 저장, 코드 정리까지 한 번에 처리하는 블로그 편집 필수 도구입니다.
HTML 콘텐츠 추출, 자동 저장, 코드 정리를 한 번에! 블로거 필수 크롬 에디터 확장 프로그램 설치 및 활용 방법 총정리-
블로그 편집 작업 중 지저분한 코드, 작성 중 사라진 글, 반복적인 편집 작업에 지칠 때가 많습니다. 물론 블로그 에디터 자체에 백업 기능이 있어 어느 정도는 해결되지만, 그래도 작성 중인 글이 사라지는 경험은 블로그를 운영해 본 사람이라면 누구나 한두 번쯤은 겪어보았을 것입니다. 또한, 에디터 창은 왜 이리 작은지 모르겠습니다.
자신이 만드는 콘텐츠의 가로 폭은 1000px인데, 좁은 화면에서 콘텐츠를 제작하다 보면 원하는 디자인과는 전혀 다른 결과물이 나오기도 합니다. 블로그를 운영하면서 자료를 수집하고 이를 효과적으로 활용하는 것은 매우 중요한 일입니다. 그런데 이러한 자료 정리나 활용도 좀 더 쉽게 할 수 있는 방법은 없을까요?
티스토리워드프레스 블로거를 위한 HTML 자동 추출 및 코드 정리 크롬 확장 프로그램 설치법
이 모든 불편함을 해결할 수 있는크롬 확장 프로그램을 소개합니다.
이번에 소개하는 블로그 에디터 확장 프로그램은 기존의 에디터 기능과 코드 정리 기능을 하나의 프로그램으로 통합했으며, 누구나 쉽게 크롬 브라우저에 확장 프로그램으로 등록하여 바로 활용할 수 있도록 업그레이드되었습니다.
HTML 콘텐츠를 선택적으로 추출하고, 코드 정리 및 자동 저장까지 가능한 이 도구는 특히 티스토리, 워드프레스, 브런치 블로거들에게 탁월한 생산성 향상을 기대할 수 있는 도구입니다. 이번 글에서는 이 프로그램의 필요성과 설치 방법, 사용 방법까지 간단히 알아보겠습니다.
블로그 에디터 보조 프로그램은 왜 필요할가?
1. 블로그 편집 중 콘텐츠 유실 방지
자동 저장 기능은 글을 작성하다가 브라우저가 꺼지거나 탭이 닫히는 상황에서도 데이터를 보존해줍니다.
2. 코드 난잡 현상 해소
티스토리나 브런치 등에서 복붙한 콘텐츠는 span, p data-ke-size 등 불필요한 태그가 많이 포함됩니다. 이 확장 프로그램은 정규식을 활용하여 한 번의 클릭으로 코드 정리가 가능합니다.
3. 콘텐츠 재활용 및 전환 편의
작성된 HTML 코드를 한 줄로 압축하거나, 불필요 태그만 제거하는 기능을 통해 다양한 플랫폼으로 전환 및 이식이 쉬워집니다.
주요 기능 정리
| 기능명 | 설명 |
|---|---|
| HTML 추출 | CSS 선택자를 기준으로 원하는 영역의 HTML을 추출 |
| 자동 저장 | 글쓰기 중 일정 시간 간격으로 콘텐츠 백업 |
| 너비 조절 | 지정된 영역의 콘텐츠 너비(px) 수치 조정 |
| 코드 정리기 | 태그 정규식 기반 자동 제거 및 변환 기능 |
| 한 줄로 압축 | 여러 줄 코드를 단일 라인으로 변환 |
| 정보 추출기능 | 참고 자료 정보를 쉽게 활용 |
어떻게 사용하나요?
1. HTML 자동 수동 정보 추출 기능
- CSS 선택자(
.class,#id)를 입력하고[HTML 추출]클릭 [HTML 복사]버튼으로 클립보드에 저장
2. 콘텐츠 백업 ,자동 저장 기능
- 저장 간격(초)을 설정하고
[자동 저장 시작]클릭 - TinyMCE 에디터 영역을 자동 감지하여 내용 저장
3. 불필요한 코드 정리 SEO향상
- 정리할 코드를 입력하고 정규식 또는 프리셋 선택
[변환 실행]클릭 시 불필요한 태그 제거 및 변환- 결과는 하단
변환 결과텍스트 영역에 표시됨
4. 메모리 절약을 위한 코드 한 줄로 변환
- 다중 라인 코드를 입력 후
[한줄로 변환]클릭 - 결과를 복사해 코드 삽입용으로 활용 가능
5. 에디터 확장축소 디자인 오류 방지 기능
- 블로그나 앱처럼 화면 크기가 다른 플랫폼에 맞춰 편집 화면의 너비를 조절할 수 있는 기능입니다.
콘텐츠가 실제로 노출되는 영역을 미리 확인하면서 작성할 수 있어 레이아웃 오류를 줄일 수 있습니다.
에디터 확장 프로그램 설치 방법
이 도구는 크롬 확장 프로그램으로 배포되며, 아래 방법으로 직접 설치할 수 있습니다.
web-editor-helper-tool.zip
0.02MB
1. 설치 준비
- 위 제공된 HTML 및 CSS 코드와
sidepanel.js파일을 함께.zip압축하여 보관 manifest.json파일을 생성하여 크롬 확장 프로그램 정의
2. 크롬에서 설치하기
chrome://extensions/접속- 우측 상단
개발자 모드활성화 압축해제된 확장 프로그램 로드클릭 후 폴더 선택
활용 팁
- 티스토리 에디터 사용자는
entry-content,article-view등 ID 또는 클래스 명 입력 시 쉽게 콘텐츠 추출 가능 - 정규식 프리셋을 사용하여 브런치, 네이버, 워드프레스 불필요 태그 제거 자동화
- HTML을 한 줄로 변환하면 AI 모델에 입력하거나 JS로 embed할 때 매우 유용
이 크롬 에디터 확장 프로그램은 블로그 글쓰기의 생산성과 정확도를 높이는 보조 도구입니다. 특히 HTML 기반 콘텐츠 작업이 많은 분이라면 꼭 설치해두시길 추천드립니다.
블로그 편집 작업 시 자주 겪는 문제는 무엇인가요?
지저분한 HTML 코드, 작성 중 글이 사라지는 문제, 좁은 에디터 창으로 인한 불편함 등이 있으며, 이는 작업 효율과 콘텐츠 품질 저하로 이어집니다.
이 크롬 확장 프로그램은 어떤 기능을 제공하나요?
HTML 콘텐츠 선택적 추출, 자동 저장, 코드 정리(불필요 태그 제거 및 압축), 콘텐츠 너비 조절, 자주 쓰는 태그 빠른 입력 등 블로그 작업 생산성을 크게 높여줍니다.
크롬 확장 프로그램 설치와 활용 방법은 어떻게 되나요?
압축 파일을 풀고 크롬 확장 프로그램 페이지(chrome://extensions/)에서 개발자 모드를 켠 후 압축 해제된 폴더를 로드하면 설치 완료. 티스토리, 워드프레스 등에서 CSS 선택자 입력으로 HTML 추출 및 정규식 프리셋 활용이 가능합니다.
블로그 글 작성 중 실수로 내용이 사라졌다면?
자동 저장 기능으로 콘텐츠 유실을 방지할 수 있습니다. 일정 시간마다 작성 중인 내용을 백업해, 탭이 닫히거나 브라우저가 꺼져도 복구할 수 있습니다.
HTML 코드가 너무 지저분하고 복잡할 땐?
정규식 기반 코드 정리기로 한 번에 깔끔하게 정리하세요. 불필요한 span, data-* 속성 등을 자동 제거해 SEO도 함께 개선됩니다.
다양한 화면 크기에서도 레이아웃 오류 없이 편집하려면?
에디터 확장 축소 기능으로 콘텐츠 폭을 자유롭게 조절할 수 있습니다. 모바일, 블로그, 앱 등 각 플랫폼에 맞는 노출 영역을 미리 확인하며 작성할 수 있어 유용합니다.
갤럭시탭