FitScope — 상품 페이지에 한 줄로 붙는 사이즈·핏 추천 위젯
쇼핑몰 상품 상세 페이지에 스크립트 태그 한 줄만 설치하면 뜨는 임베드형 위젯입니다. 방문자는 키·몸무게·선호 핏을 입력하고 즉시 사이즈 추천을 받습니다. 위젯은 설치된 쇼핑몰의 CSS와 완전히 격리됩니다.
등장하는 쇼핑몰(MOODROBE)·브랜드·상품·데이터는 전부 가상입니다. 실제 판매 상품이 아니며, 사이즈 추천은 참고용입니다.
Shadow DOM 격리
호스트가
box-sizing·폰트·색을 아무리 공격적으로 걸어도 위젯은:host{all:initial}로 상속을 끊고 자기 스타일을 지킵니다.크로스도메인 임베드
위젯은 이 서버(도메인 B)에서 서빙되고 남의 쇼핑몰(도메인 A)에 얹힙니다. API는 CORS로 안전하게 오갑니다.
룰 기반 핏 스코어
브랜드 사이즈표(데이터 사전)와 계산식으로 사이즈별 점수를 산출해 최적 사이즈를 추천합니다. 순수 함수라 재현 가능.
카카오 로그인연동 키 설정됨
서버사이드 Authorization Code Flow. 새 탭 인가 → 토큰 교환 →
postMessage로 위젯 세션 복귀.
설치 화면 미리보기
위젯이 설치된 예시 쇼핑몰을 그대로 띄웠습니다. 데스크톱 폭에서는 패널, 좁은 폭에서는 바텀시트로 열립니다.
1280px 화면을 축소해 보여 줍니다. 우측 하단 런처를 눌러 보세요 — 패널로 열립니다.
설치 — 이 한 줄이 전부입니다
<script
src="https://fitscope-widget-production.up.railway.app/widget.js"
data-fitscope-brand="moodrobe"
data-fitscope-product="denim-jacket-oversized"
data-fitscope-category="outer"
defer></script>운영자는 상품 상세 템플릿에 위 태그만 붙입니다. 위젯이 우측 하단에 뜨고, 접힘/펼침으로 동작합니다.
고른 사이즈를 상품 옵션으로 넘기는 선택 이벤트(fitscope:size)와 페이지에서 위젯을 여는 이벤트(fitscope:open)는 선택 사항입니다. 받지 않아도 위젯은 그대로 동작합니다.
이 사이트에서 확인할 수 있는 것
- 접힘 → 펼침 전환과 우측 하단 런처
- 공격적인 호스트 전역 CSS 속에서도 깨지지 않는 위젯 UI
- 빠른 입력 → 분석 중 → 결과(회원/비회원) 동선
- 사이즈별 핏 스코어 막대와 추천 사이즈
- 결과에서 사이즈를 골라 비교하고, 예시 쇼핑몰의 상품 옵션으로 넘기기
위젯을 실제로 얹은 가상 쇼핑몰(도메인 A): fitscope-shop-production.up.railway.app · 소스는 비공개 저장소로 관리합니다.