1. Shape Out Toolkit Script 구성

01. Shape Out Toolkit Script는 크게 4가지 파트로 나눠져 있다고 볼 수 있습니다. 첫 번째 파트는 선택한 Shape Layer 안에 있는 그룹들의 중심축을 한꺼번에 이동시킬 수 있는 기능을 가지고 있습니다. 두 번째 파트는 선택한 Layer에 Null 오브젝트를 연결시켜 애니메이션을 조금 더 편하게 할 수 있도록 해주는 기능을 가지고 있습니다. 만약, Layer에 그룹들이 있다면 그룹을 Null Layer와 연결도 시켜줍니다. 세 번째 섹션은 Shape Layer의 그룹에 있는 Transform의 포지션, 스케일, 로테이션, 투명도 및 속성들의 키프레임을 자동으로 만들어주는 기능을 합니다. 네 번째 섹션은 Stroke나 Fill을 보여주거나 가려주는 기능 및 Line Cap의 모양, Dash, Taper, Wave, Rough Edge 등의 기능을 가지고 있습니다. 그 외에 선택한 오브제들을 원하는 Path를 따라서 움직이게 하는 기능도 있습니다.

02. 첫 번째 파트에 대해 설명하겠습니다. 원하는 Composition을 선택한 후에 Quick Shape을 누르면, Composition 안에 있는 Shape Layer들이 밑의 팝업 메뉴에 나옵니다. 여기에서 M 그룹을 선택합니다.

03. 선택한 Layer에 있는 그룹들이 모두 팝업 메뉴에 나옵니다.

04. Shaft 키를 누른 상태에서 클릭하면 M 그룹만 연결된 Null Layer가 생겨나면서 중심축이 선택한 부분으로 옮겨집니다. M 그룹에 있는 Transform이 새로 생긴 Null Layer와 Expression으로 연결된 것입니다. 이렇게 하면 그룹에 있는 것들을 Layer로 분리하지 않고도 편하게 애니메이션을 할 수 있겠습니다.

05. 다시 정리하자면, 파란색으로 되어 있는 중심축 위치 이동 버튼을 Shift + 클릭하면 Null Layer가 생성됩니다.

06. 원래는 그룹들의 중심축은 그림처럼 하단에 몰려 있습니다.

파란색으로 되어 있는 중심축 위치 이동 버튼을 Alt + 클릭을 하면, 선택된 Shape Layer 안에 있는 그룹들에 모두 동일하게 적용됩니다.

07. Layer를 선택한 다음 Grp Shape을 선택하면, Layer에 포함된 모든 그룹들에 적용됩니다. 중심축 버튼 클릭 시 Shift + 클릭하면, 각 그룹들에 Null Layer가 생성됩니다. 그런데 여기서 문제점을 하나 발견했습니다. 그림처럼 모두 잘 적용이 되었는데 ‘O’라는 그룹이 보이질 않습니다.

08. 그룹에 같은 이름이 있어서 그렇습니다. 이럴 때는 같은 이름이 없도록 바꿔서 적용하면 됩니다.

09. 두 번째 파트를 설명하겠습니다. Layer를 선택하고 이 버튼을 클릭하면, Null Layer가 생겨나면서 그룹의 Transform 속성을 연결시켜 줍니다.

10. 눈 아이콘은 앞서 생긴 Null Layer를 선택한 후에 클릭하면 됩니다. 그러면 그룹의 눈이 꺼지거나 켜지면서 보였다가 안보였다가 합니다. 쉽게 말해서 Layer 안에 있는 그룹들의 Shy On / Off 기능을 한다고 생각하면 됩니다.

11. 이번에는 하나의 Layer에 그룹을 만들어서 3개의 사각형을 넣어보았습니다. 그런 다음에 눈 아이콘 옆의 아이콘을 클릭하면, 그룹으로 된 것들만 보였다가 안보였다가 할 수도 있습니다.

12. Null Layer를 만든 다음에 애니메이션 시켜봅니다. 그런 다음에 Null Layer를 선택한 후에 Bake를 시켜보겠습니다. Bake 버튼을 누르면 Null Layer는 사라지고 애니메이션한 키프레임들이 원래의 Layer 속성으로 들어갑니다.

2. Shape Layer의 그룹 컨트롤

01. 하나의 Layer에 4개의 그룹을 만들어보았습니다. 이제 그룹 안에 있는 것들을 쉽게 컨트롤할 수 있는 세 번째 파트를 설명하겠습니다.

02. 세 번째 파트에 있는 버튼들은 각 그룹의 Transform에 해당하는 기능들을 합니다. 거기에 Stroke Width 버튼도 있어서 Stroke의 두께도 키프레임을 주는 것이 가능합니다. 사용 방법은 간단합니다. Time Marker를 원하는 위치에 놓고, 버튼을 클릭하면, 그림처럼 모든 그룹들의 해당 속성에 키프레임이 만들어집니다.

3. Stroke 관련 컨트롤

01. 빨간색으로 표시한 버튼은 Layer의 Stroke나 Fill의 눈을 끄고 켜는 기능을 하는 버튼입니다. 한번 클릭하면 Stroke이 사라지고, 다시 클릭하면 나타납니다. Shift + 클릭하면 Fill이 사라지고, 다시 Shift + 클릭하면 Fill이 보여집니다. 별것 아닌 듯 보이지만, 실제 작업에서 자주 사용해야 할 경우에 많은 도움이 됩니다.

02. 표시한 것들은 Line Cap을 쉽게 바꿀 수 있는 툴입니다.

03. Dash도 손 쉽게 작업할 수 있습니다. 이 버튼을 클릭하면, Gap이나 Offset을 조절할 수 있는 Expression 컨트롤이 이펙트 창에 생성됩니다. 버튼 아이콘의 모양을 보면 직관적으로 되어 있어서 편하게 적용할 수 있습니다.

04. Taper 기능도 쉽게 적용할 수 있습니다. 클릭하는 동시에 Taper Start Length, Width, Ease를 컨트롤할 수 있는 Expression 컨트롤 이펙트가 적용됩니다. 이펙트 창에서 편하게 조절할 수 있습니다.

05. Wave 기능도 편하게 적용시킬 수 있습니다.

06. 이 Script를 만든 사람이 아마도 Stroke에 적용하는 이펙트 중에서 가장 자주 사용하는 것이 바로 Rough Edge인 듯합니다. 사실 일반적으로 좀 더 자연스럽게 손 그림처럼 보이기 위해 자주 사용하긴 합니다. 이 버튼을 클릭하면, 선택한 Shape Layer에 Rough Edge 이펙트가 적용되고, Null Layer가 생성되면서 여기에도 이펙트가 적용되어져 2개가 연동이 됩니다. 그런데 적용해도 아무런 효과가 나타나지 않을 것입니다. 그 이유는 Rough Edge 이펙트가 모두 비활성된 상태로 적용되기 때문입니다. 적용한 상태를 확인하려면 Shape Layer에 적용된 Rough Edge 이펙트를 활성화시켜야 합니다.

07. 그냥 선택한 Layer에 이펙트가 적용되면 되는데 이렇게 귀찮은 작업을 했을까요? 바로 여러 개의 Layer에 적용했을 경우, 컨트롤을 하기 쉽도록 만들기 위해서 입니다. 예를 들어서 3개의 Layer가 있습니다.

08. 여기에 모두 Rough Edge를 적용시킵니다. 가운데에 있는 곡선을 제외하고 나머지 2개에 Rough Edge를 적용하고 싶다면 2개의 Rough Edge 이펙트만 활성화시켜주면 됩니다.

4. Path에 따라 움직이는 애니메이션 만들기

01. 이번에는 재미있는 애니메이션을 만들어보겠습니다. 라인 1개와 도형 3개를 만듭니다.

02. 라인의 Path 속성을 클릭하고 나머지 3개의 도형을 클릭한 다음에 버튼을 클릭해야 합니다. 여기서 중요한 것은 바로 Path 속성을 그림처럼 선택해야 하는 것입니다. 선택한 속성을 클릭해서 그 안에 있는 Path를 선택하면 안 됩니다.

03. 삼각형 Layer를 먼저 테스트해보겠습니다. 삼각형 Layer를 선택하면 이펙트 컨트롤 창에 그림처럼 4개 정도의 이펙트 컨트롤들이 적용되어 있습니다. Path Offset을 조절해서 키프레임을 만들고 애니메이션을 시키면 현재 있는 위치에서 곡선의 모양처럼 애니메이션이 됩니다.

04. 애니메이션을 시켜서 확인해보면 됩니다.

05. 만약, 빨간색 라인의 모양처럼 그대로 애니메이션이 되는 것을 원한다면, 삼각형 Layer의 Position을 조절하여 라인의 위치에 맞춰주면 됩니다.

06. 다시 애니메이션을 시켜보면 라인에 맞게 움직이는 것을 확인할 수 있습니다.

5. 사이즈에 변해도 Stroke의 두께가 변하지 않게

01. Stroke 작업을 하다 보면 오브제의 사이즈가 커지거나 3D Layer로 만든 경우, 카메라가 클로즈업을 하면 Stroke의 사이즈가 심하게 커지는 경우가 있습니다. 이런 문제를 해결해보겠습니다. 현재 Stroke로 된 2개의 Typo Layer가 있습니다. 2개의 Typo에 똑같이 Stroke의 두께를 5pt로 설정했습니다. 그런 다음에 밑에 있는 Typo Layer를 선택한 다음, Shape Out Toolkit의 오른쪽 하단에 5로 입력합니다. 그리고 펜처럼 생긴 아이콘을 클릭합니다.

02. 적용시키면 그림처럼 Null Layer가 생성되고, 여기에 Stroke 이펙트가 생깁니다.

03. Typo Layer 2개의 사이즈를 키워보겠습니다. 사이즈를 키워서 보니까 확실히 어떤 차이인지 알 수 있을 것입니다. 적용시키지 않은 위에 있는 Typo는 Stroke도 함께 두꺼워졌습니다. 밑에 있는 Typo Layer는 사이즈가 커져도 Stroke는 계속 5pt가 유지됩니다.

04. 마지막으로 상단의 기어 모양의 아이콘을 클릭하면, 원하는 내용이나 삭제하고 싶은 것들을 선택할 수 있습니다.