# Hana의 리퀴드 글래스와 3D - Spline blog (https://spline.design/ko/blog/hana-3d-glass-autolayout-video)

> Hana의 새 기능: 3D 트랜스폼, 리퀴드 글래스, 오토 레이아웃

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

2025년 7월 9일

# Hana의 리퀴드 글래스와 3D

Hana의 새 기능: 3D 트랜스폼, 리퀴드 글래스, 오토 레이아웃

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

오늘 실시간 리퀴드 글래스, 3D 트랜스폼, 오토 레이아웃, 동영상 레이어 같은 획기적인 기능을 선보이는 Hana의 대규모 업데이트를 발표합니다.

## Hana의 리퀴드 글래스

iOS 26이 공개되면서 리퀴드 글래스 효과가 디자인 커뮤니티의 관심을 사로잡았습니다. 이제 Hana의 모든 오브젝트 레이어에 이 효과를 적용할 수 있습니다.

Distortion 같은 글래스 매개변수를 편집해 굴절 정도를 조절할 수 있습니다.

하지만 iOS 스타일을 넘어 나만의 글래스 효과를 만들 수도 있습니다. 매개변수를 충분히 범용적으로 설계해, 효과의 일부 동작을 과장하고 더 인상적인 비주얼을 연출하는 등 다양한 창의적 결과를 얻을 수 있도록 했습니다.

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

## 겹쳐 쌓는 글래스

대부분의 디자인 툴에서 블러나 글래스 효과는 보통 레이어 하나에만 적용됩니다. 그래서 여러 레이어를 겹쳐도 유리의 왜곡이 누적되지 않고 평평하게 남습니다.

Hana에서는 여러 겹의 유리를 쉽게 쌓고, 실제처럼 각 유리가 뒤나 아래에 있는 요소를 어떻게 굴절시키는지 볼 수 있어 완전히 새로운 창의적 가능성이 열립니다. 글래스 효과뿐 아니라 배경 블러 효과에서도 가능합니다.

Hana에서 여러 겹의 리퀴드 글래스 다루기

## 3D 트랜스폼

2D에서 3D로 넘어가는 일은 늘 어려운 과제였습니다. 이 기능을 개발하기 시작할 때, 그 사이에서 아무것도 잃지 않고 2D와 3D를 매끄럽게 오갈 수 있게 하고 싶었습니다.

이제 Hana에서는 어떤 오브젝트든 3D 오브젝트가 될 수 있으며, 3D 공간에서의 위치(Depth), 회전, 원근을 제어하는 매개변수를 갖습니다.

이 매개변수들은 모두 애니메이션을 적용할 수 있고 상태/이벤트 시스템과 호환됩니다.

Hana에서 오브젝트의 원근, 회전, z 위치 제어하기

## 프레임과 3D 포털

프레임이 3D가 되면, 프레임은 자기만의 3D 공간을 들여다보는 창이 되기도 합니다. 그 안에서 깊이를 볼 수 있는 시각 요소인 포털을 만들 때 특히 유용합니다.

방법은 간단합니다. 프레임 안에 요소를 넣고, 프레임을 3D로 만들고, 안에 있는 요소의 3D 위치나 회전을 바꾸세요. 이제 프레임의 회전이나 위치를 바꾸면 안쪽의 요소들이 여러 단계의 깊이로 렌더링되는 모습을 볼 수 있습니다.

Hana로 만든 프레임 속 3D 포털

## 오토 레이아웃

이제 Hana는 모든 매개변수에 애니메이션을 적용할 수 있는 레이아웃을 지원합니다. 패딩과 간격을 원하는 대로 설정해 세로 레이아웃과 가로 레이아웃을 모두 만들 수 있습니다.

레이아웃은 이벤트 및 상태와 함께 작동하며 실시간으로 업데이트되어 인터랙션을 강화합니다.

Pinterest의 열 레이아웃과 비슷한 메이슨리 레이아웃도 지원합니다.

레이아웃을 사용해 Hana로 만든 경험

## 동영상 레이어

이제 Spline Hana의 어떤 레이어에든 동영상을 쉽게 넣을 수 있습니다. 인터랙티브 프레젠테이션을 만들거나 모션을 디자인할 때 유용합니다. Fill 패널에서 Video Layer로 전환하고 동영상을 업로드하거나 끌어다 놓기만 하면 됩니다.

Spline의 3D 에디터처럼 Hana의 동영상도 원하는 이벤트로 트리거할 수 있습니다. 기본적으로 동영상은 Start 이벤트에서 재생되지만, 이를 바꿔 마우스 이벤트나 다른 이벤트로 트리거할 수 있습니다.

## 새로운 창의적 가능성

정말 많은 소식이었죠! 오늘 선보인 모든 새 기능을 즐기며 흥미진진한 새 디자인을 만들어 보시길 바랍니다.

— Spline 팀

## 블로그의 다른 글

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