# 마우스에 반응하는 3D 블롭 애니메이션 만들기 - Spline Academy (https://spline.design/ko/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse)

> 입문자도 쉽게 따라 할 수 있는 이 튜토리얼에서는 처음부터 Shape Blend로 다채롭게 움직이는 인터랙티브 3D 블롭을 만드는 방법을 배웁니다.

1. [아카데미](https://spline.design/ko/academy)
2. [튜토리얼](https://spline.design/ko/academy/tutorials)
3. 마우스에 반응하는 3D 블롭 애니메이션 만들기

# 마우스에 반응하는 3D 블롭 애니메이션 만들기

Spline 3D초급12분

입문자도 쉽게 따라 할 수 있는 이 튜토리얼에서는 처음부터 Shape Blend로 다채롭게 움직이는 인터랙티브 3D 블롭을 만드는 방법을 배웁니다.

색상과 텍스처를 적용해 부드러운 전환과 자연스러운 그라디언트를 만드는 쉬운 팁을 알려 드립니다.

또한 블롭 위에 마우스를 올리면 모양이 바뀌는 것 같은 인터랙티브 이벤트를 추가하는 방법도 살펴봅니다.

\--

더 많은 멋진 크리에이터와 프로젝트(#MadeInSpline)를 만나 보세요: <https://community.spline.design/>

## 배울 내용

1. [0:00인트로](https://www.youtube.com/watch?v=l32kDk5DU00&t=0s)
2. [0:24Shape Blend로 블롭 만들기](https://www.youtube.com/watch?v=l32kDk5DU00&t=24s)
3. [1:31색상 추가하기](https://www.youtube.com/watch?v=l32kDk5DU00&t=91s)
4. [3:21글로우 효과와 텍스처 추가하기](https://www.youtube.com/watch?v=l32kDk5DU00&t=201s)
5. [5:20블롭 애니메이션 만들기](https://www.youtube.com/watch?v=l32kDk5DU00&t=320s)
6. [6:49애니메이션을 반복시키는 방법](https://www.youtube.com/watch?v=l32kDk5DU00&t=409s)
7. [8:32커서로 만드는 인터랙티브 효과](https://www.youtube.com/watch?v=l32kDk5DU00&t=512s)
8. [9:44빠른 팁](https://www.youtube.com/watch?v=l32kDk5DU00&t=584s)
9. [10:38Shape Blend를 활용한 다른 인터랙티브 씬 예시](https://www.youtube.com/watch?v=l32kDk5DU00&t=638s)
10. [11:00Spline 커뮤니티](https://www.youtube.com/watch?v=l32kDk5DU00&t=660s)
11. [11:05다음 '이주의 디자이너'가 되어 보세요!](https://www.youtube.com/watch?v=l32kDk5DU00&t=665s)

## 관련 자료

- [Animated Shape Blend템플릿](https://app.spline.design/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse?redirect-duplicate-template-uuid=546ba9b3-f563-43e4-bbd7-a72c5941902e&is-2d-file=false)
- [Shape Blend문서](https://docs.spline.design/designing-in-3-d/shape-blend)
- [Materials & Shading문서](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [How state-based animation works문서](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Follow Event문서](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## 개요

- Spline 3D
- 12분
- 초급

## 포함된 코스

- [Spline 101 | 첫 인터랙티브 씬 만들기](https://spline.design/ko/academy/collections/spline-101-build-your-first-interactive-scene/create-animated-3d-blobs-that-react-to-your-mouse)

## 관련 튜토리얼

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

[상태로 유기적인 3D 블롭 애니메이션 만들기Spline 3D초급5분](https://spline.design/ko/academy/tutorials/animate-organic-3d-blobs-with-states)[Spline으로 3D 블롭 만드는 방법Spline 3D초급14분](https://spline.design/ko/academy/tutorials/how-to-create-3d-blobs-using-spline)[머티리얼로 3D 아이콘 다듬고 스타일링하기Spline 3D초급9분](https://spline.design/ko/academy/tutorials/refine-style-3d-icons-with-materials)

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