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, Figma, Lottie Creator 또는 LottieFiles 웹처럼 작업에 맞는 제작 도구를 사용하세요.