UI 모션 디자인: 애니메이션 원칙, 모션 커브, 안무

UI 모션이란

UI 애니메이션은 장식이 아니라 상태 변화를 설명하는 수단이다. 무엇이 어디서 와서 어디로 갔는지, 무엇을 눌러야 하는지를 움직임으로 알려 준다. 좋은 모션은 매끄럽고 자연스럽다. 기계적인 등속 운동은 로봇처럼 느껴진다. 문법(transition, @keyframes)은 CSS 애니메이션에, 접근성 기준은 색과 움직임의 접근성에 있다.

애니메이션 12원칙을 UI에 옮기기

디즈니가 『The Illusion of Life』에 정리한 전통 애니메이션 12원칙은 매체와 상관없이 통한다. UI에 쓸모 있는 것을 골라 CSS로 옮기면 다음과 같다.

모션 커브: 속도는 기울기다

모션 커브는 움직이는 값(위치, 크기, 투명도)을 시간에 대해 그린 그래프다. 커브의 기울기가 그 순간의 속도다.

값                          값
│        ╱                  │          ___
│      ╱                    │       _╱
│    ╱      linear          │     ╱       ease-out
│  ╱        기울기 일정        │   ╱         처음 가파르고(빠름)
│╱          = 등속           │ ╱           끝에 평평(느려짐)
└────── 시간                 └────── 시간

linear가 어색한 이유는 출발 순간 속도가 0에서 곧장 최대가 되고, 도착 순간 최대에서 곧장 0이 되기 때문이다. 현실의 물체는 가속하고 감속한다.

cubic-bezier(x1, y1, x2, y2)의 네 수는 곡선 시작점(0,0)과 끝점(1,1) 사이 두 조절점의 좌표다. x는 시간, y는 진행도다.

두 점으로 표현할 수 없는 스프링·바운스는 여러 점을 잇는 linear() 함수로 근사한다. 곡선은 브라우저 개발자 도구의 곡선 편집기로 실시간 조절한다.

곡선 경로

transition과 animation은 A에서 B까지 최단 직선으로 움직인다. 이징을 아무리 휘어도 경로는 직선이고 속도만 바뀐다.

겹친 애니메이션: 축마다 다른 타이밍

경로를 휘게 하려면 X축과 Y축의 속도를 어긋나게 하면 된다. 같은 요소에 transform 애니메이션 두 개를 걸면 나중 것만 적용되므로, 요소를 둘로 나눠 바깥은 X, 안쪽은 Y를 맡긴다.

.track { animation: move-x 1s ease-in infinite alternate; }        /* X는 ease-in */
.track::after { content: ''; display: block;
  animation: move-y 1s ease-out infinite alternate; }                 /* Y는 ease-out */
@keyframes move-x { to { transform: translateX(200px); } }
@keyframes move-y { to { transform: translateY(-120px); } }

X가 천천히 출발할 때 Y는 빠르게 솟아, 합친 궤적이 호를 그린다. 오버슈트 곡선을 섞으면 튀는 경로가 된다. 지금은 개별 변형 속성 translate·rotate·scale이 따로 있어, 서로 다른 속성끼리는 한 요소에서도 따로 애니메이션할 수 있다(transform: 이동·회전·확대·기울이기).

offset-path: 경로를 직접 그린다

정해진 곡선을 따라가야 하면 모션 경로 속성을 쓴다. 모든 주요 브라우저가 지원한다.

.dot {
  offset-path: path('M 0 100 Q 100 0 200 100');   /* SVG 경로 문법 */
  offset-rotate: auto;                             /* 경로 방향으로 회전 */
  animation: follow 2s ease-in-out infinite;
}
@keyframes follow { to { offset-distance: 100%; } }

offset-path에는 circle(), ray(), url(#svg-path)도 쓸 수 있다. 과거에는 이 속성이 motion-path라는 이름의 Chrome 전용 실험 기능이었다.

안무: 여러 요소를 함께 움직이기

하나씩은 매끄러운 애니메이션도 한꺼번에 돌면 끊긴다. 동시에 움직이는 것은 두세 개로 줄이고, 시작 시점을 흩뜨린다. 이를 안무(choreography) 라고 한다. 요소가 들어오는 방향과 순서가 시선을 이끈다.

코드는 단순하게: 부모(대개 body)의 클래스 하나를 바꾸고, 자식마다 transition-delay를 조금씩 늘린다. 상태 변화는 한 번이고 순서는 지연으로 만든다.

.list-item {
  opacity: 0; translate: 0 1rem;
  transition: opacity .3s, translate .3s;
  transition-delay: calc(var(--i) * 40ms);       /* style="--i: 3" */
}
.is-loaded .list-item { opacity: 1; translate: 0; }

항목 수가 많으면 --i를 JS로 넣는다. sibling-index() 함수로 순번을 CSS에서 바로 얻는 방법도 Chromium에 들어왔다.

60fps를 지키는 구현 규칙

60fps는 한 프레임을 약 16ms 안에 그려야 한다는 뜻이다.

.panel { transition: opacity .2s, display .2s allow-discrete; }
.panel[hidden] { display: none; opacity: 0; }
@starting-style { .panel { opacity: 0; } }   /* 처음 나타날 때의 시작값 */

움직임 줄이기 설정(prefers-reduced-motion: reduce)에서는 큰 이동·확대를 페이드로 바꾼다.

정리

• 모션은 상태 변화를 설명하는 도구다. 천천히 시작·끝, 예비 동작, 겹침, 호 같은 원칙이 자연스러움을 만든다.
• 속도는 모션 커브의 기울기다. 등장은 ease-out, 퇴장은 ease-in, 기계적인 진행만 linear.
• 곡선 경로는 축마다 다른 타이밍을 겹치거나 offset-path로 만든다.
• 동시에 움직이는 요소는 두세 개로 줄이고 지연으로 안무한다. transform·opacity만 움직인다.

관련 노트: CSS 애니메이션: transition과 @keyframes, 색과 움직임의 접근성, transform: 이동·회전·확대·기울이기, View Transitions: 화면 전환 애니메이션, 브라우저 렌더링 과정