The Illusion of Life : Disney Animation

 >link

 >link 

>link

 The Illusion of Life의 12가지 기본 원칙

1. Squash and stretch (짓눌림 & 찌그러짐 & 늘어짐)

사물 고유의 중량과 물건이 움직일 때의 강도를 표시함

제공하는 서비스의 모바일 경험이 단단한 면,  날카롭고 정확한 움직임인지,

유기체적인 부드러움을 가진 우아한 움직임인지? 

(예. 물풍선 잡은 상태, 책장 넘기는 효과)

2. Anticipation (예측)

앞으로 어떤 일이 일어날지 관찰자에게 단서(인사이트)를 제공함

객체가 움질 수 있는 속도, 방향, 객체의 제스처 가능성에 대한 단서를 제공

행위의 준비 > 행위 그 자체 > 움직임의 결과 

(예. 볼링 자세, 촬영 준비시 조리개 ani, Lock screen LCD on 효과)

3. Staging (준비)

인터랙션 시 (사용자가 추가로 해석하지 않도록) 구조를 명확하게 보여주어야 함

현재 보여지는 파일이 전체 구조에서 어떤 위치에 있는지 명확하게 표시 

(예. 캐릭터의 프로필보다 입체적인 view, 키노트 페이지 전환 효과)

4. Straight ahead and pose-to-pose (곧장 앞으로 & 포즈에서 포즈로)

애니메이션 드로잉 과정
Straight ahead - 특별한 움직임, 역동적 행위 포착

pose-to-pose - 핵심 프레임 (사이를 연결해주는 프레임)
(예. 걷는 이미지 연속사진 & Key 프레임 표시)

5. Follow through and overlapping action (따라오기 & 겹치기 액션)

행위의 단계적 마무리 표현

객체의 일부가 객체의 다른 부분이 멈춘 후에도 지속적으로 움직이는 것을 포착
객체들의 시점과 속도의 미묘한 변화에 따른 움직임을 포착하여 좀 더 자연스럽게 보이도록 함
(예. 원도우 폰 타일 전환)

6. Slow in and out

관성의 법칙 표현법 (세상의 사물들은 가속화되었다가 속도가 감소되는데 시간이 필요)

사물의 시작과 끝의 움직임 근처에는 더 많은 프레임을 추가하고 중간은 더 적게 표현

(예. 수평선에서 공을 던질 때)

7. Arcs (호)

객체는 공간에서 임의대로 움직이는 것이 아니라
추진력, 바람 저항, 중력 같은 힘에 의해 영양을 받아 예측 가능한 동선(궤적)을 따라 움직임

(예. 식물, 사람, 동물 같은 유기체는 아치 모양을 그리듯 움직이고, 기계적 사물은 직선적 궤적으로 움직이는 경향)

8. Secondary action (보조 움직임)

보조적 움직임으로 (산만하지 않게 움직임의 연속선 상에서) 주 행위를 지원

주 행위를 풍부, 분위기를 강화, 강조시켜 줌
(예. 아이폰에서 사용자가 이메일 URL tap)

9. Timing (프레임 수)

무게, 사이즈, 규모와 같이 객체의 물리적 특성을 표현 (물리적 법칙을 준수해야 함)

캐릭터의 기분과 성향 같은 미묘한 감정적 상태를 전달
디자인에 인터페이스 요소의 움직임과 스피드를 통해 무엇을 전달할지 이해 필요
(예. 스트를 스크롤하는 속도나 스크린 간 전환 속도)

10. Exaggeration (과장)

움직임을 역동적이고, 생생하고 즐거움을 느끼도록 만드는 요소
디자인 요소가 어떻게 움직이는지 계산하고, 움직임을 강조하기 위해 형태, 범위, 요소를 혼합하여 수정 

(예. 아이패드 홈 > 어플리케이션 오프닝 시 트램펄린 전환)

11. Solid Drawing

시물과 캐릭터에 부피와 무게를 통해 적합한 차원을 구체적으로 보여줌

3차원 형태의 기본인 해부학적 구조, 무게, 균형, 빛과 그림자를 이해해야 함

12. Appeal (캐릭터의 매력)

 모션 적용 프로세스 

> 스케치 - 모션 스토리보드 
> 와이어프레이밍 - 문서에 표시
> 프로토타이핑 - 소프트웨어 프로토타입핑

 프로세스 중 핵심적인 활동 Tip

1. 제약 연습하기

과하게 적용하지 말아야 함. 모션을 전달하기 위해 치밀함과 섬세한 기교가 필요

2. 상호 보완 원리

가장 효과적인 애니메이션은 많은 원칙들이 함께 결합되어 적용됨. 애니메이션 스킬이 성장함에 따라 훌륭한 레시피처럼 이 원칙들을 아름답게 조합하는 방법을 배우게 됨.

3. 지원하는 역할로의 애니매이션

애니메이션은 모바일 경험의 보완제. 경험을 손상시키거나 혼동시키지 않는지 확인

 Real-Life Metaphor

실세계의 모습과 현상, 사물의 형태나 상황을 다른 매체에 그대로 재현하는 방식

(스큐어모피즘 : 도구의 물질적인 형태, 형식을 모방)