다음 웹 디자인 프로젝트에서 Disney의 12가지 애니메이션 원칙 사용하기

내가 이 글을 쓰고 있는 바로 그 순간, 내 사무실의 벽과 선반에는 17개의 디즈니 제품이 있습니다. 열일곱. 나도 놀란다. 디즈니의 모든 것을 사랑하는 만큼 애니메이션의 12가지 원리를 통해 만들어지는 마법은 디즈니 영화를 보면서도 빠져나옵니다.

그리고 그것이 요점입니다. 애니메이션의 12가지 원칙은 미묘합니다. 시청자들이 모르는 사이에 시청자들에게 깊은 인상을 남깁니다. 때로는 같은 장면에서 웃고, 울고, 공감하고, 꿈꾸게 한다. 그리고 손을 뻗어 만지고 싶을 정도로 사실적으로 보이고 움직이는 캐릭터와 물건을 만듭니다. ( 코코 를 본 적이 있습니까? 나는 내 경우를 쉬게합니다.)

애니메이션의 12가지 원칙은 이제 디즈니를 비롯한 모든 모션 작업의 기초를 제공합니다. 웹 디자인과 같은 애니메이션 이외의 분야와도 관련이 있습니다.

애니메이션의 12가지 원리에 대한 간략한 역사

애니메이션의 12가지 원칙은 1920년대와 30년대에 합류한 핵심 애니메이터 그룹인 디즈니의 아홉 노인 중 두 명인 올리 존스턴과 프랭크 토마스에 의해 소개되었습니다. Johnston과 Thomas는 1981년에 The Illusion of Life: Disney Animation 을 썼고 이것은 애니메이션 의 "바이블"로 남아 있습니다. 이 책은 12가지 원칙을 추출하기 위해 디즈니 최고의 애니메이터들의 접근 방식을 자세히 살펴봅니다. 이러한 원칙은 원래 손으로 그린 ​​애니메이션을 위한 것이지만 기술 변화를 통해 살아남았고 현재 컴퓨터 애니메이터(예: Pixar)와 웹 디자이너가 사용하고 있습니다.

애니메이션의 12가지 원칙과 웹 디자인에 미치는 영향

이러한 원칙이 오랜 시간 동안 지속되어 온 데는 이유가 있습니다. 때로는 기본이 여전히 최고입니다.

1. 스쿼시와 스트레칭

출처: Giphy를 통한 Chris Gannon

"Squash and Stretch"는 애니메이션 원칙 중 가장 중요합니다. 애니메이션에 유연성, 중력, 무게 및 질량을 제공합니다. 물체가 움직일 때 동일한 모양을 유지하지 않습니다.

그러나 볼륨 은 일정하게 유지되어야 합니다. 스트레칭은 더 이상 객체 얇고을 요구한다 차종은 짧고 넓은을 첨벙 첨벙. 더 얇거나 짧게 만들면 동일한 볼륨을 유지하지 않습니다.

웹 디자인에서 "Squash and Stretch"는 개체가 눈길을 끌 필요가 있을 때 사용됩니다. 물리적 질량이 있는 것처럼 보여야 하는 물체가 있는 경우 이 원리가 트릭을 수행할 수 있습니다.

2. 기대

출처: Giphy를 통한 CentoLodigiani

예상은 시청자가 앞으로 일어날 일을 미리 알 수 있도록 하여 결과적인 행동을 더욱 사실적으로 만들 수 있습니다. 무릎을 굽히지 않고 앉거나, 팔을 내밀지 않고 물건을 잡는 것은 아니겠죠? 예상은 등장인물이나 사물을 한두 가지 사실적인 동작으로 만들어 시청자에게 무슨 일이 일어날지 알려줍니다.

웹 디자인에서 예상은 전환에 사용됩니다. 예를 들어, 방문자가 정보 상자를 채우고 필요한 정보를 빠뜨리면 상자가 약간 튀어나와 주의를 끌고 "이봐, 뭔가 잘못됐어"라고 말할 수 있습니다. 예상을 사용하는 또 다른 방법은 항목을 약간 축소한 다음 호버에서 크게 만드는 것입니다.

3. 스테이징

스테이징은 보는 사람의 시선을 유도하여 원하는 위치(사진의 "리딩 라인")를 보게 합니다. 시청자가 원하는 부분에만 집중할 수 있도록 나머지 장면을 축소합니다. 스테이징의 또 다른 구성 요소는 캐릭터가 하는 모든 행동에 의도가 있다는 것입니다. 애니메이션의 각 프레임을 분리하면 포즈 뒤에 숨은 의도를 알 수 있습니다.

스테이징은 웹사이트에서 사용되는 웹 디자인 및 시각 자료에 적용하기 쉬운 원칙 중 하나입니다. 이것은 웹 페이지에 팝업이 나타날 때 일어나는 일입니다. 팝업의 움직임으로 인해 집중하게 되고 페이지의 나머지 부분이 흐려지거나 흐려지거나 가려집니다. 당신은 "무대"의 가장 중요한 부분을 비유적으로 비추고 다른 모든 것을 배경으로 유지하고 있습니다. 이를 위해 빛과 그림자도 사용할 수 있으며 웹 디자이너는 불필요한 세부 사항을 제거하는 것만으로 이 원리를 적용할 수 있습니다.

4. 직진 및 포즈 취하기

"직진"과 "포즈 투 포즈"는 애니메이션을 만드는 두 가지 다른 방법입니다. "직선"을 사용하면 프레임이 처음부터 끝까지 순서대로 생성됩니다. 이것은 애니메이션에 동적이고 유동적인 모션을 제공합니다. "포즈 투 포즈"를 사용하면 첫 번째 프레임과 마지막 프레임이 생성된 다음 필요한 중간 포즈가 추가됩니다.

출처: Vincenzo Lodigiani, 모션 아티스트

오늘날 컴퓨터 애니메이션은 누락된 프레임을 자동으로 채울 수 있기 때문에 "포즈 투 포즈"를 사용합니다. Chekhov에서 애니메이션을 확인하십시오. 실제로 유동적이지 않다는 것을 알 수 있습니다. 웹사이트에서 "직선" 애니메이션을 만들려면 여러 프레임을 정의하고 시퀀스로 표시할 수 있는 steps( ) 타이밍 기능을 사용할 수 있습니다.

5. 후속 조치 및 중복 조치

"추종 및 중첩 동작" 원리는 인물이나 물체가 움직이다가 멈출 때 피사체의 일부가 다른 속도로 움직이고 멈추는 것을 말합니다. 이것은 실제 물리 법칙을 모방합니다.

• 중첩 동작: 피사체의 다른 부분이 다른 속도로 움직입니다.
• Follow Through: 물체의 느슨하게 연결된 부분은 주 물체의 움직임이 멈춘 후에도 몇 초 동안 계속 움직입니다. 해당 부품은 정지 지점을 넘어 이동한 다음 물체를 향해 뒤로 당깁니다.

아래 예에서 라푼젤의 팔과 다리는 머리와 다른 속도로 움직입니다. 즉, 중첩 동작입니다. 그녀가 빙빙 돌리기를 멈추면 그녀의 머리카락이 잠시 동안 계속해서 흔들립니다. 이것이 팔로우스루입니다.

"끌기"는 반대가 발생하는 관련 기술입니다. 즉, 개체의 일부가 이동한 다음 나머지는 따라잡습니다. 이 모든 기법은 사실적인 움직임을 보여주거나 코믹한 효과를 위해 움직임을 과장할 수 있습니다.

'움직임'도 이와 관련이 있다. 남아있는 캐릭터는 애니메이션이 정체되지 않도록 약간의 움직임이 있습니다.

모바일 및 웹 디자인에서 "팔로우 스루"와 "중첩 액션"은 시청자에게 액션이 의도적으로 중지되었음을 보여줍니다. 그렇지 않으면 단순히 작동이 중지되었다고 생각할 수 있습니다. 예를 들어, iPhone의 Wunderlist 앱이 목록 항목을 이동하고 있음을 어떻게 표시하는지 보십시오. 항목이 다른 색상으로 바뀌고 이동함에 따라 크기가 커지고 작업이 끝나면 원래 색상과 크기로 돌아갑니다. 이렇게 하면 작업이 완료되었음을 알 수 있습니다.

iPhone에서도 이 원리가 작동하는 것을 볼 수 있습니다. 보기 사이를 전환하거나 홈 화면에서 아이콘을 이동할 때 요소가 약간 다른 속도로 이동합니다. 이것은 iPhone이 "상황이 바뀌고 있습니다."라고 전달하는 방식입니다.

6. 슬로우 인 및 슬로우 아웃

"느린 인 및 슬로우 아웃"원리는 물체가 천천히 움직이기 시작하여 추진력을 얻고 속도가 빨라졌다가 멈추면 다시 느려지는 원리입니다. 기본적으로 움직임이 자연스럽기 위해서는 가속과 감속이 필요합니다. 이 효과를 얻기 위해 동작의 시작과 끝에 추가 프레임이 있어 움직임의 점진적인 증가 및 감소를 강조합니다.

출처: Tumblr의 Illusion of Life

웹 디자인의 경우 CSS에는 이 원칙과 관련된 두 가지 타이밍 기능이 있습니다. Your Plan, Your Planet 웹사이트에서 예제를 볼 수 있습니다(먼저 "시작하기" 클릭).

7. 아크

애니메이션의 다른 12가지 원칙과 마찬가지로 "호"도 물리학을 기반으로 합니다. 물체는 일반적으로 중력 때문에 움직일 때 어떤 유형의 호를 따릅니다. 그들이 똑바로 유지된다면 움직임은 현실적이지 않고 기계적으로 될 것입니다.

이것은 로우-하이-로우 호뿐만 아니라 모든 유형의 움직임에도 적용됩니다.

웹 디자인에서 "호" 원칙은 물론 호를 그리는 애니메이션을 만드는 데 사용할 수 있지만 로드 시간과 같이 요소를 회전시키는 방법으로도 사용할 수 있습니다.

8. 2차 조치

보조 행동은 주의를 산만하게 하지 않고 주요 행동을 강조합니다. 또한 캐릭터와 개체에 더 많은 차원을 부여하고 장면에 생기를 불어넣습니다. 스테이징의 원리가 중요한 역할을 합니다. 왜냐하면 여전히 메인 액션이 초점을 맞춰야 하기 때문입니다.

보조 작업은 기본 개체를 벗어날 필요가 없습니다. 휘파람을 불거나 눈썹을 치켜올리며 감정을 표현하는 캐릭터일 수도 있다.

모바일 및 웹 디자인에서 "2차 작업" 원칙은 iPhone에서 앱을 재배열할 때와 같이 요소가 새로운 요소를 위한 공간을 만들기 위해 방해가 되지 않을 때 나타납니다. 이는 해당 작업을 강조하는 "추적 및 중복 작업"과 함께 사용할 수 있습니다.

9. 타이밍

타이밍은 매우 간단하며 "슬로우 인 및 슬로우 아웃"과 관련이 있습니다. 원칙은 요소가 현실 세계에서와 같이 자연스럽게 자연스럽게 움직여야 한다는 것입니다. 강조하기 위해 의도적으로 속도를 높이거나 낮출 수 있습니다. 사용된 프레임 수는 타이밍을 설정합니다. 프레임이 많을수록 더 느린 동작이 생성되고 프레임이 적을수록 더 빠른 동작이 생성됩니다.

이 예에서 Daffy Duck의 첫 번째 행동은 자연스러운 타이밍을 가지고 있으며, 마지막 행동은 그가 시청자에게 가까이 다가갔을 때 강조하기 위해 의도적으로 빠릅니다.

타이밍은 또한 시청자가 서로에 대한 물체의 무게를 이해하는 데 도움이 됩니다. 이 예에서 캐릭터는 무게를 천천히 들어 올렸다가 빠르게 떨어뜨려 자신에게 무거움을 보여줍니다.

출처: Giphy의 @scottthigpen

웹 디자인에서 타이밍은 특히 사용자 상호 작용에 응답할 때 요소가 조금 더 길게 유지되거나 빠르게 사라지도록 하는 데 사용됩니다. 예를 들어 사용자가 메뉴를 닫고 싶다면 300ms 동안 유지되도록 타이밍을 설정할 수 있습니다. 탐색 모음에서 요소를 탭하면 해당 작업이 빠르게(100ms) 발생하기를 원할 것입니다.

10. 과장

애니메이션의 12 개 원칙의 많은 현실에 초점을 맞춘 비록, 애니메이션의 아름다움은 진짜라는 것이다. "과장" 원칙에 따르면 너무 많은 사실주의는 애니메이션이 가장 잘하는 것, 즉 재미를 떨어뜨릴 수 있습니다. 과장은 캐릭터와 사물을 더 흥미롭게 만드는 데 사용됩니다. 그것은 현실을 받아들이고 장면을 여전히 믿을 수 있을 만큼 충분히 높였습니다. 장면이 추상적이거나 초현실적이지 않도록 과장을 자제해야 합니다.

웹 디자인에서 객체는 관심을 끌거나 흐트러뜨리기 위해 확대 또는 축소됩니다. 사용자가 웹사이트의 특정 부분(예: 양식)에서 활성화되면 다른 요소가 축소되는 동안 확장될 수 있습니다. 이것은 특히 팝업 형식을 생각할 때 "준비" 원칙과 유사합니다.

11. 솔리드 드로잉

출처: Tumblr의 Illusion of Life

애니메이션은 기술적으로 2D이지만 3D로 사실적으로 표현해야 합니다. "솔리드 드로잉" 원칙은 다음과 같은 기본 사항을 이해하고 그릴 수 있는 능력을 갖는 것에 관한 것이기 때문에 "원근법"이라고도 할 수 있습니다.

• 해부
• 균형
• 일관성
• 빛과 그림자
• 용량
• 무게

웹 디자이너의 경우 요소에 깊이를 추가하면 사용자에게 요소와 상호 작용할 수 있음을 보여줍니다. 우리 웹사이트에서 실제로 작동하는 것을 볼 수 있습니다. 아래로 스크롤하면 "다운로드에 참여" 버튼이 어떻게 분홍색으로 변하는지 확인하세요.

12. 항소

애니메이션의 12가지 원칙 중 마스터하기 가장 까다로울 수 있는 "어필"은 캐릭터, 개체 및 해당 세계가 청중에게 어필해야 한다는 것을 말합니다. 그들은 육체적으로든 그렇지 않든 어떤 면에서 매력적이고 매력적이어야 합니다. 이를 바로잡는 비법은 없지만 탄탄한 캐릭터 개발과 스토리텔링이 핵심 요소입니다.

애니메이션에서 모든 캐릭터는 매력적이지 않을 것입니다. 악당은 디즈니 영화의 초석입니다. 그러나 그들이 제시되는 방식은 여전히 ​​카리스마가 있어야 하고 청중의 관심을 끌어야 합니다.

웹 디자인에서 "어필"은 웹 사이트가 전체적으로 매력적이고 즐겁고 사용하기 쉽다는 것을 의미합니다.

마무리

디즈니의 12가지 원칙은 웹사이트에서 대화형 게임을 만드는 것과 같이 간단한 애니메이션에 도움이 될 수 있지만 모든 종류의 웹 페이지를 디자인하는 데에도 도움이 될 수 있습니다. 디즈니 영화에 관한 대부분의 소비자는 나와 비슷합니다. 내가 무언가를 좋아하고 내 뇌가 신호를 처리한다는 것을 알고 있지만 왜 그런 반응을 보이는지에 대해서는 손가락을 댈 수 없습니다. 웹디자이너의 임무는 방문자가 어떤 생각과 행동을 할 것인지 예상하고 미묘하게 올바른 조치를 취하도록 안내하는 것입니다.

청중과 소통할 수 있는 더 많은 방법을 찾고 계십니까? 색상 감정 사용에 대한 블로그 게시물을 읽어보세요.