서비스를 사용하면서, 모션이 적용되지 않은 경우를 보는 게 이제는 더 힘들어진 것 같아요. 행동에 대한 명확한 피드백을 제공하기 위한 목적, 특정 화면이나 기능을 강조하기 위한 목적 등 사용을 위한 이유도 점점 다양해지고 있는데요. 오늘 소개할 서비스는 웹/앱 서비스에 적용할 수 있는 9가지 모션에 대한 기본 개념과 구조, 그리고 실제 사례 중 눈여겨봐야 할 내용을 정리해 주는 곳입니다.

첫 번째로 소개된 모션은 ‘Ease’로 Ease in, Ease out은 속도와 관련이 있는데요. 점점 빨라지거나, 점점 느려지는 모션을 의미하기 때문입니다. 이런 개념에 대한 설명과 더불어 빠르게, 느리게를 설정하는 데 있어 참고해야 할 내용이 함께 정리되어 있어요. 순서로 따져보면, 모션에 필요한 개념에 대한 설명을 먼저 확인한 뒤 실제 모션이 적용된 사례를 볼 수 있습니다.

저는 이미지를 통해 소개하지만, 실제 웹페이지에서는 앞서 살펴본 모션과 관련된 사례를 리스트로 확인해 볼 수 있습니다. 개념과 사례를 함께 보니, 어떻게 적용하면 좋을지에 대한 생각을 할 수 있어 좋습니다. 또, 소개되는 사례의 모션을 화면 안에서 바로 볼 수 있어 여러 사례를 비교하면서 볼 수 있다는 점 역시 유용합니다.

두 번째로 확인할 수 있는 모션 내용은 ‘오프셋’입니다. 두 개 이상의 객체 사이에 의도적인 지연을 주는 방법이라고 알고 있는데, 관련된 상세 내용을 확인할 수 있으며, 아래로 동일하게 사례를 이어서 살펴볼 수 있습니다.

모션에 따라 (1-9번) 배경 컬러를 다르게 지정해서 순서가 넘어갈 때마다 내용이 바뀐다는 것을 쉽게 인지할 수 있어요. 물론 개념 – 사례라는 순서가 계속 유지되기 때문에 내용을 함께 보는 과정에서 큰 어려움은 없습니다.

물론, 실제 모션을 서비스에 적용하는 건 훨씬 많은 노력과 고민을 필요로 하지만 저처럼 아직 구조 등을 잘 모르는 상태라면 이런 웹페이지의 도움을 받아보는 것도 좋다고 생각합니다. 많이 쓰이는 개념 위주로 정리가 잘 되어있고 대표 사례로 볼 수 있을만한 사례가 연달아 제공되기 때문입니다.

더 자세한 내용은 ‘링크’를 통해 확인해주세요!