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