SCRIPTShape Layer의 Path를 좀 더 쉽게 애니메이션 시켜주는 AE Curva Script

motionlab
조회수 3431

1. INSTALL

01. http://videohive.net/item/curva-script/8694469에서 16달러에 판매되고 있는데, 다운을 받아 압축을 풀면, 'Curva_regular.jsxbin'과 'Curva_scriptUI.jsxbin' 2개가 있을 겁니다. 다른 스크립트들과 달리 2개로 구성되어 있습니다. 2개를 모두 Adobe > Adobe After Effects CS6 > Support Files > Scripts > ScriptUI Panels 안에 드래그하여 넣으면 됩니다. 사이트에 들어가서 기본적으로 Curva 스크립트가 어떤 일을 하는지 영상도 한번 보기 바랍니다.



02. 사이트에 들어가면, 하단에 Curva 스크립트의 UI에 대한 가이드 이미지가 있습니다. Vertex를 하나 클릭한 다음에 셋업을 하든지, 2개를 클릭하고 OK 버튼을 눌러서 실행을 하면 됩니다. 2개의 Vertex를 선택하면, 그 부분이 바로 애니메이션의 마지막 부분이 됩니다. 원하는 애니메이션 타입을 팝업 메뉴에서 고를 수 있으며, 사용자가 원하는 대로 그래프를 조절하여 커스터 마이징할 수 있습니다. 아래 이미지를 보면 아마도 이해가 잘 되리라 생각됩니다. 하나하나 실제로 만들어 보면서 다시 설명 드리겠습니다.



03. Curva 스크립트는 시리얼을 입력해야만 실행이 되는 스크립트 중 하나입니다. After Effects를 실행한 다음, Curva_ScriptUI_Jsxbin을 선택하면 시리얼을 입력하라는 창이 뜨고, 시리얼 넘버를 입력 한 후에 심플한 Curva 윈도우가 나타납니다. 'ANIMATE!'와 '?' 버튼이 나타납니다.



04. ANIMATE 버튼을 누르면, 아래 그림과 같은 경고 메시지가 나옵니다. 현재 컴포지션 윈도우에서 하나 이상의 Vertex 점을 선택한 다음에 누르라는 메시지입니다.



05. 이번에는 ? 버튼을 눌러봅니다. Help 윈도우가 나오는데, 어떤 식으로 Curve 스크립트를 적용해야 하는지에 대한 가이드를 보여줍니다. 하단 부분에 있는 동그라미 모양의 아이콘을 클릭하면 한 장씩 설명을 볼 수 있습니다.



06. 컴포지션에 있는 Shape Layer가 그대로 보여지며, 회색과 녹색의 Vertex 포인트들이 보여집니다. 현재 회색으로 되어있는 부분이 닫힌 라인이 아니라 열려있습니다. 쉽게 설명 드리면, 열린 문으로 사람들이 들어간다고 생각하면 됩니다. 현재 그림 상으로 보면 'C'라는 단어는 상단의 회색 포인트 부분에서 그려지기 시작할 것입니다. 어떤 포인트든지 하나를 클릭하면 적색으로 표시가 되며, 이 포인트를 First Vertex(시작하는 점)로 설정하려면, 바로 밑에 있는 파란색의 아이콘(Set First Vertex )을 클릭하면 됩니다. 아이콘을 클릭하는 순간 이 부분이 애니메이션의 시작점이 되며, 포인트의 칼라는 회색으로 바뀝니다. 애니메이션의 시작하는 부분을 임의로 사용자가 설정할 수 있다는 말입니다.



07. Vertex 포인트를 2개 선택하면, 하단에 선택한 포인트에 대한 정보가 글로 나타나고, 이 부분이 애니메이션의 엔딩이 됩니다.



08. 애니메이션 타입은 총 5개가 있으며, 사용자가 그래프를 조절하여 원하는 움직임을 만들 수도 있습니다.



09. 애니메이션이 만들어지는 시간은 Duration에 입력하고, From current frame을 체크하면, 타임 마커가 위치한 부분에서 애니메이션의 키프레임이 만들어지기 시작합니다. 해제하고 OK 버튼을 누르면, 0초에서부터 애니메이션이 시작됩니다.



10. Customize 버튼을 누르면, 그래프 에디터 창이 나옵니다. 여기에서 원하는 스타일로 그래프를 조절해 만들면 됩니다.





2. Curva 스크립트 적용하기

01. 이제 간단하게 Curva 스크립트를 적용하는 방법을 알아보도록 하겠습니다. 먼저, 컴포지션 윈도우를 하나 만듭니다.



02. 테스트이기 때문에 간단하게 Type 툴을 이용하여 '2'라는 숫자를 하나 입력합니다.



03. Curva 스크립트는 앞서 말씀 드린 대로 Shape 레이어에 적용이 되기 때문에, 타입 툴로 만든 숫자를 Shape 레이어로 변환시켜 줘야 합니다. 타임라인에서 레이어를 선택하고, 오른쪽 마우스를 클릭하여 Create Shapes from Text 메뉴를 선택합니다. Text 파일에서 Shape을 만들어주는 기능을 가지고 있습니다.



04. 타임라인 윈도우를 확인해보면, Shape 레이어가 만들어지면서 기존의 Type 레이어는 눈이 자동으로 꺼져서 보이지 않게 됩니다.



05. 컴포지션 윈도우를 보면 별다른 변화가 없어 보입니다.



06. 분명히 Shape 레이어로 변환을 했는데, Shape 레이어의 Vertex 포인트가 보이지 않습니다. 이것을 보이게 만들려면 타임라인 윈도우에서 아래 그림처럼 레이어의 속성값 중에서 Path를 선택해야 합니다. 혹시, 그래도 컴포지션 윈도우에서 Shape 레이어의 Path가 보이지 않으면, 컴포지션 윈도우에 있는 Toggle Mask and Shape Path Visibility를 클릭해서 체크해줘야 합니다. 클릭해주면, 화면 상에 Mask나 Shape의 Path를 프리뷰할 수 있게 만들어 줍니다.



07. 이제 원하는 Path의 포인트를 선택하고, ANIMATE 버튼을 클릭해 줍니다.



08. Curva 윈도우가 나타나고, 앞서 설명 드린 대로 이 숫자는 회색 포인트가 있는 윗부분에서 쓰여지게 될 것입니다.



09. 왜 상단 부분이 회색 포인트로 지정되었는지 궁금할 겁니다. 컴포지션 윈도우를 보면 알 수 있는데, First Vertex로 상단 부분이 되어있기 때문입니다.



10. 이제 애니메이션이 끝나게 될 포인트를 지정합니다. 2개를 지정하면 하단에 Vertex 포인트에 대한 정보가 나타납니다.



11. 애니메이션 타임을 Ease-In으로 지정합니다. 애니메이션이 될 Duration 값은 1초로 입력하고, OK 버튼을 클릭합니다.




12. 타임라인을 보면, 애니메이션이 자동으로 만들어졌습니다. 거의 프레임마다 키프레임이 생성된 것을 알 수 있습니다.



13. Play를 시켜보면, 보는 것처럼 상단부분에서 아래쪽으로 써지는 애니메이션을 볼 수 있습니다. 시작점과 끝점을 정하여 Path가 자동으로 애니메이션이 되는 것입니다. 이것을 수작업으로 하려면 하나하나 프레임을 조절해야 하는데, 그런 고생을 이제는 하지 않아도 되니까 정말 편한 스크립트긴 합니다.






3. Curva 스크립트 적용 후에 수정하기

01. 세상에 완벽한 것은 거의 없습니다. Curva 스크립트는 생각만큼 엄청나게 똑똑한 스크립트는 아닙니다. 왜 애니메이션이 끝나는 부분에 Vertex 포인트를 2개 선택할까요? 바로 그것에 맞춰서 포인트들이 하나씩 생겨나고 사라지면서 만들어지는 것이 바로 앞서 봤던 애니메이션입니다. 그래서 보는 것처럼 예쁘지 않게 라인들이 만들어지는 경우가 종종 생깁니다. 그나마 현재 설정한 숫자 2의 Vertex 포인트는 바깥 라인과 안쪽의 라인 Vertex 숫자가 같습니다. 그래서 이 정도로 기본 애니메이션이 나옵니다. 만약, 서체에 따라서 그 Vertex의 숫자가 다르다면 좀 더 이상한 애니메이션이 만들어 질 수도 있습니다.



02. 그래서 항상 애니메이션을 만든 다음에 타임 마커를 천천히 움직이면서 각각의 키프레임에서 어떻게 보여지는 지를 확인해야 합니다.



사실 이 부분이 가장 문제가 되는 프레임입니다. 라인이 완전히 꼬여져서 마치 오류처럼 보일 정도입니다. 아마도 작업을 하다 보면 이런 부분들이 분명히 나올 것입니다.



이런 부분도 상당히 예쁘지 않은 라인이 만들어지는 경우입니다. 반드시 이런 경우에도 Vertex를 수정해 줘야만 합니다. 수정할 때 상당히 조심해야 할 것은 전체 형태가 크게 바뀌어서는 안 된다는 것입니다. 그래서 조절을 해야 하는 Vertex 포인트만 선택을 하여 움직여줘야 합니다.



03. 이제 이런 부분들을 좀 더 자연스럽게 예쁘게 수정해보도록 하겠습니다. 메뉴에서 Convert Vertex Tool을 선택합니다.



04. 각각의 키프레임들 중에서 이상하다고 생각되는 부분에 타임 마커를 위치시키고, 그 부분의 핸들을 조절하여 라인을 자연스럽게 만들어 줍니다.




05. 이때 주의해야 할 점 중에 하나는 바로 전체적인 밸런스입니다. 생겨나는 부분을 만약 부드러운 라인 형태로 만들고자 한다면 전체적으로 비슷한 느낌을 유지할 수 있도록 만들어 줘야 합니다. 현재는 최대한 뾰족한 부분이 생겨나지 않도록 둥근 스타일을 유지하려고 작업을 하고 있는 것입니다.





4. 복잡해 보이는 애니메이션 만들기

01. 이제 모든 수정이 끝났습니다. 이제 좀 더 복잡해 보이는 애니메이션을 만들어 보도록 하겠습니다. 앞서 만든 Shape 레이어를 복제합니다. 복제한 다음 알아보기 쉽게 레이어의 컬러를 오렌지로 선택하여 바꿉니다.



02 그런 다음에 복제한 Shape 레이어의 컬러도 오렌지로 바꿉니다.



03. 복제한 레이어를 3프레임 또는 5프레임 뒤로 이동시킵니다.



04. 이런 방식으로 3개 정도의 레이어를 더 복제하여 컬러를 바꿔줍니다. 그리고 그림에서 보는 것처럼 레이어가 보여지는 시간 차를 조금씩 틀리게 레이어를 배치시킵니다.



05. 애니메이션을 확인해보면, 시간차를 두고 컬러들이 생성되는 복잡해 보이는 애니메이션을 만들 수 있습니다.






5. First Vertex 조절

01. 이번에는 애니메이션이 시작하는 부분을 바꿔보겠습니다. 앞서 언급한 대로 가장 빠르고 편한 방법은 Shape 레이어에서 Set First Vertex 부분을 선택해주는 것입니다. '2' Shape Layer에서 원하는 Vertex 포인트를 First Vertex로 설정해 줍니다.



02. 이번에는 끝부분을 First Vertex로 설정했습니다. ANIMATE 버튼을 클릭합니다.



03. Curva 윈도우를 보면, 끝부분이 회색 포인트로 바뀌었습니다. 바로 이 부분이 애니메이션의 시작이 될 것입니다.



04. 이번에는 Curva 윈도우 안에서 시작점을 변경하는 방법을 알아보겠습니다. 다시 상단 부분에서 애니메이션이 시작되게 하려면 상단의 Vertex를 지정하여 선택합니다. 선택하면 그 부분이 적색으로 바뀝니다. 그런 다음에 밑에 있는 파란색 아이콘을 클릭합니다. 이 아이콘의 이름도 Set First Vertex입니다.



05. 그런데 시작하는 부분이 이상하게 지정되었습니다.



06. 다시 원하는 포인트를 클릭합니다. 그런 다음, 하단의 파란색 아이콘을 다시 누릅니다.



07. 이제 원하는 대로 만들어 졌습니다.





6. 애니메이션 스타일을 Customize 하기

01. 이제 애니메이션의 타입을 원하는 대로 만들어 보도록 하겠습니다. 먼저, 애니메이션 타입 메뉴에서 Ease-Out을 선택합니다. 그런 다음에 OK 버튼을 누릅니다. 방금 한 애니메이션을 A 타입이라고 정하겠습니다.



02. 이번에는 타임라인에서 Shape 레이어를 복제한 다음, 앞서 설정한 것과 동일하게 설정합니다. 그리고 이번에는 Customize 버튼을 클릭합니다.



03. 그래프 에디터가 나오면 그것을 조절하여 그래프의 모양을 임의로 바꿔봅니다. 이 레이어를 B 타입이라고 정합니다.



04. 이제 타임라인을 보면, 같지만 움직임이 다른 A와 B타입의 레이어가 있습니다. 이것들의 움직임이 어떤 차이를 가져오는지 직접 확인해 보도록 하겠습니다.



05. 애니메이션을 확인해 보면, 생성되는 속도가 많이 틀려진 것을 알 수 있습니다. 이처럼 사용자가 원하는 스타일로 생성되거나 소멸되는 속도를 조절할 수도 있습니다.




요즘 들어 부쩍 After Effects의 스크립트 또는 플러그인들이 많이 쏟아지고 있습니다. 그만큼 기술의 발전 속도가 빨라진다는 것일 겁니다. 우리가 따라가기 힘들 정도로 많은 것들이 좋아지고 있습니다. 하지만, 좋아지는 만큼 배워야 될 것도 많고, 그만큼 다른 사람들과 차별화된 작업을 하려면 더 노력을 해야 된다는 말도 됩니다. 이럴 때일수록, 컨셉적인 것과 디자인적인 것, 그리고 자신만의 스타일을 찾는 노력이 더 중요할 것입니다.

ⓒ Since 2004


SERVICE

02-517-0985
Mon - Fri AM 10:00 - 21:00
Red-Day Off

BANK

Shinhan BANK 110-362-296920
Motionlab.

ARTWORKS

Seoul, Korea  ㅣ  사업자등록번호 : 211-90-90651   상호명 : 모션랩학원    대표자 : 이병현   개인정보관리 : 김진희   ㅣ  10-11, Sapyeong-daero 55-gil, Seocho-gu, Seoul, Republic of Korea  통신판매신고번호 : 제 2020-서울서초-4008호