# 웹용 Spline: 인터랙티브 3D 임베드 및 내보내기 (https://spline.design/ko/web)

> Spline Viewer 웹 컴포넌트로 인터랙티브 3D를 임베드하거나, 씬을 Vanilla JS, React, Next.js, Three.js, react-three-fiber 코드로 내보내세요.

# 웹을 위해 만든 인터랙티브 3D

HTML 태그 하나로 3D 씬을 임베드하거나, **Vanilla JS, React, Next.js, Three.js** 코드로 내보내세요.

[시작하기](https://app.spline.design/signin)[문서 보기](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)

your-website.com

Spline Viewer

## 태그 하나로 어떤 웹사이트든

`<spline-viewer>`는 네이티브 웹 컴포넌트라서 Framer, Webflow, Squarespace, React, Svelte, 순수 HTML 어디서나 작동합니다. 캔버스뿐 아니라 페이지 전체에 반응하므로, 씬이 커서를 따라가거나 바라보고 페이지 스크롤에 맞춰 애니메이션될 수 있습니다.

[자세히 알아보기: Spline Viewer](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)

main.js

```
import { Application } from '@splinetool/runtime';

// Render the scene on a canvas
const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);

app.load('https://prod.spline.design/DGI6oWLNcrhyDwvi/scene.splinecode');

```

코드 내보내기

## 3D 씬을 코드로

Vanilla JS, React, Next.js, Three.js, react-three-fiber로 내보내세요. 코드를 복사하거나, CodeSandbox에서 열거나, 파일을 다운로드해 직접 호스팅할 수 있습니다.

[자세히 알아보기: 코드 내보내기](https://docs.spline.design/exporting-your-scene/web/exporting-as-code)

웹에서 더 많이

## 링크 공유부터 자체 서버까지

### 코드 API

Vanilla JS, React, Next.js에서 직접 작성한 코드로 이벤트를 트리거하고, 변수를 업데이트하고, 오브젝트 속성을 변경하세요.

### 공개 URL

씬을 링크로 공유하거나 Notion, Webflow, WordPress 등에 임베드하세요.

### 자체 호스팅

런타임을 포함한 프로젝트 전체를 다운로드해 자체 서버에서 제공하세요. Enterprise 요금제에서 이용할 수 있습니다.

### WebGPU

씬은 WebGPU로 렌더링되며, WebGPU를 사용할 수 없는 환경에서는 자동으로 WebGL로 전환됩니다.

## 지금 3D로 만들기 시작하세요

에이전트를 연결하고, 팀을 초대하고, 오늘 첫 3D 씬을 배포하세요.

[시작하기](https://app.spline.design/signin)[에이전트 연결하기](https://spline.design/ko/mcp)

[Spline](https://spline.design/ko)

팀과 AI 에이전트를 위한 3D·2D 에디터. 웹, iOS, Android에 바로 배포하세요.

#### AI에게 Spline에 대해 묻기

#### 제품

- [3D 디자인](https://spline.design/ko/3d-design)
- [Hana](https://spline.design/ko/hana)
- [Omma](https://omma.build)
- [AI 3D 생성](https://spline.design/ko/ai-generate)
- [Spline MCP](https://spline.design/ko/mcp)
- [Spline Arena](https://spline.design/ko/arena)
- [요금제](https://spline.design/ko/pricing)
- [엔터프라이즈](https://spline.design/ko/enterprise)

#### 런타임

- [Web](https://spline.design/ko/web)
- [iOS](https://spline.design/ko/ios)
- [Android](https://spline.design/ko/android)

#### 앱

- [다운로드](https://spline.design/ko/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror 다운로드](https://spline.design/download-mirror)

#### 학습

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ko/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [솔루션](https://spline.design/solutions)

#### 커뮤니티

- [Spline 커뮤니티](https://community.spline.design)
- [Blog](https://spline.design/ko/blog)
- [변경 로그](https://spline.design/ko/changelog)
- [교육](https://spline.design/ko/education)
- [Contra](https://spline.design/contra)
- [제휴 프로그램](https://spline.design/ko/affiliate)

#### 회사

- [고객 사례](https://spline.design/ko/customers)
- [채용](https://www.ycombinator.com/companies/spline/jobs)
- [보안](https://spline.design/ko/security)

#### 법적 고지

- [이용약관](https://spline.design/terms)
- [개인정보처리방침](https://spline.design/privacy)

#### 문의

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.