모션 원칙

모션은 화면을 꾸미기 위한 장식이 아닙니다. 모션은 변화가 어떻게 일어나는지 설명하는 정보입니다. 모션 원칙은 애니메이션을 언제, 왜, 얼마나 사용할지 정의하는 기준입니다.

모션 원칙의 개념

모션은 상태와 상태 사이의 변화를 사용자가 이해하도록 돕는 표현입니다.

모션은 변화의 이유와 방향을 전달합니다.
목적 없는 모션은 정보가 아니라 소음입니다.
모션은 내용을 방해하지 않는 선에서만 사용합니다.

모션은 의미를 가진 변화에만 사용합니다.

모션을 사용하는 경우

모션은 다음과 같이 변화를 설명해야 할 때 사용합니다.

상태 전이 — 나타나고 사라지는 과정을 자연스럽게 연결합니다.
위치와 관계 — 요소가 어디에서 왔고 어디로 가는지 보여줍니다.
연속성 — 갑작스러운 전환 대신 흐름을 유지합니다.

변화를 설명하지 않는 모션, 시선을 끌기 위한 모션은 사용하지 않습니다.

절제의 기준

모션은 짧고 가벼워야 합니다.

전환은 사용자가 기다린다고 느끼지 않을 만큼 짧게 유지합니다.
같은 화면에서 여러 모션이 동시에 시선을 다투지 않게 합니다.

transition은 의미 있는 상태 전이에만, 짧은 duration으로 한 줄에 작성합니다. data-state가 바뀔 때 자연스럽게 이어지도록 상태 선택자에 전이를 겁니다.

.accordion .i_panel { overflow: hidden; height: 0; transition: height 150ms ease; }
.accordion[data-state="open"] .i_panel { height: auto; }
.modal_login { opacity: 0; transition: opacity 200ms ease; }
.modal_login[data-state="open"] { opacity: 1; }

구체적인 duration·easing 값은 토큰에서 정의합니다.

접근성 고려

움직임에 민감한 사용자를 위한 모션 축소, prefers-reduced-motion 대응, 모션 없이도 정보가 전달되어야 한다는 원칙은 접근성 철학에서 다룹니다.

모션을 줄이도록 설정한 사용자에게는 @media (prefers-reduced-motion: reduce)로 전환을 최소화합니다. 상태 변화 자체는 그대로 남고, 그 사이의 움직임만 제거합니다.

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms; } }

모션 원칙의 목적

모션 원칙은 변화를 설명하는 모션만 남기고 불필요한 움직임을 걷어내기 위한 기준입니다.

모션이 절제될수록 남은 모션은 더 분명한 의미를 가집니다.