SCRIPT이름처럼 다양한 기능을 가지고 있는 Swiss Knife Script(1)

motionlab
조회수 4410

글/ 이병현 실장 (mg25.com, motionlab.co.kr, youtube.com/mg25motionlab)


어릴 적, 스위스 칼을 하나 가지는 것이 소원이었던 적이 있었습니다. 칼 뿐만 아니라, 각종 드라이버와 도구들이 있는 정말 만능의 기능들을 가지고 있었습니다. 이같이 다양한 기능을 갖춘 온라인 교육 사이트로 유명한 모션 디자인 스쿨에서 선보인 Swiss Knife Script를 소개해 드리겠습니다. 총 20개의 기능을 가지고 있는 Script로, 실무 작업에서 유용하게 사용할 수 있는 기능들만 모아놓았습니다. 



1. Install


01. aescripts.com/swiss-knife/에서 다운받을 수 있습니다. 금액은 60.00달러로, 다른 Script들에 비해서 비싼 편입니다. 다운 받은 파일을 열어 C:/Program Files/AdobeAdobe After Effects CC 2019/Support Files/Scripts/ScriptUI Panels 안에 넣어주면 됩니다. 


02. 1.1.6 버전까지 윈도우에서 나타나던 'Unable to execute script at line' 에러가 1.1.7 버전으로 업그레이드되면서 수정이 되었습니다. 현재 설명 드리는 버전이 1.1.7 버전입니다. Swiss Knife Script는 크게 나누어 5가지 섹션으로 분류되는데, 전체 Script를 설정하는 옵션 부분과 Parallax, Interaction, Placeholder, Support 4가지 그룹으로 나누어집니다. 이 중에서 Parallax, Interaction 그룹을 이번에 다뤄보고, 다음 시간에 나머지 두 그룹을 설명 드리겠습니다. 


옵션 부분은 육각형 모양의 아이콘입니다. 여기에서는 그룹들의 아이콘들을 어디에 배치할 것인지, 커서를 롤 오버했을 때 설명 글을 보여줄 것인지, 기능들의 아이콘 모양을 보이게 할 것인지를 설정해 줄 수 있습니다.



03. Icon On/Off를 클릭하여 해제한 후, 다시 Script를 실행하면, 그림처럼 아이콘들이 모두 사라지게 됩니다. 설마 이렇게 작업하는 분은 없을 것이라 생각합니다.




2. Parallax


01. Parallax는 시차, 다시 말해서 물체의 위치나 방향이 보는 시점에 따라서 달라지는 것을 뜻합니다. Layer 3개가 쌓여 있는 듯한 아이콘이 바로 Parallax입니다. 클릭하면, 4개 정도의 아이콘들이 나타납니다.



02. 일단 이미지를 7장 정도 타임라인에 배치했습니다.



03. 그런 다음에 Parallax 3D 버튼을 클릭하면, 3D 카메라와 Null Layer가 자동으로 생성됩니다. 모든 Layer들은 3D Layer가 되었으며, 그림처럼 공간 상에 자동으로 배치되고, Null Layer가 자동으로 카메라와 연동되어 있습니다. Composition Window에서 Null Layer를 움직여서 간단한 모션을 할 수 있습니다.



04. 같은 방법으로 Layer들을 선택한 다음, 이번에는 Parallax 2D 버튼을 클릭합니다. Null Layer가 생성됩니다. 물론, 3D가 아니기 때문에, 카메라는 생성되지 않습니다. 선택한 Layer들은 Null에 연결됩니다. Null Layer를 선택하면, 모든 Layer들이 자동으로 시간 차를 두고 움직입니다. 멀티 Layer들을 한 번에 간단하게 애니메이션할 경우에 유용하게 사용될 거 같습니다.



05. Null Layer만 애니메이션을 시키면, 선택한 여러 개의 Layer들이 시간 차를 두고 애니메이션됩니다.



06. 애니메이션 시킨 결과를 보겠습니다. 



07. 이번에는 Parallax 2D를 다른 방식으로 사용해보겠습니다. 같은 Layer를 7장 정도 복제합니다.



08. 그런 다음, Parallax 2D 버튼을 클릭하고, Index Parallax를 체크해줍니다. Index는 After Effects에서 Layer에 붙는 고유 넘버 같은 것이라고 생각하면 됩니다. 각각의 Layer들에는 자기만의 Index가 부여됩니다. 이것을 체크해주면, 같은 축 상에 있던 Layer들도 그림처럼 Null Layer의 움직임에 따라서 겹겹이 움직입니다.



09. 각 Layer들의 Index는 타임라인에 배치되어 있는 것이 오리지널입니다. 하지만, 각각의 Layer에는 별도로 Index를 설정할 수 있는 이펙트가 적용되어 있습니다.



10. 이번에는 Stack 버튼에 대해 설명 드리겠습니다. Stack은 쌓이다. 포개지다. 다량의, 무더기라는 뜻을 가지고 있습니다. Position Offset을 통해 그림처럼 사용자가 원하는 모양으로 Layer들의 위치를 일괄적으로 조절할 수 있습니다. 투명도를 조절하면, 맨 앞에 있는 Layer를 기준으로 그 밑에 있는 Layer들이 수치 값만큼 계속 변화됩니다.



11. Layer를 몇 개 더 복제합니다.



12. 복제한 Layer들도 설정 값에 맞춰서 그대로 적용됩니다. 회전 값을 5도로 입력했다면, 뒤에 있는 Layer들은 계속 5도씩 더해져서 회전 값이 적용된다는 것입니다.



13. 이번에는 Extruder를 알아보겠습니다. 말 그대로 이미지에 두께감을 주어 입체로 만드는 것입니다. Layer를 선택한 다음에 Extruder 버튼을 클릭하면, 육면체로 입체 박스가 만들어집니다. 타임라인 윈도우에는 자동으로 Pre Comp Layer가 만들어집니다.



14. 이번에는 Isometric입니다. 같은 Layer 3개를 타임라인 윈도우에 배치합니다. 이 옵션을 체크한 다음, Stack 버튼을 누릅니다.



15. 그림처럼 Isometric을 체크하지 않았을 때와는 다른 옵션 값이 나타납니다. 이번에는 자동으로 3D 카메라도 생성되며, 모든 Layer들은 3D Layer가 됩니다.



16. Carusel은 회전목마라는 뜻입니다. Layer 4개 정도를 배치하고, Carusel 옵션을 체크합니다. 그리고 Stack 버튼을 클릭합니다.



17. 아마 이런 영상들을 한 번 정도는 본 적이 있으리라 생각됩니다. 3D 공간상에 이미지들이 마치 병풍처럼 원형으로 배치가 됩니다. All Z Position Offset 값을 조절하면, 배치되는 Layer들의 간격을 조절할 수 있습니다.



3. Interaction


01. 이번에는 Interaction 그룹에 있는 기능들을 살펴보겠습니다. 상호작용을 하는 모션 작업에서 정말 유용하게 사용될 만한 기능들을 모은 그룹입니다. 빨간 원이 박스 안에 있는 MOTIONLAB이라는 글자에 가까이 가면 박스의 컬러가 빨간 색으로 변하고, Typo는 약간 커지는 Interaction을 만들어보겠습니다.

먼저, 흰색 라인으로 된 박스(Shape Layer 1)의 Fill 부분의 투명도를 0~100%로 Keyframe을 2개 만듭니다. MOTIONLAB Typo는 사이즈가 약간 커지도록 Keyframe을 2개 만듭니다. 여기에서 Keyframe을 만드는 것은 중요합니다. Keyframe이 있어야 적용이 가능하기 때문입니다. 이렇게 만들었다면, 애니메이션을 만든 2개의 Layer에 있는 Keyframe들을 선택합니다. 그 다음에 빨간 색 원, 즉 Point Layer를 선택합니다(Ctrl + 선택).



02. 그런 다음에 Interactor 버튼을 클릭합니다.



03. 빨간 색 원을 움직여서 MOTIONLAB Typo에 가까워질수록 앞서 만든 애니메이션이 보이게 됩니다.



04. 이번에는 Dependener 버튼을 설명 드리겠습니다. 먼저, MOTIONLAB Typo를 애니메이션 시켜보겠습니다. 360도 회전하면서 사이즈가 커지는 Keyframe 애니메이션을 만들었습니다. 상단에는 슬라이더 바 느낌의 그래픽이 있습니다. 흰색 원이 좌에서 우로 움직이는 Keyframe 애니메이션을 만들었습니다.



05. 여기에서는 순서가 중요합니다. 먼저, 슬라이더 바 안에 있는 흰색 원의 Keyframe을 선택한 다음, Dependener 버튼을 클릭합니다. 그러면 버튼이 APPLY로 바뀌면서 컬러도 빨간 색으로 바뀌게 됩니다. 이제 앞서 애니메이션했던 MOTIONLAB Typo의 Keyframe을 선택합니다. 마지막으로 빨간 색의 APPLY 버튼을 클릭합니다.



06. 그림처럼 컨트롤 Null Layer가 만들어집니다.



07. 흰색 원을 선택하여 직접 움직여도 움직임에 따라 MOTIONLAB의 글자가 회전되면서 커지고, 작아지는 애니메이션이 연동되어 보일 것입니다.



08. 표시한 빨간 네모 부분은 Keyframe 애니메이션들을 선택 시, Layer 위주 또는 속성, Composition의 범위를 한정해주는 옵션입니다.



09. Animarker 버튼에 대해 알아보겠습니다. 3개의 애니메이션을 똑같이 만들었습니다. Keyframe을 선택하고, Animarker버튼을 클릭합니다. 이때 Time Marker 위치를 잘 설정해야 합니다. Time Marker가 있는 위치에 Marker가 생성되기 때문입니다.



10. Animarker 버튼을 클릭하면, Null Layer가 생기면서 Time Marker가 있는 위치에 Marker가 만들어집니다. 애니메이션을 시켜보면, 새로 생긴 Marker에서부터 애니메이션이 만들어집니다.



11. 키보드의 키패드에 있는 *를 누르면, Marker가 생성됩니다. 하나 더 만들면, 또 그 위치에서 애니메이션이 만들어집니다. 이처럼 한 번 잡아 놓은 애니메이션을 원하는 위치에서 간단하게 플레이할 수 있게 만드는 기능을 합니다.



12. Grid Offest 버튼은 여러 개의 Layer들을 시간 차를 두고 함께 움직이도록 만드는 기능을 합니다. 같은 모양의 Layer를 5개 만듭니다. 5개의 Layer를 선택한 다음, Grid Offest 버튼을 클릭합니다. Step이 현재 1로 되어 있습니다. 이것은 하나의 Layer가 움직이고, 또 다른 하나가 움직이라는 것입니다. 만약, Step을 2로 설정한다면, 2개의 Layer가 동시에 움직이게 됩니다.



13. Null Layer에 적용된 Offset Control을 보면, 현재 Time Offset이 1로 되어 있습니다. 이것은 하나의 Layer가 움직이고 1 Frame 후에 다른 Layer가 움직이라는 것입니다.



14. 새로 생긴 Null Layer를 간단하게 애니메이션 시켜봅니다. 왼쪽에서 오른쪽으로 이동하는 애니메이션을 만들었습니다. 5개의 Layer가 약간의 시차를 두고 똑같이 움직이는 것을 확인할 수 있습니다.



15. Null Layer가 생성되었고, 5개 Layer의 Transform들이 모두 Expression이 적용되었습니다. Parent된 것과는 다른 연동이 된 것입니다.



16. Null Layer에서 포지션이 아닌 다른 속성들을 애니메이션 시키더라도 5개의 오렌지 박스 Layer들은 똑같이 움직이게 됩니다.



17. 이번에는 Grid Offest의 다른 기능인 정렬에 대해 알아보겠습니다. Inherit Position from Main Layer를 체크하면, 하단에 있는 Grid Options을 사용할 수 있습니다. 말 그대로 여러 개의 Layer들을 간편하게 정렬시킬 수 있는 기능입니다.



18. 오렌지 박스 Layer들을 복제하여 더 많은 개수의 Layer들을 만들어보겠습니다. 가로나 세로의 숫자를 입력해주면, 입력한 숫자에 맞춰서 Layer들이 자동으로 정렬됩니다.



19. 마지막으로 Revolver 버튼입니다. 앞서 작업한 것으로 여러 개의 Layer들을 정렬시켜보겠습니다. 정렬된 Layer들을 모두 선택하고, 맨 마지막으로 원 Layer를 선택합니다(Ctrl + 클릭).



20. 그런 다음에 Revolver 버튼을 클릭하면, 원 Layer가 움직임에 따라서 막대처럼 생긴 Layer들이 회전을 하게 됩니다. Motion2 Script가 가지고 있는 기능 중에 Stare 기능과 비슷합니다. 원 Layer를 선택한 다음에 이동시켜보면, 확인할 수 있습니다.



21. Offset Angle은 오렌지 막대 모양의 Layer들의 회전 값을 수정해 줄 수 있습니다. In Range와 Out Range는 원이 어느 정도로 오렌지 막대 모양의 Layer에 가까이 왔을 때 변화가 일어날 것인지를 정해줍니다.



다음 시간에는 나머지 2개 그룹인 Placeholder와 Support의 기능에 대해 알아보겠습니다.