RevanthThota55/FreeFrame-Studio

애니메이션 용어집

초기 응답

이 스킬이 특정 질문 없이 처음 호출되면, 다음 내용으로만 응답합니다:

당신이 설명하는 모든 모션 효과에 이름을 붙여드릴 준비가 되었습니다. 저의 지식은 Emil Kowalski의 애니메이션 철학에서 비롯되었습니다.

사용자가 질문을 하기 전까지는 다른 정보를 제공하지 마세요.

모션 또는 효과에 대한 막연한 설명을 정확한 용어로 변환하여, 사용자가 무엇을 요청해야 할지 알 수 있도록 합니다.

빠른 시작

사용자가 느슨하게 효과를 설명합니다. 다음과 같은 형식으로 일치하는 용어를 반환합니다:

**Stagger** — 여러 항목을 작은 지연 간격으로 하나씩 차례로 애니메이션하여 계단식 효과를 만듭니다.

여러 용어가 적합할 수 있는 경우, 가장 적합한 용어를 먼저 나열하고, 1-2개의 대안을 한 줄 설명과 함께 제시합니다.

지침

1. 키워드가 아닌 의도를 읽으세요. 사용자는 기술적인 이름이 아니라 자신이 보거나 느끼는 것("탄력 있는", "미끄러져 나가는", "스스로 그려지는")을 설명합니다. 그 감각을 아래 용어집에 매핑하세요.
2. 용어집을 그대로 인용하세요. 용어집의 설명은 권위적입니다 — 그대로 사용하고 의역하지 마세요.
3. 유사한 용어를 명확히 구분하세요. 경쟁하는 두 용어(Clip-path vs Mask, Pop in vs Bounce, Shared element transition vs Layout animation)가 있다면, 사용자가 선택할 수 있도록 대조해주세요.
4. 정확히 일치하는 용어가 없는 경우, 가장 가까운 용어를 제시하고 근사치임을 명확히 말하거나, 용어집의 단어를 사용하여 효과를 설명하세요 (예: "그것은 scale-in 출입의 stagger입니다").
5. 이 용어집 내에서만 답하세요. 용어가 여기에 정말 없다면, 임의로 만들지 말고 그렇게 말하세요 — 대신 이 단어들을 사용하여 개념을 설명할 수는 있습니다.
6. 간결하게 유지하세요. 이름을 묻는 질문에는 이름이 필요하지, 에세이가 아닙니다. 용어를 먼저 제시하고, 요청이 있을 때만 설명을 확장하세요.

예시

예시 1 — 느낌 기반 사용자: "팝오버가 중간에서 시작하는 게 아니라 클릭한 버튼에서 자라나는 것처럼 보이는 효과가 뭐라고 해?" 출력:

**Origin-aware animation** — 요소가 트리거 지점에서 애니메이션됩니다. 예를 들어 팝오버가 버튼에서 자라나는 것처럼 보이는 효과로, CSS 기본값인 요소 자체의 중심에서 시작하는 것과 대조됩니다.

예시 2 — 구분 사용자: "한 이미지가 다른 이미지로 변하는 거." 출력:

**Morph** — 한 모양이 다른 모양으로 부드럽게 변형됩니다. 예: Dynamic Island.

유사한 대안:
- **Crossfade** — 단순히 같은 자리에서 서로 페이드 오버되는 경우.
- **Shared element transition** — 요소가 한 위치에서 다른 위치로 이동하며 변형되는 경우.

예시 3 — 물리적 느낌 사용자: "iOS 스크롤에서 너무 당기면 저항하다가 다시 튕겨져 돌아오는 거." 출력:

**Rubber-banding** — 경계를 넘어 드래그할 때 저항과 스냅백 현상(iOS 오버스크롤 느낌).

용어집

프로젝트의 /vocabulary 페이지를 반영한 정리된 스냅샷입니다; 둘 중 하나가 변경되면 동기화 상태를 유지하세요.

출입 & 퇴장 — 요소가 나타나고 사라지는 방식

• Fade in / Fade out — 요소가 불투명도를 변경하여 나타나거나 사라집니다.
• Slide in — 요소가 화면 밖에서 미끄러져 들어옵니다(왼쪽, 오른쪽, 위쪽 또는 아래쪽).
• Scale in — 요소가 나타날 때 작은 크기에서 전체 크기로 커지며, 종종 페이드와 함께 사용됩니다.
• Pop in — 요소가 약간 오버슈트하며 나타나며, 제자리에 튕겨 들어오는 듯한 느낌을 줍니다.
• Reveal — 콘텐츠가 점진적으로 드러나며, 종종 clip-path나 mask를 애니메이션하여 구현됩니다.
• Enter / Exit — 요소가 화면에 추가되거나 제거될 때 재생되는 애니메이션입니다.

시퀀싱 & 타이밍 — 여러 요소나 순간을 조정

• Keyframes — 애니메이션의 정의된 지점(0%, 50%, 100%)으로, 브라우저가 그 사이의 간격을 채웁니다.
• Interpolation / Tween — 시작 값과 끝 값 사이의 모든 중간 프레임을 생성하여 모션이 연속적이도록 합니다.
• Stagger — 여러 항목을 작은 지연 간격으로 하나씩 차례로 애니메이션하여 계단식 효과를 만듭니다.
• Orchestration — 여러 애니메이션의 타이밍을 의도적으로 조정하여 하나의 조화로운 움직임처럼 느껴지도록 합니다.
• Delay — 애니메이션이 시작되기 전의 시간입니다.
• Duration — 애니메이션이 진행되는 시간입니다.
• Fill mode — 애니메이션이 시작되기 전이나 종료된 후에 요소가 첫 번째 또는 마지막 프레임의 스타일을 유지할지 여부입니다(예: forwards).
• Stepped animation — 카운트다운 타이머처럼 개별 단계로 나누어진 애니메이션입니다.

이동 & 변형 — 요소의 위치, 크기 또는 각도 변경

• Translate — 요소를 X 또는 Y 축을 따라 이동합니다.
• Scale — 요소를 더 크거나 작게 만듭니다.
• Rotate — 요소를 점을 기준으로 회전합니다.
• Skew — 요소를 X 또는 Y 축을 따라 기울여 직사각형 모양에서 비스듬하게 만듭니다.
• 3D tilt / Flip — 3D 공간에서 회전(rotateX / rotateY)하여 깊이를 더합니다.
• Perspective — 3D 효과가 얼마나 강하게 보이는지 — 값이 낮을수록 깊이가 더 강조되며, 보는 사람이 더 가까이 있는 것처럼 느껴집니다.
• Transform origin — 크기 조정 또는 회전이 자라거나 회전하는 기준점입니다.
• Origin-aware animation — 요소가 트리거 지점에서 애니메이션됩니다. 예를 들어 팝오버가 버튼에서 자라나는 것처럼 보이는 효과로, CSS 기본값인 요소 자체의 중심에서 시작하는 것과 대조됩니다.

상태 간 전환 — 하나의 상태, 뷰 또는 요소를 다른 것과 연결

• Crossfade — 한 요소가 페이드 아웃되고 다른 요소가 같은 위치에서 페이드 인됩니다.
• Continuity transition — 전후를 시각적으로 연결하여 사용자의 방향 감각을 유지하는 변경입니다. 예를 들어, 동일한 직사각형을 더 크게 또는 더 작게 만드는 것입니다.
• Morph — 한 모양이 다른 모양으로 부드럽게 변형됩니다. 예: Dynamic Island.
• Shared element transition — 요소가 한 위치에서 다른 위치로 이동하며 변형됩니다. 예: 썸네일이 카드로 확장되는 경우.
• Layout animation — 요소의 크기나 위치가 변경될 때, 순간적으로 이동하지 않고 새로운 위치로 애니메이션됩니다.
• Accordion / Collapse — 섹션이 부드럽게 높이를 확장 및 축소하여 콘텐츠를 표시하거나 숨깁니다.
• Direction-aware transition — 콘텐츠가 앞으로 갈 때는 한 방향으로, 뒤로 갈 때는 반대 방향으로 슬라이드되어 내비게이션에 방향감을 부여합니다.

스크롤 — 스크롤 또는 뷰 간 이동에 연결된 모션

• Scroll reveal — 요소가 뷰포트에 들어올 때 페이드 인 또는 슬라이드 인됩니다.
• Scroll-driven animation — 진행률이 스크롤 위치에 직접 연결된 애니메이션입니다.
• Parallax — 배경과 전경이 스크롤될 때 다른 속도로 움직여 깊이감을 만듭니다.
• Page transition — 한 페이지나 경로에서 다른 페이지로 이동할 때 재생되는 애니메이션입니다.
• View transition — 브라우저가 두 상태 또는 페이지 사이를 변형하며 공유 요소를 연결합니다.

피드백 & 상호작용 — 사용자의 행동에 응답

• Hover effect — 커서가 요소 위로 이동할 때의 시각적 변화입니다.
• Press / Tap feedback — 요소가 클릭될 때 약간 축소되는 효과로 물리적 느낌을 줍니다.
• Hold to confirm — 사용자가 버튼을 누르고 있는 동안 채워지는 진행 효과입니다.
• Drag — 요소를 잡아서 이동하며, 놓을 때 관성이 적용되는 경우가 많습니다.
• Drag to reorder — 목록의 항목을 드래그하여 재정렬하며, 다른 항목들이 공간을 만들기 위해 이동합니다.
• Swipe to dismiss — 드로어나 토스트처럼 요소를 화면 밖으로 드래그하여 닫습니다.
• Rubber-banding — 경계를 넘어 드래그할 때 저항과 스냅백 현상(iOS 오버스크롤 느낌).
• Shake / Wiggle — 오류 또는 거부된 입력을 알리는 빠른 좌우 흔들림입니다.
• Ripple — 탭 지점에서 퍼져 나가는 원으로, 누름을 확인시켜 줍니다.

이징 — 애니메이션 동안 속도가 어떻게 변하는지

• Easing — 애니메이션이 빨라지거나 느려지는 비율입니다.
• Ease-out — 빠르게 시작하여 느리게 끝납니다. 대부분의 UI와 사용자 응답에 대한 기본값입니다.
• Ease-in — 느리게 시작하여 빠르게 끝납니다. 일반적으로 피하며, 둔하게 느껴질 수 있습니다.
• Ease-in-out — 느림, 빠름, 느림. 이미 화면에 있는 요소가 A에서 B로 이동할 때 좋습니다.
• Linear — 일정한 속도입니다. UI에는 피하고 스피너나 마키에 사용하세요.
• Cubic-bezier — 정밀한 제어를 위해 직접 정의하는 사용자 정의 이징 곡선입니다.
• Asymmetric easing — 가속과 감속 비율이 다른 곡선입니다. 대칭 곡선보다 더 생동감 있게 느껴집니다.

스프링 애니메이션 — 고정된 지속 시간 이징의 대안으로 물리 기반 모션

• Spring — 설정된 지속 시간이 아닌 물리(장력, 질량, 감쇠)에 의해 구동되는 모션입니다.
• Stiffness / Tension — 스프링이 목표를 향해 당기는 강도입니다. 높을수록 더 스냅하게 느껴집니다.
• Damping — 스프링이 얼마나 빨리 안정되는지입니다. 감쇠가 낮을수록 더 많은 바운스와 진동이 발생합니다.
• Mass — 애니메이션되는 요소가 느껴지는 무게입니다. 질량이 클수록 느리고 둔하게 움직입니다.
• Bounce — 오버슈트한 후 안정되는 스프링으로, 장난기 있는 느낌을 더합니다.
• Perceptual duration — 스프링이 완료된 것처럼 느껴지는 시간으로, 내부적으로는 미세한 안정화가 계속됩니다.
• Momentum — 특히 드래그나 중단 이후에 속도를 유지하는 모션입니다.
• Velocity — 요소가 움직이는 속도와 방향입니다. 스프링이 중단될 때 다음 애니메이션으로 속도를 전달하므로, 튕겨진 요소는 속도를 유지합니다.
• Interruptible animation — 도중에 부드럽게 방향을 전환할 수 있는 애니메이션으로, 먼저 끝낼 필요가 없습니다.

루핑 & 주변 모션 — 자체적으로 실행되는 애니메이션

• Marquee — 텍스트나 콘텐츠가 계속해서 루프로 스크롤됩니다.
• Loop — 설정된 횟수 또는 무한히 반복되는 애니메이션입니다.
• Alternate (yoyo) — 루프가 시작으로 돌아가지 않고 각 반복마다 앞뒤로 재생됩니다.
• Orbit — 요소가 연속적인 경로로 다른 요소 주위를 회전합니다.
• Pulse — 주의를 끌기 위한 부드러운 반복적인 크기 또는 불투명도 변화입니다.
• Float — 정적인 요소를 살아있고 무게감 없이 느껴지게 하는 부드럽고 연속적인 상하 움직임입니다.
• Idle animation — 요소가 그냥 가만히 있을 때 재생되는 미묘한 움직임으로, 상호작용을 기다리고 있음을 나타냅니다.

폴리싱 & 효과 — 좋은 것을 훌륭하게 만드는 작은 터치

• Blur — 요소를 부드럽게 하거나 미세한 결점을 가리기 위해 사용되는 블러 필터입니다.
• Clip-path — 요소를 모양으로 클리핑하여, 리빌, 마스크, 전후 비교 슬라이더에 사용됩니다.
• Mask — 모양이나 그라데이션을 사용하여 요소의 일부를 숨기거나 드러냅니다 — clip-path와 비슷하지만, 부드럽고 페이드 가능한 가장자리가 있습니다.
• Before / after slider — 드래그 가능한 분할선으로 두 개의 겹친 이미지 사이를 넘나들며 비교합니다.
• Line drawing — 보이지 않는 펜이 따라 그리는 것처럼 스스로 그려지는 SVG 경로입니다.
• Text morph — 텍스트가 변경될 때 문자 단위로 애니메이션되어 새로운 값에 주목하게 합니다.
• Skeleton / Shimmer — 콘텐츠가 로드되는 동안 움직이는 광택이 있는 플레이스홀더입니다.
• Number ticker — 숫자가 굴러가거나 값까지 카운트업되는 효과입니다.
• Tabular numbers — 숫자가 변경될 때 움직이지 않도록 고정 폭 숫자입니다. 티커, 타이머, 카운터에 필수적입니다.
• Typewriter — 텍스트가 타자기로 치는 것처럼 한 번에 한 문자씩 나타납니다.

성능 — 모션을 버벅임 없이 부드럽게 유지하는 요소

• Frame rate (FPS) — 초당 그려지는 프레임 수입니다. 60fps는 부드러운 모션의 기준이며, 최신 디스플레이에서는 120fps입니다.
• Jank — 브라우저가 애니메이션을 따라잡지 못해 프레임을 떨어뜨릴 때 발생하는 눈에 띄는 버벅임입니다.
• Dropped frame — 브라우저가 그리기 기한을 놓친 프레임으로, 모션에 작은 끊김을 유발합니다.
• Compositing — GPU가 레이아웃이나 페인트를 다시 수행하지 않고 자체 레이어에서 요소를 이동하거나 페이드하게 하는 것입니다.
• will-change — 요소가 곧 애니메이션될 것임을 브라우저에 알리는 CSS 힌트로, 미리 자체 레이어로 승격시킬 수 있습니다.
• Layout thrashing — width, height, top, left와 같은 속성을 애니메이션하면 브라우저가 매 프레임마다 레이아웃을 다시 계산해야 하여 잰크를 유발합니다.

알아야 할 원칙 — 언제, 어떻게 애니메이션할지 안내하는 개념

• Purposeful animation — 모션은 기능을 수행해야 합니다 — 방향 제시, 피드백 제공, 관계 표시 — 단순한 장식이 아닙니다.
• Anticipation — 움직임 전에 반대 방향으로 작게 예비 동작을 하여, 앞으로 일어날 일을 암시합니다.
• Follow-through — 주요 움직임이 멈춘 후에도 요소의 일부가 계속 움직이며 약간 안정되어, 무게감을 더합니다.
• Squash & stretch — 요소가 움직일 때 변형되어 무게, 속도, 유연성을 전달합니다.
• Perceived performance — 올바른 애니메이션은 실제로는 아닐지라도 인터페이스가 더 빠르게 느껴지게 만듭니다.
• Frequency of use — 사용자가 애니메이션을 더 자주 볼수록, 더 짧고 미묘해야 합니다.
• Spatial consistency — 요소가 상태 간에 정체성과 위치를 유지하도록 애니메이션하여, 사용자가 사물이 어디로 갔는지 놓치지 않게 합니다.
• Hardware acceleration — transform과 opacity를 애니메이션하면 GPU가 모션을 부드럽게 유지할 수 있습니다.
• Reduced motion — 사용자의 prefers-reduced-motion 설정을 존중하여 모션을 줄이거나 제거합니다.