🧩
임베드 SDK는 호스트 환경에서 충돌 없이 가볍게 동작하는 것이 기능 구현보다 우선이었습니다.
배경
이 SDK는 호스트 사이트에 standalone.js 형태로 삽입돼 텍스트 채팅·음성·캐릭터 동작을 제공합니다. 임베드 코드라 ① 호스트의 React/라이브러리와 충돌하면 안 되고, ② 외부에서 불러오므로 가벼워야 하며, ③ 여러 고객사에 동시 배포되므로 배포가 안전·자동이어야 합니다.
한 일
- 배포 방식 전환 (NPM → CDN standalone): 처음엔 NPM 패키지로 배포했는데 데모 사이트에서 호스트 React 버전과 충돌했습니다. CDN standalone 스크립트 방식으로 전환하기로 직접 결정해 호스트 React와 충돌하지 않도록 정리했습니다.
- 배포 파이프라인 자동화: 처음 경험하는 배포 구조라 도구 선정부터 형상관리(배포 경로·버전 관리) 방식까지 직접 정하고 팀원과 다듬었습니다. GitHub Actions 워크플로우를 직접 작성해 Jenkins에서 옮기고 패키지 매니저를 pnpm으로 통일, 배포 경로를 3종(/latest, /v{버전}, /build-{번호})으로 나눠 동시 실행 충돌을 막았습니다. 푸시 한 번이면 CDN까지 자동 배포됩니다.
- 번들·에셋 최적화: 최적화 지점은 AI 도구로 진단하되 적용 판단은 직접 내렸습니다. standalone 번들 gzip 196KB, 도트아트 스프라이트시트 245KB → 8.4KB, 매니페스트 의존 제거로 초기 요청 2회 → 1회.
결과
- 184: vitest 케이스 전부 통과
- 196KB: 번들 (gzip)
- 8.4KB: 스프라이트 (245KB→)
채팅 응답은 ReadableStream 스트리밍으로 처리하고 2D 커서 캐릭터의 모바일 동작을 보강했습니다(모션 프레임 idle 6 / walking 8 / speaking 4). SDK는 현재 운영 중입니다.
정리
처음 다루는 배포 구조라 도구 선정부터 직접 결정했습니다. 테스트·번들 최적화·자동 배포로 정량 검증되는 작업입니다(vitest 184).