애니메이션 공부 기록 - 2

이전 게시글에 이어서 animation.dev의 내용에 대해 적어보려고 한다.

좋은 애니메이션

자연스러운 애니메이션

우리가 매일 경험하는 물리를 애니메이션에 반영해야 자연스럽게 보인다. 애니메이션에 놀라지 않고 익숙할때가 잘 만들어진 애니메이션이다.

예를 들면 linear easing curve는 다른 easing에 비해 생동감이 없고, 부자연스럽고 로봇같다. 우리 주변에 거의 모든 것은 정속으로 움직이지 않기 때문이다.

목적

애니메이션에는 목적이 있다.

흔히 하는 실수가 사람들을 기쁘게, 즐겁게 하기 위해 애니메이션을 넣는 것인데 사람들이 애니메이션을 너무 자주 보면 피로를 느끼고 짜증이 날 수 있다.

이 부분은 내가 프론트를 처음 시작할 때 자주 했던 실수같다.

취향

훌륭한 애니메이션은 훌륭한 디자인처럼 규칙이 있다. easing, timing과 같은 요소들이 규칙을 구성한다.

취향은 개인적인 게 아니다. 사람들이 좋아할 애니메이션은 개인적으로 타고나는 게 아니라 배울 수 있다.

이러한 취향(감각) 을 기르면 애니메이션 선구안이 생긴다. 좋은 애니메이션과 좋지 않은 애니메이션을 구별할 수 있으며 자주 사용하는 프리셋(코드, 구현 등)이 생기고 여러 경우의 수를 대비할 수 있다.

Easing

ease-out

• 대부분의 요소가 enter 혹은 exit 될때 사용
• 버튼이 눌릴때 150ms 시간동안 0.97 scale을 적용하면 인터랙티브함
• 마케팅 페이지에서도 많이 사용

ease-in-out

• 자동차의 가속, 감속처럼 동작
• 화면에 표시된 요소가 다른 곳으로 이동, 모양 변화할 때 사용

예시로 Apple의 dynamic island가 있다. 스프링 효과도 따지고 보면 ease-in-out이다.

ease-in

• 처음에 느리게 시작해서 나중에 빨리 끝남.
• 대부분의 유즈 케이스에서 다른 애니메이션에 비해 느리게 보인다.(예외는 아직 발견 못함.. 탈출 애니메이션?)

Emil은 웬만하면 사용하지 말라고 하지만 탈출 애니메이션으로 사용할 만하다는 의견도 존재한다.

개인적으로는 이렇게 호불호가 갈릴때는 굳이 사용할 필요를 느끼지 못해 사용하지 않을 것 같다.

linear

• 같은 속도로 동작
• 로봇같이 딱딱하고 부자연스럽기 때문에 마키 애니메이션과 같은 경우를 제외하곤 사용을 지양해야 함
• 시간이 지남을 나타날때는 linear가 좋을 수 있음
  • 시간은 항상 똑같은 주기로 흐르기 때문

마키 애니메이션

공장의 컨테이너 벨트처럼 끝없이 흘러가는 애니메이션

ease

• ease-in-out과 빠르지만 더 빠르게 시작해 더 느리게 끝남
• 색, 배경색, 불투명도가 변하는 호버에 적합
• 작은 애니메이션에서 효과적

때로는 우아할 느낌을 줘서 ease-out 대신 사용하기도 한다.

ex) sonner 등장 애니메이션

Custom Easing

• 기본 css built-in easing-function은 부족함
• 커스텀 이징 커브를 사용하는 것이 대부분 좋음
• built-in 이징 커브를 사용할때는 버튼 호버 애니메이션 정도?

Spring

지금까지의 애니메이션은 고정된 easing curve와 타이밍으로 이루어져있다.

하지만 자연은 이렇게 고정되어 있지 않기 때문에 spring을 사용하면 더 자연스럽다.

spring = 질량(mass) + 장력(tenstion) + 속력(velocity)

Apple은 지속시간(duration) + 반발력(bounce)으로 spring 애니메이션을 정의하려고 했다.

여기서 말하는 duration은 실제 지속기간이 아니라 체감상 지속기간을 나타낸다

motion(framer motion)을 사용하면 동일한 방식으로 접근이 가능하다.

Interruptibility(중단 가능성)

애니메이션이 끝나지 않았을 때 (애니메이션을 중단하고) 다른 애니메이션을 시작해야 할 수 있다. spring 애니메이션은 자연스럽게 이를 수행한다.

이를 이용해서 spring 애니메이션을 이용해 bounce 효과를 낼 수 있다. 하지만 드래그 종료 시에 효과와 같이 특이한 유즈케이스를 제외하고 필요성은 극히 적다.

모든 것에 spring을 사용해야 하나?

css로는 spring 애니메이션 구현이 불가능하다.
linear 이징으로 만드는 것도 근사치를 흉내내는 것에 불과하다.

이를 위해 framer motion(현 motion/react)이나 react-spring을 사용해야 하는데 그러면 번들사이즈가 너무 커질 수 있다. 트레이드 오프를 고려해야 한다.

Timing and purpose

애니메이션을 잘 사용하면 프로덕트를 예측 가능하고 빠르게 느껴지며 즐거움을 줄 수있다.

잘못 사용하면 반대로 예측 불가능하고 느리고 성가신 느낌을 줄 수 있다.

랜딩 페이지에서 애니메이션을 사용하면 비디오를 사용하는 것 보다 유저의 흥미를 이끌고 제품 이해도를 높일 수 있다.

Sonner 애니메이션의 목적

• 갑자기 나타나면 어색하므로 애니메이션 사용
• 같은 방향으로 나타나서 사라짐
• 공간적 일관성, 스와이프로 닫는 제스처를 직관적으로 느끼게함

속도 인식

마케팅이 아니면 사용자에게 빠르다고 인식 시켜야함

ex) 빠르게 회전하는 로딩 스피너는 어플 성능을 빠르다고 인식 시킴

일반적으로 애니메이션은 300ms 내에 이루어져야함

툴팁

툴팁에는 실수로 인한 호버를 방지하기 위해 애니메이션 딜레이를 설정함
그러나 호버가 활성화된 후에는 다른 툴팁에 호버될 때 지연 시간을 없애면 애니메이션 딜레이를 설정해도 빠르게 느껴짐

지속시간

요소의 크기

• 애니메이션 적용할 화면의 크기가 크면 지속시간을 길게할 수 있다.
• Emil은 Vercel 해커톤에서 1s 동안 동작하는 모핑 애니메이션을 만들었음

마케팅 vs 제품

• 마케팅(랜딩) 페이지는 제품 페이지보다 덜 자주 노출되기 때문에 자유도도 높고 애니메이션 지속시간도 높일 수 있다.
• 하지만 애니메이션을 과도하게 사용하면 사용자가 압도되는 느낌을 받고 애니메이션의 효과가 사라진다.
• 모든 요소가 움직이면 시선이 분산돼 아무것도 눈에 안띈다.

훌륭한 인터페이스

• 우리의 목표는 훌륭한 인터페이스를 위해 애니메이션을 추가하는 것
• 애니메이션을 위한 애니메이션을 만들지 말자
• 때로는 애니메이션을 넣지 않는게 최고의 애니메이션

실전 팁

대부분의 내용은 이 게시글에 적혀 있다. 여기에 적히지 않은 몇가지 내용을 적어보겠다.

1. 애니메이션 녹화하기

좋아보이는 애니메이션은 녹화해서 감속해서 프레임 단위로 분석해야 한다. 좋은 애니메이션은 좋게 느끼도록 하는 이유, 규칙이 존재한다. 왜 애니메이션을 좋다고 느꼈는지 파악해라.

2. 터치기기에서 호버 비활성화

• 터치기기에서 사용자가 요소에 손가락을 올리면 호버 효과 발생하는데 이는 좋지 않은 ux일 수 있다.
• tailwind 4 부터는 hover가 유효한 입력장치일때만 hover 적용
• 그외에는 미디어 쿼리로 적용 가능

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: scale(1.05);
  }
}

3. 타겟 영역 before로 설정

원활한 클릭을 보장하기 위해 버튼의 클릭 영역은 48px 이상으로 제공한다.

이때 버튼 클릭 영역을 넓힐 때 보통 padding을 주는 등 레이아웃을 변경시키는데, before을 사용하면 레이아웃 변경 없이 가능하다.

참고 링크

@utility touch-hitbox {
  position: relative;
 
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 48px;
    min-width: 48px;
    z-index: 9999;
  }
}

<button className="touch-hitbox">
  <BellIcon />
</button>

후기

초반까지의 느낌은 아래와 같다.

josh의 Whimsical Animations

• 영상 및 텍스트 > 실습 > 예제 등등 여러가지를 질리지 않도록 반복
• css, js 구현 팁이 많음
• 양이 정말정말 많음! 강의가 절대적으로 비싸긴 한데... 강의에 들인 노력이 정말 보인다.

Emil의 animation.dev

• 4개의 이론 모듈 수강 이후 앞의 이론 모듈을 활용한 3~4개의 모듈 실습
• 아직 이론 파트라 그런가 css, js 구체적인 팁은 많지 않음
  • 2025/11/24까지 들은 결과 이후에는 실습도 많고 팁도 많음
• 하지만 가끔 알려주는 팁이 사소하면서 강력함. 더 실전적 느낌
  역시 Vercel, Linear 엔지니어

양으로 따지면 두 강의를 따로 듣는 게 맞긴 한데 두 강의를 같이 수강하며 공통적으로 말하는 부분과 차이나는 부분을 정리하면서 듣고 있어서 이것도 괜찮은 것 같다.

Whimsical Animations은 얼리버드, animation.dev는 기간제 수강 신청을 받아서 추석 보너스로 질러버림..

+강사들이 제공하는 프리셋도 몇 개 있는데 이건 복붙하고 사용해도 될듯하다.