I’m a interactive experience designer, football and movie lover

Aug 11, 2016

자주 봐도 낯설지만 조금 더 친해져보자, Credit easing_functions_css3

인터랙션 디자인 이야기 (2) Easing Functions

그거 뭐 좀 그냥 부드럽게 움직이는거 아닌가? 맞아요;;

들어가며..

이번은 인터랙션 디자인 두 번째 이야기로 space(공간)에 관해 나눠볼 예정이었다. 계층구조와 2, 3 차원 공간을 활용하는 내용들을 고민하다보니, 언젠가 easing 에 대한 이야기를 해야 할텐데 이러다 timing 애매해지는게 아닌가 싶은 생각이 들었다.

그토록 motion 에서 중요한 timing 아니던가!!
그러니 오늘은 easing functions 이다.

UX/UI 디자이너들에게 그동안 easing functions 과 친해질 기회가 사실 많지 않았다. 협업을 위해 수많은 의성어와 의태어가 맹활약 하였고, prototyping tools 로 인해 많이 개선되었지만 easing functions 과의 사이에 낀 안개는 쉽게 걷히질 않는다.

근래 motion hi-fi prototyping tools 의 easing functions 표현 범위와 개발구현 연계성에 대해 관심이 많았고, 그 중 principle timeline, Flinto timing, framer easing curve 등 다양한 방식으로 사용되는 모습을 찾아볼 수 있었다.

이처럼 motion hi-fi 에 있어 매우 중요하지만 늘 충분한 이해가 부족했던 easing functions 에 대해 단순히 부드럽게 해준다는 설명보다, 각기 다른 easing 의 특징이 prototyping 에 어떻게 활용될 수 있는지 조금 다른 관점으로 정리해보고자 한다.

Basic easing functions graph

가장 **기본적인** **easing functions** 패턴들의 움직임을 눈여겨 보자, 학창시절 물리시간의 지루함이 떠오를지도 모른지만

다들 익숙하게 봐왔을 그래프들이지만 말로 설명하기 참 힘든 것이 사실이다. 간단하게 x축 → 시간, y축 ↑ 속성 의 변화로 일직선(linear) 기울기보다 완만할수록 느리게, 반대로 심할수록 빠르게 움직이는 운동이다.

ease : 조금 부드럽고 빠르게 속성값에 진입하여 천천히 부드럽게 멈춘다.
linear : 물리시간에 등.속.운.동이라고 배운 일.직.선 운동이다.
ease-in : 천천히 부드럽게 시작하여 점점 빠르게 속성값에 다다른다.
ease-out : ease-in 과 반대로 빠르게 시작하여 점점 천천히 도달한다.
ease-in-out : ease-in 으로 시작하여 ease-out 으로 끝나는 운동, 천천히 부드럽게 시작하여 점점 빠르게 도달할 즈음 속도를 줄여 부드럽게 멈춘다.

이렇듯 말로 설명하기 한없이 부족하기에 오해가 많이 발생한다.

motion 에서 특히 easing 을 많이 사용하는 속성은 position, scale, rotation 이며, 이외 다른 속성들은 변화의 정도에 따라 easing 차이를 쉽게 인지하기 어려울 수 있다.

position, scale, rotation with easing functions, Credit Magic Chen

언제나 정영님의 미디엄은 자세한 설명으로 한결같이 많은 도움이 된다.

이처럼 기본 설명은 많은 아티클로 소개가 되었고, Easing Functions (aka Timing Functions) in CSS3 을 통해 easing functions 과 cubic bezier curves 의 관계에 대해서도 충분한 이해를 해볼 수 있다.

자~ 이제 easing functions 과 조금 가까워졌다면 간단한 예시들을 보자.

Arc of movement

Goolge Material motion 의 movement 와 transition 예시들

움직이는 객체의 position 과 easing 을 통해 자연스러운 Material motion 의 포물선(arc) 운동을 보여주고 있다. 여기서 google 은 단순히 일직선(linear) 운동이 아닌, 현실 세계의 물리 법칙인 중력과 관성에 의한 natural motion 을 강조하고 있다.

첫 예시를 after effects 로 간단하게 3 가지 방식으로 재구성해 보았다.

1. parent layer + rotation

포물선 운동의 중심점에 parent layer 를 배치한 후 rotation -73.5, rectangle layer 는 반대로 rotation 73.5 변경하여 400ms 동안 ease-in-out 으로 만들었다.

간단한 방법은 아니지만, 어렵지 않게 patent layer 의 rotation 을 활용할 수 있다.

2. posotion + delay

포물선 운동을 조금 이해하면 누구나 쉽게 응용할 수 있는 방식으로 간단히 설명하면, 올라가는 포물선은 x축 먼저, y축 조금 늦게 올라가는 운동이다.

반대로 내려오는 포물선은 y축 먼저, x축 조금 늦게 이동한다.

position x, y 사이의 delay 를 사용하여 올라갈 때 y축, 내려올 때 x축이 늦게 이동한다.

3. position + motion path/ bezier handles

에펙 motion path/bezier handles 로 easing 을 제어하여 포물선 운동으로 변경한 방식으로, 앞선 방식들과 비교하여 손쉽게 만들 수 있다.

이외에 코딩으로 svg 나 삼각함수를 활용한 방법도 있지만 복잡한건 생략하자.

Easing for Arc

이렇게 재구성해본 3가지 방식들로 포물선 운동을 구현해볼 수 있지만, 조금 들여다보면 각 방식마다 아쉬운 한계들이 보인다.

parent layer + rotation : 기본적으로 원형 포물선 운동이지만, 포물선 크기에 따라 parent layer 위치를 매번 변경하는 불필요한 작업이 발생한다.
posotion + delay : 손쉬운 방식에 비해 원형 포물선이 아닌 것이다.
position + motion path/ bezier handles : prototyping 에서는 아직 동일한 방식으로는 제공되지 않아, easing functions 을 통해 구현해야 한다.

easing functions 만으로 linear 를 어.떻.게 arc 로 만드나!!?

우선 3번을 통해 easing 으로 구현 가능하다 하니, 느린 속도로 2번 x, y 분리해보자.

아쉽게도 시작과 끝부분이 직선이라 원형 포물선 운동이라고 하기에 무리가 있다

x 축 : 먼저 이동하는 운동 = ease-out
y축 : 뒤따라 이동하는 운동 = ease-in

합하면 마치 포물선 운동처럼 보인다는 것을 알 수 있다. 이제 앞서 설명했던 ease-in, ease-out 을 활용하여 보다 완벽한 포물선 운동을 만들어 보자.

Easing functions graph

조금 친해진 착각이 들때 조금만 더 살펴보도록 하자.
아래 그래프들은 ease-in, ease-out, ease-in-out 그래프 기울기를 점점 구부려 갈수록 느리게 등장하다가 급작스럽게 변하는 운동들로, 마치 easing functions 에 delay 를 더한듯 정리한 cubic bezier 패턴들이다.

cubic bezier curves 를 정리하여 패턴화 한 Easing functions, Credit Andrey Sitnik

아쉽게도 대부분의 prototyping tools 에서는 ease, linear, ease-in, ease-out, ease-in-out 만 지원하여, cubic-bezier 를 통해 해당 수치들을 넣어줘야 한다.

Arc of movement with Easing functions

prototyping tools 로 easing functions 을 활용해 포물선 운동을 만들어 보자!!

Principle for mac + easing functions, 소요시간 약 2분

cubic-bezier 를 패턴화하여 정리한 easing functions 처럼, 인터랙션 디자인은 산재되있는 감각의 논리적인 패턴과 구조화가 매우 중요하다.

Conclusion

Goolge Material motion 을 통해 설명하고자 한 것은, 객체의 변경되는 각 속성에 대칭되는 easing 패턴을 활용하여 natural motion 을 만들 수 있다는 점이다. 이를 응용하면 보다 더 재미난 motion 들이 가능하다.

포물선을 같은 방향으로 더 돌리면 중심점 없이도 원회전이 가능하며,
ease-out-in, ease-in-out 을 대칭으로 활용하면 S 자 곡선 운동도 만들 수 있다.

재환님의 framer module 을 응용하여 만들어 보니, 저 위 그래프들과는 사뭇 다르게 움직인다. 속았나?

animated gif 로 공유되는 motion 들을 보면 간혹 의미없이 ease 혹은 linear 같은 default 그대로 사용하는 경우를 볼 수 있다. 그리고 principle 의 timeline 처럼 제공된 cubic-bezier 를 사용하면서도, easing functions 으로 잘 정리된 패턴들이 존재하는지 알지 못하여 사용하지 못하는 경우들이 있다.

마찬가지로 Goolge Material motion 에 언급된 내용으로 duration time 을 너무 길거나 짧게 사용하기도 한다. motion 의 어색함과 지루함은 곧 product 의 어색함과 지루함이다. 아직도 어떻게 해야 할지 감이 잘 오지 않는다면,

등장 : ease-out-in, 퇴장 : ease-in-out, duration : 300~400ms 으로 해보자.

sine, quad, cubic 등 어울리는 easing function 을 찾아 개성 넘치는 자신만의 easing pattern 으로 만들어 보자.

마치며…

motion 에 관심 많은 분들은 이미 알다시피, Goolge Material motion 을 보면 다 나와있는 이야기들이다. 하지만 쉽게 이해되는 부분이 있는 반면 생각처럼 쉽사리 다가오지 않는 부분이 바로 easing function 이다.

좋은 레퍼런스들을 꾸준히 많이 보고 많이 고민하고 따라 만들면서, 나와 혹은 우리와 잘맞는 easing function 패턴이 무엇인지 찾아보면 분명 많은 도움이 될 것이다.

더불어 영상으로 제작되는 경우와 달리 prototyping 으로 만들어 보면 motion duration 이 길게 느껴지는 경우가 많다. 그럴때는 머릿속 생각보다 짧게 만들자!

앞으로 나눠볼 space, time 이야기와 함께, 보다 다양하게 활용 가능한 easing functions 을 보다 자세하게 다뤄볼 예정이지만 언제가 될지는 미.정.이.다.