사용 가이드로 건너뛰기
animation-vocabulary작성자 Emil Kowalski

Animation Vocabulary 스킬.

Claude Code 및 Codex용 모션 및 비디오 스킬: 모호한 모션 설명을 정확한 용어로 변환하는 역방향 검색 용어집.

  • Motion & Video
emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md
--- name: animation-vocabulary description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary
2026-09-14에 업스트림 파일에서 읽은 앞부분 및 섹션 제목 · 전체 12,884자

01 기능

Claude Code와 Codex에서 animation-vocabulary 스킬이 하는 일

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

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

스킬 자체의 표현으로

animation-vocabulary는 웹 모션의 이름을 찾기 위한 역방향 조회 용어집입니다. "팝오버가 열릴 때 튕기는 그 느낌", "iOS의 고무줄 스크롤" 같이 효과를 대략적으로 설명하면, 정확한 용어와 용어집 자체의 설명을 Stagger — 여러 항목을 순차적으로 애니메이션합니다 형식으로 반환합니다.

이는 애니메이션을 디자인하거나 만들려는 사람이 아니라, AI나 디자이너에게 요청할 때 정확한 단어가 필요한 디자이너와 개발자를 위한 것입니다. 이 용어집은 등장 및 퇴장, 순서와 타이밍, 이동 및 변형, 이징, 스프링 애니메이션, 스크롤, 피드백 및 인터랙션, 성능, 알아야 할 원칙을 다루며, Clip-path와 Mask처럼 비슷한 개념 쌍을 비교합니다.

산출물

  • 일치하는 용어와 용어집 자체의 정의를 한 줄로 정리한 형식
  • 각각에 조건이 붙은, 비슷한 대안들의 목록
  • 일치하는 것이 없을 때 명시적으로 표시된 근사값
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    키워드가 아니라 느낌에 맞추기

    사용자는 모션이 어떻게 보이고 느껴지는지를 말하며, 그 느낌은 기술적인 문자열과 대조되는 대신 용어집에 매핑됩니다.

  2. 02
    스킬의 고정 형식으로 답변합니다

    한 줄로: 용어를 굵게 표시하고, 줄표(—) 뒤에 글로서리 자체의 설명을 그대로 답니다. 답변 앞에 서두는 붙이지 않습니다.

  3. 03
    일치하는 것을 우선 순위로 매긴 뒤 대안을 나열합니다

    여러 용어가 부합할 경우 가장 잘 맞는 것을 먼저 제시하고, 하나 또는 두 개의 대안 후보를 이어서 제시하며 각각이 어떻게 다른지 설명하는 줄을 덧붙입니다.

  4. 04
    용어를 먼저 제시하고 거기서 멈춥니다

    용어가 먼저 나오고, 사용자가 더 설명을 요청하지 않는 한 근거는 보류됩니다.

02 적합성 확인

animation-vocabulary 스킬을 사용해야 하는 경우

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

적합한 경우

  • 효과가 정확히 눈앞에 그려지지만 이름을 모르는 경우입니다. 예를 들어 자신을 연 버튼에서 자라나는 팝오버 같은 경우입니다.
  • 직접 구현하기 위해서가 아니라 AI나 디자이너에게 브리프를 전달하기 위한 용어가 필요한 경우입니다.
  • 요청이 명칭에 관한 질문 형태로 들어옵니다: 이것을 뭐라고 부르나요…
  • 오버스크롤이 저항하다가 다시 튕겨 돌아오는 것처럼 물리적인 느낌만 설명할 수 있는 경우입니다.

한계 인지하기

  • 애니메이션을 설계하거나 구현하는 일 — 이 스킬의 범위는 효과의 이름을 짓는 데에만 한정됩니다.
  • 이 글로서리 범위 밖의 용어: 글로서리를 확장하는 대신 스킬은 그 공백을 알립니다.

제공할 사항

  • 입력사전에 기술적인 내용은 필요하지 않습니다. 스킬은 키워드 목록이 아니라 설명된 내용을 읽습니다.
  • 입력어떤 요소에서 나오는지 또는 어디에 붙는지를 말해 주세요. origin-aware animation 같은 용어는 그 관계로 정의되기 때문입니다.

03 스킬 내부

animation-vocabulary 스킬이 Claude Code와 Codex에 부여하는 규칙

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

  1. 글로서리를 인용하고, 바꿔 말하지 않습니다

    설명은 권위 있는 참고 텍스트로 취급되므로, 사용자를 위해 다시 표현하는 대신 그 문구를 그대로 옮겨 옵니다.

  2. 경쟁하는 용어를 명시적으로 대조합니다

    Clip-path와 Mask, Pop in과 Bounce, Shared element transition과 Layout animation처럼 근접한 쌍은 조용히 하나를 고르지 말고 나란히 놓아야 합니다.

  3. 용어를 절대 지어내지 않습니다

    정확한 용어가 글로서리에 없다면 그렇다고 분명히 말합니다. 개념을 설명하기 위해 기존 글로서리 용어를 사용할 수는 있지만, 새로운 이름을 만들어 내서는 안 됩니다.

  4. 의도를 읽어냅니다

    트리거는 키워드 검색이 아니라 사용자가 눈에 보이는 것을 있는 그대로 설명하는 것이며, 직관적으로 느낀 느낌이 해석해야 할 입력입니다.

  5. 간결하게 유지합니다

    이름을 묻는 질문에는 이름으로 답해야 하며, 사용자가 요청하지 않는 한 답변 길이를 늘리지 않습니다.

  6. 용어집을 동기화된 상태로 유지하기

    스킬 내부 용어집은 프로젝트의 /vocabulary 페이지를 정제한 스냅샷이며, 둘 중 하나가 바뀌면 함께 갱신되도록 되어 있습니다.

04 활용하기

Claude Code 또는 Codex에 animation-vocabulary 설치

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

Claude Code, Codex 또는 사용자의 에이전트에 animation-vocabulary 추가

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

Terminal
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

skills/animation-vocabulary/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소마다 자체 경로를 문서화할 수 있습니다.

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

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

출처: SKILL.md § Examples (코드 블록).

첫 번째 결과 확인

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

  • 답변은 용어집의 한 줄처럼 구성됩니다: 굵게 표시된 용어, 줄표, 파일 자체의 표현 — 예를 들어 rubber-banding 항목이 그렇습니다.
  • 대안 용어가 있는 경우, 각 항목이 해당 용어가 적용되는 조건을 한 줄로 담은 불릿으로 표시됩니다.
  • 경쟁하는 용어들은 하나의 답으로 합쳐지지 않고, 선택하기 전에 서로 구분되어 제시됩니다.

OpenDesign에서는 animation-vocabulary를 해당 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Repository
github.com/emilkowalski/skills 브랜치 main
스킬 파일
skills/animation-vocabulary/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 d23d7f8
License
MIT LICENSE에서 확인.
리포지토리 스타
37,516 GitHub 스냅샷은 2026-09-14에 촬영된 전체 emilkowalski/skills 저장소를 기준으로 하며, 이 카탈로그에는 9개의 스킬이 포함되어 있습니다. animation-vocabulary에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 빠른 시작한 줄 답변의 형태를 보여줍니다: 굵게 표시된 용어, 줄표, 용어집 설명.
  2. 지침번호가 붙은 여섯 가지 규칙: 의도 파악, 그대로 인용, 명확화, 근사치 제시, 용어집 안에서 유지, 간결함 유지.
  3. 예시세 가지 실제 조회 예: 느낌 기반 조회, 명확화 조회, 물리적 느낌 조회.
  4. 용어집Entrances & Exits부터 Principles to Know까지, 그룹으로 정리된 열두 개의 용어 목록.
스킬 자체 설명
팝오버가 열릴 때 튕기는 효과(Pop in), iOS 러버밴드 스크롤(Rubber-banding)처럼 모호한 웹 애니메이션이나 모션 효과 설명을 정확한 용어로 변환하는 역검색 용어집입니다. 사용자가 "~할 때 뭐라고 부르나요?"라고 묻거나, 이름을 모르는 상태로 모션 효과를 설명하면서 AI나 디자이너에게 프롬프트할 정확한 단어가 필요할 때 사용합니다. 효과를 명명하기 위한 것이지, 설계하거나 구현하기 위한 것이 아닙니다.

SKILL.md의 전문 설명입니다. 전체 파일은 약 12,884자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

animation-vocabulary 스킬에 대해 자주 묻는 질문

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

이걸 사용하려면 용어를 미리 알고 있어야 하나요?

아닙니다. 효과를 아는 대로 설명하면 됩니다 — 파일 자체의 예시도 "iOS의 rubber-band 스크롤" 정도일 뿐입니다 — 그러면 용어집 설명이 붙은 Rubber-banding이라는 용어로 답이 돌아옵니다.

제 효과가 용어집에 없으면 어떻게 되나요?

가장 가까운 용어를 지목하고 이것이 근사치일 뿐임을 분명히 밝히거나, "이건 스케일인 등장의 stagger네요" 같은 용어집 표현으로 효과를 다시 설명합니다. 목록에 없는 용어를 만들어내지 않습니다.

이것이 저를 위해 애니메이션을 디자인하거나 구현해 주나요?

아닙니다. 이 스킬은 효과의 이름을 붙이는 데에만 범위가 한정되어 있으며, 디자인하거나 구현하는 것은 명시적으로 범위 밖입니다. 반환된 용어를 가지고 모션을 만들 사람이나 도구에게 브리프를 전달하면 됩니다.

Animation Vocabulary

실제 Motion 및 Video 작업에서 animation-vocabulary를 실행하십시오.

OpenDesign을 다운로드하고, SKILL.md 링크에서 animation-vocabulary를 가져온 뒤, 위 프롬프트를 붙여넣고 결과 전에 계획을 확인하십시오.

터미널
npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

OpenDesign 데스크톱

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

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

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

macOS, Windows 지원