조금 색다른 2D Camera 애니메이션 Script

motionlab

이번 시간에는 조금 독특한 Script를 소개하겠습니다. 2D 상태에서 카메라를 좀 더 편리하게 사용하게 만들어주는 Boxcam Script입니다. 간단한 슬라이드 쇼나 2D 상태에서의 카메라 움직임을 보여주는 애니메이션에서 편리하게 사용할 수 있는 Script입니다.

1. Boxcam 사용자 프레임 제작

01. 먼저, Composition을 하나를 만들어서 그림처럼 여러 개의 Typo들을 배치합니다. 이 Composition의 이름을 Typo라고 입력합니다.

02. Boxcam에서는 본인이 디자인한 BOX로 애니메이션을 할 수 있습니다. 우리가 카메라로 뭔가를 촬영할 때, 화면에 보여지는 디자인이라고 쉽게 생각하면 될 것입니다. 뒷부분에서 보다 자세하게 설명하겠습니다. 1280 x 720 사이즈로 일러스트에서 간단하게 그림과 같은 프레임을 만들어보겠습니다.

03. 1280 x 720의 Composition을 하나 만들고, Composition의 이름을 Cam이라고 입력합니다.

04. Cam Composition에 맞게 앞서 제작한 Illustrator로 작업한 것을 불러들여 타임라인에 드래그하면 됩니다.

05. 불러들인 Illustrator 파일을 Shape Layer로 만듭니다. 만약, Composition과 사이즈가 맞지 않다면, Shape Layer로 만든 다음에 사이즈에 맞춰주면 됩니다. 그 후에 Illustrator 파일은 삭제해도 상관없습니다.

2. Boxcam 적용하기

01. Boxcam을 적용해보겠습니다. 앞서 만든 타이포가 있는 TypoComposition을 선택합니다.

02. 새로운 Boxcam을 만들어보겠습니다. Boxcam을 만들고자 하는 Composition에서 Create Boxcam 버튼을 클릭해주기만 하면 됩니다.

03. 여기에서 잠시 Script를 적용하는 방법을 간략하게 설명하겠습니다. Script는 Program Files > Adobe > Adobe After Effects CS6 > Support Files > Scripts > ScriptUI Panels 안에 드래그해서 넣어주면 됩니다. 그런 다음에 반드시 Edit > Preferences에 가서 General을 클릭하고, Allow Scripts to Write Files and Access Networks를 체크해줘야 Script를 사용할 수 있습니다. Script를 찾으려면 Window 메뉴의 하단을 찾아보면 됩니다.

04. 그림 같이 Guide Layer가 적용된 상태로 Boxcam이라는 Layer가 새롭게 생성되었습니다.

05. Boxcam으로 보여지는 Layer는 일반적인 Solid Layer에 Mask가 적용되고, Invert 이펙트가 적용된 상태입니다. Invert이펙트가 적용된 이유는 화면에서 잘 보여지게 하기 위해서 입니다.

06. Boxcam이 적용된 Composition이 어떤 컬러를 가지고 있느냐에 따라서 Invert 이펙트 때문에 라인이 잘 보여지지 않는 경우가 있습니다. 바로 지금이 그런 상태입니다. 만약, 이렇게 보이지 않는다면 약간의 수정을 하면 됩니다.

07. Boxcam에 적용된 것들을 하나하나 살펴보겠습니다. Mask가 적용되었고, Mask의 Mode는 Add입니다. 여기에 Invert가 적용되었습니다. 이런 상태에서 Invert 이펙트가 적용되었습니다. Boxcam이 보이지 않는다면, Adjustment Layer 기능을 Off시키고, Stroke 이펙트를 적용시켜서 그림처럼 애니메이션 시 편리하게 사용하면 됩니다.

08. Boxcam Script는 총 3개의 버튼으로 구성되어 있습니다. 내가 보여주고 싶은 Layer들이 있는 Composition에 먼저 Boxcam을 만드는 Create Boxcam 버튼, 새로운 Composition에 앞서 만든 Composition을 드래그하여 올려놓은 후에 만들어주는 Apply to comp 버튼, 맨 오른쪽에 있는 버튼은 Boxcam을 설정할 수 있는 버튼입니다.

09. Boxcam을 설정할 수 있는 오른쪽 버튼을 클릭하면, 그림처럼 설정 창이 나옵니다. Use custom Boxcam size를 클릭하면, 원하는 디자인의 Boxcam을 원하는 사이즈로 만들 수도 있습니다.

10. 이제 Apply to comp 버튼을 사용해보겠습니다. 새로운 Composition을 하나 만듭니다. 이름은 FinalComposition으로 하고, 여기에 앞서 타이포들이 있는 typoComposition을 드래그하여 올려 놓습니다. 그런 다음, typoComposition Layer를 선택합니다.

11. 그리고 Apply to comp 버튼을 누릅니다.

12. 누르는 동시에 typoComposition Layer에 그림처럼 자동으로 Script들이 적용되어 이제부터 Boxcam과 연동됩니다.

3. Boxcam으로 애니메이션 만들기

01. 이제 다시 typoComposition으로 와서 Boxcam으로 애니메이션을 만들어보겠습니다. 정확한 비율로 애니메이션을 하기 위해서 사이즈를 줄일 때는 Boxcam의 Scale을 이용하는 것이 편합니다.

02. typoComposition에서 Boxcam의 사이즈를 줄이고 위치를 이동해 보겠습니다.

03. 그런 다음, Final Composition을 확인해 보겠습니다. 그림처럼 Boxcam이 보여주는 부분만 보여지게 됩니다.

04. 2개의 Composition을 왔다갔다하면서 보는 것이 상당히 불편한 분들은 2개의 Composition을 모두 꺼내놓고 작업하면 됩니다. Composition 상단의 팝업 메뉴에서 New Comp Viewer를 선택합니다.

05. Typo와 FinalComposition 윈도우를 그림처럼 모두 꺼내놓고 작업을 하면, Boxcam을 애니메이션 시켰을 때 어떻게 보여지는 지를 곧바로 확인할 수 있습니다. 여기서 재미있는 것은 typoComposition 윈도우에 정렬한 타이포들이 오른쪽에서 보여지는(노란색으로 체크된) 부분들입니다. 이제 왼쪽의 typoComposition에서 Boxcam을 애니메이션하기만 하면 됩니다.

06. 그림처럼 Boxcam 사이즈를 줄여도 FinalComposition에서의 타이포는 깨지지 않습니다. 물론, 타이포는 Vector라서 당연히 안 깨집니다. 만약, 이미지로 작업을 해도 원래의 이미지가 사이즈 보다 크게 보이지 않는다면 화질에는 이상이 없습니다.

07. 이번에는 이미지로 작업해보겠습니다. 영화 포스터를 그림처럼 어떤 것은 아주 작게, 어떤 것은 아주 크게 배치를 합니다. 또 어떤 포스터를 회전을 시키기도 해서 다양하게 배치합니다. 작업 방식은 앞서 작업한 것과 동일합니다.

08. 왼쪽에 있는 Boxcam을 애니메이션 시켜서 확인해보기 바랍니다.

4. 사용자 Boxcam으로 작업하기

01. 이번에는 원하는 디자인의 Boxcam으로 작업해보겠습니다. 맨 처음에 일러스트레이터에서 만들어서 Cam이라는 Composition을 만들었습니다. 이제 이것을 Boxcam으로 사용해 보겠습니다. 앞서 만든 Typo Composition에 CamComposition을 올려놓습니다. 그런 다음, CamComposition Layer를 선택합니다.