# 2D Follow 인터랙션 만들기 - 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/tutorials)
3. 2D Follow 인터랙션 만들기

# 2D Follow 인터랙션 만들기

Hana초급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분
- 초급

## 포함된 코스

- [Hana | 꼭 알아야 할 모든 것](https://spline.design/ko/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

## 관련 튜토리얼

[모든 튜토리얼](https://spline.design/ko/academy/tutorials)

[Hana로 인터랙티브 2D 시작하기Hana초급17분](https://spline.design/ko/academy/tutorials/get-started-with-interactive-2d-in-hana)[Hana와 Spline에서 경로를 따라 애니메이션 만드는 방법Hana초급7분](https://spline.design/ko/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)[Hana로 마우스에 반응하는 인터랙티브 디자인 만들기Hana초급6분](https://spline.design/ko/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

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