# Motion System 기본
시스템, 섹션, 프리미티브, 워크스페이스의 관계와 VS Code에서 읽기 전용으로 사용하는 방법을 살펴보세요.

**Motion System**은 재사용할 수 있는 디자인 및 모션 결정을 이름과 함께 모아 둔 라이브러리입니다. 유형이 정해진 **섹션**으로 구성되며, 각 섹션에는 재사용 가능한 **프리미티브**가 들어 있습니다.

색상과 타이포그래피를 디자인 시스템 라이브러리로 관리하고 있다면, Motion System은 같은 방식을 타이밍, 모션 프리셋, 애니메이션 에셋까지 확장합니다.

## VS Code에서 제공하는 섹션

| 섹션             | 포함 내용                   | 예시                                  |
| -------------- | ----------------------- | ----------------------------------- |
| Brand Colors   | 단색과 그레이디언트              | `brand-primary`, `accent-success`   |
| Easing Curves  | 이름이 지정된 cubic-bezier 커브 | `ease-out-soft`, `spring-quick`     |
| Fonts          | 글꼴 패밀리와 스타일 참조          | `display-bold`, `body-regular`      |
| Motion Presets | 재사용 가능한 키프레임 모션         | `fade-up`, `scale-pulse`            |
| Collections    | Lottie, 이미지 및 기타 연결된 에셋 | `success-animation`, `loading-icon` |

같은 Motion System을 After Effects, Figma, Lottie Creator, 웹 등 여러 LottieFiles 연동 및 제작 도구에서 불러와 사용할 수 있습니다. VS Code에서는 위 다섯 가지 섹션을 개발자에게 맞춘 읽기 전용 화면으로 제공합니다.

## Workspace와의 관계

System은 **Workspace** 탭에서 선택한 워크스페이스를 따릅니다. 별도의 워크스페이스 선택기는 없습니다.

선택한 워크스페이스에 다음과 같이 표시됩니다.

- 시스템이 하나면 이름이 바로 표시됩니다.
- 시스템이 여러 개면 시스템 선택기를 사용합니다.
- 시스템이 없으면 빈 상태가 표시됩니다.

## 게시된 콘텐츠와 초안

확장 프로그램은 현재 게시된 버전을 우선 사용합니다. 필요한 경우 가장 최근에 게시된 버전을 사용하며, 게시된 버전이 없는 시스템은 최신 초안 콘텐츠를 표시할 수 있습니다.

VS Code에서는 초안을 게시하거나 전체 편집 과정을 관리하지 않습니다. 버전과 게시 상태는 **Open in browser**에서 관리하세요.

## VS Code에서 할 수 있는 일

VS Code에서 제공하는 프리미티브를 검색하고, 미리 보고, 복사하고, 삽입하고, 다운로드할 수 있습니다. 다음 작업은 할 수 없습니다.

- Motion System 만들기
- 섹션 추가 또는 편집
- 프리미티브 변경 또는 삭제
- 버전 게시

Motion System 콘텐츠를 만들고 관리할 때는 [After Effects](/ko/integrations/after-effects/11_motion-system), [Figma](/ko/integrations/figma/09_motion-system), [Lottie Creator](/en/creator) 또는 LottieFiles 웹처럼 작업에 맞는 제작 도구를 사용하세요.

## 관련 문서

- [Motion System 프리미티브 사용](/ko/integrations/vscode/06_motion-system/using-motion-system-primitives)
- [Motion System 패널 컨트롤](/ko/integrations/vscode/06_motion-system/motion-system-panel-controls)