AI 챗봇 웹사이트 무료 설정 5분 완성

AI 도구를 적극적으로 활용하면 작업 시간을 획기적으로 단축합니다. 반복되는 일상 업무를 자동화하여 생산성을 즉각적으로 높이세요.

왜 AI 챗봇이 필요할까?

nicepang-body-image-multi:69916:1 BEGIN

nicepang-body-image-multi:69916:1 END

블로그나 웹사이트를 운영 중이시라면, 방문자가 궁금한 걸 물어볼 때 뭘 해야 할까요? “이메일로 문의해 주세요”라고 적어두면, 9명 중 7명은 그냥 나갑니다. 실제로 Forrester Research에 따르면, 고객은 실시간 응답을 기대하며 챗봇이 없는 사이트의 이탈률은 챗봇이 있는 사이트보다 2~3배 높습니다.

AI 챗봇이란, ChatGPT 같은 인공지능이 방문자의 질문에 실시간으로 대답해 주는 시스템입니다. 상담원을 고용할 필요도, 24시간 대기할 필요도 없죠. 비개발자도 5분 안에 무료로 달 수 있는 방법을 정리했습니다.

1단계: 어떤 챗봇 서비스를 쓸지 선택하기 어떻게 해야 할까요?

nicepang-body-image-multi:69916:2 BEGIN

nicepang-body-image-multi:69916:2 END

무료로 챗봇을 달 수 있는 대표적인 서비스 3가지를 비교해 보겠습니다.

서비스	무료 요금제	특징	난이도
Chatbase	월 50 메시지	내 웹사이트를 학습해서 전문가처럼 답변, 한국어 응답 우수	초보자용
Tidio	월 50 대화	쇼핑몰에 적합, 장바구니 연동 기능	초보자용
Crisp	무제한 채팅 (AI는 유료)	실시간 상담 + 지식 베이스 결합, 다국어 채팅 지원	중급자용

초보자라면? 가장 추천하는 건 Chatbase입니다. 월 50 메시지까지 무료이고, 내 사이트의 FAQ나 안내 문서를 학습시키기 쉬우며, 한국어 응답 품질도 좋습니다.

2단계: Chatbase에서 AI 챗봇 만들기 어떻게 해야 할까요?

Chatbase는 chatbase.co에서 가입할 합니다. Google 계정으로 1초 만에 로그인됩니다.

① 챗봇 생성

Chatbase에 로그인한 뒤, 대시보드에서 “Create New Chatbot” 클릭
Chatbot name에 챗봇 이름 입력 (예: “Nicepang 도우미”)
Instructions 입력란에 챗봇의 역할과 답변 스타일 지정

Instructions(System Prompt) 예시:

당신은 nicepang.co.kr 블로그의 AI 도우미입니다.
방문자가 궁금한 점을 친절하고 간결하게 한국어로 답변하세요.
글 내용과 관련된 질문에는 블로그 글을 참고해서 답변하고,
모르는 건 솔직하게 모른다고 말하세요.

팁: Instructions가 챗봇의 성격을 결정합니다. “친절한 어른 같은 말투로”, “짧고 명확하게” 같은 지시를 넣으면 응답 스타일이 크게 바뀝니다.

② 지식(Knowledge) 추가하기

챗봇이 내 사이트에 대해 알도록 학습시키는 단계입니다.

챗봇 설정 화면에서 “Data Sources” 탭 클릭
“File”, “Website”, “Text”, “Q&A” 버튼으로 학습할 자료 업로드
- 파일: FAQ 문서, 상품 안내, 서비스 설명 (PDF, TXT, DOCX)
- 웹사이트: 내 블로그 URL 입력하면 자동으로 스크랩
- Q&A: 질문-답변 쌍을 직접 입력
학습 완료 후 테스트 탭에서 질문해 보며 품질 확인

실무 팁: 1~2개의 잘 정리된 FAQ 파일보다, 100개의 뒤죽박죽 문서가 훨씬 안 좋습니다. “자주 묻는 질문 10개” 정도만 깔끔하게 정리해서 넣으세요.

③ 디자인 커스터마이징

“Appearance” 탭에서 챗봇 버튼의 색상, 위치, 환영 메시지를 설정할 합니다. 브랜드 색상에 맞추면 사이트와 자연스럽게 어울립니다.

3단계: 내 웹사이트에 챗봇 스크립트 붙여넣기 어떻게 해야 할까요?

nicepang-body-image-multi:69916:3 BEGIN

nicepang-body-image-multi:69916:3 END

Chatbase에서 챗봇 생성을 마치면, “Integrations” 메뉴에서 JavaScript 코드 조각을 받을 합니다. 보통 이런 형태입니다:

<script>
  window.chatbaseConfig = {
    chatbotId: "여러분의 챗봇 ID"
  };
</script>
<script src="https://www.chatbase.co/embed.min.js"
        id="여러분의 챗봇 ID" defer></script>

WordPress에 추가하는 방법

WordPress 관리자 대시보드 → “외관” → “테마 파일 편집기”
오른쪽에서 “header.php” 선택
</head> 태그 바로 앞에 스크립트 코드 붙여넣기
“파일 업데이트” 클릭

더 쉬운 방법: “WPCode”나 “Insert Headers and Footers” 같은 무료 플러그인을 쓰면 테마 파일을 건드리지 않고 스크립트를 넣을 합니다. 초보자에게 더 안전한 방법입니다.

그 외 웹사이트 빌더별 추가 위치

플랫폼	추가 위치
카페24	Shop 사이트 설정 → 스크립트 관리 → footer
고도몰	디자인 편집 → HTML/CSS → footer 영역
Wix	설정 → 사용자 지정 코드 → <head> 또는 <body> 끝
노션	코드 블록에 직접 삽입 불가 — 외부 도구 필요
포트폴리오 (GitHub Pages)	index.html의 <body> 끝에 직접 추가

4단계: 챗봇 잘 작동하는지 테스트하기 어떻게 해야 할까요?

nicepang-body-image-multi:69916:4 BEGIN

나무 테이블 위에 세로로 놓인 스마트폰 화면에 앱 테스트 화면이 보이는 사진

nicepang-body-image-multi:69916:4 END

챗봇을 달았다고 끝이 아닙니다. 반드시 아래 항목을 확인하세요.

실제 사이트 방문 후 채팅 버튼이 보이는지 — 안 보이면 스크립트 위치 확인
질문하면 한국어로 정상 답변하는지 — 이상하면 Instructions 수정
학습한 내용에 대해 정확히 답하는지 — 안 되면 Data Sources 자료 재점검
모바일에서도 버튼 위치가 가리지 않는지 — 화면 오른쪽 하단이 표준

자주 하는 실수: “bot에게 잘못된 정보를 알려줘서 손님이 황급해요” 같은 사례는 Data Sources에 구버전 가격이나 폐기된 정책이 들어 있을 때 발생합니다. 학습 자료는 항상 최신으로 유지하세요.

5단계: 성과 측정하기 어떻게 해야 할까요?

nicepang-body-image-multi:69916:5 BEGIN

nicepang-body-image-multi:69916:5 END

챗봇을 달고 나면, 방문자가 어떤 질문을 많이 하는지 파악할 합니다. 이건 무료 시장 조사입니다.

자주 묻는 질문 → 블로그 글 주제로 활용
미답변 질문 → Data Sources에 추가해서 답변 범위 확대
대화 후 이탈률 → 챗봇이 실제로 체류 시간에 영향을 주는지 확인

Chatbase의 대시보드에서 대화 로그와 분석 데이터를 확인할 합니다. 기본 analytics는 무료 플랜부터 제공됩니다.

트러블슈팅: 챗봇이 안 될 때 어떻게 해야 할까요?

스크립트를 붙여넣었는데 채팅 버튼이 안 보인다면? 당황하지 마세요. 아래 체크리스트대로 확인해 보세요.

채팅 버튼이 화면에 안 나타날 때

스크립트 위치 확인 — <head> 안이나 <body> 닫는 태그 바로 앞에 정확히 들어갔는지 검토하세요. 다른 스크립트와 충돌하면 렌더링이 막힐 합니다.
캐시 문제 — 브라우저에서 Ctrl + Shift + R(강력 새로고침)을 눌러 보세요. 브라우저가 이전 버전의 페이지를 캐싱하고 있을 합니다.
광고 차단기 확인 — uBlock Origin이나 AdGuard 같은 확장 프로그램이 챗봇 스크립트를 차단하는 경우가 꽤 있습니다. 다른 브라우저의 시크릿 모드에서 테스트해 보세요.
chatbotId 확인 — Chatbase에서 발급받은 ID가 스크립트에 정확히 복사되었는지 확인하세요. 하나만 달라도 동작하지 않습니다.

모바일에서 레이아웃이 깨질 때

모바일 화면에서 채팅 버튼이 너무 크거나, 중요한 버튼(예: “구매하기”)를 가린다면 Chatbase의 Appearance 설정에서 버튼 크기를 조절하세요. bottom-right 위치가 가장 일반적이며, 버튼 크기는 48~56px 사이가 모바일에서 가장 무난합니다. 반드시 실제 스마트폰에서 테스트하세요. 데스크톱 크롬의 모바일 모드와는 다를 때가 많습니다.

답변이 엉뚱하게 나올 때

챗봇이 엉뚱한 대답을 한다면 가장 먼저 Data Sources를 점검하세요. 구버전 가격표나 삭제된 페이지 정보가 학습 데이터에 남아 있으면 그대로 답변합니다. 해결 방법은 간단합니다: 기존 파일을 삭제하고 최신 버전으로 다시 업로드하세요. 학습 반영까지 몇 분 정도 걸립니다. 그래도 해결되지 않으면 Instructions에 “모르는 질문이면 모른다고 답하세요”를 추가하세요. 이 한 줄이 잘못된 답변을 막아줍니다.

도메인 연결 문제 (Chatbase)

Chatbase에서 내 도메인을 연결했는데 인증이 안 된다면, DNS 설정에 CNAME 레코드가 정확히 반영되기까지 최대 48시간이 걸릴 합니다. 급한 경우에는 DNS 확인 도구(예: whatsmydns.net)로 전 세계 DNS 서버에 값이 전파되었는지 확인해 보세요. 또한 SSL 인증서가 설치된 HTTPS 사이트에서만 정상 동작하므로, 아직 HTTP만 지원하는 사이트라면 SSL 적용을 먼저 진행하세요.

자주 묻는 질문 (FAQ)

Q1. 추가 질문인가요?

답변입니다. 확실한 정보를 통해 100% 해결합니다.

Q2. 추가 질문인가요?

답변입니다. 확실한 정보를 통해 100% 해결합니다.

Q3. 추가 질문인가요?

답변입니다. 확실한 정보를 통해 100% 해결합니다.

Q4. Chatbase는 Instructions에 “If the user asks in English, respond in English. Korean questions should be answered in Korean.”처럼 언어 규칙을 명시하면 다국어 응답이 가능합니다. Crisp도 기본적으로 다국어 채팅 자동 번역을 지원합니다. 다만, 학습 데이터가 한국어로만 되어 있으면 영어 질문에 대한 답변 품질이 떨어질 수 있으니, 해외 방문자가 많은 사이트라면 영문 FAQ도 함께 Data Sources에 추가하는 것을 추천합니다.?

챗봇 외에도 챗GPT 커스텀 GPT 만들기나 노션(Notion) AI 사용법 같은 AI 도구 활용법도 참고해 보세요. 각각 5분 안에 설정할 수 있는 초보자 가이드입니다.