다른 사이트·앱에 Embed 넣기

대시보드에서 복사한 embed 코드를 그대로 붙여넣기만 해서 동작하게 하려면, 붙여넣는 "박스"를 어떻게 구현하느냐가 중요합니다.

왜 그냥 붙여넣으면 안 되나요?

React 등에서 dangerouslySetInnerHTML(또는 innerHTML)로 넣은 HTML 안의 <script>는 브라우저가 실행하지 않습니다. 보안상 그렇게 동작합니다.

그래서 스니펫을 "박스"에 넣으면 → div는 보이지만
SDK 로드(script src="...")와 new Slaaad.Terrain(...) 실행이 되지 않아
지도가 뜨지 않습니다.

해결: iframe + srcdoc

붙여넣은 내용을 문서 전체로 취급해 iframe으로 띄우면, iframe 문서 안에서는 스크립트가 정상 실행됩니다.

방법 A: 사용자가 붙여넣은 문자열 앞뒤에 <!DOCTYPE html><html><body>...</body></html> 를 감싼 뒤, 그 문자열을 iframe의 srcdoc 에 넣습니다.
방법 B: 붙여넣은 코드를 별도 .html 파일로 저장한 뒤, 그 페이지를 iframe의 src 로 불러옵니다.

방법 A를 적용하려면 붙여넣은 문자열을 srcdoc 에 넣은 iframe을 사용하면 됩니다.

웹·앱에서 범용적으로 쓸 수 있나요?

웹사이트: React, Vue, 일반 HTML, CMS 등 어떤 사이트든 iframe + srcdoc 방식으로 “붙여넣은 스니펫 실행”을 구현할 수 있습니다. (단, CSP로 iframe/스크립트를 막은 환경은 예외.)
앱: WebView가 있다면, 붙여넣은 HTML을 WebView에 문서로 로드하면 같은 스니펫이 동작합니다. “박스”가 WebView인 셈입니다.

모바일 앱 (React Native) 연동

아래 코드는 고객사(앱 개발자)가 본인들의 iOS/Android 앱 소스에 넣는 예시입니다. Slaaad 대시보드나 서버에 넣는 코드가 아닙니다.

슬래드 지도를 앱에 띄우려면, SDK가 설치된 웹페이지를 WebView로 불러오면 됩니다.

작동 순서

고객사가 자기 웹사이트(예: https://고객사웹사이트.com/slaaad-page)에 대시보드에서 복사한 embed 스니펫을 넣어 두고, 그 페이지에서 지도가 잘 나오는지 확인합니다.
고객사가 자기 쇼핑몰/서비스 앱을 개발합니다.
앱의 특정 메뉴(예: "내 땅 보기")를 눌렀을 때 WebView를 띄우고, 1번 웹페이지 URL을 로드합니다.
앱 화면 안에 WebView 창이 열리며, 해당 웹페이지(지도)가 앱 안에 보입니다.

React Native 예시 코드

고객사에게 "모바일 앱에 띄우려면 이렇게 쓰세요" 하고 가이드할 때 사용할 수 있는 예시입니다.

import { WebView } from 'react-native-webview';

export default function SlaaadApp() {
  return (
    <WebView
      source={{ uri: 'https://고객사웹사이트.com/slaaad-page' }}
      style={{ width: '100%', height: 400 }}
    />
  );
}

uri에는 1번에서 만든, SDK/embed가 들어 있는 고객사 웹페이지 주소를 넣습니다.