제목이 등장하는 동안 배경이 움직이고, 그림이 회전하고, 다음 안내까지 나타난다면 어디부터 읽어야 할까. 만드는 쪽에서는 모든 요소에 이유가 있어도, 처음 보는 사람에게는 여러 목소리가 한꺼번에 들리는 장면일 수 있다.
나는 모션을 만들 때 한 장면에서 가져갈 문장을 먼저 고르고 싶다. 이번 연출의 문장은 ‘읽을 시간을 남기다’다. 제목과 주황색 원, 청록색 도형을 같은 화면에 두고 배치를 달리해 보면, 무엇을 고쳐야 하는지 조금 더 구체적으로 이야기할 수 있다.
제목이 읽힐 자리를 먼저 만든다
위 장면에서는 제목과 큰 원이 가까이 붙어 있고 여러 이동 경로가 시선을 끈다. 이런 구성을 다듬을 때 나는 효과부터 추가하지 않으려 한다. 먼저 제목과 그림 사이를 벌리고, 제목 주변을 지나가는 경로를 정리한다. 도형을 모두 없애기보다 어느 요소가 먼저 읽힐지 자리를 정하는 쪽이다.
아래 장면은 같은 문구와 도형을 유지하면서 제목이 머무는 공간을 확보한 연출이다. 비교할 때는 주변 책상보다 화면 안을 보면 된다. 제목과 원 사이의 거리, 도형이 모인 위치, 시선을 이끄는 경로가 어떻게 달라졌는지 살펴보면 좋겠다.
배치를 정리한 뒤에는 시간도 확인해야 한다. 제목이 나타나자마자 다음 장면으로 넘어가면, 정지 화면이 단정해도 읽을 틈은 부족하다. 처음부터 끝까지 재생하면서 문장을 읽고 뜻을 받아들일 시간이 남는지 살펴본다. 정지 이미지만으로 그 길이를 판단할 수는 없다.
문구를 바꾸는 일이 배경을 흔들지 않게
이 제목을 ‘잠깐, 읽을 시간을 남기다’로 바꾸면 어떨까. 글자가 늘어나니 줄바꿈과 위치를 다시 봐야 한다. 배경 이미지에 제목까지 붙어 있다면 작은 문구 수정에도 그림 전체를 다시 만들어야 한다. 나는 이런 반복을 줄이는 데 제작의 효율이 있다고 본다.
배경은 이미지로 두고, 제목은 별도 요소로 올리고, 움직임의 경로도 나누어 둔다. 그러면 문장을 바꿀 때는 제목의 크기와 줄바꿈을, 장면의 분위기를 바꿀 때는 배경을 살펴볼 수 있다. 실제 편집 화면에서 사용하는 도구는 달라도, 무엇을 따로 고칠 수 있어야 하는지는 먼저 정할 수 있다.
코드로 된 예시가 궁금하다면 Remotion의 HelloWorld.tsx에서 장면을 조합하는 부분을 보고, 이어서 Title.tsx의 titleText와 제목 스타일을 살펴볼 수 있다. 제목의 내용과 표현을 어디에서 다루는지 확인하는 읽기 순서다. 위 그림이 이 템플릿을 그대로 재현한 것은 아니다.
자료를 볼 때도 처음부터 모든 코드를 읽기보다 바꾸고 싶은 문장과 연결된 부분부터 찾는 편이 편하다. 제목만 고쳐 보고 다른 요소가 어떻게 남는지 확인하면, 분리해서 만드는 이유가 눈에 들어온다.
작은 화면에서는 다시 배치한다
가로 화면을 세로로 줄일 때는 제목과 그림이 같은 공간을 두고 경쟁하기 쉽다. 가운데를 잘라 내는 것으로 끝내지 않고, 무엇을 먼저 보여 줄지 다시 정해야 한다. 제목을 위로 옮기거나 문장을 나누는 선택도 그때 함께 검토할 수 있다.
