98.8K+다운로드
사용 가이드로 건너뛰기
motion-design작성자 LottieFiles

Motion Design 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex skill: 타이밍, 이징, 코레오그래피 및 애니메이션 기초를 포함한 모션 디자인 원칙을 적용합니다.

  • Motion & Video
OpenDesign 다운로드사용 가이드 보기
LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md
--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table
업스트림 파일에서 읽은 전문 및 섹션 제목 2026-09-14 · 전체 12,489자

01 기능

Claude Code와 Codex에서 motion-design 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

인터페이스를 애니메이션화하는 디자이너와 개발자를 위한 원칙 중심의 모션 디자인 레퍼런스입니다. 감정적 의도, 시각적 내러티브, 모션 크래프트라는 세 가지 기둥에서 시작하여, 각 결정을 네 가지 모션 성격(Playful, Premium, Corporate, Energetic) 중 하나로 좁혀 나가며, 각각 고정된 지속 시간 범위, 이징 곡선, 오버슈트 비율을 갖습니다.

버튼 프레스, 카드 등장, 성공 및 오류 흔들림을 다루는 실전 레시피가 있으며, 요소 유형별 지속 시간 표, 방향별 이징 규칙, 안무 및 스태거 예산, 감정-모션 매핑, 웨이트 클래스가 이를 뒷받침합니다. 이 가이드는 이미 사용 중인 애니메이션 시스템에 적용할 수 있는 숫자, 기본값, 제약 조건으로 표현됩니다.

산출물

  • 정의해야 할 세 가지 브랜드 모션 상수: 시그니처 이징, 지속 시간 팔레트, 등장 패턴
  • 플랫폼 표준에서 가져온 미리 만들어진 cubic-bezier 사양
  • 버튼 프레스 팔로우 스루와 같이 단계별 타이밍이 포함된 다단계 패턴 레시피
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    세 가지 기둥을 먼저 정합니다

    타이밍이나 곡선을 선택하기 전에 감정적 의도, 시각적 미세 스토리, 모션을 믿을 수 있게 만드는 크래프트를 파악합니다.

  2. 02
    하나의 성격 아키타입을 고정합니다

    Playful, Premium, Corporate, Energetic 중 하나의 아키타입을 선택하고 프로젝트 전반에서 유지합니다. 각 아키타입은 고유한 지속 시간 범위, 이징 곡선, 오버슈트를 갖고 있기 때문입니다.

  3. 03
    효과가 있는 최소한의 속성을 사용합니다

    속성 표는 각 효과 목표를 주요 속성과 선택적 보조 속성으로 짝짓습니다. 속성 하나는 직접적으로, 두 개는 정제되어 보이며, 세 개 이상은 시청자를 압도할 위험이 있습니다.

  4. 04
    거리에 따라 지속 시간을 조정합니다

    요소 유형에 맞는 지속 시간에서 시작한 다음 이동 거리에 맞춰 늘립니다: 100px가 기준이며, 200px는 1.3배, 400px는 1.6배가 됩니다.

  5. 05
    방향에 따라 이징을 적용합니다

    등장은 ease-out 계열 곡선으로 감속하여, 모션이 빠르게 시작해 부드럽게 정착합니다.

02 적합성 확인

motion-design Skill을 사용해야 하는 경우

작업이 이러한 종류의 모션 및 비디오일 때 Claude Code 또는 Codex에서 motion-design 스킬을 사용하십시오. 아래의 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 버튼, 카드, 모달, 페이지 전환 등의 UI 애니메이션
  • 마이크로 인터랙션 및 피드백 애니메이션
  • 로딩, 성공 및 오류 상태
  • 스크롤 트리거 또는 진행률 기반 애니메이션 계획

한계 인지하기

  • 요소가 세 개 이상 있는 장면에서는 같은 순간에 3분의 1 이상이 동시에 움직여서는 안 됩니다.
  • 경쾌한 오류 피드백: 오류는 견고하게 느껴져야 하므로 오류 상태에는 오버슈트를 적용하지 않습니다.

제공할 사항

  • 감정적 목표기쁨, 안정감, 긴박함, 우아함 중에서 시청자가 느껴야 할 감정을 먼저 결정합니다.
  • 모션 성격 아키타입타이밍, 이징, 오버슈트가 일관되게 유지되도록 성격을 이름 붙입니다: Playful, Premium, Corporate 또는 Energetic.
  • 주요 속성애니메이션을 작성하기 전에 실제로 움직이는 것—위치, 크기, 회전 또는 불투명도—을 명시합니다.

03 스킬 내부

motion-design 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 공간 이동에는 선형 이징을 사용하지 않는다

    공간적 움직임은 이징 커브를 사용해야 하며, 선형 이징은 스피너와 진행률 표시줄에만 사용합니다.

  2. 상태 변화에는 불투명도만 사용하지 않는다

    중요한 상태 변화는 제자리에서 페이드하는 대신 불투명도와 위치 또는 크기 변화를 결합해야 합니다.

  3. 세 가지 모션 레이어를 모두 유지한다

    모든 애니메이션에는 주요 동작, 보조적인 풍부함, 배경의 앰비언트 움직임이 있어야 하며, 이 레이어가 하나라도 빠지면 평평한 애니메이션이 됩니다.

  4. UI에는 기본적으로 Corporate를 사용한다

    성격이 명시되지 않은 경우, UI 작업에는 Corporate를, 일러스트레이션에는 Playful을 사용합니다.

  5. 등장을 퇴장보다 길게 만든다

    사용자는 나타나는 것에 더 신경 쓰므로, 등장은 퇴장보다 30-50% 더 길게 진행됩니다.

  6. 중간 키프레임 없이 화면의 3분의 1을 넘지 않는다

    중간 키프레임 변화 없이 화면의 1/3 이상을 이동하는 모션은 없습니다.

  7. 전체 스태거를 제한한다

    어떤 스태거 패턴을 사용하든, 전체 지연 예산은 500ms 미만으로 유지해야 합니다.

  8. 디즈니 원칙을 적용한다

    디즈니 애니메이션 원칙, 특히 예비 동작(anticipation)과 후속 동작(follow-through)이 요구됩니다.

04 활용하기

Claude Code 또는 Codex에 motion-design 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 귀하의 에이전트에 motion-design 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

skills/motion-design/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소는 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 평가 기준에 대한 전체 품질 체크리스트 파일을 검토합니다.
  • 지속 시간 표를 기준으로 모든 지속 시간이 해당 요소 유형과 일치하는지 확인합니다.
  • 결과물이 저렴하거나 밋밋하게 느껴진다면, 보조 및 배경 레이어로 그림자 모션과 배경 생동감을 추가합니다.
  • 개성이 없다면, 일반적인 이징을 아무 곳에나 쓰는 대신 하나의 아키타입을 일관되게 적용합니다.
  • 배포 전에 플랫폼, 접근성, 성능 적응을 확인합니다.

OpenDesign에서 SKILL.md 링크로 motion-design을 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
LottieFiles
Repository
github.com/LottieFiles/motion-design-skill 브랜치 main
스킬 파일
skills/motion-design/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 f9a8a04
License
MIT LICENSE 출처; SKILL.md에는 "MIT"로 명시됨.
리포지토리 스타
1,626 전체 LottieFiles/motion-design-skill 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. motion-design에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 적용 시점스킬 사용을 위한 트리거와, 타이밍·개성·디즈니 원칙·스태거로 안내하는 4가지 질문 결정 트리입니다.
  2. 세 가지 기둥 (CRITICAL)감정적 의도, 시각적 내러티브, 모션 크래프트, 그리고 모든 애니메이션에 필요한 세 가지 모션 레이어입니다.
  3. 모션 개성지속 시간, 이징, 오버슈트 값을 가진 네 가지 아키타입과 세 가지 브랜드 모션 상수입니다.
  4. 속성 선택효과 목표를 1차 및 2차 속성에 매핑하며, 단순성 기준값을 포함합니다.
  5. 지속 시간 표요소별 지속 시간, 거리 스케일링, 진입 대 종료 비율, 인터랙티브 피드백 타이밍입니다.
  6. 이징 선택방향성 이징 규칙, 업계 큐빅베지어 표준, 머티리얼 기반 지속 시간 및 오버슈트 스케일입니다.
  7. 일반 패턴버튼 누름, 카드 진입, 성공 상태, 에러 흔들림에 대한 단계별 레시피입니다.
  8. 안무 필수 요소히어로 리드, 공간 일관성, 반대 모션, 1/3 규칙, 스태거 지연 예산입니다.
  9. 감정-모션 매핑일곱 가지 감정을 성격, 경로, 이징, 지속 시간에 매핑하고, 경로가 언어로서 갖는 의미를 다룹니다.
  10. 무게 분류지속 시간, 오버슈트, 댐핑 가이드를 포함한 무겁고, 중간이고, 가벼운 요소들입니다.
  11. 품질 규칙절대 어겨서는 안 되는 CRITICAL 항목과 지속 시간, 이징, 일관성에 대한 HIGH 권장 사항입니다.
  12. 문제 해결 빠른 참조로봇 같은 느낌부터 밋밋한 느낌까지, 예상 원인과 해결책이 있는 다섯 가지 애니메이션 이상 신호입니다.
스킬 자체 설명
"모션 디자인 원칙을 적용하여 감정적으로 효과적이고 기술적으로 견고한 애니메이션과 전환을 만듭니다. UI에 맞게 조정된 타이밍, 이징, 안무, Disney 애니메이션 원칙을 제공합니다. 애니메이션, 전환, 마이크로 인터랙션, 로딩 상태, 페이지 전환, 스크롤 트리거 효과 또는 모든 모션 작업을 만들 때 사용합니다. CSS, Framer Motion, GSAP, Lottie, Spring 또는 모든 애니메이션 시스템과 함께 작동합니다."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 12,489자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

motion-design 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이것이 하나의 애니메이션 라이브러리에 저를 묶어두나요?

아니요. 이 파일은 CSS, Framer Motion, GSAP, Lottie, Spring 또는 그 어떤 애니메이션 시스템도 지원한다고 명시하므로, 가이드는 라이브러리별 코드가 아니라 타이밍, 이징, 안무에 대한 결정으로 제공됩니다.

모달 전환은 얼마나 걸려야 하나요?

지속 시간 표는 모달과 다이얼로그에 포커스 전환으로서 300-400ms를 부여합니다. 대조적으로 툴팁과 마이크로 피드백은 즉각적으로 느껴져야 하므로 80-120ms에 위치합니다.

엘라스틱 요소는 종이 카드보다 더 많이 튕겨야 하나요?

예. 재질 기반 이징 테이블은 지속 시간과 오버슈트를 암시된 재질에 따라 조정합니다. elastic은 0.8배 지속 시간 배율과 15-25%의 오버슈트를 적용하고, paper는 1.0배 지속 시간과 3-5%의 오버슈트를 유지합니다.

Motion Design

실제 모션 및 비디오 작업에서 motion-design 실행.

OpenDesign를 다운로드하고, SKILL.md 링크에서 motion-design을 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원