# Hana로 마우스에 반응하는 인터랙티브 디자인 만들기 - 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/collections)
3. [Hana | 꼭 알아야 할 모든 것](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know)
4. Hana로 마우스에 반응하는 인터랙티브 디자인 만들기

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

레슨 5/15Hana초급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분
- 초급

## 다음 레슨

[2D Follow 인터랙션 만들기8분초급](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[계속하기](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

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