# Motion System 기본
Motion System의 system, section, item이 무엇인지와 draft 및 발행 방식이 전체 워크플로에서 어떻게 작동하는지 알아봅니다.

<Image src="https://assets.docs.lottiefiles.com/static/49169d8b70-640.webp" alt="After Effects에서 LottieFiles System 탭이 edit mode로 열려 있고 색상 아이템과 draft publish 컨트롤이 표시된 화면" caption="Motion system은 AE 플러그인에서 편집, publish, 적용할 수 있는 재사용 가능한 section과 item을 저장합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/49169d8b70-640.webp 640w, https://assets.docs.lottiefiles.com/static/49169d8b70-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/49169d8b70-1920.webp 1920w" width="3840" height="2160" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAlUlEQVR4nD3OTQqCQACG4TmIkolIC/+ytEkmEozcRLQJV97DK7SaCwj9QBBtolO06kxvTEGLZ/V+i08k0xnZXBFP8q8ozYilIpAlst4hbNvGOB9PvC5PtNa4YYSTK8Ky/g0sy+Jxu/M+XOn7Hs/zGQYx0aJCmGi0bUvXdTRNg+N6DPwRiVwi0rzA/DDGWUG13v6tNns+WW9IrCS49HMAAAAASUVORK5CYII=" />

## Motion system은 item의 모음

**motion system**은 모션 디자인에 특화된 design element를 담는 이름 있는 컨테이너입니다. 시간 기반 속성을 위한 Figma library라고 생각하면 됩니다.

Motion system은 **sections**를 포함합니다. 각 section은 item의 typed group입니다.

## Section types

플러그인은 다섯 가지 section type을 지원합니다.

| Section type       | 저장하는 것                       | Example items                                       |
| ------------------ | ---------------------------- | --------------------------------------------------- |
| **Colors**         | 이름 있는 브랜드 또는 모션 전용 색상        | `brand-primary`, `accent-warning`, `bg-surface`     |
| **Easings**        | 이름 있는 easing curve           | `ease-in-out-soft`, `bounce-strong`, `spring-quick` |
| **Fonts**          | Font reference               | `display-bold`, `body-regular`                      |
| **Motion Presets** | 미리 만든 motion pattern         | `fade-in-up`, `scale-pulse`, `slide-from-right`     |
| **에셋**             | 에셋 reference(아이콘 세트, 일러스트 등) | `success-icons`, `loading-states`                   |

## Draft and Published

시스템 편집은 draft 버전에서 이루어집니다. draft가 열린 동안 패널 헤더에는 \*\*Editing \*\{system name}\*\*\*와 **Discard**, **Publish** 액션이 표시됩니다. Publish는 draft를 live 버전으로 만들고, Discard는 draft를 버립니다. 내용이 없는 system은 publish할 수 없습니다.

## Motion System이 워크플로에 들어가는 방식

일반적인 흐름:

1. **시스템 생성** — **Create new**를 선택해 [Motion System 웹 대시보드](https://app.lottiefiles.com/motion-system)를 엽니다. Motion System 생성과 시스템 자체 관리는 웹에서 진행합니다.
2. **아이템 추가 또는 수정** — AE 플러그인에서 기존 시스템을 열고 지원되는 컬러, 이징, 폰트, 컬렉션 에셋을 추가하거나 수정합니다. 모션 프리셋을 더 자세히 편집해야 할 때는 Lottie Creator를 사용합니다.
3. **발행 및 적용** — draft를 발행하고 AE 컴포지션에서 레이어나 속성을 선택한 뒤 필요한 시스템 아이템을 적용합니다.

<Image src="https://assets.docs.lottiefiles.com/static/97180dcaef-640.webp" alt="Create new가 웹 생성 이후 콘텐츠가 채워진 Motion System으로 연결되는 After Effects Motion System 빈 상태" caption="Create new는 웹 생성 흐름을 열고, 생성한 Motion System은 플러그인으로 돌아와 사용합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/97180dcaef-640.webp 640w, https://assets.docs.lottiefiles.com/static/97180dcaef-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/97180dcaef-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAkUlEQVR4nCWO3QqCMACFfYhABB0hheVY2cqrlbqySF1Ry36g6Kbe/xE6sXn5HT7OOU55vCHbn7DTTxweX9SXN/LqDNlcDf8cQhO44RBzWVthUWl4jIMIadkJ4gm8aAyebSH1C0y1cCkFWRWd0J+m8Is1ZlKhvH8gVIuQJQhS0QlmojcY2QYT8E0DP4oRLHP74Q+RQEVqdPILpgAAAABJRU5ErkJggg==" />

## 관련 문서

- [섹션 편집](/ko/integrations/after-effects/11_motion-system/editing-sections) — item을 채웁니다.
- [렌더링](/ko/integrations/after-effects/05_render) — 테마/items에는 dotLottie 형식이 필요합니다.