Motion System 패널 컨트롤

System 탭에서 시스템을 선택하고 프리미티브를 검색하거나 미리 보고 코드로 사용하는 방법을 알아보세요.

System 탭은 활성 워크스페이스의 Motion System 프리미티브를 둘러보는 읽기 전용 화면입니다.

VS Code의 Motion System 에셋 미리 보기
VS Code의 Motion System 에셋 미리 보기

계정과 워크스페이스

상태 또는 컨트롤기능
Sign inWorkspace Motion System을 불러오는 데 필요한 계정을 연결합니다.
Workspace contextWorkspace 탭에서 선택한 워크스페이스를 따릅니다.
System name사용할 수 있는 시스템이 하나일 때 이름을 바로 표시합니다.
System selector워크스페이스에 시스템이 여러 개일 때 전환합니다.
Open in browser선택한 시스템을 LottieFiles 웹에서 엽니다.

검색

선택한 시스템 안에서 프리미티브 이름과 주요 값을 검색합니다. 일치하는 텍스트가 강조되고, 검색 중에는 결과가 있는 섹션이 열린 상태로 유지되며 필터링된 항목 수가 표시됩니다.

섹션

콘텐츠가 있는 블록은 아이콘과 제목, 항목 수가 있는 아코디언 섹션으로 표시됩니다.

  • Brand Colors

  • Easing Curves

  • Fonts

  • Motion Presets

  • Assets 또는 Collections

섹션 헤더를 눌러 열거나 닫을 수 있습니다.

프리미티브 행

각 행에는 다음 내용이 표시됩니다.

  • 색상 견본, 커브, 글꼴, 프리셋 또는 에셋 미리 보기

  • 이름과 간단한 설명

  • 필요한 경우 바로 복사할 수 있는 값, 형식 배지 또는 다운로드 아이콘

  • Use 버튼

Use를 클릭하면 사용 코드 영역이 열리고 레이블이 Hide로 바뀝니다.

사용 코드 영역

사용 코드 영역에는 다음 컨트롤이 있습니다.

컨트롤기능
형식 옵션사용할 코드나 값 형식을 선택합니다.
코드 미리 보기정확한 값이나 여러 줄의 스니펫을 표시합니다.
Copy현재 형식을 클립보드에 복사합니다.
Insert활성 에디터의 선택 영역 또는 커서 위치에 현재 형식을 입력합니다.

Insert로 에디터에 값이 입력된 뒤에만 확인 메시지가 표시됩니다.

미리 보기 및 다운로드

  • 컬렉션 에셋 썸네일을 클릭하면 큰 미리 보기가 열립니다.

  • Lottie 컬렉션 에셋과 모션 프리셋은 실시간 애니메이션으로 표시됩니다.

  • 업로드된 글꼴과 컬렉션 에셋에 실제 원본 URL이 있으면 다운로드 아이콘이 표시됩니다.

  • 다운로드할 때 저장 폴더를 선택하며, 같은 파일을 덮어쓰기 전에 확인합니다.

빈 상태 및 오류

로그인 필요, 워크스페이스 없음, Motion System 없음, 비어 있는 시스템, 검색 결과 없음, 로딩, API 오류를 각각 다른 상태로 표시합니다. 다시 불러올 수 있는 오류에는 Retry를 사용하고, 찾는 시스템이 없다면 워크스페이스를 바꾸세요.

관련 문서

마지막 업데이트: 2026년 9월 11일 오후 12:08Common.editThisPage