커머스·결제
한 줄로 붙는 쇼핑몰 사이즈 추천 위젯
기존 사이트를 고치지 않고 한 줄만 넣으면, 방문자가 맞는 사이즈를 바로 확인합니다.
fitscope-shop-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- 우측 하단 런처를 누르면 위젯이 펼쳐집니다
- 빠른입력을 채우면 XS~XL 사이즈별 점수가 나옵니다
- 브라우저 폭을 360px로 줄이면 바텀시트로 열립니다
- 페이지를 스크롤해도 런처는 우측 하단에 고정됩니다
만들면서 풀어야 했던 것
- 호스트 페이지의 전역 스타일을 차단하려다 위젯이 화면 위로 뜨지 못하는 문제를 만나, 스타일 차단과 위치 지정을 분리하는 방식으로 해결했습니다. 쇼핑몰 쪽에서 글꼴·박스 규칙을 전역으로 걸어둔 상태에서도 위젯 렌더 오염 0을 실측으로 확인했습니다.
- 임베드된 화면 안에서는 카카오 인증 창을 띄울 수 없어, 최상위 새 탭에서 인증하고 서버에서 토큰을 교환한 뒤 위젯으로 회원 상태를 돌려주는 구조로 다시 짰습니다. 위조된 출처에서 온 메시지를 거부하는 것까지 확인했습니다.
- 쇼핑몰이 외부 스크립트 차단 정책을 걸어두면 위젯이 아예 로드되지 않는다는 점을 미리 확인해, 설치 가이드에 위젯 도메인을 허용하는 절차를 넣어 설치 단계에서 막히지 않도록 했습니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.