아키텍처와 흐름

브라우저의 로더·코어·모듈, 채팅 서버, 계정, 서버 API, 웹훅과 고객 데이터가 어떻게 함께 작동하는지, 페이지 조회부터 답변까지 어떤 순서로 처리되는지 설명합니다.

방문자의 브라우저:

loader.js – 몇 킬로바이트 크기의 작은 로딩 구성 요소입니다. 설정을 읽고 동의를 확인하며 최종 위치에 자리 표시자 채팅 버튼을 그립니다(레이아웃 이동 없음). 명령 큐가 있는 window.ReactiveChat을 만들고 그 외의 작업은 하지 않습니다.
코어(core.<hash>.js) – 채팅 창, 연결, 개인정보 가림 처리, 규칙을 담당합니다. 브라우저가 유휴 상태가 되거나, 마우스나 손가락이 채팅 버튼 위에 있거나, API 명령 또는 MousePlayer의 불편 신호가 발생하는 등 트리거가 작동해야 로드됩니다. 대부분의 방문자는 채팅을 열지 않으므로 코어도 처음부터 로드하지 않습니다.
필요 시 모듈 – 제품 투어, 개인정보 보호 안내, 쇼핑몰 기능을 각각 필요할 때만 로드합니다.
격리 – 모든 요소는 닫힌 shadow DOM 안에 있습니다. 스타일은 constructable stylesheet를 사용하며 인라인 스크립트, eval, 쿠키는 없습니다.

reactive.chat 측:

배포: https://cdn.reactive.chat/ – 로더, 코어, 모듈을 제공합니다.
채팅 서버: wss://ws.reactive.chat/rc_wss/ – rc.v1 프로토콜의 WebSocket입니다. HTTP 대체 연결, 오프라인 양식, 업로드, 개인정보 보호 안내와 Smart Answer에는 같은 주소에 https:// 를 사용합니다.
계정: https://reactive.chat/app – 프로젝트 설정, 디자인, 지식 베이스, 팀의 상담원 화면입니다.
서버 API: https://reactive.chat/v1/ – 백엔드용 REST 및 MCP입니다.

운영자 측(선택 사항):

브라우저가 loader.js를 로드합니다(비동기로 실행되며 아무것도 차단하지 않음).
로더는 data-rc-*, ReactiveChatSettings와 큐에 있는 boot 호출을 읽고 사이트 키와 동의를 확인한 뒤 자리 표시자를 그립니다.
트리거가 작동하면 로더는 같은 디렉터리에서 코어를 로드합니다.
코어는 자리 표시자와 큐를 이어받고 큐의 명령을 순서대로 처리합니다.
연결을 열고 사이트 키, ID, 언어, 동의, 서명된 신원(있는 경우), 페이지 맥락을 담은 init을 보냅니다.
서버는 출처, 프로젝트와 신원을 확인한 뒤 init_ok로 응답합니다. 계정의 디자인과 텍스트, 규칙, 기능, 제한, 지금까지의 대화 기록이 포함됩니다.
위젯이 준비됩니다(ready 이벤트). 단일 페이지 앱의 페이지 변경은 자동으로 보고합니다.

방문자가 작성하면 브라우저에서 개인정보를 가림 처리하고 메시지에 고유 ID를 붙입니다.
서버가 저장하고(ID로 중복을 인식), 다시 가림 처리한 뒤 에코로 확인합니다.
AI 어시스턴트가 지식 베이스를 검색하고, 확인된 사용자의 주문 관련 질문에는 고객 데이터 엔드포인트도 조회한 뒤 답변을 스트리밍합니다. 팀에 인계할 시점은 계정에서 설정합니다(매뉴얼).
동시에 이벤트는 큐를 거쳐 웹훅과 연동으로 전달됩니다. 채팅은 이를 기다리지 않습니다.

loader.js는 이름에 버전 번호가 없으며 업데이트 시 교체됩니다. 따라서 복사본 대신 cdn.reactive.chat에서 직접 또는 프록시를 통해 삽입합니다.
코어의 이름은 core.<hash>.js입니다. 해시는 콘텐츠에서 생성되며 각 로더는 자신의 코어를 정확히 알고 있습니다. 따라서 로더와 코어가 항상 일치하고 코어를 오래 캐시할 수 있습니다.
설정(디자인, 텍스트, 규칙, 투어)은 연결할 때마다 서버에서 가져옵니다. 계정 변경에는 새 스니펫이 필요하지 않습니다. 잠시 후 적용되며 설정에 따라 최대 1분이 걸립니다.
프로토콜 버전은 1입니다. 새 필드는 추가되며 알 수 없는 필드는 무시됩니다.
코어가 로드된 뒤 ReactiveChat.version으로 코어 버전을 확인할 수 있습니다.

최종 업데이트: 2026-10-25