# Motion System 승인된 색상, 이징 커브, 글꼴, 모션 프리셋 및 컬렉션 에셋을 VS Code에서 바로 사용하세요. Motion System은 디자이너와 개발자가 같은 모션 언어를 공유하도록 돕습니다. After Effects, Figma, Lottie Creator, 웹 같은 제작 도구에서 시스템 항목을 만들고 적용하면, VS Code 확장 프로그램에서 이를 구현에 필요한 값과 코드, URL, 다운로드 가능한 에셋으로 사용할 수 있습니다. **System** 탭은 읽기 전용입니다. Motion System 콘텐츠를 만들고, 편집하고, 게시하고, 정리하는 작업은 목적에 맞는 제작 도구에서 진행하세요. VS Code의 Motion System 에셋 미리 보기 ## VS Code에서 쓸 수 있는 항목 - **Brand Colors** - 단색과 그레이디언트를 CSS, TypeScript, React, Tailwind 형식으로 사용합니다. - **Easing Curves** - 트랜지션이나 애니메이션 타이밍에 사용할 cubic-bezier 값과 코드를 제공합니다. - **Fonts** - 실제 글꼴 미리 보기, CSS 및 TypeScript 사용 예제, `@font-face`, 지원되는 글꼴 다운로드를 제공합니다. - **Motion Presets** - 실시간 미리 보기와 CSS, React, Vue 또는 키프레임 데이터 출력을 제공합니다. - **Collection Assets** - Lottie와 이미지 미리 보기, CDN 또는 임베드 코드, 다운로드를 제공합니다. ## 빠르게 사용하기 1. **Workspace**에서 사용할 워크스페이스를 선택합니다. 2. **System**을 엽니다. 3. 워크스페이스에 시스템이 여러 개라면 하나를 선택합니다. 4. 프리미티브를 검색합니다. 5. **Use**를 클릭합니다. 6. 코드 형식을 선택합니다. 7. 복사하거나 활성 에디터 커서 위치에 삽입합니다. ## 이 장에서 다루는 내용 - [Motion System 기본](/ko/integrations/vscode/06_motion-system/motion-system-basics) - 공통 개념과 VS Code에서 할 수 있는 일 - [Motion System 프리미티브 사용](/ko/integrations/vscode/06_motion-system/using-motion-system-primitives) - 코드, 삽입, URL, 다운로드 사용법 - [Motion System 패널 컨트롤](/ko/integrations/vscode/06_motion-system/motion-system-panel-controls) - 전체 UI 참고 문서 ## 관련 문서 - [After Effects용 Motion System](/ko/integrations/after-effects/11_motion-system) - [Figma용 Motion System](/ko/integrations/figma/09_motion-system) - [Workspace](/ko/integrations/vscode/03_workspace)