# Hana에 3D를 더하다 - Spline blog (https://spline.design/ko/blog/introducing-3d-shapes-hana)

> 3D와 2D를 하나로

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

2025년 12월 10일

# Hana에 3D를 더하다

3D와 2D를 하나로

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

아주 오랫동안 디자인 "프로세스"의 대부분은 2D 캔버스에서 이루어져 왔습니다.

2D와 3D가 역사적으로 나뉘어 온 데에는 기술적 복잡성이 있습니다. 2D 디자인 툴은 실시간이면서도 고품질(보이는 그대로 결과물이 되는)로 발전했지만, 3D는 훨씬 많은 연산 능력을 필요로 해서 실시간 작업은 낮은 품질에서만 가능했습니다.

하지만 하드웨어와 소프트웨어 모두 기술이 크게 발전했고, 우리 팀도 지난 몇 년간 상당한 진전을 이루어 근본적인 이정표에 도달했습니다. 바로 같은 캔버스에서 3D와 2D를 실시간으로 결합하는 것입니다.

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

## 3D와 2D의 융합

우리는 디자인 캔버스가 사용할 수 있는 모든 차원을 활용해야 하며, 사용자(사람이든 AI 에이전트든)가 주어진 과제에 가장 적합한 방식을 결정할 수 있어야 한다고 믿습니다.

안타깝게도 이론상으로는 가능하지만, 3D로 무언가를 구현하는 것은 기술적으로 악몽 같은 일이고, 두 시스템을 결합하면 더욱 어려워집니다.

현재의 디자인 툴이나 전통적인 툴은 대부분 비슷한 방식으로 만들어졌습니다. 미리 보기에서 작업한 뒤 "렌더링"을 누르거나 작업물을 "핸드오프"하면, 누군가가 다른 기술 스택으로 실제 결과물을 구현하는 식이죠.

다시 말해 현재의 디자인 툴은 거의 모두 실시간이 아니며, 그래서 3D 작업에는 보통 전문 툴이 필요하고 그 결과물은 결국 편집할 수 없고 인터랙션도 없는 평면 이미지나 동영상으로 다뤄지거나 임베드됩니다. 오늘날의 디자인 워크플로 기준과 맞지 않는 느린 과정입니다.

이를 바꾸려면 새로운 접근이 필요합니다.

Hana로 만든 경험

## 실시간이 기반이다

Hana를 만들 때 우리는 실시간으로 동작하면서도 2D로 렌더링할 수 있는 것이라면 _무엇이든_ 렌더링할 수 있도록 설계했습니다. 즉, Hana의 렌더러는 그림자, 블러 같은 픽셀 단위로 정확한 온갖 효과, 벡터 셰이프, 불리언 등을 모두 실시간으로 처리할 수 있습니다.

그래서 Hana의 이펙트 파이프라인을 활용해 3D 그래픽도 실시간으로 렌더링할 수 있습니다.

본질적으로 Hana는 3D와 2D를 하나로 결합할 수 있습니다.

Hana로 실시간 3D가 된 벡터

## 두 세계를 잇는 여정

2D 캔버스에 3D를 더하는 일은 쉬워 보이지만, 실제로는 수많은 어려움이 있습니다. 대개 렌더러 두 개를 동시에 실행하거나 여러 런타임을 결합해야 하고, 그 결과 다운로드 시간이 길어져 바람직하지 않습니다.

Hana는 3D와 2D에 같은 런타임을 사용하므로 더 효율적이고 훨씬 유연합니다.

또 다른 핵심 문제는 품질, 정확히는 품질의 부족입니다.

3D 품질은 안티앨리어싱, 해상도, 폴리곤 수(또는 높은 복셀 밀도), 오브젝트 수 등 여러 요소로 이루어지기 때문에, 같은 수준의 품질을 유지하면서 두 시스템을 하나로 합치는 일은 어렵습니다.

Hana에서는 어떤 2D 셰이프든 만들어 3D 오브젝트로 변환하면서도 원본 셰이프와의 실시간 연결을 유지할 수 있습니다.

즉, 언제든 원본 셰이프를 수정하면 3D 오브젝트가 원본 셰이프와 연결된 채 실시간으로 다시 생성됩니다.

덕분에 2D 구성 안에서 3D를 만드는 생산성이 크게 높아집니다. 예를 들어 3D 텍스트를 쉽게 만들고, 비파괴적인 워크플로 안에서 텍스트의 유연성을 모두 유지한 채 색상, 폰트 등의 속성을 바꿀 수 있습니다.

레이아웃은 동적으로 업데이트되고, 3D 오브젝트는 2D 구성의 규칙을 따릅니다.

Hana 3D 셰이프로 만든 경험

## 3D는 2D를 따른다

Hana에서 모든 3D 오브젝트는 자체 좌표계를 갖습니다. 하지만 여전히 2D 캔버스의 규칙과 동작을 따르므로, 평소 2D 오브젝트에 쓰던 것은 무엇이든 3D 오브젝트에 적용할 수 있습니다.

이로써 폭넓은 디자인 가능성이 열립니다.

## 한계

현재 Hana의 3D/2D 시스템에서 사용할 수 있는 기능은 제한적입니다.

어떤 2D 셰이프든 3D로 돌출하고 머티리얼을 꽤 자유롭게 제어할 수 있지만, 새로운 가능성을 위한 여지는 아직 많이 남아 있습니다.

이상적으로는 3D 시스템이 어떤 종류의 3D 오브젝트나 씬이든 렌더링할 수 있어야 하고, 제약도 훨씬 적어야 합니다.

## 이제 시작입니다

Spline은 지난 몇 년간 2D, 3D, 그리고 언젠가는 4D까지 통합하는 일관된 디자인 시스템을 만들기 위해 열심히 노력해 왔습니다.

이 흥미진진한 새로운 미래를 향해 계속 나아갈 날이 정말 기대됩니다.

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