모션 디자인이 디자인 시스템이 됐다

Figma Config 2026에서 발표된 Motion 기능이 디자인 업계를 흔들었다. 모션 디자인 시스템이 단순한 애니메이션 추가가 아닌, 디자인 시스템의 핵심 레이어가 된 것이다.

1. 모션 디자인 시스템이란 무엇인가

모션 디자인 시스템은 제품 전체에서 일관된 애니메이션 언어를 정의하는 것이다. 색상 토큰, 타이포그래피 스케일처럼, 이징(easing)·듀레이션(duration)·딜레이(delay) 값이 디자인 토큰으로 정의되고 관리된다.

사실 모션이 디자인 시스템의 정식 레이어로 승격된 데는 배경이 있다. 디스플레이 주사율이 90Hz, 120Hz로 보편화되면서 화면이 더 부드럽게 움직일 수 있는 하드웨어 조건이 갖춰졌고, 사용자들은 앱을 켤 때마다 매끈한 전환을 당연하게 기대하게 됐다. 동시에 여러 팀이 각자 다른 이징과 속도로 애니메이션을 만들면서 제품 전체의 인상이 뒤죽박죽되는 문제도 커졌다. 색상이나 타이포그래피처럼 모션에도 공통 규칙이 필요해진 이유다.

빠른 전환

150ms + ease-out — 화면 사이를 가볍게 넘어갈 때

주의를 끄는 강조

300ms + spring — 사용자의 시선을 확실히 붙잡을 때

같은 규칙 아래 상황별로 갈라지는 모션 토큰 예시

개발자도, 디자이너도, AI 코드 생성 도구도 이 정의만 따르면 일관된 움직임 언어를 사용할 수 있다.

2. 모션 디자인 시스템을 구축하는 4단계

기술적으로는 CSS animations, Web Animations API, Framer Motion 같은 라이브러리가 성숙했고, Figma Motion이 그 간극을 완전히 메웠다. 사용자 기대치 면에서도 Apple의 iOS 전환 애니메이션과 Android의 Material Motion이 “이렇게 움직여야 자연스럽다”는 기준을 이미 만들어 놓았다. AI 디자인 카테고리에서 다루는 AI 생성 UI도 모션 없이는 어색하다.

원칙 정의 — 제품의 모션 언어가 전달해야 하는 감정을 정한다

토큰 설계 — Duration, Easing, Scale을 정의한다

패턴 라이브러리 — Enter, Exit, State Change, Page Transition 패턴을 각각 정의한다

문서화 — CSS 값까지 명시해 개발자가 바로 구현할 수 있도록 한다

모션 디자인 시스템을 처음부터 구축하는 네 단계

모션 토큰 실전 예시

실제로 문서화된 모션 토큰은 CSS 변수 형태로 그대로 전달된다.

100ms

–duration-fast · 호버, 포커스

200ms

–duration-base · 대부분의 UI 전환

400ms

–duration-slow · 패널 열기, 모달 등장

Google Material의 기본 이징(cubic-bezier(0.2, 0, 0, 1))과 함께 쓰이는 듀레이션 토큰

흔히 하는 실수

가장 흔한 실수는 화면마다 다른 담당자가 감으로 이징과 속도를 정하는 것이다. 어떤 화면은 빠르고 어떤 화면은 느려서, 제품 전체가 하나의 브랜드처럼 느껴지지 않는다. 또 다른 실수는 모션을 장식으로만 여겨 과도하게 넣는 것이다. 화면을 열 때마다 긴 애니메이션이 반복되면 오히려 속도감이 떨어지고 사용자를 지치게 한다. 마지막으로 prefers-reduced-motion 설정을 무시하는 경우도 많다. 전정 기관 이상으로 움직임에 민감한 사용자에게는 과도한 모션이 실제 불편으로 이어질 수 있다.

💡 실무 포인트 — 모션 토큰을 duration과 easing 값이 담긴 CSS 변수(예: –duration-fast)로 문서화해두면, 개발자가 그대로 복사해 쓸 수 있어 디자이너와 개발자 사이의 왕복이 크게 줄어든다.

3. 접근성이 완성하는 모션

AI가 사용자의 행동 패턴을 학습해 개인화된 모션을 제공하는 시대가 오고 있다. prefers-reduced-motion 미디어 쿼리가 이미 이 방향의 출발점이다. 모션 디자인 시스템은 접근성까지 품을 때 비로소 완성된다.

4. 정적 디자인 시스템 vs 모션 디자인 시스템

기존의 정적 디자인 시스템과 모션까지 포함한 디자인 시스템을 나란히 놓고 보면 차이가 분명해진다.

정적 디자인 시스템

색상·타이포그래피만 토큰화되어 있고, 애니메이션은 화면마다 개별 구현된다

모션 디자인 시스템

Duration·Easing까지 토큰화되어, 어떤 화면이든 같은 움직임의 언어를 공유한다

모션까지 포함하느냐에 따라 달라지는 디자인 시스템의 완성도

당장 모든 걸 바꿀 필요는 없다. 기존 정적 시스템 위에 모션 토큰 레이어만 추가하는 점진적 방식으로도 충분히 시작할 수 있다.

5. 지금 프로젝트에 적용하는 법

당장 다음 스프린트부터 적용할 수 있는 점검 순서다.

현황 파악 — 지금 제품에서 쓰이는 애니메이션의 duration·easing 값을 모두 모아본다

공통값 추출 — 가장 많이 쓰이는 값을 기준으로 fast·base·slow 3단계 토큰을 만든다

예외 문서화 — 강조가 필요한 화면에는 별도 spring 토큰을 정의해 예외를 명확히 한다

접근성 반영 — prefers-reduced-motion 대응 코드를 토큰 레벨에서 함께 정의한다

모션 토큰을 점진적으로 도입하는 네 단계

6. 마무리

모션 디자인에 대한 이해는 실천에서 온다. 오늘 이 글에서 한 가지만 골라 지금 진행 중인 작업에 바로 적용해보자. 그 작은 실험이 진짜 이해의 시작이다.

Design Daily Life · 디자인의 일상을 기록합니다