사용 가이드로 건너뛰기
UI Animation작성자 mblode

UI Animation 스킬.

목적 있는 인터페이스 모션을 구현하고 디버깅하며 측정하세요.

  • UI 모션
  • 모션 감소
소스 검토 · ui-animationSKILL.md
작업 목적 있는 인터페이스 모션을 구현하고 디버깅하며 측정하세요. 결과물 국소적인 인터페이스 모션 구현 또는 검토. 시작 전 확인 컴포넌트 코드 또는 선명한 레퍼런스 녹화, 동작 빈도, 대상 기기를 제공하세요. 모션 검토인지 구현 변경인지 측정 기반 재구성인지 정하세요.
편집 요약 · 소스 검토일 2026-11-02 · 생성된 예제가 아닙니다

01 기능 소개

목적 있는 인터페이스 모션을 구현하고 디버깅하며 측정하세요

UI 전환, 스프링, 제스처를 검토하거나 녹화에서 모션을 피팅하고 중단, 프레임률, 모션 감소를 명확히 확인하세요.

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

작업 방식

ui-animation은 인터페이스 모션의 구현, 검토, 측정을 다룹니다. 상호작용의 목적과 빈도부터 파악한 뒤 타이밍과 구현 방식을 선택합니다. 피드백, 방향 인지, 연속성을 기준으로 판단하며 자주 반복하는 동작은 즉각적으로 유지해야 합니다.

별도의 워크플로는 녹화에서 움직임을 측정합니다. 프레임을 추출하고 요소를 추적한 뒤 스프링이나 이징 곡선을 피팅해 구현 매개변수를 만듭니다. 열기와 닫기는 따로 다루고 새 녹화를 레퍼런스와 비교해 재구성한 단계가 유지되는지 확인합니다.

예상 산출물

  • 국소적인 인터페이스 모션 구현 또는 검토.
  • 녹화에서 측정한 이징 또는 스프링 명세.
  • 타이밍, 속성별 단계, 검증 관찰이 포함된 인계 자료.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    상태가 왜 움직여야 하는지 판단하세요

    피드백, 연속성, 방향 인지의 필요성과 동작 빈도를 파악하세요. 작업 완료와 키보드 포커스의 즉각성을 유지하세요.

  2. 02
    모션을 선택하거나 측정하세요

    컴포넌트 레시피를 선택하거나 녹화의 실제 프레임률로 프레임을 추출해 관련 움직임을 피팅하세요. 열기와 닫기 단계를 구분하세요.

  3. 03
    실제 상호작용을 테스트하세요

    빠르게 다시 토글하고 느린 재생을 검사하며 터치와 모션 감소를 테스트하세요. 재구성 작업에서는 구현 녹화를 원본과 비교하세요.

02 활용 상황

언제 사용하면 좋을까요

컴포넌트 코드 또는 선명한 레퍼런스 녹화, 동작 빈도, 대상 기기를 제공하세요. 모션 검토인지 구현 변경인지 측정 기반 재구성인지 정하세요.

적합한 경우

  • 상호작용이 어색한 경우느림, 점프, 잘못 발동하는 동작을 구체적인 타이밍 또는 구현 검사로 연결합니다.
  • 녹화된 효과를 맞춰야 하는 경우측정 스크립트는 눈대중으로 스프링을 추측하는 것 이상의 방법을 제공합니다.

확인할 한계

  • 전체 시각 방향을 정하지는 않습니다팔레트, 타이포그래피, 광범위한 제품 디자인은 주요 범위 밖입니다.
  • 측정에는 의존성이 필요합니다스크립트 기반 녹화 경로는 추적과 곡선 피팅에 FFmpeg와 Python 패키지를 사용합니다.
  • 피팅은 동등성의 증명이 아닙니다드롭 프레임, 가변 프레임률, 여러 단계의 움직임 때문에 단일 피팅 곡선이 오해를 낳을 수 있습니다.

준비할 입력

  • 컴포넌트 또는 녹화개선할 코드 또는 레퍼런스 상호작용의 선명한 클립을 제공하세요.
  • 동작과 빈도사용자의 행동, 결과 상태, 반복 빈도를 설명하세요.
  • 대상 플랫폼구현 스택, 기기, 접근성 요구 사항을 지정하세요.

03 핵심 결정

중요한 판단 기준

  1. 장식보다 목적

    판단 체계는 애니메이션을 권장할 뿐 아니라 불필요한 애니메이션을 거부할 수도 있습니다.

  2. 중단 처리

    빠른 토글은 정상 재생에서 놓치는 재시작과 목표 변경 문제를 드러냅니다.

  3. 측정 기반 인계

    속성별 타이밍과 피팅 매개변수를 분리하면 더 정확하게 재구성할 수 있습니다.

04 예시 브리프

목적을 좁힌 요청으로 시작하세요

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

소스와 설정 확인

개선할 코드 또는 레퍼런스 상호작용의 선명한 클립을 제공하세요.

업스트림 소스 파일
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md

아래 참고 링크에서 원본 사용 지침을 확인할 수 있습니다. 사용 전에 리포지터리의 설정 요건을 확인하세요. 설치 명령어가 아닙니다.

결과물 하나부터 시작

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

예시 브리프
ui-animation으로 제공한 녹화와 React 컴포넌트의 드로어 상호작용을 진단해 줘. 녹화의 실제 프레임률로 열기와 닫기를 따로 측정해. 느껴지는 지연이 이징, 초반 멈춤, 메인 스레드를 막는 작업 중 어디에서 오는지 파악해. 키보드 포커스의 즉각성과 기존 드로어 동작을 유지해. 가장 작은 구현 변경을 제안한 뒤 빠른 토글과 모션 감소를 테스트해. 스프링이나 곡선을 피팅한다면 한계를 보고하고 매개변수만으로 시각적 일치를 주장하지 말고 수정된 상호작용의 녹화를 레퍼런스와 비교해.

결과 확인

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

  • 빠른 목표 변경과 양방향 느린 재생을 테스트합니다.
  • 추출과 곡선 피팅의 프레임률을 일치시킵니다.
  • 같은 작업을 모션 감소 및 터치 입력으로 실행합니다.

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

05 출처 및 라이선스

소스와 라이선스

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

소스 소유자
mblode
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-11-02 · 391508702523
편집 소스 요약
목적 있는 인터페이스 모션을 구현하고 디버깅하며 측정하세요.

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

06 시작 전 질문

시작 전 궁금한 점

애니메이션을 추가할 곳을 찾을 수 있나요?

네. 탐색 경로는 목적과 빈도에 따라 기회를 보고하며 거부한 제안도 포함합니다. 탐색만으로 구현을 승인하지는 않습니다.

열기와 닫기를 왜 따로 측정하나요?

타이밍과 성격이 다른 경우가 많습니다. 원문은 한 방향만 피팅하고 단순히 뒤집지 말라고 경고합니다.

CSS 모션 감소 규칙이 전부를 다루나요?

반드시 그렇지는 않습니다. JavaScript 기반 모션에는 별도의 모션 감소 처리가 필요하며 실제 상호작용으로 테스트해야 한다고 설명합니다.

OpenDesign

작업 요청과 디자인 결과물을 한곳에 모으세요.

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

업스트림 소스 파일
https://github.com/mblode/agent-skills/blob/391508702523088f564fecfdd95ce76304efb117/skills/ui-animation/SKILL.md