SCRIPTShape Layer Stroke 애니메이션의 구원자 Ouroboros 2 Ouro

motionlab
조회수 4925

Ouroboros를 한마디로 말하자면, 복잡한 Shape Layer Stoke 애니메이션을 간단하게 만들어 주는 역할을 하는 스크립트라고 할 수 있습니다. Shape Layer 기능이 After Effects에 들어 온지는 꽤 시간이 흘렀습니다. 


Vector 기반의 기존에 나와있는 많은 작업물들을 살펴보면, 거의 대부분이 Shape Layer의 Path Stroke을 이용한 애니메이션이 압도적으로 많은 것을 확인할 수 있습니다. 그 이유는 Fill 기능은 단순하고, 직관적이어서 그리 많이 사용하지 않기 때문입니다. Illustrator에서 제작된 Vector 파일이나 Type을 이용한 애니메이션, 또는 디자인 요소로 사용되는 도형들까지 다양한 용도로 사용할 수 있는 Shape Layer는 사이즈에 제한이 없는 Vector이기에 얼마든지 제작할 수 있습니다. 


Shape Layer의 활용도가 점점 많아지면서 그에 따른 스크립트들도 하나 둘씩 늘어나기 시작했습니다. 그 중에서 Ouroboros라는 스크립트는 초기에 무료로 나와서 약간의 버그가 있다가 이번에 Ver 2가 업그레이드되어 새롭게 돌아왔습니다.



※ Ouroboros: 자기 꼬리를 입에 문 모습으로 우주를 휘감고 있다는 뱀. 무한을 나타내는 일종의 상징적 존재로, 고대 그리스의 지도에는 세계를 둘러싼 대해(大海)에 우로보로스가 그려지기도 했다. 조디악(황도대: 黃道帶)의 12궁도에서도 12궁 주위를 우로보로스가 둘러싸고 있다. 기독교 그노시스 파에서는 세계를 삼켜버리는 존재의 상징으로써 부적 등에 이 모습을 그려 넣었고, 헤르메스 철학에서는 이 세상을 구성하는 근원적 물질의 상징으로 우로보로스를 이용했다.





1. Ouroboros 2


01. 작업 전에 Ouroboros 스크립트를 C > Program Files > Adobe > Adobe After Effects CS6 > Support Files > Scripts > ScriptUI Panels 안에 넣으면 됩니다. 그런 다음, After Effects를 실행한 후, Edit > Preferences에 가서 Allow Scripts to Write Files and Access Network을 체크하면 됩니다. 약간 복잡하다고 생각할 수도 있지만, 한두 번 해보면 익숙해질 것입니다. 앞으로 영상 작업 시 이렇게 스크립트를 활용하는 것들이 점점 늘어날 것입니다. 이제 After Effects의 Window 메뉴 하단부분을 확인해보고, Ouroboros.jsxbin을 선택해주면 됩니다.



Ouroboros는 크게 3가지 파트로 나눠져 있는데, Create, Modules, Functions입니다. 기본적인 라인이나 박스, 원, 삼각형 등의 Shape Layer를 만들고, 그것을 Ouroboros로 만들어 주는 것이 Create입니다. 그리고 Ouroboros로 만든 다음에 애니메이션할 것들, 즉 속성들을 하나하나 추가하거나 삭제할 수 있는 각각의 파트로 나누어 놓은 것이 바로 Modules입니다. Color부터 시작해서 Dots까지 총 9개의 버튼이 있습니다. Ouroboros 레이어를 선택한 다음 버튼을 클릭하면, 버튼의 속성값을 애니메이션시킬 수 있도록 이펙트 창에 활성화가 됩니다. 마지막에 있는 Functions는 Ouroboros 레이어의 전체적인 모양새와 기능을 제어할 수 있는 부분입니다.



02. Create에 있는 원형 버튼을 클릭하면 대화상자가 나옵니다. 원하는 사이즈 값을 입력하고 OK를 누릅니다.



03. 그림과 같이 원형 링이 만들어 졌습니다. 굳이 이렇게 만들기 싫다면, 평상시처럼 Shape Layer에 있는 툴로 만들어도 상관은 없고, 펜툴로 그려도 상관없습니다. 참고로 Ouroboros의 Create에 있는 도형들은 모두 Fill 기능보다는 Stroke 애니메이션에 초점이 맞춰진 것들이라서 생성되는 도형들은 모두 Stroke들만 보이게 됩니다.



04. Shape Layer를 Ouroboros 레이어로 만드는 것은 어렵지 않습니다. 방금 만든 레이어를 선택하고, Ouroboros 버튼만 눌러주면 됩니다. 그러면, Ouroboros 레이어가 곧바로 생성됩니다.



05. 타임라인을 확인해보겠습니다. Ouroboros 레이어가 새롭게 생성되었고, 기존의 Shape Layer는 자동으로 눈이 꺼진 상태가 됩니다. 기존 레이어의 이름 뒤에 Ouroboros가 붙은 새로운 레이어가 만들어진 것을 확인하기 바랍니다. 기존 레이어 이름을 한글로 바꾸고 작업해도 됩니다.



06. Ouroboros 스크립트는 CS6부터 최근에 나온 CC 2017 버전까지 폭넓게 사용할 수 있습니다. 다만, CS6 버전에서는 아래 그림처럼 아이콘에 영문 철자가 안 보이는 경우가 있으니 알아두기 바랍니다. Width 옆의 M은 Maintain Width의 약자이며, Speed 옆의 K는 Add Keyframed Speed의 약자입니다. 물론, 기능은 CS6에서도 동일하게 적용됩니다. Ouroboros 레이어의 이펙트 창을 보면, CC 버전에서는 발견하지 못한 것이 CS6에서는 보여집니다. Missing이라는 단어가 Ouroboros 이름 옆에 나오는데, 크게 상관 안해도 됩니다. 기능상의 차이는 없습니다. After Effects의 버전에 따라서 스크립트 언어들이 약간씩 차이가 있는데, 그것에서 비롯된 것이라고 합니다. 현재 이펙트 창에는 아무것도 보이지 않으며, Ouroboros 패널에서 Modules를 추가하라고만 적혀있습니다.



07. 이제 Modules를 추가해 보겠습니다. 가장 기본적인 Color를 추가해보겠습니다. Ouroboros 레이어를 선택한 다음, Color버튼을 클릭합니다.



08. 클릭하는 순간, 그림과 같이 3개의 Color가 추가되었습니다. 컴포지션 윈도우를 보면, 3개의 컬러가 적용된 원형 링을 확인할 수 있습니다. 사용자가 컨트롤하기 편하도록 레이어에 있는 컬러 속성을 익스프레션으로 이펙트와 연결시켜 놓은 것입니다. Ouroboros의 모든 기능들을 이런 식으로 모두 연결이 되어있다고 생각하면 됩니다.



09. 타임라인 윈도우에서도 똑같이 확인할 수 있습니다.



10. 만약, 3개의 컬러로는 부족하다고 생각되면 컬러를 추가하면 됩니다. Color 버튼 옆에 +버튼을 클릭하면, 이펙트 창에 추가되는 것을 확인할 수 있습니다. 하지만, 그렇다고 Ouroboros 레이어에 컬러가 곧바로 추가되는 것은 아닙니다. Ouroboros 버튼 옆의 +버튼도 같이 클릭하여 이펙트 창의 Color 숫자와 같게 맞춰주기만 하면 됩니다. Stroke Ouroboros의 개수와 Color의 개수는 항상 같아야 효과가 나옵니다.



11. 컴포지션 윈도우를 확인해보면, 간단하게 5개의 컬러가 보이는 원형 링을 볼 수 있습니다.




2. Modules 추가


01. 이제 간단하게 다른 Modules들을 몇 개 추가해 보겠습니다. Stroke에 두께를 조절할 수 있는 Width 버튼을 클릭합니다. 물론, Ouroboros 레이어의 레이어가 선택된 상태에서 클릭해야 합니다. 선택되지 않은 상태에서 클릭을 하면, 경고창이 나옵니다.



02. Width 버튼을 클릭하는 순간, Width를 제외한 나머지 Modules도 이펙트 창에 자동으로 추가되는 것을 알 수 있습니다. 물론, 추가는 되었지만, 비활성(선택할 수 없고, 수치값을 입력할 수 없는 상태)된 상태로 보여집니다. 만약, 여기에서 다른 버튼들을 클릭한다면 어떻게 되겠습니까? 현재 보는 것처럼 다른 Modules를 활성화시키려면 Opacity, Trim, Delay, Speed, Dot 버튼을 클릭해주면 됩니다.



03. Ouroboros 레이어로 왜 만들어야 하며, 뭐가 좋은지에 대해서 묻는 분들이 간혹 있습니다. 바로 사용자가 컨트롤하기 편하기 때문입니다. 추가한 Width 값을 140으로 입력하여 Stroke의 두께감을 줍니다.



04. Opacity 버튼을 클릭하면 이펙트 창이 활성화됩니다. Opacity도 조절해보기 바랍니다.



05. 이번에는 Trim 버튼을 클릭하여 활성화시킵니다. Trim의 Start 값을 조절하여 간단한 애니메이션도 만들어 보기 바랍니다. Ouroboros의 원리에 대해 간략하게 말씀 드리겠습니다. 현재 5개의 컬러가 있다는 것은 5개의 Path가 있다는 것입니다. 각각의 Path에 Trim Path가 적용되어 있고, Start와 End, Offset 값을 이용하여 현재 눈으로 보여지는 일부분만 Stroke이 적용된 상태입니다. 물론, 각 Path에 적용된 Trim Path의 Start, End, Offset은 익스프레션으로 되어 있습니다. 그렇기 때문에, Ouroboros 레이어의 이펙트 창에 있는 Trim으로 애니메이션을 만들려고 하면 보는 것처럼 각각의 레이어에 있는 Trim Path기능이 한꺼번에 컨트롤되어져 각각의 컬러가 동시에 적용되는 것을 알 수 있습니다.



3. Illustrator와 Ouroboros Path


01. Shape Layer를 Ouroboros 레이어로 만들면, 앞서 자동으로 오리지널 Shape Layer의 눈이 꺼진다고 했습니다. 그리고 또 한가지의 변화가 있습니다. Ouroboros 레이어가 자동으로 Shape Layer에 Parent됩니다. 이 말은 Ouroboros 레이어가 여러 가지로 오리지널 Shape Layer의 영향을 받는다는 뜻입니다.




02. Ouroboros 레이어를 보면, 여러 가지 속성들이 오리지널 Shape Layer와 연결된 것을 확인할 수 있습니다.



03. 이제 간단하게 Shape Layer의 Path가 어떻게 Ouroboros 레이어의 Path에 영향을 주는지 테스트해보겠습니다. 간단한 라인을 만듭니다. 그런 다음, 레이어를 선택해서 Ouroboros를 클릭하여 Ouroboros 레이어로 만들어 줍니다.



04. 이제 이 라인을 Illustrator에서 Copy한 Path로 교체를 해보겠습니다. Illustrator에서 원하는 숫자를 입력해서 Path를 Copy합니다.



05. Copy한 Path를 After Effects에서 맨 처음에 만들었던 Shape Layer의 Path에 Paste합니다.



06. 앞서 만들었던 라인 모양의 Path가 숫자로 바뀌는 것을 확인할 수 있습니다. 이것으로 확인된 것은 Ouroboros 레이어의 Path가 오리지널 Shape Layer Path의 영향을 받는다는 것을 알 수 있습니다.



07. 현재는 라인의 두께가 너무 두꺼워 보여 Ouroboros 레이어를 선택하고, Width를 추가하여 Stroke의 두께를 조절합니다.



08. 이번에는 사이즈를 키워보겠습니다. 이것 또한 오리지널 Shape Layer의 Scale을 조절하면 됩니다. Ouroboros 레이어의 Scale을 보면, 익스프레션이 연결된 빨간색으로 표시되어 보일 것입니다. 다시 말해서 사이즈를 조절할 수 없습니다.





4. Dot, Speed


01. 이번에는 Ouroboros 레이어에 Dot를 추가해보겠습니다. Ouroboros 레이어를 선택합니다.



02. 그런 다음, Dots 버튼을 클릭하여 Dots를 추가합니다. 추가하면, 보는 것처럼 라인의 끝과 중간중간에 Dot가 추가되는 것을 볼 수 있습니다.



03. Dot Start와 End 값에 있는 Position을 조절하면, 원들을 원하는 방향으로 이동시킬 수 있으며, Size도 바꿀 수 있습니다.



04. Length를 조절하여 원을 늘려서 라인처럼 만들어 줄 수도 있습니다.



05. 이번에는 Ouroboros 레이어에 Trim을 추가하여 애니메이션을 시켜보겠습니다.



06. Start와 End 값이 아닌, Offset으로 애니메이션을 간단하게 만들 수 있습니다.



07. 여기에 Dot를 추가해 보겠습니다. Dots 버튼을 클릭하여 이펙트 창에서 활성화시킵니다.


08. Dot Start와 End 속성들을 조절하여 원하는 모양으로 만들어줍니다.



09. 여기에 Speed도 추가해봅니다. Speed는 버튼을 클릭하는 순간 기본값이 100으로 설정됩니다. Speed를 추가하면 자동으로 컬러의 라인들이 움직입니다.



10. Speed 버튼 옆에 있는 Add Keyframed Speed 버튼을 누르면 키 프레임이 만들어집니다.



11. Offest과 Speed 값을 설정하여 빠르다가 느려지거나 느리다가 빨라지는 애니메이션을 간단하게 만들 수 있습니다. 물론, 하나만 가지고 만들어도 상관없습니다.




5. Matte 활용하기


01. 이번에는 Matte 기능을 이용해서 애니메이션을 만들어보겠습니다. 라인을 하나 만들고, Ouroboros 레이어로 만듭니다.



02. Ouroboros 레이어를 선택하고, Set Matte 버튼을 클릭합니다.



03. 별도의 이펙트가 추가됩니다. Set Matte 이펙트는 After Effects가 가지고 있는 기본 이펙트입니다.



04. 타임라인 윈도우를 보면, 자동으로 오리지널 Shape Layer에 Trim Paths for Ouroboros Set Matte가 만들어집니다. 보면 알겠지만, Trim Path입니다. 이름만 바꿔놓은 것입니다.



05. End 값을 보는 것처럼 키프레임을 만들어서 애니메이션을 만듭니다. Start 속성으로 애니메이션을 시켜도 상관없습니다.



06. 애니메이션을 시켜봅니다.





6. Random 활용하기


01. Modules 옆을 보면 X 모양의 버튼이 있습니다. 이것은 만든 Modules을 삭제할 때 사용합니다. 그 옆에 마치 주사위같이 생긴 버튼이 있습니다. 이것이 바로 Random 버튼입니다. 아이콘을 만든 아이디어가 참 신선한 것 같습니다. Speed 옆에 있는 Random 버튼을 클릭합니다.



02. Speed Random이라는 옵션이 활성화되었습니다. 80%로 입력합니다.



03. 애니메이션을 시켜보면, 각각의 컬러 라인들의 속도가 다르게 움직이는 것을 볼 수 있습니다.



04. 여기에 Width 버튼을 클릭하여 추가하고, Width Random도 클릭하여 추가해봅니다.



05. 컴포지션 윈도우를 확인해보면, 이제는 컬러 라인의 사이즈도 각각인 모습으로 바뀐 것을 알 수 있습니다.



06. 만약 여기에 Dots까지 추가시키면 그림과 같이 됩니다.





7. Link


01. 이번에는 Link 버튼을 클릭해 봅니다. Link Start와 Link End 옵션이 활성화되었고, 2개 모두 체크가 된 상태입니다.



02. 애니메이션을 해보면, 앞서 애니메이션을 한 것과 틀린 점을 발견할 수 있을 것입니다. Link를 하지 않으면, 각각의 컬러 라인이 원래 있는 사이즈의 변화가 없이 보여집니다. Link를 체크하면, 보는 것처럼 각각의 컬러 라인이 작아진 상태에서 점점 늘어나는 애니메이션이 만들어집니다.




8. Function


01. 하단 부분에 있는 버튼들은 Ouroboros 레이어 전체에 영향을 주는 Function 기능을 합니다. 하나씩 알아보겠습니다.



02. Switch Shape Direction 버튼입니다. 클릭하면 컬러 라인의 방향이 바뀝니다.



03. Line Cap을 바꿔주는 역할을 합니다. 클릭을 하면 3가지 모드로 계속 바뀝니다. 원래 Stroke 속성이 가지고 있는 기능 중 하나입니다. 그 옆에 있는 버튼은 Line Join입니다. 라인이 꺾인 부분이 어떤 모양으로 표현될지를 결정하는 버튼입니다.




04. Select All Ouroboros Layers는 타임라인에 이런 저런 레이어들이 많았을 경우, Ouroboros 레이어들만 자동으로 선택해 줍니다.



05. Ouroboros 레이어를 선택한 다음, Show Ouroboros Stroke 버튼을 클릭하면, Stroke Ouroboros가 그림처럼 보입니다.



06. Change Random Seed 버튼을 클릭하면, Random Seed 부분이 자동으로 변합니다.



07. 맨 마지막에 있는 About Ouroboros 버튼을 클릭하면, 튜토리얼이나 웹사이트, 그리고 다른 스크립트들을 소개하는 링크 버튼이 있는 창이 나옵니다.



Ouroboros를 사용을 해보니, 상당히 편리하고 작업시간을 효율적으로 활용할 수 있는 스크립트라 소개해드렸습니다. 다양한 애니메이션에 활용하면, 짧은 작업시간으로 효과적인 결과물을 얻는 데 많은 도움이 될 것입니다. 추후에 Ouroboros를 응용한 애니메이션 제작방법도 소개해드리겠습니다.