grahama1970/animation-vocabulary

애니메이션 용어집

모션 또는 효과에 대한 막연한 설명을 정확한 용어로 바꿔주어, 사용자가 무엇을 요청해야 할지 알 수 있게 합니다.

빠른 시작

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

**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** — 하나의 모양이 다른 모양으로 부드럽게 변합니다. 예: 다이내믹 아일랜드.

비슷한 대안:
- **Crossfade** — 단순히 같은 위치에서 서로 겹쳐 페이드되는 경우.
- **Shared element transition** — 요소가 한 위치에서 다른 위치로 이동하면서 변형되는 경우.

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

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

용어집

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

등장과 퇴장 — 요소가 나타나고 사라지는 방식

• Fade in / Fade out — 요소가 불투명도를 변경하여 나타나거나 사라집니다.
• Slide in — 요소가 화면 밖에서 (왼쪽, 오른쪽, 위쪽, 아래쪽) 미끄러져 들어옵니다.
• Scale in — 요소가 작은 크기에서 전체 크기로 자라나며 나타나고, 종종 페이드와 함께 사용됩니다.
• Pop in — 요소가 약간 오버슈트하며 나타나며, 제자리에 튕겨 들어오는 듯한 느낌입니다.
• Reveal — 콘텐츠가 점진적으로 드러나며, 종종 클립 경로나 마스크를 애니메이션하여 만듭니다.
• 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 — 하나의 모양이 다른 모양으로 부드럽게 변합니다. 예: 다이내믹 아일랜드.
• 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 — 너비, 높이, 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 설정을 존중하여 모션을 줄이거나 제거합니다.