# Spline Hana - AI 에이전트로 움직이는 디자인 캔버스 (https://spline.design/ko/hana)

> Hana는 Spline의 2D 디자인 캔버스입니다. GPU 가속 벡터 편집, 상태와 애니메이션, 그리고 AI 에이전트(Hana의 자체 에이전트 또는 MCP로 연결한 나의 에이전트)가 팀과 함께 디자인합니다.

# AI 에이전트로 움직이는 디자인 캔버스

팀과 함께 디자인하세요. AI 에이전트, MCP, 그리고 **GPU 가속 벡터 편집 도구가 함께합니다**.

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

라이브러리

## 움직이는 디자인, Hana로 만들다

Hana로 만든 예시를 살펴보세요. 리믹스하고, 다시 만들어 보며 아이디어가 어떻게 프로덕션 수준의 경험이 되는지 탐색하세요.

[3D Circular](https://app.spline.design/ui/0c5cafee-bc08-47b1-aa31-41c30beae895)[Fire Character](https://app.spline.design/ui/b0d21f98-f238-4b2c-a6f0-b478719bcc3c)[3D Card](https://app.spline.design/ui/539d3930-61a4-47c9-8324-b81ecb4c93dc)[Cards](https://app.spline.design/ui/0f721512-9f57-455a-8ea9-4641e15a0ca4)[Path Icons](https://app.spline.design/ui/9389d529-f05b-4aa7-9360-11175d1b4e72)

[Noise](https://app.spline.design/ui/c0d70e64-db86-409e-90b5-d03e413eb554)[3D UI](https://app.spline.design/ui/ba70eea9-74e0-4b06-af5e-f622d88b719a)[Power](https://app.spline.design/ui/58ee653d-f29a-489d-83ba-6af3b2086a1a)[Glass Icons](https://app.spline.design/ui/c915f089-5725-47ac-a458-e2df51a45aa1)[Auto Layout](https://app.spline.design/ui/a3144449-bf5c-4189-a3f1-dda35c699bc4)

[Earth](https://app.spline.design/ui/8937cf42-317a-43cb-bbef-d3244437d8c6)[Japanese Text](https://app.spline.design/ui/248fa04b-dae6-4ef4-a457-0eef1e760fbc)[Masking](https://app.spline.design/ui/c7bd1796-a808-44be-8220-fffd02fafbdf)[Blend](https://app.spline.design/ui/98cec79c-bad6-4504-810b-f0a198625a99)[Hana Serif](https://app.spline.design/ui/da8a844d-cff7-403d-b544-d6a0dd8149bf)

디자인 도구

## 전문 디자인을 위한 익숙하고 강력한 도구

익숙한 디자인 도구와 고급 효과, 그리고 큰 프로젝트도 깔끔하게 관리할 수 있는 구조.

- 프레임 기반 무한 캔버스
- 벡터 네트워크와 불리언
- 페이지와 섹션
- 그라디언트, 글래스, 3D 셰이프

인터랙션과 애니메이션

## 디자인에 생명을 불어넣으세요

상태, 이벤트, 애니메이션으로 모션과 인터랙션을 더하세요. 직접 하거나 에이전트에게 맡기면 됩니다.

- 상태와 이벤트
- 트랜지션 액션으로 애니메이션
- Follow 및 Look At 인터랙션

AI 에이전트

## 에이전트가 디자인하는 캔버스

Hana의 자체 에이전트가 캔버스에서 디자인하고, Claude, ChatGPT, Cursor 또는 모든 MCP 클라이언트에서 나의 에이전트도 함께할 수 있습니다.

- 프레임, 효과, 인터랙션 제작
- 여러 화면을 동시에 제작
- MCP로 연결하는 나의 에이전트
- 모든 결과물은 직접 편집 가능
[에이전트 연결하기](https://spline.design/ko/mcp)

인터랙션을 위해 설계

## 인터랙션을 위해 만든 디자인 툴

실시간 인터랙티브 인터페이스, 모션, 그래픽을 디자인하는 데 필요한 도구를 갖춘 빠르고 익숙한 인터페이스.

- ### 익숙한 디자인 도구  
프레임, 펜 도구, 불리언, 도형 등으로 무한 캔버스에서 디자인하세요.
- ### 강력한 인터랙션  
상태, 이벤트, 액션으로 인터랙티브 경험을 만드세요.
- ### 애니메이션 경험  
상태와 트랜지션으로 디자인에 모션을 더하세요.
- ### 시각 효과  
그림자, 블러, 노이즈, 글래스, 3D로 실시간 시각 효과를 만드세요.
- ### 실시간 불리언  
정교한 불리언 시스템을 만들고 실시간으로 애니메이션하세요.
- ### 벡터 네트워크  
벡터 네트워크를 만들고 독창적인 인터랙션을 더하세요.
- ### 캔버스 미리보기  
캔버스에서 바로 인터랙션과 애니메이션을 미리 확인하세요.
- ### 프로덕션용 내보내기  
인터랙티브 디자인을 웹사이트, 웹 앱, 디지털 제품에 통합하세요.

협업

## 실시간으로 함께 디자인하세요

무한 캔버스에서 실시간으로 협업하며 인터랙션을 디자인하고, 팀 전체를 위한 공유 워크스페이스에서 정리하세요.

### 실시간 멀티플레이어

같은 파일에서 팀 전체와 함께 디자인하세요.

### 역할 및 권한

편집자와 뷰어 역할을 개별적으로 완벽하게 관리하세요.

### 파일 관리

모든 파일과 프로젝트를 저장하고 관리하는 팀 공유 공간.

### 메모와 피드백

에디터 안에서 바로 팀에게 댓글을 남기거나 메모하세요.

내보내기

## 웹을 위한 인터랙션을 배포하세요

웹사이트, 웹 앱, 디지털 제품에 인터랙티브 경험을 매끄럽게 통합하세요.

마우스나 손가락을 움직여 인터랙션해 보세요[씬 리믹스](https://app.spline.design/ui/2e2daf97-d4bb-4861-9ef6-81348aa5a77d)

index.html

```
<!-- Import the Hana Viewer -->
<script type="module"
  src="https://cdn.spline.design/@splinetool/hana-viewer@1.0.97/hana-viewer.js">
</script>

<!-- Add your design anywhere on the page -->
<hana-viewer
  url="https://prod.spline.design/HfFj1WYWsj69dY8U-Eld/scene.hanacode">
</hana-viewer>

```

[Webflow](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Framer](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Wix Studio](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[HTML / JS](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Notion](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Shopify](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)

## Hana로 디자인을 시작하세요

에이전트를 연결하고, 팀을 초대하고, 오늘 첫 디자인을 배포하세요.

[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.