SCRIPTLayout을 자동 재정렬시켜주는 편리한 Flex Script

motionlab
조회수 1742

다양한 Layout 작업에서 자동으로 정렬시킬 수 있는 Script가 바로 Flex입니다. 자주 사용되지 않지만, 필요할 때, 상당히 많은 시간을 절약시켜줄 수 있는 Script입니다.


1. Flex Line


01. Flex Script는 크게 3가지 파트로 나눠집니다. 먼저, Line에 대해서 알아보겠습니다. 4개 정도 서로 다른 사이즈의 도형을 만듭니다.


02. 4개의 도형을 선택한 다음, Rig Line 버튼을 클릭합니다. 현재 Horizontal로 설정되어 있어서 그림처럼 가로로 모든 도형들이 재배치되었습니다.


03. 각각의 도형에는 Expression이 적용되었습니다. 확인하려면, 각 도형을 클릭해보면 되며, 그런 다음, 이펙트 컨트롤을 확인해보면 됩니다. Flex Line Layer가 적용되어 있으며, 도형에 적용된 Expression을 제어하기 편하도록 만들어 놓았습니다. 여기에 있는 Layer Weight 수치 값을 조절하면, 도형의 사이즈가 커지면서 옆에 있는 도형들의 사이즈는 상대적으로 작아지는 것을 볼 수 있습니다. 이처럼 Flex Script는 자신의 Layer 사이즈와 주변의 다른 Layer 사이즈를 함께 변화시키는 기능을 가지고 있습니다. 각 도형의 사이즈들을 변화시키면서 그 결과를 확인해보기 바랍니다.


04. Timeline Window를 확인해보면, Null Layer가 생성된 것을 볼 수 있습니다. Null Layer를 선택한 다음, 이펙트 컨트롤을 확인해보면, Flex Line Control이 있습니다. 여기에서 Vertical Mode를 체크해주면, 세로 정렬로 바꿀 수 있습니다.



2. Container 기능


01. 이번에는 사용자가 일정한 영역을 정하고, 그 영역 안에서 도형들이 움직이도록 만들어보겠습니다. 일단, Shape Layer로 Contain이라는 직사각형 박스 Layer를 하나 만듭니다.


02. Timeline Window에서 Line Rig Control Layer를 선택하고, 이펙트 컨트롤 창을 확인합니다. 하단에 있는 Container Layer에서 앞서 만든 Contain Layer를 선택합니다. 그러면, 선택한 Contain Layer 안에 도형들이 들어오게 됩니다. 이 안에서만 도형들의 사이즈를 키우고 줄일 수 있게 됩니다.



3. 도형 추가하기


01. 이번에는 Flex 기능을 적용한 상태에서 또 다른 도형을 추가하는 방법에 대해 알아보겠습니다. 앞서 작업한 것처럼 사용자가 정한 박스 안에 4개의 도형이 있습니다. 이 상태에서 마젠타 컬러의 박스를 하나 추가해보겠습니다.


02. 마젠타 박스를 선택한 상태에서 Shift 키를 누르고, Rig Line 버튼을 클릭합니다.


03. 마젠타 박스가 추가되었습니다. 이처럼 다른 Layer를 추가하고 싶으실 때는 Shift 키를 누른 상태에서 클릭하면 됩니다.



4. Flex Grid


01. Flex의 두 번째 탭에 있는 Grid 기능에 대해 알아보겠습니다. Grid 기능을 알아보기 전에 이미지 또는 Shape Layer나 Solid Layer로 그림처럼 사각형 모양의 Layer들을 마치 타일 맞추듯이 배치를 합니다. 그런 다음에 Layer를 2개 정도 선택하고, Rig Row 버튼을 클릭합니다. Rig Row는 가로 라인을 만드는 것이며, Rig Column은 세로 라인을 만드는 것입니다.


02. Composition Window를 확인해보면, 2개의 가로 라인이 생겨난 것을 확인할 수 있습니다. Timeline Window를 보면, 2개의 가이드 라인 Layer가 생성된 것을 알 수 있습니다.


03. 이런 식으로 각각의 Layer들을 선택하고, Rig Row와 Rig Column 버튼을 클릭합니다. 이렇게 모든 Layer들을 하면, 그림처럼 가로 4개, 세로 5개의 점선 라인이 생깁니다.


04. Null Layer를 클릭하면, 전체 이미지들의 Gutter 값을 조절할 수 있습니다. Gutter는 지붕의 홈 틀이나 도로의 배수로 같은 뜻으로 사용이 됩니다. 이미지와 이미지의 사이에 마치 도로의 배수로처럼 일정한 공간이 생기는 것을 의미합니다. 15로 수치 값을 입력하면, 그림처럼 이미지와 이미지 사이에 간격이 생깁니다.




5. Flex Mode


01. Flex의 Mode에 대해 알아보겠습니다. 기본 값은 Stretch입니다. 가로와 세로의 점선 라인이 움직임에 따라서 거기에 맞춰 Layer의 사이즈가 변하게 됩니다.


02. Mode를 None으로 하면, 점선 라인이 움직여도 전혀 사이즈에 변화가 없습니다.


03. Fit Width는 Layer의 폭, 다시 말해서 너비에 따라 변화가 됩니다. 그래서 세로 점선 라인에 맞춰서만 사이즈가 변화됩니다.


04. Fit Height는 Layer의 높이에 따라 변화되기 때문에, 가로 점선 라인에 따라 사이즈가 변합니다.


05. Fit Best는 가로와 세로 점선 라인의 움직임에 따라 가로 또는 세로 라인에 맞춰서 최대한의 정사이즈를 지키면서 변화합니다.


06. Fill Mode는 가로와 세로 점선 라인 중에서 가장 크게 표현할 수 있는 라인을 따라 정사이즈를 유지하면서 변화합니다.




6. Creator


01. Flex의 세 번째 탭은 Creator입니다. 새로운 도형이나 Typo, Stroke 등의 옵션을 조절할 수 있는 메뉴들이 있습니다. Shapes에 있는 4개의 메뉴는 도형들을 만드는 메뉴입니다. Other는 2가지 기능을 가지고 있는데, T는 텍스트를 입력할 수 있는 것이며, 그 옆에 그림 모양으로 있는 버튼은 자동으로 Pre-Comp를 만들어주는 기능입니다. 은근히 이 기능이 편한데, 클릭 한 번에 Pre-Comp를 만들어줍니다.


02. 마지막으로 Strokes에 대해 알아보겠습니다. 이 기능은 일러스트레이터에 있는 기능이긴 합니다. Path에 Stroke을 줄 때, Path의 중앙에 Stroke을 적용하는 것, Path의 안쪽에 Stroke을 적용하는 것, Path의 바깥쪽에 Stroke을 적용하는 것을 결정하는 메뉴입니다.


직접 사용을 해보면 알 수 있겠지만, Grid 기능 같은 경우는 애니메이션 시, 생각보다 꽤 손이 많이 갑니다. 하지만, 수작업으로 Grid 기능처럼 애니메이션을 하려면, 훨씬 더 많은 작업을 해야 한다는 것을 아실 것입니다. Flex와 같은 기능을 하는 Script가 거의 없기 때문에, 당분간은 독보적으로 사용될 것 같습니다.

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