검색 최적화(SEO)와 IT 기술로 여는 온라인 비즈니스 인사이트
크롬 확장 프로그램으로 AI 글작성 사이드바 만들기: Prompt.txt 기반 맞춤 기능
Home /

크롬 확장 프로그램으로 AI 글작성 사이드바 만들기: Prompt.txt 기반 맞춤 기능

이번 글은 AI 블로그 자동화 프로그램을 활용하여 크롬 확장 프로그램 기반의 맞춤형 글작성 사이드바를 만드는 방법을 단계별로 안내하며, SEO 최적화와 효율적 콘텐츠 생성을 위한 전략을 제시합니다.


1. AI 자동화 프로그램 개요와 목적

오늘날 AI 블로그 자동화 프로그램은 단순한 선택이 아니라 필수가 되고 있습니다. AI의 활용은 단순한 편리성을 넘어 새로운 창작 영역으로 확장되고 있으며, 반복적인 글작성 과정의 효율화와 SEO 최적화에 매우 유용합니다. 이번 글에서는 AI 기반 크롬 확장 프로그램을 통해 블로그 글 작성 과정을 자동화하는 방법과 전략을 다룹니다.

  • 특정 사이트에서만 작동하는 AI 글작성 사이드바 적용 방법
  • prompt.txt 파일을 통해 프롬프트 기반 맞춤형 글작성 자동화
  • 사용자가 키워드와 제목/내용을 입력하고 AI 작업 수행 버튼 클릭 시 자동화

이 구조는 코드 수정 없이 프롬프트와 대상 사이트만 관리하면 되므로 유지보수와 커스터마이징이 매우 간단합니다. 블로그 운영자나 콘텐츠 크리에이터가 자신의 워크플로우에 맞춰 블로그 글 작성 시 AI 작업을 최적화할 수 있습니다.

2. AI 자동 글 작성 확장 프로그램 디렉토리 구조

크롬 확장 프로그램을 만들기 위해 필요한 기본 파일 구조는 다음과 같습니다.

ai-sidebar-extension/
├─ manifest.json
├─ content.js
├─ prompt.txt ----수정해야 할 파일
├─ icons/
│ ├─ icon16.png
│ ├─ icon48.png
│ └─ icon128.png

manifest.json은 확장 프로그램 설정과 권한 정의, content.js는 실제 웹페이지에서 사이드바 생성 및 동작 구현, prompt.txt는 블로그 특성에 맞게 수정 가능한 프롬프트와 허용 사이트 정의, icons/는 확장 프로그램 아이콘 파일을 포함합니다.

3. 블로그 글 AI 자동 입력 prompt.txt 관리

AI 자동화를 위해 콘텐츠 내용에 맞게 prompt.txt 파일을 관리합니다. DIV 태그에 허용 사이트와 프롬프트를 정의합니다.

div id="site"https://chatgpt.com//div
ai 프롬프트 적용

URL로 허용된 사이트에서만 작동하며, 나머지 텍스트는 AI 글작성용 프롬프트로 활용됩니다. 이를 통해 중앙에서 프롬프트를 관리하고, 사이트별 맞춤 AI 기능을 구현할 수 있습니다. 기본적으로 AI 블로그 자동화 프로그램에 최적화된 프롬프트가 저장되어 있으며, 블로그 특성에 맞게 수정하여 사용 가능합니다.

4. AI 자동화 확장 content.js 핵심 구현

4.1 AI 자동 글 작성 사이드바 생성

웹페이지에 고정된 사이드바를 생성합니다.

const sidebar = document.createElement('div');
sidebar.id = 'fixedSidebar';
Object.assign(sidebar.style, {
position: 'fixed',
top: '0',
right: '0',
width: '300px',
height: '100vh',
background: '#1e1e1e',
color: '#ffffff',
boxShadow: '-3px 0 5px rgba(0,0,0,0.2)',
zIndex: '9999',
padding: '20px',
overflowY: 'auto',
transition: 'right 0.3s',
fontFamily: 'Arial, sans-serif'
});

4.2 AI 프롬프트 버튼 동작

사용자가 클릭하면 prompt.txt 내용을 AI 입력란에 자동 삽입합니다.

promptBtn.onclick = async () = {
const response = await fetch(chrome.runtime.getURL('prompt.txt'));
let promptText = await response.text();
const defaultPrompt = promptText.replace(/[sS]*?/div/, '').trim();
const insertToGPT = () = {
const inputElement = document.querySelector('div[contenteditable="true"]');
if (inputElement) {
inputElement.focus();
inputElement.innerText = defaultPrompt;
const range = document.createRange();
range.selectNodeContents(inputElement);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
clearInterval(intervalId);
}
};
const intervalId = setInterval(insertToGPT, 200);
};

4.3 AI 작업 수행 버튼

사용자가 입력한 키워드와 제목/내용을 AI 입력란에 삽입하고 실행합니다.

runBtn.onclick = () = {
const userPrompt = `키워드: $keywordInput.value}제목/내용: $contentInput.value}`;
contentInput.value = userPrompt;
const insertToGPT = () = {
const inputElement = document.querySelector('div[contenteditable="true"]');
if (inputElement) {
inputElement.focus();
inputElement.innerText = userPrompt;
const range = document.createRange();
range.selectNodeContents(inputElement);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
clearInterval(intervalId);
}
};
const intervalId = setInterval(insertToGPT, 200);
};

5. AI 글 작성 확장 프로그램 사용 방법

크롬 확장 프로그램 설치 방법은 이 링크를 참고하세요.

  1. 디렉토리 구조대로 파일 준비
  2. 크롬 브라우저에서 chrome://extensions/ 접속 후 개발자 모드 켜기
  3. 압축 해제된 확장 프로그램 로드 후 폴더 선택
  4. 허용 사이트 접속 (예: https://chatgpt.com/)
  5. 사이드바 확인 후 키워드, 제목/내용 입력 및 프롬프트 버튼 클릭

6. 커스터마이징 포인트

  • 사이드바 너비: content.js에서 sidebarWidth 값 변경
  • 허용 사이트: prompt.txt
  • 프롬프트 내용: prompt.txt 나머지 텍스트 수정


7. AI 블로그 자동화 프로그램의 심화 활용

압축 파일 형태로 제공되는 확장 프로그램을 통해 AI 블로그 자동화 프로그램을 심화 활용할 수 있습니다.

ai-writing-sidebar.zip
0.01MB

AI 블로그 자동화 프로그램을 전략적으로 활용하면 단순 글 작성 자동화를 넘어, 블로그 운영 전체 워크플로우 효율화가 가능합니다.

prompt.txt
0.01MB

7.1 반복 작업 최소화

반복적인 글작성은 시간과 에너지를 소모합니다. AI 확장 프로그램을 활용하면 키워드별 글 구조 자동 생성, SEO 최적화된 문단 배치, 콘텐츠 블록 재사용이 가능하며, prompt.txt 업데이트를 통해 새로운 글작성 패턴도 자동 반영됩니다.

  • 키워드별 글 구조 자동 생성
  • SEO 최적화된 문단 배치 및 태그 적용
  • 콘텐츠 블록 재사용 및 템플릿 기반 작성

7.2 사용자 맞춤형 AI 입력

AI 자동 글작성 확장 프로그램은 사용자가 입력한 키워드와 제목/내용을 기반으로 맞춤형 AI 지시를 전달합니다. 이를 통해 단순 자동화가 아닌 사용자 의도에 맞춘 콘텐츠 생성이 가능합니다.

예를 들어, 특정 키워드 중심의 SEO 글을 작성할 때, 키워드 입력란에 내용을 작성하고 버튼 클릭만으로 AI가 최적화된 글을 생성합니다.

8. 테이블로 보는 확장 프로그램 구성 요소

구성 요소 역할 커스터마이징
manifest.json 확장 프로그램 설정 및 권한 정의 필요 권한 변경 가능
content.js 사이드바 생성 및 AI 입력 기능 구현 CSS, 버튼 동작, 안내 문구 수정 가능
prompt.txt 허용 사이트와 AI 프롬프트 정의 사이트 추가/삭제, 프롬프트 변경 가능
icons/ 확장 프로그램 아이콘 포함 아이콘 교체 가능

8.1 유지보수와 확장성

새로운 블로그 사이트가 추가되더라도 prompt.txt만 수정하면 바로 적용 가능하므로, 장기적으로 콘텐츠 제작 효율과 유지보수가 매우 용이합니다.

9. 고급 활용 팁

  • 다중 키워드 입력: 한 번의 실행으로 여러 키워드 기반 콘텐츠 생성
  • 템플릿 저장: 자주 사용하는 글 구조를 JSON이나 prompt.txt에 저장
  • 자동 SEO 태그 삽입: AI가 글 작성 시 meta descriptiontitle 태그 자동 생성
  • 협업 환경 구축: 팀원과 프롬프트 공유하여 공동 글 작성
  • 자동 블로그 글 작성 기능

9.1 SEO 최적화와 AI 자동화 결합 전략

블로그 글 작성 시 SEO 최적화는 필수입니다. AI 확장 프로그램을 활용하면 키워드 반복, 문단 구조, 강조 태그 삽입 등을 자동화하여 검색 엔진 친화적 글을 생성할 수 있습니다. AI 블로그 자동화 프로그램prompt.txt를 적절히 활용하면 글 작성 시간을 단축하면서도 높은 SEO 점수를 유지할 수 있습니다.

단, 이 프로그램은 글 초안 작성용으로 사용하고, 최종 글은 반드시 인간 감성으로 다듬어야 최적의 품질과 독자 만족도를 달성할 수 있습니다.

10. FAQ

확장 프로그램 설치 후 브라우저를 재시작해야 하나요?
아니요, 설치 후 사이트 접속만으로 사이드바가 활성화됩니다. 단, manifest.json 수정 후에는 확장 프로그램을 다시 로드해야 합니다.
AI가 생성한 글을 바로 블로그에 업로드할 수 있나요?
AI는 글 초안 작성까지만 지원합니다. SEO, 맞춤 표현, 이미지, 링크 등은 추가 편집이 필요합니다.
여러 블로그에 동시에 적용 가능한가요?
prompt.txt에 허용 사이트를 추가하면 동시에 여러 블로그에서 사용 가능합니다.

마무리: 이 확장 프로그램은 AI 블로그 자동화 프로그램을 활용한 글 작성 효율화의 핵심 도구입니다. 반복 작업을 최소화하고, SEO 최적화된 콘텐츠를 빠르게 생성할 수 있도록 설계되었습니다. 블로그 운영자는 prompt.txtcontent.js를 필요에 맞게 커스터마이징하여 자신만의 블로그 워크플로우를 최적화할 수 있습니다. ✨

원본 출처: 데일리 허브

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다