AI 모션 그래픽에서 텍스트와 숫자를 정확하게 유지하는 방법

유화 배경 위에 MDN 숫자 서식 문서 일부를 배치한 ‘AI 모션 그래픽에서 텍스트와 숫자를 정확하게 유지하는 방법’ 표지

가격을 오타 없이 적어도 내용은 틀릴 수 있습니다. 숫자는 연간 요금제의 가격인데 설명에는 월간 요금제라고 적혀 있을 수 있습니다. 백분율 계산은 맞지만 비교 기간이 빠질 수도 있습니다. 원본의 제품명은 정확해도 전환 효과에 마지막 글자가 가려질 수 있습니다. 모션에서는 일반적인 교정 문제에 시간, 잘림, 계속 달라지는 강조가 더해집니다.

따라서 AI 영상 속 텍스트를 정확하게 유지하려면 도구에 철자를 그대로 보존해 달라고 요청하는 것만으로는 부족합니다. 어떤 사실이 승인되었는지, 그 사실이 어떤 표시 문자열이 되는지, 내보낸 시퀀스에서 시청자가 의미 전체를 읽을 수 있는지 알아야 합니다. 이들은 각각 별도의 확인 항목입니다. 깔끔해 보이는 미리보기도 하나는 통과하면서 다른 하나는 놓칠 수 있습니다.

월 US$29에 연 US$348을 청구하는 가상의 연간 구독을 예로 들어, 정보가 승인된 문구에서 실제로 읽을 수 있는 표시 구간에 이르기까지의 과정을 살펴보겠습니다.

애니메이션 전에 승인 문구 목록 만들기

화면에 나올 모든 사실성 문구를 짧은 목록으로 정리하는 것부터 시작하세요. 제품명, 혜택, 통화, 청구 주기, 조건 문구, URL, 날짜, 제품 캡처 속 숫자를 포함합니다. 각 항목에는 사실을 확인할 담당자를 지정하세요. 디자이너는 표현을 개선할 수 있지만, 오래된 랜딩 페이지 스크린샷을 보고 판매 조건까지 추측해야 해서는 안 됩니다.

가상의 발표에서 승인된 제안이 월 $29, 연 $348 일괄 청구라고 가정해 봅시다. 이 세 정보는 함께 전달되어야 합니다. 제작 메모에 “가격: 29”만 적으면 통화와 청구 조건이 모두 사라집니다. 그러면 애니메이션이 숫자 자체는 충실히 재현하면서도 그 주변에 오해를 부르는 메시지를 만들 수 있습니다. 숫자와 함께 의미도 보관하세요.

승인된 표시 문구와 작업 메모는 분리하세요. “더 저렴한 요금제를 쓰면 어떨까?” 같은 문장은 최종 문구와 같은 필드에 두면 안 됩니다. 미확정 항목은 명시적으로 표시해 완성도 높은 임시 문구로 둔갑하지 않게 하세요. 초안이 완성된 것처럼 보이기 시작하면 검토자는 움직임에 집중하면서 정보는 다른 누군가 이미 확인했으리라 생각할 수 있습니다.

항목 승인된 예시 반드시 함께 전달할 정보
대표 가격 월 $29 연 $348 일괄 청구
제품명 Meridian Studio 정확한 대소문자와 띄어쓰기
개선 주장 소요 시간 12.5% 감소 대상 작업의 정의, 비교 기준, 뒷받침하는 증거
마지막 URL 승인된 목적지 화면에 보이는 주소와 실제 캠페인 목적지의 일치

이 작은 목록은 요청이 바뀔 때도 유용합니다. 긴 프롬프트에서 이전 가격이 등장하는 부분을 일일이 찾는 대신, 승인 항목을 갱신하고 이를 사용하는 장면을 나열하면 됩니다. 목록이 영상 검토를 대신하지는 않습니다. 기억에 의존하지 않고 영상을 확인할 수 있게 해 주는 기준 자료입니다.

핵심 영상 텍스트는 편집 가능한 레이어에 두기

장면에 정확한 제안 문구가 들어가야 한다면, 그 문구를 독립적으로 제어할 수 있는 작업 방식을 사용하세요. 별도 텍스트 객체나 명시적인 컴포지션 값은 대개 생성 영상에 새겨진 글자보다 확인하고 수정하기 쉽습니다. 중요한 것은 “편집 가능”이라는 표현에 붙은 약속이 아니라 프로젝트 안에서 실제로 제어할 수 있느냐입니다.

가져온 스크린샷은 사정이 다릅니다. 인터페이스의 레이블은 실제 제품에서 왔기 때문에 정확할 수 있지만, 이미지 안에서는 여전히 픽셀입니다. 레이블을 바꾸려면 원본을 교체하거나 다시 캡처해야 합니다. 스크린샷을 움직인다고 그 안의 소프트웨어가 편집되는 것은 아닙니다. 원본 캡처를 보관하고 어떤 인터페이스 버전을 담았는지 기록하세요.

표현력 있는 배경과 제어 가능한 타이포그래피를 결합할 수도 있습니다. 사실 정보를 담지 않는 부분에서는 배경에 자유를 주고, 승인된 메시지는 확인 가능한 레이어에 배치하세요. 이렇게 분리하면 일상적인 갱신 범위도 줄어듭니다. 청구 조건 하나가 바뀌었다고 제안 주변의 시각 세계 전체를 다시 생성할 필요는 없습니다.

이 방식을 확정하기 전에 의미 있는 수정 하나를 시험해 보세요. 짧은 요금제 이름을 더 긴 이름으로 바꾸거나 빠진 청구 조건을 추가합니다. 텍스트를 쓸모없을 만큼 줄이지 않고도 구성이 이를 수용하는지 확인하세요. 사실 정보를 고칠 때마다 레이아웃이 무너진다면 원래 문구에 지나치게 의존한 디자인입니다. 공간을 늘리거나 정보 위계를 바꿔야 합니다.

실제 렌더링에 전달되는 값 추적하기

한 인터페이스의 필드가 정확하다고 최종 렌더링이 그 값을 사용한다는 보장은 없습니다. 프로젝트에는 기본값, 가져온 데이터, 덮어쓰기 값, 변환 단계가 있을 수 있습니다. 실무에서 확인할 것은 최종 표시 값의 출처와 그 출처가 검토한 자료와 같은지입니다.

Remotion은 props가 결정되는 순서를 문서로 설명합니다. 입력 props는 기본값을 덮어쓸 수 있고, 메타데이터 계산은 이후 사용될 props를 변환할 수 있습니다. 이러한 덮어쓰기와 변환이 끝난 뒤 최종 결정된 값을 추적하세요.

기본 props, 입력 props, 메타데이터가 최종 영상 props에 미치는 영향을 설명하는 실제 Remotion 문서

자신의 프로젝트에서도 이에 해당하는 연결 과정을 쉬운 말로 정리하세요. 승인 문구는 어느 파일에 있나요? 어느 프로젝트가 그것을 사용하나요? 어떤 저장 버전으로 내보냈나요? 짧은 영상에 정교한 추적 시스템까지 필요하지는 않습니다. 다만 어제의 미리보기를 확인해 놓고 설정이 다른 오늘의 렌더링을 배포하는 일은 피해야 합니다.

두 버전이 서로 다르면 어느 쪽이든 더 다듬기 전에 출처부터 확인하세요. 청구 조건 전체 문장처럼 구별하기 쉬운 값을 승인 목록, 편집 가능한 프로젝트, 결과물에서 비교합니다. 불일치는 유용한 진단 단서입니다. 상위 단계의 값을 찾지 않은 채 영상만 계속 다시 생성하면 똑같은 오류가 점점 더 보기 좋은 버전 속에 남을 수 있습니다.

숫자와 화면에 표시되는 형식 구분하기

원시 값과 표시 문자열은 다릅니다. 값 0.125는 비율을 나타낼 수 있고, 문자열 12.5%는 그 비율을 독자에게 보여 줍니다. 누군가 12.5를 저장하고 이를 비율이라고 간주해 백분율 서식을 적용하면 결과는 1,250%가 됩니다. 두 입력은 따로 보면 모두 그럴듯합니다. 어떤 연산이 맞는지는 값의 의미에 달려 있습니다.

MDN의 Intl.NumberFormat 참고 문서는 로케일과 옵션이 구분 기호, 통화 표시, 반올림에 미치는 영향을 보여 줍니다. 구조화된 컴포지션을 구현할 때 유용한 참고 자료입니다. 원시 값, 단위, 표시 규칙을 함께 보관하세요.

실행 결과가 함께 표시된 MDN의 실제 숫자 서식 예제

가상의 예시에서는 저장한 개선 수치가 분수 형태의 비율인지, 이미 백분율로 표현된 값인지 적어 두세요. 상대적 변화와 퍼센트포인트 변화도 구분해야 합니다. 40%에서 45%로 바뀌면 5퍼센트포인트 증가이자 상대적으로 12.5% 증가입니다. 화면에 들어간다는 이유로 더 짧은 레이블을 고르면 타이포그래피만이 아니라 주장 자체가 달라집니다.

애니메이션을 설계하기 전에 반올림 방식을 정하세요. 측정된 시간을 한 장면에서는 정수로, 다른 장면에서는 소수점 둘째 자리까지 표시하면 원자료가 뒷받침하지 않는 정밀도를 암시할 수 있습니다. 적절한 정밀도는 데이터와 용도에서 결정됩니다. 소수 자릿수를 늘린다고 주장의 신뢰도가 높아지는 것은 아닙니다.

지역별 버전에서는 통화 기호만 바꾸지 말고 서식이 적용된 문자열 전체를 검토하세요. 자릿수 구분, 소수점 기호, 공백, 단위 위치가 다를 수 있습니다. 실제 승인 문자열이 들어갈 충분한 공간을 확보하세요. 가장 짧은 영어 예시만 들어가는 레이아웃은 텍스트를 교체할 수 있다는 이유만으로 다른 시장에 사용할 준비가 된 것이 아닙니다.

보기 좋은 숫자 하나만 확인하는 것보다 짧은 테스트 묶음이 더 많은 실수를 잡아냅니다. 0, 데이터상 가능한 음수, 반올림 경계에 가까운 값, 예상되는 가장 긴 금액 문자열을 포함하세요. 비율 예시에서 선택한 백분율 서식을 적용하면 0.125가 12.5%로 표시되어야 합니다. 제안의 월 환산액도 연간 청구액과 맞아야 합니다. 12 × $29 = $348입니다.

테스트에 실패하면 원시 값, 변환, 서식 규칙, 레이아웃 중 무엇이 원인인지 찾으세요. 글자 크기를 바꿔도 잘못 찍힌 소수점은 고쳐지지 않습니다. 소수점을 고쳐도 통화 기호가 잘리는 문제는 해결되지 않습니다. 이들을 구분하면 작은 사실 수정이 불필요한 전면 재설계로 번지는 일을 막을 수 있습니다.

MDN의 출력에서는 서식에 관한 결정을 쉽게 확인할 수 있습니다. 유로 행은 보조 통화 단위 두 자리를 유지하며 해당 로케일의 구분 기호를 사용합니다. 엔화 행은 정수 금액을 표시합니다. 통화 옵션을 바꾸면 표시 관례가 바뀝니다. 환율 계산은 별도 단계입니다. 캠페인에 환산이 필요하다면 그 계산을 명시적으로 저장하세요. 문구 검토에서는 공백, 부호, 구분 기호, 단위 위치를 포함한 출력 문자열 전체를 승인 예시와 비교합니다. 그런 다음 장면이 지원해야 할 가장 긴 금액을 시험하세요. 서식 함수가 올바른 문자열을 반환해도 컴포지션에 놓으면 조건 문구와 겹칠 수 있습니다.

유로와 일본 엔 서식을 보여 주는 MDN 숫자 서식 입력 및 실행 결과의 확대 부분

시간의 흐름 속에서도 조건 문구를 주장과 함께 유지하기

조건 문구가 영상에 들어 있어도 시청자가 주장을 보는 순간 그 주장을 한정하지 못할 수 있습니다. 대표 가격이 혼자 나타나 잠시 머물다 사라지고, 그 뒤에 연간 청구 조건이 서서히 나타나는 경우를 생각해 보세요. 프레임별로 목록을 만들면 두 문자열을 모두 찾을 수 있습니다. 하지만 시청자는 서로 연결되지 않은 두 순간을 경험합니다.

주장과 그에 필수적인 조건을 하나의 읽기 단위로 다루세요. 함께 나타나게 하고 명확한 위계를 유지하며, 실제로 읽는 데 도움이 되는 동일한 정지 구간 동안 보이게 합니다. 조건은 작아서 안 보이거나 금세 사라지지 않으면서도 보조 정보가 될 수 있습니다. 제안의 의미를 실질적으로 바꾸는 조건이라면 이해할 수 있을 만큼의 크기와 시간을 확보해야 합니다.

비교 주장에도 같은 원칙이 적용됩니다. “두 배 더 빠름”이라는 문장의 의미를 이해하는 데 작업과 비교 대상이 필요하다면 이를 식별할 수 있어야 합니다. 맨 끝에 장식처럼 붙인 각주가 앞서 생긴 오해를 바로잡지 못할 수도 있습니다. 주장 담당자에게 스프레드시트의 제목만이 아니라 화면에 표시되는 전체 맥락을 승인해 달라고 요청하세요.

개별 문장뿐 아니라 문장 사이의 관계도 교정하세요. 모션은 페이지에서 함께 읽을 때 정확했던 정보를 서로 떼어 놓을 수 있습니다.

쉬운 검토 방법은 핵심 주장이 처음으로 완전히 읽히는 순간에 일시 정지하는 것입니다. 그 주장을 해석하는 데 필요한 정보도 보이나요? 마지막으로 읽을 수 있는 순간에도 같은 검사를 반복하세요. 잘 묶어 놓은 정적 레이아웃도 등장과 퇴장 과정에서 관계가 깨질 수 있습니다.

아래의 클라이언트 캡처 비교는 시간에 따른 검토가 왜 필요한지 보여 줍니다. 2.4초 시점에 첫 버전은 월 환산액만 표시하고 연간 청구액은 보여 주지 않습니다. 수정 버전은 둘 다 표시합니다. 이 수정의 핵심은 승인된 숫자를 바꾸는 데 있지 않고, 함께 읽을 수 있는 구간을 만드는 데 있습니다. 해당 묶음이 처음 완전히 자리 잡은 순간과 마지막으로 안정적으로 보이는 순간을 검토하세요. 대표 가격이 남아 있는데 조건이 먼저 사라진다면 문장은 다시 불완전해집니다. 이는 문구 검토자에게도 정확한 지시가 됩니다. 금액과 문구는 유지하고 조건을 같은 정지 구간에 배치한 뒤, 달라진 등장과 퇴장 과정을 확인하세요.

2.4초 시점의 실제 클라이언트 캡처로 비교한 월 가격 단독 표시와 같은 가격에 연간 청구 조건을 더한 표시

애니메이션 카운터와 중간값에 주의하기

최종 수치까지 올라가는 카운터는 수많은 중간 숫자를 만듭니다. 그 숫자들은 데이터셋의 관측값이 아니라 시각적 전환일 수 있습니다. 특히 실시간 대시보드처럼 보이는 애니메이션이라면 이 차이를 명확히 하세요. 시청자가 장식용 보간을 과거 기록이나 실제 측정값의 흐름으로 오해해서는 안 됩니다.

간단한 발표에서는 만들어 낸 중간값을 지나가며 세는 대신 승인된 최종 값을 바로 보여 주는 편이 더 명확할 수 있습니다. 카운트업에 목적이 있다면 중간값이 개별 주장처럼 오래 머물지 않도록 하세요. 최종 수치는 안정적으로 읽을 수 있게 하고, 전환 중 어색한 소수, 예상치 못한 부호, 바뀌는 단위가 없는지 검토합니다.

차트도 규모만 다를 뿐 같은 주의가 필요합니다. 막대가 0에서 최종 높이까지 자라면 값이 도달하는 과정을 설명할 수 있습니다. 시간축을 따라 선이 그려지면 일련의 관측값을 암시할 수 있습니다. 원자료가 그 경로를 뒷받침하지 않는다면 움직임은 종점만으로는 전달하지 않았을 이야기를 전하게 됩니다.

실제 데이터를 바탕으로 애니메이션을 만들 때는 움직이는 동안에도 레이블과 시각 요소의 연결을 유지하세요. 최종 프레임이 맞더라도 값 레이블이 잠시 다른 계열에 붙으면 오해를 부를 수 있습니다. 교차, 순서 변경, 척도 간 전환을 확인하세요. 이는 단순한 시각적 흠이 아니라 의미상의 오류입니다.

실제 시청 크기에서 가독성 검토하기

대형 모니터에서 원해상도 프레임을 보면 교정에 도움이 되지만, 그것이 시청 경험의 전부는 아닙니다. 실제로 표시될 법한 크기에서 전체 시퀀스를 재생하며 결과물을 보세요. 단어가 완벽하게 렌더링되어도 글자가 너무 작거나 배경이 시선을 빼앗거나 읽기 전에 정지 구간이 끝나면 읽을 수 없습니다.

알아보는 것과 이해하는 것을 구분하세요. 큰 가격 숫자를 알아보는 데 드는 노력은 가격, 청구 조건, 자격 조건을 함께 이해하는 데 드는 노력보다 적습니다. 후자에는 차분한 화면과 더 많은 시간을 주세요. 전체 메시지, 사용 언어, 동시에 봐야 할 시각 요소를 기준으로 정지 구간을 정하세요.

중요한 메시지라면 다른 사람에게도 읽혀 보세요. 문구 작성에 참여한 사람은 문장이 나타나기도 전에 머릿속에서 끝까지 읽을 수 있습니다. 대본을 본 적 없는 사람에게 보통 속도로 한 번 시청한 뒤 제안을 설명해 달라고 요청하세요. 조건을 놓쳤다면 주의력을 탓하기 전에 크기, 묶음, 표시 시간을 개선하세요.

최종 용도의 형식에서 잘림 경계와 오버레이를 확인하세요. 가로 버전에는 들어가는 줄도 세로로 자르면 통화 기호가 잘릴 수 있습니다. 플랫폼 인터페이스가 마지막 조건 문구를 가릴 수도 있습니다. 실제 배치에 맞는 충분한 여백을 두고, 각 납품 형식을 마스터의 축소판으로 간주하지 말고 개별적으로 검토하세요.

최종 승인은 두 번에 나누어 검토하기

첫 번째는 사실 검토입니다. 완성된 내보내기 파일을 승인 문구 목록과 근거 자료에 대조하세요. 이름, 금액, 단위, 비교 기간, 목적지, 제품 상태를 확인합니다. 주요 프레임은 원해상도로 살펴보세요. 계산한 숫자가 있다면 그것을 보여 주는 애니메이션과 별도로 계산을 검증합니다.

두 번째는 시간 흐름에 따른 검토입니다. 파일을 정상 속도로 재생하면서 전환 중 의미가 달라지는 부분을 찾으세요. 조건 문구가 늦게 나타나거나, 레이블이 대상에서 떨어지거나, 숫자가 근거 없는 진행을 암시하거나, 마지막 메시지가 너무 빨리 사라질 수 있습니다. 영상은 정지 프레임의 철자 검사를 통과하고도 두 번째 검토에서는 실패할 수 있습니다.

수정 요청은 구체적으로 하세요. “연간 청구 조건이 가격보다 늦게 나타납니다”는 고칠 수 있는 타이밍 문제를 지목합니다. “제안이 이상하게 느껴집니다”라고 하면 제작자는 숫자, 위계, 표현 중 무엇이 문제인지 추측해야 합니다. 수정한 뒤에는 해당 시퀀스를 다시 살펴보고 이전에 승인된 정보가 그대로 유지되었는지 확인하세요.

OpenDesign 프로젝트에서는 편집 가능한 버전을 보관하고 미리보기와 내보내기를 할 때 현재 Motion 작업 흐름을 따르세요. 프로젝트 미리보기만이 아니라 내보낸 파일 자체를 검토합니다. 다음 사람이 사실에 관한 전제를 다시 추적하지 않고 영상을 갱신할 수 있도록, 승인 문구 목록을 납품 소스와 함께 보관하세요.

새 검토자가 무엇을 주장하는지, 어떤 조건이 붙는지, 승인된 값의 출처는 어디인지 답할 수 있고, 그 의미를 실제 영상에서 읽을 수 있다면 이 확인 작업은 끝난 것입니다. 보기 좋은 타이포그래피도 도움이 되지만, 정확한 전달은 근거가 되는 사실에서 화면에 보이는 순간까지 이어지는 전체 과정에 달려 있습니다.