www.aesweets.com 에서 출시된 Line Creator는 버전을 업그레이드하면서 좀 더 사용하기 편리해졌고, 심플한 UI로 바뀌었습니다. 사실 오브제와 오브제를 연결시켜주는 기능을 가진 스크립트들은 이것 말고도 있긴 합니다. 그렇지만, 2D 라인뿐만 아니라, 3D 라인까지 편리하게 만들어 주는 것은 최근에 나온 Line Creator 2가 돋보입니다. 


기존에 나왔던 1.0 버전이나 1.35 버전 같은 경우, 작업을 하기에 약간 불편한 인터페이스들이 있었습니다. 라인을 생성할 때, From이나 To 버튼으로 오브제를 지정하는 것들이 제일 불편한 부분이었습니다. 2.0 버전에서는 이런 부분들 외에도 좀 더 사용자의 편리함을 배려한(?) UI가 돋보입니다. 

LinesCreator v1.35 버전 인터페이스

www.aesweets.com/lines-creator/ 사이트에 들어가면, lines-creator를 활용한 영상들과 lines-creator로 할 수 있는 여러 가지 기능들이 인포그래픽 형식으로 설명되어 있습니다. 

컴포지션 윈도우에서 원하는 Layer를 선택한 다음 스타일을 결정하고, 연결만 시켜주면 됩니다. 

보너스로 들어 있는 툴은 Layer의 중심축을 편하게 지정할 수 있는 앵커 포인트 툴과 Lines Creator를 이용하여 만든 라인의 끝부분과 꺾어지는 부분의 형태를 설정할 수 있는 라인 캡과 조인 옵션, 그리고 작업을 할수록 엄청나게 중요한 역할을 하는 Copy/Paste 툴입니다. 이 기능은 뒷부분에서 자세히 설명 드리겠습니다. 참고로 이전 버전들에서는 이 기능이 없어서 상당히 불편했습니다.

기존 버전에서는 Layer를 하나하나 선택해서 라인의 스타일을 만들었어야 했는데, 이제는 컴포지션 윈도우에서 선택만 하고 스타일을 고르기만 하면 됩니다. 물론, 라인을 만든 후에 바꿔 줄 수도 있습니다. 그리고 새롭게 곡선 라인을 만들 수 있게 되었습니다. 사실 이런 곡선의 라인을 Shape Layer로 만드는 것은 쉽진 않습니다.

3D를 지원하므로 좀 더 입체적인 공간감을 줄 수 있습니다. 이것을 이용하면 좀 더 디테일한 작업을 할 수 있습니다. 마지막 부분에서 보여드리겠습니다. 

1. Lines Creator 설치하기

앞서 알려드린 사이트에 가면, 데모 버전을 받아서 설치할 수 있습니다. 다운로드 받아서 압축을 풀어보면, 그림처럼 폴더 하나와 LinesCreator.jsx 파일을 볼 수 있습니다. 이것을 After Effects가 설치된 파일 중 Script 폴더 안에 드래그하여 넣어주면 됩니다. 

2. Lines Creator 옵션 알아보기

01. Anchor는 Motion 2 스크립트에 있는 것과 동일한 기능을 합니다. Layer의 중심축을 클릭만으로 편하게 옮겨줄 수 있습니다. 이 기능이 있는 이유는 라인이 생성될 때 Layer들의 중심축을 기준으로 만들어지므로 중요한 부분이기 때문입니다. Lines의 3가지 옵션은 Layer들이 있을 때 생성되는 라인이 어떤 식으로 이어질 것인지를 결정합니다. Layer들이 하나하나 연결될 수도 있고, 하나의 Layer에 다른 Layer들이 연결될 수도 있으며, 모든 Layer들이 라인으로 연결되게 만들 수도 있습니다. 여기에 하나 더 괜찮은 기능이 있습니다. 다른 스크립트들이 많이 지원하지 않는 기능인데, 바로 Adaptive 디자인이라는 것입니다. Adaptive는 '조정 가능한'이란 뜻으로, 사이즈를 조절함에 따라 인터페이스가 자동으로 바뀌는 것을 말합니다. After Effects를 오래 사용한 분들이라면, 이 기능이 정말 유용하다는 것을 알 것입니다. 

02. 좀 더 디테일한 설정을 하려면, 스크립트 윈도우의 상단 오른쪽에 있는 아이콘을 클릭하면 됩니다. 

LinesCreator Settings 창을 보면, 기본적인 라인에 관한 설정 및 인터페이스에 관련된 항목들이 있습니다. License에는 구매 시 입력한 메일 주소와 시리얼을 적으면 됩니다. Help 탭에는 LinesCreator의 온 오프라인 메뉴얼이 있습니다. 

3. Lines Creator 시작하기

01. Shape Layer 원형 툴로 Layer를 5개 만들어 봅니다. 

02. 먼저 Layer를 하나 선택한 다음에 나머지 4개의 원을 선택합니다. 그런 다음, Create Lines from one Layer to all other 버튼을 클릭합니다. 그림처럼 맨 처음에 선택한 Layer에 모든 라인이 집중되어지는 모습을 볼 수 있습니다. 

03. 왼쪽 Layer부터 오른쪽으로 순서대로 선택합니다. 선택한 다음, Create Lines in the selection order 버튼을 눌러줍니다. 그러면 Layer를 선택한 순서대로 라인들이 연결되어져 보입니다. 

04. 어떤 구조로 만들어졌는지를 확인하려면, 타임라인 윈도우를 보면 됩니다. 맨 처음에 만든 원형의 Shape Layer 5개와 새롭게 만든 Line Layer 4개가 생성되었습니다. 물론, 만들어진 Line Layer도 Shape Layer입니다. 

05. 세 번째 버튼의 이름은 Create Lines from all to all입니다. 유일하게 Layer를 선택하는 순서와는 전혀 상관없이 모든 Layer를 그냥 선택만 해주면됩니다. 선택한 Layer들은 전부 라인이 만들어지게 해주는 버튼입니다. 

06. 여기서 잠깐 Lines Creator Setting 창에 대해서 하나 짚고 넘어가겠습니다. 요즘 출시되는 스크립트들의 공통점 중 하나라고 볼 수 있는 UI Setting 기능이 여기에도 있습니다. User Interface를 사용자가 보이거나 보이지 않게 만들어 주는 기능입니다. 본인이 자주 사용하지 않는 기능은 꺼버리는 것입니다. 그럼 윈도우에서 보이지 않기 때문에, 그만큼 공간 활용도가 좋습니다. 

07. 이번에는 Line의 스타일을 알아보겠습니다. 총 6가지의 스타일이 있습니다. 정확히 말하자면 4가지라고 볼 수 있겠습니다. 2가지는 180도로 회전한 형태이기 때문입니다. 하나하나 살펴보기 바랍니다. 

Straight Line / Straight Rectangle Line

Arc Line / Arc Reversed Line

Square Horizontal Line / Square Vertical Line

08. 이번에는 간단하게 Caps/Joins에 대해 설명 드리겠습니다. 아이콘 모양을 보면, 어디서 많이 본듯한 것들입니다. 바로 Illustrator의 Stroke에 있는 메뉴와 같습니다. 물론, After Effects에 있는 Shape Layer의 Stroke 옵션들과도 같은 것들입니다. Caps은 라인의 양쪽 끝 모양을 결정하며, Joins은 꺾어진 라인의 모양을 결정해 주는 옵션입니다. 

Round Caps와 Round Join을 적용한 상태입니다. 그림처럼 디자인적으로 봤을 때, Caps와 Join은 일반적으로 같은 모양의 것을 선택해 주는 것이 좋습니다. 

4. Lines Creator 응용하기

01. Arc Line이 버전 업되면서 새롭게 생겼습니다. 이제 이것을 이용해서 원형의 라인을 만들어 보겠습니다. 먼저, 그림처럼 Stroke만 적용된 도너츠 모양의 원형 Shape Layer를 2개 만들고, 직선 라인을 만들어 줍니다. 

02. 직선 라인을 선택하고, Arc Line 버튼을 눌러서 그림처럼 만들어 줍니다. 

03. 원형 Layer 2개를 다시 선택하고, 이번에는 앞서 만든 Arc Line과 반대 모양의 버튼을 클릭합니다. 그러면 그림처럼 2개의 반원이 모여 흰색 원을 만들어 줍니다. 

04. 이제 방금 만든 흰색 라인 2개를 선택하고, Stroke의 두께를 조금 두껍게 만들어 줍니다. 

05. 이런 방식으로 그림처럼 여러 개를 만들어 줍니다. 처음에 만들어준 원형 Layer는 총 5개입니다. Arc Line은 총 8개입니다. 

06. 이제 처음에 만든 5개의 원형 Layer를 X축으로만 움직여서 애니메이션을 만들어 보겠습니다. 

07. 이번에는 X, Y축으로 자유자재로 움직여보겠습니다. 애니메이션을 시켜보면, 각각의 Arc Line들은 Shape Layer가 움직일 때 함께 Size가 커지거나 작아집니다. 

08. 이번에는 Square 라인을 바꿔보겠습니다. 

09. 총 4개의 라인을 만들었는데, 그 중 하나의 라인을 골라 보겠습니다. 하나의 라인을 선택한 다음에 이펙트 컨트롤 창을 확인해 보겠습니다. 상당히 많은 이펙트들이 있습니다. 물론, 사용자가 편하게 작업할 수 있도록 Line이 가지고 있는 옵션 값들을 익스프레션으로 이펙트와 연결해 놓은 것입니다. A 파트는 라인이 그려질 2개의 Layer를 선택하는 부분입니다. B 파트는 생성되거나 사라지는 애니메이션을 가능하게 만들어주는 Trim Path 부분입니다. C파트가 바로 라인의 Join 부분을 라운드로 만들어 주는 옵션입니다. 

10. 4개의 라인을 모두 각각 선택하여 동일하게 Corner Roundness를 100으로 입력해 보았습니다. 

11. 흰색 원형 Layer를 움직이면, 당연히 라인들은 그것에 맞춰 움직이는 것을 볼 수 있습니다. 

12. B파트에 있는 Trim Start 또는 Trim End 값을 애니메이션시키면, 보는 것처럼 라인이 생성되는 애니메이션을 만들 수 있습니다. 

5. Lines Creator 3D

01. 지금까지 2D 라인들을 만들어 보았다면, 이제는 3D 라인들을 만들어 보겠습니다. 방법은 간단합니다. 그림처럼 4개의 원형 Layer를 만들고 라인들을 만들어 줍니다.

02. 모든 Layer들을 선택한 다음, Lines Creator에 있는 3D 버튼을 누릅니다. 누르는 동시에 모든 Layer가 3D Layer로 바뀝니다. 

03. 타임라인 윈도우를 확인해보면, 3D Layer로 바뀐 것을 알 수 있습니다. 컴포지션 윈도우에 있는 Line들은 선택되지 않게 Lock을 걸어 놓는 게 좋습니다. 그래야 원형 Layer들을 가지고 애니메이션을 손쉽게 만들 수 있습니다. 

04. 3D Layer로 만든 원형 Layer들을 이제 X,Y,Z축으로 움직여 애니메이션을 만들어 보겠습니다. 그림처럼 2D에서는 느끼지 못한 공간감을 확실하게 느낄 수 있습니다. 

6. Dash+Gap을 이용하여 점선 만들기

01. 이번에는 두 가지를 해보겠습니다. 첫 번째는 라인을 점선으로 바꿔보고, 두 번째는 라인으로만 만들어진 형태를 만들어 보겠습니다. 그러려면, 라인을 연결해줄 수 있는 Layer들이 안보여야 합니다. 그래서 Layer들을 보는 것처럼 아주 작게 만들어서 컴포지션에 배치했습니다. 

02. 라인을 연결합니다. 보는 것처럼 라인으로만 만들어진 것처럼 보여집니다. 

03. 그런데 라인들을 확대해서 보면, 연결된 부분들이 약간 끊어진 것처럼 보입니다. Butt Cap으로 설정되어 있기 때문입니다. 이것을 Projecting Cap으로 바꿔줍니다. 그런 다음에 확인해 보면, 연결부분이 자연스러워진 것을 확인할 수 있습니다. 

04. 하나의 라인을 선택한 다음, Line Stroke에서 Dashes 옆에 있는 +버튼을 2번 눌러서 Dash와 Gap을 생성합니다. 값을 조절하여 원하는 점선 형태를 만듭니다. 

05. 이런 방식으로 나머지 라인들도 똑같이 만들어 주면, 그림처럼 만들 수 있습니다. 

06. 이번에는 점선이 생성되는 애니메이션을 간단하게 만들어 보겠습니다. 일단, 원형 Layer를 하나 만들고, Ctrl +D를 눌러서 같은 위치에 복제를 합니다. 

07. 2개의 Layer를 선택한 다음 라인을 만들고, 앞서 작업한 것처럼 라인을 점선으로 만들어 줍니다. 

08. 이제 원형 Layer 하나의 위치값을 애니메이션 해보겠습니다. 

09. 원 하나가 움직이면서 라인이 만들어지는 애니메이션이 간단하게 만들어졌습니다. 

7. Line을 이용하여 공간감 만들기

01. 이번에는 지금까지 배운 것들을 종합하여 원형 점과 아이콘, 그리고 라인만으로 공간을 만들어 보겠습니다. 3D가 지원되는 라인이기 때문에, 그 점을 최대한 강조하여 보는 것처럼 위치를 잡아보았습니다. 지금 Top 뷰와 Camera 뷰의 그림만으로도 어느 정도 감이 잡혔을 것입니다.

02. 지금까지 잘 따라서 했다면, 애니메이션을 한번 만들어 보기 바랍니다. 아래 그림처럼 만들려면, Camera 옵션에서 Depth of Field를 On으로 해놓아야 합니다. 그런 다음 Focus Distance 값을 카메라 움직임에 맞춰 조절해줘야 합니다. 또 한가지 Tip을 드린다면, 기본값으로 설정된 Camera Iris Shape을 Decagon으로 설정해야 합니다. 그 이유는 포커스가 맞지 않았을 때, 카메라 Blur가 되는 부분을 좀 더 자연스럽게 만들기 위해서 입니다.