애프터이펙트 표현식(Expression) 6편 - noise로 부드럽게 일렁이는 움직임 만들기

 

 

 

5편에서는 random으로 범위 안의 아무 값이나 뽑았습니다. 6편에서는 noise를 다룹니다. noise도 무작위처럼 보이는 값을 내지만, 바로 옆 값끼리 부드럽게 이어진다는 점이 다릅니다. random이 뚝뚝 끊기는 순간이동이라면, noise는 천천히 일렁이는 움직임입니다. 매달린 간판이 살랑이거나, 촛불이 일렁이거나, 구름이 느리게 떠다니는 느낌을 낼 때 씁니다.

이걸 알면 달라지는 것

"자연스럽게 흔들리게 해 줘"라고 AI에게 부탁하면 wiggle이나 noise(time)이 들어간 코드가 옵니다. 그런데 noise(time)을 그대로 넣으면 거의 움직이지 않습니다. 레이어를 복제하면 전부 똑같이 움직이고, 위치에 넣으면 대각선으로만 오갑니다. noise가 어떤 값을 내는지, 무엇을 넣어야 움직이는지 알면 이런 코드를 몇 글자만 고쳐서 바로 쓸 수 있습니다.

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

1. noise(time) 하나만 써 보기

텍스트 레이어의 Source Text(소스 텍스트) 스톱워치를 Option(Alt) + 클릭하고 입력합니다.

noise(time)

 

 

위 화면은 1초 6프레임에서 -0.194…가 나온 순간입니다. 재생하면 숫자가 바뀌는데, 5편의 random()과 달리 이전 값에서 조금씩만 움직입니다. 값은 -1에서 1 사이이고, 실제로는 끝값까지 가는 일이 드물어 대부분 0 근처를 오갑니다.

2. 넣는 값이 바뀌어야 움직입니다

noise는 괄호 안에 넣은 값에 따라 정해진 결과를 냅니다. 같은 값을 넣으면 언제나 같은 결과가 나옵니다.

코드	결과
noise(5)	항상 같은 숫자(움직이지 않음)
noise(time)	시간이 흐르면서 천천히 바뀜
noise(time * 3)	3배 빠르게 바뀜
noise(time * 0.3)	느리게 바뀜

그래서 time에 곱하는 숫자가 곧 속도입니다. 3편에서 배운 time이 여기서 다시 쓰입니다.

하나 알아 둘 점이 있습니다. noise는 넣은 값이 1, 2, 3 같은 정수일 때 0이 됩니다. noise(time)이면 1초, 2초, 3초마다 원래 값으로 돌아옵니다. 5번에서 이 성질 때문에 생기는 일을 다시 봅니다.

3. 크기를 키워야 보입니다: 회전

noise가 내는 값은 -1~1 사이로 작습니다. 회전에 그대로 넣으면 1도도 안 움직이니, 원하는 크기를 곱합니다. 셰이프 레이어로 직사각형을 하나 만들고 Rotation(회전)에 입력합니다.

value + noise(time) * 30

• value: 원래 회전값(1편)
• * 30: 흔들리는 최대 각도. 실제로는 대부분 ±15도 안쪽에서 움직입니다.

 

 

직사각형이 바람에 살랑이듯 좌우로 천천히 기울어집니다. 위 화면은 2초 25프레임에서 -7.3도 기운 순간입니다. Anchor Point(기준점)를 위쪽 가운데로 옮기면 매달린 간판처럼 흔들립니다.

4. 위치에 넣을 때: 축마다 다른 값을 넣기

위치는 값이 2개라서 배열로 써야 합니다. 이때 X와 Y에 같은 noise(time)을 넣으면 두 값이 똑같이 움직여서 레이어가 대각선으로만 오갑니다.

// 대각선으로만 움직임
var n = noise(time) * 200;
[value[0] + n, value[1] + n]

Y에는 다른 값을 넣어야 따로 움직입니다. 가장 쉬운 방법은 time에 아무 숫자나 더해 다른 구간을 읽게 하는 것입니다.

var x = noise(time) * 200;
var y = noise(time + 100) * 200;
[value[0] + x, value[1] + y]

 

 

time + 100은 "100초 뒤의 noise 값"을 읽는 것이라 X와 상관없이 움직입니다. 이제 레이어가 원래 자리 주변을 둥실둥실 떠다닙니다. 위 화면은 6초 1프레임에서 위치가 940.8, 528.9로 원래 자리(960, 540)에서 조금 벗어난 모습입니다.

5. 복제하면 전부 똑같이 움직입니다

5편의 random과 4편의 wiggle은 레이어를 복제하면 알아서 다르게 움직였습니다. noise는 다릅니다. 넣는 값이 같으면 결과도 같아서, 복제한 레이어가 모두 똑같은 방향으로 똑같이 움직입니다.

레이어마다 다르게 하려면 index(레이어 번호)를 섞습니다. 텍스트 "안녕"의 Position에 넣고 13개로 복제했습니다.

var x = noise(time + index * 10) * 200;
var y = noise(time + index * 10 + 100) * 200;
[value[0] + x, value[1] + y]

 

 

4초 21프레임에서는 13개가 제각각 흩어졌습니다. 그런데 계속 재생하면 매초 한 번씩 13개가 한 자리로 모였다가 다시 흩어집니다.

 

 

위 화면은 7초 29프레임, 8초 직전입니다. 13개가 거의 한 자리에 겹쳐 있습니다. 2번에서 본 성질 때문입니다. index * 10은 10, 20, 30처럼 항상 정수라서, time이 정수가 되는 순간(1초, 2초 …) 모든 레이어의 값이 동시에 0이 됩니다. 곱하는 숫자를 소수로 바꾸면 레이어마다 0이 되는 순간이 어긋나서 이렇게 모이지 않습니다.

var x = noise(time + index * 10.37) * 200;
var y = noise(time + index * 10.37 + 100.5) * 200;
[value[0] + x, value[1] + y]

Y 쪽도 100.5로 바꿔 두면 X와 Y가 같은 순간에 0이 되지 않아서, 한 레이어가 원래 자리로 딱 돌아오는 일도 줄어듭니다.

6. 활용: 일렁이는 촛불

불투명도는 0~100 사이여야 하니, noise의 -1~1을 원하는 범위로 바꿔 줍니다. linear는 "이 범위의 값을 저 범위로 옮겨 주는" 기능입니다.

linear(noise(time * 3), -1, 1, 40, 100)

• noise(time * 3): 조금 빠르게 바뀌는 값
• -1, 1: 원래 범위
• 40, 100: 바꿀 범위. 불투명도가 40%~100% 사이에서 일렁입니다.

 

 

촛불 불꽃 레이어의 Opacity(불투명도)에 넣으면, 깜빡이지 않고 부드럽게 밝아졌다 어두워졌다 합니다. 위 화면은 5초 1프레임에서 불투명도가 76%인 순간입니다. 5편의 random으로 같은 일을 하면 뚝뚝 끊기는 깜빡임이 됩니다.

7. 세기와 속도를 슬라이더로

2편의 슬라이더를 연결하면 코드를 열지 않고 조절할 수 있습니다. 불꽃 레이어에 Effect > Expression Controls > Slider Control을 두 개 넣고 이름을 "세기", "속도"로 바꿉니다.

var amp = effect("세기")("Slider");
var spd = effect("속도")("Slider");
value + noise(time * spd) * amp

 

 

불꽃의 Rotation에 넣고 세기 30, 속도 1에서 시작해 보세요. 불꽃이 좌우로 살짝 흔들립니다. 세기를 올리면 크게, 속도를 올리면 빠르게 흔들립니다. 한글 UI라면 마지막 이름이 "슬라이더"입니다.

8. wiggle, random, noise 비교

	wiggle	random	noise
움직임	부드럽게 흔들림	뚝뚝 순간이동	부드럽게 일렁임
나오는 값	원래 값 + 흔들림	정한 범위 안 아무 값	-1 ~ 1 사이 숫자 하나
복제했을 때	레이어마다 다름	레이어마다 다름	똑같음(index를 섞어야 다름)
속도 조절	첫 번째 숫자	해당 없음	time에 곱하는 숫자
잘 맞는 곳	카메라 흔들림, 간단한 흔들기	배치, 색 섞기, 깜빡임	한 값만 천천히 바꾸기, 직접 조합

wiggle도 안쪽에서는 noise와 같은 방식으로 값을 만듭니다. wiggle이 흔들기를 한 줄로 끝내 주는 완성품이라면, noise는 부품입니다. 축마다 따로 쓰거나, 범위를 바꾸거나, 다른 계산에 섞을 때는 noise가 편합니다.

9. 자주 하는 실수

증상	확인할 것
거의 안 움직인다	noise(...)에 원하는 크기(예: * 30)를 곱했는지
전혀 안 움직인다	괄호 안에 time처럼 바뀌는 값이 들어 있는지
대각선으로만 움직인다	X와 Y에 다른 값(time, time + 100)을 넣었는지
복제한 레이어가 똑같이 움직인다	index를 섞었는지
1초마다 모든 레이어가 한 자리에 모인다	index에 곱하는 숫자를 10.37처럼 소수로 바꿨는지
너무 빠르거나 느리다	time에 곱한 숫자
불투명도가 0 아래로 내려간다	linear로 범위를 바꿨는지

AI에게 noise를 시킬 때 확인할 것

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

• noise(time)만 있고 곱하는 숫자가 없으면, 원하는 세기를 곱해야 보입니다.
• 위치 코드에서 X와 Y가 같은 noise(time)을 쓰고 있으면 대각선으로만 움직입니다. Y 쪽에 + 100을 넣으면 됩니다.
• 여러 레이어에 쓸 코드인데 index가 없으면, 복제했을 때 전부 똑같이 움직입니다.
• index * 10처럼 정수를 곱해 두었으면 매초 모든 레이어가 한 자리에 모입니다. 10.37처럼 소수로 바꾸면 됩니다.
• "부드럽게"를 원했는데 random이 오면 뚝뚝 끊깁니다. noise나 wiggle로 바꾸면 됩니다.

정리

항목	핵심
noise(time)	-1 ~ 1 사이, 부드럽게 이어지는 값
* 숫자	세기(얼마나 크게)
time * 숫자	속도(얼마나 빠르게)
time + 100	다른 구간 읽기(축마다 따로)
index * 10.37	복제한 레이어마다 다르게(소수로)
linear(n, -1, 1, 최소, 최대)	원하는 범위로 바꾸기

다음 편

7편에서는 이번에 잠깐 쓴 linear를 다룹니다. 한 값의 범위를 다른 범위로 옮기는 기능으로, 슬라이더 하나로 여러 속성을 함께 움직일 때 가장 많이 씁니다.

 

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