내보낸 모션 그래픽에서 글꼴이 바뀌는 것을 막는 법

미리보기에서는 두 줄에 맞던 제목이 내보내기에서는 세 줄이 됩니다. 원본의 글꼴 이름은 바뀌지 않았습니다. 텍스트도 같습니다.

가능한 일입니다. 글꼴 선언은 요청이지 무엇이 렌더링됐는지에 대한 증거가 아니기 때문입니다. 불일치는 글꼴 대체를 일으킬 수 있습니다. 미리보기는 로컬 설치 글꼴을 쓰지만 렌더러는 찾지 못해 대체 글꼴을 선택합니다. 의도한 글꼴이 로딩되기 전에 대체 글꼴을 캡처할 수도 있습니다. 요청한 서체군이 있어도 필요한 굵기나 언어 문자가 없을 수 있습니다.

모션 그래픽에서 타이포그래피 실패는 특히 큰 영향을 줍니다. 배치와 시간이 연결되어 있기 때문입니다. 줄바꿈 하나가 등장을 옮기고, 스크린샷을 가리고, 자막을 유지 시간에 비해 너무 길게 만들 수 있습니다. 편집기에서 올바른 서체군을 고르는 것보다 넓은 과제입니다. 각 프레임이 렌더링되는 순간 의도한 글꼴을 사용할 수 있고, 선택했고, 측정했고, 준비된 상태여야 합니다.

내보내기의 글꼴 대체와 레이아웃 변경 구분하기

미리보기와 최종 내보내기의 같은 프레임을 비교하세요. 서체군, 굵기, 간격이 다른가요, 줄바꿈만 다른가요? 증상은 겹치지만 출발점이 다릅니다.

글자 형태가 완전히 다르면 대체 글꼴이나 잘못된 서체군을 의심할 수 있습니다. 형태는 비슷한데 획이 굵으면 합성 볼드나 잘못된 굵기 파일일 수 있습니다. 같은 글꼴의 새 줄바꿈은 텍스트 상자 크기, 글꼴 메트릭, 측정 타이밍의 차이일 수 있습니다. 나머지는 맞는데 일부 문자만 바뀌면 글리프 지원 부족일 수 있습니다.

프로젝트에 중요한 문자를 포함한 진단 문자열을 고르세요. 제안 애니메이션이라면 통화 기호, 소수 구분자, 슬래시, 숫자, 실제 결제 문구가 들어갈 수 있습니다. 단순한 ‘Hello world’는 통과해도 실제 가격 줄의 기호 하나에는 여전히 대체 글꼴이 쓰일 수 있습니다.

원본 텍스트도 보세요. 곡선 따옴표, 줄바꿈 방지 공백, 좁은 공백, 다른 대시 문자가 너비를 바꿀 수 있습니다. 채팅창에서 비슷해 보이는 두 문자열이 같지는 않을 수 있습니다. 렌더러 탓을 하기 전에 정확한 내용을 확인하세요.

CSS 선언만으로 서체군을 판단하지 마세요. 계산된 font-family 값에 선호 글꼴이 있어도 실제 글리프를 제공하지 못했을 수 있습니다. 로딩 상태, 실제 글꼴 자원, 시각 비교를 함께 쓰세요. 각각 문제의 다른 부분에 답합니다.

글꼴 파일을 프로젝트 일부로 만들기

데스크톱 설치 글꼴은 환경 의존성입니다. 렌더러가 다른 기기나 격리 브라우저에서 실행되면 없을 수 있습니다. 허용된 글꼴 파일을 프로젝트에 묶거나 렌더링 환경이 접근할 수 있는 문서화된 로딩 방식을 쓰세요.

사용한 서체군, 스타일, 굵기, 파일을 기록하세요. 특정 미디엄 굵기와 좁은 너비에 의존하는 디자인에서는 ‘브랜드 글꼴’만으로 부족합니다. 가변 글꼴에는 굵기 외의 축도 있을 수 있습니다. 승인 디자인에 중요하다면 기본값이 맞으리라 가정하지 말고 설정을 명시적으로 보존하세요.

글꼴을 재배포하기 전에 라이선스를 확인하세요. 없는 자원의 해법은 설치 글꼴 전부를 인계 압축 파일에 복사하는 것이 아닙니다. 수신자에게 별도 라이선스가 필요하면 요구를 문서화하고 정당한 입수 경로를 주세요. 임시 대체 글꼴은 검토에 유용할 수 있지만 말없이 최종 브랜드 처리가 되어서는 안 됩니다.

세션에 의존하는 URL보다 안정적인 자산 경로를 우선하세요. 만료 링크 뒤의 글꼴은 현재 미리보기에서 작동해도 내일 렌더에서는 실패할 수 있습니다. 반복 가능한 프로젝트는 브라우저 캐시나 로그인 탭에 의존해서는 안 됩니다.

웹 렌더링 모션에서는 서체군을 일관되게 정의하세요. @font-face의 선언과 레이어의 요청이 다르면 파일을 정상 다운로드해도 대체 글꼴이 쓰일 수 있습니다. 성공한 네트워크 응답은 가져왔다는 근거이지 선택됐다는 근거는 아닙니다.

측정이나 렌더링 전에 준비될 때까지 기다리기

브라우저의 글꼴 로딩은 비동기입니다. 의도한 글꼴이 준비되기 전에 배치를 측정하면 대체 글꼴의 메트릭으로 위치를 계산할 수 있습니다. 나중에 글꼴이 맞게 보여도 앞선 측정값은 틀린 채 남을 수 있습니다.

Remotion 글꼴 문서는 로딩을 렌더링 과정의 일부로 다루는 구체적인 예입니다. @remotion/fonts를 쓰는 로컬 글꼴 로딩과 렌더 대기에 연결한 수동 FontFace 접근을 문서화합니다. 현재 지침은 여러 글꼴 프로젝트에서 텍스트 측정 전 대기도 강조합니다. Remotion 글꼴 문서

텍스트를 측정하고 프레임을 렌더링하기 전에 글꼴 준비를 기다리세요.

고정 2초 지연은 캐시가 준비됐을 때 작동해도 느린 네트워크에서는 실패할 수 있습니다. 이미 준비된 뒤 시간을 낭비할 수도 있습니다. 명시적인 프라미스나 로딩 상태를 우선하고, 실패하면 조용히 대체 렌더로 진행하지 말고 눈에 보이는 오류로 다루세요.

줄 길이, 경계 상자, 텍스트 높이를 측정한다면 관련 글꼴이 준비된 뒤 실행하세요. 글꼴이나 내용이 바뀌면 옛 측정을 무효화하세요. 글꼴을 올바르게 로딩해도 구도가 오래된 배치 데이터를 쓰면 내보내기가 잘못될 수 있습니다.

아래 문서의 호출을 자세히 보세요. 요청한 서체군은 정체성의 일부일 뿐입니다. 굵기와 문자 부분 집합도 선택합니다. 다음 제목이 세미볼드를 쓴다면 이 레귤러 자원만 불러와서는 다른 글꼴 자원이나 합성에 의존하게 됩니다. 언어가 바뀌면 라틴 부분 집합이 더는 내용을 지원하지 않을 수 있습니다. 실제 사용하는 스타일과 문자 체계로 글꼴 요청을 구성하고, 이웃 요소를 배치하기 전에 결과 텍스트를 측정하세요.

굵기와 스타일을 실제 자원에 매핑하기

font-weight: 600을 선언해도 진짜 세미볼드가 있다는 뜻은 아닙니다. 브라우저가 다른 굵기에서 더 두꺼운 모양을 합성할 수 있습니다. 한 환경에서는 괜찮아도 다른 환경에서는 다를 수 있습니다.

필요한 굵기와 스타일 각각을 올바른 파일이나 지원 가변 범위에 매핑하세요. 레귤러, 미디엄, 세미볼드를 쓴다면 셋 다 확인하세요. 작은 레이블이 제공하지 않은 굵기를 쓰는데 제목만 테스트하지 마세요.

이탤릭도 별도로 확인해야 합니다. 기울임 합성과 설계된 이탤릭은 문자 너비와 형태가 다를 수 있습니다. 강조 단어가 구도를 좌우한다면 브랜드 충실도와 배치에 모두 영향을 줄 수 있습니다.

가변 글꼴에서는 디자인이 실제 쓰는 축을 확인하세요. 굵기 설정만으로 좁은 너비나 광학 크기 처리가 재현되지 않을 수 있습니다. 특히 현지화나 화면비 변경을 계획한다면 다음 편집자가 설정을 이해하기 쉽게 두세요.

없는 굵기를 자간 반복 조정으로 고쳐 문장 하나를 맞추지 마세요. 잘못된 글꼴에 맞춘 배치가 됩니다. 의도한 자원을 먼저 불러온 뒤 실제 서체에서 간격을 다듬으세요. 그렇지 않으면 새 내용 값마다 바탕의 불일치가 다시 드러납니다.

실제 내용으로 글리프 지원 범위 시험하기

영어 알파벳을 지원하는 글꼴도 프로젝트에 필요한 기호가 없을 수 있습니다. 한 언어는 지원해도 다른 언어는 대체할 수 있습니다. 한 줄 안의 혼합 렌더링은 명백한 대체보다 불규칙한 간격이나 굵기처럼 보일 수 있습니다.

실제 쓰는 통화와 문장부호를 시험하세요. 달러, 유로, 루피 기호와 전각 문장부호는 글리프 요구가 다릅니다. 숫자 형식도 원래 영어 예시에 없던 줄바꿈 방지 공백 같은 문자를 넣을 수 있습니다.

현지화에서는 렌더 기기에 우연히 있는 것을 받아들이지 말고 대체 글꼴을 의도적으로 고르세요. 언어를 지원하고 구도의 시각적·공간적 요구에 맞아야 합니다. 모든 문자 체계를 라틴 타이포그래피처럼 만들라는 뜻이 아니라 의식적으로 선택하라는 뜻입니다.

개별 문자뿐 아니라 문자 형태 조합도 보세요. 문맥 형태와 복잡한 배치에 의존하는 문자 체계가 있습니다. 문자 하나의 미리보기만으로 완전한 문장이 올바르게 렌더링된다고 입증할 수 없습니다. 실제 렌더링 환경에서 완전한 대표 문장을 쓰세요.

명시적인 디자인 결정이 아니라면 문제가 있는 문자만 무관한 이미지 조각으로 바꿔 글리프 누락을 고치지 마세요. 기준선 정렬, 인터랙티브 원본의 접근성, 미래 편집성을 해칠 수 있습니다. 자원을 고치거나 구도 수준에서 적절한 글자 처리를 고르세요.

줄바꿈을 검증할 출력으로 다루기

의도한 글꼴이 로딩돼도 텍스트 상자, 배율, 렌더 환경이 다르면 줄바꿈이 바뀔 수 있습니다. 구도 크기와 텍스트 영역을 명확히 지정하세요. 최종 배치를 미리보기 패널의 임시 크기에 의존해 정하지 마세요.

짧은 캠페인 제목에서는 의도적인 줄바꿈이 선택한 읽기 리듬을 보존할 수 있습니다. 내보내기 경로 하나에만 우연히 넣은 개행이 아니라 내용이나 배치 모델의 일부여야 합니다. 길거나 현지화한 문구에서는 고정 줄바꿈이 부적절해질 수 있어 다시 흐르게 하는 전략이 필요합니다.

예상되는 가장 긴 내용 값에서 무슨 일이 생기는지 보세요. ‘US$29’에 맞던 프로젝트가 ‘US$129’나 번역한 결제 문구에서 실패할 수 있습니다. 모든 문자열을 시험할 필요는 없지만 인계가 지원하기로 한 현실적인 극단은 시험해야 합니다.

유용한 테스트 집합에는 승인 문구, 더 긴 숫자, 더 긴 레이블, 현지화 범위라면 관련 언어 변형이 포함됩니다. 각각 같은 장면에서 보세요. 무제한 내용 유연성을 약속하지 말고 어떤 변경에 배치 균형 조정이 필요한지 기록하세요.

전부 맞을 때까지 자동으로 글자 크기를 줄이지 마세요. 상자 안에는 남아도 목적지에서는 읽을 수 없을 수 있습니다. 두 번째 줄, 더 넓은 영역, 의미를 보존한 짧은 문구, 다른 장면 배열을 고려하세요. 맞춰 넣기와 읽기 편함은 별도 요구입니다.

렌더 환경이 만드는 차이 찾기

미리보기는 내보내기가 갖지 못하는 자원을 물려받을 수 있습니다. 브라우저 캐시, 시스템 글꼴, 원격 스타일시트 접근, 다른 자원 경로가 의존성을 숨길 수 있습니다. 맞는 편집 미리보기가 준비를 증명한다고 가정하지 말고 실제 전달 경로로 내보내기를 시험하세요.

SVG 텍스트나 임베디드 문서가 있다면 글꼴 동작을 따로 확인하세요. 일반 페이지 텍스트와 다른 환경에서 렌더링될 수 있습니다. 한 환경에 있는 글꼴이 모든 임베디드 객체에서도 자동으로 쓰이지는 않습니다. 렌더링 도구의 문서화된 지원을 사용하고 결과 프레임을 살펴보세요.

래스터 텍스트도 보세요. 로고나 자막이 이미지로 합쳐졌다면 글꼴 로딩을 바꿔도 달라지지 않습니다. 혼합 프로젝트에는 편집 제목과 글꼴 대체처럼 보이는 옛 래스터 레이블이 함께 있을 수 있습니다. 글꼴 시스템을 바꾸기 전에 어느 텍스트가 아직 살아 있는지 식별하세요.

원격 렌더를 진단할 때는 오류 메시지와 실패 자원을 보존하세요. ‘잘못된 글꼴을 썼다’는 증상입니다. ‘세미볼드 WOFF2 요청이 권한 오류를 반환했다’는 조치 가능한 원인입니다. 여러 부분을 동시에 바꾸지 마세요. 어느 수정이 중요했는지 알기 어려워집니다.

클라우드 렌더와 클라이언트 내보내기를 포함해 쓰는 모든 내보내기 경로로 글꼴 검증 샘플을 실행하세요.

브랜드 충실도와 필요한 정보 구분하기

모든 줄의 타이포그래피 역할이 같지는 않습니다. 브랜드 제목에는 독특한 디스플레이 서체가 필요할 수 있고, 법적 조건이나 튜토리얼 레이블에는 넓은 문자 지원과 안정적인 가독성이 필요합니다. 한 글꼴로 모든 언어와 크기를 풀기보다 역할이 다른 일관된 체계를 설계할 수 있습니다.

디스플레이 서체에 통화 기호가 없다고 해 봅시다. 기호만 대체하면 어색한 혼합 줄이 될 수 있습니다. 전체 가격 문장에 지원되는 본문 서체를 쓰거나 브랜드 제목과 사실적 제안을 분리할 수 있습니다. 의미와 의도한 위계를 함께 보존하는 선택이 맞습니다.

그 결정을 원본에 기록하세요. 가격이 의도적으로 본문 서체를 쓴다면 미래 편집자가 디스플레이 서체로 ‘고쳐’ 글리프 누락을 되살려서는 안 됩니다. 레이어 하나의 설명 없는 예외보다 짧은 역할별 메모가 오래갑니다.

작은 자막도 같습니다. 제목 크기에서는 아름다운 서체도 줄이면 획이 취약할 수 있습니다. 굵기를 높이거나 승인 본문 서체로 바꾸는 것은 지면에 맞춘 정직한 조정일 수 있습니다. 서체군 통일만이 브랜드 품질의 척도라 가정하지 말고 실제 시청 크기에서 시험하세요.

다국어 작업에서는 문자 체계가 달라도 위계가 유지되는지 물어보세요. 정확한 형태와 줄 길이는 달라집니다. 제목, 본문, 조건의 관계를 보존하고 필요하면 구도를 조정하세요. 라틴 자간 값을 기계적으로 복사하는 것도 우발적인 대체만큼 해로울 수 있습니다.

스타일마다 하는 일을 설명하는 규칙이 있으면 타이포그래피 시스템을 유지보수할 수 있습니다. 그러면 글꼴 로딩은 내용이 바뀔 때 아무도 정당화하지 못하는 임의 설정이 아니라 의도적인 디자인을 보호합니다.

매력적인 실패가 아니라 명확한 실패 만들기

일반 웹페이지에서는 내용을 계속 읽을 수 있어 조용한 대체가 편리합니다. 브랜드 영상 내보내기에서는 잘 다듬어졌지만 틀린 파일을 만들 수 있습니다. 필수 글꼴을 로딩할 수 없다면 렌더를 실패시키거나 작업 환경에 명확한 진단을 보이는 것을 고려하세요.

장식 글꼴 실패마다 모든 초안을 막아야 한다는 뜻은 아닙니다. 초안용 대체와 최종 출력 요건을 구분할 수 있습니다. 중요한 것은 상태가 보여 임시 대체가 우연히 승인을 얻지 않게 하는 것입니다.

실제 제목, 가격, 본문 레이블, 문장부호, 필요한 언어 샘플이 담긴 작은 타이포그래피 검증 자료를 프로젝트에 두세요. 글꼴이나 환경을 바꿀 때 최종 영상과 같은 경로로 렌더링하세요. 긴 시퀀스를 검토한 뒤보다 여기서 굵기 누락을 찾는 편이 빠릅니다.

자원 문제를 고친 뒤 구도를 다시 확인하세요. 올바른 메트릭이 대체 글꼴 기준으로 배치한 텍스트를 옮길 수 있습니다. 줄바꿈, 정렬, 잘림, 이웃 요소와의 공통 읽기 구간을 확인하세요. 글꼴이 맞아도 배치에는 앞선 잘못된 측정이 남을 수 있습니다.

마지막 테스트는 눈에 보이는 대응입니다. 의도한 서체군, 굵기, 문자, 줄바꿈, 위계가 전달 파일에 나타나야 합니다. 원본의 글꼴 이름은 증명의 시작일 뿐입니다. 로딩과 측정을 명시하면 타이포그래피를 기기 의존적 우연에서 유지보수 가능한 모션 프로젝트의 일부로 바꿀 수 있습니다.