FitScope — 상품 페이지에 한 줄로 붙는 사이즈·핏 추천 위젯
쇼핑몰 상품 상세 페이지에 스크립트 태그 한 줄만 설치하면 뜨는 임베드형 위젯입니다. 방문자는 키·몸무게·선호 핏을 입력하고 즉시 사이즈 추천을 받습니다. 위젯은 설치된 쇼핑몰의 CSS와 완전히 격리됩니다.
등장하는 쇼핑몰(MOODROBE)·브랜드·상품·데이터는 전부 가상입니다. 실제 판매 상품이 아니며, 사이즈 추천은 참고용입니다.
🧩 Shadow DOM 격리
호스트가 box-sizing·폰트·색을 아무리 공격적으로 걸어도 위젯은 :host{all:initial}로 상속을 끊고 자기 스타일을 지킵니다.
🌐 크로스도메인 임베드
위젯은 이 서버(도메인 B)에서 서빙되고 남의 쇼핑몰(도메인 A)에 얹힙니다. API는 CORS로 안전하게 오갑니다.
📐 룰 기반 핏 스코어
브랜드 사이즈표(데이터 사전)와 계산식으로 사이즈별 점수를 산출해 최적 사이즈를 추천합니다. 순수 함수라 재현 가능.
💬 카카오 로그인 (배선 중)
서버사이드 Authorization Code Flow. 새 탭 인가 → 토큰 교환 → postMessage로 위젯 세션 복귀.
설치 — 이 한 줄이 전부입니다
<script
src="https://<위젯서버>/widget.js"
data-fitscope-brand="moodrobe"
data-fitscope-product="denim-jacket-oversized"
defer></script>운영자는 상품 상세 템플릿에 위 태그만 붙입니다. 위젯이 우측 하단에 뜨고, 접힘/펼침으로 동작합니다.
이 사이트에서 확인할 수 있는 것
- 접힘 → 펼침 전환과 우측 하단 런처
- 공격적인 호스트 전역 CSS 속에서도 깨지지 않는 위젯 UI
- 빠른 입력 → 분석 중 → 결과(회원/비회원) 동선
- 사이즈별 핏 스코어 막대와 추천 사이즈
위젯을 실제로 얹은 목업 쇼핑몰(도메인 A)은 로컬 개발에서 host-shop/index.html로 확인합니다. 소스: github.com/sungwooklim02/fit-widget-demo