사용 가이드로 건너뛰기
Motion System작성자 Owl-Listener

Motion System 스킬.

애니메이션 결정을 컴포넌트와 팀 전반에서 재사용할 수 있게 만듭니다.

  • 디자인 시스템
  • 모션
소스 검토 · Motion SystemSKILL.md
작업 디자인 시스템 산출물 • 용도가 명시된 이름 있는 지속 시간 및 이징 토큰. • 그룹, 스태거, 방향에 대한 안무 규칙. • 동작 감소 재정의와 문서화 요구사항. 시작하기 전에 토큰 구현 또는 플랫폼별 동등 수단이 필요하며, 소스는 특정 애니메이션 프레임워크를 요구하지 않습니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

공통 모션 어휘 만들기

제품 전체에 적용할 공통 모션 토큰, 조율 규칙, 동작 감소 대안을 정의합니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Motion System은 움직임을 서로 무관한 컴포넌트별 선택이 아니라 design-token 레이어로 다룹니다. 작은 지속 시간 스케일, 의미 기반 이징 역할, 요소가 등장하거나 사라지거나 함께 움직일 때의 조율 규칙을 정의합니다.

소스는 동작 감소 처리도 시스템 수준에 둡니다. 이미 배포된 개별 애니메이션을 사후에 조정하는 것과 달리, 토큰 재정의와 대체 동작을 제품 전반에 일관되게 적용할 수 있다는 점이 중요한 차이입니다. 예시 타이밍은 출발점이 되는 어휘일 뿐, 모든 인터페이스가 같은 값을 써야 한다는 근거는 아닙니다.

예상 산출물

  • 용도가 명시된 이름 있는 지속 시간 및 이징 토큰.
  • 그룹, 스태거, 방향에 대한 안무 규칙.
  • 동작 감소 재정의와 문서화 요구사항.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    모션 역할 목록화

    즉각적인 상태 변화, 등장, 퇴장, 더 큰 전환을 파악합니다. 서로 다른 필요를 충족하는 데 필요한 만큼만 토큰을 만듭니다.

  2. 02
    조율 규칙 정의

    의미 그룹 내 공통 타이밍, 스태거 한도, 일관된 이동 방향을 명시합니다.

  3. 03
    접근성 대응 버전 만들기

    어떤 모션을 없애고 무엇으로 대체할지, 핵심 상태 정보를 어떻게 계속 보여 줄지 문서화합니다.

02 활용 상황

사용 시점

토큰 구현 또는 플랫폼별 동등 수단이 필요하며, 소스는 특정 애니메이션 프레임워크를 요구하지 않습니다.

적합한 경우

  • 컴포넌트 모션이 일관되지 않을 때여러 팀이 서로 맞지 않는 애니메이션 타이밍을 쌓아 온 경우에 유용합니다.
  • 토큰 시스템 확장색상과 간격을 이미 관리하는 동일한 공유 파이프라인에 모션을 추가합니다.

확인할 한계

  • 완성된 애니메이션이 아님개별 인터랙션은 여전히 구성과 구현이 필요합니다.
  • 예시는 테스트가 필요함소스의 지속 시간과 곡선은 제품, 기기, 접근성 요구사항에 맞게 검증해야 합니다.

준비할 입력

  • 컴포넌트 목록기존 애니메이션과 각각이 전달하는 내용을 나열하세요.
  • 모션 원칙의도한 제품 성격과 애니메이션을 적용하지 않아야 할 인터랙션을 설명하세요.
  • 플랫폼과 접근성구현 대상과 동작 감소에 대한 기대 사항을 제공하세요.

03 핵심 결정

핵심 결정

  1. 작은 어휘

    의미 기반 선택지가 적으면 임의의 타이밍이 많은 목록보다 불필요한 예외를 더 쉽게 찾을 수 있습니다.

  2. 전역 접근성

    시스템 수준 재정의는 한 컴포넌트가 모션 설정을 놓칠 가능성을 줄여 줍니다.

04 예시 브리프

집중 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일도 유지하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 특정 디자인 방법을 설명합니다.

원본 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

토큰 구현 또는 플랫폼별 동등 수단이 필요하며, 소스는 특정 애니메이션 프레임워크를 요구하지 않습니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
motion-system을 사용해 툴팁, 드로어, 대화상자, 페이지 전환을 통일하세요. 작은 토큰 스케일과 등장/퇴장 이징 역할을 제안하고, 스태거 한도를 정의하며, 상태 정보를 유지하는 동작 감소 동작을 작성하세요. 애니메이션을 적용하지 않아야 할 경우도 포함하고, 타이밍은 기기 테스트를 위한 제안값으로 표시하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 각 토큰은 뚜렷한 역할과 구체적인 값을 가집니다.
  • 그룹화된 요소는 문서화된 동일한 안무 규칙을 따릅니다.
  • 동작 감소 동작이 시스템 수준에서 명시되어 있습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구사항은 바뀔 수 있습니다.

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
제품 전체에 적용할 공통 모션 토큰, 조율 규칙, 동작 감소 대안을 정의합니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

지속 시간 토큰은 몇 개여야 하나요?

소스는 보통 네 개에서 여섯 개의 작은 세트를 권장하며, 정말 다른 경우에만 값을 추가하라고 합니다.

동작 감소가 모든 피드백을 제거하나요?

아니요. 필수적인 상태 전달은 유지해야 하며, 적절한 경우 움직임을 끄거나 다른 방식으로 대체합니다.

어떤 구현을 대상으로 하나요?

CSS 커스텀 프로퍼티 또는 동등한 플랫폼 토큰을 설명하며, 기존 토큰 내보내기 파이프라인에 포함하는 방식을 다룹니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

원본 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md