EFFECTSProcedural Mesh Generation, Origami

motionlab
조회수 5177


예전부터 많이 사용되었던, 종이를 접는 듯한 효과를 내는 기능을 좀 더 편리하게 만들 수 있는 새로운 Origami 이펙트를 소개해 드리겠습니다. 익스프레션이라고 해야 더 맞을 것 같지만, 이펙트든지 익스프레션이든지 큰 상관은 없습니다. 종이가 접혀지고 펴지는 듯한 효과를 내려면 레이어들을 나누거나 마스크를 이용하여 하나하나 수작업을 해야 하는 손이 많이 가는 일이었습니다. 이런 작업을 간략하게 만들어주는 것이 Origami 이펙트입니다. Origami는 '종이접기'라는 뜻을 가지고 있는데, 말 그대로 종이를 접는 것처럼 생성되고, 소멸되는 애니메이션을 간단하게 만들 수 있도록 도와주는 기능이 있습니다.


1. Install


01. http://aescripts.com/origami/에서 39.99달러에 판매되고 있습니다. 구입한 다음에 압축을 풀어보면, Plug-ins 폴더와 Scripts 폴더가 있습니다. Origami 인스톨 방법은 다른 익스프레션들과 약간 다릅니다. 대부분이 Script > ScriptUI Panels에 넣기만 하면 되는데, Origami는 Plug-ins 폴더 안에도 넣어야 합니다. Plug-ins 폴더 안에 넣어야 할 것은 (Origami_packages) 폴더와 origami.aex 파일입니다. Script > ScriptUI Panels 안에는 Origami.jsx 파일을 넣어주면 됩니다.



02. After Effects를 실행한 다음, Window 메뉴 하단에서 Origami.jsx를 선택하면, 시리얼을 입력하라고 나옵니다. 시리얼을 입력하지 않으면 Demo 버전으로 작업해도 됩니다.




2. Origami Basic + Advanced


01. Origami는 BASIC, ADVANCED, CONTROL로 3개의 메뉴로 되어있습니다. BASIC은 모든 메뉴들을 간단하게 함축시켜 몇 가지 옵션이 없습니다. Mesh를 어떤 것으로 할 것인지 정하고, 몇 개의 포인트로 면을 나눠줄 것인지 결정한 다음에 Masks 또는 Shapes으로 면을 만들 것인지 확인하고, 마지막으로 애니메이션을 Wave로 할 것인지, Tree 형태로 할 것인지를 정한 다음에 MESH + ANIMATE 버튼을 누르면 이미지가 면으로 나눠지고, 그와 동시에 애니메이션도 만들어집니다.

ADVANCED는 두 가지 단계로 나누어집니다.
1. 일단 Mesh를 만듭니다.
2. Animate를 어떻게 할 것인지에 대한 옵션을 설정하고 애니메이션을 시킵니다.

사실 디자이너들이 사용해야 할 것은 바로 ADVANCED입니다. 원하는 스타일대로 면을 나누고, 원하는 방향으로 애니메이션을 시키려면, ADVANCED와 같이 여러 옵션들을 가지고 있어야 하기 때문입니다. 뒷부분에서 자세히 설명하겠습니다.




마지막으로 CONTROL은 Origami의 전체적인 환경을 설정할 수 있는 메뉴입니다. 컨트롤 또는 제어판 느낌을 내기 위해서 Gear 모양으로 만든 것을 보니, 아마도 프로그래머가 직접 디자인한 것 같은 느낌이 듭니다. 이 부분도 추후에서 설명하겠습니다.



02. 컴포지션 윈도우에 이미지 하나를 불러들였습니다. 그런 다음에 Mesh를 설정하고, MESH + ANIMATE 버튼을 한번 눌러보겠습니다.



03. 스크립트 에러창이 나옵니다. 당황하지 말고 천천히 에러의 이유를 살펴봅니다. Shape 레이어를 선택하든지, 아니면 Mask가 있는 레이어를 선택하라는 경고 문구가 나옵니다.



04. 불러들인 이미지에 Mask를 만들어줍니다.



05. Origami를 적용하려면 무조건 이미지에 Mask를 만들어야 합니다.



06. 그런 다음에 다시 MESH + ANIMATE 버튼을 누릅니다. 약간의 렌더링 시간이 지나면, 타임라인 윈도우에서 꽤 많은 숫자의 레이어가 생성됩니다. 컴포지션 윈도우를 확인해보면, 그림처럼 삼각형으로 모든 면들이 나눠져 있는 것을 확인할 수 있습니다.



07. 앞서 작업했던 것이 레이어를 Mask로 나눴다면, 이번에는 Shapes으로 나눠보겠습니다.



08. 나누는 면을 Shapes으로 선택하면, 아래 이미지와 같이 기존의 이미지는 사라지고 단색의 이미지들이 만들어집니다.



09. Shapes 옵션을 선택한 다음에 타임라인 윈도우를 보면 그림처럼 보여집니다. 오리지널 이미지의 눈은 꺼져있고, Number of points의 수치만큼 레이어들이 생성되었습니다. 생성된 레이어들을 컨트롤할 수 있게 Null 레이어가 맨 위 상단에 생성됩니다.



10. Masks로 선택한 다음, MESH + ANIMATE 버튼을 누르고 타임마커를 움직이면 애니메이션되는 이미지를 확인할 수 있습니다.



11. 타임라인 윈도우를 확인해보겠습니다. 앞서 Shapes으로 만든 것과 동일하게 오리지널 레이어는 눈이 꺼진 상태로 보여집니다.



12. Mesh 즉, 이미지의 면을 나누는 형태를 정하는 옵션은 총 5가지로 나눠집니다. 앞서 본 것이 Triangulation이며, 다양한 크기와 형태의 삼각형입니다. 두 번째가 Voronoi입니다. 다양한 다각형의 모양으로 나타나는 스타일입니다.



Regular Trianges-1은 직삼각형으로 보여지며, 이 직삼각형이 상하좌우로 대칭되면서 보여집니다.



Regular Trianges-2는 직삼각형으로 Regular Trianges-1과 동일하지만, 지금 보는 형태로 거의 대부분의 면들이 구성됩니다.



Squares는 정사각형 모양으로 면들을 나눠줍니다.



13. Animation을 Wave로 설정합니다. Wave는 보는 것처럼 Null 오브젝트가 있는 곳에서 한쪽 방향으로 면들이 생겨나는 스타일입니다.



14. Animation을 Tree로 설정하면, 시작되는 곳에서 퍼져나가지만 나무에 가지가 생기듯이 주변으로 하나씩 퍼져나가는 스타일입니다.



15. 이제 ADVANCED 옵션에 대해서 알아보도록 하겠습니다. 다른 것들은 앞서 설명을 했으니 생략하겠습니다. 여기서는 BASIC에 없던 Fragments to Layers만 설명하겠습니다. 이 옵션을 해제하고, CREATE A MESH를 하면, 오리지널 레이어외에 단 1개의 레이어만 생성이 되면서 생성된 레이어에 모든 Mask가 생성됩니다.




16. 생성된 마스크들을 선택하면 그림처럼 보여집니다. 하지만, Fragments to Layers를 해제하고 마스크를 만들면, 애니메이션은 할 수가 없습니다.




17. Fragments to Layers를 체크한 다음 MESH를 만들고, 이제 애니메이션을 시켜보겠습니다. Direction의 In은 생성되는 애니메이션을 만들고, Out은 소멸되는 애니메이션을 만듭니다. 애니메이션이 만들어질 때 효과는 Rotate X, Scale, Opacity 총 3가지를 체크했습니다. 현재는 컴포지션 윈도우 안에 있는 왼쪽 중앙 부분에서 시작하는 애니메이션입니다. 이제 시작하는 부분을 바꿔보겠습니다.




18. 애니메이션이 시작되길 원하는 지점을 선택합니다. 다른 설정값들의 변동이 없다면 그냥 ANIMATE를 눌러주면 됩니다.




19. 만약 보는 것처럼 설정값이 틀려진다면 반드시 UPDATE를 눌러야 합니다.




3. Shape

01. 이번에는 솔리드 레이어를 하나 만들어보겠습니다.




02. Masks가 아닌 Shapes으로 만들어보겠습니다. MESH를 만들어보면 면이 어떻게 나뉘어지는지 확실하게 볼 수 있습니다.




03. 이번에는 Shape 레이어로 만들었을 때만 적용이 되는 Trim Path를 알아보겠습니다. Trim Path만 선택한 다음, ANIMATE 버튼을 누릅니다.




04. 면이 생성되는 것이 마치 시계 반대 방향으로 마스크 애니메이션이 되듯이 하나하나 애니메이션이 됩니다.




05. 이번에는 전체 환경설정 옵션을 확인하겠습니다. 맨 하단의 RECOLOR는 선택한 Shape의 컬러를 바꿔줍니다.



06. Remove original layer를 체크하면, Mesh를 만든 후에 오리지널 레이어를 삭제하겠다는 것입니다. 웬만하면 체크하지 말길 바랍니다. 일단 Precompose fragments를 체크합니다. 뒷부분에서 다시 설명하겠습니다.



07. Shapes Color는 Original color, Random color, Shades of original color 총 3종류가 있습니다. 그 차이를 확인해보겠습니다.




08. 이제 Precompose fragments에 대해 설명하겠습니다. 말 그대로, 생겨난 Mesh 레이어들을 프리컴프한다는 것입니다. 이미 Precompose fragments가 체크되어있으므로 CREATE A MESH를 클릭합니다.



09. 기존에 정신 없이 많이 생겼던 레이어들이 프리컴프되어 하나의 깔끔한 레이어로 만들어집니다.



10. 이제 이미지가 애니메이션되면서 보여지고, 다시 애니메이션되면서 사라지는 것을 만들어보겠습니다. MESH를 만든 다음에 Direction을 In으로 설정하고 애니메이션을 만듭니다.



11. 만든 애니메이션을 보면 그림처럼 보일 것입니다.


12. 이번에는 사라지는 애니메이션을 만들어 보겠습니다. 다시 Mesh를 만들고, 이번에는 Direction을 Out으로 설정하고 애니메이션을 만듭니다.



13. 아래와 같이 레이어를 배치하면, 생성되고 소멸되는 애니메이션이 만들어집니다.



14. 애니메이션을 만들어 보면 아래 이미지처럼 보여질 것입니다.



15. 이번에는 약간 복잡해 보이는 애니메이션을 만들어보겠습니다. Squares로 Mesh를 설정하고, Number of points를 12로 입력합니다. 이렇게 면을 나누면 그렇게 작은 정사각형은 나오지 않습니다.



16. 큼직큼직한 사이즈의 정사각형들이 움직여도 큰 감흥은 없습니다. 그래서 큰 레이어를 하나 선택한 다음에 또 한번 Mesh로 나눠줍니다. 이번에는 Number of points를 3으로 입력합니다.



17. 애니메이션을 하여 확인해보면, 디테일하게 애니메이션 되는 부분이 보여질 것입니다.





4. TYPO


01. 이번에는 타이포그래픽에 적용해보겠습니다. 간단하게 타입 툴로 숫자를 입력합니다.



02. 타입에 Mask를 하나 만들고 Mesh를 만듭니다.



03. Direction은 In으로 설정하고, Animation은 Wave로 설정합니다. Effect는 Rotate X, Scale, Opacity를 체크합니다.



04. 애니메이션을 만들어 보면 상당히 재미난 애니메이션이 만들어집니다. 마치 작은 조각과 큰 조각들이 모여져서 숫자를 만드는 듯한 효과가 나타납니다.




05. 간혹 여러분들이 효과를 준 다음, Ctrl + Z 또는 Command +Z를 눌러서 전 단계로 되돌리려 할 때, 이와 같은 에러 창이 나올 수도 있습니다. Origami 이펙트는 생각보다 많은 레이어들이 스크립트로 연결되어 있어서 이런 에러가 나오기도 합니다. 이때는 어쩔 수 없이 저장하지 못하고 프로그램을 종료해야 할 경우가 생길 수도 있기 때문에, 항상 저장하는 습관을 가지길 바랍니다.



06. 이번에는 긴 문장의 타이포에 Origami를 적용해보겠습니다. 혹시나 해서 이번에는 각각의 철자들을 Mask로 만들어보았습니다. 타입 툴로 글자를 적은 다음, Layer > Create Masks from Text로 각 철자들을 Mask로 변환시켜주면 됩니다. 그런데 문제는 이렇게 만들면 각각의 철자들에 Mesh를 적용해야 하므로 레이어의 숫자가 잘못하면 200개가 훌쩍 넘어갈 수도 있습니다.



07. 그래서 그냥 하나의 Mask를 만들어줍니다. 그런 다음 Mesh를 만들고 애니메이션을 만들어줍니다.



08. Number of Points의 수치를 높게 설정하면 좀 더 디테일한 애니메이션을 만들 수 있습니다. 대신 렌더링 시간이 꽤 오래 걸리는 것은 감안해야 합니다.


카카오톡 채널 채팅하기 버튼