# 프로그레시브 블러와 부드러운 그라디언트로 인터랙티브 효과 디자인하기 - Hana | 꼭 알아야 할 모든 것 - Spline Academy (https://spline.design/ko/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> 이 튜토리얼에서는 부드러운 그라디언트와 프로그레시브 블러로 은은하고 세련된 디자인을 만드는 다양한 스타일과 기법, 그리고 이를 Hana에서 인터랙티브 경험으로 바꾸는 방법을 살펴봅니다.

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. 프로그레시브 블러와 부드러운 그라디언트로 인터랙티브 효과 디자인하기

# 프로그레시브 블러와 부드러운 그라디언트로 인터랙티브 효과 디자인하기

레슨 7/15Hana초급9분

이 튜토리얼에서는 부드러운 그라디언트와 프로그레시브 블러로 은은하고 세련된 디자인을 만드는 다양한 스타일과 기법, 그리고 이를 Hana에서 인터랙티브 경험으로 바꾸는 방법을 살펴봅니다.

먼저 셰이프에 그라디언트와 블러 효과를 추가하는 방법을 설명한 뒤, 호버 애니메이션, 커서를 따라가는 효과, 반복 애니메이션, 겹겹이 쌓은 블러 효과 같은 인터랙티브 요소를 만들어 봅니다. 모두 코딩 없이 웹 프로젝트에 바로 임베드할 수 있습니다! 👌

데모 씬: <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## 배울 내용

1. [0:00인트로](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15그라디언트로 만드는 간단한 디자인](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57레이어 블러 추가하기](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41마우스 호버 인터랙션 만들기](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28텍스트에 인터랙티브 블러 효과 만들기](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44반복되는 원형 그라디언트 애니메이션 만들기](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43커서를 따라가는 그라디언트와 블러 효과 만들기](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## 관련 자료

- [Circular Blur템플릿](https://app.spline.design/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients?redirect-duplicate-template-uuid=fa1a715c-86bd-40db-b012-f8c407b7e998&is-2d-file=true)
- [Effects in Hana문서](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in Hana문서](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## 개요

- Hana
- 9분
- 초급

## 다음 레슨

[프로그레시브 블러와 그라디언트로 인터랙티브 스위치 만들기4분초급](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)[계속하기](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

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