피드로 돌아가기
Dev.toFrontend
원문 읽기
iFrame 제거 및 Vanilla JS 직접 주입으로 UX 병목 해결
Why We Ditched iFrames for Our Testimonial Widget (And Wrote 1,000 Lines of Vanilla JS Instead)
AI 요약
Context
초기 Wall of Love 위젯에 iFrame 아키텍처를 채택했으나, 동적 콘텐츠 높이 동기화 문제와 모바일 스크롤 간섭 발생. 특히 호스트 페이지 배경색과의 부조화로 인한 시각적 Flash 현상 및 300ms의 렌더링 지연이 사용자 경험을 저해하는 핵심 병목으로 작용.
Technical Solution
- iFrame을 제거하고 Script Tag를 통한 Direct DOM Injection 방식으로 전환하여 높이 동기화 로직 제거
- Shadow DOM 대신 .proofly-root 클래스 접두사를 통한 CSS Scoping을 적용하여 호스트 페이지의 폰트 상속 허용
- CSS Custom Properties를 도입하여 호스트 페이지에서 위젯 테마를 직접 제어하는 유연한 스타일링 구조 설계
- 외부 라이브러리 의존성을 완전히 배제한 Vanilla JS 구현으로 다양한 호스트 환경(Webflow, WordPress 등)과의 충돌 방지
- 전체 초기화 로직에 try/catch 블록을 적용하여 위젯 오류가 호스트 페이지 전체의 런타임 에러로 전이되는 것을 차단
- 16자리 랜덤 문자열 기반의 embedSlug를 식별자로 사용하여 별도의 인증 세션 없이 공개 데이터 API에 접근하는 단순 보안 모델 채택
실천 포인트
- 동적 높이 조절이 필요한 임베드 위젯 설계 시 iFrame보다 Direct DOM 주입 방식 검토 - 디자인 일관성을 위해 Shadow DOM보다 CSS Variable과 Class Prefixing 조합을 통한 스타일링 제어 권장 - 제3자 환경에 배포되는 스크립트는 의존성 없는 Vanilla JS로 작성하여 호스트 환경과의 충돌 가능성 최소화 - 외부 스크립트 주입 시 호스트 페이지의 안정성을 위해 전체 진입점에 최상위 예외 처리 구조 적용