IZE Chat Widget
Embeddable AI Chat Solution for B2B SaaS
웹에이전시 거인소프트가 제작한 한화로보틱스 홈페이지 프로젝트입니다.
"한화로보틱스"의 기업 브랜드 아이덴티티를 반영한 반응형 웹사이트로 제작되었으며
제품 정보 전달과 글로벌 기업 이미지를 강화하는 UI 구조로 설계되었습니다.
IZE Chat Widget
어떤 웹사이트에도 설치 가능한 AI 채팅 솔루션
- Next.js
- FastAPI
- PostgreSQL
- Redis
- Zustand
- Vercel AI SDK
- TDD
-
ProjectIZE Chat Widget
-
Release Date2025.12
-
TypeB2B SaaS / Embeddable Widget
-
RoleArchitecture Design & Fullstack Dev
- 프로젝트 유형
- B2B SaaS / Embeddable AI Chat Widget
- 기술 스택
- Next.js, FastAPI, PostgreSQL, Redis, Zustand, Vercel AI SDK
- 담당 역할
- 아키텍처 설계부터 배포까지 전 과정 담당 (1인 개발)
- 개발 기간
- 약 4주
- 핵심 성과
- Script Tag 한 줄로 설치 가능한 AI 채팅 시스템 구축
Project
Overview
기업 고객이 자사 웹사이트에 AI 채팅 기능을 손쉽게 추가할 수 있도록 설계된 B2B SaaS 솔루션입니다.
Script 태그 한 줄만 삽입하면 어떤 웹사이트에서도 동작하며, 실시간 스트리밍 응답으로 자연스러운 대화 경험을 제공합니다. 고객별 도메인 인증, 사용량 제한, 브랜딩 커스터마이징 등 B2B에 필요한 핵심 기능을 갖추었습니다.
Key
Features
• 간편 설치: Script 한 줄로 어떤 웹사이트에도 설치
• 실시간 응답: SSE 스트리밍으로 타이핑 효과 구현
• 다양한 배포 모드: floating, inline, fullpage 3가지
• 대화 기록 저장: 세션/로컬/계정별 선택 가능
• 보안: 도메인 인증, API 키 검증, Rate Limiting
• 브랜딩: 색상, 로고, 환영 메시지 커스터마이징
Challenge 1 | 크로스 도메인 통신 문제
문제: 외부 웹사이트에 삽입되는 위젯이 호스트 페이지와 안전하게 통신해야 했습니다. 직접 DOM 접근은 보안상 불가능하고, 크로스 오리진 환경에서의 데이터 교환이 필요했습니다.
해결: iframe 격리 + postMessage API를 활용한 메시지 기반 통신 아키텍처를 설계했습니다. Origin 검증으로 허가된 도메인만 통신 가능하게 하고, 정형화된 메시지 프로토콜로 안정적인 양방향 통신을 구현했습니다.
Challenge 2 | 실시간 스트리밍 응답
문제: AI 응답이 생성되는 동안 사용자가 텍스트가 타이핑되는 것처럼 실시간으로 볼 수 있어야 했습니다. 일반적인 REST API로는 응답 완료까지 기다려야 하는 문제가 있었습니다.
해결: Server-Sent Events(SSE)를 활용하여 서버에서 클라이언트로 토큰 단위 스트리밍을 구현했습니다. Vercel AI SDK의 StreamingTextResponse를 활용하여 자연스러운 타이핑 효과를 제공합니다.
Challenge 3 | B2B 멀티테넌시 설계
문제: 여러 기업 고객이 각자의 설정(도메인, 브랜딩, 사용량 제한 등)으로 동일한 서비스를 사용해야 했습니다. 고객 간 데이터 격리와 권한 관리가 필요했습니다.
해결: API Key 기반 고객 식별 + 도메인 화이트리스트 검증 시스템을 구축했습니다. 모든 요청에서 고객 컨텍스트를 검증하고, 요금제별 Rate Limiting으로 리소스를 공정하게 배분합니다.
What I Learned | 배운 점
• 아키텍처 설계: 확장성과 보안을 고려한 계층 분리의 중요성을 체감했습니다
• TDD 방법론: 테스트 먼저 작성하니 요구사항이 명확해지고 리팩토링이 자유로워졌습니다
• 실시간 통신: SSE, WebSocket 등 다양한 실시간 기술의 장단점을 비교 학습했습니다
• B2B SaaS 패턴: 멀티테넌시, 요금제 설계, 고객별 커스터마이징 등 SaaS 개발 경험을 쌓았습니다
