AI에게 아직도 좀 스크롤 자연스럽게 해달라고 하시나요?

프롬프트에 바로 쓸 수 있는 애니메이션 용어 정리

AI로 웹사이트, 앱 UI, 영상, 모션 그래픽을 만들다 보면 이런 순간이 자주 옵니다.

“버튼이 좀 자연스럽게 나타났으면 좋겠는데…”
“카드가 부드럽게 열리는 느낌이면 좋겠는데…”
“스크롤할 때 화면이 살아 움직였으면 좋겠는데…”

그런데 문제는 “자연스럽게”, “부드럽게”, “살아 있게” 같은 표현만으로는 AI가 정확히 어떤 움직임을 만들어야 하는지 알기 어렵다는 점입니다.

애니메이션도 하나의 언어입니다.
어떤 요소가 어떻게 등장하는지, 어떤 속도로 움직이는지, 사용자의 행동에 어떻게 반응하는지, 화면 전환에서 무엇을 유지해야 하는지에 따라 결과물의 완성도가 크게 달라집니다.

그래서 이번 글에서는 AI에게 애니메이션을 지시할 때 자주 쓰는 기본 용어들을 정리해보겠습니다.

---

1. 등장과 퇴장: 화면에 어떻게 나타나고 사라질 것인가

가장 기본이 되는 애니메이션은 요소가 화면에 나타나고 사라지는 방식입니다.

Fade in / Fade out은 요소가 투명도 변화를 통해 서서히 나타나거나 사라지는 방식입니다. 가장 무난하고 안정적인 등장 방식입니다.

예를 들어 프롬프트에서는 이렇게 쓸 수 있습니다.

The title fades in smoothly, then fades out after two seconds.

Slide in은 요소가 화면 밖에서 안쪽으로 미끄러져 들어오는 방식입니다. 왼쪽, 오른쪽, 위, 아래 방향을 함께 지정하면 더 정확합니다.

The sidebar slides in from the left with an ease-out motion.

Scale in은 요소가 작은 크기에서 원래 크기로 커지면서 나타나는 방식입니다. 보통 fade와 함께 쓰면 더 자연스럽습니다.

The card scales in from 90% to 100% while fading in.

Pop in은 약간 튀어나오듯 등장하는 방식입니다. 작은 오버슈트가 있어서 알림, 배지, 버튼 등에 잘 어울립니다.

The notification badge pops in with a slight bounce.

Reveal은 콘텐츠가 한 번에 나타나는 것이 아니라 마스크나 클립을 통해 점진적으로 드러나는 방식입니다. 이미지, 제목, 섹션 오픈 등에 자주 사용됩니다.

Reveal the hero image from left to right using a soft mask.

---

2. 순서와 타이밍: 여러 요소를 어떻게 조율할 것인가

좋은 애니메이션은 단순히 움직이는 것이 아니라, 여러 요소가 적절한 순서로 등장합니다.

Keyframes는 애니메이션의 주요 지점을 의미합니다. 예를 들어 0%, 50%, 100% 상태를 정하면 브라우저나 애니메이션 엔진이 중간 프레임을 채워줍니다.

Interpolation / Tween은 시작값과 끝값 사이의 중간 프레임을 자동으로 만들어 연속적인 움직임을 만드는 과정입니다.

Stagger는 여러 요소를 한 번에 움직이지 않고, 약간의 시간차를 두고 순서대로 움직이는 방식입니다. 리스트, 카드, 메뉴 항목에 자주 사용됩니다.

Animate the list items with a 0.08 second stagger.

Orchestration은 여러 애니메이션을 하나의 흐름처럼 조율하는 것입니다. 예를 들어 배경이 먼저 흐려지고, 카드가 커지고, 텍스트가 늦게 나타나는 식입니다.

Delay는 애니메이션이 시작되기 전 기다리는 시간입니다.

Duration은 애니메이션이 진행되는 전체 시간입니다.

Fill mode는 애니메이션이 끝난 후 마지막 상태를 유지할지, 원래 상태로 돌아갈지를 결정합니다. CSS에서는 forwards 같은 값으로 자주 사용됩니다.

Stepped animation은 부드러운 움직임이 아니라 단계적으로 끊어지는 애니메이션입니다. 카운트다운, 타이머, 픽셀 스타일 UI 등에 어울립니다.

---

3. 움직임과 변형: 위치, 크기, 회전, 깊이

UI 애니메이션에서 가장 자주 쓰는 속성은 위치와 크기, 회전입니다.

Translate는 요소를 X축 또는 Y축 방향으로 이동시키는 것입니다.

Move the button 12px upward on hover.

Scale은 요소를 크게 하거나 작게 만드는 것입니다.

Scale the button down to 0.96 when pressed.

Rotate는 요소를 특정 지점을 기준으로 회전시키는 것입니다.

Skew는 요소를 기울여 사각형 형태를 비스듬하게 변형하는 방식입니다.

3D tilt / Flip은 rotateX, rotateY처럼 3D 공간에서 요소를 회전시키는 효과입니다. 카드 뒤집기, 입체적인 호버 효과에 잘 어울립니다.

Perspective는 3D 효과의 깊이감을 조절합니다. 값이 낮을수록 카메라가 가까이 있는 것처럼 깊이가 과장됩니다.

Transform origin은 크기 변화나 회전이 시작되는 기준점입니다. 가운데에서 커지는지, 왼쪽 위에서 펼쳐지는지에 따라 느낌이 완전히 달라집니다.

Origin-aware animation은 요소가 자기 중심이 아니라, 실제 트리거된 위치에서 시작되는 애니메이션입니다. 예를 들어 팝오버가 버튼 중앙에서 커지는 것이 아니라 버튼 위치에서 자연스럽게 펼쳐지는 방식입니다.

---

4. 상태 전환: 사용자가 화면을 잃어버리지 않게 연결하기

좋은 전환 애니메이션은 사용자가 “방금 본 것이 어디로 갔는지” 알 수 있게 해줍니다.

Crossfade는 한 요소가 사라지는 동시에 다른 요소가 같은 위치에서 나타나는 방식입니다.

Continuity transition은 전후 상태를 시각적으로 연결하는 전환입니다. 예를 들어 작은 사각형이 큰 카드로 확장되면 사용자는 같은 대상이 변형되었다고 인식합니다.

Morph는 하나의 형태가 다른 형태로 부드럽게 변하는 것입니다. 애플의 Dynamic Island 같은 효과를 떠올리면 쉽습니다.

Shared element transition은 썸네일이 확장되어 상세 카드가 되는 것처럼, 같은 요소가 위치와 크기를 바꾸며 다음 화면으로 이어지는 전환입니다.

Layout animation은 레이아웃이 바뀔 때 요소가 갑자기 튀지 않고 새 위치로 부드럽게 이동하는 방식입니다.

Accordion / Collapse는 콘텐츠 섹션이 높이를 조절하며 열리고 닫히는 애니메이션입니다.

Direction-aware transition은 앞으로 이동할 때는 오른쪽에서 왼쪽으로, 뒤로 갈 때는 반대 방향으로 움직이는 식의 방향성을 가진 전환입니다. 앱 내비게이션에서 사용자에게 공간감을 줍니다.

---

5. 스크롤 애니메이션: 화면 이동과 함께 움직이게 만들기

웹페이지에서는 스크롤과 연결된 애니메이션이 매우 중요합니다.

Scroll reveal은 요소가 화면에 들어올 때 fade 또는 slide로 나타나는 방식입니다.

Sections fade in and slide up as they enter the viewport.

Scroll-driven animation은 애니메이션 진행률이 스크롤 위치와 직접 연결되는 방식입니다. 사용자가 얼마나 스크롤했는지에 따라 애니메이션도 그만큼 진행됩니다.

Parallax는 배경과 전경이 서로 다른 속도로 움직이면서 깊이감을 만드는 기법입니다.

Page transition은 페이지나 라우트가 바뀔 때 재생되는 전환 애니메이션입니다.

View transition은 브라우저가 두 상태나 두 페이지 사이를 연결해주는 전환입니다. 특히 공유 요소를 자연스럽게 이어주는 데 유용합니다.

---

6. 피드백과 상호작용: 사용자의 행동에 반응하기

인터페이스는 사용자의 행동에 즉각적으로 반응해야 합니다. 이 반응이 있어야 화면이 “살아 있다”고 느껴집니다.

Hover effect는 마우스를 올렸을 때 시각적으로 바뀌는 효과입니다.

Press / Tap feedback은 버튼을 누를 때 살짝 작아지는 효과입니다. 물리적인 버튼을 누르는 느낌을 줍니다.

Hold to confirm은 버튼을 길게 누르는 동안 진행률이 차오르는 방식입니다. 삭제, 결제, 위험한 작업 확인에 어울립니다.

Drag는 요소를 잡고 이동시키는 상호작용입니다. 놓았을 때 관성이나 스냅 효과가 붙으면 훨씬 자연스럽습니다.

Drag to reorder는 리스트 항목을 드래그해서 순서를 바꾸는 방식입니다. 다른 항목들이 자리를 비켜주는 움직임이 중요합니다.

Swipe to dismiss는 토스트, 카드, 드로어 등을 화면 밖으로 밀어 닫는 방식입니다.

Rubber-banding은 경계를 넘어 드래그했을 때 저항감이 생기고 다시 튕겨 돌아오는 효과입니다. iOS의 오버스크롤 느낌과 비슷합니다.

Shake / Wiggle은 입력 오류나 거절 상태를 표현할 때 쓰는 좌우 흔들림입니다.

Ripple은 터치한 지점에서 원이 퍼져나가는 효과입니다. 사용자의 탭 위치를 명확히 보여줍니다.

---

7. 이징: 속도가 어떻게 변할 것인가

애니메이션이 어색해 보이는 가장 큰 이유 중 하나는 속도 변화가 부자연스럽기 때문입니다.

Easing은 애니메이션의 속도가 시간에 따라 어떻게 변하는지를 의미합니다.

Ease-out은 빠르게 시작해서 천천히 끝납니다. 사용자의 행동에 반응하는 대부분의 UI에 잘 어울립니다.

Use ease-out for the modal entrance.

Ease-in은 천천히 시작해서 빠르게 끝납니다. UI에서는 다소 답답하게 느껴질 수 있어 주의해서 사용해야 합니다.

Ease-in-out은 천천히 시작하고, 중간에 빨라졌다가, 다시 천천히 끝납니다. 이미 화면에 있는 요소가 A 지점에서 B 지점으로 이동할 때 좋습니다.

Linear는 일정한 속도로 움직입니다. 일반 UI보다는 로딩 스피너, 마키 텍스트처럼 계속 반복되는 움직임에 적합합니다.

Cubic-bezier는 직접 곡선을 정의해서 속도 변화를 세밀하게 조절하는 방식입니다.

Asymmetric easing은 가속과 감속의 비율이 다른 이징입니다. 너무 기계적이지 않고 살아 있는 느낌을 줄 수 있습니다.

---

8. 스프링 애니메이션: 물리 기반 움직임

스프링 애니메이션은 정해진 시간보다 물리적인 힘으로 움직임을 만듭니다.

Spring은 장력, 질량, 감쇠 같은 물리값을 기반으로 목표 지점까지 움직이는 방식입니다.

Stiffness / Tension은 스프링이 목표 지점으로 끌어당기는 힘입니다. 값이 높을수록 빠르고 날카롭게 반응합니다.

Damping은 스프링이 얼마나 빨리 안정되는지를 의미합니다. 낮으면 더 많이 튀고 흔들립니다.

Mass는 요소의 무게감입니다. 질량이 클수록 느리고 묵직하게 움직입니다.

Bounce는 목표 지점을 살짝 넘어갔다가 다시 돌아오며 안정되는 효과입니다. 캐주얼하고 장난스러운 UI에 잘 어울립니다.

Perceptual duration은 실제 애니메이션이 미세하게 계속 움직이더라도, 사용자가 보기에는 끝났다고 느끼는 시간입니다.

Momentum은 드래그나 플릭 이후 기존 속도를 이어받아 계속 움직이는 느낌입니다.

Velocity는 요소가 어느 방향으로 얼마나 빠르게 움직이는지를 의미합니다. 좋은 스프링 애니메이션은 중간에 끊겨도 이 속도를 이어받아 자연스럽게 방향을 바꿉니다.

Interruptible animation은 애니메이션이 끝날 때까지 기다리지 않고, 중간에 사용자의 다음 행동에 맞춰 부드럽게 방향을 바꾸는 애니메이션입니다.

---

9. 반복과 주변 움직임: 가만히 있어도 살아 있는 화면

모든 애니메이션이 사용자의 행동에만 반응하는 것은 아닙니다. 때로는 화면이 조용히 움직이면서 생동감을 줍니다.

Marquee는 텍스트나 콘텐츠가 계속 한 방향으로 흐르는 애니메이션입니다.

Loop는 애니메이션이 정해진 횟수 또는 무한 반복되는 방식입니다.

Alternate / Yoyo는 애니메이션이 끝난 뒤 처음으로 튀어 돌아가지 않고, 반대로 재생되며 왕복하는 방식입니다.

Orbit은 요소가 다른 요소 주변을 계속 도는 움직임입니다.

Pulse는 크기나 투명도가 부드럽게 반복 변화하는 효과입니다. 중요한 버튼이나 상태 표시를 은근히 강조할 때 사용합니다.

Float는 위아래로 천천히 떠다니는 느낌입니다. 정적인 요소를 가볍고 생동감 있게 만듭니다.

Idle animation은 사용자가 아무 행동을 하지 않을 때도 아주 미세하게 재생되는 대기 애니메이션입니다.

---

10. 디테일과 효과: 완성도를 높이는 작은 장치들

작은 효과 하나가 전체 UI의 인상을 바꾸기도 합니다.

Blur는 요소를 흐리게 만들어 부드럽게 보이게 하거나 배경과 전경을 분리하는 데 사용합니다.

Clip-path는 요소를 특정 형태로 잘라내는 방식입니다. 리빌, 마스크, 전후 비교 효과에 자주 쓰입니다.

Mask는 요소 일부를 숨기거나 드러내는 방식입니다. clip-path와 비슷하지만 부드러운 경계나 그라데이션 표현에 더 유리합니다.

Before / after slider는 두 이미지를 겹쳐놓고, 드래그 가능한 구분선을 움직여 전후를 비교하는 UI입니다.

Line drawing은 SVG 선이 마치 펜으로 그려지는 것처럼 나타나는 효과입니다.

Text morph는 텍스트가 바뀔 때 글자 단위로 변형되는 효과입니다.

Skeleton / Shimmer는 콘텐츠가 로딩되는 동안 보여주는 임시 UI입니다. 은은하게 빛이 지나가는 효과를 주면 사용자는 로딩을 더 자연스럽게 받아들입니다.

Number ticker는 숫자가 굴러가거나 카운트업되는 효과입니다. 통계, 가격, 대시보드에 자주 쓰입니다.

Tabular numbers는 숫자의 폭을 고정해 숫자가 바뀌어도 레이아웃이 흔들리지 않게 하는 방식입니다. 타이머, 카운터, 가격 표시에는 거의 필수입니다.

Typewriter는 텍스트가 한 글자씩 타이핑되듯 나타나는 효과입니다.

---

11. 성능: 부드러운 애니메이션을 위한 기본 원칙

아무리 멋진 애니메이션도 끊기면 좋은 경험이 되기 어렵습니다.

Frame rate / FPS는 초당 몇 개의 프레임을 그리는지를 의미합니다. 일반적으로 60fps가 부드러운 모션의 기준이고, 최신 디스플레이에서는 120fps도 고려할 수 있습니다.

Jank는 애니메이션이 끊기거나 버벅이는 현상입니다.

Dropped frame은 브라우저가 제때 프레임을 그리지 못해서 발생하는 작은 끊김입니다.

Compositing은 GPU가 별도 레이어에서 요소를 이동하거나 투명도만 바꾸도록 처리하는 방식입니다. 성능에 유리합니다.

will-change는 CSS에서 곧 애니메이션될 속성을 브라우저에 미리 알려주는 힌트입니다. 다만 남용하면 오히려 메모리 부담이 생길 수 있습니다.

Layout thrashing은 width, height, top, left처럼 레이아웃 재계산을 유발하는 속성을 매 프레임 바꾸면서 성능이 떨어지는 현상입니다.

실무에서는 가능하면 transform과 opacity 중심으로 애니메이션을 설계하는 것이 좋습니다.

---

12. 애니메이션을 설계할 때 기억해야 할 원칙

마지막으로 중요한 것은 기술 용어보다 원칙입니다.

Purposeful animation
애니메이션은 장식이 아니라 기능이어야 합니다. 사용자의 시선을 안내하거나, 상태 변화를 설명하거나, 관계를 보여주거나, 피드백을 주어야 합니다.

Anticipation
큰 움직임 전에 반대 방향으로 살짝 움직이는 예비 동작입니다. 사용자는 다음 행동을 더 자연스럽게 예측할 수 있습니다.

Follow-through
주요 움직임이 끝난 뒤 일부 요소가 조금 더 움직이며 안정되는 효과입니다. 무게감과 생동감을 줍니다.

Squash & stretch
요소가 움직이면서 살짝 찌그러지거나 늘어나는 효과입니다. 캐릭터, 아이콘, 장난스러운 UI에 잘 어울립니다.

Perceived performance
실제 속도가 빨라지지 않아도, 적절한 애니메이션은 사용자가 더 빠르게 느끼도록 만듭니다.

Frequency of use
사용자가 자주 보는 애니메이션일수록 짧고 subtle해야 합니다. 매번 화려하게 움직이면 금방 피로해집니다.

Spatial consistency
요소가 상태를 바꿀 때 위치와 정체성을 유지해야 합니다. 사용자가 “이게 어디로 갔지?”라고 느끼면 안 됩니다.

Hardware acceleration
가능하면 transform과 opacity를 활용해 GPU가 부드럽게 처리할 수 있도록 설계합니다.

Reduced motion
사용자의 prefers-reduced-motion 설정을 존중해야 합니다. 모션에 민감한 사용자를 위해 애니메이션을 줄이거나 제거하는 대체 경험이 필요합니다.

---

AI 프롬프트에 바로 쓰는 예시

단순히 이렇게 말하는 것보다,

카드가 예쁘게 나타나게 해줘.

아래처럼 말하는 것이 훨씬 정확합니다.

Animate the card with a scale-in and fade-in entrance. Start at 95% scale and 0 opacity, then transition to 100% scale and full opacity over 240ms using ease-out. Stagger multiple cards by 80ms. Use transform and opacity only for smooth performance.

또는 한국어로 이렇게 지시할 수도 있습니다.

카드가 95% 크기와 투명도 0에서 시작해, 240ms 동안 ease-out으로 100% 크기와 투명도 1까지 자연스럽게 등장하게 해줘. 여러 카드가 있을 경우 80ms 간격으로 stagger 처리하고, 성능을 위해 transform과 opacity 중심으로 애니메이션해줘.

이렇게 쓰면 AI는 “예쁘게”라는 추상적인 말보다 훨씬 정확하게 결과를 만들 수 있습니다.

---

정리

AI에게 좋은 애니메이션을 만들게 하려면 “느낌”만 말하는 것보다 “움직임의 언어”를 함께 써야 합니다.

어떻게 등장할지,
어떤 순서로 움직일지,
어떤 속도 곡선을 사용할지,
사용자 행동에 어떻게 반응할지,
전환 전후의 관계를 어떻게 유지할지,
성능은 어떻게 확보할지.

이런 요소를 프롬프트에 넣으면 결과물의 품질이 확실히 달라집니다.

애니메이션은 단순한 장식이 아닙니다.
사용자를 안내하고, 상태를 설명하고, 인터페이스에 생명감을 부여하는 설계 언어입니다.

AI 시대에는 이 언어를 아는 사람이 더 좋은 화면을 만들 수 있습니다.