Kakao i Web Chatbot::Web Chatbot SDK

페이지 이동경로

시작하며

카카오엔터프라이즈의 Kakao i Connect Talk는 인공지능(Artificial Intelligence)과 자연어 처리(Natural Language Processing) 기술을 결합한 AI 기반 Chatbot 서비스입니다.
본 가이드에서는 Kakao i Connect Talk 서비스 중 고객사의 웹 사이트(웹과 애플리케이션 내 웹 뷰 포함)에서 고객과 소통하고 반복적인 요구를 스마트하게 처리할 수 있는 Web Chatbot의 구현을 도와주는 Kakao i Web Chatbot SDK에 대해 설명합니다. Kakao i Web Chatbot SDK를 통해 쉽게 웹 사이트에 Web Chatbot을 구현할 수 있으며, 채팅창의 구성 요소를 원하는 방식대로 커스터마이징 할 수 있습니다.

Web Chatbot 지원 환경
항목 지원 환경
HTTP/2 지원 브라우저 - Chrome 41 이상
- Safari 11 이상
- Edge 79 이상
- Firefox 36 이상
- Internet Explorer 11 이상(부분 지원으로 비권장)
Mobile Web View - Android 5.0 이상
- iOS 10 이상

* Web View를 설정하기 위해서는 사전에 Local Storage 활성화 필요
  - iOS: WKWebsiteDataStore 문서 참고
  - Android: setDomStorageEnabled 문서 참고
안내
SDK가 제공하는 전체 메서드 목록은 Web Chatbot 메서드 문서를 참고하시기 바랍니다.

아키텍처

Kakao i Web Chatbot SDK의 아키텍처와 사용자 / 카카오 i 시스템 / 고객사 시스템 간 작동 흐름은 다음과 같습니다.

Kakao i Web Chatbot SDK 아키텍처 그림Kakao i Web Chatbot SDK 아키텍처

  1. SDK는 사용자가 Chatbot에 입력한 텍스트를 카카오 i 시스템의 Gateway로 전달합니다.
  2. Gateway는 사용자 입력 텍스트를 기반으로 자연어 처리 모델을 통해 특정 Bot으로 분류합니다.
  3. Gateway는 사용자가 입력한 텍스트를 Skill Server로 전송합니다.
    • Skill Server에는 Chatbot에 구현된 비즈니스 로직을 처리하는 API(Skill)가 구현되어 있습니다.
  4. Skill Server는 고객사 시스템에 API(Skill)를 호출합니다.
  5. 고객사 시스템은 호출 결과를 Skill Server에 반환합니다.
    • 답변은 Bot Builder에서 생성한 시나리오를 기반으로 합니다.
  6. Skill Server는 호출 결과와 전달받은 답변을 Gateway를 통해 사용자에게 전달합니다.

Kakao i Web Chatbot 구성 요소

Kakao i Web Chatbot의 구성 요소는 다음과 같으며, 특정 구성 요소에 대해서 커스터마이징이 가능합니다.

Kakao i Web Chatbot 구성 요소 그림Kakao i Web Chatbot 구성 요소

Kakao i Web Chatbot 구성 요소
항목 설명
① Chatbot 타이틀 타이틀
- 채팅방 타이틀 영역에 표시되는 텍스트
- 띄어쓰기 포함 15자 이내
- 이모지 및 특수기호 가능
서브 타이틀
- 현재 상태를 표시하는 텍스트로 ‘봇과 대화중’ 또는 ‘상담사와 대화중’만 적용 가능
- Chatbot이 활성화된 경우에만 초록색으로 상태가 표시됨
- setChatSubTitle()로 변경 가능
② Bot 프로필 Bot의 프로필 이름
- 띄어쓰기 포함 15자 이내
- 이모지 및 특수기호 가능
- createChat()의 profileName을 통해 변경 가능
Bot의 프로필 이미지
- createChat()의 profileImageUrl을 통해 변경 가능
③ 화면 닫기 클릭 시 Chatbot 화면을 닫으며, 대화 내용은 유지(기본 동작)
- clickCloseButton()를 통해 화면 닫기 가능
- closeButtonClickInterceptor()를 통해 닫기 이외의 다른 동작 기능 구현 가능
④ 사용자 말풍선 사용자 말풍선 색상 변경 가능
- 텍스트에 볼드, 스트라이크, 이탤릭 스타일 적용 가능
- 폰트 변경은 불가능
- createChat()의 bubbleBackgroundColor를 통해 변경 가능
⑤ Chatbot 말풍선 전송 시각 Chatbot이 전송한 마지막 말풍선에 전송 시간 정보 노출(기본 동작)
- renderBotChat()을 통해 설정 가능
⑥ 퀵리플라이 바로가기 버튼
- 인텐트 별로 다르게 설정 가능
- createChat()의 quickReplyColor를 통해 영역 색상 변경 가능
- createChat()의 quickReplyButtonTextColor를 통해 버튼 텍스트 색상 변경 가능
- createChat()의 quickReplyButtonBorderColor를 통해 버튼 테두리 색상 변경 가능
⑦ 커스텀 메뉴 최초 진입 시 노출되는 챗봇 주요 기능 메뉴
- 사용 유무 선택 가능
- 1단(메뉴 세 개) 또는 2단(메뉴 여섯 개) 구성 중 선택
- 배경, 텍스트 색상 및 아이콘 커스텀 가능
- onCustomMenuClick()을 통해 설정 가능
⑧ 텍스트 입력창 사용자가 Chatbot에 전송할 텍스트를 입력

안내
Web Chatbot을 구축한 이후에도 커스터마이징 요소를 변경할 수 있습니다.

  • 단, 채팅창 배경을 변경하는 경우에는 별도의 운영 계약이 필요하므로 자세한 설명은 카카오엔터프라이즈 담당자에게 문의하시기 바랍니다.
이 문서가 만족스러운 이유를 알려주세요.
이 문서에 아쉬운 점을 알려주세요.
평가해주셔서 감사합니다.

더 자세한 의견은 documentation@kakaoenterprise.com 으로 제보해주세요.