Add ChatGPT To Your Website In Minutes (n8n AI Chatbot)

 

1. AI 챗봇 소개 및 기능 시연

본 영상에서는 n8n을 사용하여 AI 챗봇을 구축하는 과정을 소개합니다. 이 챗봇은 웹사이트에 통합되어 사용자 문의에 응답하고 특정 작업을 수행할 수 있습니다. 영상 초반에는 완성된 챗봇의 모습이 시연됩니다. 챗봇은 웹사이트 하단에 위치하며, 사용자는 텍스트를 입력하여 챗봇과 대화할 수 있습니다.

예를 들어, “안녕하세요”라고 입력하면 챗봇은 사용자의 이름과 이메일 주소를 묻도록 프로그래밍되어 있습니다. 챗봇은 사용자의 문의에 따라 다양한 기능을 수행할 수 있습니다. “팀과 상담하고 싶습니다”라고 입력하면 챗봇은 상담 예약을 위한 캘린더 링크를 제공합니다. 더 나아가, “견적서를 보내주세요”와 같은 요청에 대해서도 챗봇은 자동으로 견적서를 생성하여 사용자에게 이메일로 전송할 수 있습니다.

실제로 챗봇에 견적서를 요청하자마자 즉시 이메일이 도착하는 것을 확인할 수 있습니다. 이메일에는 계약서가 첨부되어 있으며, 사용자는 계약 내용을 확인하고 온라인으로 결제 및 서명을 진행할 수 있습니다. 이처럼 n8n을 활용하면 웹사이트 방문자의 문의에 신속하게 응답하고 다양한 업무를 자동화하는 AI 챗봇을 매우 빠르게 구축할 수 있습니다. 영상에서는 이러한 챗봇을 구축하는 두 가지 주요 워크플로우에 대해 설명합니다. 첫 번째는 AI 챗봇 자체이고, 두 번째는 견적서를 생성하고 전송하는 서브 에이전트입니다.

 

2. n8n을 이용한 AI 챗봇 구축 과정

이제 n8n에서 새로운 워크플로우를 열고 AI 챗봇 구축을 시작합니다. n8n은 다양한 트리거를 제공하며, 그중 “Chat Message” 트리거는 챗봇에 특화된 기능을 제공합니다. 이 트리거를 사용하면 n8n 내에서뿐만 아니라 웹사이트에 챗봇을 임베드하여 사용할 수 있습니다. 웹사이트에 챗봇을 임베드하려면 챗봇을 “Publicly Available” 상태로 설정하고 모드를 “Embedded Chat”으로 선택해야 합니다.

임베드 방법에 대한 자세한 내용은 n8n의 설명서를 참고하거나 NPM(Node Package Manager)에서 관련 정보를 얻을 수 있습니다. 일반적으로 웹사이트를 직접 개발하는 개발자들이 NPM을 사용하지만, n8n을 사용하면 코딩 경험이 없어도 챗봇을 웹사이트에 쉽게 통합할 수 있습니다. 웹사이트 빌더(예: WordPress, Wix, Weebly, GoHighLevel 등)를 사용하여 웹사이트를 구축한 경우, n8n에서 제공하는 스크립트를 복사하여 웹사이트에 붙여넣기만 하면 됩니다. 웹사이트 빌더에서 “Code”, “HTML”, “JavaScript” 등의 이름으로 제공되는 코드 삽입 기능을 이용하여 스크립트를 추가할 수 있습니다.

스크립트를 붙여넣을 때 “Production URL” 부분을 n8n챗봇의 URL로 변경해야 합니다. n8n 챗봇의 URL은 챗봇 설정 페이지에서 복사할 수 있습니다. URL을 스크립트에 정확하게 입력하고 저장하면 웹사이트에 챗봇 위젯이 표시됩니다. 하지만 챗봇 위젯을 활성화하기 전에는 “Powered by n8n”이라는 메시지만 표시됩니다. 챗봇을 활성화하려면 n8n 워크플로우를 저장하고 “Active” 상태로 변경해야 합니다. 활성화 후 웹사이트를 새로 고침하면 챗봇이 정상적으로 작동하는 것을 확인할 수 있습니다.

 

3. AI 에이전트 설정 및 시스템 프롬프트 구성

챗봇이 활성화되면 사용자는 챗봇과 대화를 시작할 수 있습니다. 하지만 초기 상태에서는 챗봇이 의미 있는 답변을 제공하지 못하고, 대신 코드 형태의 메시지를 표시할 수 있습니다. 이는 AI 에이전트가 아직 설정되지 않았기 때문입니다. AI 에이전트는 사용자 문의에 응답하고 적절한 작업을 수행하는 핵심 구성 요소입니다. n8n에서 AI 에이전트를 추가하고 필요한 설정을 구성해야 합니다. AI 에이전트는 챗봇 모델, 메모리, 도구 등을 필요로 합니다.

챗봇 모델은 OpenAI와 같은 LLM(Large Language Model)을 사용할 수 있습니다. 메모리는 챗봇이 이전 대화 내용을 기억하고 활용할 수 있도록 지원합니다. 간단한 튜토리얼에서는 “Window Buffer Memory”를 사용하지만, 더 나은 성능을 위해서는 RAG(Retrieval-Augmented Generation) 시스템을 사용하는 것이 좋습니다. RAG 시스템은 챗봇이 방대한 지식 데이터베이스에서 관련 정보를 검색하여 답변을 생성할 수 있도록 합니다. RAG 시스템 구축에 대한 자세한 내용은 n8n 관련 튜토리얼을 참고할 수 있습니다.

AI 에이전트를 설정한 후에는 시스템 프롬프트를 구성해야 합니다. 시스템 프롬프트는 AI 에이전트의 역할, 행동 지침, 사용 가능한 도구 등에 대한 정보를 제공합니다. 시스템 프롬프트를 통해 AI 에이전트가 사용자 문의를 정확하게 이해하고 적절한 답변을 생성하도록 유도할 수 있습니다. 시스템 프롬프트는 “Tool” 섹션과 “Rules” 섹션으로 구성할 수 있습니다. “Tool” 섹션에서는 AI 에이전트가 사용할 수 있는 도구에 대한 정보를 제공합니다. 예를 들어, 견적서 생성 도구, 이미지 생성 도구, 상담 예약 도구 등을 정의할 수 있습니다. “Rules” 섹션에서는 AI 에이전트가 따라야 할 규칙을 정의합니다. 예를 들어, 견적서를 생성하기 전에 반드시 사용자 이름과 이메일 주소를 확인해야 한다는 규칙을 설정할 수 있습니다.

 

4. 견적서 생성 자동화 워크플로우

AI 챗봇의 강력한 기능 중 하나는 견적서 생성 자동화입니다. 챗봇을 통해 사용자에게 견적서를 즉시 전송할 수 있다면, 영업 및 고객 서비스 효율성을 크게 향상시킬 수 있습니다. n8n에서는 이러한 기능을 구현하기 위해 메인 워크플로우와 서브 워크플로우를 연결하는 방식을 사용합니다. 메인 워크플로우는 AI 에이전트가 사용자 문의를 처리하고 적절한 도구를 호출하는 역할을 담당합니다. 서브 워크플로우는 실제로 견적서를 생성하고 전송하는 작업을 수행합니다.

메인 워크플로우에서 “Call Workflow” 도구를 추가하고, 서브 워크플로우로 사용할 “Invoice Workflow”를 선택합니다. “Invoice Workflow” 도구에 대한 설명과 함께, AI 에이전트가 해당 도구를 호출해야 하는 조건을 명시합니다. 예를 들어, “사용자가 견적서 생성을 요청하면 이 도구를 호출하세요”와 같은 설명을 추가할 수 있습니다. 견적서를 생성하기 위해서는 사용자의 이름과 이메일 주소가 필요합니다. 따라서 챗봇은 사용자에게 이름과 이메일 주소를 먼저 묻고, AI를 사용하여 해당 정보를 추출해야 합니다.n8n에서는 이중 중괄호 {{ }} 안에 질문을 입력하여 AI가 답변에서 특정 정보를 추출하도록 지시할 수 있습니다.

예를 들어, {{name?This is the user's name}}과 같이 질문을 입력하면 AI는 답변에서 사용자 이름을 추출하여 “name” 변수에 저장합니다. 추출된 정보는 서브 워크플로우로 전달되어 견적서 생성에 사용됩니다. 견적서 생성은 GoHighLevel과 같은 외부 서비스와 연동하여 자동화할 수 있습니다. n8n에서 HTTP Request 노드를 사용하여 GoHighLevel API에 필요한 정보를 전송하고, GoHighLevel에서는 해당 정보를 기반으로 견적서를 생성합니다. 견적서가 생성되면 GoHighLevel은 n8n에 완료 신호를 다시 전송합니다. n8n은 Execution.resume URL을 사용하여 GoHighLevel로부터 완료 신호를 기다리고, 신호를 받으면 워크플로우를 재개하여 챗봇을 통해 사용자에게 견적서 링크를 전송합니다.