Interaction & Motion Design Implementation Using Spline Interpolation with DX10 Seattle (1)

Interaction & Motion Design Implementation Using Spline Interpolation

스플라인 보간법을 활용한 자연스런 Interaction & Motion Design 구현 방안

최근 UX/UI 에서 중요시되고 있는 Interaction & Motion Design의 핵심은 각각의 화면객체들이 물 흐르듯이 상호 작용하며 자연스럽게 표현 되는 것이다.

구글의 Material Design 철학 역시 단어 뜻대로 실제 사물의 움직임을 느끼도록 표현한것이기에 자연스러움이 가장 중요한 포인트라 할 수 있을것이다.

개발자와 디자이너가 이를 구현하기 위해서는 객체들의 애니메이션 작동시간을 유효 적절하게 설정해 주어야 하는데 이러한 작업은 간단한 작업이 아니며 반복적인 시행착오를 겪어야만 원하는 결과에 근접할 수 있어 많은 시간과 노력이 소모된다.

자연스러움이란것은 주관적인 관점이지만 실제생활에서 일어나는 물리 법칙을 적용한다면 인간이 느끼는 자연스러움에 근접하게 표현이 가능할 것이다.

가령 화면스크린이 바닥으로 이동하는것을 애니메이션으로 구현할 때 단순 위치이동이 아닌 자유낙하의 중력가속도를 적용하거나 또는 농구공 처럼 바닥에 몇번 튕겨지는 효과를 내기위해 탄성함수를 적용하면 자연스러운 효과를 낼 수있을 것이다.

델파이 FireMonkey의 FloatAnimation은 튕겨지는 효과를 내는 Bounce 옵션등 몇가지 Interpolation 속성을 제공하고 있다. 하지만 이러한 기본속성만으로 여러 객체들간의 상호 작용을 구현하는것은 어려움과 한계가 있을수 밖에 없다.

단일객체의 경우만 보더라도 화면스크린의 위치이동을 애니메이션으로 구현하였을때 시간과 거리가 일정한 선형함수로 위치이동을 하게 되면 부자연스러워 보이는 이유가 실제생활에서는 시간과 거리가 정확히 비례하는 등속운동은 거의 존재하지 않기 때문이다.

가령 창문을 여닫을때도 속도는 일정하지 않으며 이를 시간과 위치의 함수로 표현하면 직선이 아닌 어떠한 곡선으로 표현 될 것이다.

즉, 애니메이션이란것은 결국 시간과 위치(또는 어떠한 다른 속성)의 변화를 직선이 아닌 곡선으로 표현해주는것이 자연스러움에 근접한다고 할 수 있겠다.

곡선함수를 수식으로 표현하는 방식은 여러가지가 있지만 위의 예를든 자유낙하와 같이 단일 함수로 표현되는 경우와 임의의 곡선으로 표현되는 경우가 있을것이다.

디자이너가 애니메이션의 시간비율을 원하는 임의의 곡선으로 표현하고 이를 수치화 하여 그대로 애니메이션 타임에 적용할 수 있다면 작업의 생산성은 매우 높을것임은 자명한 일이다.

포토샵에서도 곡선의 표현을 이용하여 색상정보를 변형하는데 사용되고 있으며 작업자는 몇개의 포인트를 설정하고 이 포인트를 지나는 곡선을 원하는대로 그려 낼수 있다.

바로 이 몇개의 포인트를 지나는 곡선을 그리는 방법중의 하나가 수치해석에서 많이 활용 되는 스플라인 보간법(Spline Interpolation) 이다.

스플라인 보간법은 공학을 비롯한 여러가지 분야에서 다양한 해석을 하는데 많이 사용 되고 있다. (이동경로 예측, 빅데이터 분석, 통계 씨뮬레이션, 기상예보, 금융, 영상복원 등 )
작업자가 조건에 맞게 특정 포인트들을 지정하면 스플라인 보간법으로 그 포인트들을 지나는 곡선을 그려낼 수 있고 그 곡선을 따르는 나머지 결과값들을 모두 알아 낼 수 있다.

실제 구현해 본 결과 포토샵의 이미지 설정 곡선과 거의 일치하게 나타났으며 이를 통해 포토샵 역식 스플라인 보간법으로 곡선을 표현한것으로 유추된다.
참고로 보간법으로 계산된 결과값을 화면에 곡선으로 표현하기 위해 Delphi Firemonkey에서 제공하는 TPath를 사용하면 아주 빠른 속도로 부드러운 곡선을 그려 낼 수 있다.

이제 다음단계는 곡선으로 얻어진 순차적인 데이터를 애니메이션에 타임에 적용시키면 된다. 복수 객체의 Interaction을 위해서는 복수의 곡선으로 나타내면 되며 이럴때 곡선의 교차점이 정확하게 표현되므로 복수객체의 전환(화면전환등)점이 아주 쉽게 나타내 질 수 있다.