시간을 절약하고 애니메이션을 빠르게 만들 수 있습니다.
표현식을 사용하면 동작(예: 흔들기, 지터 또는 바운스)을 자동화할 수 있습니다. 이렇게 하면 각 동작에 새 키프레임을 만들 필요가 없기 때문에 시간이 많이 절약됩니다. 다음은 시작하는 데 도움이 되는 몇 가지 예시입니다.
- After Effects 사용 안내서
- Beta 릴리스
- 시작하기
- 작업 영역
- 프로젝트 및 컴포지션
- 푸티지 가져오기
- 텍스트 및 그래픽
- 그리기, 페인트, 패스
- 레이어, 마커, 카메라
- 애니메이션, 키프레임, 동작 추적, 키잉
- 투명도 및 합성
- 색상 조정
- 효과 및 애니메이션 사전 설정
- 표현식 및 자동화
- 몰입형 비디오, VR 및 3D
- After Effects에서 VR 환경 만들기
- 몰입형 비디오 효과 적용
- VR/360 비디오용 합성 툴
- 고급 3D 렌더러
- 컴포지션에 3D 모델 가져오기 및 추가
- Creative Cloud Libraries에서 3D 모델 가져오기
- 이미지 기반 조명
- 애니메이션 환경 조명
- 3D 모델에서 조명과 카메라 추출 및 애니메이션 적용
- 3D 카메라 움직임 추적
- 그림자 표시 및 허용
- 포함된 3D 모델 애니메이션
- 그림자 캐처
- 3D 심도 데이터 추출
- 3D 레이어의 질감 속성 수정
- 3D 디자인 공간에서 작업하기
- 3D 변형 기즈모
- 3D 애니메이션을 사용하여 더 많은 작업 수행
- Mercury 3D 엔진으로 3D 디자인 변경 사항 실시간 미리 보기
- 그래픽에 반응형 디자인 추가
- 보기 및 미리 보기
- 렌더링 및 내보내기
- 기타 애플리케이션으로 작업
- 공동 작업: Frame.io, Team Projects
- 메모리, 저장소, 성능
- 기술 자료
표현식을 만들고 사용할 때의 기본 사항을 배웁니다.


키프레임을 직접 수십, 수백 개씩 만들 필요 없이 복잡한 애니메이션을 쉽게 만들어 연결하려면 표현식을 사용할. 표현식은 After Effects 프로젝트에서 애니메이션이 적용된 속성에 삽입할 수 있는 작은 JavaScript 코드 조각이며, 특정 시점에 하나의 레이어 속성의 단일 값으로 계산됩니다.
애플리케이션에 어떤 작업을 수행하도록 지시하는 스크립트와 달리 표현식은 속성에 작업을 지시합니다. 예를 들어, 화면의 왼쪽에서 오른쪽으로 볼이 이동할 때 공이 흔들리도록 할 수도 있습니다. 키프레임으로 [위치] 속성에 애니메이션을 적용하는 대신 흔들기 표현식을 적용할 수 있습니다.
표현식 언어는 표준 JavaScript 언어에 기반하지만 JavaScript를 알지 못해도 표현식을 사용할 수 있습니다. 표현식은 뚝딱 도구를 사용하거나 간단한 예제를 복사한 후 필요에 맞도록 수정하여 만들 수 있습니다. 자세한 내용은 표현식 언어 이해를 참조하십시오.
다음은 표현식을 사용한 루핑의 기본 예입니다.
표현식을 사용하는 이유는?
서로 다른 속성을 연결합니다.
표현식을 서로 다른 속성 연결에 사용할 수 있습니다. 가령 다른 컴포지션 간 회전과 위치를 연결하는 작업이 가능합니다. 링크를 사용하면 각각에 대해 서로 다른 표현식을 작성하지 않고도 다양한 애니메이션을 손쉽게 만들 수 있습니다.
모션 인포그래픽을 만듭니다.
모션 그래픽 템플릿을 만들 때 표현식을 사용할 수 있습니다. After Effects에서 다양한 속성을 조정하고, 애니메이션을 연결하고, MOGRT를 수정합니다.
여러 레이어를 제어하여 복잡한 애니메이션을 만듭니다.
뚝딱 도구를 사용하면 몇 가지 컨트롤로 다양한 애니메이션을 간편하게 움직임으로써 다른 기능으로는 더 많은 작업이 필요한 복잡한 애니메이션을 만들 수 있습니다.
애니메이션 그래프 및 차트를 만듭니다.
애니메이션 및 모션 인포그래픽을 빠르게 만듭니다. 예를 들어 다양한 국가의 오염 지수를 나타내는 동적 세계 지도와 동적 막대 그래프를 만들 수 있습니다.
표현식을 저장하여 다시 사용합니다.
표현식을 템플릿으로 저장하여 After Effects 프로젝트에서 재사용합니다. 쓸데없이 시간을 낭비하지 않아도 됩니다!
표현식을 사용하기에 앞서 먼저 사용자 인터페이스를 알아야 합니다. 시작하려면 다음 단계를 따르십시오.
-
컴포지션을 만들고 레이어 > 새 > 솔리드를 선택하여 단색 레이어를 만듭니다.
-
타임라인 패널에서 레이어를 선택하고 키보드에서 S를 눌러 비율 속성을 표시합니다. 이제 표현식 여정을 시작합니다.
-
표현식을 만들어 보겠습니다. 타임라인 패널에서 위치 옆의 스톱워치를 Alt+클릭(Windows) 또는 Opt+클릭(macOS)하여 속성에 표현식을 추가합니다. After Effects가 모든 속성에 기본 표현식을 할당하며, 이는 나중에 사용자가 수정할 수 있습니다.
-
표현식을 만들 때 이루어지는 사용자 인터페이스 변경에 유의하십시오. 첫째, [비율] 속성의 값(100,100으로 표시)이 파란색에서 빨간색으로 바뀝니다. 빨간색은 값에 활성 표현식이 있음을 나타냅니다.
레이어 속성의 빨간색은 해당 값에 활성 표현식이 있음을 나타냅니다. 레이어 속성의 빨간색은 해당 값에 활성 표현식이 있음을 나타냅니다. -
타임라인 패널의 표현식 언어 메뉴를 사용하면 미리 정의된 메서드와 속성을 표현식에 빠르게 삽입할 수 있습니다. 타임라인 패널의 표현식 언어 메뉴를 사용하면 미리 정의된 메서드와 속성을 표현식에 빠르게 삽입할 수 있습니다. -
마지막으로, 네 개의 버튼 오른쪽에는 기본 표현식 transform.position이 있습니다. 표현식을 변경하려면 타임라인에서 표현식 텍스트를 선택하여 표현식 편집기 필드를 활성화합니다. 텍스트 필드와 마찬가지로 작동합니다. 즉, 텍스트를 복사하거나 붙여넣거나 선택하거나 끕니다. Enter 키를 누르면 새 줄이 만들어지고 높이를 조정할 수 있습니다. 선택하고 wiggle(3,50) 등 원하는 표현식을 입력합니다. 자세한 내용은 표현식 편집을 참조하십시오.
위치 표현식의 한 예시로, 위치가 어느 방향으로든 최대 50픽셀의 편차로 초당 3번 변경되도록 합니다. 위치 표현식의 한 예시로, 위치가 어느 방향으로든 최대 50픽셀의 편차로 초당 3번 변경되도록 합니다.
표현식 및 키프레임
애니메이션을 적용할 수 있는 After Effects의 모든 속성에는 표현식 전 값과 표현식 후 값이 있습니다.
표현식 전 값은 표현식이 적용되기 전의 속성 값으로, 정적 값 또는 키프레임에 의해 애니메이션이 적용된 경우입니다. 표현식 전 값은 효과가 적용되지 않은 레이어의 픽셀과 비슷하다고 생각할 수 있습니다. 효과에서 레이어의 픽셀을 변경하거나 사용하는 것처럼 표현식 전 값을 수정하거나 표현식에서 사용할 수 있습니다. 그 결과 표현식 후 값이 생성됩니다.
UI에서 속성 값의 강조 표시 색상은 속성이 표현식 전 또는 표현식 후 값을 사용하는지 여부를 나타냅니다. 표현식 전 값은 파란색이고 표현식 후 값은 빨간색입니다.
모든 속성의 표현식 전 값은 속성 값을 사용하여 표현식 내에서 액세스할 수 있습니다. 예를 들어 회전 속성에 대한 표현식 value+90은 표현식이 적용되기 전의 속성 값에 90도가 추가됩니다. 이 기능은 키프레임 값에도 적용됩니다. 회전에 0부터 45까지 키프레임을 적용한 경우 동일한 value+90 표현식을 사용하면 90에서 135까지 애니메이션이 적용됩니다. 키프레임의 값은 key(index).value를 통해서도 유사하게 액세스할 수 있으며, 인덱스에 1을 사용하여 첫 번째 키프레임의 값을 가져오고, 2를 사용하여 두 번째 키프레임의 값을 가져오는 등의 방식으로 액세스할 수 있습니다. numKeys 속성은 항상 속성의 키프레임 수와 같으므로 key(numKeys).value는 마지막 키프레임의 값입니다.
wiggle() 또는 다양한 루프 등 일부 메서드는 내재적으로 사전 표현식 값을 사용합니다.
예를 들어 wiggle(10, 10) 표현식은 속성의 값이 0인 경우 -10~10 사이에서 애니메이션을 적용하여 기존 값 주위로 흔들기 동작을 추가합니다. 표현식이 키프레임 속성에 적용되어 원래 애니메이션 값 위에 보조 애니메이션을 만드는 경우에도 마찬가지입니다. 속성 특성 및 메서드(표현식 참조)를 참조하십시오.
표현식에서 간단한 수학 사용
표현식을 포함하는 속성 값은 빨강 또는 분홍 유형으로 표시됩니다.
표현식을 처음 사용하여 작업하는 경우에는 뚝딱 도구로 간단한 표현식을 만든 후 다음 테이블에 나열된 간단한 수학 연산을 사용하여 표현식의 동작을 조정하는 것이 좋습니다.
심볼 |
기능 |
---|---|
+ |
더하기 |
- |
빼기 |
/ |
나누기 |
* |
곱하기 |
*-1 |
원래 연산의 반대 연산을 수행합니다(예: 시계 방향을 시계 반대 방향으로). |
예를 들어 표현식 끝에 *2를 입력하여 결과를 두 배로 만들거나, 표현식 끝에 /2를 입력하여 반으로 나눌 수 있습니다.
표현식 편집에 익숙해지면 이러한 간단한 연산자를 더 많이 조합할 수 있습니다. 예를 들어 표현식 끝에 /360*100을 추가하여 0-360에서 0-100으로 범위를 변경할 수 있습니다. 이와 같이 표현식의 범위를 변경하면 360도 다이얼 값을 백분율로 측정되는 슬라이더로 변환할 때 유용합니다.
표현식 언어 메뉴
타임라인 패널의 표현식 언어 메뉴에는 표현식에 사용할 수 있는 After Effects 전용 언어 요소가 포함되어 있습니다. 이 메뉴는 유효한 요소 및 올바른 구문을 확인할 때 도움이 됩니다. 사용 가능한 요소에 대한 참조로 이 메뉴를 사용하세요. 사용자가 이 메뉴에서 개체, 특성 또는 메서드를 선택하면 After Effects에서는 삽입점의 표현식 필드에 이를 자동으로 삽입합니다. 표현식 필드에서 선택한 텍스트는 새 표현식 텍스트로 바뀝니다. 삽입점이 표현식 필드에 없으면 필드의 모든 텍스트가 새 표현식 텍스트로 바뀝니다.
사용할 수 있는 일반적인 표현식
흔들기


흔들기 표현식은 가장 많이 쓰는 After Effects 표현식 중 하나입니다. 흔들기 표현식은 정확하게 동일한 것을 의미하며 속성이 난수를 통해 흔들기를 유발하게 합니다.이 표현식을 사용하여 장면을 보다 자연스러운 것처럼 보이게 만들 수 있습니다.
괄호 사이의 숫자는 흔들기를 제어합니다. 첫 번째 숫자는 초당 흔들기 수이고, 두 번째 숫자는 흔들기의 양입니다. 예를 들어, 표현식이 wiggle(2,30)인 위치 속성은 초당 2회, 최대 30픽셀로 흔듭니다.
시간


time 표현식은 영구적인 동작이 있는 개체에 적합합니다. 예를 들어, 개체를 무한정 회전시키려면 회전 속성에 time 표현식을 추가하면 됩니다. 그러면 개체가 초당 1도씩 회전합니다.또한 기본 수학 방정식과 함께 사용할 수 있으므로 이전 개체를 40배 빨리 회전시키려면 time*40 표현식을 사용합니다.
반복


여러 키프레임을 사용하여 반복되는 애니메이션을 만드는 경우 시간이 오래 걸릴 수 있습니다. 대신에, loop 표현식을 사용하여 이를 자동화하고 복잡한 반복 애니메이션을 만듭니다. 두 가지 유형의 루핑 즉, loopIn 및 loopOut(좀 더 일반적으로 사용됨)이 있습니다. 따라서, loopOut(); 또는 loopOut("cycle"); 표현식이 있는 회전 속성은 타임라인 끝까지 애니메이션을 반복합니다.
자세한 예제는 표현식 예를 참조하십시오.
표현식 수동 편집
-
[표현식] 필드를 클릭하여 텍스트 편집 모드를 설정합니다.
참고:텍스트 편집 모드로 전환하면 전체 표현식이 선택됩니다. 표현식을 추가하려면 표현식 안을 클릭하여 삽입점을 배치합니다. 그렇지 않으면 전체 표현식을 대체하게 됩니다.
-
선택적으로 표현식 언어 메뉴를 사용하여 표현식 필드에 텍스트를 입력하고 편집합니다.
-
텍스트 편집 모드를 종료하고 표현식을 활성화하려면 다음 중 하나를 수행합니다.
숫자 키패드에서 Enter 키를 누릅니다.
표현식 필드 밖을 클릭합니다.
표현식 편집기에서 표현식의 모양 사용자 정의
스크립팅 및 표현식 환경 설정을 사용하여 타임라인 패널에 있는 표현식 편집기에서 표현식 형태를 사용자 정의할 수 있습니다.
표현식 편집기를 열려면,
- macOS: After Effects > 환경 설정 > 스크립팅 및 표현식을 선택합니다.
- Windows: 편집 > 환경 설정 > 스크립팅 및 표현식을 선택합니다.
다음 비디오를 통해 표현식을 빠르게 살펴볼 수 있습니다.
표현식 리소스 더 보기
표현식 뒤에 숨은 몇 가지 개념을 이해했으면, 이제 커뮤니티에서 실제 사용 예시를 살펴보고 작업을 공유할 수 있습니다.
AE Enhancers 포럼에서는 표현식뿐 아니라 스크립트 및 애니메이션 사전 설정에 대해서도 많은 예제와 정보를 제공합니다.