모션은 단순한 UI 애니메이션이 아닌 언어의 한 종류입니다. 100마디 말보다 한 번의 움직임으로 한정된 공간에서 장황한 설명을 대신하여 직관적으로 이해할 수 있게 도와주는 도구인 셈이죠.

IBM 디자인 시스템에서는 “모션은 사용자와의 커뮤니케이션과 긍정적인 경험을 쌓을 수 있는 강력한 도구이며, 복잡한 경험을 쉽게 제안하고 사용자가 서비스를 잘 사용할 수 있도록 돕는다”라고 이야기합니다.

이처럼 모바일에서의 모션(Motion)은 사용자와의 상호작용에서 큰 역할을 하며, 이를 디자인 시스템에 포함하고 주요 원칙을 세우는 것이 필요하다고 

모션 디자인 시스템에 대해 아주 깊이 있는 분석과 소개를 해주셨네요! 모션이 사용자 경험을 향상하는 데 얼마나 중요한지 잘 설명해주셔서 많은 분들이 유익을 얻을 것 같아요. 😊

Motion을 디자인 시스템에 효과적으로 구현하는 데 많은 도움이 될 자료입니다. 좋은 글 감사합니다!

원티드 회원들의 커리어 성장과 행복을 돕는 AI입니다.

원티드 에이전트

모션은 단순한 UI 애니메이션이 아닌 언어의 한 종류입니다. 100마디 말보다 한 번의 움직임으로 한정된 공간에서 장황한 설명을 대신하여 직관적으로 이해할 수 있게 도와주는 도구인 셈이죠.

IBM 디자인 시스템에서는 “모션은 사용자와의 커뮤니케이션과 긍정적인 경험을 쌓을 수 있는 강력한 도구이며, 복잡한 경험을 쉽게 제안하고 사용자가 서비스를 잘 사용할 수 있도록 돕는다”라고 이야기합니다.

이처럼 모바일에서의 모션(Motion)은 사용자와의 상호작용에서 큰 역할을 하며, 이를 디자인 시스템에 포함하고 주요 원칙을 세우는 것이 필요하다고 생각되는데요, 어떻게 가이드를 만들어야 할까요?

이번 편에서는 Cosimo Scarpa의 Always include motion in your design system 글을 소개하려 합니다.

모션은 왜 중요할까요?

UI 모션은 아래와 같은 방법으로 긍정적인 사용자 경험을 만들어줍니다. 


1. 계층 요소를 이해하는데 도움을 줍니다.
우리가 책을 앞 뒷장을 넘기면서 페이지의 순서를 이해하듯, 가상의 공간인 모바일에서는 움직임을 통해 전체 서비스의 구조를 이해하는데 도움을 줍니다. 앞에서 뒤로, 뒤에서 앞으로 나오는 모션을 통해 페이지를 이동했구나~라고 인지할 수 있고, 아래에서 위, 위에서 아래로 움직이는 모션을 통해 일시적으로 정보가 노출되는 것을 인지할 수 있습니다.

2. 사용자의 관심을 끌고 중요한 데이터 또는 핵심 UI 요소를 강조하는데 도움이 됩니다.

3. 사용자 행동에 대한 즉각적인 피드백과, 현재 상태를 제공합니다.
대표적으로 인스타의 스토리링 혹은 Dm을 보낼 때 나오는 모션은 게시글이 즉각적으로 업로드 됐는지 메시지가 갔는지 등의 상태를 모션으로 자연스럽게 인지 시켜줍니다.

모션 UX 원칙 정하기

모션을 어떻게 포함할지 고민하기 전에, 기존 시스템을 분석하고 모션을 적용할 시기와 방법을 고려하는 것이 중요합니다.
분석 시 아래 요소들이 평가 기준으로 삼을 수 있습니다.
타이밍 커브
변형 패턴 (높이, 투명도, 크기 등)
전환방식
커뮤니케이션 요소의 모션 (강조, 표현, 정보 제공)
포함할 수 있는 모션
과도한 모션

아래 예시와 같이 Figma에서 간단한 테이블 형식으로 분석을 수행할 수 있습니다.
이 과정을 통해 충분한 정보를 수집하고 디자인 시스템을 위한 모션 전략을 수립할 수 있습니다. 또한 모션 접근 방식에 대한 명확한 아이디어를 갖고 전체 디자인 시스템에서 일관성을 유지하는 첫 번째 단계입니다.
모션 시스템에서 일관성을 유지하면 사용자에게 편안하고 예측 가능한 환경을 만들 수 있습니다.

가이드 원칙

모션 디자인에 대한 원칙을 정의하는 것은 때론 혁신이나 새로운 패턴 구현 측면에서 장애물이 될 수 있습니다. 효과적인 모션 원칙은 상황에 맞게 UX를 향상해야 하죠. 예를 들어 구현 가능성, 피드백, 온보딩 경험 및 탐색 명확성을 개선하고, 팀이 모션을 효과적으로 시스템에 통합하도록 안내해야 합니다.

Carbon Design System
IBM은 화면을 생동감 있게 만들고 모션을 사용하여 사용자가 복잡한 경험을 탐색할 수 있도록 하는 훌륭한 사례입니다.

Carbon Design System은 스타일을 위해 **생산적 모션과 표현적 모션**으로 분류합니다.
생산적 모션은 미묘한 방식으로 효율성과 반응 능력을 향상하며 집중이 필요한 작업에 이상적입니다. 버튼 상태, 드롭다운 메뉴 및 데이터 시각화와 같은 마이크로 상호 작용에 사용되어 산만함 없는 부드러운 사용자 경험을 보장합니다.
표현적 모션은 열정적이고 활기찬 움직임이 특징이며 페이지 열기, 기본 작업과 같은 중요한 순간에 사용되어 시스템 경고 및 알림에 대한 의미와 주의를 집중시킵니다.

모션 구조 만들기

모션 구조는 디자인 시스템에 포함해야 하는 정보이며, duration(지속 시간), easing(이징), effect(객체 효과) 간의 관계를 이해하는 데 도움이 됩니다.
효과를 체계적으로 구성하는 한 가지 방법은 원칙에 맞게 정렬하는 것입니다. 이는 원칙, 컴포넌트, 효과, 지속 시간 및 이징 간의 관계를 간략하게 설명하는 표를 통해 시연됩니다.
1. 규칙 및 조건 정의
일관되고 조화로운 모션을 유지하기 위한 해야 할 일과 하지 말아야 할 일을 명확하게 설명합니다.

2. 모션 토큰 구현
모션 시스템의 구조를 정의한 후에는 다시 사용 가능한 값인 토큰을 사용하여 이를 문서화하는 작업으로 넘어갈 수 있습니다.

3. 토큰이 중요한 이유
제품을 개발하는 여러 팀이 있는 경우 절대적으로 피해야 할 것은 제품의 외관과 행동의 불일치입니다.     모션에서 토큰을 사용하면 이징과 지속 시간을 변수로 캡슐화하여 언제든지 디자인에 적용할 수 있으므로 Transition에만 신경 쓰면 됩니다.     모션 토큰 구조     원하는 커뮤니케이션 스타일을 기반으로 제품 전체 사용자 여정을 안내하고 사용자 참여를 유도하는 다양한 토큰을 만들게 될 것입니다.

4. 상호 작용 컴포넌트
디자인 시스템 내에서 모션 토큰을 선보이는 훌륭한 방법은 상호 작용 데모를 통합하는 것입니다. 이를 통해 문서를 사용하는 사람들이 모양과 행동을 더 명확하게 이해할 수 있도록 합니다.

모션 디자인 시스템에서 접근성 고려

모션을 디자인에 통합할 때 모든 사용자, 특히 장애가 있는 사용자를 포함하여 모든 사용자를 위해 접근성을 고려해야 합니다.   
제어하기 : 애니메이션으로 인해 불편함이나 산만함을 느낄 수 있는 사용자를 위해 모션을 비활성화하거나 강도를 조절하는 옵션을 제공합니다.
방해하지 않기: 모션 요소가 사용자가 제품과 상호 작용하는 것을 방해하지 않도록 합니다. 애니메이션이 단순히 장식적인 것이 아니라 압도감 없이 사용성을 향상하는지 확인하십시오.

결론

모션 디자인 시스템을 구축하는 것은 시간이 많이 걸리는 작업이지만 일관되고 명확한 사용자 경험을 만들기 위해 필수적입니다. 알다시피 디자인 시스템은 모션을 포함하여 진화하는 개체입니다. 하지만 위에서 언급한 팁을 올바르게 구현하여 제품 경험을 향상하고 사용성을 개선하며 전체적인 흐름을 더욱 즐겁게 만들 수 있는 모션 시스템을 만들 수 있습니다.

모션은 단순한 UI 애니메이션이 아닌 언어의 한 종류입니다. 100마디 말보다 한 번의 움직임으로 한정된 공간에서 장황한 설명을 대신하여 직관적으로 이해할 수 있게 도와주는 도구인 셈이죠.

IBM 디자인 시스템에서는 “모션은 사용자와의 커뮤니케이션과 긍정적인 경험을 쌓을 수 있는 강력한 도구이며, 복잡한 경험을 쉽게 제안하고 사용자가 서비스를 잘 사용할 수 있도록 돕는다”라고 이야기합니다.

이처럼 모바일에서의 모션(Motion)은 사용자와의 상호작용에서 큰 역할을 하며, 이를 디자인 시스템에 포함하고 주요 원칙을 세우는 것이 필요하다고 생각되는데요, 어떻게 가이드를 만들어야 할까요?

이번 편에서는 [Cosimo Scarpa](https://medium.com/@coswise?source=post_page-----5afcf967a762--------------------------------)의 **Always include motion in your design system** 글을 소개하려 합니다.



## **모션은 왜 중요할까요?**
UI 모션은 아래와 같은 방법으로 긍정적인 사용자 경험을 만들어줍니다. 
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2Ftemp%2F8e314e8b3dad06a179bc3b1f0914cc309563e0609ea0455a8c6a744acdce3cc5&w=505&q=80)

**1. 계층 요소를 이해하는데 도움을 줍니다.**
우리가 책을 앞 뒷장을 넘기면서 페이지의 순서를 이해하듯, 가상의 공간인 모바일에서는 움직임을 통해 전체 서비스의 구조를 이해하는데 도움을 줍니다. 앞에서 뒤로, 뒤에서 앞으로 나오는 모션을 통해 페이지를 이동했구나~라고 인지할 수 있고, 아래에서 위, 위에서 아래로 움직이는 모션을 통해 일시적으로 정보가 노출되는 것을 인지할 수 있습니다.

**2. 사용자의 관심을 끌고 중요한 데이터 또는 핵심 UI 요소를 강조하는데 도움이 됩니다.**

**3. 사용자 행동에 대한 즉각적인 피드백과, 현재 상태를 제공합니다.**
대표적으로 인스타의 스토리링 혹은 Dm을 보낼 때 나오는 모션은 게시글이 즉각적으로 업로드 됐는지 메시지가 갔는지 등의 상태를 모션으로 자연스럽게 인지 시켜줍니다.



## **모션 UX 원칙 정하기**
**모션을 어떻게 포함할지 고민하기 전에, 기존 시스템을 분석하고 모션을 적용할 시기와 방법을 고려하는 것이 중요합니다.**
분석 시 아래 요소들이 평가 기준으로 삼을 수 있습니다.
타이밍 커브
변형 패턴 (높이, 투명도, 크기 등)
전환방식
커뮤니케이션 요소의 모션 (강조, 표현, 정보 제공)
포함할 수 있는 모션
과도한 모션

**아래 예시와 같이 Figma에서 간단한 테이블 형식으로 분석을 수행할 수 있습니다.**
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2Ftemp%2F526737804e4e104b8b20c483e167c12c660afd932fcebccf5e43ad93d9fac629&w=inherit&q=80)이 과정을 통해 충분한 정보를 수집하고 디자인 시스템을 위한 모션 전략을 수립할 수 있습니다. 또한 모션 접근 방식에 대한 명확한 아이디어를 갖고 전체 디자인 시스템에서 일관성을 유지하는 첫 번째 단계입니다.
모션 시스템에서 일관성을 유지하면 사용자에게 편안하고 예측 가능한 환경을 만들 수 있습니다.

### **가이드 원칙**
모션 디자인에 대한 원칙을 정의하는 것은 때론 혁신이나 새로운 패턴 구현 측면에서 장애물이 될 수 있습니다. 효과적인 모션 원칙은 상황에 맞게 UX를 향상해야 하죠. 예를 들어 구현 가능성, 피드백, 온보딩 경험 및 탐색 명확성을 개선하고, 팀이 모션을 효과적으로 시스템에 통합하도록 안내해야 합니다.

**Carbon Design System**
IBM은 화면을 생동감 있게 만들고 모션을 사용하여 사용자가 복잡한 경험을 탐색할 수 있도록 하는 훌륭한 사례입니다.

Carbon Design System은 스타일을 위해 **<u>생산적 모션과 표현적 모션<u>**으로 분류합니다.
생산적 모션은 미묘한 방식으로 효율성과 반응 능력을 향상하며 집중이 필요한 작업에 이상적입니다. 버튼 상태, 드롭다운 메뉴 및 데이터 시각화와 같은 마이크로 상호 작용에 사용되어 산만함 없는 부드러운 사용자 경험을 보장합니다.
표현적 모션은 열정적이고 활기찬 움직임이 특징이며 페이지 열기, 기본 작업과 같은 중요한 순간에 사용되어 시스템 경고 및 알림에 대한 의미와 주의를 집중시킵니다.
## ![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2Ftemp%2F8cc0944fd2e7ef62c4f5b5e5541b5b518783187ac6d368d18acdcdba2bc23794&w=inherit&q=80)![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2Ftemp%2F681a1f6adc39eaf6f91a281c7e47d5ef41e59cceef3a5a9dee0df4f7648cfa33&w=inherit&q=80)**모션 구조 만들기**
모션 구조는 디자인 시스템에 포함해야 하는 정보이며, duration(지속 시간), easing(이징), effect(객체 효과) 간의 관계를 이해하는 데 도움이 됩니다.
효과를 체계적으로 구성하는 한 가지 방법은 원칙에 맞게 정렬하는 것입니다. 이는 원칙, 컴포넌트, 효과, 지속 시간 및 이징 간의 관계를 간략하게 설명하는 표를 통해 시연됩니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2Ftemp%2Fa917cfaa5991fad190260ee08e1e92d241209f23021b26da300368b8b57c631a&w=inherit&q=80)**1. 규칙 및 조건 정의**
일관되고 조화로운 모션을 유지하기 위한 해야 할 일과 하지 말아야 할 일을 명확하게 설명합니다.

**2. 모션 토큰 구현**
모션 시스템의 구조를 정의한 후에는 다시 사용 가능한 값인 토큰을 사용하여 이를 문서화하는 작업으로 넘어갈 수 있습니다.

**3. 토큰이 중요한 이유**
제품을 개발하는 여러 팀이 있는 경우 절대적으로 피해야 할 것은 제품의 외관과 행동의 불일치입니다.     모션에서 토큰을 사용하면 이징과 지속 시간을 변수로 캡슐화하여 언제든지 디자인에 적용할 수 있으므로 Transition에만 신경 쓰면 됩니다.     모션 토큰 구조     원하는 커뮤니케이션 스타일을 기반으로 제품 전체 사용자 여정을 안내하고 사용자 참여를 유도하는 다양한 토큰을 만들게 될 것입니다.

**4. 상호 작용 컴포넌트**
디자인 시스템 내에서 모션 토큰을 선보이는 훌륭한 방법은 상호 작용 데모를 통합하는 것입니다. 이를 통해 문서를 사용하는 사람들이 모양과 행동을 더 명확하게 이해할 수 있도록 합니다.



## **모션 디자인 시스템에서 접근성 고려**
모션을 디자인에 통합할 때 모든 사용자, 특히 장애가 있는 사용자를 포함하여 모든 사용자를 위해 접근성을 고려해야 합니다.   
제어하기 : 애니메이션으로 인해 불편함이나 산만함을 느낄 수 있는 사용자를 위해 모션을 비활성화하거나 강도를 조절하는 옵션을 제공합니다.
방해하지 않기: 모션 요소가 사용자가 제품과 상호 작용하는 것을 방해하지 않도록 합니다. 애니메이션이 단순히 장식적인 것이 아니라 압도감 없이 사용성을 향상하는지 확인하십시오.


## **결론**
모션 디자인 시스템을 구축하는 것은 시간이 많이 걸리는 작업이지만 일관되고 명확한 사용자 경험을 만들기 위해 필수적입니다. 알다시피 디자인 시스템은 모션을 포함하여 진화하는 개체입니다. 하지만 위에서 언급한 팁을 올바르게 구현하여 제품 경험을 향상하고 사용성을 개선하며 전체적인 흐름을 더욱 즐겁게 만들 수 있는 모션 시스템을 만들 수 있습니다.




글쓰기챌린지

디자인시스템에 모션 가이드 추가하는 방법

 '더오픈프로덕트' 팀에서 기획자, 개발자, 마케터와 함께 좋은 프로덕트를 만들고자 디자이너로서 인사이트를 전합니다.