Shape Layer를 사용하다 보면, 가장 손이 많이 가는 부분이 Stroke 패널 옵션들입니다. 그 이유는 Trim Path로 애니메이션할 때, 가장 많이 사용하는 것이 Stroke이기 때문입니다. 바로 이 부분의 기능들을 좀 더 편리하게 사용할 수 있도록 만들어주는 Script가 바로 FX_StrokeSetter입니다.

1. Install

01. Scripts 폴더 안에 있는 ScriptUI Panels 안에 넣어주면 됩니다. FX_StrokeSetter Script는 FX_StrokeSetter.jsxbin 파일과 FXStrokeSetterAssets 폴더로 구성되어 있는데, 폴더와 Script 파일을 2개 모두 넣어주면 됩니다. FXStrokeSetterAssets 폴더 안에는 버튼의 이미지들이 있기 때문에, 반드시 함께 넣어줘야 합니다. https://aescripts.com/fx-strokesetter/ 에 들어가서 무료로 다운 받을 수 있으며, 19달러로 되어 있지만, 0달러로 입력하고 다운을 받으면 됩니다. 물론, 회원 가입부터 먼저 한 다음에 진행하면 됩니다.

FX_StrokeSetter Script는 가로 형태 및 세로 형태와 패널의 사이즈에 따라서 자동으로 재배치됨으로써 상당히 유연한 구조를 가지고 있습니다.

02. Stroke Caps 부분입니다. Butt, Round, Projecting 순서입니다. 스트로크의 끝부분 모양을 변하게 하는 옵션입니다.

03. Stroke Corners이며, Miter Join. Round Join, Bevel Join 순서입니다. 라인이 꺾이는 부분의 모양을 정하는 옵션입니다.

04. Stroke Align이며, 스트로크가 보일 때, Path가 그려진 부분에서 어떤 위치에서 스트로크가 보일지를 정해주는 옵션입니다. 이 옵션은 유일하게 Illustrator에 있는 Stroke 옵션에 있지만, After Effects에는 없는 옵션이었습니다.

05. Stroke Taper이며, 라인의 시작 부분과 끝 부분의 두께의 차이를 만들어 줄 수 있는 옵션으로, Taper Start와 Taper End 버튼입니다. Layer를 선택한 다음에 그냥 클릭을 하면, Layer의 Taper 부분에 Expression이 바로 적용됩니다. ALT + 클릭을 하면, Local controls이라고 하여 Layer에 Expression 이펙트가 적용되며, Taper에 있는 Expression과 자동으로 연결되어, 정말 편합니다. 

ALT + Shift를 클릭하면, Global controls이라고 하여 새로운 Null Layer가 생성되고, 여기에 Expression 이펙트가 적용되며, Taper에 있는 Expression과 자동으로 연결됩니다.

06. 맨 왼쪽에 있는 버튼은 Stroke Wave 버튼입니다. Wave Amount 값을 조절하여 스트로크의 형태를 Wave로 만들어줍니다. 두 번째는 Stroke Dashes 버튼은 점선을 만들어주는 옵션입니다. 뒷부분에서 다시 설명하겠습니다. 

세 번째 버튼은 Stroke Reset 또는 Strokes의 Width, Color, Opacity 속성을 컨트롤할 수 있게 만들어줍니다. Shift + 클릭을 하면, 선택된 Layer들에게 적용된 모든 Expression이 사라집니다.

- ALT + 클릭을 하면, Strokes의 Width, Color, Opacity에 대한 Local 컨트롤이 만들어집니다.
- ALT + Shift 클릭을 하면, Strokes의 Width, Color, Opacity에 대한 Global 컨트롤이 만들어집니다
- Help 버튼을 클릭하면, Composition 안에 있는 모든 Shapes Layer들을 선택하게 됩니다.

2. Script 적용

01. Stroke Caps를 클릭하여 Stroke이 변하는 것을 확인하기 바랍니다.

02. Stroke Corners입니다. 직선이나 곡선보다는 꺾어지는 부분이 좀 더 확실한 효과가 납니다.

03. Stroke Align입니다. 기존 Stroke 옵션에는 없던 기능입니다. Path의 위치를 기준으로 Stroke의 위치가 중앙, 내부, 외부로 표시되게 해주는 기능입니다.

04. Stroke Taper는 Stroke 두께를 조절할 수 있는 기능입니다. 시작점과 끝점의 차이를 이용하여 재미난 것들을 만들 수 있습니다. Start Taper를 그냥 클릭하면, 그림처럼 현 상태에서 그냥 수치 값을 조절한 것처럼 바뀝니다.

05. ALT + 클릭을 하면, 그림처럼 선택된 Layer의 Taper 옵션들에 Expression이 적용되고, 그것들이 이펙트들과 연동되어 있는 것을 알 수 있습니다. 타임라인에서 작업을 하는 것보다 Effects 창에서 이렇게 작업하는 것이 더 편합니다.

06. ALT + Shift 클릭을 하면, 새로운 Null Layer가 생성되고, Taper에 적용된 Expression이 Null Layer에 있는 이펙트들과 연동되어 나오게 됩니다.

07. 만약, 여러 개의 Layer를 선택하여 한꺼번에 컨트롤하고 싶다면, 이렇게 작업하는 것이 가장 좋습니다. 여러 개의 Layer를 선택한 다음, ALT + Shift를 누른 상태에서 클릭하면, 새롭게 생기는 Null Layer의 이펙트 안에서 간단하게 여러 개 Layer들의 Taper 옵션을 컨트롤할 수 있습니다.

08. End Taper 버튼도 앞서 설명한 Start Taper와 같습니다.

09. Wave도 앞서 설명한 Taper와 동일한 구조를 가지고 있습니다.

10. Reset Stroke Dashes, Wave and Taper FX 버튼입니다. Shift + 클릭을 하면, 적용했던 모든 Expression과 이펙트들이 사라져서 초기화됩니다. ALT + 클릭을 하면, Layer에 적용되고, 이펙트와 연동되는 Stroke Width, Color, Opacity가 만들어집니다. ALT + Shift 클릭을 하면, 새로운 Null Layer가 생성되고, 여기에 이펙트와 연동되는 Stroke Width, Color, Opacity가 만들어집니다.

11. Dash 버튼입니다. Stroke을 점선으로 바꿔주는 기능을 합니다. 클릭하면, 그림처럼 Dash와 Gap을 입력할 수 있는 컨트롤 창이 하나 나옵니다. 물론, +버튼을 클릭하여 순서대로 원하는 Dash와 Gap을 만들면 됩니다. +버튼을 누르면, Dash와 Gap이 순차적으로 각각 3개씩 생성됩니다.

12. 기본적인 점선을 만들려면, Dash와 Gap이 각각 하나씩만 있어도 그림과 같은 점선을 만들 수 있습니다. 여러 개의 Layer를 동시에 선택한 후에 ALT + Shift 클릭을 하면, 새로운 Null Layer가 생기면서 전체를 컨트롤할 수 있는 이펙트가 생깁니다.

13. Reset Stroke Dashes, Wave and Taper FX 버튼을 ALT 키를 누른 상태에서 누르면, 그림처럼 Stroke의 두께, 컬러, 투명도를 조절할 수 있는 것들이 이펙트 형태로 각 Layer마다 생깁니다.

14. ALT + Shift 클릭을 하면, Null Layer가 새롭게 생기고, 선택된 Layer들을 한꺼번에 컨트롤할 수 있게 됩니다. 현재 맨 위의 직선을 뺀 나머지를 적용시켜 본 상태입니다.

이처럼 Shape Layer의 Stroke가 가지고 있는 여러가지 옵션들을 더 쉽고 편하게 만들어주는 Script가 FX_StrokeSetter입니다. 이펙트 컨트롤에서 좀 더 접근성을 편하게 만들어주는 Script로써는 아직까지 독보적이라 할 수 있겠습니다.