애니메이션은 그래프다
- 설계하려면 재현할 수 있어야 하고 조합할 수 있어야 함.
- 모든 애니메이션은 어떤 입력(시간, 스크롤, 마우스 위치 등)에 따라 값이 변하는 것이고, 이 변화를 그래프로 그릴 수 있음.
- 그래프의 모양이 곧 움직임의 느낌을 결정하며, 이 곡선을 원하는 대로 만들어내는 도구가 수학임.
수학 도구들
-
베지어 커브(이징): 시작과 끝이 정해진 가감속 표현. 두 개의 제어점이 곡선을 자석처럼 끌어당기는 원리. 선형 보간의 재귀적 적용으로 만들어짐. 같은 움직임이라도 ease-in, ease-out에 따라 전달하는 인상이 완전히 달라짐
-
지수적 접근:
value += (target - value) * factor 한 줄로 목표를 부드럽게 추적. 목표가 매 프레임 바뀌어도 자연스러움. 커서 따라가기, 카운터, 프로그레스 바 등에 활용
-
스프링: 복원력과 감쇠력 두 가지 힘 기반의 감쇠 진동. stiffness와 damping 두 값으로 느낌을 결정. 이징과 달리 duration이 없고 목표가 바뀌면 현재 속도를 유지한 채 자연스럽게 전환됨
-
물리 시뮬레이션: 중력, 충돌, 마찰 등 물리 법칙을 조합. 핵심은 "규칙만 정의하면 움직임은 알아서 만들어진다"는 점. 컨페티처럼 수십 개 오브젝트의 개별 궤적을 설계할 필요 없이 중력과 공기 저항만 설정하면 됨. 다만 예측 가능성이 떨어져 UI 핵심 전환보다는 보조 효과에 적합
-
atan2: 두 점 사이의 방향을 구하는 함수. 요소가 이동 방향을 바라보거나, 카드가 커서 방향으로 기우는 3D 틸트 효과 등에 활용
-
삼각함수: 주기적 반복에 최적. 여러 요소에 위상 차이를 주면 파동 효과가 만들어짐. 타이핑 인디케이터, 플로팅 배경 등
-
톱니파: sin의 부드러운 왕복과 달리, 0→1로 진행 후 즉시 리셋되는 단방향 반복. 펄스 링, 핑, 반복 프로그레스 등에 활용
복잡한 애니메이션 설계하기
-
구간별 함수: 복잡한 곡선을 구간별로 쪼개서 각 조각을 개별 설계 후 이어 붙임. 물리 시뮬레이션보다 세밀한 의도적 조정이 가능 (예: 바운스의 높이를 의도적으로 줄이기)
-
의존성 파악: 애니메이션 설계의 출발점은 "값이 무엇에 의존하는가?". 시간 기반(가장 흔함), 값 기반(스크롤, 마우스 위치), 이벤트 기반(클릭, 호버로 촉발) 세 유형으로 분류
-
파이프라이닝: 조각들을 시간축 위에 순서대로 배치. 순차, 겹침, 동시, 스태거 등 배치 전략을 조합. 각 조각을 독립적으로 수정 가능
-
상태 전환: 시간이 아닌 조건에 따라 다음 단계로 넘어가는 방식. 폭죽의 발사→폭발→확산→소멸처럼 전환 조건을 명시하면 상태 머신으로 관리 가능
-
속성 분리: 여러 속성(크기, 색상, 투명도 등)을 독립 트랙으로 분리. 각 트랙이 서로를 몰라도 되므로 미세 조정이나 추가가 쉬움
고려사항
-
랜덤성: 완전한 무작위가 아닌 제어된 랜덤을 사용해야 함. "어디까지 통제하고 어디부터 랜덤에 맡길 것인가"의 경계 설정이 핵심
-
양방향성: 나타나는 도중에 방향이 바뀔 때, 현재 상태에서 이어서 반전되도록 설계해야 점프나 어색함이 없어짐
코드 애니메이션의 한계와 강점
- 캐릭터 동작이나 정교한 모핑 같은 복잡한 애니메이션은 Lottie, Rive 같은 전문 도구나 영상이 적합함.
- 반면 코드 애니메이션의 강점은 사용자 입력에 즉각 반응하는 실시간 인터랙션에 있음.