바이브코딩 애니메이션 용어 24가지, AI에게 움직임 정확히 요청하는 법

"버튼이 좀 뿅하고 통통치게 해줘." AI에게 웹사이트의 움직임을 부탁하다 보면 이런 말밖에 떠오르지 않을 때가 많습니다. 바이브코딩 애니메이션 용어 24가지를 뜻, 어울리는 자리, 그대로 붙여 넣을 수 있는 요청 문장과 함께 정리했습니다. 뒷부분에는 여러 효과를 한 번에 요청하는 문장과 움직임을 줄이는 접근성 설정 문구도 담았습니다.

바이브코딩 애니메이션 용어, 이름을 알면 요청이 달라진다

잘 만든 웹사이트를 보면 화면이 통째로 휘어 가고, 카드가 화면 가득 커지고, 축하 꽃가루가 터집니다. 내 사이트에도 넣고 싶은데 AI에게 설명하려면 막막합니다. 원하는 효과는 분명한데 말로 옮기기가 애매하기 때문입니다. 결국 "버튼이 좀 뿅하고 통통치게 해줘" 같은 문장을 쓰게 됩니다.

AI는 이런 문장에도 뭔가를 만들어 줍니다. 문제는 내가 생각한 뿅과 AI가 생각한 뿅이 같은지 알 수 없다는 점입니다. "뿅, 스르륵, 통통, 차르륵" 같은 느낌 표현에는 대부분 정확한 이름이 있습니다. 이름을 알고 요청하면 같은 결과를 두 번째, 세 번째 요청에서도 얻기 쉽습니다.

요청 문장의 기본 모양

아래 한 문장에는 무엇이, 어떻게, 얼마나 빨리, 언제 움직일지가 모두 들어 있습니다.

카드가 화면에 들어올 때 스프링 애니메이션으로 0.4초 동안 살짝 튀어오르게 해줘.

대상은 카드, 효과는 스프링 애니메이션, 속도는 0.4초, 시작 조건은 화면에 들어올 때입니다. 이 네 가지가 빠지면 AI가 짐작으로 채웁니다.

공식은 효과 이름 + 속도 + 시작 조건

외울 것은 한 줄입니다. 효과 이름 + 속도 + 시작 조건을 요청마다 넣습니다. 스프링으로 예를 들면 "약하게 출렁이는 스프링으로, 0.4초 동안, 카드가 화면에 들어올 때"가 됩니다.

24개를 전부 외울 필요는 없습니다. 원하는 움직임을 떠올렸을 때 "아, 그 뿅이 이거였구나" 하고 이름을 연결할 수 있으면 됩니다. 아래는 기본 움직임 8개, 글자와 그림 8개, 화면 전체와 마우스 반응 8개 순서입니다.

24가지 한눈에 보기

1부, 움직임의 기본 8가지

1. 페이드(Fade)

투명하던 요소가 스르륵 진해지며 나타나는 효과입니다. 나타날 때는 페이드 인, 사라질 때는 페이드 아웃이라고 부릅니다. 가장 기본이고 어디에 써도 크게 튀지 않는 움직임입니다. 모달(화면 위에 떠오르는 작은 창)이 열리고 닫힐 때처럼 눈에 거슬리지 않게 바뀌어야 하는 자리에 어울립니다.

모달이 열릴 때는 뒤 배경이 0.2초 동안 페이드인, 닫힐 때는 페이드 아웃되게 해줘.

2. 슬라이드(Slide)

화면 밖에서 슉 미끄러져 들어오는 움직임입니다. 방향이 핵심이라서 위에서, 아래에서, 옆에서 중 어느 쪽에서 들어올지까지 말해 줘야 합니다. 실제로는 페이드와 섞어 아래에서 살짝 올라오며 나타나는 조합을 아주 많이 씁니다.

알림 배너가 화면 위쪽에서 슬라이드 다운으로 내려오고 3초 뒤에 다시 올라가게 해줘.

위 문장은 위쪽이라는 방향과 3초 뒤 사라지는 조건을 이미 담고 있습니다.

3. 스케일(Scale)

작게 시작해서 뿅 하고 커지며 나타나는, 크기를 바꾸는 움직임입니다. 살짝 크게 커졌다가 제자리로 돌아오면 톡 튀어나오는 느낌이 나서 팝 효과라고도 부릅니다. 장바구니 숫자 배지처럼 작은 요소에 변화가 생겼음을 알릴 때 잘 맞습니다.

장바구니에 담으면 숫자 배지가 스케일 팝 효과로 톡 튀어나오게 해줘.

4. 이징(Easing)

같은 거리를 같은 시간 동안 움직여도 느낌이 다릅니다. 처음부터 끝까지 같은 속도로 움직이면 기계적으로 보이고, 빠르게 출발해서 끝에서 천천히 멈추면 자연스럽습니다. 이렇게 움직이는 동안 속도가 변하는 방식을 이징이라고 부릅니다.

• 이즈 아웃: 빠르게 시작해 끝에서 느려집니다.
• 이즈 인: 천천히 출발해 점점 빨라집니다.
• 이즈 인 아웃: 둘을 합친 것으로, 시작과 끝이 모두 부드럽습니다.

화면에 들어올 때와 나갈 때 이 셋 중 하나를 쓰면 대부분 자연스럽습니다. 메뉴처럼 열릴 때와 닫힐 때가 있는 요소는 방향마다 따로 지정할 수 있습니다.

메뉴가 열릴 때는 이즈 아웃, 닫힐 때는 이즈인으로 0.3초 동안 움직이게 해줘.

5. 스프링(Spring) 애니메이션

목표 지점을 살짝 지나쳤다가 띠용 하고 되돌아와 자리를 잡는 움직임입니다. 용수철처럼 탄력이 있어서 쫀득하고 살아 있는 느낌을 줍니다. 얼마나 출렁일지는 보통 단단함(스티프니스, stiffness)과 감쇠(댐핑, damping)라는 두 값으로 조절합니다. 단단할수록 빨리 움직이고, 감쇠가 클수록 출렁임이 빨리 잦아듭니다. 값을 직접 정하기 어려우면 "출렁임은 한 번만 보이게 약하게"처럼 말로 지시해도 됩니다.

카드를 누르면 스프링 애니메이션으로 살짝 커지게 하고 출렁임은 한 번만 보이게 약하게 해줘.

6. 바운스(Bounce)

공이 바닥에 떨어져 통통 튀다가 멈추는 움직임입니다. 스프링과의 차이는 이렇습니다. 스프링은 목표를 지나쳤다가 돌아오고, 바운스는 바닥에 부딪혀서 튕겨 오르는 느낌입니다. 많이 튈수록 장난스러워 보이니 결제 완료 체크처럼 귀여운 포인트에만 쓰는 편이 좋습니다.

결제 완료 체크 아이콘이 위에서 떨어지면서 두 번 정도 바운스하고 멈추게 해줘.

7. 듀레이션과 딜레이(Duration, Delay)

"빠르게 해줘, 천천히 해줘"라고 하면 얼마나 빨라야 하는지가 모호합니다. 움직이는 데 걸리는 시간이 듀레이션, 움직이기 전에 기다리는 시간이 딜레이입니다. 버튼 같은 작은 반응은 0.1초에서 0.2초, 화면에 큰 요소가 들어올 때는 0.3초에서 0.5초 정도가 흔히 쓰는 기준입니다. 작은 요소일수록 짧고, 화면을 크게 바꿀수록 길게 잡는다고 보면 됩니다.

여러 요소에 딜레이를 차례로 조금씩 주면 순서대로 나타나는 효과가 됩니다. 이것을 스태거(stagger)라고 부릅니다.

제목은 바로, 설명은 0.2초 딜레이 뒤에 둘 다 0.4초 듀레이션으로 나타나게 해줘.

8. 루프(Loop) 애니메이션

멈추지 않고 계속 반복되는 움직임입니다. 아이콘이 둥실둥실 떠 있는 효과는 플로팅이라고도 부릅니다. 시선을 끌기에는 좋지만 여러 개가 계속 움직이면 산만해지니 꼭 필요한 한두 곳에만 씁니다. 자동으로 계속 움직이는 요소는 접근성 면에서도 주의가 필요한데, 뒤의 접근성 구획에서 다룹니다.

히어로 일러스트가 위아래로 아주 천천히 떠 있는 플로팅 루프를 넣어줘. 한번 오르내리는 데 4초 정도로.

히어로 일러스트는 사이트 첫 화면 맨 위에 크게 놓는 그림을 뜻합니다.

2부, 글자와 그림 8가지

9. 타이프라이터(Typewriter)

타자기로 치듯 글자가 한 글자씩 타닥타닥 나타나는 효과입니다. 끝에 깜빡이는 커서까지 붙이면 지금 누군가 입력하는 것 같은 느낌이 납니다.

히어로 제목을 타이프라이터 효과로 한 글자씩 입력되게 하고 끝에 커서를 깜빡여줘.

10. 텍스트 스크램블(Text Scramble)

무작위 글자들이 철르륵 섞이다가 하나씩 제자리를 찾아 단어가 되는 효과입니다. 영화 속 해커 화면처럼 기술적인 분위기를 낼 때 잘 어울립니다.

섹션 제목이 화면에 들어오면 텍스트 스크램블로 1초 동안 섞이다가 완성되게 해줘.

11. 스플릿 텍스트(Split Text)

제목이 글자나 단어 단위로 쪼개져서 차르륵 올라오는 애니메이션입니다. 숨어 있던 글자가 드러난다고 해서 텍스트 리빌이라고도 부릅니다. 글자 하나하나에 스태거를 건 셈입니다. 한국어 제목은 글자 단위로 쪼개면 어절 중간에서 줄이 끊겨 보일 수 있으니, 단어 단위로 나누라고 요청하면 안전합니다.

메인 제목을 단어 단위로 나눠서 아래에서 하나씩 올라오는 스플릿 텍스트 리빌로 보여줘.

12. 카운트업(Count-up)

0에서 시작한 숫자가 촤르륵 올라가서 멈추는 효과입니다. 가입자 수나 누적 다운로드처럼 자랑하고 싶은 숫자는 그냥 보여 주는 것보다 훨씬 눈에 들어옵니다. 끝으로 갈수록 느려지게 하면 이징(4번)을 함께 쓴 것입니다.

통계 섹션이 보이면 숫자가 0부터 목표값까지 2초 동안 카운트업되게 해줘. 끝으로 갈수록 느려지게.

13. 라인 드로잉(Line Drawing)

보이지 않던 선이 펜으로 그리듯 쓱쓱 그려지는 효과입니다. 로고나 아이콘, 그래프처럼 확대해도 깨지지 않는 SVG(선과 도형으로 그리는 이미지 형식) 그림의 선에 주로 씁니다. 사진 같은 일반 이미지에는 적용하기 어렵습니다.

그래프가 보이면 선이 왼쪽부터 1.5초 동안 그려지는 라인 드로잉 애니메이션을 넣어줘.

14. 모핑(Morphing)

하나의 모양이 다른 모양으로 스르륵 변신하는 효과입니다. 흔히 햄버거 메뉴라고 부르는 세 줄 아이콘이 X로 바뀌는 것이 대표적인 예입니다. 바뀌기 전과 후가 이어져 보여서 상태가 바뀌었다는 것을 자연스럽게 알려 줍니다.

햄버거 메뉴 아이콘을 누르면 세 줄이 X 모양으로 모핑되면서 메뉴가 열리게 해줘.

15. 마퀴(Marquee)

로고나 문구가 띠처럼 옆으로 끝없이 줄줄 흘러가는 효과입니다. 좁은 공간에 고객사 로고나 짧은 후기를 많이 보여 줄 때 좋습니다. 마우스를 올리면 멈추게 해 두면 읽기도 편합니다. 같은 이름의 HTML 태그(marquee)가 있지만 지금은 쓰지 않도록 권고되는 옛 방식이라, AI에게는 "효과로 구현해 달라"는 뜻으로 요청하는 것이 낫습니다.

고객사 로고를 끝없이 흘러가는 마퀴로 보여주고 마우스를 올리면 멈추게 해줘.

16. 모션 패스(Motion Path)

직선이 아니라 정해 둔 곡선 길을 따라 슝 날아가는 움직임입니다. 상품이 포물선을 그리며 장바구니로 날아가면 어디서 어디로 갔는지 눈으로 따라갈 수 있습니다.

담기 버튼을 누르면 상품 이미지가 곡선 경로를 따라 장바구니 아이콘으로 날아가게 해줘.

3부, 화면 전체와 마우스 반응 8가지

17. 페이지 트랜지션(Page Transition)

링크를 누르면 화면이 뚝 바뀌는 대신 휙 덮였다가 새 페이지가 나타나는 효과입니다. 앞에서 본 페이드나 슬라이드를 페이지 단위로 쓰는 것이고, 화면을 쓸고 지나가는 방식은 와이프라고 부릅니다.

페이지를 이동할 때 화면이 0.3초 동안 페이드 아웃됐다가 새 페이지가 아래에서 살짝 올라오는 페이지 트랜지션을 넣어줘.

18. 쉐어드 엘리먼트 트랜지션(Shared Element Transition)

목록에서 카드를 누르면 그 카드가 그대로 쭉 커지면서 상세 화면이 되는 효과입니다. 두 화면이 같은 요소를 공유한다고 해서 붙은 이름입니다. 내가 누른 것이 어디로 갔는지 놓치지 않으니 두 화면이 끊기지 않고 이어집니다.

웹에서는 브라우저의 뷰 트랜지션(View Transition API) 기능으로 만들 수 있습니다. 같은 문서 안의 전환은 크롬 111 버전부터 지원됩니다. 다른 브라우저의 지원 범위는 버전마다 달라서, 실제로 쓰기 전에 MDN의 호환성 표에서 확인하는 편이 안전합니다.

상품 카드를 누르면 카드 이미지가 그대로 커지면서 상세 페이지로 이어지는 쉐어드 엘리먼트 트랜지션으로 만들어줘.

19. 핀과 스크롤리텔링(Pin, Scrollytelling)

스크롤을 내리는데 화면은 그 자리에 붙잡혀 있고 안의 장면만 착착 바뀌는 효과입니다. 이렇게 화면을 고정해 두는 것을 핀(pin)이라 부릅니다. 핀으로 스크롤에 따라 이야기를 풀어 가는 페이지는 스크롤과 스토리텔링을 합쳐 스크롤리텔링이라고 부릅니다. 제품 기능을 하나씩 보여 주는 소개 페이지에서 자주 보입니다.

기능 소개 섹션을 화면에 핀으로 고정하고 스크롤할 때마다 세 가지 기능이 차례로 바뀌는 스크롤리텔링으로 만들어줘.

20. 가로 스크롤(Horizontal Scroll)

마우스 휠은 아래로 굴리는데 화면은 옆으로 스르륵 지나가는 가로 스크롤 섹션입니다. 앞의 핀을 응용한 것으로, 섹션을 고정해 두고 내린 만큼 안쪽 내용을 옆으로 밉니다. 휴대폰 화면에서는 어색해지기 쉬우니 끝에 모바일 조건을 함께 적습니다.

작업 사례 섹션을 고정하고 세로로 스크롤하면 카드들이 옆으로 지나가는 가로 스크롤로 만들어줘. 모바일에서는 세로 목록으로.

21. 마그네틱 버튼(Magnetic Button)

커서가 가까이 다가가면 버튼이 자석에 끌리듯 따라오는 효과입니다. 누르기 전부터 반응해서 재미있지만 너무 많이 따라오면 오히려 누르기 어려우니 살짝만 쓰는 편이 좋습니다. 요청에 "최대 10픽셀"처럼 한계 거리를 적어 두는 이유입니다.

메인 CTA 버튼에 마그네틱 효과를 넣어줘. 커서가 가까이 오면 최대 10픽셀 정도만 끌려오게.

CTA는 "지금 시작하기"처럼 방문자의 행동을 유도하는 버튼을 말합니다.

22. 커스텀 커서(Custom Cursor)

기본 화살표 대신 작은 원이 마우스를 졸졸 따라다니는 효과로, 커서 팔로우라고도 합니다. 링크 위에서는 원이 커지거나 글자가 들어가기도 합니다. 터치 화면에는 커서가 없으니 모바일에서는 꺼 두는 것이 기본입니다. 아래 문장 앞머리의 "데스크톱에서만"이 그 조건입니다.

데스크톱에서만 작은 원형 커서가 마우스를 살짝 늦게 따라오게 하고 링크 위에서는 원이 커지게 해줘.

23. 3D 틸트(3D Tilt)

카드 위에서 마우스를 움직이면 카드가 그 방향으로 갸우뚱 기울어지는 효과입니다. 반사광까지 같이 움직이면 진짜 카드를 이리저리 비춰 보는 것 같은 입체감이 생깁니다. 이 효과도 마우스 위치에 반응하므로 터치 화면에서는 기대한 대로 동작하지 않을 수 있습니다.

요금제 카드에 마우스 위치에 따라 최대 10도까지 기울어지는 3D 틸트 효과를 넣고 반사광도 같이 움직이게 해줘.

24. 컨페티(Confetti)

결제를 마치는 순간 색종이가 빵 터지는 효과입니다. 가입 완료나 첫 결제처럼 정말 축하할 순간에만 아껴 써야 효과가 큽니다. 매번 터지면 금방 시들해집니다. 아래 문장 끝에는 움직임 줄이기 설정을 켠 사람에게는 생략하라는 조건이 붙어 있습니다.

첫 결제가 끝나면 화면 위쪽에서 컨페티가 2초 동안 터지게 해줘. 모션 감소 설정을 켠 사용자에게는 생략하고.

이름을 모아 한 번에 요청하기

막연한 요청과 이름을 쓴 요청의 차이

막연한 요청은 이런 모양입니다. "랜딩 페이지가 좀 살아 움직이게 해줘. 제목은 멋있게 나오고 숫자는 촤르륵. 버튼은 뿅뿅하게." 랜딩 페이지는 방문자가 처음 도착하는 소개용 첫 페이지입니다. 이렇게 말해도 AI는 나름대로 움직임을 넣어 줍니다. 다만 무엇이 어떻게 얼마나 빨리 언제 움직일지를 AI가 짐작해서 채우게 됩니다.

이름을 쓴 요청 문장

오늘 본 이름으로 다시 말하면 아래와 같습니다.

제목은 단어 단위 스플릿 텍스트 리빌. 통계 숫자는 2초 카운트업. 고객사 로고는 마퀴로. CTA 버튼은 약한 마그네틱. 기능 카드는 스프링으로 등장. 첫 결제에는 컨페티. 등장하는 움직임은 전부 이즈 아웃 0.4초로 맞춰줘.

이렇게 쓰면 문장 하나하나가 화면의 어떤 움직임이 되는지 나도 AI도 똑같이 알 수 있습니다. 마지막 문장처럼 공통 속도와 이징을 한 번에 지정하면 사이트 전체의 움직임이 일정해집니다.

움직임 줄이기 설정 문구 붙이기

요청 문장 맨 끝에 아래 문구를 붙입니다.

모션 감소 설정을 따르게 해줘.

운영체제에는 "동작 줄이기" 같은 설정이 있고, 웹은 이 값을 CSS의 prefers-reduced-motion 미디어 쿼리로 읽습니다. MDN 문서에 따르면 이 기능은 2020년 1월부터 주요 브라우저에서 쓸 수 있습니다. 위 문구를 붙이면 AI가 이 설정을 켠 방문자에게는 움직임을 줄이거나 없애는 코드를 넣어 줍니다. 어지러움을 느끼는 사람을 위한 배려이기도 합니다.

움직임 쓸 때 지킬 것

주인공 움직임은 한 화면에 하나

움직임이 많다고 좋은 사이트가 아닙니다. 한 화면의 주인공 움직임은 하나면 충분하고, 나머지는 거들기만 해야 시선이 흩어지지 않습니다.

자동으로 계속 움직이는 요소

웹 접근성 지침(WCAG) 2.2.2 항목은 저절로 시작해서 5초를 넘게 움직이는 콘텐츠가 다른 콘텐츠와 함께 있으면 사용자가 멈추거나 숨길 수 있어야 한다고 정하고 있습니다. 루프(8번)나 마퀴(15번)처럼 계속 움직이는 효과가 여기에 해당할 수 있습니다. 마퀴에 "마우스를 올리면 멈추게"를 넣은 것도 이 때문입니다. 멈춤 버튼까지 넣고 싶다면 요청에 "정지 버튼도 추가"라고 적습니다.

요청 전 점검표

• 요청마다 효과 이름 + 속도 + 시작 조건이 들어 있나요?
• 한 화면의 주인공 움직임을 하나로 정했나요?
• 모션 감소 설정을 따르라는 문구를 붙였나요?
• 루프, 바운스, 마그네틱, 컨페티처럼 아껴 써야 하는 효과를 남발하지 않았나요?
• 모바일에서 어색한 효과(커서 효과, 가로 스크롤, 3D 틸트)에 조건을 달았나요?
• AI가 만든 결과를 내가 원한 움직임과 눈으로 비교했나요?

상황별로 어떤 효과를 고를까

효과 이름을 알아도 어디에 쓸지 막힐 때가 있습니다. 자주 만나는 자리별로 어울리는 조합을 모았습니다. 모두 앞에서 설명한 용어로 바로 요청할 수 있습니다.

한 자리에 효과를 둘 이상 겹칠 때는 하나를 주인공으로 정하고 나머지는 약하게 지시합니다. 예를 들어 모달은 페이드가 주인공이고 스케일은 0.95배에서 1배로 아주 조금만 커지는 정도로 거드는 식입니다.

AI가 만든 코드에서 찾아볼 단서

결과가 맞게 들어갔는지 코드를 읽어서 확인할 필요는 없지만, 용어가 코드에서 어떤 이름으로 나오는지 알면 AI와 대화하기가 쉬워집니다. 아래는 웹 개발에서 흔히 보이는 대응입니다.

• 페이드, 스케일, 슬라이드: CSS의 opacity(투명도)와 transform(이동⁠·확대⁠·회전), 그리고 transition(바뀌는 방식 지정)
• 이징: ease-out, ease-in-out 같은 키워드, 또는 cubic-bezier(속도 곡선을 숫자로 지정)
• 듀레이션과 딜레이: transition-duration, animation-delay처럼 이름에 그대로 들어 있음
• 루프: animation-iteration-count: infinite(무한 반복)
• 스프링: 애니메이션 라이브러리에서 stiffness와 damping 값으로 나타남
• 스태거와 스크롤 핀: GSAP 같은 라이브러리의 stagger, ScrollTrigger 옵션
• 라인 드로잉: SVG 선의 stroke-dasharray와 stroke-dashoffset
• 모션 감소 대응: @media (prefers-reduced-motion: reduce)

라이브러리는 애니메이션 코드를 대신 만들어 둔 도구 모음입니다. AI가 "GSAP을 설치하겠다"거나 "Framer Motion을 쓰겠다"고 말하면 위 효과를 쉽게 만들기 위한 선택입니다. 간단한 페이드나 슬라이드는 라이브러리 없이 CSS만으로 충분하다고 덧붙여 두면 불필요한 설치를 줄일 수 있습니다.

요청이 자주 틀어지는 경우와 고쳐 말하기

수정을 요청할 때도 공식은 같습니다. 어느 요소의 어느 효과를, 몇 초로, 언제 바꿀지만 적으면 됩니다.

요청한 대로 안 나올 때

AI가 생각한 움직임과 다르게 나올 때

"뿅", "통통" 같은 말은 무엇이, 어떻게, 얼마나 빨리, 언제 움직일지를 AI가 짐작해서 채우게 만듭니다. 효과 이름 + 속도 + 시작 조건으로 다시 요청합니다. 마음에 안 드는 점도 "더 약하게", "0.2초 더 빠르게"처럼 숫자와 이름으로 말하면 고쳐지는 속도가 빨라집니다.

화면이 산만할 때

움직임이 너무 많은 경우입니다. 한 화면의 주인공 움직임을 하나로 줄이고, 루프 효과는 한두 곳만 남깁니다.

모바일에서 커서 효과나 가로 스크롤이 어색할 때

터치 화면에는 커서가 없으니 데스크톱에서만 쓰도록 요청합니다. 가로 스크롤은 "모바일에서는 세로 목록으로"를 붙입니다.