모션 디자인 10가지 원칙 / 애니메이션 12가지 원칙

(시작 전에 저는 공부를 위해 여러 포털 사이트에서 필요한 정보를 가져와 학습해 작성했음을 알립니다.)

이번엔 모션 디자인과 애니메이션 원칙에 대해 포스팅해보려고 합니다.

 

 

모션 디자인 10가지 원칙은 디즈니에서 탄생한 애니메이션 12가지 원칙을 바탕으로 제작되었다고 합니다.

따라서 10가지 모션 디자인 원칙에 대한 내용은 이런게 있다 넘어가고 12가지 애니메이션 원칙을 주로 설명하겠습니다.

(모션 그래픽 디자인 원칙은 디즈니의 애니메이션 12가지 원칙을 뿌리로 두고 있다고 합니다.)

 

---

모션그래픽 10가지 원칙

 

애니메이션 전문가 Jorge R. Candedo Eetrada가 디즈니의 애니메이션 12가지 원칙을 각색해 모션 디자인 10가지 원칙을 소개했습니다.

대충 이미지만 봐도 어떤 느낌인지 감이 오실겁니다.

 

1. 타이밍, 간격 및 리듬(Timing, Spacing, and Rhythm)
2. 완화(Eases)
3. 질량 및 무게(Mass & Weight)
4. 예측(Anticipation)
5. 호(Arcs)
6. 찌부러뜨리기, 늘리기, 번지기(Squash, Stretch, Smears)
7. 팔로우 스루, 겹치는 동작(Follow Through & Overlapping Action)
8. 과장(Exaggeration)
9. 보조 및 레이어드 애니메이션(Secondary and Layered Animation)
10. 호소력(Appeal)

모션 디자인 원칙은 위와 같습니다.

각 테마별 설명은 애니메이션 12가지 원칙과 똑같죠?

다른 점이 있다면 첫 번째로 Timing 원칙이 Timing, Spacing, and Rhythm 원칙으로 소개됩니다.

그리고 Staging 원칙, Straight ahead & Pose to Pose 원칙, Solid Drawing 원칙이 빠졌습니다.

그리고 Secondary and Layered Animiation 원칙이 추가됐죠.

아 Slow In & Slow Out원칙이 Eases 원칙으로 소개됩니다.

 

새로 생긴 부분	빠진 부분
Mass & Weight	Staging Straight ahead & Pose to Pose  Solid Drawing

 

바뀐 부분

10가지 모션 디자인 원칙	12가지 애니메이션 원칙
Eases	Slow In & Slow Out
Timing, Spacing, and Rhythm	Timing
Secondary and Layered Animiation	Secondary Action

 

그럼 추가된 부분만 알아보고 나머지는 애니메이션 원칙을 보시면 될 것 같습니다.

 

Mass & Weight

직역하면 질량과 무게입니다.

요소에 무게와 질량을 대입해서 모션을 만들면 더욱 풍부해집니다.

먼저 질량에 대해 알아봅시다.

질량이란 물리학에서 물질이 가지고 있는 고유한 양을 말합니다.

실제로 소프트한 물질을 늘리거나 압력을 가해도 모양이 변질될 뿐 질량이 변하지 않습니다.

이 처럼 모션 디자인을 하는 데 있어서 질량을 항상 신경 쓰는 것이 자연스러운 모션을 만드는데 큰 도움을 줄 것입니다.

그리고 무게는 무거울수록 더 빨리 멈추거나, 속도가 느립니다.

또 요소에서 특정 부분이 무게가 더 많이 나간다면 앞으로 확 이동할 때 딸려가는 느낌이 되겠죠?

이런 부분을 활용하는 것이 Mass & Weight 원칙입니다.

 

 

---

애니메이션 12가지 기본 원칙

THE ILLUSION OF LIFE

각 이미지 원본은 위에서 볼 수 있습니다.

 

 

들어가기 전 주의 사항이 있습니다.

해당 12가지 기본 원칙은 디즈니에서 제작됐으며, 이 내용을 너무 맹신하는 것은 좋지 않다고 합니다.
어떤 이론이건 습득한 뒤에는 자신만의 기법을 만드는 것이 가장 중요합니다.
(애니메이터, 모션 그래픽 디자이너마다 모션&애니메이팅 느낌이 다양합니다.)
애니메이션 원칙은 법칙이 아닙니다.
애니메이터&모션 그래퍼로써 일정 수준의 경지에 오르기 위해서는 현실 동작을 녹화한 레퍼런스를 프레임별로 따라 하는 연습을 많이 해야 합니다.
따라서 공부하는 것이 좋으나 너무 맹목적으로 무조건 이게 옳다라고 생각하면 좋지 않다고 할 수 있겠습니다.

---

1원칙 : Squash & Stretch

 

Squash & Stretch는 직역하면 짓누르기 및 늘이기라는 뜻을 가졌습니다.

이 원칙은 사물의 속도, 탄력, 무게, 재질등을 강조하기 위해 늘리거나 납작하게 표현하는 원칙입니다.

사물이 부드러울수록 더 짓눌리고(Squash) 더 늘려집니다(Stretch).

즉, 스쿼시, 스트레치는 물체가 외부의 힘에 의해 변형되는 상황을 “과장”해서 표현하는 방법입니다.

이 방법을 사용할 때 장점은 적용된 어떤 오브젝트도 지루하게 느껴지지 않는다는 점입니다.

여기서 주의해야 할 점은 물체의 부피가 같아야 한다는 점입니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  1. Squash & Stretch - 12 Principles of Animation 영상

 

---

2원칙 : Anticipation

Anticipation(예고)는 다음에 일어날 일을 알려주기 위한 준비 동작을 표현하는 원칙입니다.

제자리에서 멀리뛰기를 한다 생각해 봅시다.

최대한 멀리 뛰려면 어떤 동작을 취해야 할까요?

아마도 예시 이미지처럼 앞뒤로 몇 번 왔다 갔다 하면서 몸에 반동을 줄 것입니다.

관객은 고객이며, 특정 장면이 발생하기 전에 고객을 위해 암시를 보내야 한다는 말입니다.

점프를 하기 전엔 무릎을 굽혀야 하고, 갑자기 주먹을 날리더라도 팔을 뒤로 빼야 합니다.

(힘이 강하게 작용할수록 과장이 많이 들어가고, 준비 시간도 그만큼 길어야 합니다.)

만약, 해당 원칙을 지키지 않고, 준비장면 없이 만들어진 작품을 관객에게 보여준다면 대다수가 부자연스러운 로봇처럼 느껴질 것입니다.

Aniticipation과 Squash&Stretch 원리를 너무 과도하게 사용하면 아동용 애니메이션 느낌이 됩니다.
만약 극 사실주의 기반으로 하는 CG작업이라면 Squash나 Anticipation을 유연하게 사용할 필요가 있습니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  2. Anticipation - 12 Principles of Animation 영상

 

---

3원칙 : Staging

스테이징은 비단 애니메이션 작업뿐만 아니라, 영화, 광고, TV드라마에서도 중요한 방송제작 원칙 중 하나입니다.

스테이징은 “초점 맞추기”라고 생각하면 됩니다.

행동, 타이밍, 카메라 각도, 위치 등을 활용해서 표현할 수 있습니다.

스테이징을 잘 활용하면 시청자가 어딜 보고 있는지 컨트롤할 수 있게 됩니다.

예시로, 사진이라면 작가가 자신의 의도를 전달하기 위해 특정 피사체에 초점을 맞춰야 합니다.

만일 초점이 흩어져 있다면 관객이 작품의 메시지를 이해할 수 없고, 작가의 의도도 왜곡될 수도 있습니다.

사진이 아닌 영상을 예시로 들자면 카메라 위치에 따라 특정 부분을 확대해 표정을 자세히 보여줄 수도 있고, 축소해서 동작을 중심으로 보여줄 수도 있습니다.

또 각 요소들이 등장하는 타이밍을 다르게 해서 시청자의 눈을 어디에다 두게 할지 컨트롤할 수도 있습니다.

정리하자면 표현하고자 하는 부분을, 초점에 맞춰서 작업하자는 의미입니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  3. Staging - 12 Principles of Animation 영상

---

4원칙 : StraightAhead & Pose to Pose

Pose to Pose 방식은 “준비-변화-결과”형태를 키프레임으로 지정하고, 과정을 채우는 방식입니다.

점프를 예시로 들면 점프 시작점, 중간지점, 끝지점을 미리 그려놓고 나머지 프레임을 채운다는 개념입니다.

이렇게 작업한다면 모든 동작은 계획된 포즈를 벗어나지 않게 되고, 형태가 크게 변질되지 않는다는 장점이 있습니다.

 

반대로 Straight Ahead방식은 첫 포즈만 잡은 뒤, 느낌대로 다음 애니메이팅 포즈를 지정해 나갑니다. 이에 따라 즉흥적인 포즈가 나타날 수도 있고, 의도대로 진행되지 않을 수도 있습니다.

Pose to Pose와 Straight Ahead의 차이점은 위와 같은데 각각 어떻게 활용될 수 있는지 설명해 보겠습니다.

 

Pose to Pose는 특정 요소가 연속적으로 움직여야 할 때 주로 사용하고 예측이 가능한 움직임을 표현하는데 탁월한 방식입니다.

특히 형태가 크게 망가지지 않아야 하는 경우에 활용하기 좋습니다.

 

반면 Straight Ahead 방식은 예측할 수 없는 애니메이션에 사용하기 적합합니다.

불, 물 입자, 먼지 구름, 폭발 등에 활용이 가능합니다.

또 캐릭터를 Pose to Pose로 그리고 캐릭터의 장식물 같은 것들을 Straight Ahead 방식으로 추가하는 것도 좋습니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의 4. Straight Ahead & Pose to Pose - 12 Principles of Animation 영상

 

 

---

5원칙 : Follow Through  & Overapping

Follow Through & Overapping을 직역하면 끌려오기&겹치는 동작입니다.

캐릭터에 모자나 망토 목걸이 등 다양한 장식이 있다고 생각해 봅시다.

여기서 캐릭터가 움직일 때 나머지 부분(모자, 망토, 목걸이 등)이 끌려가는 느낌을 연출하는 걸 예시로 들 수 있습니다.

신체가 멈추더라도 물리적 법칙이 적용되어 나머지 부분이 계속 움직이도록 하는 것입니다.

 

또 다른 방법으로도 활용할 수 있는데, 눈을 감고 머리를 뒤로 젖히는 장면을 생각해 봅시다.

여기서 머리와 목이 동시에 뒤로 움직이며 의자에 기댄다면, 강압적이면서 빠른 결단을 내려야 하는 분위기가 됩니다.

반면, 머리가 먼저 뒤로 움직인 뒤 상체가 천천히 따라간다면, 한숨을 쉬는 듯한 자신감이 없는 분위기를 연출할 수 있습니다.

 

또 위의 예시 이미지처럼 본체가 움직일 때 끝부분은 물리법칙에 영향을 받아 늦게 끌려오게 연출하여 역동성을 부여할 수도 있습니다.

또 캐릭터가 앞으로 가면서 점프를 한다고 생각해 봅시다.

점프를 하고 착지 지점에서 아무런 반동 없이 꼿꼿하게 서있는 건 부자연스럽습니다.

여기서 몸이 한번 앞으로 이끌려갔다가 다시 제자리로 돌아오게 만들면 매우 자연스러워질 겁니다.

 

Follow Through&Overapping 기법은 물리적인 장면뿐만 아니라 미세한 타이밍에 따라서 캐릭터의 감정까지 묘사할 수 있습니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  5. Follow Through & Overlapping Action - 12 Principles of Animation 영상

 

---

6원칙 : Ease In & Ease Out (Slow In & Slow Out)

이 원칙은 감속, 가속도의 원칙입니다. 이는 물리학에서 가속도 법칙과 같습니다.

뉴턴의 운동방정식 ‘F=ma’ 공식에 의하면 똑같은 힘을 주는 경우 질량이 클수록 가속도는 작아집니다. 감속과 가속은 질량의 크기와 외부의 힘에 따라 달라집니다.

따라서 애니메이팅 작업에서도 질량이 큰 물체라면 감속&가속의 변화가 작고, 그 반대라면 변화가 커야 합니다.

 

또 모든 동작은 처음엔 느리고 속도가 빨라지다가 마지막엔 느려집니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  6. Slow In & Slow Out - 12 Principles of Animation 영상

 

---

7원칙 : Arcs(호)

Arcs는 로봇과 유기체의 차이를 드러내는 Ease In & Out과 쌍으로 기억해야 할 원칙입니다.

애니메이팅에서 감속과 가속, 아크 이 두 가지만 조절하더라도 캐릭터의 상태가 자연스러워지고 좋아집니다.

살아있는 모든 것은 움직임에 곡선이 섞여 있습니다. 메카닉과 캐릭터의 가장 큰 차이점은 ‘곡선’에 있습니다.

사람이 만들어낸 기계는 직선운동을 하지만, 자연은 본래 곡선으로 움직입니다.

애니메이팅 작업이 끝났는데 뭔가 어색하다고 느낀다면, 캐릭터에 미세한 곡선을 넣어봅시다.

(산업용 애니메이션은 예외입니다.)

캐릭터 움직임에 곡선을 심하게 넣을수록 디즈니 캐릭터 같은 분위기가 나기 시작하니 조심해 주는 것도 까먹으시면 안 됩니다.

 

이 부분은 영상을 보는 것을 추천합니다.

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  7. Arcs - 12 Principles of Animation 영상

 

---

8원칙 : Secondary Action

Secondary Action을 직역하면 2차 동작입니다.

세컨드리 액션은 연출력과 연결되는 원칙이며, 시나리오 작성에서 필수적인 요소인 ‘플롯(plot)’과 유사한 개념입니다.

시나리오 작성에서 ‘플롯’은 구조와 인물 그리고 상황이나 사건을 연출하기 위한 도구입니다.

플롯이 어떠한가에 따라 시나리오의 긴장감이 달라집니다.

플롯은 독자에게 끊임없이 호기심을 불어넣고 기대감을 만들어내는 시나리오의 엔진입니다.

(플롯이란:소설, 영화 등에서 이야기를 구성하는 사건 또는 사건의 논리적인 패턴과 배치를 의미합니다.)

 

즉 Secondary Action은 캐릭터가 더 입체적으로 보이도록 메인동작을 받히는 추가적인 동작을 말합니다.

(5원칙의 Overlapping과 비슷해 보이지만 매우 다릅니다.)

 

2차 동작의 타이밍, 길이, 크기, 무게감 등에 따라 씬의 분위기가 만들어지기 마련입니다.

예를 들면, 길에서 쓰러진 캐릭터를 상상해 봅시다.

쓰러진 캐릭터가 길에서 잠을 자고 있다면? or 눈물을 흘리고 있다면?

캐릭터의 2차 동작에 따라서 ‘코믹 or 슬픈’ 씬이 될 수 있습니다.

2차 동작은 단순히 팔이 움직이니까 손목이 따라가는 동작을 얘기하는 것이 아닙니다. 

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  8. Secondary Action - 12 Principles of Animation 영상

---

9원칙 : Timing(타이밍)

A에서 B지점까지 이동하는 자전거를 생각해 봅시다.

만일 자전거의 브레이크가 고장 나서 단 한 번만 사용할 수 있다면 급브레이크를 잡을 수밖에 없습니다.

그리고 급브레이크를 사용할 때는 빠르지 않은 속도임에도 빨리 움직이는 것처럼 보입니다.

반면, 멈추기 위해 브레이크를 짧게 24번 눌렀다고 생각해 봅시다.

빠른 속도에서도 자전거는 매우 부드럽게 멈추게 될 것입니다.

영상의 프레임으로도 비유가 가능합니다.

영화는 24 프레임이므로 1초에 24장이 빠르게 지나갑니다.

만약 속도를 2배속으로 올린다면 1초에 12장만 보여주고, 화면 전환 속도는 2배 빨라집니다.

즉, 타이밍에 따라 캐릭터의 특정 동작의 속도가 변하고, 이를 통해 캐릭터가 생각하는 바를 다르게 표현할 수 있습니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  9. Timing - 12 Principles of Animation 영상

---

 

10원칙 : Exaggeration(과장)

과장은 스쿼시&스트래치의 연장된 이야기라고 생각하면 됩니다.

조금 다르다면 과장은 물리학보다는 심리학에 가깝다고 볼 수 있습니다.

이해를 돕기 위해 예를 들자면 영화배우는 카메라 앞에서 동작을 과장해서 보여줘야 합니다.

이유는 카메라 앞에서 감정표현이 생각보다 잘 드러나지 않기 때문입니다.

이 때문에 디즈니 애니메이터는 캐릭터의 의사를 관객에게 확실하게 전달하는 방법을 과장을 통해 고안했습니다.
슬픈 표정은 더 슬프게, 기쁜 모습도 더 기쁘게, 아플 땐 더 아파 보이게 말이죠.

현실에서 저렇게 맞으면 죽지 않나 싶은 장면이 애니메이션에선 굉장히 자연스럽게 나오지만 큰 재미를 주기도 합니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의 10. Exaggeration - 12 Principles of Animation 영상

---

11원칙 : Solid Drawing

이 원칙은 입체감 표현을 뜻합니다.

우리 몸은 본능적으로 3가지를 인식합니다.

Volume(부피) / Weight(무게) / Balance(균형)

 

오브젝트는 부피에 따라 공간이 변하고, 무게에 따라 타이밍이 바뀌고, 균형에 따라 벡터(방향)가 변합니다.

정지된 상태에서는 무게와 균형을 예측하기 어렵습니다.

따라서 어떤 물체를 모든 각도에서 그릴 수 있게 되면 애니메이팅이 더 쉬워집니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  11. Solid Drawing - 12 Principles of Animation 영상

---

12원칙 : Apeal

Apeal은 기본적으로 애니메이션을 만들 때 매력적이어야 한다는 것을 말합니다.

그래서 어떻게 하면 매력적이게 만들 수 있을지에 관한 3가지 가이드라인을 디즈니에서 제시했습니다.

다양성(모양) / 왜곡 / 미스터리

 

첫 번째 등장인물은 다양성이 있어야 합니다.

애니메이션에 등장하는 캐릭터는 ‘씬’에 맞게 다양한 모습을 구사해야 합니다.

씬의 ‘상황’, ‘분위기’, ‘성격’등에 따라 캐릭터가 다르게 표현될수록 관객은 매력을 느낍니다.

좋은 방법은 같은 모양이 아닌 다른 모양들로 구성하여 캐릭터를 만들어보는 겁니다.

좋아 보이는 모든 캐릭터는 명확한 모양에서부터 시작합니다.

 

 

‘왜곡’은 과장 및 축소의 개념으로 이해할 수 있습니다.

예를 들면, 말을 잘하는 사람은 강조하는 부분에서 목소리를 높이고, 중요하지 않은 부분에서는 어조를 낮춥니다.

애니메이션 역시 강조하고 싶은 부분을 좀 더 과장하거나, 축소하는 것만으로도 매력적일 겁니다.

 

 

미스터리는 ‘단순화’를 말합니다. 예를 들면, ‘시’를 생각해 봅시다.

시는 느낌으로 본다면 신비롭고 창의적인 느낌을 줍니다.

그 이유는 그저 단순하기 때문입니다.

만약 평론가처럼 시를 자세하게 설명하려 한다면 더 이상 시에서는 이전과 같은 느낌을 받을 수 없게 될 겁니다.

애니메이션도 같습니다. 캐릭터, 배경, 동작, 특수효과등 CG기법을 과도하게 적용하여 뭔가를 설명하는 모양새가 된다면 매력이 감쇄됩니다.

정리하자면 단조로우면서도 꽉 찬 느낌의 영상을 만들 수 있게끔 훈련을 해야 합니다.

 

더 자세한 내용을 보고 싶다면 영상은 아래 더 보기를 확인해 주세요.

이 영상으로 더 쉽고 자세하게 이해할 수 있을 겁니다!

AlanBeckerTutorials 채널의  12. Appeal - 12 Principles of Animation 영상

 

 

---

 

모션 디자인의 원칙과 애니메이션의 원칙에 대해 알아보았습니다.

사실 애니메이션의 원칙을 모션 디자인의 시점으로 적용하면 정말 비슷한 내용입니다.

아무래도 애니메이션이라는 틀 안에 모션 디자인이 속해있기 때문이 아닐까 싶습니다.

 

포스팅에서 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!

다음에도 유익한 정보로 찾아오겠습니다.

긴 글 읽어주셔서 감사합니다.