# Motion System 패널 컨트롤 System 탭에서 시스템을 선택하고 프리미티브를 검색하거나 미리 보고 코드로 사용하는 방법을 알아보세요. **System** 탭은 활성 워크스페이스의 Motion System 프리미티브를 둘러보는 읽기 전용 화면입니다. VS Code의 Motion System 에셋 미리 보기 ## 계정과 워크스페이스 | 상태 또는 컨트롤 | 기능 | | ----------------- | ---------------------------------------------- | | Sign in | Workspace Motion System을 불러오는 데 필요한 계정을 연결합니다. | | Workspace context | Workspace 탭에서 선택한 워크스페이스를 따릅니다. | | 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**를 사용하고, 찾는 시스템이 없다면 워크스페이스를 바꾸세요. ## 관련 문서 - [Motion System 기본](/ko/integrations/vscode/06_motion-system/motion-system-basics) - [Motion System 프리미티브 사용](/ko/integrations/vscode/06_motion-system/using-motion-system-primitives)