완전 무료 자동 블로그 어떻게 만드는지 다 알려주는 시리즈 블로그 이미지 생성 및 삽입에 드는 시간을 획기적으로 줄이는 방법이 있을까? 그것도 무료로? 모두 사용할 수 있도록 최종 버전에는 무료로 배포할 생각이예요!
N8N, Google Gemini, Unsplash API를 연동하여 AI 기반의 블로그 이미지 자동화 워크플로우를 구축하는 모든 과정을 단계별로 상세히 설명하는 완벽 가이드입니다. 초보자도 쉽게 따라 할 수 있도록 스크린샷과 설정 예시를 풍부하게 담았습니다.
디지털 콘텐츠의 홍수 속에서 독자의 시선을 사로잡고 검색 엔진에서 상위 노출되기 위해서는 고품질의 콘텐츠뿐만 아니라, 매력적인 시각 자료가 필수적입니다. 하지만 매번 블로그 글에 맞는 이미지를 찾고, 생성하고, 삽입하는 과정은 엄청난 시간과 노력을 요구합니다.
이러한 반복적인 작업을 자동화할 수 있다면 어떨까요? 여기 그 해답이 있습니다. 이 상세 매뉴얼에서는 N8N이라는 강력한 워크플로우 자동화 도구와 Google의 최신 AI 모델인 Gemini, 그리고 방대한 무료 이미지 라이브러리인 Unsplash API를 연동하여 블로그 이미지를 자동으로 생성하고 게시물에 삽입하는 일련의 과정을 완벽하게 마스터할 수 있도록 도와드립니다.
이 가이드는 단순히 ‘어떻게’ 하는지뿐만 아니라 ‘왜’ 그렇게 하는지, 그리고 각 단계에서 발생할 수 있는 문제와 해결책까지 다루어, 여러분이 이 워크플로우를 성공적으로 구축하고 효율성을 극대화할 수 있도록 지원할 것입니다. 지금부터 AI 기반 블로그 이미지 자동화의 세계로 깊이 들어가 보겠습니다!
모든 자동화의 시작은 AI에게 어떤 이미지가 필요한지 정확히 알려주는 것입니다. 이 단계에서는 Google Gemini AI의 강력한 텍스트 생성 능력을 활용하여, 블로그 게시물의 특정 섹션에 맞는 상세한 이미지 설명을 얻습니다. 이 설명은 단순히 “사과”가 아니라, “빛이 잘 드는 주방 식탁 위에 놓인 신선하고 붉은 사과, 배경은 블러 처리되고 따뜻한 색감”과 같이 구체적인 지침이 됩니다.
1.1. 노드 추가 및 기본 설정:
1.2. 인증 (Authentication):
1.3. 작업 (Operation):
1.4. 모델 (Model):
1.5. 프롬프트 (Prompt) 구성:
You are an AI assistant specialized in generating visual image descriptions for blog posts.
For the following blog section content, provide a concise, vivid, and detailed image description that visually represents the key theme.
The description should be formatted as a numbered list, with each item starting with "숫자. **설명N: [이미지 설명]**" format.
Focus on elements suitable for image search (e.g., objects, settings, mood, colors, composition).
Content:
{{ $json.blog_section_content }} // 이전 노드의 출력 데이터 (블로그 섹션 내용)
Example Output Format:
1. **설명1: AI 편향성을 시각적으로 보여주는 이미지.** 다양한 인종과 성별의 얼굴 이미지가 여러 개의 박스 안에 배치되어 있고, 각 박스는 AI 얼굴 인식 정확도(예: 95%, 70%, 80%)를 나타내는 숫자와 함께, 정확도가 낮은 그룹의 박스는 어둡게 표현된다. 이미지 하단에는 "AI Bias: Unfair Outcomes" 와 같은 문구를 추가하여 AI 편향성의 부정적 결과를 강조한다. 색상은 차갑고 어두운 색조를 사용하여 불안정함을 시각적으로 표현한다.
2. **설명2: 데이터 프라이버시 침해를 묘사하는 이미지.** 한 사람의 실루엣 주변으로 수많은 데이터 포인트(점, 선 등)가 뻗어나가는 모습을 묘사한다. 데이터 포인트들은 다양한 기기(스마트폰, 컴퓨터, CCTV 등)에서 방출되는 것처럼 표현하고, 실루엣의 얼굴은 모자이크 처리하여 익명성을 강조한다. 배경은 어둡고 신비로운 분위기를 연출하며, "Data Privacy at Risk" 와 같은 문구를 추가하여 위험성을 부각한다.
1.6. 노드 테스트:
Gemini가 생성한 상세 설명은 훌륭하지만, Unsplash와 같은 이미지 검색 엔진은 주로 간결하고 핵심적인 키워드에 최적화되어 있습니다. 이 단계에서는 N8N의 Function 노드를 사용하여 자바스크립트 코드로 이미지 설명 텍스트에서 검색 가능한 키워드를 추출하고 정제합니다.
2.1. 노드 추가 및 연결:
2.2. Function 노드 코드 (JavaScript):
const outputItems = [];
// --- 입력 데이터 유효성 검사 및 텍스트 추출 ---
let rawInputText = '';
// 첫 번째 아이템이 유효한지 확인하고, 'output' 속성에서 텍스트를 가져옵니다.
if (items && items.length > 0 && items[0].json && items[0].json.output) {
rawInputText = items[0].json.output;
console.log('Function Node - Successfully extracted text from items[0].json.output.');
console.log('Function Node - Raw Input Text (first 200 chars):', rawInputText.substring(0, Math.min(rawInputText.length, 200)) + '...');
}
// 잘못된 입력 (이미 파싱된 데이터가 들어온 경우 등)
else {
console.warn('Function Node - No valid text found in expected input path (items[0].json.output).');
console.warn('Function Node - Input JSON:', JSON.stringify(items, null, 2)); // 입력 JSON 전체를 로그에 출력하여 확인
return []; // 잘못된 입력이므로 빈 배열 반환
}
// --- 이미지 설명 블록 분리 ---
// 정규식을 사용하여 '숫자. **제목: 내용**' 패턴으로 시작하는 각 설명 블록을 분리합니다.
const descriptionBlockRegex = /(\d+\.\s*\*\*[^*]+?\*\*:\s*.*?)((?=\d+\.\s*\*\*)|$)/gs;
let match;
let imageIndex = 0;
const processedItems = [];
console.log('Function Node - Starting description block parsing...');
while ((match = descriptionBlockRegex.exec(rawInputText)) !== null) {
const fullDescription = match[1].trim(); // 예: "1. **설명1: AI 편향성...**"
console.log(` Debug - Found fullDescription (Index ${imageIndex + 1}):`, fullDescription.substring(0, Math.min(fullDescription.length, 150)) + '...');
if (fullDescription) {
imageIndex++;
const imagePrompt = fullDescription; // 전체 설명을 image_prompt로 사용
// --- 키워드 추출 및 정제 로직 ---
let imageKeywords = '';
const keywordCaptureRegex = /\*\*(.+?)\*\*:/; // ** 와 **: 사이의 텍스트를 추출
const keywordMatch = fullDescription.match(keywordCaptureRegex);
if (keywordMatch && keywordMatch[1]) {
imageKeywords = keywordMatch[1].trim();
console.log(' Debug - Raw extracted keywords from bold (Step 1):', imageKeywords);
// "설명N: " 패턴이 있다면 제거 (예: "설명1: AI 편향성 시각적 이미지" -> "AI 편향성 시각적 이미지")
const parts = imageKeywords.split(':');
if (parts.length > 1 && parts[0].startsWith('설명')) {
imageKeywords = parts.slice(1).join(':').trim();
}
console.log(' Debug - After "설명N:" removal (Step 2):', imageKeywords);
// 불필요한 구두점 및 추가 공백 제거
imageKeywords = imageKeywords
.replace(/[.!?,"'()]/g, '') // 마침표, 물음표, 느낌표, 쉼표, 따옴표, 괄호 제거
.replace(/\s+/g, ' ') // 여러 공백을 하나의 공백으로
.trim();
console.log(' Debug - After punctuation/space cleanup (Step 3):', imageKeywords);
// 불필요한 한국어 조사, 어미, 불용어 제거 (정규식 사용)
// '인한' 등 불필요한 단어 추가
imageKeywords = imageKeywords.replace(/을|를|이|가|은|는|도|만|에|에서|와|과|랑|하고|으로써|으로|에게|께|한테|부터|까지|마저|조차|처럼|만큼|듯이|하고는|거나|든지|다시|모두|같이|인한|시각적|보여주|묘사하|나타내/g, '').trim();
imageKeywords = imageKeywords.replace(/\s+/g, ' ').trim(); // 조사 제거 후 남은 불필요 공백 제거
console.log(' Debug - After Korean suffix/particle removal (Step 4):', imageKeywords);
// Unsplash 검색에 불필요한 일반적인 단어 제거 (소문자로 비교)
const commonWordsToRemove = [
'시각적으로', '보여주는', '나타내는', '묘사하는', '상징적으로', '표현한', '이미지', '사진', '개념', '상징', '표현',
'대한', '관련된', '모습', '그림', '일러스트', '상세', '설명', '주제', '내용', '위한'
];
imageKeywords = imageKeywords.split(' ').filter(word => {
const lowerWord = word.toLowerCase();
return !commonWordsToRemove.includes(lowerWord) && lowerWord.length > 1; // 1글자 키워드도 제거
}).join(' ');
console.log(' Debug - After common word removal (Step 5):', imageKeywords);
// 최종적으로 공백을 쉼표로 변환 (Unsplash 검색을 위해)
imageKeywords = imageKeywords.replace(/\s+/g, ', ');
console.log(' Debug - Final image_keywords for Unsplash (Step 6):', imageKeywords);
} else {
console.warn(` Debug - Could not find bold text (**...**:) for keywords in: ${fullDescription.substring(0, Math.min(fullDescription.length, 50))}...`);
imageKeywords = ''; // 추출 실패 시 빈 문자열
}
// --- 키워드 추출 및 정제 로직 끝 ---
processedItems.push({
json: {
image_prompt: imagePrompt,
image_keywords: imageKeywords,
image_index: imageIndex // 이미지 순서 (선택 사항)
}
});
console.log(` Function Node - Added item (Index ${imageIndex}): Prompt [${imagePrompt.substring(0, 30)}...], Keywords [${imageKeywords || 'EMPTY'}]`);
} else {
console.warn(' Debug - fullDescription was empty after match, skipping item.');
}
}
if (processedItems.length === 0) {
console.warn('Function Node - No output items generated. Please review input text format and regex patterns.');
}
return processedItems;
2.3. 코드 상세 설명 및 팁:
2.4. 노드 테스트:
이제 잘 정제된 키워드를 사용하여 Unsplash의 방대한 이미지 라이브러리에서 블로그에 적합한 이미지를 검색할 차례입니다. HTTP Request 노드는 외부 API와 통신하는 데 사용됩니다.
3.1. 노드 추가 및 연결:
3.2. 인증 (Authentication):
3.3. 요청 방식 (Request Method):
3.4. URL (경로):
3.5. 쿼리 파라미터 (Query Parameters) 설정 (매우 중요):
3.6. 응답 형식 (Response Format):
3.7. 노드 테스트:
Unsplash API 응답은 이미지의 ID, 설명, 사용자 정보, 다양한 크기의 URL 등 복잡한 정보를 담고 있습니다. 최종적으로 블로그에 사용할 특정 이미지 URL만을 추출하여 다음 단계에서 쉽게 사용할 수 있도록 image_url이라는 새로운 필드를 생성합니다.
4.1. 노드 추가 및 연결:
4.2. 값 (Values) 설정:
4.3. 노드 테스트:
이 상세 매뉴얼을 통해 N8N, Google Gemini, Unsplash API를 연동하여 블로그 이미지 자동화 워크플로우를 성공적으로 구축하셨기를 바랍니다. 여러분은 이제 다음과 같은 혁신적인 시스템을 갖추게 되었습니다:
이 워크플로우는 여러분의 콘텐츠 제작 시간을 획기적으로 단축시켜 줄 뿐만 아니라, 각 글에 맞는 고품질의 이미지를 일관성 있게 제공하여 블로그의 시각적 매력과 전문성을 높여줄 것입니다. 이는 궁극적으로 독자의 참여율을 높이고, Google SEO 측면에서도 긍정적인 영향을 미칠 것입니다.
다음 단계는 무엇인가요?
이제 여러분은 image_url을 확보했습니다. 이 URL을 활용하여
n8n을 아직 잘 모르신다면 이 글을 먼저 읽어보세요!
2024.12.15 – [제품추천/소프트웨어] – n8n 시놀로지 로컬 설치 쉽게 하는 방법
n8n 시놀로지 로컬 설치 쉽게 하는 방법
n8n 시놀로지 로컬 설치 쉽게 하는 방법 ㅣ n8n(n-eight-n으로 발음)은 전 세계의 모든 API 앱을 서로 연결하여 코드 한 줄 없이 데이터를 공유하고 조작할 수 있도록 도와줍니다. 사용하기 쉽고 사용
aboda.kr
N8N, 자동화, 워크플로우, 블로그자동화, AI, GoogleGemini, GeminiAPI, UnsplashAPI, 이미지생성, 블로그이미지, SEO최적화, 콘텐츠마케팅, 디지털마케팅, 생산성향상, AI자동화, 노코드, 로우코드, 개발자도구, 인공지능, 무료이미지, API연동, 웹자동화, 콘텐츠전략, 블로깅팁, 마케팅자동화, 시간절약, 생성형AI, 이미지추출, AI블로그
While you are at it ~ 하는 김에 영어로 쉽게 말하기 "While you are at…