인포그래픽이나 UI작업시 많이 사용되는 Ruler를 이제 애프터 이펙트의 스크립트를 이용하여 강력하면서도 간단하게 만들 수 있습니다.

이번 시간에는 새로 나온 Easyrulers의 간단한 사용법을 알아보고, 이를 응용하는 법도 알아보겠습니다.

1. Install

http://aescripts.com/easyrulers/에서 19.99달러에 판매되고 있습니다. Adobe > Adobe After Effects CS6 > Support Files > Scripts > ScriptUI Panels 안에 드래그하여 넣으면 됩니다. 혹시, 다른 스크립트가 있다면, 그것들도 여기에 넣어두면 됩니다.

2. Option

01. 새로운 컴포지션을 하나 만듭니다.

02. Window 메뉴 하단을 보면, Adobe > Adobe After Effects CS6 > Support Files > Scripts > ScriptUI Panels 여기에 넣어두었던 스크립트들이 모두 보일 겁니다. 여기에서 방금 전에 넣은 easyRulers를 선택합니다. 상당히 많은 옵션이 있는 것 같이 보이지만, 하나하나 알아보면 그리 어렵지 않은 메뉴들입니다. 뒷부분에서 하나하나 알아보겠습니다. 기본 설정 값을 그대로 두고, 맨 하단에 있는 Create Rulers 버튼을 클릭합니다.

03. 컴포지션 윈도우에 여러 개의 눈금이 있는 '자(Rulers)'가 만들어 졌습니다. 이펙트 맨 위에 있는 Gap에 대해 알아보도록 하겠습니다. 수치 값을 50으로 입력하면, 그림처럼 라인의 간격이 넓어졌습니다. Gap은 자의 눈금 간격을 조절할 때 사용됩니다. 수치 값이 클수록 간격이 넓어집니다.

04. 다시 기본 값으로 되돌린 다음에 일단 전체 자의 모습이 보여지도록 중앙으로 위치시켰습니다.

05. 타임라인 윈도우를 살펴보겠습니다. 컴포지션 윈도우와 비교해서 보면 바로 알 수 있습니다. 눈금의 수치가 0~5까지 있습니다. 그래서 Type 레이어가 총 6개가 필요하며, 그것들을 익스프레션으로 조절할 레이어가 또 하나 필요합니다. 그것은 바로 Shape Layer입니다. 아마 눈치가 빠른 분들은 알아챘으리라 생각합니다. easyRulers는 바로 Shape 레이어를 이용하여 제작되는 것입니다. 현재는 수치가 5까지밖에 없지만, 만약 수치 값이 많아진다면 레이어의 수도 그만큼 늘어날 것입니다. 그러면 좁은(?) 타임라인 윈도우에서 이것들을 드래그하면서 작업하기가 힘듭니다. 그래서 불필요한 레이어들을 가려주는 Shy 기능이 필요한 것입니다. 친절하게도 가려줘야 할 것들을 미리 자동으로 체크해 놓았습니다.

06. Shy 아이콘을 눌러서 활성화시키면 불필요한 레이어들은 모두 타임라인에서 안보이게 됩니다.

07. 이제 타임라인에 남아있는 Shape Layer, 즉 easyRulers 레이어에 있는 이펙트들을 살펴보겠습니다. 여기에 있는 이펙트들로 우리가 원하는 형태의 자 모양을 만들어 낼 수 있습니다.

08. 이번에는 원형의 자를 만들어 보도록 하겠습니다. Ruler lines options에서 Arc/circle ruler로 선택하면 됩니다. 그런 다음에 Create Ruler 버튼을 클릭합니다.

09. 같은 값으로 설정된 상태이기 때문에, 같은 길이의 원형 자가 만들어졌습니다. 직선과 원형의 자를 비교해 보기 바랍니다.

10. 앞서 설명했던 Gap 이펙트의 설명에 이어서 계속 설명하겠습니다. With는 각 눈금 라인들의 두께를 결정합니다. 값이 클수록 두께는 두꺼워지며, 일정 값을 넘어가면 마치 라인처럼 하나의 선으로 보여지기까지 합니다.

11. Height는 눈금 라인의 길이를 조절합니다. 값이 커질수록 라인의 길이도 길어집니다. 마치 바코드 같은 느낌이 들기도 합니다.

12. Text Scale은 숫자의 크기를 조절합니다.

13. Text Color는 숫자의 컬러를 바꿀 수 있습니다.

14. 나머지 3개는 라인들의 컬러를 바꿔줍니다. 하나하나 컬러를 지정해 보면 어떤 것들이 바뀌는지 확인할 수 있습니다.

15. 설명하다가 Text Tracking 부분을 빼먹었습니다. 그 이유는 현재 상태에서는 설명이 불가능해서입니다. 이펙트의 옵션에서 Ruler Lines의 값을 260으로 입력합니다. 그러면 아주 긴 자의 눈금들이 보여집니다.

16. Text Tracking을 적용하려면, 적어도 텍스트가 2개 이상은 되어야 합니다. 그래야 자간을 넓히거나 좁힐 수 있습니다. 값이 커질수록 그림에서 보는 것처럼 숫자 사이의 간격이 벌어집니다. 값이 마이너스가 되면 앞뒤의 숫자가 서로 바뀌게 됩니다.

3. 원형 자 만들기

01. 앞서 알려드렸던 것처럼 이번에는 원형 자를 한번 만들어 보겠습니다. Ruler lines의 값을 일단 최대치인 250으로 설정합니다. 이렇게 하는 이유는 큰 원형으로 만들기 위해서입니다.

02. 아마도 조금 시간이 걸릴 것입니다. 스크립트로 20개가 넘는 타입 레이어를 만들고, 거기에 Shape 레이어까지 자동으로 만들기 때문입니다. 그런데 컴포지션 윈도우를 보면 약간 이상하게 만들어졌습니다. 이제 이 겹쳐서 표시되는 부분을 수정해보겠습니다.

03. 이제 이펙트를 조절하여 이것을 바로 잡아보겠습니다. Gap 값을 14.40으로 입력합니다. 값을 조금씩 조절하면서 완벽한 원이 될 때까지 값을 맞춰주면 됩니다. 텍스트의 스케일도 좀 더 작게 만들어 어울리게 만들면 됩니다.

04. Text Distance 값을 크게 하면 그림처럼 원형 눈금과 멀어지게 됩니다.

05. Text Distance 값을 마이너스로 하면 눈금이 있는 안으로 텍스트들이 들어갈 정도로 모이게 됩니다. 숫자들이 눈금의 밖에 있는 것보다는 좀 더 안정적으로 보입니다.

4. Ruler Style

01. 이펙트의 옵션 중에 Create mirror를 체크해봅니다. 말 그대로 거울에 반사된 것처럼 만들어 줍니다. 대칭인 눈금 자가 자동으로 만들어 집니다.

02. Stepping은 기본 값이 1입니다. 숫자가 1 단위로 올라가는 것을 뜻합니다. 이 값을 3으로 입력하면 숫자가 3 단위로 올라갑니다. 기본 값은 Create text numbers가 체크되어 있어서 숫자가 나오는 것입니다. 숫자가 필요 없을 시에는 체크를 해제하면 됩니다.

03. 라인의 스타일을 정하는 것들은 어떤 것들이 있는지 확인해 보도록 하겠습니다. 총 8개의 스타일이 있습니다. 약간씩 틀린 모양임으로 전체를 보면서 스타일을 확인해 보기 바랍니다.

04. 다양한 방법으로 이것들을 응용할 수 있습니다. HUD 디자인의 요소로도 사용될 수 있습니다. 아래의 그림은 순수하게 easyRulers만 가지고 만든 것입니다. Text number를 만들지 않고 제작한 것입니다.

05. 이런 그래픽을 예전에 만들려면 Illustrator에서 제작한 소스를 레이어별로 가지고 와서 작업을 해야 했습니다. 하지만, easyRulers로 13개 정도의 레이어만 만들어주면 간단하게 제작할 수 있습니다. 그리고 또 큰 장점 중에 하나는 바로 이것들을 손쉽게 애니메이션 시킬 수 있다는 것입니다. 라인들의 간격이나 회전 등, 슬라이더 바만 움직여주면 곧바로 애니메이션이 가능합니다.