n8n 웹사이트 챗봇 만들기 — 무료 템플릿에 'Powered By' 링크가 남는 이유
이 글과 연결된 글 보기
드래그로 이동 · 휠/두 손가락으로 확대 · 방향키로 글 선택 · 0으로 맞춤. 실선: 본문 링크, 점선: 시리즈·주제의 대표 연결.표시된 글 7편 목록
n8n.io 공식 템플릿 마켓플레이스에 공개된 이 워크플로우를 가져오면, 웹사이트 방문자와 자연스럽게 대화하고 Outlook 캘린더 예약과 리드 정보 수집까지 처리하는 OpenAI 기반 채팅 위젯을 붙일 수 있습니다. 다만 무료로 쓰는 대가로 위젯 화면에는 제작자의 "Powered By" 어필리에이트 링크가 함께 남습니다.
이 템플릿 하나로 보여줄 수 있는 것
면접에서 "웹사이트에 챗봇 붙여본 적 있나요?"라는 질문을 받으면 대개 "챗GPT API 연결해봤어요" 정도로 끝나기 쉽습니다. 이 템플릿은 그 대화를 조금 더 구체적으로 만들어줍니다. "대화만 하는 게 아니라 캘린더 예약, 리드 수집, 사람에게 넘기기까지 처리하는 위젯을 웹사이트에 붙여봤다"고 말할 수 있기 때문입니다.
짧은 문장이지만 안에 들어간 역량은 세 가지입니다.
- 위젯 임베드 경험 — n8n 워크플로우 뒤에서 동작하는 대화형 UI를 실제 웹사이트에 스크립트 한 줄로 붙여본 경험
- 캘린더 연동 자동화 — 대화 중에 필요하면 Outlook 캘린더 예약까지 이어지는, 대화와 업무 시스템을 연결하는 설계를 다뤄본 경험
- human-in-the-loop 설계 — AI가 끝까지 처리하지 못하는 대화를 사람에게 넘기는 "handoff" 지점을 워크플로우 안에 미리 만들어둔 경험
이 세 가지는 웹사이트 챗봇뿐 아니라 상담 예약 봇, 리드 폼을 대체하는 세일즈 챗봇, 초기 문의를 거르고 필요할 때만 사람에게 연결하는 고객 지원 봇처럼 "대화창 하나로 여러 업무를 잇는" 유형의 자동화 전부에 그대로 쓰입니다.
이 템플릿은 무엇인가
이 워크플로우는 데이터팝콘이 만든 게 아닙니다. n8n 공식 템플릿 마켓플레이스(n8n.io/workflows)에 Create a branded AI-powered website chatbot이라는 이름으로 공개된 템플릿이고, 제작자는 Wayne Simpson입니다. 카테고리는 Support Chatbot과 AI Chatbot으로 등록돼 있습니다.
공식 설명은 "OpenAI가 구동하는 지능형 채팅 위젯으로 웹사이트 방문자와 소통하게 해준다"는 한 문장과 함께 기능 네 가지를 불릿으로 나열합니다. 자연스러운 대화 처리, Microsoft Outlook 캘린더 연동, 리드 캡처와 정보 수집, 그리고 사람에게 넘기는 human handoff 기능입니다. 이어서 "웹사이트에 자바스크립트 스니펫 하나만 추가하고 워크플로우를 필요에 맞게 설정하면 된다"면서 "자세한 설정 가이드를 따르면 몇 분 안에 시작할 수 있다"고 안내합니다.
문제는 이 "자세한 설정 가이드"의 실제 내용이 템플릿 페이지 어디에도 노출돼 있지 않다는 점입니다. 번호가 매겨진 "How it works"나 "Setup" 섹션 없이, 위 기능 불릿 네 개와 문장 두 개가 공식 텍스트의 전부입니다. 그래서 아래 구조·만들기 섹션은 그 가이드를 옮긴 게 아니라, 공개된 기능 설명과 템플릿 카드에 표시된 노드 정보, 그리고 실제로 템플릿 페이지의 캔버스 미리보기를 열어 육안으로 확인한 앞부분 두 노드만으로 재구성한 내용입니다. 확인되지 않은 부분은 확인되지 않았다고 그대로 밝힙니다.
n8n 설치나 기본 노드 조작법은 n8n으로 반복업무 자동화 포트폴리오 만들기에 정리돼 있으니, 이 글은 이 템플릿의 구조 자체에 집중합니다.
구조 — Trigger / Task / Target
템플릿 카드 상단의 노드 아이콘 요약에는 HTTP Request, If, Edit Fields (Set) 세 가지 이름이 보이고, 총 15개 노드 중 나머지 12개는 이름이 표시되지 않습니다. 직접 템플릿 페이지의 캔버스 미리보기를 열어보면, 가장 왼쪽 시작 노드는 Chat Trigger이고 그 다음이 true·false 두 갈래로 갈라지는 If 노드입니다. If라는 이름은 카드 요약과 캔버스 양쪽에서 똑같이 확인돼, 적어도 이 부분은 서로 어긋나지 않습니다.
- Trigger — 캔버스의 시작 노드는 Chat Trigger인데, 노드 이름 아래에 "(Deactivated)"라는 표시가 붙어 있습니다. n8n에서는 노드를 하나씩 개별적으로 비활성화할 수 있고, 그렇게 꺼둔 노드는 캔버스에서 흐리게 표시되며 이름 아래에 이 문구가 붙습니다. 즉 이 템플릿은 n8n 내장 채팅 트리거를 기본값으로 켜두지 않았다는 뜻인데, 왜 꺼두었는지, 실제 진입점이 무엇인지는 공식 텍스트에 설명이 없어 확인되지 않습니다.
- Task — If 노드가 true·false로 갈라진 뒤, 카드 요약에 있는 HTTP Request와 Edit Fields (Set)를 포함한 나머지 노드들이 대화 처리, Outlook 캘린더 예약, 리드 정보 저장, human handoff 알림 중 일부를 나눠 맡는 것으로 보입니다. 다만 어떤 노드가 정확히 무엇을 하는지, HTTP Request가 OpenAI API를 부르는 것인지 다른 서비스를 부르는 것인지는 공개된 정보만으로 확정할 수 없습니다.
- Target — 최종적으로 답변이 웹사이트 위젯의 대화창에 표시됩니다. 필요한 경우 캘린더 예약이 확정되거나, 리드 정보가 어딘가에 저장되거나, 대화가 사람에게 넘어가는 결과로도 이어질 것으로 보이지만 이 역시 노드 단위로는 확인되지 않았습니다.
기능 불릿이 네 개인데 확인된 노드는 이름 기준으로 네 개뿐이라는 격차 자체가, 이 템플릿을 가져다 쓰려면 임포트 후 캔버스를 직접 열어 노드 하나하나를 확인하는 과정이 필수라는 뜻이기도 합니다.
만들기
공식 페이지에는 번호가 매겨진 Setup 단계가 없고, 안내된 "자세한 설정 가이드"도 내용이 공개돼 있지 않습니다. 그래서 이 섹션은 그 가이드를 따라가는 게 아니라, 확인된 기능 네 가지와 위젯 임베드 방식이라는 사실만으로 실습 순서를 구성한 것입니다.
1. OpenAI 크리덴셜 준비
공식 설명이 "OpenAI가 구동한다"고 명시하고 있으므로, 대화 처리를 맡는 노드 어딘가에는 OpenAI API 키가 필요합니다. 먼저 발급해두고 템플릿을 열었을 때 이 키를 요구하는 노드부터 찾아 연결하는 순서가 됩니다.
2. Outlook 캘린더 연동 여부 정하기
캘린더 예약 기능을 쓰려면 Microsoft 계정 크리덴셜이 필요할 것으로 보이지만, 정확히 어떤 인증 방식을 쓰는지는 공식 텍스트에 나와 있지 않습니다. 이 기능이 당장 필요 없다면 관련 노드를 비활성화하고 나머지 구조만 먼저 검증하는 편이 안전합니다.
3. 리드 캡처 저장소 확인
"리드 캡처와 정보 수집"이라는 기능이 있다는 것만 확인되고, 수집한 정보를 어디에 저장하는지(구글시트인지, CRM인지, 다른 데이터베이스인지)는 공개돼 있지 않습니다. 템플릿을 자신의 n8n 인스턴스로 가져온 뒤 이름 미표시 노드들을 하나씩 열어 어떤 서비스로 연결돼 있는지부터 확인해야 합니다.
4. human handoff 채널 확인
사람에게 넘기는 기능이 있다는 것도 불릿에만 적혀 있고, 슬랙인지 이메일인지 어떤 채널로 알림이 가는지는 확인되지 않습니다. 임포트 후 이 부분을 먼저 열어보고, 필요하면 자신이 쓰는 채널로 바꿔야 합니다.
5. 위젯 스니펫을 웹사이트에 삽입하고 Chat Trigger부터 점검
공식 설명대로 자바스크립트 스니펫 하나를 웹사이트에 추가하면 위젯이 뜹니다. 다만 구조 섹션에서 본 대로 캔버스의 Chat Trigger 노드가 템플릿 안에서 비활성화 상태로 들어있으므로, 스니펫을 붙이기 전에 이 노드를 열어 실제로 위젯이 어느 노드를 향해 요청을 보내는 구조인지부터 확인하고, 필요하면 활성화한 뒤 워크플로우 자체도 Active로 켜야 합니다.
주의할 점 · 제약
공식 페이지에서 확인되는 제약을 그대로 옮기면 이렇습니다.
- 위젯에 "Powered By" 어필리에이트 링크가 남습니다. 공식 페이지는 "Note: Widget includes a 'Powered By' affiliate link"라고 명시합니다. 무료로 쓰는 위젯이 클라이언트 웹사이트에도 제작자의 브랜딩·어필리에이트 링크를 그대로 노출한다는 뜻입니다. 포트폴리오용으로 만드는 정도라면 크게 문제되지 않지만, 실제 클라이언트 프로젝트에 이 위젯을 그대로 납품한다면 이 링크가 남는다는 사실을 미리 고지해야 합니다.
- 번호 매겨진 Setup 가이드가 없습니다. "자세한 설정 가이드를 따르라"고 안내는 하지만 그 가이드 자체가 이 템플릿 페이지에는 실려 있지 않습니다. 정확한 설정 순서는 템플릿을 직접 열어 노드를 하나씩 확인해야 알 수 있습니다.
- 노드 15개 중 이름이 확인되는 건 4개뿐입니다. 카드 요약과 캔버스 미리보기로 확인할 수 있는 건 Chat Trigger, If, HTTP Request, Edit Fields (Set)이고, 나머지 11개는 임포트 전까지 알 수 없습니다.
- 캘린더·리드 저장·핸드오프 채널의 구체적인 연동 대상이 불명합니다. 기능이 있다는 것만 확인되고, 어떤 서비스·어떤 채널을 쓰는지는 직접 열어봐야 합니다.
포트폴리오·면접 포인트
포트폴리오에는 위젯이 웹사이트에 뜬 화면과 실제 대화가 오가는 장면 캡처면 충분합니다. 이때 위젯 하단의 "Powered By" 배지를 굳이 잘라내지 말고 그대로 남겨두는 편을 권합니다. 이 제약을 알고 쓴 사람과 모르고 쓴 사람은 다음 질문에서 바로 갈리기 때문입니다.
면접에서 "이 위젯을 클라이언트 프로젝트에 그대로 쓸 수 있나요?"라는 질문이 나올 수 있습니다. 정직한 답은 무료로 쓰는 대신 위젯에 제작자의 어필리에이트 링크가 남는다는 공식 제약이 있고, 그래서 클라이언트에게 납품하기 전에 이 제약을 미리 알리거나, 화이트라벨이 필요하다면 위젯 프론트엔드를 직접 만드는 대안까지 검토했다고 말하는 것입니다. 노드 이름을 나열하는 대신 이런 제약과 대안을 스스로 짚어낼 수 있으면, 템플릿을 그대로 가져다 쓴 사람과 구조를 이해한 사람이 갈립니다.
다음 액션
다음 편에서는 다시 이메일 자동화로 돌아가, Gmail 메일함에 OpenAI로 자동 라벨을 붙이는 템플릿을 다룹니다. 이번 편에서 본 Outlook 연동과 달리 Gmail API를 직접 쓰고, 지금까지 다룬 로컬 LLM(Ollama) 조합과도 다르게 OpenAI를 그대로 쓰는 구성이라 서비스 조합을 비교하며 볼 수 있습니다.
