Splat Labs
Back to Blog
Article

웹사이트에 3D Gaussian Splat 뷰어 임베드하는 방법

단 한 줄의 HTML로 어떤 웹사이트에든 인터랙티브 3D Gaussian Splat 뷰어를 임베드하는 방법을 배우세요. 임베드 코드를 복사하고, 사이트에 붙여넣으면 방문자들이 브라우저에서 직접 포토리얼리스틱 3D 씬을 탐색할 수 있습니다.

Splat Labs TeamFebruary 6, 20268분 읽기
Open Dataset
TutorialEmbedWeb DevelopmentGaussian SplattingHow-Toiframe
웹사이트에 3D Gaussian Splat 뷰어 임베드하는 방법

3D Gaussian Splat을 임베드해야 하는 이유?

정적 이미지나 360도 사진조차도 보여줄 수 있는 것이 한정되어 있습니다. Gaussian Splat 임베드는 웹사이트 방문자에게 완전히 포토리얼리스틱한 3D 씬을 걸어 다닐 수 있는 능력을 부여합니다 — 회전하고, 확대하고, 어느 각도에서든 탐색 — 모두 단 하나의 앱도 설치하지 않고.

매물을 소개하는 부동산 중개인이든, 이해관계자들과 현장 진행 상황을 공유하는 건설 회사든, 인터랙티브 포트폴리오를 구축하는 크리에이티브 스튜디오든, Gaussian Splat 뷰어를 임베드하면 수동적인 시청자를 능동적인 탐험가로 바꿀 수 있습니다.

Splat Labs Cloud를 사용하면, 임베드는 단 한 줄의 HTML을 복사하는 것만큼 간단합니다.

작동 방식

Splat Labs Cloud에 업로드하는 모든 프로젝트는 공유 가능한 뷰어 URL을 얻습니다. 그 URL은 브라우저에서 직접 열거나, HTML <iframe> 태그로 감싸서 어떤 웹페이지에든 임베드할 수 있습니다 — 자신의 사이트, 블로그, Zillow 매물, MLS 페이지, Notion 문서, 또는 WordPress, Squarespace, Webflow 같은 CMS.

프로세스는 다음과 같습니다:

1단계: 공유 대화 상자 열기

Splat Labs Cloud에서 Gaussian Splat을 업로드하고 처리한 후, 프로젝트를 엽니다. 뷰어 왼쪽에 사이드바 서랍이 보일 것입니다. 그 사이드바 하단에서 공유 버튼을 클릭합니다.

이것이 공유 대화 상자를 열며, 여기서 액세스 설정을 제어하고 임베드 코드를 얻을 수 있습니다.

Splat Labs 공유 및 임베드 대화 상자 — iframe 코드를 얻으려면 임베드를 클릭하세요 Splat Labs 공유 대화 상자. "링크 공유 활성화"가 체크되어 있는지 확인하고, EMBED 버튼을 클릭하여 iframe 코드를 얻으세요.

2단계: 임베드 URL 또는 코드 얻기

공유 대화 상자에서:

  1. **"링크 공유 활성화"**가 체크되어 있는지 확인하세요 — 이것은 링크가 있는 누구나 프로젝트를 볼 수 있게 합니다.
  2. 임베드 섹션을 확장하려면 EMBED 버튼을 클릭합니다.

이제 두 개의 필드가 보일 것입니다:

  • 임베드 URL — Zillow, Notion, 또는 MLS 같은 플랫폼에 직접 사용하거나 붙여넣을 수 있는 뷰어 URL.
  • 임베드 코드 — 웹사이트에 바로 복사하여 붙여넣을 수 있는 준비된 HTML <iframe> 스니펫.

임베드 URL과 HTML 코드를 보여주는 Splat Labs 임베드 코드 대화 상자 EMBED를 클릭한 후, 대화 상자는 임베드 URL과 전체 HTML 임베드 코드를 보여줍니다 — 어느 필드 옆의 복사 아이콘을 클릭하기만 하면 됩니다.

두 필드 모두 오른쪽에 복사 아이콘이 있습니다. 클릭하여 값을 클립보드에 복사합니다.

이 URL은 모든 최신 브라우저에서 작동하는 인터랙티브 3D 뷰어를 로드합니다 — 데스크톱, 태블릿, 모바일.

3단계: 임베드 코드 붙여넣기

임베드 코드를 가져오거나 (또는 뷰어 URL을 표준 HTML <iframe> 태그로 감싸) 웹사이트의 HTML에 넣으세요:

<iframe
  src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

이것이 전부입니다. 이제 방문자들이 페이지를 벗어나지 않고 전체 3D 씬을 탐색할 수 있습니다.

프로 팁: 뷰어가 어느 화면 크기에서도 컨테이너를 채울 수 있도록 width="100%"로 설정하세요. 레이아웃에 맞게 height를 조정하세요 — 대부분의 디자인에는 500~700 픽셀이 잘 작동합니다.

라이브 예시

아래는 Splat Labs Cloud에서 호스팅되는 두 개의 Gaussian Splat 씬입니다. 여기서 바로 상호작용해보세요 — 클릭하고 드래그하여 회전하고, 스크롤하여 확대하고, 모든 각도를 탐색하세요. 이 임베드들은 자신의 웹사이트에서 무료로 사용할 수 있습니다. 각 뷰어 아래의 임베드 코드를 복사하여 사이트에 붙여넣으세요. 공유된 뷰어에는 Splat Labs 워터마크가 포함됩니다.

예시 1: 건설 현장

LiDAR로 캡처하고 Gaussian Splat으로 처리된 다주간 건설 현장. 이것은 건설 팀이 원격 이해관계자들과 공유하여 이동 없이 현장을 탐색할 수 있게 하는 종류의 임베드입니다.

임베드 URL:

https://cloud.rockrobotic.com/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat

임베드 코드 (복사 & 붙여넣기):

<iframe
  src="https://cloud.rockrobotic.com/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

예시 2: 니세코 빌리지 — 눈 덮인 스키 리조트

일본 니세코의 눈 덮인 스키 리조트 마을의 포토리얼리스틱 캡처. 이런 종류의 몰입감 있는 임베드는 관광, 호스피탈리티, 목적지 마케팅에 완벽합니다 — 잠재적인 방문자들이 예약하기 전에 장소를 탐색할 수 있게 합니다.

임베드 URL:

https://cloud.rockrobotic.com/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3

임베드 코드 (복사 & 붙여넣기):

<iframe
  src="https://cloud.rockrobotic.com/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

임베드 커스터마이징

반응형 높이

어떤 화면에서나 16:9 화면 비율을 유지하는 반응형 임베드를 위해, iframe을 컨테이너로 감싸세요:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

이 기법 — 때로 화면 비율 박스라고도 불립니다 — 은 동영상과 지도 임베드에 널리 사용됩니다. 4K 모니터에서 모바일 폰까지 모든 것에서 뷰어가 훌륭하게 보이도록 합니다.

전체 너비 임베드

뷰어가 콘텐츠 열에서 벗어나 브라우저의 전체 너비를 차지하게 하고 싶으신가요? 이 래퍼를 사용하세요:

<div style="position: relative; width: 100vw; left: 50%; margin-left: -50vw;">
  <iframe
    src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

로딩 동작

  • loading="eager" — 페이지가 로드될 때 뷰어가 즉시 로딩을 시작합니다. 임베드가 폴드 위에 있거나 주요 콘텐츠일 때 최적입니다.
  • loading="lazy" — 사용자가 스크롤하여 뷰가 보일 때만 뷰어가 로드됩니다. 여러 임베드가 있는 페이지나 뷰어가 페이지 아래에 있을 때 최적입니다.

플랫폼별 임베드 가이드

Splat Labs 뷰어는 HTML이나 iframe을 지원하는 어디서나 작동합니다. 아래는 모든 주요 플랫폼에 대한 상세한 워크스루입니다.

WordPress

WordPress는 블록 편집기(Gutenberg)를 사용하는지 클래식 편집기를 사용하는지에 따라 iframe을 임베드하는 여러 방법을 제공합니다.

블록 편집기(Gutenberg) — 권장:

  1. 뷰어를 임베드하려는 페이지나 게시물을 엽니다.
  2. + 블록 삽입기를 클릭하고 커스텀 HTML을 검색합니다.
  3. 페이지에 커스텀 HTML 블록을 추가합니다.
  4. 전체 iframe 임베드 코드를 블록에 붙여넣습니다.
  5. 미리보기를 클릭하여 올바르게 렌더링되는지 확인하고 게시합니다.

클래식 편집기:

  1. 페이지나 게시물을 열고 텍스트 탭(시각적이 아닌)으로 전환합니다.
  2. 나타나기를 원하는 곳에 iframe 임베드 코드를 직접 붙여넣습니다.
  3. 시각적 탭으로 다시 전환하여 미리보기하고 게시합니다.

플러그인 사용 (선택 사항):

자주 iframe을 임베드한다면, iFrame 플러그인(WordPress.org에서 70,000개 이상의 활성 설치)은 원시 HTML 대신 간단한 단축코드를 사용할 수 있게 합니다:

[iframe src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat" width="100%" height="600"]

이것은 HTML 보기로 전환할 필요 없이 블록 편집기와 클래식 편집기 모두에서 작동합니다.

Elementor / 기타 페이지 빌더:

Elementor, Divi, Beaver Builder 같은 대부분의 페이지 빌더는 HTML 또는 코드 블록을 포함합니다. 그 블록을 페이지에 드롭하고 iframe 코드를 붙여넣습니다.

문제 해결: 임베드가 빈 공간을 보여주면, WordPress 사이트와 Splat Labs 뷰어가 모두 HTTPS를 통해 제공되는지 확인하세요. 혼합 콘텐츠(HTTPS 페이지의 HTTP iframe)는 현대 브라우저에 의해 차단됩니다. Splat Labs Cloud는 항상 HTTPS를 사용하므로 문제가 없어야 합니다.

Squarespace

Squarespace는 코드 블록을 통해 iframe을 지원하지만, 알아야 할 중요한 플랜 요건이 있습니다.

플랜 요건: 코드 블록에 JavaScript나 iframe을 추가하려면 비즈니스, 커머스 베이직, 커머스 어드밴스드, 코어, 플러스, 또는 어드밴스드 플랜이 필요합니다. 개인 플랜은 코드 블록에서 일반 HTML, 마크다운, CSS만 지원합니다 — iframe이 렌더링되지 않습니다.

임베드 방법:

  1. Squarespace의 페이지 편집기를 엽니다.
  2. 삽입 지점(콘텐츠 섹션 사이의 라인)을 클릭하거나 블록 추가를 클릭합니다.
  3. 블록 메뉴에서 코드를 선택합니다.
  4. 전체 iframe 임베드 코드를 코드 블록 편집기에 붙여넣습니다.
  5. 블록 외부를 클릭하여 저장합니다. 임베드가 편집기에 나타나야 합니다.

편집하는 동안 임베드가 나타나지 않는 경우: 이것은 예상된 동작입니다. Squarespace는 보안 조치로 로그인된 상태에서 때로 iframe 콘텐츠를 숨깁니다. 임베드가 방문자에게 올바르게 렌더링되는지 확인하려면 미리보기를 클릭하거나 시크릿 창에서 게시된 사이트를 보세요.

Webflow

Webflow는 임베드 요소(코드 임베드라고도 함)를 통해 커스텀 코드를 최우선 설계 요소로 취급합니다.

임베드 방법:

  1. 프로젝트를 위한 Webflow 디자이너를 엽니다.
  2. 추가 패널(왼쪽 사이드바의 + 아이콘)을 엽니다.
  3. 임베드(컴포넌트 섹션 아래)를 검색하거나 스크롤하여 뷰어를 표시할 캔버스로 드래그합니다.
  4. 코드 편집기가 자동으로 열립니다 — 전체 iframe 임베드 코드를 붙여넣습니다.
  5. 저장 & 닫기를 클릭합니다.

iframe은 Webflow 캔버스에서 직접 미리보기됩니다. <iframe> 태그로 감싼 콘텐츠는 디자이너에서 라이브 미리보기를 렌더링하므로, Splat Labs 뷰어가 즉시 보여야 합니다.

Wix

Wix는 외부 콘텐츠를 임베드하기 위한 전용 HTML iFrame 요소를 제공합니다.

Wix 편집기 — 임베드 방법:

  1. Wix 편집기에서 왼쪽 사이드바의 + (추가) 버튼을 클릭합니다.
  2. 임베드 코드 → HTML 임베드로 이동합니다.
  3. 페이지에 회색 박스가 나타납니다 — 원하는 위치로 드래그하고 필요에 따라 크기를 조정합니다.
  4. 요소를 클릭한 다음 코드 입력을 클릭합니다.
  5. 코드(웹사이트 주소가 아닌)를 선택합니다.
  6. 전체 iframe 임베드 코드를 텍스트 박스에 붙여넣습니다.
  7. 업데이트(또는 적용)를 클릭합니다.

URL을 통한 임베드 (대안적 방법):

iframe 코드를 붙여넣는 대신, 뷰어 URL을 직접 붙여넣을 수 있습니다:

  1. 위에서 설명한 대로 임베드 요소를 추가합니다.
  2. 코드 선택 대신 웹사이트 주소를 선택합니다.
  3. Splat Labs 뷰어 URL을 붙여넣습니다: https://cloud.rockrobotic.com/viewer/{project-id}?view=splat
  4. 적용을 클릭합니다.

Notion

Notion은 원시 HTML이나 <iframe> 코드를 허용하지 않습니다. 대신, 임베드 블록에 URL을 붙여넣으면 Notion이 iframe 렌더링을 처리합니다.

임베드 방법:

  1. 뷰어를 원하는 Notion 페이지를 엽니다.
  2. 새 줄에 /embed를 입력하거나, + 버튼을 클릭하고 임베드를 선택합니다.
  3. Splat Labs 뷰어 URL을 붙여넣습니다 (iframe 코드가 아닌 — URL만): 
    https://cloud.rockrobotic.com/viewer/{project-id}?view=splat
  4. 링크 임베드를 클릭합니다.

Notion이 인라인 프레임에서 뷰어를 렌더링합니다. 블록 위로 마우스를 가져가고 양쪽 핸들을 드래그하여 크기를 조정할 수 있습니다.

중요: iframe 코드가 아닌 URL을 사용하세요. Notion의 임베드 블록은 깨끗한 https:// URL을 기대합니다. 전체 <iframe> HTML 태그를 붙여넣으면 작동하지 않습니다.

Zillow / MLS 매물

Zillow와 대부분의 MLS 플랫폼은 가상 투어 링크를 지원하지만, 표준 iframe 임베드와는 다르게 작동합니다. 전용 필드에 뷰어 URL을 제공합니다.

Zillow에 추가하는 방법:

  1. zillow.com에서 Zillow 에이전트 계정에 로그인합니다.
  2. 매물 대시보드로 이동하여 부동산을 선택합니다.
  3. 매물 편집을 클릭합니다.
  4. 사진 섹션으로 스크롤합니다 — 아래에 가상 투어 URL이라는 필드가 있습니다.
  5. Splat Labs 뷰어 URL을 붙여넣습니다: 
    https://cloud.rockrobotic.com/viewer/{project-id}?view=splat
  6. 하단으로 스크롤하여 업데이트를 클릭하여 저장합니다.

Zillow는 매물 페이지에 "가상 투어 보기" 버튼을 추가합니다. 방문자들이 클릭하면 3D 뷰어가 열립니다.

MLS에 추가하는 방법:

대부분의 MLS 시스템(Flexmls, Matrix, Bright MLS 등)은 매물 편집 페이지에 가상 투어 URL 필드가 있습니다. 거기에 Splat Labs 뷰어 URL을 붙여넣습니다. 동기화되면, 투어 링크가 자동으로 Zillow, Trulia, Realtor.com, Redfin 및 MLS 피드에서 가져오는 다른 포털로 신디케이트됩니다.

부동산 전문가 참고: 가상 투어가 있는 매물은 훨씬 더 많은 조회수를 받습니다. Zillow는 3D 투어가 있는 매물이 없는 것보다 최대 68% 더 많은 조회수를 받는다고 보고합니다.

GitHub Pages

GitHub Pages 사이트는 정적 HTML이므로, iframe 임베드는 간단합니다 — HTML이나 Markdown 파일에 코드를 직접 붙여넣으면 됩니다.

HTML 파일에서:

페이지의 <body> 어디서나 iframe 임베드 코드를 붙여넣습니다:

<iframe
  src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

Markdown 파일(Jekyll 사용)에서:

GitHub Pages는 기본적으로 Jekyll을 사용하며, Jekyll의 Markdown 렌더러(Kramdown)는 인라인 HTML을 지원합니다. .md 파일에 iframe을 직접 붙여넣으면 사이트가 구축될 때 렌더링됩니다.

참고: GitHub 저장소 페이지의 README.md에 임베드하려는 경우(GitHub Pages 사이트가 아닌), iframe은 렌더링되지 않습니다. GitHub의 Markdown 살균기는 보안상의 이유로 README 파일에서 <iframe> 태그를 제거합니다.

React / Next.js

React와 Next.js 프로젝트에서는 JSX에서 직접 iframe을 사용하세요. HTML <iframe> 태그는 기본적으로 작동합니다 — JSX 속성 명명 차이에 주의하세요.

기본 React 컴포넌트:

export default function SplatViewer({ projectId }) {
  return (
    <iframe
      src={`https://cloud.rockrobotic.com/viewer/${projectId}?view=splat`}
      width="100%"
      height="600"
      frameBorder="0"
      allowFullScreen
      loading="eager"
      style={{ border: 'none' }}
    />
  );
}

주요 JSX와 HTML의 차이점:

  • frameborder → frameBorder (카멜케이스)
  • allowfullscreen → allowFullScreen (카멜케이스)
  • 더 엄격한 React 준수를 위해 frameborder="0" 대신 style={{ border: 'none' }}를 사용하세요

자주 묻는 질문

임베드는 무료인가요?

네. 모든 Splat Labs 프로젝트를 추가 비용 없이 공유하고 임베드할 수 있습니다. 공유된 임베드는 Splat Labs 워터마크를 표시합니다. 비즈니스 및 엔터프라이즈 플랜은 감소된 또는 화이트 레이블 브랜딩을 제공합니다.

방문자들이 무언가를 설치해야 하나요?

아니요. 뷰어는 WebGL을 사용하여 완전히 브라우저에서 실행됩니다. Chrome, Safari, Firefox, Edge에서 — 데스크톱, 태블릿, 모바일에서 작동합니다.

초기 카메라 위치를 제어할 수 있나요?

네. 공유하기 전에 Splat Labs 뷰어에서 선호하는 카메라 각도를 설정하세요. 임베드는 정확히 그 위치에서 로드됩니다.

임베드가 페이지 속도에 영향을 미치나요?

iframe은 페이지 콘텐츠와 독립적으로 로드됩니다. loading="lazy"를 사용하면 뷰어가 스크롤하여 보일 때만 로드되므로, 초기 페이지 로드 시간에 최소한의 영향을 미칩니다.

여러 페이지에 임베드할 수 있나요?

물론입니다. 동일한 뷰어를 임베드할 수 있는 페이지 수에 제한이 없습니다. 뷰어는 Splat Labs CDN에서 제공되므로 어디서나 빠르게 로드됩니다.

임베드가 빈 공간을 보여주는 이유는?

가장 일반적인 원인은 혼합 콘텐츠 차단(HTTP 페이지가 HTTPS iframe을 로드하거나 반대의 경우)과 소스 사이트가 X-Frame-Options 또는 Content-Security-Policy 헤더를 통해 iframe을 차단하는 것입니다. Splat Labs Cloud는 모든 뷰어 URL을 HTTPS를 통해 제공하고 기본적으로 iframe 임베드를 허용하므로, 빈 공간이 보인다면 자신의 사이트도 HTTPS를 통해 제공되는지 확인하세요.

뷰어 브랜딩을 커스터마이징할 수 있나요?

무료 공유 링크에는 Splat Labs 워터마크가 포함됩니다. 비즈니스 및 엔터프라이즈 플랜은 자신의 로고로 브랜딩을 제거하거나 교체할 수 있는 화이트 레이블 옵션을 제공합니다.

자신만의 것을 임베드할 준비가 되셨나요?

Gaussian Splat 뷰어를 만들고 임베드하는 데 불과 몇 분이 걸립니다:

  1. cloud.rockrobotic.com에서 무료로 가입하기
  2. Gaussian Splat 파일(PLY, SPLAT, KSPLAT, 또는 XGRIDS 형식) 업로드
  3. 공유를 클릭하고 임베드 URL이나 iframe 코드를 복사
  4. 웹사이트, 블로그, 또는 매물 플랫폼에 붙여넣기

Splat Labs는 어떤 소스의 Gaussian Splat도 지원합니다 — PortalCam, Lixel L2 Pro, Postshot, Kiri Engine, Luma AI, XGRIDS, 또는 표준 splat 형식을 출력하는 다른 도구.

무료로 임베드 시작하기

특정 플랫폼에서의 임베드에 도움이 필요하신가요? 팀에 문의하세요 — 안내해 드리겠습니다.

Related Articles

Splat Labs에서 공유 및 액세스 제어
Article
February 10, 202610분 읽기

Splat Labs에서 공유 및 액세스 제어

Gaussian Splat 프로젝트를 비공개 또는 공개로 공유하고, 데이터에 접근할 수 있는 사람을 제어하며, 뷰어가 볼 수 있는 것을 관리하는 방법을 배우세요 — 원시 프로젝트 데이터, 결과물, 전체 폴더 포함.

SharingAccess ControlTutorial+6 more
Read More
3D Gaussian Splat에 문서, PDF, 동영상 첨부하는 방법
Article
February 27, 20265분 읽기

3D Gaussian Splat에 문서, PDF, 동영상 첨부하는 방법

3D Gaussian Splat 내부의 정확한 위치에 문서, PDF, YouTube 동영상, 서식 있는 텍스트 메모를 직접 고정하세요. 마우스 오른쪽 클릭 한 번이면 주석이 누구나 탐색할 수 있게 실시간으로 됩니다.

Gaussian SplattingAnnotationsCollaboration+4 more
Read More
웹사이트에 3D Gaussian Splat 뷰어 임베드하는 방법 | Splat Labs Blog | Splat Labs - Gaussian Splat Cloud