먼저, 이렇게 멋진 스크립트를 무료로 공개해 준 Voxyde 디자이너에게 감사 드립니다. 본인의 작업을 위해 만든 스크립트를 이렇게 공개하기가 쉽지 않았을 텐데 말입니다. 일단, Utility Box는 다양한 스타일의 여러가지 스크립트들이 혼합되어 있습니다. 버전이 Utility_Box_v1.5로 업그레이드 되면서 그 전보다 훨씬 더 인터페이스가 깔끔해지고 직관적으로 바뀌었습니다. Utility_Box_v1.0 버전은 하나의 팔레트에서 여러가지 기능들을 보여줌으로써 조금 산만한 부분이 있었는데, 버전 업되면서 각각의 기능들을 총 8개의 카테고리로 나눠 아이콘화 시켰습니다. 약간 아쉬운(?) 부분이 있다면 제대로 된 튜토리얼이 없습니다. 이제 이것의 이름을 왜 Utility Box로 지었는지 확인해 보도록 하겠습니다. 

1. Download & Install 
http://www.voxyde.com/content/utility-box/ 에 들어가서 DOWNLOAD 버튼을 눌러 다운 받은 다음에 C:/Program Files/Adobe/Adobe After Effects CS6/Support Files/Scripts/ScriptUI Panels 안에 스크립트를 넣어주기만 하면 됩니다. 그런 다음에 After Effects를 열고 Window 메뉴의 하단을 보면, Utility-box가 보일 것입니다. 사이트에 들어가보면, 그 외에도 다양한 튜토리얼들이 있으니 참고하기 바랍니다.

Utility-box를 열면, 깔끔하게 총 8개의 아이콘 메뉴로 정리되어 있습니다. 아이콘의 모양을 보면, 어떤 기능들을 하는지에 대해 알 수 있을 것입니다. 커서를 살짝 아이콘 버튼 위에 올려 놓으면 버튼에 대한 설명이 나옵니다. 이제 하나하나 차례대로 설명하겠습니다.

2. Utility Box_Layers 

작업을 하다 보면 노동력(?)이 들어갈 수 밖에 없는 작업들이 많습니다. 레이어를 여러 개 만들어서 레이어 바를 타임라인에서 조금씩 시간 차를 두고 배치하는 것이 바로 그런 것 중 하나입니다. 이러한 작업들을 좀 더 쉽게 처리하도록 도와주는 것이 바로 Layers 기능입니다(이러한 기능만 수행하는 스크립트도 있습니다. 바로 Sortie라는 스크립트입니다. 더 궁금한 것이 있는 분들은 사이트에 들어가서 확인해 보기 바랍니다. http://aescripts.com/sortie/). 

01. Shift와 Deselect의 섹션으로 나뉘어져 있습니다. Shift는 레이어 바를 마치 계단 모양처럼 시간차를 두고 재배치시켜주는 역할을 합니다. 

02. 일단 Shift의 기능을 알아보려면 여러 개의 레이어가 필요합니다. 그래서 하나의 세로로 긴 직사각형의 Shape 레이어를 만들고, 그것을 복제하여 24개 정도의 레이어를 만들었습니다. 

03. 그런 다음에 모든 레이어가 15프레임 정도 움직이도록 애니메이션을 만들었습니다. 

04. 상단에서 아래로 이동하는 애니메이션입니다. 현재는 모든 키프레임이 똑같이 0초부터 시작하기 때문에 이렇게 보여집니다. 

05. Min 값을 20, Max 값을 0으로 설정하고, Randomize 버튼을 눌렀습니다. 물론, 모든 레이어를 선택한 다음에 버튼을 눌러야 합니다. 보는 것처럼 어떤 레이어는 그대로 0초에서부터 시작하고, 어떤 레이어는 약간의 차이를 가지면서 시작 프레임이 무작위로 바뀌었습니다. 이것을 하나하나 수작업으로 하려고 하면 정말 시간이 많이 소요됩니다.

06. 이번에는 Min 값을 0, Max 값을 20으로 지정하였습니다. 그랬더니 아예 모든 레이어가 20프레임 뒤에서부터 시작하는 형태로 레이어가 이동되었습니다. Max는 0초부터 얼마만큼 이동하여 시작할 것인지를 정하는 수치입니다. 만약, Max 값을 30으로 입력했으면, 30프레임부터 레이어들이 랜덤하게 시작된다는 것입니다. Min 값은 레이어들의 랜덤 값의 차이를 말합니다. 이 값을 크게 하면 레이어들이 엄청나게 들쑥날쑥하게 배치될 것입니다. Min 값을 작게 입력하면, 랜덤하게 배치되는 차이가 거의 나지 않습니다. 

07. 이번에는 모든 레이어를 선택한 다음, Amount 값을 20으로 입력하고, Sequence 버튼을 눌러봅니다. 레이어 바의 모양이 마치 절벽처럼 바뀌었습니다. Amount 값은 프레임으로 각각 레이어가 20프레임씩 차이가 나면서 배치가 된 것입니다. 

08. 이번에는 Amount 값을 -20으로 입력해보고, Sequence 버튼을 눌러봅니다. 마치 반전되는 것처럼 레이어 바의 모양이 바뀌었습니다. 

09. Amount 값을 -20으로 입력하고, 작업한 레이어들을 오른쪽으로 드래그하여 그림처럼 만들었습니다. 

10. 이번에는 Deselect에 대해서 알아보겠습니다. 이 기능은 생각보다 상당히 재미있는 기능입니다. Deselect 기능은 여러 개의 다중 레이어 중에서 랜덤하게 몇 개만 골라서 레이어를 선택하게 해주는 기능입니다. 타임라인상에 있는 레이어들을 모두 선택한 다음, 일단 Percentage 값을 약간 오른쪽에 치우치도록 두고, Deselect 버튼을 누릅니다. 

11. 몇몇 레이어들은 선택이 되지 않고 해제가 된 것을 볼 수 있습니다. 

12. 다시 한번 Deselect 버튼을 눌러봅니다. 선택이 된 것들 중에서 또 몇 개가 해제되었습니다. 

13. 다시 한번 Deselect 버튼을 누릅니다. 이제 전체 레이어들 중에서 딱 3개만 선택이 되고 나머지는 모두 해제되었습니다. 이처럼 여러 개의 레이어들이 있을 때, 이 중에서 랜덤하게 선택을 하고 싶을 경우에 이 기능을 사용하면 됩니다. 이렇게 해서 선택한 레이어들에 Shift 기능을 쓴다면 자신이 원하는 스타일의 움직임을 만들어 낼 수 있습니다. Percentage 슬라이더를 왼쪽으로 이동할수록 더 많은 레이어들이 해제되고, 오른쪽으로 이동할수록 더 적은 수의 레이어들이 해제됩니다. 

14. 앞서 이야기했던 것처럼 Utility Box는 특별한 튜토리얼이 없습니다. 그래서 모든 기능들을 팔레트 하단에 Information 안에 적어두었는데, 어떻게 기능들을 정의하였고, 사용해야 되는지 잘 설명되어있습니다. 모든 기능들 하단에는 이와 같이 Information 버튼이 있으니 잘 활용하기 바랍니다. 

3. Utility Box_Transform 

이번에는 레이어의 Position, Rotation, Scale, Opacity에 영향을 줄 수 있는 Transform이라는 기능을 설명하겠습니다. 그런데, 여기에서 약간의 문제가 있습니다. 키프레임을 만든 후에 Sequence, Randomize 버튼을 누르면 적용이 안된다는 것입니다. 

01. 팔레트의 모양은 아래 이미지와 같습니다. 상단에 있는 것들이 순서대로 Position, Rotation, Scale, Opacity입니다. X,Y,Z는 레이어의 어떤 축 속성에 적용할지를 결정하는 버튼입니다. Amount 값은 변화되는 값이고, Sequence는 일정한 규칙을 두고 변화되며, Randomize는 랜덤하게 변화됩니다. 

02. 어떤 속성에 변화를 줄지 위에서부터 차례로 선택해 나가면 됩니다. 현재는 Position의 Z축을 Amount 100정도로 설정합니다. 그런 다음에 레이어들의 3D 레이어를 켜줍니다. 그래야 Z축의 변화를 확인할 수 있습니다. 

03. Sequence 버튼을 눌러서 확인해 보면, Z축의 위치 값이 100씩 증가되었음을 확인할 수 있습니다. 

04. 레이어들의 위치 값을 Z축으로 100만큼 랜덤하게 바꾼 상태입니다. 

05. 레이어의 스케일과 투명도를 X,Y,Z축으로 100만큼 랜덤하게 만든 상태입니다. 

06. 레이어의 회전 값을 X,Y,Z축으로 100만큼 렌덤하게 적용한 상태입니다. 

07. X,Y,Z축 값을 적용하려면 3D 레이어를 활성화시켜줘야 합니다. 

4. Utility Box_Clones 

레이어를 다중으로 복제하는 기능을 하는 Clones은 마치 Shape 레이어의 Repeater 기능과 비슷합니다. 사각형 형태의 Grid Array와 원형의 Radial Array 두 종류가 있습니다. 

01. Shape 레이어로 작은 원을 하나 만듭니다. Amount는 복제할 숫자를 적는 것인데, 가로 5, 세로 5로 입력합니다. 그럼 총 25개의 원이 생겨납니다. Distance는 복제되는 레이어와 레이어 사이의 간격을 말하는 픽셀 개념입니다. 그런 다음에 Create를 누르면 그림처럼 만들어 집니다.

02. 타임라인을 확인해 보면, 25개의 레이어가 생겨난 것을 볼 수 있습니다. 

03. 이번에는 Add Link를 체크하고, Create를 누릅니다. Add Link를 체크한 다음에 Create 버튼을 누르면, 25개의 복제된 레이어들과 2개의 Null 레이어가 생성됩니다. 

04. 맨 상단의 Null 레이어는 전체 레이어를 움직일 때 사용되는 일반적인 레이어입니다. 두 번째 Null 레이어는 Offset X, Y축을 가지고 있습니다. 이 레이어의 역할은 X, Y축의 간격을 조절하는 것입니다. 물론, 익스프레션으로 모든 레이어들을 연결해 놓은 것입니다. 

05. 이번에는 Radial Array에 대해 알아보겠습니다. Nr은 복제될 개수이며, Range는 중앙에서 외곽까지의 거리를 말합니다. 값이 커질수록 원 형태의 모양이 커집니다. 

06. Radial Array에서도 Add Link를 체크한 다음 Create 버튼을 눌러봅니다. 이번에도 전체를 컨트롤할 수 있는 Null 레이어가 생겨납니다. 

07. Null 레이어에는 Offset과 Range가 있습니다. Offset 값을 높여주면, 원이 시계 방향으로 회전되면서 보입니다. Range 값은 커질수록 원이 외곽으로 퍼지게 됩니다. 

5. Utility Box_Shapes 

Utility Box에서 2개의 Shape 관련 버튼이 있는데, 이것이 첫 번째입니다. 이 기능은 Shape Layer에 적용되는 효과입니다. Shape Layer의 Fill 기능보다는 Stroke에 적합한 기능입니다. 

01. Amount는 복제할 개수, Offset은 복제가 레이어가 이동될 거리, Width는 Stroke의 두께로써 랜덤하게 적용됩니다. 여기서 중요한 것은 바로 Shape Group Name 부분입니다. 여기에 복제할 Shape 레이어의 Path 이름을 적어야만 합니다. 

02. Shape 레이어의 속성을 열어서 Contents 안에 있는 Group 이름을 적으면 됩니다. 현재는 Elipse 1이기 때문에, 이것을 적으면 됩니다. 그리고 Fill의 눈은 끄고, Stroke의 눈을 켜주면 됩니다. 

03. 이제 적용해보겠습니다. 복제될 개수는 3개, 원본에서부터 20픽셀 정도 떨어져 있으며, Stroke의 두께는 1에서 60 사이 정도가 랜덤하게 적용되도록 설정하고 Add를 누릅니다. 

04. 타임라인 윈도우를 확인해 보면, 3개의 Group이 생겼습니다. 속성을 열어보면 각각 Trim Path도 적용이 되어있습니다. 

05. 순수하게 복제만 하려고 한다면, 하단에 있는 Clones에서 작업하면 됩니다. 작업의 방법은 앞서 작업한 것과 동일합니다. 

06. 총 4개의 Shape 레이어가 생성되었습니다. 

6. Utility Box_Shapes 

이번에도 Shape 레이어 관련 기능입니다. 아이콘의 모양이 마치 Gear처럼 생긴 것을 볼 수 있습니다. Circles은 Shape 레이어의 Path에 원을 만드는 역할을 합니다. 그러나 한가지 제약이 있습니다. After Effects에서 기본적으로 제공되는 도형이 아닌 사용자가 만드는 Path에만 적용이 됩니다. Needles은 원형 Shape에만 적용이 되는 기능입니다. 원형 Shape에 또 다른 원형 Shape를 복제해 주는 기능을 합니다. 앞서 설명한 것과 약간 비슷한 기능입니다. 

01. Circles의 Percentage를 오른쪽 끝으로 지정하고, 원의 사이즈를 50으로 입력한 다음, Add 버튼을 누르면, 만든 Path의 포인트 부분마다 원이 생성됩니다. 

02. Percentage 슬라이더 바를 중앙에 위치시키고 Add를 누르면, 그림처럼 절반 정도의 포인트에만 랜덤하게 원이 생성됩니다. Percentage 슬라이더 바는 포인트에 원이 얼마만큼 생성될 지를 정해주는 역할을 합니다. 

03. 이번에는 Gear 모양을 만들 수 있는 Needles을 알아보겠습니다. 앞서 작업한 것과 마찬가지로 원 모양의 Shape 레이어의 Path에 적용하는 효과입니다. Group 이름을 입력한 다음에 Add 버튼을 눌러주면 됩니다. 

04. 그림처럼 총 10개의 Gear 모양이 생겨났습니다. 물론, 타임라인에서 파일을 확인해 보면 알겠지만, Trim Path를 이용하여 모양을 만들고, 그것을 Repeater한 것입니다.

6. Utility Box_Grid 

이번에는 트랜지션에 많이 사용될 것 같은 Grid라는 기능을 소개하겠습니다. 영상이나 이미지를 불러들여서 원하는 개수만큼 면을 쪼개어 작업하는 것을 말합니다. 

01. 흰색의 솔리드 레이어를 하나 만들었습니다. 그런 다음에 가로 5, 세로 3으로 입력한 다음에 Split 버튼을 눌러줍니다. 

02. 총 15개의 새로운 컴포지션 레이어가 생성되었습니다. 물론, 친절하게도 원본은 그대로 유지한 채로 눈만 꺼져있는 상태를 확인할 수 있습니다(솔리드 레이어로 작업을 했지만, Split 버튼을 누르는 순간 컴포지션 레이어로 바뀌면서 복제된 것입니다).

03. 이번에는 Linked를 체크한 다음에 Split 버튼을 눌러보겠습니다. 

04. 타임라인 윈도우를 보면, 3개의 레이어가 보입니다. 맨 하단의 레이어는 원본 레이어가 자동으로 프리컴프된 것이며, Transform Controls, Transition Controls 이렇게 2개의 Null 오브젝트가 생성되었습니다. 물론, 그 외에 복제된 레이어들은 모두 가려져 있는 상태입니다. 상단을 보면, Shy 아이콘이 클릭되어져 있음을 확인할 수 있습니다. 

05. Shy 아이콘을 클릭하면, 가려졌던 레이어들이 모두 보입니다. 복제된 레이어 15개와 Grid Transition Helper 레이어가 보입니다. 

06. Transform Controls을 선택하고, 이펙트 컨트롤을 확인해보면, 각각의 레이어에 익스프레션이 적용되어져 있고, 그것들이 이펙트와 연계되어져 있다는 것을 알 수 있습니다. 

07. Transition Controls 레이어를 선택하고, 이펙트 컨트롤 창을 확인하면, 그림처럼 트랜지션 관련 이펙트들이 보입니다. 

08. Linked를 체크한 상태에서 Split을 시킨 다음에 Transition Controls에서 값을 조절하면, 모든 레이어들이 똑같이 움직이게 됩니다. 

09. Two-Way를 체크하고 Split시킨 다음, Transition Controls에서 값을 조절하면, 각각의 레이어들이 약간의 차이를 가지면서 움직이게 됩니다. 

10. Grid Transition Helper는 간단하게 트랜지션을 도와주는 레이어입니다. 이것을 사용하려면 눈을 켜줘야 합니다. 그런 다음에 이펙트 컨트롤 창에서 조절을 해보면, 맨 처음에 만든 레이어가 보일 것입니다(현재는 빨간색의 솔리드 레이어를 가지고 처음에 작업했기 때문에 이렇게 보이는 것입니다).

11. 이번에는 Angle에 대해서 알아보겠습니다. Grid 툴의 기능을 쉽게 설명하자면, 불러들인 영상이나 이미지를 그리드에 맞춰서 Mask로 나눠주는 역할을 합니다. Angle은 사용자가 정한 각도에 따라서 레이어를 분리시킵니다. 사이즈는 10으로, 각도는 45도로 설정하고, Split를 누릅니다. 

12. 총 10개의 레이어가 생겨났습니다. 어떻게 이것들이 나눠졌는지를 확인하기 위해서 몇 개 레이어의 눈을 꺼보았습니다. 보는 것처럼 45도로 기울어진 레이어들을 볼 수 있습니다. 

7. Utility Box_Scene 

Camera와 Light를 애니메이션하기 쉽게 자동으로 셋팅 해주는 기능을 가지고 있습니다. 

01. 먼저 3개의 레이어를 3D 레이어로 만들어서 공간상에 임의로 배치를 합니다.

02. 그런 다음에 Camera Setup 버튼을 누릅니다. Orbit_Cam이라는 카메라와 Null 레이어가 생성되었습니다. 카메라의 Position과 Rotation들이 모두 Null 레이어에 Parents되어져 있습니다. 

03. Light Setup 버튼을 누르면, 앞서 카메라와 같이 Null과 Parents되어 생겨납니다. 물론, 이렇게 해놓은 이유는 바로 좀 더 편리하게 애니메이션을 하기 위해서입니다. 

8. Utility Box_Expression 

이제 마지막 기능인 익스프레션을 설명하겠습니다. 여기 있는 4개의 익스프레션은 모두 레이어의 속성에 관한 것들입니다. 


01. Wiggle은 아마도 After Effects를 조금이라도 다뤄본 분들이라면 그리 낯설지 않은 단어일 것입니다. 레이어를 스크립트로 자연스럽게 흔들거리는 효과를 주는 스크립트입니다. 

02. 레이어의 속성을 선택하고, Wiggle 버튼을 클릭하면 됩니다. 지금은 Position, Scale, Opacity를 차례대로 선택하고 Wiggle 익스프레션을 적용해보았습니다. 속성값을 멀티로 2개 이상 선택한 다음에 적용하면 적용이 되지 않으니, 반드시 하나의 속성을 선택하고 적용하기 바랍니다. 

03. 예를 들어서 Position 속성을 지정하고, Wiggle을 적용시키면 2개의 이펙트가 생겨납니다. Wiggle Frequency와 Wiggle Amplitude입니다. Wiggle Frequency는 흔들리는 수치를 나타내며, Wiggle Amplitude 흔들리는 폭을 조절합니다. 

04. Overshot은 레이어의 키프레임에 익스프레션을 적용하여 바운딩되는 느낌을 나타냅니다. 이 효과가 좀 더 잘 나타나려면 키프레임과 키프레임의 간격이 좁아야 합니다. 다시 말해서, 짧은 시간 동안 움직이든지, 커지든지, 회전하든지 해야 합니다. 그리고 Overshot은 키프레임의 밸로시티 곡선을 스크립트로 제어하기 때문에 Easy ease, Easy ease in, Easy ease out과 같이 키프레임에 가속과 감속을 주는 밸로시티 곡선을 조절해서는 안됩니다. 그냥 Linear 키프레임 그대로 사용해야만 적용이 됩니다. 

05. 스크립트에 대해 알고 싶다면 레이어들을 선택한 다음에 'U'를 누르면 됩니다. 

06. 여기서는 Regular Loop라고 했지만, 이것은 loopOut('cycle')이라는 스크립트이며, 하단의 PingPong Loop는 loopOut('pingpong') 스크립트 입니다. 아래의 그림을 보면, 녹색과 빨간색의 정사각형 박스가 1초 동안 왼쪽에서 오른쪽으로 움직이는 애니메이션입니다. 하단의 빨간색 정사각형의 Position에는 PingPong Loop, 상단의 녹색 정사각형에는 Regular Loop를 적용한 상태입니다. 상단의 녹색 박스는 계속하여 왼쪽에서 오른쪽으로 이동하는 애니메이션이 만들어지며, 하단의 빨간색 박스는 왔다 갔다를 반복하는 애니메이션이 만들어집니다. After Effects에서 가장 많이 사용되고 역사가 깊은 스크립트 중 하나입니다. 

이처럼, 실무 작업에서 자주 사용되는 것들을 하나의 스크립트로 묶어서 종합선물 세트를 만들어 준 Voxyde님께 다시 한번 감사하다는 말을 전하고 싶습니다. 활용만 잘한다면 많은 시간을 절약할 수 있게 될 것 같습니다.