Animation Principles작성자 Owl-Listener

Animation Principles 스킬.

전환 하나에 명확한 목적을 부여하고, 인터페이스의 상태 변화를 뒷받침하는 모션 프로필을 만듭니다.

UI 모션
디자인 가이드

소스 검토 · Animation PrinciplesSKILL.md

작업 UX 산출물 • 인터페이스 이벤트 하나에 대한 모션 근거 • 이징, 지속 시간, 시퀀스 권장안 • 중단 처리 및 모션 감소 동작 시작하기 전에 인터페이스의 이전 및 이후 상태, 트리거, 대상 기기를 제공하세요. 실행 가능한 미리보기로 타이밍, 중단 처리, 모션 감소 동작을 확인하세요.

편집용 요약 · 검토한 소스 2026-10-07 · 생성된 예시가 아님

01 기능 소개

UI 애니메이션 하나 다듬기

이징, 지속 시간, 안무, 중단 처리, 모션 감소를 다루는 단일 모션 디자인 가이드입니다.

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

작업 방식

Animation Principles는 UI 움직임 하나에 집중한 모션 디자인 가이드입니다. 이징 방향, 지속 시간, 연출, 후속 동작을 사용자가 알아차려야 할 내용과 연결합니다. 등장, 퇴장, 강조, 로딩 처리, 전환은 각각 역할이 다릅니다.

소스에는 타이밍 범위와 스태거 제안이 포함되어 있지만, 이는 모든 인터페이스에 적용되는 측정된 요구사항이 아니라 출발점입니다. 또한 중단 가능한 동작, 모션 감소 지원, 저성능 기기에서의 점검을 요구합니다. 제품 전반의 모션 토큰은 다른 작업에 속합니다.

예상 산출물

인터페이스 이벤트 하나에 대한 모션 근거
이징, 지속 시간, 시퀀스 권장안
중단 처리 및 모션 감소 동작

예시 브리프 보기

브리프에서 검토까지

01
상태 변화 정의하기
애니메이션이 무엇을 전달하는지, 어떤 요소가 먼저 주목받아야 하는지 파악합니다.
02
움직임 조정하기
등장, 퇴장, 강조 또는 전환에 맞는 이징 프로필과 지속 시간을 선택합니다.
03
대안 점검하기
진행 도중 취소, 모션 감소 동작, 대상 기기에서 체감되는 반응성을 검토합니다.

02 활용 상황

사용 시점

인터페이스의 이전 및 이후 상태, 트리거, 대상 기기를 제공하세요. 실행 가능한 미리보기로 타이밍, 중단 처리, 모션 감소 동작을 확인하세요.

적합한 경우

모달 등장들어오는 표면 하나가 반응성 있고 의도적으로 느껴지게 만들 때 사용하세요.
산만한 전환상호작용은 작동하지만 속도감이나 안무가 어색할 때 유용합니다.

확인할 한계

전체 모션 시스템이 아님소스는 이것을 제품 전반의 지속 시간 및 이징 토큰과 구분합니다.
범위는 맥락이 필요함제안된 밀리초 값이 실제 상호작용 테스트보다 우선해서는 안 됩니다.

준비할 입력

트리거와 상태이전 상태, 동작, 그 결과 상태를 보여주세요.
주목 목표이 움직임을 통해 보는 사람이 무엇을 이해해야 하는지 설명하세요.
기기 제약모션 감소와 성능 요구사항을 확인하세요.

03 핵심 결정

중요한 결정

장식보다 목적
모션은 그것이 전달하는 상태 변화로 평가됩니다.
중단 처리의 중요성
전환은 끝나기 전에 사용자의 다른 동작이 들어와도 견뎌야 합니다.

04 예시 브리프

집중된 브리프 시도하기

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

설정 검토

이 작업의 SKILL.md를 designer-skills 저장소에서 에이전트가 지원하는 스킬 위치에 불러오세요. 진입 파일에는 범용 설치 명령이 정해져 있지 않습니다.

업스트림 소스 파일

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

인터페이스의 이전 및 이후 상태, 트리거, 대상 기기를 제공하세요. 실행 가능한 미리보기로 타이밍, 중단 처리, 모션 감소 동작을 확인하세요.

하나의 산출물로 시작

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

예시 브리프

animation-principles를 사용해 이 필터 패널의 등장 모션을 다듬어 주세요. 이징과 지속 시간을 설명하고, 패널과 콘텐츠를 조율하며, 중간에 닫힐 때의 동작을 정의하세요. 모션 감소 대안을 포함하고 장식용 반복 효과는 추가하지 마세요.

결과 점검

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

애니메이션이 구체적인 변화를 전달합니다.
두 번째 동작이 깔끔하게 중단시킬 수 있습니다.
모션 감소 동작도 이해하기 쉽게 유지됩니다.

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

OpenDesign 다운로드 퀵스타트 읽기

05 출처 및 라이선스

소스 및 라이선스

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

소스 소유자: Owl-Listener
저장소: Owl-Listener/designer-skills
스킬 파일: interaction-design/skills/animation-principles/SKILL.md
라이선스: MIT
검토한 스냅샷: 2026-10-07 · 9a6930cf84a8

편집용 소스 요약

이징, 지속 시간, 안무, 중단 처리, 모션 감소를 다루는 단일 모션 디자인 가이드입니다.

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

06 시작 전 질문

시작 전 질문

모든 모션 토큰을 정의하나요?

아니요. 명시된 범위는 모션 하나이며, 제품 전반의 토큰은 motion-system 스킬이 다룹니다.

타이밍 범위는 보편적인가요?

보장된 최적값이 아니라, 맥락에서 테스트해야 하는 디자인 가이드로 취급하세요.

로딩은 항상 애니메이션으로 처리해야 하나요?

소스는 로딩 패턴을 나열하지만, 모션이 목적에 기여하고 접근성 설정을 존중해야 한다고 요구합니다.

OpenDesign

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

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

OpenDesign 다운로드 디자인 스킬 둘러보기