# 2D Follow 인터랙션 만들기 - Hana | 꼭 알아야 할 모든 것 - Spline Academy (https://spline.design/ko/academy/tutorials/create-a-2d-follow-interaction)

> 인터랙티브 2D 디자인이 처음이라면 여기서 시작하기 딱 좋아요! 😉 이 튜토리얼에서는 인터랙티브 2D 경험을 디자인하고 애니메이션으로 만드는 새로운 실시간 캔버스인 Hana로, 커서를 따라가는(모바일에서는 터치 입력을 추적하는) 2D 인터랙션을 쉽게 만드는 방법을 단계별로 안내합니다.

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. 2D Follow 인터랙션 만들기

# 2D Follow 인터랙션 만들기

레슨 6/15Hana초급8분

인터랙티브 2D 디자인이 처음이라면 여기서 시작하기 딱 좋아요! 😉 이 튜토리얼에서는 인터랙티브 2D 경험을 디자인하고 애니메이션으로 만드는 새로운 실시간 캔버스인 Hana로, 커서를 따라가는(모바일에서는 터치 입력을 추적하는) 2D 인터랙션을 쉽게 만드는 방법을 단계별로 안내합니다.

Follow 이벤트를 적용해 부드럽게 흐르는 연쇄 반응을 만들어 이 재미있는 인터랙션을 완성합니다. 웹사이트나 프로젝트에 움직임과 개성을 살짝 더하는 쉽고 즐거운 방법입니다.

데모 👉 <https://app.spline.design/ui/98440491-bf75-4e54-ab6f-afa16fc04f7e>

Spline 3D 에디터로 이 효과를 3D로 만드는 방법도 배워 보세요: <https://youtu.be/TQe5Ae16rE8>

## 배울 내용

1. [0:00시작하기](https://www.youtube.com/watch?v=bKrapjgDBNo&t=0s)
2. [0:49원을 만들고 Follow 이벤트 적용하기](https://www.youtube.com/watch?v=bKrapjgDBNo&t=49s)
3. [2:41댐핑 값과 크기 조정하기](https://www.youtube.com/watch?v=bKrapjgDBNo&t=161s)
4. [6:10디자인 내보내기와 임베드](https://www.youtube.com/watch?v=bKrapjgDBNo&t=370s)

## 관련 자료

- [Follow Circles템플릿](https://app.spline.design/academy/tutorials/create-a-2d-follow-interaction?redirect-duplicate-template-uuid=3b7c3f0a-306e-4a88-aa07-e705edb96030&is-2d-file=true)
- [Designing in Hana문서](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Hana Events문서](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana#hana-events)
- [Exporting as Embed문서](https://docs.spline.design/hana-a-canvas-for-interactivity/exporting-in-hana#exporting-as-embed-link)

## 개요

- Hana
- 8분
- 초급

## 다음 레슨

[프로그레시브 블러와 부드러운 그라디언트로 인터랙티브 효과 디자인하기9분초급](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[계속하기](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

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