완전 무료 자동화 블로그 어떻게 만드는지 다 알려주는 시리즈 (1/n) 블로그 이미지 생성 및 삽입에 드는 시간을 획기적으로 줄이는 방법이 있을까? 그것도 무료로? 모두 사용할 수 있도록 최종 버전에는 무료로 배포할 생각이예요!
N8N, Google Gemini, Unsplash API를 연동하여 AI 기반의 블로그 이미지 자동화 워크플로우를 구축하는 모든 과정을 단계별로 상세히 설명하는 완벽 가이드입니다. 초보자도 쉽게 따라 할 수 있도록 스크린샷과 설정 예시를 풍부하게 담았습니다.
디지털 콘텐츠의 홍수 속에서 독자의 시선을 사로잡고 검색 엔진에서 상위 노출되기 위해서는 고품질의 콘텐츠뿐만 아니라, 매력적인 시각 자료가 필수적입니다. 하지만 매번 블로그 글에 맞는 이미지를 찾고, 생성하고, 삽입하는 과정은 엄청난 시간과 노력을 요구합니다.
이러한 반복적인 작업을 자동화할 수 있다면 어떨까요? 여기 그 해답이 있습니다. 이 상세 매뉴얼에서는 N8N이라는 강력한 워크플로우 자동화 도구와 Google의 최신 AI 모델인 Gemini, 그리고 방대한 무료 이미지 라이브러리인 Unsplash API를 연동하여 블로그 이미지를 자동으로 생성하고 게시물에 삽입하는 일련의 과정을 완벽하게 마스터할 수 있도록 도와드립니다.
완전 무료 자동화 블로그 어떻게 만드는지 다 알려주는 시리즈 (1/n)
이 가이드는 단순히 ‘어떻게’ 하는지뿐만 아니라 ‘왜’ 그렇게 하는지, 그리고 각 단계에서 발생할 수 있는 문제와 해결책까지 다루어, 여러분이 이 워크플로우를 성공적으로 구축하고 효율성을 극대화할 수 있도록 지원할 것입니다. 지금부터 AI 기반 블로그 이미지 자동화의 세계로 깊이 들어가 보겠습니다!
1단계: Google Gemini 노드를 활용한 블로그 이미지 설명 생성 (AI의 상상력 활용) – 무료 자동화 블로그
모든 자동화의 시작은 AI에게 어떤 이미지가 필요한지 정확히 알려주는 것입니다. 이 단계에서는 Google Gemini AI의 강력한 텍스트 생성 능력을 활용하여, 블로그 게시물의 특정 섹션에 맞는 상세한 이미지 설명을 얻습니다. 이 설명은 단순히 “사과”가 아니라, “빛이 잘 드는 주방 식탁 위에 놓인 신선하고 붉은 사과, 배경은 블러 처리되고 따뜻한 색감”과 같이 구체적인 지침이 됩니다.
1.1. 노드 추가 및 기본 설정:
- 노드 유형: N8N 워크플로우 캔버스에 Google Gemini 노드를 추가합니다.
- 노드 이름: 가독성을 위해 Google Gemini (Generate Image Descriptions) 정도로 이름을 변경하는 것을 권장합니다.
1.2. 인증 (Authentication):
- Authentication 드롭다운에서 Google OAuth2 API 또는 Google Cloud Service Account를 선택합니다. 대부분의 경우 Google OAuth2 API가 간편합니다.
- Google Credential: 아직 설정하지 않았다면 Create New를 클릭하여 Google Cloud Console에서 발급받은 API Key (또는 OAuth 클라이언트 ID)를 설정합니다. Gemini API 사용을 위해서는 generativelanguage.googleapis.com에 대한 접근 권한이 필요합니다.
- Tip: API Key를 사용하는 경우 x-goog-api-key 헤더를 통해 안전하게 전달됩니다. (사용자가 이전에 제시한 image_5c109c.png에서 이 설정이 보였습니다.)
1.3. 작업 (Operation):
- Operation을 Generate Content로 설정합니다.
1.4. 모델 (Model):
- Model 드롭다운에서 gemini-pro (텍스트 생성)를 선택합니다. 이미지 생성은 아니므로 gemini-pro-vision은 적합하지 않습니다.
1.5. 프롬프트 (Prompt) 구성:
- Prompt 필드에 Gemini가 이미지 설명을 생성할 수 있도록 명확하고 구체적인 지시를 내립니다. 이 프롬프트는 이전 노드 (예: 블로그 글을 생성한 노드)에서 받은 데이터를 참조해야 합니다.
- 예시 (텍스트 기반 블로그 글을 입력으로 받을 때):
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" 와 같은 문구를 추가하여 위험성을 부각한다.- {{ $json.blog_section_content }}: 이 부분은 N8N의 표현식(Expression)으로, 이전 노드에서 전달받은 블로그 섹션 내용을 동적으로 가져옵니다. 실제 사용하는 변수명에 맞게 조정해야 합니다.
- Gemini에게 출력 형식 가이드 제공: Gemini가 정확히 우리가 원하는 “숫자. **설명N: [이미지 설명]**” 형식으로 응답하도록 명시적인 예시를 제공하는 것이 중요합니다. (이전 대화에서 이 형식을 통해 성공적으로 설명을 얻으셨습니다.)
1.6. 노드 테스트:
- 노드를 저장하고, Test Node 버튼을 클릭하여 실행합니다.
- Output 탭에서 Gemini가 생성한 이미지 설명이 예상한 JSON 형식으로 출력되는지 확인합니다. 이 출력은 보통 output 필드 내에 문자열로 포함됩니다.
2단계: Function 노드를 활용한 이미지 키워드 추출 및 정제 (Unsplash 검색 최적화) 무료 자동화 블로그
Gemini가 생성한 상세 설명은 훌륭하지만, Unsplash와 같은 이미지 검색 엔진은 주로 간결하고 핵심적인 키워드에 최적화되어 있습니다. 이 단계에서는 N8N의 Function 노드를 사용하여 자바스크립트 코드로 이미지 설명 텍스트에서 검색 가능한 키워드를 추출하고 정제합니다.
2.1. 노드 추가 및 연결:
- Google Gemini (Generate Image Descriptions) 노드 뒤에 Function 노드를 추가합니다.
- 노드 이름: Function (Extract Image Descriptions & Keywords)로 이름을 변경합니다.
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. 코드 상세 설명 및 팁:
- items 배열 처리: N8N의 Function 노드는 이전 노드의 데이터를 items라는 전역 변수에 배열 형태로 전달받습니다. 각 아이템은 json 속성 내에 실제 데이터를 가지고 있습니다.
- 정규식 (Regex)의 중요성:
- descriptionBlockRegex: Gemini의 출력 형식에 맞춰 각 이미지 설명을 개별적인 블록으로 분리하는 데 사용됩니다. (\d+\.\s*\*\*[^*]+?\*\*:\s*.*?)((?=\d+\.\s*\*\*)|$) 패턴은 “숫자. **제목:** 내용”으로 시작하는 부분을 정확히 잡아내고, 다음 숫자 시작 지점까지 또는 문자열 끝까지를 하나의 블록으로 인식합니다.
- keywordCaptureRegex: /\*\*(.+?)\*\*:/ 이 정규식은 **와 **: 사이의 텍스트를 추출하여 이미지의 핵심 키워드를 얻습니다.
- 한국어 조사/어미 제거 (Step 4): 이 부분은 한국어 특성상 중요한 정제 과정입니다.
- imageKeywords.replace(/을|를|이|가|은|는|도|만|에|에서|와|과|랑|하고|으로써|으로|에게|께|한테|부터|까지|마저|조차|처럼|만큼|듯이|하고는|거나|든지|다시|모두|같이|인한|시각적|보여주|묘사하|나타내/g, ”).trim();
- 여기에 시각적|보여주|묘사하|나타내 등 실제 추출 결과에서 나타났던 어미나 형태들을 추가하여 더욱 정교하게 제거합니다.
- 불용어(Stop Words) 제거 (Step 5): commonWordsToRemove 배열에 “이미지”, “사진”, “묘사하는” 등 검색에 불필요한 일반적인 단어들을 추가하여 검색 효율을 높입니다.
- console.log 디버깅: 코드에 포함된 수많은 console.log 문은 N8N의 Execution Log 탭에서 실행 과정을 단계별로 추적할 수 있게 해줍니다. 키워드 추출이 제대로 되지 않을 때 이 로그를 통해 어느 단계에서 문제가 발생하는지 쉽게 파악할 수 있습니다.
- 출력 형식: 각 이미지 설명에 대해 { json: { image_prompt: “…”, image_keywords: “…”, image_index: N } } 형태의 개별 아이템을 생성하여 다음 노드로 전달합니다.
2.4. 노드 테스트:
- Google Gemini (Generate Image Descriptions) 노드를 먼저 Test Node로 실행하여 Function 노드에 올바른 입력이 오도록 합니다.
- 그 다음, Function (Extract Image Descriptions & Keywords) 노드를 Test Node로 실행합니다.
- Output 탭과 Execution Log 탭을 면밀히 확인하여, 각 아이템마다 image_prompt와 image_keywords가 의도대로 추출되었는지 검토합니다.
3단계: HTTP Request 노드를 통한 Unsplash 이미지 검색 (방대한 라이브러리 활용) 무료 자동화 블로그
이제 잘 정제된 키워드를 사용하여 Unsplash의 방대한 이미지 라이브러리에서 블로그에 적합한 이미지를 검색할 차례입니다. HTTP Request 노드는 외부 API와 통신하는 데 사용됩니다.
3.1. 노드 추가 및 연결:
- Function (Extract Image Descriptions & Keywords) 노드 뒤에 HTTP Request 노드를 추가합니다.
- 노드 이름: HTTP Request (Unsplash Search)로 이름을 변경합니다.
3.2. 인증 (Authentication):
- Authentication: None으로 설정합니다. Unsplash API는 Client ID를 URL 파라미터로 받기 때문에 별도의 인증 헤더가 필요하지 않습니다.
3.3. 요청 방식 (Request Method):
- Method: GET으로 설정합니다. 이미지를 검색하는 것은 데이터를 조회하는 것이므로 GET 요청이 적합합니다.
3.4. URL (경로):
- URL: https://api.unsplash.com/search/photos 를 입력합니다.
3.5. 쿼리 파라미터 (Query Parameters) 설정 (매우 중요):
- Query Parameters 섹션에서 Add Parameter 버튼을 클릭하여 필요한 파라미터들을 추가합니다.
- Parameter 1 (검색어):
- Name: query
- Value: {{ $json.image_keywords }}
- Explanation: {{ $json.image_keywords }}는 이전 Function 노드에서 추출한 각 아이템의 image_keywords 값을 동적으로 가져와 query 파라미터로 사용합니다. 이 부분이 정확한 이미지 검색의 핵심입니다.
- Parameter 2 (Client ID):
- Name: client_id
- Value: [당신의 Unsplash Access Key]
- Explanation: Unsplash 개발자 계정에서 발급받은 고유한 Access Key를 여기에 직접 붙여넣습니다. 이 키는 Unsplash API를 호출할 수 있는 권한을 부여합니다. 이 키는 외부에 노출되지 않도록 주의해야 합니다.
- Unsplash Access Key 얻는 방법 (재차 강조):
- Unsplash Developers 웹사이트 (https://unsplash.com/developers) 방문.
- 로그인 또는 회원가입.
- “Your apps” 또는 “New Application” 클릭하여 새 애플리케이션 생성.
- 약관 동의 및 앱 설명 작성 (예: “N8N Blog Image Automation”).
- 생성된 앱 페이지에서 “Access Key” (또는 Client ID)를 확인하고 복사합니다.
- Parameter 3 (페이지당 결과 수 – 권장 1개):
- Name: per_page
- Value: 1
- Explanation: 블로그 게시물 각 섹션에 대해 하나의 대표 이미지만 필요한 경우가 많으므로 1로 설정하는 것이 효율적입니다. Unsplash API는 per_page의 최대값을 30으로 제한합니다. 240을 입력하셨더라도 실제로는 30개까지만 반환됩니다. 한 번에 여러 이미지를 가져와 선택하고 싶다면 더 높은 값을 설정할 수 있습니다.
- Parameter 4 (이미지 방향 – 선택 사항):
- Name: orientation
- Value: landscape (가로형 이미지를 선호하는 경우) 또는 portrait (세로형), squarish (정사각형) 등
- Explanation: 블로그 레이아웃에 맞춰 이미지의 방향을 지정하여 검색 결과를 필터링할 수 있습니다.
- Parameter 1 (검색어):
3.6. 응답 형식 (Response Format):
- Response Format: JSON (기본값)으로 설정되어 있는지 확인합니다. Unsplash API는 JSON 형식으로 결과를 반환합니다.
3.7. 노드 테스트:
- HTTP Request (Unsplash Search) 노드를 클릭하고 Test Node 버튼을 클릭하여 실행합니다.
- Output 탭에서 Unsplash API로부터 받은 JSON 응답을 확인합니다. results 배열 안에 검색된 이미지들의 정보가 잘 들어있는지 확인하는 것이 중요합니다. total, total_pages, results 배열이 정상적으로 보이는지 확인하세요.
4단계: Set 노드를 활용한 최종 이미지 URL 추출 (게시물 삽입 준비) 무료 자동화 블로그
Unsplash API 응답은 이미지의 ID, 설명, 사용자 정보, 다양한 크기의 URL 등 복잡한 정보를 담고 있습니다. 최종적으로 블로그에 사용할 특정 이미지 URL만을 추출하여 다음 단계에서 쉽게 사용할 수 있도록 image_url이라는 새로운 필드를 생성합니다.
4.1. 노드 추가 및 연결:
- HTTP Request (Unsplash Search) 노드 뒤에 Set 노드를 추가합니다.
- 노드 이름: Set (Extract Image URL)로 이름을 변경합니다.
4.2. 값 (Values) 설정:
- Values 섹션에서 Add Value 버튼을 클릭합니다.
- 새로운 필드 이름:
- Name: image_url
- 추출할 URL 경로 설정:
- Value 필드 옆의 톱니바퀴 아이콘 (Expression)을 클릭하여 표현식 편집기를 엽니다.
- 다음과 같은 표현식을 입력합니다: {{ $json.results[0].urls.regular }}
- $json: 현재 노드의 입력 데이터 전체를 나타냅니다.
- results[0]: Unsplash API 검색 결과는 results라는 배열 안에 이미지 객체들을 담고 있습니다. [0]은 그중 첫 번째(가장 관련성이 높은) 이미지를 의미합니다.
- urls.regular: 이미지 객체 안의 urls 필드는 다양한 크기의 이미지 URL을 제공합니다.
- raw: 원본 이미지 URL (매우 큼)
- full: 원본에 가까운 큰 이미지
- regular: 블로그 게시물에 적합한 일반적인 크기
- small: 작은 크기
- thumb: 썸네일 크기
- 권장: 대부분의 블로그 게시물에는 regular 또는 small이 적합합니다. 필요에 따라 선택하세요.
- Add 버튼을 클릭하여 표현식을 적용합니다.
4.3. 노드 테스트:
- Set (Extract Image URL) 노드를 클릭하고 Test Node 버튼을 클릭하여 실행합니다.
- Output 탭을 확인합니다. 이제 각 블로그 섹션에 해당하는 아이템에 image_prompt, image_keywords와 더불어 image_url 필드가 추가되고 Unsplash에서 가져온 이미지 URL이 포함되어 있어야 합니다.
무료 자동화 블로그 이미지 워크플로우, 이제 시작입니다!
이 상세 매뉴얼을 통해 N8N, Google Gemini, Unsplash API를 연동하여 블로그 이미지 자동화 워크플로우를 성공적으로 구축하셨기를 바랍니다. 여러분은 이제 다음과 같은 혁신적인 시스템을 갖추게 되었습니다:
- AI 기반 이미지 설명 생성: 블로그 내용에 맞춰 AI가 자동으로 시각적인 이미지를 구상해 줍니다.
- 스마트 키워드 추출: 복잡한 설명을 Unsplash 검색에 최적화된 핵심 키워드로 변환합니다.
- 자동 이미지 검색 및 연결: 생성된 키워드를 바탕으로 방대한 Unsplash 라이브러리에서 적절한 이미지를 찾아 매칭합니다.
이 워크플로우는 여러분의 콘텐츠 제작 시간을 획기적으로 단축시켜 줄 뿐만 아니라, 각 글에 맞는 고품질의 이미지를 일관성 있게 제공하여 블로그의 시각적 매력과 전문성을 높여줄 것입니다. 이는 궁극적으로 독자의 참여율을 높이고, Google SEO 측면에서도 긍정적인 영향을 미칠 것입니다.
다음 단계는 무엇인가요?
이제 여러분은 image_url을 확보했습니다. 이 URL을 활용하여
- 블로그 플랫폼 연동: WordPress, Notion, Medium, Ghost 등 여러분이 사용하는 블로그 플랫폼의 API를 N8N의 HTTP Request 또는 특정 노드 (예: WordPress 노드)와 연동하여 자동으로 게시물에 이미지를 삽입할 수 있습니다.
- HTML 생성: 블로그 글의 최종 HTML을 만들 때 <img> 태그 안에 이 URL을 동적으로 넣어줄 수 있습니다.
- 이미지 다운로드 및 업로드: 경우에 따라 이미지를 직접 다운로드하여 서버나 CDN에 업로드하는 워크플로우를 추가할 수도 있습니다.
n8n을 아직 잘 모르신다면 이 글을 먼저 읽어보세요!
2024.12.15 – [제품추천/소프트웨어] – n8n 시놀로지 로컬 설치 쉽게 하는 방법
Google Veo3 와 MusicGPT 콜라보로 만드는 AI 영상
