OpenAI와 Gemini를 사용하여 웹사이트에서 사용자 정의 로고 생성
중급
이것은자동화 워크플로우로, 13개의 노드를 포함합니다.주로 Webhook, HttpRequest, Agent, RespondToWebhook, GoogleGemini 등의 노드를 사용하며. 사용자 OpenAI와 Gemini를 통해 웹사이트에서 사용자 정의 로고 생성
사전 요구사항
- •HTTP Webhook 엔드포인트(n8n이 자동으로 생성)
- •대상 API의 인증 정보가 필요할 수 있음
- •OpenAI API Key
카테고리
-
워크플로우 미리보기
노드 연결 관계를 시각적으로 표시하며, 확대/축소 및 이동을 지원합니다
워크플로우 내보내기
다음 JSON 구성을 복사하여 n8n에 가져오면 이 워크플로우를 사용할 수 있습니다
{
"meta": {
"instanceId": "3d7eb9567ae690bf8c9bba1cb43396e6e40c18e15eb5889cf9673ed1713da6db",
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "4c829734-83d0-43ef-8111-2b8222bff6ee",
"name": "웹사이트 URL 수신 시",
"type": "n8n-nodes-base.webhook",
"position": [
-1136,
2224
],
"webhookId": "15a007b2-0c35-47f6-8387-5b3548c2e295",
"parameters": {
"path": "175b3350-1d0c-48c5-99d1-06e3b209a68097t657yi97",
"options": {},
"httpMethod": "POST",
"responseMode": "responseNode"
},
"typeVersion": 2.1
},
{
"id": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
"name": "웹사이트 스크린샷 캡처",
"type": "n8n-nodes-base.httpRequest",
"position": [
-976,
2224
],
"parameters": {
"url": "=https://api.screenshotone.com/take",
"options": {},
"sendQuery": true,
"queryParameters": {
"parameters": [
{
"name": "access_key",
"value": "[Your ScreenshotOne Access Key]"
},
{
"name": "url",
"value": "={{ $json.body.websiteUrl }}"
},
{
"name": "format",
"value": "jpg"
},
{
"name": "block_ads",
"value": "true"
},
{
"name": "block_cookie_banners",
"value": "true"
},
{
"name": "block_banners_by_heuristics",
"value": "false"
},
{
"name": "block_trackers",
"value": "true"
},
{
"name": "delay",
"value": "0"
},
{
"name": "timeout",
"value": "60"
},
{
"name": "response_type",
"value": "=json"
},
{
"name": "image_quality",
"value": "80"
}
]
}
},
"typeVersion": 4.2
},
{
"id": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
"name": "웹사이트 콘텐츠 가져오기",
"type": "n8n-nodes-base.httpRequest",
"position": [
-816,
2224
],
"parameters": {
"url": "={{ $('When Website URL Received').item.json.body.websiteUrl }}",
"options": {}
},
"typeVersion": 4.2
},
{
"id": "5995ca13-7f6b-4899-88fb-d85e18921143",
"name": "로고 프롬프트 생성",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
-640,
2224
],
"parameters": {
"text": "=Write a prompt to create a logo for this website based of the content of the site and a screenshot of the front page\n\nScreenshot: {{ $('Capture Website Screenshot').item.json.screenshot_url }}\nWebsite data:{{ $json.data }}\n\nOutput the prompt in \"Prompt\"",
"options": {
"passthroughBinaryImages": true
},
"promptType": "define"
},
"typeVersion": 2.2
},
{
"id": "5b7b8344-4acc-46df-8412-30cdaeb49273",
"name": "로고 이미지 생성",
"type": "@n8n/n8n-nodes-langchain.googleGemini",
"position": [
-352,
2224
],
"parameters": {
"prompt": "={{ $json.output }}",
"modelId": {
"__rl": true,
"mode": "list",
"value": "models/gemini-2.5-flash-image",
"cachedResultName": "models/gemini-2.5-flash-image (Nano Banana)"
},
"options": {},
"resource": "image"
},
"credentials": {
"googlePalmApi": {
"id": "7v8o9EaQkl33woxm",
"name": "v9"
}
},
"typeVersion": 1
},
{
"id": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
"name": "로고로 응답",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
-176,
2224
],
"parameters": {
"options": {},
"respondWith": "binary"
},
"typeVersion": 1.4
},
{
"id": "f1bc68c6-ccf3-4fdf-97c5-5a86928838f7",
"name": "참고: Webhook 트리거",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1248,
2000
],
"parameters": {
"color": 6,
"width": 344,
"height": 212,
"content": "## 📥 When Website URL Received\n\n**Purpose:** Triggers workflow on POST request with website URL.\n\n**Note:** Body format: {\"websiteUrl\": \"https://example.com\"}"
},
"typeVersion": 1
},
{
"id": "a1cef014-ddd9-4db2-8333-a7579608008e",
"name": "참고: 스크린샷 캡처",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1168,
2464
],
"parameters": {
"color": 3,
"width": 312,
"height": 212,
"content": "## 🖼️ Capture Website Screenshot\n\n**Purpose:** Fetches site screenshot via ScreenshotOne API for visual analysis.\n\n**Note:** Replace placeholder with your API key; outputs JSON with screenshot_url."
},
"typeVersion": 1
},
{
"id": "62e394c1-363f-4164-81f5-39cde9ca7b22",
"name": "참고: 콘텐츠 가져오기",
"type": "n8n-nodes-base.stickyNote",
"position": [
-816,
2000
],
"parameters": {
"color": 5,
"width": 216,
"height": 196,
"content": "## 🌐 Fetch Website Content\n\n**Purpose:** Scrapes HTML from the URL for text-based site analysis.\n"
},
"typeVersion": 1
},
{
"id": "21b9ad9a-cbb4-4ad2-94d7-6424bf906478",
"name": "참고: 프롬프트 생성",
"type": "n8n-nodes-base.stickyNote",
"position": [
-528,
2464
],
"parameters": {
"color": 5,
"width": 312,
"height": 212,
"content": "## ✍️ Generate Logo Prompt\n\n**Purpose:** AI agent crafts logo prompt using OpenAI from content and screenshot.\n\n**Note:** Multimodal input; outputs refined prompt for image gen."
},
"typeVersion": 1
},
{
"id": "cb688126-2285-4ff0-9beb-259c9d0f7c43",
"name": "참고: 로고 생성",
"type": "n8n-nodes-base.stickyNote",
"position": [
-368,
2000
],
"parameters": {
"color": 2,
"width": 280,
"height": 180,
"content": "## 🎨 Generate Logo Image\n\n**Purpose:** Creates logo via Google Gemini using the AI-crafted prompt.\n\n**Note:** Image resource; returns binary data for response."
},
"typeVersion": 1
},
{
"id": "d470c3e0-e75b-455c-b514-7e242fe664dc",
"name": "개요 참고5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1888,
1808
],
"parameters": {
"color": 4,
"width": 600,
"height": 1100,
"content": "# 🤖 AI Logo Generator from Website URL\n\n## 📋 What This Template Does\nThis workflow receives a website URL via webhook, captures a screenshot and fetches page content, uses OpenAI to craft a logo prompt from visuals and text, then generates the image with Google Gemini for binary response.\n\n## 🔧 Prerequisites\n- n8n instance with webhook support\n- ScreenshotOne account\n- OpenAI account\n- Google AI Studio account\n\n## 🔑 Required Credentials\n\n### ScreenshotOne API Setup\n1. Sign up at screenshotone.com → Dashboard → API Keys\n2. Generate access key\n3. Replace placeholder in \"Capture Website Screenshot\" node\n\n### OpenAI API Setup\n1. platform.openai.com → API Keys\n2. Create secret key\n3. Add as \"OpenAI API\" credential\n\n### Google Gemini API Setup\n1. aistudio.google.com/app/apikey\n2. Create API key\n3. Add as \"Google PaLM API\" credential\n\n## ⚙️ Configuration Steps\n1. Import JSON workflow\n2. Assign credentials to nodes\n3. Replace API key placeholder\n4. Activate webhook\n5. Test with POST {\"websiteUrl\": \"https://example.com\"}\n\n## 🎯 Use Cases\n- Marketing: Generate client logo prototypes\n- Developers: Auto-match logos for sites\n- Designers: Inspire from competitors\n- Education: Demo AI design\n\n## ⚠️ Troubleshooting\n- Screenshot timeout: Increase to 120s, check URL\n- Empty prompt: Verify OpenAI quota\n- Blank logo: Add style to prompt, check limits\n- No trigger: Confirm POST JSON body"
},
"typeVersion": 1
},
{
"id": "ae9beb67-4ce8-43be-a73c-37fb446517fd",
"name": "GPT-5 mini",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
-640,
2400
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-5-mini",
"cachedResultName": "gpt-5-mini"
},
"options": {}
},
"credentials": {
"openAiApi": {
"id": "ymMvgDroJHalwvRf",
"name": "OpenAI"
}
},
"typeVersion": 1.2
}
],
"pinData": {},
"connections": {
"ae9beb67-4ce8-43be-a73c-37fb446517fd": {
"ai_languageModel": [
[
{
"node": "5995ca13-7f6b-4899-88fb-d85e18921143",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"5b7b8344-4acc-46df-8412-30cdaeb49273": {
"main": [
[
{
"node": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
"type": "main",
"index": 0
}
]
]
},
"5995ca13-7f6b-4899-88fb-d85e18921143": {
"main": [
[
{
"node": "5b7b8344-4acc-46df-8412-30cdaeb49273",
"type": "main",
"index": 0
}
]
]
},
"2156cf0b-97f0-425e-a28d-d7ea9e2d7d17": {
"main": [
[
{
"node": "5995ca13-7f6b-4899-88fb-d85e18921143",
"type": "main",
"index": 0
}
]
]
},
"4c829734-83d0-43ef-8111-2b8222bff6ee": {
"main": [
[
{
"node": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
"type": "main",
"index": 0
}
]
]
},
"0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb": {
"main": [
[
{
"node": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
"type": "main",
"index": 0
}
]
]
}
}
}자주 묻는 질문
이 워크플로우를 어떻게 사용하나요?
위의 JSON 구성 코드를 복사하여 n8n 인스턴스에서 새 워크플로우를 생성하고 "JSON에서 가져오기"를 선택한 후, 구성을 붙여넣고 필요에 따라 인증 설정을 수정하세요.
이 워크플로우는 어떤 시나리오에 적합한가요?
중급
유료인가요?
이 워크플로우는 완전히 무료이며 직접 가져와 사용할 수 있습니다. 다만, 워크플로우에서 사용하는 타사 서비스(예: OpenAI API)는 사용자 직접 비용을 지불해야 할 수 있습니다.
관련 워크플로우 추천
OpenAI와 Fal.ai Minimax를 사용하여 텍스트 힌트에서 가사와 음악을 생성
OpenAI와 Fal.ai Minimax를 사용하여 텍스트 힌트에서 가사와 음악 생성
Set
Wait
Switch
+
Set
Wait
Switch
17 노드Daniel Nkencho
콘텐츠 제작
高级판매AI에이전트
AI판매에이전트：WhatsApp、FB、IG、OpenAI、Airtable、Supabase자동预约
If
Set
Switch
+
If
Set
Switch
58 노드Sam Yassine
영업
ElevenLabs와 OpenAI를 활용한 음성 RAG 챗봇
ElevenLabs와 OpenAI 기반 AI 음성 챗봇 - 고객 서비스 및 음식 업계에 적합
Webhook
Google Drive
Http Request
+
Webhook
Google Drive
Http Request
23 노드Davide
인공지능
고급 챗봰+RAG 에이전트
OpenAI, Google Sheets, Glide 및 Supabase 기반 AI 구동 RAG 질의응답 챗봰
Set
Webhook
Google Drive
+
Set
Webhook
Google Drive
34 노드Sam Yassine
지원
AI 기반 Google Sheets 웹 리서치(GPT와 Bright Data)
AI 기반 Google Sheets 웹 리서치(GPT와 Bright Data)
Set
Webhook
Data Table
+
Set
Webhook
Data Table
22 노드Elay Guez
시장 조사
GPT-4와 DALL-E를 사용한 UI 기반 자동화 LinkedIn 콘텐츠 생성
AI 기반 LinkedIn 콘텐츠 생성기(OpenAI GPT-4 및 DALL-E)
Webhook
Http Request
Agent
+
Webhook
Http Request
Agent
23 노드WeWeb
콘텐츠 제작
워크플로우 정보
난이도
중급
노드 수13
카테고리-
노드 유형7
저자
Daniel Nkencho
@daniel-automatesAI Automation Consultant | Helping Business Owners Implement AI Systems for Growth and Lead Gen
외부 링크
n8n.io에서 보기 →
이 워크플로우 공유