[익스프레션] 반응형 박스 자막 만들기(1)

자막에 따라 길이가 자동으로 변하는 반응형 자막 만들기

After Effect Blender expression Premiere 모션 그래픽 템플릿 애프터이펙트 익스프레션 프리미어

프리미어 프로에서 영상을 만들 때, 쉽게 자막 작업을 할 수 있도록 애프터 이펙트에서 반응형 자막을 만들어 모션그래픽 템플릿으로 출력하고 프리미어 프로에 연동하여 사용하는 방법에 대해 단계별로 알아보겠습니다.

애프터 이펙트 익스프레션

애프터 이펙트 익스프레션 언어인 JSX는 자바스크립트를 기반으로 합니다. 즉, 기본적으로 자바스크립트를 사용하여 구문을 작성하면 됩니다.

자바스크립트와의 차이점

블록별로 구문을 작성해야합니다.(숨겨진 내용을 확인해보세요.)

익스프레션에서 구문을 작성할 때는 블록별로 구문을 작성해야합니다. 자바스크립트의 경우 다른 파일 또는 다른 블록에서 만들어놓은 함수를 재사용할 수 있지만 익스프레션에서는 다른 레이어나 다른 속성 블록에서 작성한 함수를 불러와서 재사용할 수는 없습니다.

예를 들어 컬러 속성에서 어떤 함수를 만들었을 때 그 함수를 그대로 스트로크 너비 익스프레션에서 불러와서 다른 코드를 작성할 수 없다는 뜻입니다.
같은 함수를 사용해서 코드를 작성한다면 똑같은 함수를 블록마다 작성해줘야 합니다.

// 자바스크립트에서 변수 정의하는 방법
var contents = ...;  // 과거 자바스크립트의 변수 정의 방법
const contents = ...;
let contents = ...;

//익스프레션에서 변수 정의하는 방법
constents = ...;

익스프레션 구문 작성 방법

익스프레션을 사용하기 원하는 속성의 키프레임을 입력할 수 있는 스탑워치 버튼을 alt키와 함께 마우스로 클릭하면 익스프레션 구문을 작성할 수 있는 블록이 활성화됩니다.

활성화된 블록에 자바스크립트를 이용해 코드를 작성하면 되고, 익스프레션에서 사용할 수 있는 함수들의 목록은 익스프레션 언어 메뉴 버튼을 눌러서 찾아볼 수 있습니다.

애프터 이펙트 2025와 이전 버전의 차이점

애프터 이펙트 2025부터는 텍스트 스타일 부분의 구문들이 크게 강화되었습니다. 이러한 변화로 인해 반응형 자막 템플릿을 제작하는 데 있어서 굉장히 편해졌습니다.
가장 중요한 변화는 메소드가 생겼다는 것입니다.

기존에는 텍스트 레이어에서 부분적으로 컬러나 폰트 등을 다르게 표현할 수 있는 모션그래픽 템플릿을 만들 때 저 메소드 부분을 일일히 다 코드로 구현해서 제작을 했어야 했지만 이제는 어도비에서 메소드를 제공해주면서 편하게 제작할 수 있습니다. 그리고 불필요한 레이어나 속성들을 쌓지 않아도 되게 되어 성능적인 부분에서도 많이 개선되었습니다.

애프터 이펙트로 반응형 박스 자막 만들기 – Step 1 텍스트 레이어의 특징

애프터 이펙트로 가장 기본적인 반응형 박스 자막을 만들고, 프리미어 프로에서 만드는 반응형 박스 자막과 어떤 차이가 있는지 비교를 해보도록 하겠습니다.

먼저 애프터 이펙트를 열고, 새로운 컴포지션을 만들고, 텍스트 레이어와 도형 레이어를 추가합니다. (도형 레이어를 추가할 때는 도형 버튼을 더블 클릭해서 추가해주는 것이 익스프레션을 사용할 때는 좋습니다.)

텍스트를 입력하면 레이어 이름이 지금 입력한 텍스트로 들어갑니다. 텍스트 레이어를 도형과 같이 더블 클릭해서 추가해보면 레이어 이름이 <empty text layer>인 것을 볼 수 있습니다.
즉, 도형 레이어는 Shape layer라는 초기 이름이 부여되지만 텍스트 레이어는 처음 추가할 때 별도의 이름이 부여되지 않습니다.
그렇기 때문에 내가 입력한 텍스트가 자동으로 텍스트 레이어의 이름으로 등록되게 됩니다.

텍스트 레이어를 선택하고 enter 키를 치면 레이어의 이름을 바꿀 수 있습니다. 이때 텍스트 레이어의 이름을 바꿔도 내가 입력한 텍스트는 그대로 유지되는 것을 확인할 수 있습니다.

이것은 내가 입력한 텍스트와 텍스트 레이어의 이름과는 분리되어 있다는 것을 의미합니다. 그렇다면 내가 입력한 텍스트는 어디에 데이터가 등록되는 것일까?
아래 이미지와 같이 텍스트레이어의 속성들을 펼쳐보면 Text 속성에 Source Text라는 속성이 있습니다. 이 부분에 익스프레션 구문을 작성해보죠.

["여기에 글을 적어보세요"]

익스프레션 코드는 일반적으로 대괄호([])안에 값을 입력하면 해당 값이 출력 됩니다. (출력하려는 속성 값의 개수(??)에 따라 대괄호를 써도 되고 안써도 되지만 설명하려니 복잡하니 그냥 대괄호를 쓴다고 생각하는게 편합니다.)

텍스트 레이어에는 대괄호를 쓰지 않아도 값은 정상적으로 출력 됩니다. (단, 텍스트는 따옴표로 감싸야 합니다.)
이제 익스프레션에 입력된 값을 지워보면 조금 전에 입력된 텍스트로 다시 돌아가는 것을 볼 수 있습니다.

즉, 텍스트 레이어를 추가한 뒤 값을 입력하면 그 값은 Source Text에 default로 등록되는 것을 알 수 있습니다. 자바스크립트 구문으로 생각해보면 다음과 같이 등록되는 것으로 보입니다.

swich(익스프레션에 등록된 값의 유무) {
   case 1:
      익스프레션에 등록한 값;
      break;
   default:
      텍스트 레이어에 입력한 값;
}

익스프레션에 등록한 값이 있으면 해당 값을 출력하고, 없으면 우리가 디폴트로 입력한 값이 출력되는 구조입니다.
이때 텍스트 레이어에서 출력되는 값은 문자열(string)이라는 것을 명심해야 합니다.
즉, 텍스트 레이어에 숫자 1을 입력해서 출력했다고 하더라도 그 값은 문자열로 바뀌어서 출력 됩니다.

애프터 이펙트로 반응형 박스 자막 만들기 – Step 2 sourceRectAtTime()

우리는 텍스트 길이에 따라 텍스트 아래 있는 박스 크기가 자동으로 바뀌는 형태의 자막을 제작하려고 합니다. 이때 사용해야하는 익스프레션 코드는 sourceRectAtTime()입니다.

sourceRectAtTime()은 레이어 안에 들어 있는 오브젝트의 속성 4가지를 알려줍니다. 그 4가지는 다음과 같습니다.

const objLeft = thisLayer.sourceRectAtTime().left; // 이 레이어 안에 들어있는 오브젝트의 left position 값

const objTop = thisLayer.sourceRectAtTime().top; // 이 레이어 안에 들어있는 오브젝트의 topposition 값

const objWidth = thisLayer.sourceRectAtTime().width; // 이 레이어 안에 들어있는 오브젝트의 width 값

const objHeight = thisLayer.sourceRectAtTime().height; // 이 레이어 안에 들어있는 오브젝트의 height 값

sourceRectAtTime()을 이용해 텍스트 레이어에 입력한 텍스트와 딱 맞는 크기의 박스를 만들어보겠습니다. (도형 레이어의 이름은 Box로 바꿔줬습니다.)

// 익스프레션에서는 변수를 정의할 때 반드시 const를 붙지지는 않아도 무방합니다.

// 익스프레션에서 다른 레이어의 속성 값을 참조할 때 레이어의 이름으로 참조할 레이어를 찾을 수 있습니다. 따라서 레이어 이름을 알기 쉽게 바꿔주는 것이 익스프레션 구문을 작성할 때 편합니다.

// renderTextLayer는 이 컴포지션의 이름이 TEXT라는 레이어라고 변수를 정의합니다.

const renderTextLayer = thisComp.layer("TEXT");
const boxWidth = renderTextLayer.sourceRectAtTime().width;
const boxHeight = renderTextLayer.sourceRectAtTime().height;

[boxWidth, boxHeight] // 결과값은 대괄호로 감싸서 출력합니다. (가로와 세로값을 둘 다 출력해야 하므로...)

이렇게 입력해보세요! (코드 작성할 때 문장이 끝나면 마침표 붙이듯이 세미콜론(;)을 꼭 입력해주세요! 세미콜론(;)을 빠뜨리면 에러를 볼 수 있습니다.)

그러면 Box의 가로와 세로가 정확하게 텍스트와 같은 크기로 변하는 것을 확인할 수 있습니다.
텍스트를 마음대로 바꿔보면 박스 크기가 변하는 것을 볼 수 있습니다.

텍스트 레이어와 딱 맞게 정렬 시켜보면 텍스트와 딱 맞는 크기로 박스가 변하는 것을 볼 수 있습니다.

애프터 이펙트로 반응형 박스 자막 만들기 – Step 3 박스와 텍스트 위치 맞추기(조정 레이어와 Slider Control)

지금은 텍스트를 바꿀 때마다 박스 사이즈는 잘 바뀌지만 텍스트와 박스의 위치가 계속 틀어지는 것을 볼 수 있습니다.
그 이유는 텍스트 레이어의 포지션 값과 박스의 포지션 값이 틀리기 때문인데요.
포지션을 맞추기 전에 박스 레이어에 대해서 먼저 살펴보겠습니다.

도형 레이어의 특징

Rectangle tool(도형 툴)로 도형을 박스를 그릴 때 도형 툴을 더블클릭해서 그리는 것이 익스프레션 작업을 할 때 좋다고 위에서 말했는데 그 이유를 먼저 살펴보겠습니다.

도형 툴로 도형을 그리면 도형 레이어 안에 도형 오브젝트가 들어가게 됩니다. 그리고 이때, Transform이 두개가 생기게 됩니다.
하나는 레이어 안에서 도형의 Transform이고, 하나는 레이어 자체의 Transform입니다.

즉, 도형 레이어는 레이어 안에서 여러 가지 도형을 쌓아서 다양한 형태의 오브젝트를 만들어낼 수 있는데 레이어 안에서 각각의 도형 오브젝트들의 Transform을 조절할 수 있어야겠죠?
그렇기 때문에 각각의 도형들과 레이어의 Transform이 분리되어 있습니다.
그러면 도형 툴을 더블클릭하지 않았을 때와 더블클릭 했을 때를 비교해보겠습니다.

더블 클릭으로 그렸을 때는 도형 오브젝트의 포지션이 (0,0)으로 잡히는 것을 확인 할 수 있습니다. 그리고 더블 클릭을 하지 않고 그냥 그렸을 때는 레이어 안에서 도형의 포지션이 (0,0)이 아닌 다른 값으로 정해지는 것을 볼 수 있습니다.
이것은 도형이 레이어 안에서 (-16, -67.5)에 위치하는 것을 뜻하겠죠?

보통 텍스트와 함께 박스가 움직이도록 익스프레션으로 작업을 할 때는 텍스트 레이어는 Transform이 레이어 Transform 밖에 없기 때문에 레이어끼리 함께 움직이도록 설정하는 것이 편합니다. 그리고 애프터 이펙트의 단축키로 여는 Transform도 레이어의 Transform입니다.
예를 들어서, 포지션 값을 바꾸기 위해 단축키 p를 눌러보세요. 그러면 포지션 값을 수정할 수 있게 포지션값이 표시가 되는데 이 포지션 값이 레이어의 포지션 값입니다.
만약 레이어 안에서 도형의 포지션이 틀어져 있다면 레이어의 위치 값을 조절한다고 해도 오차가 생길 수 밖에 없죠.
그래서 특별히 레이어 안에서 위치 값을 바꿀 필요가 없는 이상은 오브젝트의 위치를 기본 값(0,0)으로 설정하고 익스프레션 작업을 하는 것이 혼선이 없습니다.

박스 오브젝트의 앵커를 잡고 움직여 보세요. 그리고 도형 레이어의 포지션이 어떻게 바뀌는지 살펴보세요. 앵커가 화면의 좌측 상단으로 가면 (0,0)이 되고, 우측 하단으로 가면 (1920,1080)으로 바뀌는 것을 확인할 수 있습니다.
즉, 애프터 이펙트의 화면에서 포지션 값은 결국 앵커의 포지션 위치를 뜻합니다. 우리가 애프터 이펙트에서 익스프레션으로 포지션 값을 맞출 때 레이어의 앵커의 포지션이 어디에 있어야 할 지를 생각하면 된다는 뜻입니다.

그런데 이때, 레이어의 앵커를 바꾸면 포지션 값도 변하지만 앵커 포인트 역시 변하는 것을 확인할 수 있습니다. 두 값이 복합적으로 움직이기 때문에 직관적으로 확인할 수 없으니까 레이어의 앵커 포인트를 고정해보겠습니다.

레이어의 앵커의 위치를 우리가 그린 박스의 정 중앙으로 위치시켜보겠습니다. 이때도 우리는 sourceRectAtTime()을 사용합니다.
레이어의 앵커 포인트(Anchor Point)의 익스프레션 창을 열고 다음과 같이 코드를 작성해 보세요.

//애프터 이펙트에서는 변수를 정의할 때 const나 let을 사용하지 않아도 된다고 했습니다.
a = thisLayer.sourceRectAtTime(); //a는 이 레이어의 오브젝트의 소스 정보 4가지를 불러옵니다.(left, top, width, height)

x = a.left + a.width/2; 
//앵커 포인트의 x값은 a라는 오브젝트의 left값에서 오브젝트(박스)의 너비의 절반으로 정의합니다.
//이러면 박스 사이즈가 바뀌더라고 앵커포인트는 항상 박스 너비의 가운데에 위치하게 됩니다.
y = a.top + a.height/2;
//마찬가지로 앵커 포인트의 y값이 항상 박스 높이의 가운데 위치하게 됩니다.

[x, y] //대괄호로 두 개의 값을 출력합니다.

이렇게 되면 박스의 앵커 포인트는 항상 박스의 정 중앙에 위치하게 됩니다. 앵커 포인트를 고정시켰으니 박스를 잡고 움직여보세요.

앵커 포인트는 고정되어 있으면서 포지션 값만 변하는 것을 볼 수 있습니다. 그리고 포지션 값은 앵커가 좌측 상단에 갈 때 (0,0), 우측 하단으로 갈 때 (1920,1080)이 되는 것을 확인할 수 있습니다.
이렇게 레이어의 앵커의 위치가 곧 레이어의 포지션 값을 뜻한 다는 것을 우리는 알 수 있습니다.

텍스트 레이어와 박스 레이어의 위치 맞추기

자 그럼 이제 텍스트의 위치와 박스의 위치가 어긋나지 않고 항상 텍스트와 박스가 일치하게 만드려면 어떻게 하면 될까요?
텍스트 레이어의 앵커 포인트와 박스 레이어의 앵커 포인트를 각 레이어 오브젝트의 정 가운데로 고정한 뒤 앵커가 항상 같은 위치에 가도록 포지션 값을 통일시켜주면 됩니다.

조금 전에 박스 레이어의 앵커 포인트를 오브젝트의 정 중앙으로 맞췄습니다. 이 앵커 포인테에 작성한 코드를 텍스트 레이어의 앵커 포인트에 그대로 넣어주면 됩니다. 앵커 포인트의 단축키는 a입니다. 텍스트 레이어를 선택하고 a를 눌러서 앵커 포인트를 연 뒤 익스프레션 코드를 복사해서 붙여넣어주시면 됩니다.
그런데 만약 똑같은 코드를 여러 레이어에 복붙해야 한다고 하면 이렇게 일일히 ctrl+C+V를 하는 것도 일이겠죠?

이럴 때는 복사하려는 익스프레션이 있는 속성을 선택하고 마우스 우클릭을 해서 익스프레션만 복사한 뒤 붙여 넣을 레이어들을 모두 선택한 다음 ctrl+V를 눌러주면 위와 같이 똑같은 코드가 들어가게 됩니다.

그 다음에 위 그림과 같이 텍스트 레이어와 박스 레이어의 포지션 값을 똑같이 만들어 주면 텍스트와 박스가 똑같아지는 것을 확인할 수 있습니다.
이대로 끝내도 되고, 박스 레이어가 텍스트 레이어를 따라다니록 Parent 세팅을 해도 되고(텍스트의 문단을 가운데 정렬로 맞추면익스프레션으로 포지션을 맞추지 않아도 됩니다. 하지만 앵커의 위치에 따라 변수가 발생합니다.), 익스프레션으로 박스의 포지션이 텍스트 레이어의 포지션을 참조하도록 연결해도 됩니다.

하지만 가장 변수가 없이 가장 확실하게 텍스트와 폰트가 일치하도록 만드는 방법은 익스프레션으로 박스의 포지션이 텍스트 레이어의 포지션을 참조하도록 연결하는 것입니다. 앞의 두 방법은 텍스트나 박스의 위치가 바뀌거나 폰트 종류가 바뀌거나 할 때 어긋나는 경우도 생길 수 있기 때문이죠.

애프터 이펙트로 반응형 박스 자막 만들기 – Step 4 박스 레이어에 여백 만들기

자! 그런데 지금은 박스가 텍스트와 너머 딱 맞아서 답답한 느낌이 조금 드네요. 박스에 여백을 조금 주고 싶은데요. 박스 사이즈를 조금 조절해주면 되겠죠?

const renderTextLayer = thisComp.layer("TEXT");
const boxWidth = renderTextLayer.sourceRectAtTime().width + 20;
//상수를 더해줍니다.
const boxHeight = renderTextLayer.sourceRectAtTime().height + 10;
//상수를 더해줍니다.
[boxWidth, boxHeight]

그런데 폰트의 특성이나 사이즈에 따라 여백은 조금씩 바뀔 수도 있을 것 같아요. 그래서 여백을 폰트에 따라 프리미어에서 조절해서 쓸 수 있도록 변수로 빼겠습니다.
이때 필요한 것이 Slider Conrtol입니다.

조정 레이어를 하나 추가하고, 레이어 이름을 Box_Control로 바꿔줄께요. 그리고 효과 패널에서 control을 검색하면 Slider Control이 뜨는 데 슬라이더 콘트롤을 두 개 조정 레이어에 넣고, 이름을 각각 Width_Blank, Height_Blank로 바꿔줍니다.

그리고 박스 도형의 사이즈에 가로 여백과 세로 여백을 각각 wb, hb라는 변수로 만들어주고 boxWidth와 boxHeight에 각각 더해주세요.

const renderTextLayer = thisComp.layer("TEXT");

const wb = thisComp.layer("Box_Control").effect("Width_Blank")("Slider"); 
// 박스 가로 여백
const hb = thisComp.layer("Box_Control").effect("Heigth_Blank")("Slider");
// 박스 세로 여백

const boxWidth = renderTextLayer.sourceRectAtTime().width + wb; //여백 더하기
const boxHeight = renderTextLayer.sourceRectAtTime().height + hb; //여백 더하기
[boxWidth, boxHeight]

만약 여백을 코드로 어떻게 입력해야할 지 모르겠다면 소용돌이 모양의 버튼을 클릭하고 마우스로 드레그 해서 연결하세요. 그러면 자동으로 참조 코드가 들어갑니다.

자 이렇게 되면 우리가 조정 레이어에 넣은 슬라이더 콘트롤로 박스의 여백을 조절할 수 있게 됩니다. (조절해보세요.)

애프터 이펙트로 반응형 박스 자막 만들기 – Step 5 모션그래픽 템플릿으로 저장하기

모션그래픽 템플릿으로 저장하기 전에 자막의 위치를 먼저 결정하겠습니다. 보통 박스 자막의 경우 영상의 가운데 하단에 위치하죠. 그리고 보통 플레이어의 플레이어 바가 영상 하단의 5~10%정도를 차지하게 됩니다. 따라서 영상 하단에서 10% 올라온 위치에 자막을 두면 플레이어 바에 자막이 가려지지 않고, 하단에 정확히 위치하게 됩니다.

지금 박스는 텍스트를 따라다니도록 되어 있으니 텍스트의 포지션(단축키 p)를 열고 익스프레션을 다음과 같이 작성해 보세요.

x = thisComp.width/2;
y = thisComp.height*0.9 - thisLayer.sourceRectAtTime().height/2 - thisComp.layer("Box_Control").effect("Heigth_Blank")("Slider")/2;
//이 컴프의 높이(지금은 1080)의 90%의 위치에서 텍스트 레이어의 높이의 절반과 박스의 세로 여백의 절반을 빼면 정확하게 세이프 마진 위에 자막이 위치합니다.
[x, y]

thisComp에서 바로 width값과 height값을 찾아낼 수 있으므로 위와 같이 작업을 한다면 컴포지션 사이즈를 바꾸더라도 지금 제작한 자막은 항상 영상 하단에서 10% 위의 가운데에 위치하게 됩니다.
프로젝트의 특성상 4k가 될지 Full HD가 될지 모르기 때문에 영상 사이즈를 상수로 입력하는 것보다는 컴포지션의 가로와 세로 정보를 받아서 작업하는 것이 추후 작업할 때 용이합니다.

이제 모션그래픽 템플릿으로 만들겠습니다. 모션그래픽 템플릿에서 어떠한 속성들을 편집할 수 있도록 할 것인지 결정하고 해당 속성들을 선택한 다음 마우스 우클릭으로 Essential Graphics에 속성을 추가하세요. 그러면 Essential Graphic창이 열리면서 속성이 추가되는 것을 볼 수 있습니다.

아니면 애프터 이펙트의 윈도우 탭에서 Essential Graphic 창을 열고 원하는 속성을 선택해서 드레그 해서 넣어도 됩니다.

이때, Essential Graphic에서 Primary(어떤 컴포지션을 모션그래픽 템플릿으로 만들 것인지 선택)를 잘 체크하세요. 내가 모션그래픽 템플릿으로 만들고자 하는 컴포지션이 제대로 선택했는지 체크해야합니다.

이 박스 자막에서는 프리미어에서 텍스트를 바꿀 수 있어야 하고, 폰트, 폰트 사이즈 등의 텍스트 속성을 바꿀 수 있어야 하며, 박스의 여백을 조절할 수 있어야 합니다.
따라서 속성을 다음과 같이 빼겠습니다.

텍스트의 Edit Properties를 클릭하면 위와 같이 폰트 속성들을 뺄 수 있습니다. 프리미어에서 보여지는 속성들의 이름도 수정할 수 있습니다.

하지만 아쉽게도 텍스트의 색, 스트로크 등을 뺄 수 있는 옵션은 없습니다. 이 부분은 별도로 작업해서 빼도록 만들어야합니다.
해당 부분은 다음에 다루도록 하겠습니다.

슬라이더 컨트롤들의 Edit Range를 클릭하면 프리미어에서 슬라이더가 움직일 수 있는 영역을 지정할 수 있습니다. 가로 세로 여백의 경우 여백이 너무 길어져도 디자인 상 별로 좋아보이지는 않을 테니 to를 200으로 바꿔서 0~200까지 슬라이더 값을 바꿀 수 있도록 세팅하겠습니다.

박스의 색을 바꿔야할 수도 있으니 박스 컬러도 속성으로 빼겠습니다.

적당히 이름을 바꿔주세요.

Export Motion Graphics Template… 버튼을 눌러 적당한 위치에 저장을 해주세요.

프리미어를 열고 그래픽 템플릿 탭에서 방금 제작한 자막 템플릿을 추가해보세요. 윈도우의 파일탐색기에서 여러 개를 한 번에 선택해서 드래그 해서 추가해도 됩니다.

우리가 애프터 이펙트에서 적었던 이름이 그대로 들어왔습니다.(모션그래픽 템플릿의 파일명이 아닙니다. 애프터 이펙트에서 Name에 등록한 이름으로 들어옵니다.)

이제 타임라인에 얹고 박스 자막을 선택해보세요.

우리가 의도했던 대로 자막이 정확하게 세이프 마진 위에 올라갑니다. 그리고 프리미어에서 편집할 수 있도록 뺐던 속성들이 모두 들어왔습니다. 텍스트를 바꿔보고, 속성들을 만져보세요.
모두 의도했던 대로 동작합니다.

모두 의도했던 대로 동작합니다. 박스 여백의 슬라이더 컨트롤도 0~200까지 선택할 수 있고, 폰트를 바꾸거나 키워도 세이프 마진에 딱 붙어서 자막이 들어갑니다.

모션그래픽 템플릿을 타임라인에 얹으면 프리미어의 프로젝트에 모션그래픽 템플릿 폴더와 함께 타임라인에 추가한 템플릿이 생성되는 것을 확인할 수 있습니다.
이 부분은 추후에 한 번 이야기할 때가 있으므로 이런게 있구나 정도만 기억하셔도 됩니다.

사실 이번에 만든 반응형 박스 자막의 경우 프리미어에서 만들면 매우 쉽게 만들 수 있습니다. 도대체 왜 이렇게 복잡하게 만드는지 의문이 들 정도로 쉽게 만들 수 있죠. 하지만 장점이 있으면 단점이 있는 법!
다음 글에서 프리미어 프로에서 만드는 반응형 자막과 애프터 이펙트에서 만든 반응형 자막의 차이점에 대해 이야기 해보고, 애프터 이펙트에서 반응형 자막을 점차 디벨롭 시키는 과정을 기록해보려고 합니다.

그럼 이만~