# Hana와 Spline에서 경로를 따라 애니메이션 만드는 방법 - Hana | 꼭 알아야 할 모든 것 - Spline Academy (https://spline.design/ko/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)

> 이 튜토리얼에서는 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. Hana와 Spline에서 경로를 따라 애니메이션 만드는 방법

# Hana와 Spline에서 경로를 따라 애니메이션 만드는 방법

레슨 11/15Hana초급7분

이 튜토리얼에서는 Hana의 최근 업데이트 중 하나를 사용해 셰이프나 디자인을 원하는 궤적을 따라 쉽게 움직이게 하는 방법을 보여 드립니다.

Hana에서 경로를 디자인하는 여러 방법, 셰이프를 경로에 정렬하는 방법, 애니메이션 만들기, 위치 오프셋 조정, 월드 방향과 접선 방향 중 선택하는 방법을 안내합니다.

데모 👉 <https://app.spline.design/ui/6a36d303-a217-4466-95f5-85a1561c5725>

## 배울 내용

1. [0:00인트로](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=0s)
2. [0:16벡터 도구로 경로 만드는 방법](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=16s)
3. [1:00경로에 정렬하는 방법](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=60s)
4. [2:07애니메이션 만들기](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=127s)
5. [3:23셰이프로 경로 만드는 방법](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=203s)
6. [4:03위치 오프셋 조정하기](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=243s)
7. [4:53월드 방향과 접선 방향 비교](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=293s)
8. [6:133D에서 경로에 정렬하기](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=373s)

## 관련 자료

- [Shapes Follow Path템플릿](https://app.spline.design/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline?redirect-duplicate-template-uuid=86ecf61d-28ed-4c69-9f76-029bd8130eed&is-2d-file=true)
- [Algin to Path Modifer문서](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%8E%A2-modifiers)

## 개요

- Hana
- 7분
- 초급

## 다음 레슨

[벡터 마스크로 디자인하고 애니메이션 만들기7분초급](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/design-and-animate-with-vector-masks)[계속하기](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/design-and-animate-with-vector-masks)

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