애프터이펙트 표현식(Expression) 4편 - wiggle로 흔들기, 한 축만 흔들기와 슬라이더로 세기 조절

 

 

3편에서는 time으로 키프레임 없이 계속 움직이게 했습니다. 4편에서는 레이어를 무작위로 흔드는 wiggle을 다룹니다. 손떨림 같은 카메라 흔들림, 살짝 떠다니는 로고, 깜빡이는 조명처럼 불규칙하게 움직이는 효과는 대부분 이 한 줄로 만듭니다.

이걸 알면 달라지는 것

요즘은 AI에게 "레이어를 흔들어 줘"라고 하면 wiggle(5, 30) 같은 코드를 바로 받을 수 있습니다. 문제는 그다음입니다. 너무 빠르다, 너무 크다, 옆으로만 흔들고 싶다, 처음엔 가만히 있다가 점점 세게 흔들고 싶다. 이런 조정은 괄호 안 숫자 두 개의 뜻을 알아야 직접 고칠 수 있습니다. 이번 편은 그 숫자를 읽고 고치는 법을 정리합니다.

화면은 영문 인터페이스로 캡처했습니다. 한글 UI에서는 Position은 위치, Rotation은 회전, Scale은 비율, Opacity는 불투명도, Slider는 슬라이더, Checkbox는 확인란으로 보입니다. 영문판으로 바꾸는 방법은 한글판 애프터이펙트 영문판으로 바꾸는 방법에 정리해 두었습니다.

1. wiggle(빈도, 세기)

레이어의 Position(위치) 스톱워치를 Option(Alt) + 클릭하고 입력합니다.

wiggle(2, 50)

 

 

재생하면 레이어가 원래 위치 주변을 불규칙하게 돌아다닙니다. 아래 화면에서 위치 값이 960,540이 아니라 970.9,533.6처럼 바뀐 것을 볼 수 있습니다. 표현식이 만든 값은 빨간 숫자로 표시됩니다.

 

 

괄호 안 숫자 두 개의 뜻은 이렇습니다.

• 첫 번째 숫자(빈도): 1초에 몇 번 방향을 바꾸는지. 클수록 빠르고 정신없이 흔들립니다.
• 두 번째 숫자(세기): 원래 값에서 최대 얼마나 벗어나는지. 위치라면 픽셀입니다.

wiggle(2, 50)은 "1초에 2번 정도, 원래 위치에서 최대 50픽셀 안에서 흔들기"입니다.

코드	느낌
wiggle(1, 20)	천천히, 살짝. 떠다니는 로고
wiggle(2, 50)	보통
wiggle(10, 10)	빠르고 잘게. 진동, 떨림
wiggle(3, 200)	크게 휘청임

2. 속성마다 세기의 단위가 다릅니다

wiggle은 위치뿐 아니라 숫자로 된 속성이면 어디에나 쓸 수 있습니다. 대신 두 번째 숫자의 단위가 속성을 따라갑니다.

속성	코드 예	세기 단위
Position(위치)	wiggle(2, 50)	픽셀
Rotation(회전)	wiggle(3, 15)	도(°)
Opacity(불투명도)	wiggle(2, 10)	%
Scale(비율)	wiggle(2, 10)	%

아래 화면은 위치, 회전, 불투명도에 각각 wiggle을 넣은 모습입니다. 회전은 0x+3.6°처럼 좌우로 까딱거립니다.

 

 

불투명도는 96%, 94%처럼 100% 아래로만 움직입니다. 불투명도는 100%를 넘을 수 없어서 위쪽으로 흔들리는 부분이 잘리기 때문입니다. 깜빡임을 제대로 보려면 불투명도를 80% 정도로 낮춰 두고 wiggle을 넣으면 됩니다. 형광등처럼 빠르게 깜빡이게 하려면 wiggle(10, 30)처럼 빈도를 올립니다.

3. 한 축만 흔들기

위치에 wiggle을 그냥 넣으면 X와 Y가 둘 다 흔들립니다. 옆으로만 흔들고 싶으면 결과를 변수에 담고 필요한 값만 꺼내 씁니다.

var w = wiggle(2, 50);
[w[0], value[1]]

• w에는 흔들린 위치 [X, Y]가 들어 있습니다.
• w[0]은 흔들린 X, value[1]은 원래 Y입니다.

 

 

위치 값이 953.2,540.0으로, Y는 540에 고정되고 X만 바뀌었습니다.

value는 "표현식을 적용하기 전의 원래 값"입니다. 3편에서 쓴 position[1]과 같은 자리지만, value는 어느 속성에서나 똑같이 쓸 수 있어서 편합니다. 위아래로만 흔들려면 [value[0], w[1]]로 바꿉니다.

4. 비율은 찌그러지지 않게

Scale(비율)에 wiggle(2, 10)을 그냥 넣으면 가로와 세로가 따로 흔들려서 레이어가 찌그러집니다. 가로 값 하나를 양쪽에 같이 쓰면 모양을 유지한 채 커졌다 작아졌다 합니다.

var w = wiggle(2, 10);
[w[0], w[0]]

 

 

비율이 93.4,93.4%처럼 두 값이 같게 나옵니다.

5. 빈도와 세기를 슬라이더로 조절하기

2편에서 배운 슬라이더를 연결하면 코드를 열지 않고 흔들림을 조절할 수 있습니다. 레이어에 Slider Control(슬라이더 컨트롤)을 두 개 추가하고 이름을 "빈도", "세기"로 바꾼 뒤 위치에 입력합니다.

var f = effect("빈도")("Slider");
var a = effect("세기")("Slider");
wiggle(f, a)

 

 

위 화면은 빈도 15, 세기 34로 둔 상태입니다. 한글 UI라면 "Slider" 자리에 "슬라이더"가 들어갑니다. 효과 이름을 바꾸는 방법(효과 이름 선택 후 Return)은 2편에 정리해 두었습니다.

6. 확인란으로 흔들림 켜고 끄기

2편에서 확인란은 켜면 1, 끄면 0이라고 했습니다. 세기에 확인란 값을 곱하면 끄는 순간 세기가 0이 되어 흔들림이 멈춥니다.

var f = effect("빈도")("Slider");
var a = effect("세기")("Slider");
var on = effect("Checkbox Control")("Checkbox");
wiggle(f, a * on)

 

 

확인란을 끄면 위치가 원래 값인 960.0,540.0으로 돌아옵니다. 한글 UI에서는 effect("확인란 컨트롤")("확인란")입니다.

7. 활용 1: 점점 세지는 흔들림

5절의 "세기" 슬라이더에 키프레임을 찍으면 흔들림의 세기 자체를 애니메이션할 수 있습니다.

1. 0초: 세기 0
2. 1초: 세기 40
3. 2초: 세기 0

 

 

"세기" 슬라이더에 키프레임 3개가 찍혀 있습니다. 폭발이나 쿵 하는 효과음에 맞춰 화면이 크게 흔들렸다가 잦아드는 연출이 됩니다.

8. 활용 2: 여러 레이어를 한 번에 흔들기

레이어마다 wiggle을 따로 넣으면 각자 다른 방향으로 흔들립니다. 화면 전체가 같이 흔들리는 카메라 흔들림을 만들려면 Null 개체 하나에만 wiggle을 넣고, 나머지 레이어를 그 Null의 자식으로 연결합니다.

1. Layer > New > Null Object(레이어 > 새로 만들기 > Null 개체)
2. Null의 위치에 wiggle(3, 20)
3. 흔들 레이어들의 Parent & Link(부모 및 링크)를 Null 1로 지정

 

 

wiggle1, wiggle2, wiggle3 세 레이어의 부모가 모두 Null 1로 지정되어 있어서 세 글자가 같은 방향으로 함께 흔들립니다. 카메라 레이어를 Null의 자식으로 연결하면 3D 장면에서도 똑같이 쓸 수 있습니다.

9. 활용 3: 뚝뚝 끊기게 흔들기

wiggle은 기본적으로 부드럽게 흔들립니다. 스톱모션이나 손그림처럼 뚝뚝 끊기는 느낌을 원하면 앞에 posterizeTime을 붙입니다.

posterizeTime(8);
wiggle(2, 50)

 

 

posterizeTime(8)은 "이 표현식은 1초에 8번만 계산해라"라는 뜻입니다. 숫자가 작을수록 더 끊겨 보입니다. 위 화면처럼 Null에 넣으면 연결된 레이어 전체가 같이 뚝뚝 끊기며 흔들립니다. 두 줄이므로 첫 줄 끝에 세미콜론이 필요합니다(1편).

10. 키프레임과 같이 쓰기

wiggle은 원래 값 위에 흔들림을 더하는 방식입니다. 그래서 위치에 키프레임으로 이동 애니메이션을 만들어 두고 wiggle(5, 10)을 넣으면, 키프레임대로 이동하면서 잘게 떨리는 움직임이 됩니다. 키프레임을 지울 필요가 없습니다.

11. 자주 하는 실수

증상	확인할 것
너무 정신없이 흔들린다	첫 번째 숫자(빈도)를 줄였는지
3D 레이어가 2D처럼 변했다	[w[0], value[1], value[2]]처럼 Z 값까지 넣었는지
비율이 찌그러진다	[w[0], w[0]]처럼 같은 값을 썼는지
불투명도가 아래로만 흔들린다	원래 값이 100%라서 위쪽이 잘린 것. 80% 정도로 낮춰 두기
여러 레이어가 따로 논다	Null 하나에 wiggle을 넣고 부모로 연결했는지
슬라이더 연결 코드에서 오류	효과 이름과 속성 이름이 화면과 같은지(Slider / 슬라이더)

AI에게 wiggle을 시킬 때 확인할 것

AI가 짜 준 코드를 그대로 붙여 넣기 전에 이것만 보면 됩니다.

• 숫자 두 개 중 어느 쪽이 빈도이고 어느 쪽이 세기인지. 느낌이 안 맞으면 직접 바꿔 보는 게 다시 물어보는 것보다 빠릅니다.
• 3D 레이어인데 값이 2개만 있는 코드는 아닌지
• effect("...") 안의 이름이 내 AE 화면의 이름과 같은지. 한글판에서는 "Slider"가 아니라 "슬라이더"입니다.
• "여러 레이어를 같이 흔들어 줘"라고 했을 때 레이어마다 wiggle을 넣는 답이 오면, Null에 한 번만 넣는 방법이 더 관리하기 쉽습니다.

정리

항목	핵심
wiggle(빈도, 세기)	1초에 몇 번, 최대 얼마나
세기 단위	위치는 px, 회전은 도, 불투명도·비율은 %
[w[0], value[1]]	X만 흔들기
[w[0], w[0]]	비율을 찌그러지지 않게
a * on	확인란으로 흔들림 켜고 끄기
Null + 부모	여러 레이어를 같이 흔들기
posterizeTime(8)	뚝뚝 끊기는 흔들림

다음 편

5편에서는 random을 다룹니다. 레이어를 복제할 때마다 위치나 색이 무작위로 정해지게 하는 방법, 매번 같은 무작위 값이 나오게 고정하는 seedRandom까지 정리합니다.

 

참고: Adobe After Effects 표현식 공식 문서, François Lefebvre 『After Effects: The Power of Expression』(개념 참고), Manuel Steinhauser 『Expressions Cheat Sheet』(예제 참고)