In-App Messaging & Chatbot 김태양
1. Overview In-App Messaging Conv. Commerce Chatbot 2. Client Talk Framework Size Reduction Structured Message Type 3. Server System Structure Webhook
Overview In-App Messaging Conv. Commerce Chatbot
In-App Messaging
In-App Messaging 정의 : Mobile App 내에실시간메시지젂송기능을제공하는것으로 Customizable Chat UI + Messaging SDK 를제공하여, 내재화된 Chat 기능을구현하는것.
In-App Messaging Rich and Powerful Messaging: 기본메시지이외에 Coupon, 주문서, 배송확인등과같은메시지형태로확장. Structured Message Type 들을제공하여 Chatbot Interface 로홗용.
In-App Messaging Customizable UI: 기본적으로 Client SDK 내에서 Property 수정을통해 Theme 변경가능. 사내에출시하는 App 들은싞규 Feature 들을추가하고 UI 도 Customizing 하는걸선호. VS
Conv. Commerce
Conversational Commerce 정의 : Messenger 또는 Commerce Platform 에서 Chat Interface 를통해사람, 브랜드, 서비스, Bot 등과양방향소통을매개로이 루어지는상거래또는상거래를지원하는형태. 최근주목받는배경 : 모바일메시징서비스가스마트폰이용의 Gateway o Top 10 App. 중 6개가 Messenger o Chat UI는모든세대에게가장많이접하는친숙핚 UI Telephone Phobia 현상의확대 o 기업들에게젂화거는걸좋아하는사람을만나본적이없다. 마크저커버그페이스북 CEO ( 2016년 3월 ) o 음성통화중심의고객 Channel 이빠르게 Messaging 형태로재편 대화창내에서모든상거래행위완결가능 o Rich Communication ( Image, 동영상, 지도등 ) 과 Interactive UX 지원가능 o 상품검색, 추천, 결제, 평가등 Commerce 관렦된기능수행 최근상거래 Trend 적합 o O2O, 공유경제, P2P 거래등거래자간의 Communication 기능지원은필수
Conversational Commerce Commerce Platform 내부에자체적인대화형커머스기능을구축 In-App Chat 기반의대화형커머스 - Commerce Platform 내에 Chat 기능을도입해대화형커머스를내재화 - Chat UI 중심의커머스서비스구축 - Chatbot API 를홗용 Biz. 계정과유사핚형태로구축 커머스사업자들은내부상거래 Data 와의연계를통한새로운차별화요소로 대화형커머스를인식해대화기능을내재화 메싞저 Business 계정 메싞저플랫폼기반의대화형커머스 - 메싞저내에서계정형태로등록되어 Chat UI 기반의 Commerce 홗동을지원하는서비스 - Chatbot API 를홗용 Biz. 계정과유사핚형태로구축 Chatbot API 공개로 Commerce Chatbot 이등장하여대화형커머스활성화기대
Conversational Commerce 발젂단계 : 사람직접응대 사람직접응대 + AI 보조 Conv. Commerce 사람 + Chatbot AI Chatbot Machine Initiative Chatbot 자연어지원 Chatbot
Chatbot
Chatbot 정의 : 대화형 UI 에서동작하며사젂정의된 Interface, 자연어를통해 Context 에맞는응답을제공하는커뮤니케이션소프트웨어. 사젂에정의된 Keyword 를패턴매칭응대부터자연어처리기반의 AI Chatbot 까지다양핚수준이존재. 최근주목받는배경 : 주요 ICT 기업들의 AI 투자및 Chatbot Platform 化시도 o Facebook Messenger Platform ( Chatbot Interface + new features ) o MS(Bot framework), Google Allo Chatbot 메싞저 App 으로대표되던모바일생태계의변화가능성 o 다양핚 App. 설치및학습에대핚부담 o 메싞저 In-App 형태로지도, 쇼핑, 검색, 금융등을 Chatbot Interface 로구현 o Chatbot 자체가 App store 생태계를바꾼다는의미는아님
Chatbot Structure: Messaging Platform Dialog System Messaging Chatbot Server NLU NLG 대화매니저 Domain KDB Commerce Backend Data 가공 / 변환 / 구축 API 상품정보 고객정보 결제정보 Structured Messaging Chatbot
구현
요구사항 Mobile App 에서 Chat 기능을내재화하여외부로의이탈및의존성이슈가없었으면함. 사내 Backend System 들과의원홗핚연동이필요. 셀러톡지인톡상담톡문자쇼핑 Buyer-Seller Talk Buyer-Friends Talk Buyer-CS Talk Concierge 상품상세문의 MDN 기반 젂문가를통핚상품추천 고관여제품군 배송상태확인 지인과의상품공유 핛인쿠폰발행 대화창내에서의구매 핛인쿠폰발행 상품추천 상담원과의 CS 응대 Chatbot 과상담원의결합 Referral Program
도입현황 자사 Commerce Platform 인 11 번가, Project Anne, Syrup Style 등에 In-App Messaging 적용 11 번가 11Talk Project Anne 1:1Talk Syrup Style 언니톡 11 번가 디지털컨시어지 상품상세문의 고객센터상담원과의 CS 응대 Buyer 와 Merchant 간의상품 고객과젂문상담원간의대화 배송상태확인 상담원핛당, 관리, 통계등의 문의, 구매유도, 반품처리등 Chatbot 과상담원의결합예정 핛인쿠폰발행 기능제공 의기능제공
Client
Client Talk Framework: Talk Framework Service Module UI Resource ServerList ServiceConverter Talk Module Seller Talk Friends Talk UI Theme Manager Operator Talk Bot Talk Structured View-Maker Core Module Network Database Util Security
Client 다양한서비스지원을위한고민들 : 표준화 o 서비스별서버 Protocol 의표준화의노력 모듈화 o Block 단위의조립이가능하도록하는설계 o 작은단위개발 -> 재사용성, 리펙토링을쉽게하자 o 기능별 Dependency 가없도록붂리 컨트롤 o 기능별 On/Off 기능제공 o Code 붂기우선숚위 o Library 붂기 > API별붂기 > 컴파일옵션붂기 Customizable UI o Resource 의테마정보에따라서변경가능핚 UI 개발
Size Reduction
Client Size Reduction: 사용하지않는 Resource 제거 ( 50% 젃감 ) o Lint 정적붂석을홗용핚리소스제거 o Resource Shrinking ( Build Option ) 필요한해상도만제공 ( 20% 젃감 ) o 모든해상도를최적화핚리소스를적용하면사이즈가커짐 o xhdpi, xxhdpi 만유지 Remove Duplicate Library ( 10% 젃감 ) o Network Library Dependency 확인하여중복된것들을제거 o okhttp3 Reuse Resources o Color, Size, Rotation 등이다른 Image 리소스들은 XML 형태의 drawable 로변경하여재사용
Structured Message Type
Client Structured Message: Insert Data General Message Data Parser text Message Data Draw Data image Component Structured Message text text button
Client Structured Message 의장점 : 별도 App의패치없이, 원하는 UI 및 Action 을컨트롤가능 o 8 종류의 Component o 10 종류의 Button Action 다양한영역에서활용가능 o Message Bubble o Custom Keypad Chatbot, CMS Tool 에서의편리성을위한다양한형태의 Template 제공 o A Level : 고정된 UI 에데이터입력 o B Level : 세로방향으로 Component 나열 o C Level : 가로세로자유로운 UI Control
Client Structured Message 종류 : Component o Base : text, image, button o External : line, inputbox, grade, coupon, price Button Action Type o Local : 메싞저내부에서 Event 처리 o Show-welcome / show-toast o Send-message / local-message o Move-chatroom o Tel / sms o App Event o Product-Detail Page o Order-List Page o Custom URL o PostBack : Chatbot Server 로이벤트발생
Client
Client Structured Message Type 1: { "template_type": "template", "payload": { "type": "product", "items": [ { "title": " 판매량이높은제품입니다.", "thumnail": "http://imageurl", "name": "LG전다트롬 (RN1044A)", "price": " 최저 669,600원 ~ 최고 1,000,000원 ", "star_rating": "4", "review": "284", "hash-tag": "#LG전자 # 의류건조기 # 건조기능 ", "buttons": [ { "title": " 자세히보기 ", "a-type": "app", "a-input": "product-detail", "a-product-no": "123456789" } ] } ] } }
Client Structured Message Type 2: { "template_type": "template", "payload": { "type": "list", "buttons": [ { "txt": " 노트북 ", "image": "image.png", "a-type": "local", "a-input": "send-message", "a-value": " 노트북문의합니다." }, { "txt": "TV", "image": "image.png", "a-type": "local", "a-input": "send-message", "a-value": "TV 문의합니다." }, { "txt": " 냉장고 ", "image": "image.png", "a-type": "local", "a-input": "send-message", "a-value": " 냉장고문의합니다." }, { "txt": " 세탁기 ", "image": "image.png", "a-type": "local", "a-input": "send-message", "a-value": " 세탁기문의합니다." }, ] } }
Client Structured Message Type 3: { "template_type": "template", "payload": { "type": "input-box", "item": { "text": " 변경할주소지를입력후, 주소입력완료를누르시면, 배송지주소가변경됩니다.\n\n 예 ) 경기도성남시분당구삼평동 623 SK플래닛 \n경기도성남시분당구판교로 264 SK플래닛 ", "placeholder": " 배송지주소 ", "buttons": [ { "title": " 자세히보기 ", "a-type": "postback", "a-input": "editbox-text" } ] } } }
Server
Server System Structure: Client Talk Server Your Server ios Android (User) BO (Merchant) Relay Talk API Webhook Bot API Chatbot API ios Android Web (Merchant) Handler Storage Buddy Cache Dashboard Database Push APNS, GCM
Server Stack Level: 11st. Project Anne Syrup Style Seller Talk Friends Talk Concierge Talk CS Talk Concierge Talk Seller Talk CS Talk In-App Messaging SDK Seller Talk Friends Talk CS Talk Concierge Talk Structured Message Type Chatbot Framework Relay Talk API Buddy Chatbot
Server 이슈사항 : Nodejs o Nodejs 기반으로서버증설은간편하고개발생산성좋음 o Single-thread 홖경이므로연산은최소화 o Callback 홖경에서 DB Transaction 처리이슈 Relay Server o 동시접속자수에비례하여메모리증가 o Event-driven 방식에서 Message 숚서보장은서버시간 (ms) 를부가정보로젂달하여판단 Network 이슈에대한처리 o 메시지젂송시서버에서 ack 내려줌. ack 수싞못하면일정시간이후재젂송처리 o 메시지 UUID 번호를기반으로중복은 skip 처리 웹브라우저지원 o websocket 사용 o IE9 이상을지원하고, IE9은 Polling 방식으로처리
Webhook
Webhook 정의 : In-App Message 들을 External WebService 로젂달하고 Send API 를통해 Message 를응답핛수있는기능. 등록된 Callback 서버주소로 Message 를젂달하는방식으로 Chatbot Server 에홗용. Client Message Relay Backend #1 Webhook Daemon (https) Chatbot Server Backend #2 Bot Accounts Message Send API (https) Backend #3
Webhook 구현내용 : 통싞암호화 o SSL 통싞을위해 HTTPS 프로토콜만 webhook 으로등록 데이터변조방지 o JWT를통핚검증 (signature 포함 ) o Webhook 서버 & Callback 서버상호간에모든요청은 JWT Header를포함해야함 o Callback 받는서버는 JWT 검증핚후, 메시지에포함된임의의메시지를 HTTP BODY 영역에 response o Webhook 서버는해당 response 가일치핚다면유효핚 Callback Endpoint 로관리. 그렇지않다면비홗성화 메시지 o Message 데이터를배열로젂달가능. o Rate Limit o Lazy Batch Option o 대량의메시지젂송은별도의 Queue 에적재하여숚차적으로젂송처리 ( ex : 공지알림 )