OH SU JINFrontend Engineer

외부 서비스운영 중임베드 위젯

임베드 챗 위젯

외부 사이트에 스크립트 한 줄로 붙는 임베드형 챗 위젯.

담당
프론트엔드 전담 · 위젯 코어 · 배포 파이프라인
팀
백엔드 1 · 프론트 1(본인)
기간
2026.08

외부 사이트에 스크립트 한 줄로 붙는 챗 위젯. 어떤 페이지에 얹힐지 모르기 때문에 좌표 계산과 스크롤 간섭 방지가 기능보다 중요했다.

배포
외부 사이트 임베드형
스택
TypeScriptVanilla DOMCI/CDAWS

주요 작업

  • 스크롤 체이닝 — 위젯을 끝까지 스크롤하면 뒤 페이지가 밀린다

    • 패널 내부 스크롤이 끝에 닿으면 부모 페이지가 대신 스크롤되는 기본 동작이 있다.
    • 남의 사이트 위에 얹히는 위젯에서는 이것이 곧 '사이트가 멋대로 움직인다'로 체감된다.
    • 자동 포커스·입력창 높이·헤더 접힘까지 묶어 모바일 UX를 다시 잡았다.
  • 드래그 로직을 한 곳으로

    • 버튼과 헤더가 각각 드래그를 구현하고 있어서 전체화면 가드 같은 예외가 한쪽에만 들어가 있었다.
    • 단일 모듈로 합치고 나니 예외 처리를 한 번만 쓰면 됐다.
펼침 방향
사분면 자동 판정
화면 밖으로 나가지 않게
드래그
단일 모듈로 통합
버튼·헤더 경로 일원화
빌드 게이트
타입 검사를 CI 단계로 승격
배포
푸시 → 자동 배포 · 5회 실증
백엔드 무영향 확인