구글 Material Design 3 - 트랜지션 패턴편

UX/UI 디자이너라면 한 번쯤 접해봤을 구글의 Material Design. 이 디자인 시스템은 색상, 타이포그래피, 레이아웃뿐 아니라 모션과 인터랙션까지 다루는 포괄적인 가이드다. 오늘은 그중에서도 Styles > Motion > Transitions 섹션에 주목해보려 한다.

*Transitions : 앱의 개별 요소나 전체 화면 뷰를 연결하는 짧은 애니메이션

 

👉 Transition Patterns 보러가기

 

들어가기 전에 생각해볼 것은 '앱에 사용되는 트랜지션의 목적은 무엇일까' 라는 것이다.

인터랙션은 사실 사용자와 앱을 잇는 가장 최종 단계라고 생각된다. 

없어도 앱을 사용하는데에 지장이 크진 않지만 앱의 사용경험을 극대화하려면 필수가 아닐까

구글은 트랜지션을 다음과 같이 정의한다.

“트랜지션은 앱이 어떻게 작동하는지를 이해하는 데 도움을 주는 핵심적 UX 요소다.”

 

구글이 제안하는 6가지 트랜지션 패턴

Transition patterns

1. Container transform (컨테이너 변환)
2. Forward and backwoard (앞/뒤 전환)
3. Lateral (측면 전환)
4. Top level (최상위 레벨 전환)
5. Enter and exit (진입 종료 전환)
6. Skeleton loaders (뼈대 로더)

 

 

하나씩 뜯어보자!

 

1. Container transform (컨테이너 변환 = 심리스 전환)

이 패턴은 카드확장이나 디테일한 페이지로 들어갈 때, 심리스(seamless)한 전환으로 사용된다.

카드, 리스트, 이미지 갤러리, 시트 등에 잘 쓰인다.

 

 

(GIF로 다양한 예시들을 친절하게 올려두어서 바로 확인할 수 있으니, 꼭 웹에서 확인해볼 것)

 

2. Forward and backwoard  (앞/뒤 전환)

같은 계층 구조에 있는 화면 사이를 탐색할 때 사용된다. 예시로 받은 편지함에서 메시지 스레드로 이동하는 경우이다.

리스트, 카드, 버튼, 링크 와 잘 쓰인다.

 

이 트랜지션의 경우에는 Android와 IOS가 다른 스타일을 고수하는데,

Android의 경우에는 페이드 효과를 쓰고 ISO는 배경이 전경보다 느리게 시간차를 두는 패럴랙스 효과가 쓰인다.

(둘 중에 뭐가 더 좋다고 말하긴 어렵지만 Android의 경우에는 기기의 해상도에 상관없이 대응하기 쉬운 방향이고, 사용자를 위한 안내역할을 충실히 한 것은 ISO라고 생각된다.)

 

3. Lateral (측면 전환)

동일한 계층의 콘텐츠 사이를 탐색할 때 사용된다. 쉽게 말해 가로로 슬라이딩하는 전환이다.

탭, 이미지 갤러리, 캐러셀 구성요소와 잘 쓰인다.

Forward and backwoard 전환과 다른 점은 페이드 효과나 패럴랙스 효과가 없고 요소 그룹들이 동시에 슬라이딩 된다는 것이다.

 

4. Top level  (최상위 레벨 전환)

최상위 대상 사이를 탐색하는 데 사용된다.

이 모션에서는 이동 전과 후의 콘텐츠가 반드시 관련되어 있지는 않기 때문에 의도적인 효과를 제외하고 빠르게 전환된다는 점이 특징이다.

 

5. Enter and exit (진입 종료 전환)

이 패턴은 화면에 컴포넌트(모달, 팝업, 메뉴, 툴팁 등..)를 추가하거나 제거하는 데 사용된다.

화면 안에서 모달의 형태로 뜨거나 화면 밖에서 들어오는 형태일 때 쓰인다.

화면 밖에서 들어오는 형태의 경우는 앱바, 배너, 네비게이션 바, 시트 등이 있다.

 

6. Skeleton loaders

임시 로딩 상태에서 완전히 로드된 화면으로 전환될 때 사용된다.

콘텐츠가 로드될 때 지연시간을 줄이고 레이아웃을 안정화 하는 데 사용된다.

 

정리하며,

트랜지션은 '연결'을 설계하는 일

여섯 가지 트랜지션 패턴은 단순한 모션 가이드가 아니다.
이들은 사용자의 행동, 기대, 흐름, 주의 흐름을 섬세하게 이어주는 UX의 핵심 도구이다.

 

다음 포스팅에서는 이 트랜지션 패턴이 어떻게 좋은 사용자 경험을 만드는지, 그리고 어떤 UX적 개념이 적용되는지를 더 깊이 들여다보겠다.

 

이미지 출처 - 구글 디자인 시스템