# Hana의 프로그레시브 블러와 그라디언트 - Spline blog (https://spline.design/ko/blog/introducing-progressive-blur-gradients)

> 눈을 사로잡는 블러와 그라디언트로 디자인 수준을 높이세요

[블로그](https://spline.design/ko/blog)

2025년 5월 27일

# Hana의 프로그레시브 블러와 그라디언트

눈을 사로잡는 블러와 그라디언트로 디자인 수준을 높이세요

[Hana 열기](https://app.spline.design)

프로그레시브 블러는 몇 년 전 iOS의 글래스 UI 미감과 함께 인기를 얻었고, 최근에는 UI 디자인 툴에서도 주목받고 있습니다. 하지만 여전히 대체로 복잡한 기법이어서 모션 디자인이나 실시간 인터랙티브 환경에서는 쓰기 어려웠습니다.

오늘 Hana에 실시간 프로그레시브 블러를 선보입니다. 처음으로 이런 블러를 실시간으로 사용할 수 있게 되었으며, 직관적인 컨트롤로 기술 지식 없이 Hana의 무한 디자인 캔버스 안에서 모두 다룰 수 있습니다.

아래 씬을 직접 만져 보며 어떻게 작동하는지 확인해 보세요.

마우스를 올리거나 터치해 상호작용해 보세요 (Hana로 만든 경험)

## Hana에서 프로그레시브 블러를 추가하는 방법

아무 레이어나 선택하고 Layer Blur 또는 Background Blur를 추가하세요. 두 경우 모두 블러를 균일(Uniform)하게 할지 점진적(Progressive)으로 할지 고를 수 있습니다.

프로그레시브 블러는 그라디언트와 거의 같은 방식으로 작동하지만, 색상 대신 두 블러 반경 값 사이를 전환합니다.

Hana에서 프로그레시브 블러가 작동하는 방식

## Hana의 부드러운 그라디언트

이제 Hana에서 그라디언트를 만들 수 있습니다. 선형, 원형, 극좌표 그라디언트 중에서 고르고, 캔버스에서 바로 위치를 조정할 수 있습니다.

부드러운 그라디언트(Smooth Gradients)도 선보입니다. Smooth Step 보간을 사용해 색상 사이를 더 자연스럽게 섞는 그라디언트입니다. 대부분의 디자인 툴은 선형 보간에 기반한 그라디언트를 사용하기 때문에 각 그라디언트 "스톱" 색상 사이에 흔히 끊어지는 지점이 생깁니다.

몇 년 전 Spline의 3D 에디터에 부드러운 그라디언트를 처음 구현했고, 이제 Hana에도 가져왔습니다.

## SVG 가져오기 등

지난 몇 주 동안 Hana에 여러 개선 사항도 반영했습니다. SVG 파일 지원(이제 끌어다 놓기만 하면 됩니다), 성능 향상, 런타임 크기 축소 등이 포함됩니다.

더 나은 컬러 피커 동작, 개선된 선택 도구, 경험을 더 일관되게 만드는 수많은 작은 수정 등 사용성 개선도 더했습니다.

Hana로 만든 경험

## 지금 사용해 보세요!

프로그레시브 블러와 그라디언트의 기능을 살펴볼 수 있는 [Spline Hana 파일](https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3)을 준비했습니다.

## 진화하는 디자인 워크플로

핵심은 단순하지만, 이 새로운 기능들로 그 어느 때보다 많은 창의적 제어와 결과물을 얻을 수 있습니다.

이런 애니메이션이나 실시간 인터랙션을 만드는 일은 예전에는 결코 쉽지 않았지만, 이제 Hana로 몇 초 만에 할 수 있습니다.

여러분이 무엇을 만들지 정말 기대됩니다!

—

Spline 팀

[자세히 알아보기](https://docs.spline.design/doc/what-is-hana/doccoU2VnAOm)

## 블로그의 다른 글

[2026년 11월 3일Spline Arena 출시](https://spline.design/ko/blog/introducing-spline-arena)[2026년 10월 21일Spline for ChatGPT 출시](https://spline.design/ko/blog/introducing-spline-for-chatgpt)[2026년 8월 27일Hana V2 출시](https://spline.design/ko/blog/hana-v2)

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