플러스프로젝트 배경
공고의 필수 제출물은 '쇼핑몰 상품 상세에 스크립트 한 줄로 설치되는 임베드 위젯 + 크로스도메인 동작'입니다. 임베드 위젯은 설치처(고객) 도메인 안에서만 동작해 포트폴리오로 공개 시연하기 어렵습니다. 그래서 설치 형태 자체를 공개 URL(도메인 A 쇼핑몰 / 도메인 B 위젯 서버 분리 배포)로 재현하고, 남의 전역 CSS 안에서 오염 없이 살아남는 격리를 핵심 난제로 정조준했습니다.
프로젝트 성과
CSS 격리 검증
호스트가 box-sizing:content-box !important, button{all:unset}, 세리프 폰트를 전역으로 걸어도 위젯 렌더 오염 0(폰트·색·line-height·자간 상속 차단 확인).
크로스도메인·카카오 왕복
서로 다른 오리진 간 CORS 프리플라이트 포함 API 왕복. 카카오 로그인 실제 계정으로 왕복 검증 완료.
프로덕션 무결성
라이브 2서비스 배포 후 E2E에서 콘솔 에러 0.
설치 가이드·CSP 예외 안내
호스트가 script-src CSP를 걸면 외부 위젯 스크립트가 차단되므로, 설치 가이드에 위젯 도메인을 host CSP에 허용하도록 안내. 외부몰 임베드의 가장 흔한 차단 원인을 설치 단계에서 선제 방어.
핵심 기능
Shadow DOM 격리 · :host all:initial(!important 없이)
all:initial에 !important를 주면 위젯이 자기 host 요소에 건 인라인 position·z-index까지 이겨 initial로 되돌려 위젯이 스택되지 못합니다. 상속 차단은 별도 리셋으로 처리.
진행 단계
1단계 · 임베드 구조 설계·배포
2026.07.
설치처 쇼핑몰(도메인 A, 정적)과 위젯 서버(도메인 B, Next.js)를 서로 다른 오리진으로 Railway 2서비스에 분리 배포해 크로스도메인 임베드 성립 조건을 확보.
프로젝트 상세
이 포트폴리오는 공고의 필수 제출물인 '임베드 위젯 유사 사례'에 맞춰 자체 기획·개발한 데모입니다. 실제 클라이언트에게 받은 수주·납품 실적이 아닙니다. 등장하는 브랜드·데이터는 모두 가상(가상 쇼핑몰 MOODROBE)이며, 주장 대신 라이브 데모로 지금 직접 확인하실 수 있습니다. 소스는 비공개 리포로 관리하며 요청 시 열람 권한을 드립니다. 이 데모는 필수 제출물의 핵심 난제(외부 도메인 임베드·크로스
