EXTENSION키프레임 애니메이션을 편하게 만들어주는 Kease Extension

motionlab
조회수 2936

저자 :: 이병현 실장  motionlab@kakao.com 

키프레임 애니메이션 시, 가장 시간을 많이 소요하는 부분이 바로 Value Graph입니다. 물론, 디테일한 애니메이션을 위해서 반드시 필요한 과정입니다. 하지만, 반복적인 작업이나 비슷한 스타일의 작업을 할 때마다 그래프를 만진다는 것은 시간 낭비일수도 있습니다. 지금 소개해드릴 기능들이 예전부터 있긴 했습니다. 바로 Value Graph 곡선에 관한 Preset 또는 내가 만든 그래프를 저장하고, 나중에 재사용하는 기능입니다. Free Version과 Pro Version이 있습니다. 원래 Pro Version은 25달러였지만, 현재는 무료로 배포하고 있습니다. Kease Extension을 소개하게 된 이유 중에 하나가 무료로 배포되었기 때문이기도 합니다.


1. Download & Install


01. https://www.davideboscolo.com/product/kease-extension-for-after-effects/ 사이트에 들어가서 다운을 받으면 됩니다. 사이트의 하단 부분을 보면, Pro Version이 있습니다. 여기에 메일 주소를 입력하고 버튼을 누르면, 다운로드가 됩니다. 시리얼도 그림처럼 화면에 나타납니다.


02. Extension이기 때문에, ZXP 포맷으로 다운로드가 이루어집니다. 더블 클릭하여 인스톨해주면, 자동으로 설치됩니다. 그런 다음에 After Effects를 실행하여 설치가 제대로 되었는지 확인하면 되고, 총 3개가 설치됩니다. 여기에서 Kease를 선택합니다.


03. 현재 라이선스 등록이 안되어 있는 상태여서 아래와 같은 창이 나올 것입니다. Unlock Pro Features를 클릭하고, Insert a valid License Key를 클릭합니다.


04. KeaseProFree를 입력하면, 설치가 완료됩니다.



2. Kease Interface


01. Kease의 인터페이스를 간단하게 살펴보겠습니다. 하단에 있는 그래프 모양들은 Value Graph가 미리 설정된 Preset들입니다. 커서를 살짝 위에 가져다 놓으면, 상단의 작은 막대가 해당 Preset의 모션을 시각적으로 보여줍니다. 기존의 다른 Extension이나 Script에서는 흔하게 볼 수 없었던 인터페이스로, 아주 칭찬하고 싶습니다. 동시에 하단에는 Preset의 이름이 보입니다.



02. 상단에 5개의 메뉴가 있습니다. 사실 처음에는 당황스럽습니다. 커서를 가져다 위에 놓으면, 그림처럼 버튼에 대한 설명과 단축 키도 나옵니다. 뒤에서 하나하나 설명 드리겠습니다.



03. 맨 마지막에 있는 + 버튼은 라이브러리 Preset으로 전환해주는 버튼입니다. 클릭하면, 좀 더 복잡한 스타일의 Preset들이 보입니다.



3. Kease 적용하기


01. 간단한 도형을 하나 만들어서 포지션 애니메이션을 만들었습니다. 총 4개의 키프레임을 만들고 Value Graph를 확인해보면, 그림처럼 보일 것입니다.


02. Preset을 적용하는 방법은 간단합니다. 키프레임을 모두 선택한 다음에 Preset을 클릭합니다.


03. 움직임에 어떻게 적용되었는지는 Composition Window의 Motion Path를 보면 바로 확인이 가능합니다. Expression을 사용하지 않고, Value Graph의 모양이 변화되는 방식이기 때문에, 차후에라도 사용자가 수정을 편하게 할 수 있는 것이 Kease의 강점입니다.


04. 전체 키프레임이 아닌, 부분적으로 적용하고 싶다면, 원하는 부분의 키프레임만 선택을 한 다음에 Preset을 적용하면 됩니다.


05. 사실, 작업을 하다 보면, 전체 키프레임에 적용하는 것보다는 부분적으로 키프레임에 적용하는 경우가 더 많습니다. 여러 개의 키프레임을 만든 후에 원하는 부분의 키프레임들을 선택하고, 여러 개의 Preset들을 사용해봅니다.


06. + 버튼을 눌러서 다른 라이브러리로 넘어가겠습니다. 처음에 나왔던 Preset들은 선택한 키프레임들을 유지하면서 Value Graph 곡선에 영향을 주는 것이었습니다. 하지만, 아래 그림의 Preset들은 선택한 키프레임들보다 더 많은 키프레임을 생성해줍니다. 그렇게 될 수밖에 없는 이유는 움직임들이 일반적이지 않기 때문입니다. 그림처럼 4개의 키프레임을 만든 다음에 2개만 선택하고, Overshot 1을 클릭합니다.


07. Overshot은 원래 멈춰야 할 부분에서 오브제가 멈추지 않고 약간 벗어났다가 다시 원래의 자리로 오는 Motion을 말합니다. 그러기 위해서는 키프레임이 더 필요합니다. 그래서 키프레임이 하나 더 생성되었습니다.


08. 애니메이션으로 확인해보겠습니다.


09. 이번에는 애니메이션이 시작하는 부분과 끝나는 부분을 가이드라인으로 표시를 한 다음에 보여드리겠습니다. 2개의 키프레임으로 이루어진 애니메이션을 하나 만듭니다.


10. 키프레임을 선택한 다음에 Anticipation 3를 클릭합니다. Anticipation은 오브제가 움직일 때, 예비 동작을 갖는 것을 말합니다. 다시 말해, 어떤 물체가 움직이기 전에 움직임의 반대 방향으로 약간 움직인 후에 움직임의 방향으로 움직이는 것을 말합니다.


11. 이번에는 Overshot x3을 눌러봅니다. 끝나는 부분에서 약간 벗어났다가 원래의 자리로 움직이는 Motion이 만들어질 것입니다. 애니메이션해서 확인해봅니다.



4. Preset 활용하기


01. 물체가 위에서 아래로 떨어진다고 가정하고, 간단한 애니메이션을 만들어보겠습니다. 키프레임은 2개만 있어도 됩니다. 2개의 키프레임을 선택한 다음, Bouncy Preset을 클릭하여 적용합니다. 키프레임들이 몇 개 더 생성되어서 그림처럼 약간 복잡해 보이는 Value Graph를 확인할 수 있습니다.



02. Bouncy는 통통 튀는 듯한 움직임을 주고 싶을 때, 사용하는 Preset입니다. 애니메이션을 시켜보면, 공이 바닥에 한두 번 통통 튀다가 멈추는 것을 확인할 수 있습니다.


03. 이번에는 포지션과 스케일 값을 동시에 애니메이션을 시켜보겠습니다. 그림과 같이 여러 개의 키프레임들이 만들어졌습니다. 원하는 키프레임들을 선택한 다음, Preset을 적용해주면, 그림처럼 원하는 구간만 Motion Path가 달라진 것을 확인할 수 있습니다.


04. 이번에는 Shape Layer의 Path 애니메이션에 적용해보겠습니다. 그림처럼 직사각형 박스를 하나 만듭니다.


05. 간단하게 직사각형의 Path가 삼각형 모양으로 바뀌는 Path 애니메이션을 만들어보았습니다.


06. 키프레임을 선택한 다음에 Anticipation 3를 선택하여 적용합니다. 중간에 키프레임이 하나 더 생성되었습니다.


07. 애니메이션을 만들어보면, 좀 더 자연스러운 움직임을 볼 수 있습니다.



5. 메뉴들


01. 상단의 메뉴들을 살펴보겠습니다. 왼쪽 맨 처음에 나오는 C라는 메뉴는 Copy입니다. 다른 키와 조합하여 클릭했을 때, 어떤 효과가 나타나는지 커서를 올려놓으면, 설명 글이 나옵니다. 키프레임을 선택한 상태에서 그냥 C 버튼을 클릭하면, Copy가 됩니다. 하단을 확인하면, 키프레임의 정보가 나타나는데, 2개의 키프레임을 Copy했다는 표시로 숫자 2가 표시됩니다.


02. 같은 키프레임 개수를 가지고 있는 흰색 박스의 키프레임에 Paste를 해보겠습니다. V라는 메뉴는 Value 값을 붙이기 해줍니다. Ctrl을 누른 상태에서 V를 클릭하면, 키프레임에서 조절한 핸들 값까지도 붙이기가 됩니다. 흰색 박스 Layer의 키프레임을 선택한 다음, 그냥 V 버튼을 눌러봅니다. 그러면, 시작하는 프레임과 끝나는 프레임만 비슷할 뿐 Motion Path는 완전히 다르게 되었습니다.


03. 이번에는 흰색 박스 Layer의 키프레임을 다시 선택하고, Ctrl 키를 누른 상태에서 V 버튼을 눌러보겠습니다. 완벽하게 빨간 원 Layer의 키프레임을 그대로 가져온 상태가 되었습니다.


04. 이번에는 Value Graph를 움직여서 그림처럼 움직임의 속도가 다르게 만든 상태에서 키프레임을 선택하고, Copy를 합니다.


05. Value Graph 곡선 값까지 그대로 가져오려면, E 버튼을 클릭해야 합니다. Ease 버튼이라고 합니다. 다른 키와의 조합은 그림에 있는 것처럼 나와 있습니다. 흰색 박스 Layer의 키프레임을 선택합니다. Shift와 Ctrl을 함께 누른 상태에서 E 버튼을 누르면, 그래프의 세밀한 값까지도 붙이기가 됩니다.


06. 이번에는 키프레임들을 그대로 복제하는 것과 거울처럼 반대로 복제하는 방법을 알려드리겠습니다.


07. 맨 앞의 C 버튼은 선택한 키프레임의 복제 기능도 있지만, Ctrl을 누른 상태에서 클릭하면, 복제가 됩니다. Alt를 누른 상태에서 클릭하면, 키프레임들이 반전된 다음에 복제가 됩니다. 키프레임들을 선택합니다.


08. 타임 마커를 좀 더 뒤로 이동한 다음에 Ctrl 키를 누른 상태에서 C 버튼을 누릅니다. 현재 C 버튼이 숫자 2로 표기되어 있습니다. 그대로 선택한 키프레임들을 복제했습니다.


09. Alt 키를 누른 상태에서 C 버튼을 누르면, 지금처럼 선택한 키프레임들이 반전되면서 복제가 됩니다.



6. 나만의 Preset 만들기


01. 이번에는 나만의 Preset을 만드는 방법을 알려드리겠습니다. 기존의 Preset들을 자세히 보면, 수치 값이 나와있습니다. 이 수치 값들을 여러 개의 키프레임들의 수치 값이 아닙니다. 키프레임 2개 정도의 수치 값입니다. 그래서 나만의 Preset을 만들 때는 2개 정도의 키프레임만 선택한 다음에 만들어야 합니다.


02. 키프레임을 2개 정도만 선택한 다음에 Value Graph를 그림처럼 약간 변형시켜보겠습니다. 이제 변형시킨 키프레임만 선택한 다음, C 버튼 위에 마우스를 갖다 대고, 마우스 오른쪽 버튼을 누르면 그림처럼 Save as Preset 메뉴가 나옵니다. Save as Preset을 선택하면, 새로운 Preset이 만들어집니다.


03. 이제 새로 만든 Preset을 적용해보겠습니다. 이번에는 다른 키프레임을 선택한 다음에 방금 만든 Preset 버튼을 눌러 적용해보겠습니다.


물론, 이와 유사한 Extension도 있지만, 무료로 이 정도 기능을 제공하는 것은 없기에 소개해드렸습니다. 잘 사용하면, 복잡한 애니메이션들도 간단하게 만들 수 있는 기능이라서 한번 해보기 바랍니다.