# Hana로 마우스에 반응하는 인터랙티브 디자인 만들기 - Spline Academy (https://spline.design/ko/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> 이 동영상에서는 Hana로 디자인이 커서에 반응하는 인터랙티브 경험을 만드는 방법을 소개하고 다양한 예시를 보여 드립니다. Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At, Follow 같은 이벤트를 살펴보고, 이를 사용해…

1. [아카데미](https://spline.design/ko/academy)
2. [튜토리얼](https://spline.design/ko/academy/tutorials)
3. Hana로 마우스에 반응하는 인터랙티브 디자인 만들기

# Hana로 마우스에 반응하는 인터랙티브 디자인 만들기

Hana초급6분

이 동영상에서는 Hana로 디자인이 커서에 반응하는 인터랙티브 경험을 만드는 방법을 소개하고 다양한 예시를 보여 드립니다. Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At, Follow 같은 이벤트를 살펴보고, 이를 사용해 애니메이션과 효과를 트리거하는 방법을 알아봅니다.

## 배울 내용

1. [0:00인트로](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15클릭에 반응하기 – Mouse Down 이벤트](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32클릭 떼기 – Mouse Up 이벤트](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46누르고 있기 – Mouse Press 이벤트](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56호버의 마법 – Mouse Hover 이벤트](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26디자인이 커서를 바라보게 하기 – Look At 이벤트](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51디자인이 커서를 따라가게 하기 – Follow 이벤트](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57다음 튜토리얼 미리 보기](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## 관련 자료

- [Interactive Flat Icons템플릿](https://app.spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana?redirect-duplicate-template-uuid=2a05e307-90dd-4666-bc8b-f2b7f3c2cce8&is-2d-file=true)
- [Designing in Hana문서](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in Hana문서](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## 개요

- Hana
- 6분
- 초급

## 포함된 코스

- [Hana | 꼭 알아야 할 모든 것](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## 관련 튜토리얼

[모든 튜토리얼](https://spline.design/ko/academy/tutorials)

[프로그레시브 블러와 부드러운 그라디언트로 인터랙티브 효과 디자인하기Hana초급9분](https://spline.design/ko/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[3D 오브젝트에 마우스 기반 인터랙션 추가하기Spline 3D초급14분](https://spline.design/ko/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[변수와 실시간 API로 Spline에서 3D 데이터 시각화 만드는 방법Spline 3D고급15분](https://spline.design/ko/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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