Skip to content
실전 튜토리얼약 8분 소요업데이트 2026년 3월 15일

웹사이트에 AI 챗봇 추가하기: 5분 완성 단계별 가이드

웹사이트에 AI 챗봇을 직접 설치해 보세요. 코딩 지식 없이도 5분이면 완료됩니다. 카페24, 워드프레스, 쇼피파이 등 플랫폼별 상세 설치 방법과 최적의 설정 팁을 알려드립니다.

웹사이트에 AI 챗봇 추가하기: 5분 완성 단계별 가이드

왜 지금 웹사이트에 챗봇을 추가해야 할까요?

웹사이트에 챗봇을 추가하는 것은 2026년 온라인 비즈니스의 기본 인프라가 되었습니다. 마치 전화번호나 이메일 주소를 웹사이트에 게시하는 것처럼, 실시간 채팅 기능은 고객이 당연히 기대하는 요소입니다.

한국 소비자 행동 데이터를 보면 이유가 명확합니다:

- 72%의 한국 온라인 쇼핑객이 구매 전 실시간 문의 기능을 찾습니다
- 실시간 응답이 없으면 58%가 경쟁사 사이트로 이동합니다
- 챗봇 도입 후 평균 전환율이 20% 상승합니다
- 고객 1인당 평균 체류 시간이 3분 이상 증가합니다

특히 한국의 이커머스 환경에서는 쿠팡, 네이버 쇼핑 등 대형 플랫폼과 경쟁해야 하는 자체 쇼핑몰 사업자에게 차별화된 고객 경험이 중요합니다. 대형 플랫폼은 규모의 경제로 가격 경쟁력을 갖추고 있지만, 자체 쇼핑몰은 전문적인 상담과 맞춤 서비스로 경쟁할 수 있습니다.

AI 챗봇은 이 전문 상담을 24시간, 동시 무제한으로 제공할 수 있는 유일한 방법입니다. 그리고 놀랍게도, 설치는 5분이면 충분합니다.

이 글에서는 Chatloom을 예시로, 웹사이트에 AI 챗봇을 추가하는 전체 과정을 단계별로 안내하겠습니다. 카페24, 워드프레스, 쇼피파이 등 한국에서 많이 사용하는 플랫폼별 설치 방법도 함께 다룹니다.

Step 1: 계정 생성과 AI 에이전트 설정

AI 챗봇을 웹사이트에 추가하는 첫 번째 단계는 Chatloom 계정을 생성하고 AI 에이전트를 설정하는 것입니다.

1. 회원가입
Chatloom 홈페이지에서 무료 계정을 생성합니다. 이메일 또는 소셜 로그인으로 간편하게 가입할 수 있습니다.

2. 새 에이전트 생성
대시보드에서 "새 에이전트 만들기" 버튼을 클릭합니다. 처음 가입하면 온보딩 위자드가 자동으로 안내해 줍니다.

3. 기본 정보 입력
- 에이전트 이름: 고객에게 표시될 챗봇 이름 (예: "쇼핑몰 도우미")
- 환영 메시지: 처음 채팅을 열었을 때 표시되는 인사말
- 시스템 프롬프트: AI의 역할과 응대 방식을 지정합니다

한국어 시스템 프롬프트 예시:
```
당신은 [회사명]의 친절한 고객 상담 도우미입니다.
항상 존댓말을 사용하고, 고객의 문의에 정확하고 친절하게 답변하세요.
모르는 질문에는 솔직하게 모른다고 안내하고, 고객센터 연락처를 안내하세요.
```

4. 추천 질문 설정
고객이 자주 묻는 질문을 미리 버튼으로 표시할 수 있습니다. 한국어로 자연스럽게 작성하세요:
- "배송은 얼마나 걸리나요?"
- "교환/환불 방법을 알려주세요"
- "이 제품의 상세 사양이 궁금해요"

이 추천 질문은 고객의 첫 상호작용을 유도하여 대화 시작률을 40% 이상 높이는 효과가 있습니다.

5. 위젯 디자인 커스터마이징
빌더에서 채팅 위젯의 외관을 설정합니다:
- 브랜드 색상에 맞는 테마 컬러
- 위젯 위치 (우측 하단이 한국 웹사이트 표준)
- 로고 이미지 업로드
- 실행 모드 선택 (버튼, 사이드바, 전체화면 등)

모든 설정이 실시간 미리보기로 확인되므로, 원하는 모습이 될 때까지 자유롭게 조정하세요.

Step 2: 지식 베이스 구축하기

AI 에이전트가 정확한 답변을 하려면 지식 베이스(Knowledge Base)를 구축해야 합니다. 이것이 RAG 챗봇의 핵심입니다.

방법 1: URL 크롤링 (가장 빠름)
웹사이트 URL을 입력하면 Chatloom이 자동으로 페이지를 크롤링하여 내용을 학습합니다.

크롤링 추천 페이지:
- 자주 묻는 질문(FAQ) 페이지
- 배송/교환/환불 정책 페이지
- 제품 카테고리 및 상세 페이지
- 회사 소개 페이지
- 이용 약관 (필요시)

카페24 쇼핑몰이라면 `https://여러분의도메인.com/board/free/list.html` 같은 게시판 URL도 크롤링 가능합니다.

방법 2: 파일 업로드
PDF, Word, 텍스트 파일을 직접 업로드할 수 있습니다. 제품 매뉴얼, CS 응대 가이드라인, 내부 교육 자료 등을 업로드하세요.

방법 3: 직접 입력
특정 Q&A를 직접 작성할 수도 있습니다. 자주 발생하지만 웹사이트에 명시되지 않은 정보(예: "택배 기사님이 안 계시면 경비실에 맡겨드립니다")를 추가하기에 적합합니다.

지식 베이스 최적화 팁:

1. 최신 정보 유지: 가격 변동, 프로모션, 정책 변경 시 반드시 업데이트하세요. Chatloom의 자동 재크롤링 기능을 활용하면 편리합니다.

2. 구체적으로 작성: "배송비는 조건에 따라 다릅니다" 대신 "3만 원 이상 구매 시 무료배송, 미만 시 3,000원"처럼 구체적으로 작성하세요.

3. 고객 관점으로 작성: 내부 용어 대신 고객이 실제로 사용하는 표현을 사용하세요.

4. 제품 정보 등록: Chatloom의 제품 카탈로그 기능을 활용하면 이미지와 가격이 포함된 제품 카드를 대화 중에 표시할 수 있습니다.

지식 베이스 구축 후에는 빌더의 테스트 라이브 기능으로 실제 질문을 해보며 답변 품질을 검증하세요.

Step 3: 플랫폼별 위젯 설치 방법

지식 베이스까지 구축했다면, 이제 웹사이트에 위젯을 설치할 차례입니다. Chatloom 빌더에서 "설치 코드"를 복사하면, 다음과 같은 스크립트를 얻게 됩니다:

```html

```

이 코드를 웹사이트의 `` 태그 바로 앞에 붙여넣으면 됩니다. 플랫폼별 구체적인 방법을 안내합니다.

카페24
1. 카페24 관리자 페이지 접속
2. "디자인" → "디자인 편집" 클릭
3. "레이아웃" → "공통 레이아웃" 선택
4. HTML 하단의 `` 태그 앞에 스크립트 붙여넣기
5. 저장 후 확인

워드프레스
1. 관리자 대시보드 → "외모" → "테마 편집기"
2. footer.php 파일 선택
3. `` 태그 앞에 스크립트 붙여넣기
4. 또는 "Insert Headers and Footers" 플러그인 사용 (더 간편)

쇼피파이 (Shopify)
1. 관리자 → "Online Store" → "Themes"
2. "Edit code" 클릭
3. "theme.liquid" 파일 열기
4. `` 태그 앞에 스크립트 붙여넣기
5. 저장

고도몰
1. 관리자 → "디자인" → "디자인 설정"
2. 현재 사용 중인 스킨의 "스킨 편집"
3. 공통 레이아웃에서 `` 앞에 삽입

메이크샵
1. 관리자 → "디자인관리" → "HTML 편집"
2. 하단 공통 레이아웃에 삽입

정적 HTML 사이트
모든 HTML 파일의 `` 앞에 직접 삽입하거나, 공통 footer include 파일에 추가하면 됩니다.

설치 후 웹사이트를 새로고침하면 우측 하단에 채팅 버튼이 나타납니다. 클릭하면 AI 챗봇 대화창이 열리며, 설정한 환영 메시지와 추천 질문이 표시됩니다.

설치 후 최적화: 성과를 극대화하는 팁

위젯 설치가 완료되었다면, 이제 성과를 극대화하기 위한 최적화 작업을 진행하세요.

1. A/B 테스트 활용
Chatloom의 위젯 A/B 테스트 기능으로 환영 메시지, 추천 질문, 위젯 색상 등을 실험해 보세요. 어떤 설정이 더 높은 대화 시작률과 만족도를 이끌어내는지 데이터로 확인할 수 있습니다.

2. 페이지별 맞춤 설정 고려
모든 페이지에서 동일한 환영 메시지를 사용하기보다, 페이지 특성에 맞는 메시지를 설정하면 효과적입니다:
- 제품 페이지: "이 제품에 대해 궁금한 점이 있으신가요?"
- 장바구니: "결제 과정에서 도움이 필요하신가요?"
- 메인 페이지: "무엇을 도와드릴까요?"

3. 모바일 최적화 확인
한국의 모바일 쇼핑 비율은 70%를 넘습니다. 모바일에서 챗봇 위젯이 콘텐츠를 가리지 않는지, 터치 조작이 원활한지 반드시 확인하세요. Chatloom 위젯은 반응형으로 설계되어 모바일에서도 최적의 UX를 제공합니다.

4. 분석 데이터 모니터링
설치 후 첫 주는 매일, 이후에는 주 1회 이상 Chatloom 대시보드를 확인하세요:
- 일일 대화 수와 추세
- 가장 많이 묻는 질문 TOP 10
- AI 답변 신뢰도 분포
- 답변하지 못한 질문 (지식 격차)

5. 지식 격차 보강
AI가 답변하지 못한 질문은 자동으로 수집됩니다. 이 질문들에 대한 답변을 지식 베이스에 추가하면, 매주 자동 해결률이 5~10%씩 상승합니다.

6. 팀원과 공유
Chatloom의 팀 협업 기능으로 마케팅 팀, CS 팀 등 관련 부서에 대시보드 접근 권한을 부여하세요. 여러 관점에서의 피드백이 챗봇 품질 향상에 도움이 됩니다.

7. 네이버 검색 최적화
챗봇 도입으로 증가한 웹사이트 체류 시간과 상호작용은 네이버 및 구글 검색 순위에 긍정적인 영향을 미칩니다. 챗봇 대화 데이터에서 고객이 자주 사용하는 키워드를 파악하여 콘텐츠 SEO에도 활용하세요.

자주 묻는 질문

웹사이트에 챗봇 추가하는 데 비용이 드나요?

Chatloom은 무료 플랜을 제공하므로 초기 비용 없이 AI 챗봇을 웹사이트에 추가할 수 있습니다. 무료 플랜에서도 RAG 기반 AI 답변, 위젯 커스터마이징, 기본 분석 기능을 이용할 수 있습니다.

챗봇 설치가 웹사이트 속도에 영향을 주나요?

Chatloom 위젯 스크립트는 비동기(async)로 로딩되어 웹사이트의 페이지 로딩 속도에 영향을 주지 않습니다. 스크립트 크기도 최적화되어 있어 대역폭 부담이 거의 없습니다.

여러 웹사이트에 동일한 챗봇을 설치할 수 있나요?

네, 하나의 에이전트를 여러 웹사이트에 설치할 수 있습니다. 동일한 스크립트 코드를 각 사이트에 붙여넣으면 됩니다. 사이트별로 다른 챗봇을 운영하고 싶다면 별도의 에이전트를 생성하세요.

설치 후 챗봇이 보이지 않으면 어떻게 하나요?

먼저 브라우저 캐시를 삭제하고 새로고침해 보세요. 그래도 안 보인다면 스크립트 코드가 </body> 태그 앞에 정확히 삽입되었는지 확인하세요. 브라우저 개발자 도구(F12)의 콘솔에서 에러 메시지를 확인하면 원인을 파악할 수 있습니다.

관련 리소스

관련 글

웹사이트에 AI 챗봇을 추가할 준비가 되셨나요?

RAG 기반 AI 챗봇을 5분 안에 구축하고 배포하세요. 코딩 불필요. 무료 플랜으로 시작하세요.

    개인정보 보호 선택

    Chatloom을 운영하고 제품을 개선하기 위해 쿠키를 사용합니다. 선택적 분석 및 마케팅 데이터 사용 방식을 관리하세요.

    웹사이트에 AI 챗봇 추가하는 방법 | 5분 설치 가이드 (2026) | Chatloom