N8N Chat UI: 웹사이트에 연결하는 n8n 챗봇

N8N Chat UI는 n8n 챗봇에 사용할 화면을 시각적으로 만들고 웹사이트에 삽입하는 도구입니다. 이미 작동하는 워크플로가 있거나 직접 설정할 수 있는 개발자, 에이전시, 사이트 운영자가 브랜드에 맞는 채팅 창을 만드는 데 적합합니다.

쉽게 설명하면 어떤 사이트인가요?

n8n을 뒤에서 업무를 처리하는 직원, N8N Chat UI를 방문자가 질문하는 안내 창구라고 생각하면 쉽습니다. 채팅 창은 메시지를 웹훅으로 보내고 워크플로가 반환한 결과를 화면에 표시합니다.

고객 지원, 예약, 문의 수집 기능은 해당 작업이 백엔드에 구성되어 있어야 작동합니다. n8n과 제휴 관계가 없는 독립 제품이며, 화면 디자인만으로 업무 자동화 전체가 만들어지지는 않습니다.

워크플로와 웹사이트를 연결하는 순서

1. Chat Trigger 또는 Webhook을 사용하는 워크플로와 웹사이트 편집 권한을 준비합니다.
2. 채팅 창의 디자인과 표시 방식을 선택하고 미리보기를 확인한 뒤 웹훅을 연결합니다.
3. 일반 응답은 HTTP 200과 올바른 JSON을 반환하고 output 필드에 표시할 텍스트를 넣습니다. 생성된 문장의 따옴표는 JSON 규칙에 맞게 처리해야 합니다.
4. 생성된 삽입 코드를 사이트에 추가합니다. 테스트 메시지를 보내 n8n 실행 결과와 실제 화면 응답을 함께 확인합니다.

백엔드 연결 문서는 사용자 정의 POST 엔드포인트도 설명합니다. WordPress에서는 ChatUI Widget for n8n을 설치하고 활성화한 뒤 Settings → N8N Chat UI에서 Widget ID 또는 웹훅을 저장합니다. 표시하지 않을 페이지도 지정할 수 있습니다.

브랜드 디자인과 활용할 만한 상황

색상, 글꼴, 아바타, 환영 문구와 실행 버튼을 실시간 미리보기로 조정할 수 있습니다. 페이지 안에 고정하는 방식과 떠 있는 팝업 방식 중 선택하며, 모바일 화면과 RTL 레이아웃도 지원합니다.

백엔드가 followUpPrompts를 반환하면 방문자가 누를 수 있는 후속 질문을 표시할 수 있습니다. 여러 창이 같은 워크플로를 공유한다면 세션 키를 설계해 대화 맥락을 구분하세요. 세션 구분 자체가 사용자 권한 검증을 대신하지는 않습니다.

파일·음성·스트리밍은 어디서 처리하나요?

파일 업로드는 형식, 크기, 개수 제한을 설정할 수 있습니다. 파일은 바이너리 데이터로 n8n에 전달되며, 문서 읽기나 저장·분석은 별도 노드로 구현해야 합니다.

음성 입력은 녹음 파일을 전송합니다. 공식 예시는 별도의 음성 인식 서비스로 텍스트를 만든 뒤 에이전트에 전달합니다. 파일이나 음성의 metadata는 JSON 문자열이므로 객체로 사용하려면 먼저 파싱해야 합니다.

스트리밍은 Chat Trigger/Webhook 입력과 AI Agent 출력에서 모두 켜야 합니다. 채팅 창은 설정된 스트림을 감지하지만 프런트엔드 변경만으로 스트리밍이 시작되지는 않습니다.

무료 체험과 두 가지 과금 방식

2026년 10월 28일 확인 기준, 신규 계정은 30일 동안 유효한 Managed 체험 크레딧 100개를 받습니다. 이후에는 선불 크레딧을 구매하며 프록시가 처리하는 메시지 한 건에 크레딧 하나를 사용합니다. 잔액이 없으면 새 메시지 처리가 중단됩니다. 현행 약관상 2026년 10월 5일부터 구매한 유료 크레딧은 만료되지 않으며 이전 구매는 기존 조건이 적용됩니다.

Standalone은 일회성 라이선스가 필요하고 Managed 메시지 크레딧을 쓰지 않습니다. 신규 구매자는 영구 기본 라이선스와 선택적 지원·업데이트 기간을 구분해야 합니다. 현재 요금, 결제 통화와 세금을 확인하고 n8n 운영, 모델 API, 음성 변환 비용은 별도로 계산하세요.

데이터 처리와 도입 전 확인 사항

Standalone은 브라우저에서 웹훅으로 직접 연결하므로 주소가 클라이언트 코드에 드러납니다. Managed는 공급자 프록시를 거쳐 주소를 숨기며 도메인·지역 제한, 요청 속도 제한, 분석과 중앙 설정을 제공합니다.

개인정보 처리방침에 따르면 공급자는 대화 내용을 저장·캐시·로그 기록하지 않습니다. 다만 프록시는 메시지를 실시간 처리하고 설정 및 기술 지표를 보관합니다. 이 설명이 자체 n8n 실행 기록이나 데이터베이스, 모델 공급자의 보관 정책까지 포함하는 것은 아닙니다.

자주 묻는 질문

기존 웹사이트에도 설치할 수 있나요?

네. 삽입 코드나 공식 WordPress 플러그인을 사용합니다. 사이트 수정 권한과 작동하는 백엔드가 필요합니다.

n8n 워크플로까지 자동으로 만들어 주나요?

모델, 데이터 소스와 업무 동작은 n8n 또는 호환 백엔드에서 따로 구성해야 합니다. 이 도구는 화면과 연결을 제공합니다.

무료로 무제한 사용할 수 있나요?

처음 받는 크레딧 100개는 30일 동안 유효합니다. 이후에는 Managed 크레딧이나 Standalone 라이선스와 백엔드 서비스가 필요합니다.

공식 문서와 설정 가이드

• 공식 문서: 기능 설정과 세션 관리.
• WordPress 설치 안내: 설정과 페이지 제외.
• MCP 연결 가이드: OAuth 또는 API 키로 위젯 조회·생성·테마 조정. 테마 변경 도구는 웹훅을 수정하지 않습니다.
• 공식 지원: 계정과 연결 문의.