[디자인 관리] 챗봇 위젯 및 런처 디자인 설정 가이드 (v4.5)

웹사이트에 접속한 고객이 가장 먼저 마주하게 되는 챗봇 위젯의 디자인, 위치, 시작 팝업, 그리고 챗봇 목록 화면을 우리 브랜드의 아이덴티티에 맞게 꾸미는 공간입니다.

1. 챗봇 디자인 (우측 화면)

위젯의 아이콘과 웹사이트 내 표시 위치를 세밀하게 조정할 수 있습니다.

① 아이콘 설정

챗봇 곳곳에 노출되는 로고와 아바타를 변경합니다. (PNG, SVG 파일 / 10KB 이하 권장)

• 런처 상단 로고 (24x24): 챗봇 팝업 또는 런처의 닫기(×) 버튼 옆 등 작은 영역에 사용됩니다.
• 런처 하단 로고 (50x50): 웹사이트 우측 하단에 떠 있는 기본 채팅 버튼 아이콘입니다.
• 채팅내 아이콘 (30x30): 챗봇 창을 열었을 때, 챗봇이 말할 때마다 표시되는 프로필 아바타입니다.

② 챗봇 위치 설정 (PC / 모바일 개별 설정)

챗봇 런처가 나타날 위치를 지정합니다. v4.5부터는 PC와 모바일 환경을 각각 독립적으로 설정할 수 있습니다.

• 버튼 위치: 가로(왼쪽/오른쪽), 세로(위/아래) 기준을 정합니다. (일반적으로 우측 하단을 많이 사용합니다.)
• 여백 (px): 화면 끝에서부터 챗봇 버튼이 얼마나 떨어져 있을지 픽셀 단위로 세밀하게 조정합니다.

③ 도킹 모드 설정 (PC 전용)

PC 화면에서 챗봇 창을 열었을 때, 챗봇이 웹사이트 위를 덮는(Overlay) 형태가 아니라 화면 우측에 고정되어 웹사이트 콘텐츠를 밀어내는(Docking) 모드입니다.

• 모바일에서는 레이아웃 특성상 자동으로 비활성화됩니다.
• 사용 시 웹사이트의 주요 콘텐츠 영역(CSS 셀렉터, 예: body, #root)을 지정해야 합니다.

2. 챗봇 런처 (좌측 화면 - 시작 팝업 및 버튼)

고객이 채팅 버튼을 누르기 전, 시선을 사로잡을 수 있는 '말풍선' 형태의 팝업을 설정합니다.

① 시작 팝업 메시지

• 런처 팝업 사용여부: 토글을 켜면 웹사이트 로드 시 챗봇 버튼 위에 말풍선 팝업이 표시됩니다. 끄면 런처 아이콘만 깔끔하게 표시됩니다.
• 제목: 팝업의 첫 줄에 굵은 글씨로 표시됩니다. (예: "안녕하세요. 사내챗봇입니다.")
• 부제목: 제목 아래에 표시되는 보조 문구입니다. (예: "아래 채팅 버튼을 눌러주세요 😊")

② 클릭 유도 버튼 (CTA)

말풍선 팝업 안에 특정 페이지로 바로 이동하는 버튼을 추가할 수 있습니다.

• 버튼 텍스트: (예: "챗봇 제작 의뢰는 여기를 눌러주세요 🙋")
• 버튼 링크: 이동할 URL을 입력합니다. (반드시 https:// 또는 http://로 시작해야 합니다.)

3. 챗봇 목록 화면 (좌측 화면 - 헤더 및 카카오톡 설정)

챗봇 아이콘을 클릭하여 창을 열었을 때 보이는 첫 화면(채팅 리스트)을 설정합니다.

① 상단 헤더 이미지 및 문구

• 상단 헤더 이미지: 챗봇 상단에 표시되는 배너 이미지입니다. (권장 사이즈: 370x185px / 100KB 이하)
• 클라우드 튜링 문구: 챗봇 카드 아래에 표시될 간단한 환영 문구를 입력합니다.

② 카카오톡 설정

웹 챗봇 목록 화면에 카카오톡 채널 바로가기 버튼을 추가합니다.

• 카카오톡 챗봇 문구: (예: "안녕하세요. 카카오톡 챗봇입니다.")
• 카카오톡 챗봇 주소: 카카오톡 채널 채팅 URL을 입력합니다. (예: https://pf.kakao.com/_xxxx/chat)

  💡 참고: 주소 끝에 /chat 까지만 입력하면 1:1 채팅으로 연결되며, /chat?bot=true 를 붙이면 챗봇 대화방으로 연결됩니다. 모바일에서는 카카오톡 앱이 즉시 열리며, PC에서는 로그인 안내가 뜹니다.

③ QR 코드 사용 설정

PC로 웹사이트에 접속한 고객이 스마트폰(모바일) 카카오톡으로 쉽게 넘어갈 수 있도록 돕는 기능입니다.

• 별도로 이미지를 만들 필요 없이, 이동할 URL(https://)만 입력하면 QR 코드가 자동으로 생성되어 챗봇 목록 화면에 노출됩니다.
• 카카오톡 채널뿐만 아니라 이벤트 페이지, 앱 다운로드 링크 등 다양한 목적으로 활용할 수 있습니다.

4. 디자인 저장하기 (필수 ⭐)

🚨 주의사항
위젯 위치, 아이콘, 팝업 문구 등 모든 디자인 설정을 변경한 후에는 반드시 우측 상단의 주황색 [디자인 저장하기] 버튼을 클릭해야 실제 웹사이트에 반영됩니다.