## 어디서든 쓸 수 있는 챗봇 XGen으로 만든 AI 워크플로우를 외부 웹사이트에 챗봇 형태로 임베드할 수 있는 위젯을 개발했다. 스크립트 한 줄 삽입으로 어떤 사이트든 AI 챗봇을 달 수 있다. ### 임베드 위젯 아키텍처 위젯은 독립적인 번들로 빌드되어 ` ``` ### Shadow DOM 격리 ```typescript class XGenChatWidget extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'closed' }); // 스타일 주입 const style = document.createElement('style'); style.textContent = widgetStyles; shadow.appendChild(style); // React 앱 마운트 const container = document.createElement('div'); shadow.appendChild(container); const root = createRoot(container); root.render( ); } } customElements.define('xgen-chat', XGenChatWidget); ``` ### 위젯 UI 구성 위젯은 펼치기/접기가 가능한 플로팅 버튼으로 시작한다. 클릭하면 채팅 창이 애니메이션과 함께 열린다. ```tsx const ChatWidget: React.FC = ({ workflowId, theme }) => { const [isOpen, setIsOpen] = useState(false); return (

{isOpen && (

setIsOpen(false)} />

)} setIsOpen(!isOpen)} isOpen={isOpen} />

); }; ``` ### 커스터마이징 옵션 위젯은 다양한 커스터마이징을 지원한다. 색상 테마, 위치, 초기 메시지, 아바타 이미지 등을 설정할 수 있다. ### 번들 최적화 임베드 스크립트는 가능한 작아야 한다. React 대신 Preact를 사용하고 Tree Shaking을 적용해 최종 번들 크기를 약 45KB(gzip)로 줄였다. 로딩이 호스트 사이트 성능에 영향을 주지 않도록 `async` + `requestIdleCallback`으로 지연 로딩한다. ### CORS와 보안 외부 사이트에서 XGen API를 호출하므로 CORS 설정이 중요하다. 워크플로우 소유자가 허용 도메인을 지정하면, 해당 도메인에서만 API 호출이 가능하도록 설정했다.