텍스트 레이어를 만들고 문자 패널에서 가변 글꼴을 적용하세요.
After Effects에서 가변 글꼴 축을 사용하여 작업하는 방법에 대해 자세히 알아봅니다. 액세스하는 방법, 텍스트 애니메이터로 추가하는 방법, 선택기 사용법 등을 다룹니다.
이 페이지의 내용:
- 가변 글꼴을 설치하려면 .ttf, .otf 또는 .woff2와 같은 확장자를 가진 파일을 찾으세요. 많은 Adobe Fonts에는 가변 버전(“가변”으로 표시됨)이 포함되어 있으며, 글꼴 기술 필터를 사용하여 이 가변 글꼴을 빠르게 찾을 수 있습니다. Google Fonts 및 기타 오픈 소스 저장소와 같은 리소스를 통해 무료 가변 글꼴을 찾을 수도 있습니다.
- 가변 글꼴 축으로 디자인하고 텍스트 애니메이션을 효율적으로 설정하며 애니메이션 워크플로를 최적화하는 방법을 다룬 권장 사례를 살펴보십시오.
글꼴 드롭다운 메뉴를 열면 가변 글꼴 펼치기 아이콘을 사용하여 목록을 필터링하고 가변 축을 노출하는 글꼴만 표시할 수 있습니다.
텍스트 레이어를 선택한 다음, 글꼴 섹션의 속성 패널에서 가변 글꼴 아이콘을 선택하여 현재 글꼴에 사용 가능한 모든 축을 표시하는 팝업을 엽니다.
팝업에 다음 항목이 표시되고 스크러빙 컨트롤을 사용하여 값을 조정할 수 있습니다.
- 축 이름: 설명적인 이름. 예를 들어 굵기, 너비 등이 있습니다.
- 현재 값: 현재 축 값입니다.
텍스트가 선택된 경우(텍스트 편집 모드에서) 축은 선택된 문자의 값을 표시하고, 아무것도 선택되지 않은 경우 축은 첫 번째 문자의 값을 표시합니다. 여러 선택에서 섞여 있는 값은 범위를 표시하거나 베리에이션을 나타냅니다
값 숫자를 좌우로 드래그하여 조정하고 컴포지션 패널에서 변경 사항을 즉시 미리 볼 수 있습니다. 또는 값을 선택하여 입력 모드로 전환하고, 원하는 숫자를 입력한 다음 Enter를 눌러 적용할 수 있습니다.
각 축에는 글꼴에서 정의한 최솟값과 최댓값이 있으며, 스크러빙이나 입력은 유효한 범위로 제한됩니다. 핫 텍스트에 마우스를 가져다 대면 범위를 확인할 수 있습니다.
컴포지션 패널에 즉시 반영되는 변경 사항을 미리 봅니다. 너비나 간격 변경으로 레이아웃이 바뀌면 텍스트가 자동으로 조정됩니다.
단어의 첫 글자를 굵게 만들거나 단일 단어 내에서 굵기 베리에이션을 만들거나 사용자 정의 합자 또는 문자 조합을 디자인하려는 경우 가변 글꼴을 사용하면 됩니다.
텍스트 레이어를 두 번 클릭하여 텍스트 편집 모드로 전환합니다.
수정할 특정 문자를 선택하고 속성 패널에서 아이콘을 선택하여 가변 글꼴 팝업을 엽니다.
선택한 문자에만 적용되도록 축 값을 조정합니다.
특정 문자를 선택하지 않으면 값이 첫 번째 문자에만 적용됩니다.
텍스트 애니메이터를 사용하면 시간에 따라 축 값에 키프레임을 설정하고 선택기를 사용하여 특정 문자 범위에 적용할 수 있습니다. 축 애니메이터를 추가하는 방법은 여러 가지가 있습니다.
- 텍스트 편집 중 텍스트 레이어 메뉴 사용
- 타임라인에서 애니메이터 추가 사용
- 속성 패널 사용
텍스트 편집 중 텍스트 레이어 메뉴 사용
텍스트 레이어를 두 번 클릭하여 편집 모드로 전환합니다.
애니메이션을 적용할 문자를 선택하여 강조 표시하거나, 모든 문자에 적용하려는 경우 아무것도 선택하지 않습니다.
컴포지션 패널에서 강조 표시된 텍스트를 마우스 오른쪽 버튼으로 클릭한 다음 텍스트 애니메이션화 > 가변 글꼴 축 > [축 이름]을 선택합니다.
선택한 축 속성으로 새 텍스트 애니메이터가 만들어집니다.
타임라인에서 애니메이터 추가 사용
타임라인 패널에서 텍스트 레이어를 선택하고 확장하여 애니메이션 버튼을 꺼냅니다.
애니메이션 버튼을 선택하고 가변 글꼴 축 > [축 이름]을 선택합니다.
범위 선택기가 있는 새 애니메이터가 자동으로 만들어집니다.
속성 패널 사용
타임라인 패널에서 텍스트 레이어를 선택하고 속성 패널로 이동합니다.
텍스트 애니메이션 섹션으로 이동하여 애니메이터 추가 > 가변 글꼴 축 > [축 이름]을 선택합니다.
범위 선택기가 있는 새 애니메이터가 추가됩니다.
새 애니메이터를 추가하면 After Effects에서 텍스트 애니메이터 그룹이 새로 만들어지며, 여기에는 글꼴 축 속성과 범위 선택기가 포함되고 초기 값은 선택한 문자의 현재 축 값으로 설정됩니다.
가변 글꼴 축 애니메이터를 추가하면 After Effects에서 다음 계층을 만듭니다.
축 값 키프레임 설정하기
타임라인 패널에서 [현재 시간 표시기(CTI)]를 원하는 시간으로 옮깁니다.
축 속성 옆의 스톱워치 아이콘을 선택하여 현재 값에서 첫 번째 키프레임을 만듭니다.
CTI를 새로운 시간으로 이동하고 스크러빙이나 수동 입력으로 축의 값을 변경하여 새 키프레임을 만듭니다.
애니메이션 예제
개별 축으로 작업하는 경우 다음 예제를 시도해 보십시오.
|
예 |
시간 및 값 변경 |
결과 |
|---|---|---|
|
부드러운 굵기 전환 |
|
텍스트가 점진적으로 굵어집니다 |
|
너비 압축 효과 |
|
텍스트가 압축되었다가 원래대로 돌아옵니다 |
|
기울기 또는 이탤릭 애니메이션 |
|
텍스트가 이탤릭 스타일로 기울어집니다 |
첫 번째 축(예: 굵기)을 추가한 다음 두 번째 축(예: 너비), 세 번째 축(예: 기울기)을 차례로 추가하고 각각 독립적으로 또는 함께 키프레임을 설정하여 동일한 텍스트 레이어에 여러 축 애니메이터를 추가할 수 있습니다. 여러 축을 결합한 다음 예제를 시도해 보십시오.
|
예 |
시간 및 값 변경 |
결과 |
|---|---|---|
|
동적 로고 애니메이션 |
애니메이터 1 - 글꼴 축 굵기
애니메이터 2 - 글꼴 축 너비
|
텍스트가 동시에 굵고 넓어집니다 |
가변 글꼴 간격 속성은 After Effects가 굵기나 너비와 같은 글꼴 축에 애니메이션을 적용할 때 문자 간격을 조정하는 방법을 제어합니다.
굵기나 너비와 같은 글꼴 설정을 애니메이션할 때 글자가 더 넓어지거나 좁아질 수 있습니다. After Effects는 깔끔한 모양을 유지하기 위해 글자 사이의 간격을 자동으로 조정할 수 있으며, 이 설정을 통해 간격 조정이 언제 어떻게 이루어질지 선택할 수 있습니다.
텍스트 레이어의 텍스트 속성 그룹을 펼치십시오.
가변 글꼴 축 추가로 애니메이션 적용을 시작합니다.
기타 옵션 섹션에서 가변 글꼴 간격 드롭다운 메뉴를 사용하여 다음 중 원하는 설정을 선택합니다.
- 적응형: 글꼴 축이 변경될 때 자연스러운 간격을 유지하기 위해 적절한 경우 문자별 추적 보정을 적용합니다.
- 문자별: 항상 문자별 추적 보정을 적용합니다.
- 기본값: 문자별 추적 보정을 완전히 비활성화합니다. 글꼴 축 변경에도 불구하고 문자는 원래 간격을 유지합니다. 글꼴의 자연스러운 너비 변경이 전체 텍스트 레이아웃에 영향을 주는 창의적인 효과에 유용합니다.
선택기는 애니메이터가 영향을 주는 문자와 강도를 제어합니다. 가변 글꼴 축 애니메이터는 모든 선택기 유형과 함께 작동합니다.
범위 선택기(기본값)
범위 선택기는 애니메이션을 적용할 연속되는 문자의 범위를 정의합니다. 다음은 주요 속성입니다.
|
속성 |
설명 |
값 |
|---|---|---|
|
시작 및 끝 |
영향을 받는 문자를 정의합니다 |
0% – 100% (또는 색인/단위 기반)
|
|
오프셋 |
텍스트를 따라 범위를 이동시키며 애니메이션을 적용해 '이동'하는 효과를 만듭니다 |
값: -∞ ~ +∞ |
|
양 |
효과의 강도를 제어합니다 |
0% ~ 100%
|
다음은 시도해 볼 수 있는 몇 가지 예제입니다.
|
예 |
글꼴 축 설정 |
범위 선택기 |
키프레임 |
결과 |
|---|---|---|---|---|
|
굵기 지우기 효과 |
굵기: 900(검정) |
|
종료에 0% ~ 100% 키프레임 설정 |
텍스트를 왼쪽에서 오른쪽으로 따라가며 굵은 굵기를 '칠'합니다 |
|
움직이는 너비 물결 |
너비: 150%(확장) |
|
시간에 따라 애니메이션이 적용된 이동 |
확장된 너비가 텍스트를 통과합니다 |
모양과 점진성
|
속성 |
옵션 |
설명 |
|---|---|---|
|
모양 |
정사각형 |
영향을 받는 문자와 받지 않는 문자 사이의 명확한 가장자리 |
|
모양 |
점점 증가 |
범위로 점진적 증가 |
|
모양 |
점점 감소 |
범위에서 점진적 감소 |
|
모양 |
삼각형 |
점진적 시작 및 종료 |
|
모양 |
원형 |
매끄러운 종형 곡선 |
|
모양 |
매끄러움 |
매우 점진적인 전환 |
|
점진성 |
높은 점진성 |
매우 점진적인 전환 |
|
점진성 |
낮은 점진성 |
보다 급격한 전환 |
다음은 시도해 볼 수 있는 예제입니다.
|
예 |
글꼴 축 설정 |
범위 선택기 |
추가 설정 |
결과 |
|---|---|---|---|---|
|
매끄러운 굵기 그레이디언트 |
글꼴 축 가중치: 900 |
|
|
텍스트가 굵게 시작되어 기본 굵기가 될 때까지 점진적으로 가늘어집니다 |
흔들기 선택기
문자별로 축 값에 무작위 변동을 적용합니다. 다음은 주요 속성입니다.
|
속성 |
설명 |
결과 |
|---|---|---|
|
최대 양 / 최소 양 |
기본 값에서의 최대 및 최소 변동 |
문자별로 무작위 변동을 생성합니다 |
|
흔들기/초 |
무작위 값이 변하는 속도 |
높을수록 더 격렬한 움직임을 의미합니다 |
|
상관 관계 |
인접한 문자들이 얼마나 관련되어 있는지 |
|
|
시간 위상 |
문자별로 타이밍 이동을 무작위화합니다 |
타이밍에 변동을 추가합니다 |
다음은 시도해 볼 수 있는 몇 가지 예제입니다.
|
예 |
글꼴 축 설정 |
흔들기 선택기 설정 |
추가 설정 |
결과 |
|---|---|---|---|---|
|
떨림 굵기 효과 |
굵기: 400(보통) |
|
|
각 문자의 굵기가 독립적으로 무작위로 변동됩니다 |
|
호흡하는 굵기 |
너비: 100%(보통) |
|
텍스트가 파도처럼 부드럽게 확장/수축됩니다 |
표현식 선택기
JavaScript 표현식을 사용하여 어떤 문자가 영향을 받을지 수학적으로 정확하게 제어할 수 있습니다. 양이 핵심 속성입니다.
- 표현식은 문자별 효과 강도를 제어하는 값을 반환합니다
- 문자 색인, 위치, 시간 등에 액세스할 수 있습니다
다음은 시도해 볼 수 있는 몇 가지 예제입니다.
|
예 |
표현식(양) |
애니메이터 축 |
결과 |
|---|---|---|---|
|
문자 위치 기반 굵기 |
// Expression Selector Amount 속성에서: |
|
첫 번째 문자가 가장 가늘고 마지막 문자가 가장 굵은 선형 그레이디언트 |
|
진동하는 기울기 |
// Expression Selector Amount 속성에서: |
|
사인 패턴으로 텍스트를 통과하는 기울기 물결 |
다음은 After Effects에서 많이 사용되는 표현식 변수로, 그 외에 사용할 수 있는 변수도 많이 있습니다.
- textIndex - 현재 문자 색인(1 기준)
- textTotal - 총 글자 수
- time - 현재 컴포지션 시간
복잡한 효과를 위해 단일 애니메이터에 여러 선택기를 추가할 수 있습니다.
타임라인 패널에서 애니메이터를 확장합니다.
애니메이터 이름 옆의 추가 드롭다운을 선택하십시오.
다음의 사용 가능한 옵션 중 선택기 유형을 선택합니다.
- 범위 선택기
- 흔들기 선택기
- 표현식 선택기
새 선택기가 추가되고 기존 선택기와 결합됩니다. 양 값에 대한 조정이 함께 곱해집니다. 예를 들어, 50%의 범위 선택기에 80%의 흔들기 선택기를 곱하면 40%의 최종 효과가 나타나며, 레이어 간 매끄러운 전환에 무작위 변동을 적용하는 것이 가능합니다.
다음은 베리에이션과 함께 매끄러운 웨이브를 만들기 위해 시도해 볼 수 있는 예시입니다. 범위 선택기와 흔들림 선택기를 결합하여 미묘한 무작위 떨림과 함께 굵은 웨이브 효과를 만들어냅니다.
|
구성 요소 |
설정 |
|---|---|
|
애니메이터 1 |
|
|
범위 선택기 1 |
|
|
흔들기 선택기 1 |
|
서로 다른 문자 범위에 대해 다른 효과를 만듭니다. 다음은 두 가지 예제입니다.
|
예 |
애니메이터 설정 |
선택기 설정 |
|---|---|---|
|
첫 번째 글자는 굵게, 나머지는 보통 |
글꼴 축 굵기: 900(검정) |
범위 선택기:
|
|
교대로 나타나는 굵기 |
애니메이터 1(홀수 문자):
애니메이터 2(짝수 문자):
|
홀수/짝수 문자를 제어하는 두 개의 표현식 선택기 |
표현식을 사용하여 축 값을 다른 애니메이션 속성에 연결하세요. 다음은 생각해 볼 수 있는 두 가지 예제입니다.
1. 위치에 따른 굵기는 레이어의 세로 위치를 기반으로 텍스트 굵기 변화를 만듭니다.
// Font Axis Weight 속성에서:
linear(transform.position[1], 0, thisComp.height, 300, 900)
2. 오디오에 반응하는 너비는 텍스트 굵기 너비가 오디오 진폭에 반응하도록 만듭니다.
// Font Axis Width 속성에서:
audioLevel = thisComp.layer("Audio Layer").audio.audioLevels;
linear(audioLevel[0], -48, 0, 75, 150)
텍스트 레이어에 여러 글꼴이 포함된 경우(혼합 서식). 텍스트 애니메이터에서:
- 애니메이터는 각 문자의 글꼴을 기반으로 문자별 축 변경을 적용합니다
- 문자의 글꼴에 해당 축이 없으면 그 문자는 영향을 받지 않습니다
- 범위 선택기는 여전히 문자 범위를 대상으로 하지만 효과는 글꼴에 따라 달라집니다
다음은 간단한 예제입니다.
- 텍스트: "Hello"(혼합 글꼴)
- "He"는 VariableFont A 사용(굵기 축 있음)
- "llo"는 VariableFont B 사용(굵기 축 없음)
- 애니메이터: 글꼴 축 굵기 - 900
- 결과: "He"는 굵게 표시되고, "llo"는 변경되지 않습니다