n8n 환경에서 챗봇 위젯 웹페이지 구성하기

n8n 환경에서 새로운 서비스 웹페이지 구성하기 : 나만의 웹스타일 구축

n8n은 강력한 워크플로우 자동화 플랫폼으로, AI Agent와 결합하면 다양한 대화형 서비스를 구축할 수 있습니다. 하지만 n8n이 기본 제공하는 Chat UI는 커스터마이징에 한계가 있어, 브랜드 아이덴티티를 반영하거나 사용자 경험을 개선하기 어렵습니다. 이 글에서는 기존 n8n Docker 인프라에 정적 웹페이지 서빙 기능을 추가하여, 나만의 스타일이 적용된 챗봇 서비스 페이지를 구축하는 방법을 안내합니다.

특히 이 가이드는 n8n Queue Mode로 운영 중인 환경에서 Nginx 리버스 프록시를 활용하여 추가 컨테이너 없이 정적 파일을 서빙하는 방법에 초점을 맞추고 있습니다. 한글 환경에 최적화된 Noto Sans KR 폰트 적용, 색상 테마 변경, 환영 메시지 커스터마이징 등 실무에서 바로 활용할 수 있는 내용을 담았습니다.

목 차

1. 왜 커스텀 웹페이지가 필요한가

n8n의 'When chat message received' 트리거를 사용하면 /webhook/{id}/chat 형태의 Chat URL이 자동으로 생성됩니다. 이 URL로 접속하면 n8n이 제공하는 기본 채팅 인터페이스를 통해 AI Agent와 대화할 수 있어, 별도의 프론트엔드 개발 없이도 서비스를 빠르게 프로토타이핑할 수 있습니다. 하지만 실제 서비스 운영 환경에서는 몇 가지 한계에 부딪히게 됩니다.

기본 Chat UI의 한계점

첫째, 폰트 커스터마이징의 어려움입니다. 기본 Chat Widget의 CSS 변수 --chat--font-family가 Segoe UI를 우선으로 지정하고 있어, 한글 환경에서 가독성이 떨어집니다. 특히 한글과 영문이 섞인 텍스트에서 글자 크기와 자간이 미묘하게 달라 전문적인 느낌이 감소합니다.
둘째, 브랜드 아이덴티티 반영의 한계입니다. 기업이나 서비스의 색상 테마, 로고, 환영 메시지 등을 자유롭게 변경하기 어렵습니다. n8n 서버 코드를 직접 수정하지 않는 한, 제공되는 옵션 내에서만 조정이 가능합니다.
셋째, 추가 기능 구현의 제약입니다. 사용 가이드, 예시 질문 버튼, 피드백 수집 폼 등 사용자 경험을 개선하는 추가 요소를 넣기 어렵습니다.

커스텀 웹페이지 접근법의 장점

n8n Chat Widget은 JavaScript 모듈(chat.bundle.es.js)과 스타일시트(style.css)로 분리되어 제공됩니다. 이를 활용하면 자체 HTML 페이지에서 Chat Widget을 임베드하고, CSS 변수를 오버라이드하여 원하는 스타일을 적용할 수 있습니다. 기존 n8n 인프라의 Nginx를 활용하면 추가 서버 구성 없이도 이러한 커스텀 페이지를 서빙할 수 있어 매우 효율적입니다.

2. 시스템 아키텍처 이해하기

구현에 앞서 전체 시스템 구조를 이해하는 것이 중요합니다. 아래 다이어그램은 n8n Queue Mode 환경에서 커스텀 챗봇 웹페이지가 어떻게 동작하는지를 보여줍니다.

전체 아키텍처 다이어그램

이 아키텍처의 핵심은 Nginx가 URL 경로에 따라 세 가지 다른 방식으로 요청을 처리한다는 점입니다. /chatbot 경로는 정적 파일을 직접 서빙하고, /webhook/* 경로는 웹훅 처리 컨테이너로 로드밸런싱하며, 나머지 모든 요청은 n8n 메인 인스턴스로 프록시합니다. 이를 통해 추가 컨테이너 없이 기존 인프라만으로 커스텀 웹페이지를 제공할 수 있습니다.

요청 흐름 상세 설명

사용자가 브라우저에서 URL에 접속하면, Nginx가 URL 경로에 따라 요청을 적절한 대상으로 라우팅합니다. 아래 다이어그램은 /chatbot 경로로 접속했을 때의 전체 흐름을 단계별로 보여줍니다.

Step 1 (페이지 요청): 사용자가 https://domain.com/chatbot으로 접속하면 요청이 Nginx로 전달됩니다.
Step 2 (Nginx 라우팅): Nginx는 URL 경로를 확인하고 /chatbot이 매칭되면 정적 파일 서빙 모드로 동작합니다. /webhook/* 경로는 로드밸런서로, 그 외 경로는 n8n 메인으로 프록시됩니다.
Step 3 (HTML 응답): Nginx가 마운트된 볼륨에서 index.html 파일을 읽어 브라우저로 전송합니다. 이 HTML에는 Noto Sans KR 폰트, CSS 변수 오버라이드, n8n Chat Widget 임베드 코드가 포함되어 있습니다.
Step 4 (채팅 연결): 브라우저에서 Chat Widget이 로드되면 WebSocket을 통해 /webhook/{id}/chat 엔드포인트에 연결됩니다. 이후 사용자 메시지는 웹훅 컨테이너 → Redis 큐 → Worker 순으로 처리되어 AI Agent 응답이 생성됩니다.

핵심 구성 요소 설명

구성요소	역할	포트
Nginx	SSL 종료, 리버스 프록시, 정적 파일 서빙	80, 443
n8n (Main)	워크플로우 편집 UI, API, Chat 리소스 제공	5678
n8n-webhook-1, 2	웹훅 요청 처리 (로드밸런싱)	5678
n8n-worker	백그라운드 작업 실행 (AI Agent 포함)	-
Redis	작업 큐, 세션 관리	6379
PostgreSQL	워크플로우, 실행 이력 저장	5432

3. 구현 환경 및 사전 준비

운영 환경

이 가이드는 다음과 같은 환경을 기준으로 작성되었습니다. 다른 환경에서도 Docker Compose를 사용한다면 유사하게 적용할 수 있습니다.

항목	상세
호스트 시스템	Mac Mini (macOS)
컨테이너 런타임	Docker Desktop
n8n 버전	1.123.5
n8n 운영 모드	Queue Mode (worker 분리)
도메인	play.domain.com (예시)
SSL	Sectigo Wildcard SSL

프로젝트 구조

구현 전 최종 디렉토리 구조를 먼저 확인합니다. 기존 n8n-queue-stack에 chatbot 폴더와 Nginx 설정 파일을 추가하는 형태입니다.

n8n-queue-stack/
├── docker-compose.yml          # Docker Compose 설정
├── .env                        # 환경 변수
├── nginx/
│   ├── conf.d/
│   │   └── default.conf        # Nginx 설정 (수정) 
│   └── ssl/
│       ├── fullchain.pem       # SSL 인증서
│       └── privkey.pem         # SSL 개인키
└── chatbot/                    # 새로 추가
    └── index.html              # 커스텀 챗봇 페이지

4. 단계별 구현 가이드

1단계: 디렉토리 생성

먼저 커스텀 챗봇 파일을 저장할 디렉토리를 생성합니다.

# n8n-queue-stack 디렉토리로 이동
cd ~/path/to/n8n-queue-stack

# chatbot 디렉토리 생성
mkdir -p ./chatbot

# nginx 설정 디렉토리 확인 (없으면 생성)/ 기존 설정파일이 nginx.conf였다면, 새로 생성하지 않으셔도 됩니다.
mkdir -p ./nginx/conf.d

nginx 설정 파일 : 기존에 nginx/nginx.conf를 사용하고 있었다면, 기존의 설정파일을 그대로 사용하는 것을 추천드립니다. 새롭게 파일을 분리하여 설정하는 노력은 굳이 하지 않으셔도 됩니다.

2단계: 커스텀 챗봇 HTML 파일 생성

./chatbot/index.html 파일을 생성합니다. 이 파일이 커스텀 챗봇 UI의 핵심입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>일정관리 챗봇</title>
  
  <!-- Noto Sans KR 폰트 로드 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
  
  <!-- n8n Chat 스타일 -->
  <link href="/chat/style.css" rel="stylesheet">
  
  <!-- 파비콘 -->
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📅</text></svg>">
  
  <style>
    /* ========================================
       CSS 변수 오버라이드 - 폰트 및 테마
       ======================================== */
    :root {
      /* 폰트 설정 - Noto Sans KR 우선 적용 */
      --chat--font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif !important;
      
      /* 색상 테마 - 원하는 색상으로 수정 가능 */
      --chat--color-primary: #4f46e5;
      --chat--color-primary-shade-50: #4338ca;
      --chat--color-primary-shade-100: #3730a3;
      --chat--color-secondary: #818cf8;
      --chat--color-secondary-shade-50: #6366f1;
      --chat--color-white: #ffffff;
      --chat--color-light: #f8fafc;
      --chat--color-light-shade-50: #f1f5f9;
      --chat--color-light-shade-100: #e2e8f0;
      --chat--color-medium: #94a3b8;
      --chat--color-dark: #1e293b;
      --chat--color-disabled: #cbd5e1;
      --chat--color-typing: #64748b;
      
      /* 모서리 둥글기 */
      --chat--border-radius: 12px;
      --chat--textarea--border-radius: 8px;
      
      /* 메시지 스타일 */
      --chat--message--padding: 12px 16px;
      --chat--message--border-radius: 16px;
    }
    
    /* 전역 폰트 강제 적용 */
    *, *::before, *::after {
      font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;
    }
    
    /* 기본 스타일 */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-color: var(--chat--color-light);
      font-family: 'Noto Sans KR', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* 메시지 가독성 개선 */
    .n8n-chat .chat-message {
      font-size: 15px;
      line-height: 1.6;
      letter-spacing: -0.01em;
    }
    
    /* 입력창 스타일 */
    .n8n-chat textarea {
      font-size: 15px;
      line-height: 1.5;
    }
    
    /* 스크롤바 스타일 (웹킷 브라우저) */
    ::-webkit-scrollbar {
      width: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: var(--chat--color-medium);
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--chat--color-dark);
    }
  </style>
</head>
<body>
  <script type="module">
    import { createChat } from '/chat/chat.bundle.es.js';
    
    createChat({
      // 실제 웹훅 URL로 변경 필요
      webhookUrl: 'https://play.domain.com/webhook/workflow-id/chat',
      mode: 'fullscreen',
      showWelcomeScreen: true,
      initialMessages: [
        '안녕하세요! 일정 관리 챗봇 CINDY입니다.',
        'Google Calendar의 일정을 조회, 추가, 수정, 삭제할 수 있어요. 무엇을 도와드릴까요?'
      ],
      i18n: {
        ko: {
          title: '일정관리 챗봇  |  CINDY',
          subtitle: '자연어로 Google Calendar를 관리하세요',
          inputPlaceholder: '예: 내일 오후 3시에 팀 회의 추가해줘',
          getStarted: '대화 시작하기',
          closeButtonTooltip: '채팅 닫기',
          footer: ''
        }
      }
    });
  </script>
  
  <noscript>
    <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Noto Sans KR', sans-serif;">
      <p>이 챗봇을 사용하려면 JavaScript를 활성화해주세요.</p>
    </div>
  </noscript>
</body>
</html>

주요 커스터마이징 포인트

항목	설명	위치
폰트	--chat--font-family 변수로 지정	CSS :root
색상 테마	--chat--color-* 변수들로 조정	CSS :root
환영 메시지	initialMessages 배열	JavaScript
UI 텍스트	i18n.ko 객체	JavaScript
웹훅 URL	webhookUrl 속성	JavaScript

3단계: Nginx 설정 파일 수정

일반적인 Nginx 설정 구조

nginx/
├── nginx.conf              # 메인 설정 (전역 설정, worker 등)
└── conf.d/
    └── default.conf        # 서버 블록 설정 (사이트별 설정)

두 파일의 역할

파일	역할	포함 내용
nginx.conf	메인 설정	worker 수, 로그 경로, include conf.d/*.conf
conf.d/default.conf	사이트 설정	server 블록, location 블록, upstream

현재 상황 확인 필요

기존 nginx/nginx.conf 파일의 내용에 따라 방법이 달라집니다.

Case 1: nginx.conf에 server 블록이 직접 있는 경우

# nginx.conf 내부에 server { } 블록이 있음
http {
    server {
        listen 443 ssl;
        location / {
            proxy_pass http://n8n:5678;
        }
    }
}

→ nginx.conf를 직접 수정하면 됩니다.

Case 2: nginx.conf가 conf.d를 include하는 경우

# nginx.conf
http {
    include /etc/nginx/conf.d/*.conf;
}

→ conf.d/default.conf를 생성/수정하면 됩니다.

권장 방법 : 기존 nginx.conf에 추가

기존 구조를 유지하면서 /chatbot location만 추가하는 것이 가장 안전합니다.

기존 nginx.conf의 server { } 블록 추가

## 기존 server 블록 내부에 추가
server {
    listen 443 ssl;
    # ... 기존 SSL 설정 ...

    # ========================================
    # [추가] 커스텀 챗봇 페이지 - 정적 파일 서빙
    # ========================================
    location /chatbot {
        alias /usr/share/nginx/html/chatbot;
        index index.html;
        try_files $uri $uri/ /chatbot/index.html;
        expires 1h;
        add_header Cache-Control "public, no-transform";
    }

    # ... 기존 location 블록들 (/, /webhook 등) ...
}

## 디렉토리 구조
```
n8n-queue-stack/
├── docker-compose.yml
├── nginx/
│   ├── nginx.conf          # 여기에 location /chatbot 추가
│   └── ssl/
│       ├── wildcard_peaknine_io.crt
│       └── wildcard_peaknine_io.key
└── chatbot/                 # 새로 생성
    └── index.html

docker-compose.yml 볼륨 추가

nginx:
  image: nginx:alpine
  volumes:
    - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro    # 기존 유지
    - ./nginx/ssl:/etc/nginx/ssl:ro                   # 기존 유지
    - ./chatbot:/usr/share/nginx/html/chatbot:ro      # 추가

./nginx/conf.d/default.conf파일을 생성한 경우

./nginx/conf.d/default.conf 파일을 수정하여 /chatbot 경로에 대한 정적 파일 서빙을 추가합니다. 아래는 정적 파일 서빙과 관련된 핵심 설정 부분입니다.

# ========================================
# Upstream 설정
# ========================================
upstream n8n_backend {
    server n8n:5678;
}

upstream n8n_webhooks {
    server n8n-webhook-1:5678;
    server n8n-webhook-2:5678;
}

# ========================================
# HTTPS 서버 설정
# ========================================
server {
    listen 443 ssl;
    http2 on;
    server_name play.peaknine.io;
    
    # SSL 인증서 설정
    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    
    # SSL 보안 설정
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;
    
    # Gzip 압축
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
    
    # ========================================
    # [핵심] 커스텀 챗봇 페이지 - 정적 파일 서빙
    # ========================================
    location /chatbot {
        alias /usr/share/nginx/html/chatbot;
        index index.html;
        try_files $uri $uri/ /chatbot/index.html;
        
        # 캐싱 설정 (1시간)
        expires 1h;
        add_header Cache-Control "public, no-transform";
    }
    
    # ========================================
    # n8n 웹훅 - 로드밸런싱
    # ========================================
    location ~ ^/webhook(-test)?/ {
        proxy_pass http://n8n_webhooks;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 300s;
        proxy_buffering off;
    }
    
    # ========================================
    # n8n Chat 정적 리소스 (JS, CSS)
    # ========================================
    location /chat/ {
        proxy_pass http://n8n_backend;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        expires 1d;
    }
    
    # ========================================
    # n8n 메인 (UI, API)
    # ========================================
    location / {
        proxy_pass http://n8n_backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_buffering off;
    }
}

Nginx 설정 핵심 포인트

정적 파일 서빙을 위한 /chatbot location 블록이 이 구성의 핵심입니다. 각 지시어의 역할을 살펴보겠습니다.

location /chatbot {
    alias /usr/share/nginx/html/chatbot;  # 실제 파일 경로 매핑
    index index.html;                      # 기본 파일 지정
    try_files $uri $uri/ /chatbot/index.html;  # SPA 지원
    expires 1h;                            # 브라우저 캐시 설정
}

지시어	설명
alias	URL 경로를 파일시스템 경로로 매핑합니다. /chatbot으로 접속하면 /usr/share/nginx/html/chatbot 디렉토리를 참조합니다.
index	디렉토리 접근 시 기본으로 서빙할 파일을 지정합니다.
try_files	요청된 파일이 없으면 index.html로 폴백합니다. SPA(Single Page Application) 라우팅을 지원합니다.
expires	브라우저 캐싱 기간을 설정합니다. 개발 중에는 짧게, 운영 환경에서는 길게 설정합니다.

4단계: docker-compose.yml 볼륨 설정 추가

docker-compose.yml의 nginx 서비스에 chatbot 디렉토리 마운트를 추가합니다. 기존 설정에서 volumes 부분만 수정하면 됩니다.

services:
  nginx:
    image: nginx:alpine
    container_name: n8n-nginx
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      # Nginx 설정 파일
      - ./nginx/conf.d:/etc/nginx/conf.d:ro
      # SSL 인증서
      - ./nginx/ssl:/etc/nginx/ssl:ro
      # [추가] 커스텀 챗봇 정적 파일
      - ./chatbot:/usr/share/nginx/html/chatbot:ro
    depends_on:
      - n8n
      - n8n-webhook-1
      - n8n-webhook-2
    networks:
      - n8n-network

볼륨 마운트에서 :ro 옵션은 읽기 전용(read-only)을 의미합니다. 정적 파일은 컨테이너 내부에서 수정할 필요가 없으므로, 보안을 위해 읽기 전용으로 마운트하는 것이 좋습니다.

5. 배포 및 테스트

설정 검증 및 배포

모든 파일을 준비한 후, 다음 순서로 배포를 진행합니다.

# 1. 디렉토리 이동
cd ~/path/to/n8n-queue-stack

# 2. 파일 구조 확인
ls -la ./chatbot/
ls -la ./nginx/conf.d/

# 3. Nginx 설정 문법 검사
docker compose exec nginx nginx -t

# 4. 변경사항 적용 (Nginx만 재시작)
docker compose up -d nginx

# 5. 로그 확인
docker compose logs -f nginx

만약 Nginx 컨테이너가 아직 실행되지 않은 상태라면, 전체 스택을 재시작합니다.

docker compose down
docker compose up -d

테스트 체크리스트

배포 후 다음 항목들을 확인합니다.

테스트항목	URL	예상결과
커스텀 챗봇 페이지	https://your-domain.com/chatbot	Noto Sans KR 폰트가 적용된 챗봇 UI
기존 n8n UI	https://your-domain.com	n8n 워크플로우 편집 화면
웹훅 동작	챗봇에서 메시지 전송	AI Agent 응답 수신

폰트 적용 확인 방법

브라우저 개발자 도구(F12)를 열고 다음을 확인합니다.

Network 탭: Noto+Sans+KR 폰트 파일이 정상 로드되는지 확인합니다.
Elements 탭: 채팅 메시지 요소를 선택하고 Computed Styles에서 font-family가 'Noto Sans KR'로 표시되는지 확인합니다.
Console 탭: JavaScript 에러가 없는지 확인합니다.

n8n Queue Mode에서 새로운 페이지를 생성해 /chatbot 위젯 페이지를 서빙하고 있습니다.

6. 문제 해결 가이드

404 Not Found 에러

커스텀 챗봇 페이지에 접속했을 때 404 에러가 발생하는 경우입니다.

# chatbot 디렉토리 마운트 확인
docker compose exec nginx ls -la /usr/share/nginx/html/chatbot/

# index.html 파일 존재 확인
docker compose exec nginx cat /usr/share/nginx/html/chatbot/index.html | head -20

파일이 보이지 않는다면 docker-compose.yml의 volumes 설정을 확인하고, 컨테이너를 재시작합니다.

Nginx 설정 오류

Nginx가 시작되지 않거나 502 에러가 발생하는 경우입니다.

# 설정 문법 검사
docker compose exec nginx nginx -t

# 에러 로그 확인
docker compose logs nginx | grep -i error

설정 파일의 문법 오류를 수정한 후 docker compose restart nginx로 재시작합니다.

WebSocket 연결 실패

채팅 메시지를 보냈는데 응답이 없거나 연결 끊김 에러가 발생하는 경우입니다.

# WebSocket 프록시 설정 확인
docker compose exec nginx cat /etc/nginx/conf.d/default.conf | grep -A 3 "Upgrade"

proxy_set_header Upgrade와 proxy_set_header Connection "upgrade" 설정이 웹훅 location 블록에 포함되어 있는지 확인합니다.

폰트가 적용되지 않음

페이지는 정상적으로 로드되지만 폰트가 여전히 기본 폰트로 표시되는 경우입니다.

Google Fonts CDN 접근이 차단되어 있지 않은지 확인합니다.
CSS의 !important 선언이 올바르게 적용되어 있는지 확인합니다.
브라우저 캐시를 삭제하고 새로고침합니다(Ctrl+Shift+R 또는 Cmd+Shift+R).

7. 추가 커스터마이징 옵션

기본 구성이 완료되었다면, 다양한 방식으로 챗봇 UI를 더욱 개선할 수 있습니다.

색상 테마 변경

CSS 변수를 수정하여 브랜드 색상을 적용합니다. 아래는 몇 가지 테마 예시입니다.

/* 그린 테마 */
:root {
  --chat--color-primary: #059669;
  --chat--color-primary-shade-50: #047857;
  --chat--color-secondary: #34d399;
}

/* 오렌지 테마 */
:root {
  --chat--color-primary: #ea580c;
  --chat--color-primary-shade-50: #c2410c;
  --chat--color-secondary: #fb923c;
}

/* 다크 테마 */
:root {
  --chat--color-light: #1e293b;
  --chat--color-dark: #f8fafc;
  --chat--color-light-shade-50: #334155;
}

환영 메시지 커스터마이징

JavaScript의 createChat 옵션에서 초기 메시지와 UI 텍스트를 수정합니다.

createChat({
  webhookUrl: 'https://your-domain.com/webhook/xxx/chat',
  initialMessages: [
    '안녕하세요! 무엇을 도와드릴까요?',
    '아래 예시를 참고하여 질문해 주세요:',
    '• "오늘 일정 알려줘"\n• "내일 오후 2시에 미팅 추가해줘"\n• "이번 주 일정 정리해줘"'
  ],
  i18n: {
    ko: {
      title: 'AI 비서',
      subtitle: '24시간 도움을 드립니다',
      inputPlaceholder: '무엇이든 물어보세요...',
      getStarted: '시작하기'
    }
  }
});

추가 페이지 확장

chatbot 디렉토리에 여러 HTML 파일을 추가하여 다양한 서비스 페이지를 구성할 수 있습니다.

chatbot/
├── index.html          # 메인 챗봇
├── calendar/
│   └── index.html      # 캘린더 전용 챗봇
├── support/
│   └── index.html      # 고객지원 챗봇
└── assets/
    ├── logo.png        # 로고 이미지
    └── custom.css      # 공통 스타일

각 페이지는 다른 웹훅 URL과 다른 스타일을 가질 수 있어, 용도별로 분리된 챗봇 서비스를 운영할 수 있습니다.

마무리

이 가이드에서는 n8n Queue Mode 환경의 기존 Nginx 인프라를 활용하여 커스텀 챗봇 웹페이지를 구성하는 방법을 살펴보았습니다. 핵심은 Nginx의 정적 파일 서빙 기능을 활용하여, 추가 컨테이너 없이 나만의 스타일이 적용된 서비스 페이지를 제공하는 것입니다.

이 방식의 장점을 정리하면 다음과 같습니다.

첫째, 인프라 효율성입니다. 기존 Nginx 컨테이너를 그대로 활용하므로 추가 리소스가 필요하지 않습니다.
둘째, 유연한 커스터마이징입니다. HTML, CSS, JavaScript를 자유롭게 수정하여 브랜드 아이덴티티를 반영할 수 있습니다.
셋째, 유지보수 용이성입니다. 정적 파일만 수정하면 되므로, n8n 업그레이드와 독립적으로 UI를 관리할 수 있습니다.
넷째, 확장 가능성입니다. 동일한 방식으로 여러 챗봇 페이지나 랜딩 페이지를 추가할 수 있습니다.

n8n의 강력한 자동화 기능과 커스텀 UI를 결합하면, 전문 개발팀 없이도 완성도 높은 AI 챗봇 서비스를 구축할 수 있습니다. 이 가이드가 여러분의 프로젝트에 도움이 되길 바랍니다.

주요 키워드

키워드 유형	키워드
메인 키워드	n8n 챗봇 커스터마이징, n8n 웹페이지 구성
서브 키워드	n8n Nginx 정적 파일 서빙, n8n Chat Widget 폰트 변경
롱테일 키워드	n8n Docker 환경에서 커스텀 챗봇 만들기, n8n Queue Mode Nginx 설정

저작자표시 비영리 변경금지 (새창열림)

'AI 활용' 카테고리의 다른 글

n8n에서 Browserless로 쇼핑몰 리뷰(동적페이지) 크롤링하기 (1)	2025.12.21
n8n에서 동적 웹페이지를 크롤링하는 방법 : curl, Headless 브라우저 설치 (0)	2025.12.20
n8n 원격 네트워크 데이터베이스 연결하기 (0)	2025.12.20
n8n 웹환경 모니터링 시스템 구축 (0)	2025.12.20
n8n Queue mode 고가용성 서비스 모니터링 구축 (1)	2025.12.20