[Web] 타 서비스에 임베딩해서 사용하는 서비스 개발 방법

1. Iframe Embed (가장 일반적)

💡 요약

• 호스트 서비스 내의 팝업이 내부에 iframe를 가지고 있어야 한다..
• 임베드 서비스를 별도의 URL로 띄우고, 호스트 서비스에서 iframe으로 임베드한다.

🟢 장점	🔴 단점
• 완전히 분리된 SPA • CSS/JS 충돌 없음 • 배포, 업데이트 독립적	• 부모 ↔ 자식 간 데이터 통신이 window.postMessage로만 가능 • SSR/CSR 혼합일 때 SEO는 불가능 (보통 팝업이므로 문제는 적음) • 이질감이 들지 않기 위해서는 디자인 통일이 필요함

✏️ 실제 예시

호스트 팝업 컴포넌트에서 아래와 같이 iframe을 삽입한다.

<iframe
  src="https://your-service.com/embed/survey?id=123"
  style="width:800px; height:600px; border:0;"
></iframe>

 

데이터 전달 필요 시:

// 호스트 서비스
iframe.contentWindow.postMessage({ token: "xxx" }, "*");

// 임베드 서비스
window.addEventListener("message", (event) => {
  console.log("호스트 서비스에서 온 데이터:", event.data);
});

2. Web Component (Custom Elements)

💡 요약

• 임베드 서비스를 Web Component(예: <my-survey-popup />)로 빌드한다.
• 상대방 서비스에서 HTML 태그처럼 import해서 사용한다.

🟢 장점	🔴 단점
• 스타일 스코프 캡슐화 가능 (Shadow DOM) • 부모 앱에 쉽게 통합 가능 • props로 데이터 전달 용이	• polyfill 필요할 수 있음(IE 지원 X) • 번들 사이즈 주의가 필요함

✏️ 실제 예시

호스트 서비스:

import 'https://your-cdn.com/my-survey-popup.js';

customElements.define('my-survey-popup', MySurveyPopup);

<my-survey-popup survey-id="123"></my-survey-popup>

3. JavaScript SDK 방식

💡 요약

• 임베드 서비스를 JavaScript SDK로 배포한다.
• 호스트 서비스에서 SDK 함수를 호출하면 팝업/모달을 동적으로 띄울 수 있다.

🟢 장점	🔴 단점
• 사용자 경험을 임베드 서비스 쪽에서 제어 가능 ◦ 모달을 띄우는 시점 ◦ 모달 크기, 위치 • iframe 필요 없어도 됨 (필요 시 동적 생성) ◦ postMessage없이 콜백 기반으로 결과 반환 가능	• 로딩/권한/정적 리소스 관리 복잡 • JS 충돌 위험

✏️ 실제 예시

<script src="https://your-cdn.com/survey-sdk.js"></script>
<script>
  SurveySDK.open({
    surveyId: 123,
    onComplete: (result) => {
      console.log('설문 완료:', result);
    }
  });
</script>

4. Module Federation (Webpack 5)

💡 요약

• 마이크로 프런트엔드(MFE) 방식으로
• 호스트 서비스에서 임베드 서비스 빌드 결과물을 런타임에 로드해서 React/Vue 컴포넌트로 사용 가능하다.

🟢 장점	🔴 단점
• 완전히 모듈화된 컴포넌트 공유 • 앱 간 버전 동기화 가능	• Webpack 5 필요 ◦ 호스트 서비스에 대한 의존성 발생 ◦ SSR 환경 지원 어려움 • 빌드/배포 파이프라인 복잡 ◦ 임베드 서비스 빌드 결과물을 CDN에 배포 → 호스트 서비스에서 Webpack Config에 리모트 연결 → 호스트 서비스 런타임에 CDN에서 모듈을 다운로드 • CDN에 올라간 파일의 버전 관리 필요 • 캐시 무효화 정책 필요 • Remote Entry 불러오는 시점의 동기화 필요

5. Static Build Import(npm 패키지 배포)

💡 요약

• 서비스 패키지를 npm 패키지로 배포한다.
• 호스트 서비스에 임베드 서비스 패키지를 npm install으로 가져온다.
• import해서 컴포넌트를 직접 사용한다.

🟢 장점	🔴 단점
• 동적 로딩 없이 빠름 • 컴파일 시점에 타입 검증 가능	• 배포 시 버전 동기화 필요 • 호스트 서비스 완전한 코드 의존성 생김

 

🎯 정리: Iframe Embed 사용

🟢 Iframe의 장점

1. 호스트 서비스에 대한 의존성이 낮다.

방법	호스트 서비스 의존도
Iframe Embed	거의 없음
JavaScript SDK	부모가 script 삽입해야 함 (의존도 중간)
Web Component	부모가 modern browser + Shadow DOM 지원 필요 (의존도 높음)
Module Federation	Webpack 5 필수 (의존도 매우 높음)
Static Build Import	NPM 설치+빌드 파이프라인 통합 필요 (의존도 매우 높음)

2. 호스트 서비스의 기술스택에 영향 받지 않는다.

프레임워크 종류에 상관없이 jQuery를 쓰는 서비스에서도 완벽하게 동작한다.

3. css, js 충돌이 없다.

ifame은 독립적인 브라우저 컨텍스트이기 때문이다.

4. 배포/업데이트 프로세스가 독립적이다.

임베드 서비스 업데이트 시 호스트 서비스는 재배포가 필요없다.

5. 보안성

CORS 정책, Same-Origin Policy로 서로의 DOM 접근을 차단한다.

대신 인증 토큰은 안전하게 처리 필요하다.

🔴 Iframe의 단점

❌ 단점	💡 대응책
디자인 이질감	테마 커스터마이징
크기/레이아웃 고정	postMessage로 동적 높이
SEO 반영 안됨	필요 시 SSR 고려
통신 복잡성	표준 프로토콜 정의
초기 로딩 느림	CDN 최적화
접근성 관리 필요	title, 포커스 전략