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

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

Hana 열기

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

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

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

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

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

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

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

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

Hana의 부드러운 그라디언트

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

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

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

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

SVG 가져오기 등

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

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

Hana로 만든 경험

지금 사용해 보세요!

프로그레시브 블러와 그라디언트의 기능을 살펴볼 수 있는 Spline Hana 파일을 준비했습니다.

진화하는 디자인 워크플로

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

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

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

—

Spline 팀

자세히 알아보기

블로그의 다른 글