모션 원칙

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

---

모션 원칙의 개념

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

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

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

---

모션을 사용하는 경우

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

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

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

---

절제의 기준

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

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

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; } }

---

모션 원칙의 목적

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

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