AI 모델 GPT-4.1-mini 및 AWS S3 호스팅
중급
이것은Content Creation, Multimodal AI분야의자동화 워크플로우로, 13개의 노드를 포함합니다.주로 Html, AwsS3, PDFco Api, Agent, ChatTrigger 등의 노드를 사용하며. AI 모델 GPT-4.1-mini 및 AWS S3 호스팅
사전 요구사항
- •AWS Access Key와 Secret
- •OpenAI API Key
워크플로우 미리보기
노드 연결 관계를 시각적으로 표시하며, 확대/축소 및 이동을 지원합니다
워크플로우 내보내기
다음 JSON 구성을 복사하여 n8n에 가져오면 이 워크플로우를 사용할 수 있습니다
{
"meta": {
"instanceId": "f2cccea994332807dafc8a7ecb655b704a54e4bcb386ab27053ffee8f088aa7b",
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "03cec18c-cb05-40d3-8a26-bf6cdc3c99c5",
"name": "HTML",
"type": "n8n-nodes-base.html",
"position": [
704,
-112
],
"parameters": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>{{ $json.output.companyName }} Case Study</title>\n <style>\n /* Import Manrope font */\n @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');\n \n /* CSS Variables for Interlinked Brand Colors */\n :root {\n /* Primary Colors */\n --primary-01: #FAFBFF;\n --primary-02: #004EEA;\n --primary-03: #001B35;\n --primary-04: #008DED;\n \n /* Grayscale Colors */\n --cloud: #EDEFF7;\n --smoke: #D3D6E0;\n --steel: #BCBFCC;\n --space: #9DA2B3;\n --graphite: #6E7180;\n --arsenic: #40424D;\n --phantom: #1E1E24;\n --black: #000000;\n }\n \n /* Reset and Base Styles */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Manrope', sans-serif;\n background-color: var(--primary-01);\n color: var(--primary-03);\n line-height: 1.6;\n overflow-x: hidden;\n }\n \n /* Header Styles */\n header {\n background-color: var(--primary-03);\n padding: 2rem 0;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 27, 53, 0.1);\n }\n \n .header-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .logo {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n color: white;\n font-weight: 700;\n font-size: 1.5rem;\n }\n \n .logo-icon {\n width: 40px;\n height: 40px;\n position: relative;\n }\n \n .logo-icon::before,\n .logo-icon::after {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n }\n \n .logo-icon::before {\n background-color: var(--primary-02);\n top: 0;\n left: 0;\n }\n \n .logo-icon::after {\n background-color: var(--primary-04);\n bottom: 0;\n right: 0;\n }\n \n /* Main Content */\n main {\n margin-top: 100px;\n min-height: calc(100vh - 100px);\n }\n \n /* Hero Section */\n .hero {\n background: linear-gradient(135deg, var(--primary-03) 0%, var(--primary-02) 100%);\n color: white;\n padding: 4rem 0;\n position: relative;\n overflow: hidden;\n }\n \n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -10%;\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, var(--primary-04) 0%, transparent 70%);\n opacity: 0.3;\n border-radius: 50%;\n }\n \n .hero-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n position: relative;\n z-index: 1;\n }\n \n .hero h1 {\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 1rem;\n animation: fadeInUp 0.8s ease-out;\n }\n \n .hero .tagline {\n font-size: 1.25rem;\n font-weight: 300;\n margin-bottom: 2rem;\n opacity: 0.9;\n animation: fadeInUp 0.8s ease-out 0.2s backwards;\n }\n \n .hero-meta {\n display: flex;\n gap: 2rem;\n flex-wrap: wrap;\n animation: fadeInUp 0.8s ease-out 0.4s backwards;\n }\n \n .meta-item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n \n .meta-label {\n font-size: 0.875rem;\n opacity: 0.7;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .meta-value {\n font-size: 1.125rem;\n font-weight: 600;\n }\n \n /* Section Styles */\n .section {\n padding: 4rem 0;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n }\n \n .section-title {\n font-size: 2.5rem;\n font-weight: 700;\n color: var(--primary-03);\n margin-bottom: 3rem;\n text-align: center;\n position: relative;\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -1rem;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, var(--primary-02) 0%, var(--primary-04) 100%);\n border-radius: 2px;\n }\n \n /* Description Section */\n .description {\n background-color: var(--cloud);\n }\n \n .description-content {\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n font-size: 1.125rem;\n line-height: 1.8;\n color: var(--arsenic);\n }\n \n /* Phases Section */\n .phases {\n background-color: white;\n }\n \n .phases-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n }\n \n .phase-card {\n background: linear-gradient(135deg, var(--primary-01) 0%, white 100%);\n border-radius: 12px;\n padding: 2rem;\n box-shadow: 0 5px 20px rgba(0, 27, 53, 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n \n .phase-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--primary-02) 0%, var(--primary-04) 100%);\n }\n \n .phase-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0, 27, 53, 0.15);\n }\n \n .phase-number {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n background-color: var(--primary-02);\n color: white;\n border-radius: 50%;\n font-weight: 700;\n margin-bottom: 1rem;\n }\n \n .phase-title {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary-03);\n margin-bottom: 1rem;\n }\n \n .phase-description {\n color: var(--graphite);\n margin-bottom: 1.5rem;\n }\n \n .phase-details {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n \n .detail-item {\n display: flex;\n gap: 0.5rem;\n padding: 0.5rem 0;\n border-bottom: 1px solid var(--cloud);\n }\n \n .detail-label {\n font-weight: 600;\n color: var(--primary-02);\n min-width: 100px;\n }\n \n .detail-value {\n color: var(--arsenic);\n flex: 1;\n }\n \n /* Timeline Section */\n .timeline {\n background-color: var(--cloud);\n }\n \n .timeline-container {\n position: relative;\n padding: 2rem 0;\n }\n \n .timeline-line {\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: var(--primary-02);\n transform: translateX(-50%);\n }\n \n .timeline-item {\n display: flex;\n align-items: center;\n margin-bottom: 3rem;\n position: relative;\n }\n \n .timeline-item:nth-child(even) {\n flex-direction: row-reverse;\n }\n \n .timeline-content {\n flex: 1;\n padding: 2rem;\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 5px 20px rgba(0, 27, 53, 0.1);\n margin: 0 2rem;\n position: relative;\n }\n \n .timeline-dot {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n background-color: var(--primary-04);\n border: 4px solid white;\n border-radius: 50%;\n box-shadow: 0 0 0 4px var(--primary-02);\n z-index: 1;\n }\n \n .timeline-date {\n font-weight: 700;\n color: var(--primary-02);\n margin-bottom: 0.5rem;\n }\n \n .timeline-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-03);\n margin-bottom: 0.5rem;\n }\n \n .timeline-description {\n color: var(--graphite);\n }\n \n /* Deliverables Section */\n .deliverables {\n background-color: white;\n }\n \n .deliverables-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n }\n \n .deliverable-card {\n background-color: var(--primary-01);\n border-radius: 12px;\n padding: 2rem;\n text-align: center;\n transition: transform 0.3s ease;\n border: 2px solid transparent;\n }\n \n .deliverable-card:hover {\n transform: translateY(-5px);\n border-color: var(--primary-02);\n }\n \n .deliverable-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, var(--primary-02) 0%, var(--primary-04) 100%);\n border-radius: 12px;\n margin: 0 auto 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n }\n \n .deliverable-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-03);\n margin-bottom: 1rem;\n }\n \n .deliverable-description {\n color: var(--graphite);\n }\n \n /* CTA Section */\n .cta-section {\n background: linear-gradient(135deg, var(--primary-02) 0%, var(--primary-04) 100%);\n color: white;\n padding: 4rem 0;\n text-align: center;\n }\n \n .cta-content h2 {\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 1rem;\n }\n \n .cta-content p {\n font-size: 1.25rem;\n margin-bottom: 2rem;\n opacity: 0.9;\n }\n \n .cta-button {\n display: inline-block;\n padding: 1rem 2.5rem;\n background-color: white;\n color: var(--primary-02);\n text-decoration: none;\n border-radius: 50px;\n font-weight: 600;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n \n .cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n }\n \n /* Footer */\n footer {\n background-color: var(--primary-03);\n color: white;\n padding: 2rem 0;\n text-align: center;\n }\n \n .footer-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n }\n \n /* Animations */\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n /* Responsive Design */\n @media (max-width: 768px) {\n .hero h1 {\n font-size: 2rem;\n }\n \n .section-title {\n font-size: 1.75rem;\n }\n \n .timeline-line {\n left: 20px;\n }\n \n .timeline-item,\n .timeline-item:nth-child(even) {\n flex-direction: column;\n padding-left: 40px;\n }\n \n .timeline-dot {\n left: 20px;\n }\n \n .timeline-content {\n margin: 0;\n }\n \n .phases-grid,\n .deliverables-grid {\n grid-template-columns: 1fr;\n }\n }\n </style>\n</head>\n<body>\n <!-- Header -->\n <header>\n <div class=\"header-content\">\n <a href=\"#\" class=\"logo\">\n <div class=\"logo-icon\"></div>\n <span>Your custom HTML here</span>\n </a>\n </div>\n </header>\n\n <!-- Main Content -->\n <main>\n <!-- Hero Section -->\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>{{ $json.output.companyName }} Case Study</h1>\n <p class=\"tagline\">Empowering Possibilities, Humanly AI-Ligned</p>\n <div class=\"hero-meta\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Industry</span>\n <span class=\"meta-value\">{{ $json.output.industry }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Duration</span>\n <span class=\"meta-value\">{{ $json.output.duration }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Investment</span>\n <span class=\"meta-value\">{{ $json.output.investment }}</span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Description Section -->\n <section class=\"section description\">\n <div class=\"container\">\n <h2 class=\"section-title\">Overview</h2>\n <p class=\"description-content\">\n {{ $json.output.description }}\n </p>\n </div>\n </section>\n\n <!-- Phases Section -->\n <section class=\"section phases\">\n <div class=\"container\">\n <h2 class=\"section-title\">Implementation Phases</h2>\n <div class=\"phases-grid\">\n <div class=\"phase-card\">\n <div class=\"phase-number\">1</div>\n <h3 class=\"phase-title\">{{ $json.output.phases[0].title }}</h3>\n <p class=\"phase-description\">{{ $json.output.phases[0].description }}</p>\n <div class=\"phase-details\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Year:</span>\n <span class=\"detail-value\">{{ $json.output.phases[0].details[0].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Key Activity:</span>\n <span class=\"detail-value\">{{ $json.output.phases[0].details[1].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Milestone:</span>\n <span class=\"detail-value\">{{ $json.output.phases[0].details[2].value }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"phase-card\">\n <div class=\"phase-number\">2</div>\n <h3 class=\"phase-title\">{{ $json.output.phases[1].title }}</h3>\n <p class=\"phase-description\">{{ $json.output.phases[1].description }}</p>\n <div class=\"phase-details\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Year:</span>\n <span class=\"detail-value\">{{ $json.output.phases[1].details[0].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Key Activity:</span>\n <span class=\"detail-value\">{{ $json.output.phases[1].details[1].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Milestone:</span>\n <span class=\"detail-value\">{{ $json.output.phases[1].details[2].value }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"phase-card\">\n <div class=\"phase-number\">3</div>\n <h3 class=\"phase-title\">{{ $json.output.phases[2].title }}</h3>\n <p class=\"phase-description\">{{ $json.output.phases[2].description }}</p>\n <div class=\"phase-details\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Year:</span>\n <span class=\"detail-value\">{{ $json.output.phases[2].details[0].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Key Activity:</span>\n <span class=\"detail-value\">{{ $json.output.phases[2].details[1].value }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Milestone:</span>\n <span class=\"detail-value\">{{ $json.output.phases[2].details[2].value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Timeline Section -->\n <section class=\"section timeline\">\n <div class=\"container\">\n <h2 class=\"section-title\">Key Milestones</h2>\n <div class=\"timeline-container\">\n <div class=\"timeline-line\"></div>\n \n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-date\">{{ $json.output.timeline[0].duration }}</div>\n <h3 class=\"timeline-title\">{{ $json.output.timeline[0].title }}</h3>\n <p class=\"timeline-description\">{{ $json.output.timeline[0].description }}</p>\n </div>\n <div class=\"timeline-dot\"></div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-date\">{{ $json.output.timeline[1].duration }}</div>\n <h3 class=\"timeline-title\">{{ $json.output.timeline[1].title }}</h3>\n <p class=\"timeline-description\">{{ $json.output.timeline[1].description }}</p>\n </div>\n <div class=\"timeline-dot\"></div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-date\">{{ $json.output.timeline[2].duration }}</div>\n <h3 class=\"timeline-title\">{{ $json.output.timeline[2].title }}</h3>\n <p class=\"timeline-description\">{{ $json.output.timeline[2].description }}</p>\n </div>\n <div class=\"timeline-dot\"></div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Deliverables Section -->\n <section class=\"section deliverables\">\n <div class=\"container\">\n <h2 class=\"section-title\">Key Deliverables</h2>\n <div class=\"deliverables-grid\">\n <div class=\"deliverable-card\">\n <div class=\"deliverable-icon\">🔍</div>\n <h3 class=\"deliverable-title\">{{ $json.output.deliverables[0].title }}</h3>\n <p class=\"deliverable-description\">{{ $json.output.deliverables[0].description }}</p>\n </div>\n\n <div class=\"deliverable-card\">\n <div class=\"deliverable-icon\">📊</div>\n <h3 class=\"deliverable-title\">{{ $json.output.deliverables[1].title }}</h3>\n <p class=\"deliverable-description\">{{ $json.output.deliverables[1].description }}</p>\n </div>\n\n <div class=\"deliverable-card\">\n <div class=\"deliverable-icon\">📱</div>\n <h3 class=\"deliverable-title\">{{ $json.output.deliverables[2].title }}</h3>\n <p class=\"deliverable-description\">{{ $json.output.deliverables[2].description }}</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- CTA Section -->\n <section class=\"cta-section\">\n <div class=\"container\">\n <div class=\"cta-content\">\n <h2>Ready to Transform Your Business with AI?</h2>\n <p>Let Interlinked help you navigate the AI revolution with integrity and empathy.</p>\n <a href={{ $json.output.ctaLink }} class=\"cta-button\">Learn More About This Case</a>\n </div>\n </div>\n </section>\n </main>\n\n <!-- Footer -->\n <footer>\n <div class=\"footer-content\">\n <p>© Custom HTML. All rights reserved.</p>\n <p>Empowering Possibilities, Humanly AI-Ligned.</p>\n </div>\n </footer>\n\n <script>\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Add scroll animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -100px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n });\n }, observerOptions);\n\n // Observe elements for animation\n document.querySelectorAll('.phase-card, .timeline-item, .deliverable-card').forEach(el => {\n observer.observe(el);\n });\n </script>\n</body>\n</html>"
},
"typeVersion": 1.2
},
{
"id": "a03ad7bd-cbe9-40a5-9ce6-7faf5fa3e811",
"name": "AI 에이전트",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
288,
-32
],
"parameters": {
"options": {
"systemMessage": "YOU are a researcher finding the outputs based on the connected JSON inputs, ensure a comprehensive understanding."
},
"hasOutputParser": true
},
"typeVersion": 2.1
},
{
"id": "b16ee4f2-91c2-4f17-8a9e-1a29fe644ad3",
"name": "구조화된 출력 파서",
"type": "@n8n/n8n-nodes-langchain.outputParserStructured",
"position": [
560,
176
],
"parameters": {
"jsonSchemaExample": "{\n \"companyName\": \"[CLIENT_COMPANY_NAME]\",\n \"industry\": \"[CLIENT_INDUSTRY]\",\n \"duration\": \"[PROJECT_DURATION]\",\n \"investment\": \"[INVESTMENT_RANGE]\",\n \"description\": \"[CLIENT_DESCRIPTION_AND_CHALLENGES]\",\n \"phases\": [\n {\n \"number\": 1,\n \"title\": \"[PHASE_1_TITLE]\",\n \"description\": \"[PHASE_1_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_1_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_1_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_1_OUTCOME]\"\n }\n ]\n },\n {\n \"number\": 2,\n \"title\": \"[PHASE_2_TITLE]\",\n \"description\": \"[PHASE_2_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_2_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_2_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_2_OUTCOME]\"\n }\n ]\n },\n {\n \"number\": 3,\n \"title\": \"[PHASE_3_TITLE]\",\n \"description\": \"[PHASE_3_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_3_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_3_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_3_OUTCOME]\"\n }\n ]\n },\n {\n \"number\": 4,\n \"title\": \"[PHASE_4_TITLE]\",\n \"description\": \"[PHASE_4_DESCRIPTION]\",\n \"details\": [\n {\n \"label\": \"Duration\",\n \"value\": \"[PHASE_4_DURATION]\"\n },\n {\n \"label\": \"Key Activities\",\n \"value\": \"[PHASE_4_ACTIVITIES]\"\n },\n {\n \"label\": \"Outcome\",\n \"value\": \"[PHASE_4_OUTCOME]\"\n }\n ]\n }\n ],\n \"timeline\": [\n {\n \"title\": \"[TIMELINE_1_TITLE]\",\n \"duration\": \"[TIMELINE_1_DURATION]\",\n \"description\": \"[TIMELINE_1_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_2_TITLE]\",\n \"duration\": \"[TIMELINE_2_DURATION]\",\n \"description\": \"[TIMELINE_2_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_3_TITLE]\",\n \"duration\": \"[TIMELINE_3_DURATION]\",\n \"description\": \"[TIMELINE_3_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_4_TITLE]\",\n \"duration\": \"[TIMELINE_4_DURATION]\",\n \"description\": \"[TIMELINE_4_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_5_TITLE]\",\n \"duration\": \"[TIMELINE_5_DURATION]\",\n \"description\": \"[TIMELINE_5_DESCRIPTION]\"\n },\n {\n \"title\": \"[TIMELINE_6_TITLE]\",\n \"duration\": \"[TIMELINE_6_DURATION]\",\n \"description\": \"[TIMELINE_6_DESCRIPTION]\"\n }\n ],\n \"deliverables\": [\n {\n \"title\": \"[DELIVERABLE_1_TITLE]\",\n \"description\": \"[DELIVERABLE_1_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_2_TITLE]\",\n \"description\": \"[DELIVERABLE_2_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_3_TITLE]\",\n \"description\": \"[DELIVERABLE_3_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_4_TITLE]\",\n \"description\": \"[DELIVERABLE_4_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_5_TITLE]\",\n \"description\": \"[DELIVERABLE_5_DESCRIPTION]\"\n },\n {\n \"title\": \"[DELIVERABLE_6_TITLE]\",\n \"description\": \"[DELIVERABLE_6_DESCRIPTION]\"\n }\n ],\n \"ctaLink\": \"[CONSULTATION_BOOKING_LINK]\"\n}"
},
"typeVersion": 1.3
},
{
"id": "b52071e4-6c90-471c-bbec-5f00a5565c4e",
"name": "OpenAI 채팅 모델",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
208,
176
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-4.1-mini"
},
"options": {}
},
"credentials": {
"openAiApi": {
"id": "K0Q1El3xRuLP2fKJ",
"name": "OpenAi account"
}
},
"typeVersion": 1.2
},
{
"id": "62bd86f5-824e-4cbd-b3f6-5403d11a43c5",
"name": "채팅 메시지 수신 시",
"type": "@n8n/n8n-nodes-langchain.chatTrigger",
"position": [
64,
-96
],
"webhookId": "fac5efcd-d65f-4d4b-8ba8-ab989b12fe60",
"parameters": {
"options": {}
},
"typeVersion": 1.1
},
{
"id": "0c947c9a-8509-4fd4-b6f7-530bac41a46a",
"name": "스티커 메모",
"type": "n8n-nodes-base.stickyNote",
"position": [
656,
-320
],
"parameters": {
"color": 6,
"width": 208,
"height": 400,
"content": "## HTML Preset\nUses **JSON** prefill's to dynamically change and produce HTML docs. Perfect for document creation and internet posts."
},
"typeVersion": 1
},
{
"id": "469976df-2f3b-4148-bbc6-cb634d9cd7df",
"name": "스티커 메모1",
"type": "n8n-nodes-base.stickyNote",
"position": [
512,
128
],
"parameters": {
"color": 6,
"width": 176,
"height": 480,
"content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Changeable JSON\nThe **Structured Output** forces the AI model to complete based on your topic/input\n\n\"Ask an AI Model to create based on the HTML Blueprint\"\n"
},
"typeVersion": 1
},
{
"id": "9bb987ff-7009-4b8d-b409-ef54c7cc87ae",
"name": "스티커 메모2",
"type": "n8n-nodes-base.stickyNote",
"position": [
16,
-320
],
"parameters": {
"color": 6,
"width": 208,
"height": 384,
"content": "## Simple Input\nAllow for a small **(one word to one sentence)** input for dynamic connection to other flows.\n\nFeel free to connect to a schedule for regular reports/document.\n"
},
"typeVersion": 1
},
{
"id": "0240213a-e40c-479c-9a1c-abdd488aa6e3",
"name": "스티커 메모3",
"type": "n8n-nodes-base.stickyNote",
"position": [
960,
-400
],
"parameters": {
"color": 6,
"width": 192,
"height": 336,
"content": "## Community PDF Transfer\nUse's a community node to transform the HTML into pdf"
},
"typeVersion": 1
},
{
"id": "8ced81eb-5ac3-4579-b906-3c1b0726f722",
"name": "PDFco API",
"type": "n8n-nodes-pdfco.PDFco Api",
"position": [
1008,
-240
],
"parameters": {
"html": "={{ $json.html }}",
"operation": "URL/HTML to PDF",
"convertType": "htmlToPDF",
"advancedOptions": {}
},
"credentials": {
"pdfcoApi": {
"id": "ksANA37HJ3h632cD",
"name": "PDF.co account"
}
},
"typeVersion": 1
},
{
"id": "3864ba3d-9d8c-4d8a-b82b-5336aa96afe5",
"name": "스티커 메모4",
"type": "n8n-nodes-base.stickyNote",
"position": [
960,
0
],
"parameters": {
"color": 6,
"width": 192,
"height": 368,
"content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Amazon Call\nInvoke a Amazon function to transform HTML to desired formats with greater control"
},
"typeVersion": 1
},
{
"id": "567f203c-5e6d-44c3-8910-49bbcadf1181",
"name": "AWS 업로드",
"type": "n8n-nodes-base.awsS3",
"position": [
1008,
32
],
"parameters": {
"fileName": "={{ $('When chat message received').item.json.chatInput }}",
"operation": "upload",
"binaryData": false,
"bucketName": "interlinkedhtmlhosting",
"fileContent": "={{ $json.html }}",
"additionalFields": {}
},
"credentials": {
"aws": {
"id": "hZxUOC0YMeyBUXOn",
"name": "AWS account"
}
},
"typeVersion": 2
},
{
"id": "1ffd74fa-0bc4-4bba-876a-d60df2359693",
"name": "스티커 메모5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-416,
-336
],
"parameters": {
"width": 352,
"height": 864,
"content": "# Read Me First!\n**This template generates HTML based on predefined JSON inputs**\n\nUse cases are many: You could use this to automate blog post in your chosen HTML structure or even serve clients a custom document via HTTP.\n\nThe real value of this workflow though, is in its inspirational spirit, imagine the documents and branding that could be quickly generated!!\n\n**How It Works**\n+ The chat trigger is designed to accomodate a small amount of text. The chat is a placeholder for another input of yours in which triggers the generation of the JSON output\n+ A LLM of your choice takes the input and comes up with the responses\n+ The output parser is the crux of this flow. The AI Agent is forced to output its response as a JSON in which can be dynamically changed meaning the HTML can be frequently iterated on.\n+ The HTML Preset is used as a static base for your document/blog. This JSON inputs are embedded within the code.\n+The community PDF transfer or AWS upload are entirely for visualisation. The HTML can be pushed and served via AWS or simply downloaded using PDFco\n\n**How to use**\n+ Simple type \"Google\" into the chat or connect your other triggers/outputs\n\n**Requirements**\n+ HTML Preset with interchangeable JSON inputs\n+ PDFco or AWS Account\n\n\n"
},
"typeVersion": 1
}
],
"pinData": {},
"connections": {
"03cec18c-cb05-40d3-8a26-bf6cdc3c99c5": {
"main": [
[
{
"node": "8ced81eb-5ac3-4579-b906-3c1b0726f722",
"type": "main",
"index": 0
},
{
"node": "567f203c-5e6d-44c3-8910-49bbcadf1181",
"type": "main",
"index": 0
}
]
]
},
"a03ad7bd-cbe9-40a5-9ce6-7faf5fa3e811": {
"main": [
[
{
"node": "03cec18c-cb05-40d3-8a26-bf6cdc3c99c5",
"type": "main",
"index": 0
}
]
]
},
"b52071e4-6c90-471c-bbec-5f00a5565c4e": {
"ai_languageModel": [
[
{
"node": "a03ad7bd-cbe9-40a5-9ce6-7faf5fa3e811",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"b16ee4f2-91c2-4f17-8a9e-1a29fe644ad3": {
"ai_outputParser": [
[
{
"node": "a03ad7bd-cbe9-40a5-9ce6-7faf5fa3e811",
"type": "ai_outputParser",
"index": 0
}
]
]
},
"62bd86f5-824e-4cbd-b3f6-5403d11a43c5": {
"main": [
[
{
"node": "a03ad7bd-cbe9-40a5-9ce6-7faf5fa3e811",
"type": "main",
"index": 0
}
]
]
}
}
}자주 묻는 질문
이 워크플로우를 어떻게 사용하나요?
위의 JSON 구성 코드를 복사하여 n8n 인스턴스에서 새 워크플로우를 생성하고 "JSON에서 가져오기"를 선택한 후, 구성을 붙여넣고 필요에 따라 인증 설정을 수정하세요.
이 워크플로우는 어떤 시나리오에 적합한가요?
중급 - 콘텐츠 제작, 멀티모달 AI
유료인가요?
이 워크플로우는 완전히 무료이며 직접 가져와 사용할 수 있습니다. 다만, 워크플로우에서 사용하는 타사 서비스(예: OpenAI API)는 사용자 직접 비용을 지불해야 할 수 있습니다.
관련 워크플로우 추천
AI Tool Node와 GPT-4, DALL-E의 다중 지능체 책 작성 워크플로우 생성
GPT-4.1-mini, DALL-E, Google Drive, AWS S3로 AI 생성 도서 생성
Set
Aws S3
Markdown
+
Set
Aws S3
Markdown
25 노드Trung Tran
콘텐츠 제작
Airtop, GPT-4 Mini 및 Gmail을 사용한 웹사이트 UX 및 SEO 품질 분석
Airtop, GPT-4 Mini 및 Gmail을 사용하여 웹사이트 UX 및 SEO 품질 분석
Set
Code
Html
+
Set
Code
Html
33 노드LukaszB
콘텐츠 제작
블로그 쓰기와 편집기
基于Google Sheets记忆의블로그写作与编辑器 (GPT-4)
If
Code
Filter
+
If
Code
Filter
18 노드Robert Breen
콘텐츠 제작
GPT 실시간 항공편 할인 분석기: 자동 추출, 평가 및 WordPress에 발행
GPT, Google 항공, WordPress 항공 할인 분석기, 기후 데이터 포함
Set
Html
Slack
+
Set
Html
Slack
19 노드Cheng Siong Chin
콘텐츠 제작
Replicate와 OpenAI를 사용하여 얼굴 없는 공포 단편 제작
OpenAI TTS, Replicate 비디오 생성 및 YouTube 업로드로 얼굴 없는 공포 단편 제작
If
Code
Wait
+
If
Code
Wait
50 노드Deb Mukherjee
콘텐츠 제작
Gemini AI, DeepSeek 및 GoAPI를 사용하여 전자상거래에 대한 제품 이미지 및 비디오 생성
Gemini AI, DeepSeek, GoAPI를 사용하여 전자상거래에서 제품 이미지 및 비디오 생성
If
Set
Html
+
If
Set
Html
50 노드Dhruv Dalsaniya
콘텐츠 제작
