스프링 모션을 자연스럽게 사용하는 방법
구글의 스프링 모션 물리 시스템 사용방법
구글 M3 Expressive구글의 스프링 모션 물리 시스템
구글은 M3 Expressive 업데이트에서 새로운 모션 시스템을 도입했습니다. 바로 스프링을 사용하는 모션 물리 시스템입니다. 상호작용과 전환을 더욱 생동감 있고, 유연하며 자연스럽게 느껴지도록 만듭니다. 이는 구글 제품을 위한 새로운 모션 언어를 의미하며, 이전보다 구현과 커스터마이징도 훨씬 쉬워졌습니다.
이 물리 시스템은 기존의 이징(easing)과 지속 시간(duration)을 기반으로 한 시스템을 대체하게 됩니다. 본 글에서는 구글의 스프링 모션 물리 시스템이 무엇인지, 그 사용방법을 알아보겠습니다. (본문에 동적 이미지가 포함되어 모바일보다 PC에서 더 원활하게 작동될 수 있습니다.)
기존의 모션 시스템
Material 3의 기존 모션 시스템은 이징(Easing)과 지속시간(Deration)이었습니다.
Easing의 유무 차이이징(Easing)과 지속시간(Deration)
현실 세계에서 물체는 즉시 움직이거나 멈추지 않습니다. 대신, 가속하거나 감속하는 데 시간이 걸립니다. 이징(easing)이라고 불리는 완화 없는 전환은 뻣뻣하고 기계적으로 보이는 반면, 이징이 적용된 전환은 훨씬 자연스럽게 느껴집니다.
M2(좌)와 M3(우)의 차이M2의 실용적인 스타일과 비교할 때, M3의 이징은 더욱 표현력이 풍부합니다. 전환은 빠르게 출발하고 매우 부드럽게 마무리됩니다. 지속 시간도 M2보다 약간 더 길어져, 전환이 갑작스럽지 않게 부드럽게 멈출 수 있도록 여유를 줍니다.
새로운 모션 스킴
Material의 물리 기반 시스템은 표준형(Standard)과 표현형(Expressive) 두 가지 기본 모션 스킴(Motion Schemes)을 제공합니다. (스킴이란 컬러나 모션과 같은 시각적 속성을 일관된 규칙 하에 조합해 만든 스타일을 주로 말합니다.)
표준형(Standard)
보다 실용적이고 기능 중심의 제품을 위한 구성입니다. 최종 위치에 매끄럽게 도달하며, 반동을 최소화하여 담백하고 단정한 인상을 줍니다.
표현형(Expressive)
Material이 권장하는 감성 중심의 모션 구성입니다. 특히 주요 인터랙션이나 주목도 높은 화면 전환에서 사용하기 적합합니다. 최종 위치를 살짝 초과한 뒤 반동(bounce)하며 도달하는 움직임을 사용해, 역동적이고 생생한 느낌을 줍니다.
사용자 정의(Custom)
기본 제공되는 구성 외에, 필요에 따라 완전히 커스텀 모션 구성을 만들 수도 있습니다. Material의 테마 시스템과 호환되며, 표현형, 표준형, 사용자 정의형 간에 쉽게 전환할 수 있어 다양한 제품 니즈에 유연하게 대응할 수 있습니다.
작동 원리: 스프링
모션 스킴(Motion Schemes)은 스프링(spring)을 기반으로 동작합니다. 스프링은 세 가지 속성인 강성(stiffness), 감쇠(damping), 초기 속도(initial velocity)의 조합으로 모든 모션의 움직임을 제어합니다.
스프링은 다재다능합니다. 하나의 스프링은 전환, 버튼 효과, 제스처와 같은 다양한 상황에 적용될 수 있습니다. 이를 통해 제품 전반의 모션과 표현이 일관되게 느껴집니다. 또한 스프링은 자연스럽게 느껴집니다. 스프링은 물체가 움직이고 튕기는 방식처럼 예측 가능하도록 설계되어 있습니다. 제스처, 인터랙션 중단, 애니메이션 리타겟팅도 매끄럽게 처리합니다.
모든 컴포넌트의 모션은 expressive fast spatial과 expressive fast effects 두 가지 토큰에 의해 구동됩니다.
두 가지 스킴(expressive, standard) / 두 가지 유형의 움직임(spatial, effects) / 세 가지 속도(fast, default, slow)공간 이동 및 효과
Jetpack Compose(구글이 개발한 안드로이드 전용 최신 UI 툴킷)와 MDC-Android(Material Design 가이드라인을 따르도록 만든 Android용 UI 컴포넌트 라이브러리)에서는 이러한 스프링이 스프링 토큰(spring tokens)으로 제공됩니다.
공간 이동(spatial movement)
페이지 전환, 페이지 이동 등 UI 요소가 화면상에서 위치나 레이아웃이 바뀌는 움직임
효과(effects):
버튼, 아이콘을 누르는 등 위치 이동이 아닌 상태 변화나 피드백을 전달하는 작은 동작
토큰을 사용하면 어떤 요소든 쉽게 모션을 적용할 수 있어, 다양한 플랫폼에서도 일관되고 예측 가능한 모션 경험을 만들 수 있습니다. 공간 이동(spatial movement)과 효과(effects)를 위한 토큰이 있으며, 각각 기본(default), 빠름(fast), 느림(slow) 세 가지 지속 시간(duration)을 가집니다.
스타일
Spatial spring과 Effect spring 두 스타일의 차이를 알아보겠습니다.
이동(Movement) 및 회전(Rotation)에도 적용됩니다.Spatial spring (공간 스프링)
Spatial spring 토큰은 화면에서 어떤 것을 움직이는 애니메이션에 사용됩니다. 예를 들어, x와 y 위치, 회전, 크기, 모서리 둥글기 등의 애니메이션입니다. 이 스프링은 최종 값을 초과해서 튕기며 도착합니다.
투명도(Opacity) 및 색상(Color)에도 적용됩니다. Effects spring (효과 스프링)
Effects spring 토큰은 색상(color)이나 투명도(opacity) 같은 속성을 애니메이션 할 때 사용됩니다. 이 경우에는 튕김(overshoot)이 없어야 합니다.
공간 모션(좌)과 효과 모션(우)속도
대부분의 모션은 기본 속도를 사용해야 하며, 더 작은 요소는 빠른 속도를, 더 큰 요소는 느린 속도를 사용할 수 있습니다.
공간 모션의 예시
기본: 바텀 시트, 확장된 내비게이션 레일처럼 화면의 일부를 덮는 애니메이션
빠름: 스위치, 버튼 같은 작은 컴포넌트
느림: 전체 화면을 덮는 애니메이션
효과 모션의 예시
기본: 내비게이션 레일 안의 콘텐츠 투명도 변화
빠름: 스위치 핸들의 색상 변화
느림: 전체 화면 콘텐츠 리프레시
스프링 토큰은 기기 종류에 관계없이 작동합니다. 예를 들어, spatial fast 토큰은 항상 기본 또는 느림보다 빠르지만, 각 토큰의 정확한 값은 웨어러블, 스마트폰, 태블릿 등 기기 종류에 따라 달라집니다. 이를 통해 각 기기 환경에서 모션이 ‘빠르게’ 느껴지도록 합니다.
커스터마이징 정의
모션을 적용하는 데에는 몇 가지 다른 레벨이 있습니다. 제품이나 특정 컴포넌트에 가장 적합한 레벨을 선택할 수 있습니다.
표현형 스킴(좌)과 표준형 스킴(우)기본 모션 스킴 사용하기
말 그대로 앞서 소개한 기본 모션 스킴을 사용하는 것입니다. Expressive와 Standard 스킴은 대부분의 모션 요구에 충분합니다. Jetpack Compose에서는 컴포넌트들이 기본적으로 이 스킴들을 사용합니다.
매우 높은 강성의 스킴(좌)과 매우 낮은 강성의 스킴(우)커스텀 모션 스킴 만들기
Jetpack Compose에서는 모든 컴포넌트와 전환에 적용되는 기본 모션 스킴을 바꾸기 위해
MotionScheme 객체를 새로 만들어 각 속성(property)에 대해 다른 AnimationSpec을 반환하도록 설정할 수 있습니다.
마치며
이징과 지속 시간을 넘어 물리적 원리를 반영한 자연스러운 움직임Material의 스프링 기반 모션 시스템은 단순한 애니메이션을 넘어, 사용자 경험의 감성적 깊이를 확장할 수 있는 도구입니다. 특히 표현형(Expressive) 스킴은 화면 전환이나 버튼 인터랙션에 생동감을 더해, 제품의 브랜드 톤이나 정체성을 더욱 뚜렷하게 만들어 줍니다. 기존의 이징 곡선과 지속 시간(duration)에만 의존하던 방식과는 다르게, 물리적 원리를 반영한 움직임은 훨씬 더 자연스럽고 예측 가능한 상호작용을 가능하게 합니다.
반면, 스프링의 과도한 반동이나 튕김 효과는 제품의 성격에 따라 오히려 산만하게 느껴질 수 있으며, 각 요소마다 스킴을 세분화하여 적용할 경우 개발 및 디자인 측면에서의 일관성 유지와 커뮤니케이션 비용이 늘어날 수 있습니다. 특히 작은 UI 요소나 실용 중심의 제품에서는 지나친 표현력이 오히려 사용성을 해칠 우려도 있습니다. 따라서 이 시스템은 기능성보다는 감성적 경험을 우선하는 제품에서 더욱 효과적으로 활용될 수 있습니다. (메일 앱보다는 미디어 앱과 같은 감성적 경험 위주 제품)
개인적으로는 스프링 기반 모션이 가져다주는 유연성과 몰입감이 매우 인상 깊었습니다. 단순히 요소를 움직이는 것이 아니라, 디지털 인터페이스에 생명력을 부여하는 방식이라는 점에서, 앞으로의 UI 디자인은 단순한 정적 레이아웃을 넘어서 동적인 내러티브를 만들어가는 방향으로 더 확장될 수 있지 않을까요.
구글 모션 물리 시스템에 대한 자세한 내용은 아래에서 자세히 확인하실 수 있습니다.
