Disney 12 principles, 디즈니 애니메이터의 1981년 책이 UX 모션으로

한 줄로

1981년 디즈니의 베테랑 애니메이터 두 명이 정리한 12가지 원칙입니다. 40년이 지나 모든 UI 모션 디자인의 교과서가 됐습니다.

어디서 왔나

1981년, 디즈니의 전설적 애니메이터 프랭크 토머스(Frank Thomas)와 올리 존스턴(Ollie Johnston)이 책 The Illusion of Life: Disney Animation을 출간했습니다. 둘 다 디즈니 황금기의 핵심 인물입니다.

이 책에서 두 사람은 1930~1950년대 디즈니 애니메이터들이 수십 년 경험으로 쌓은 12가지 애니메이션 원칙을 정리했습니다.

1. Squash and Stretch (찌그러뜨림과 늘림): 공이 떨어질 때 찌그러지고 튕길 때 늘어남.

2. Anticipation (예비 동작): 점프 전에 살짝 무릎을 굽힘.

3. Staging (연출): 한 동작에 집중하도록 화면 구성.

4. Straight Ahead vs Pose to Pose (직진 vs 키프레임): 두 가지 작업 방식.

5. Follow Through and Overlapping Action (잔동작과 겹침): 멈춰도 옷자락은 흔들림.

6. Slow In and Slow Out (가속과 감속): 시작과 끝은 느림.

7. Arc (호): 자연 동작은 직선이 아니라 곡선.

8. Secondary Action (보조 동작): 주 동작을 강화하는 작은 동작.

9. Timing (타이밍): 프레임 수가 인상을 결정.

10. Exaggeration (과장): 현실보다 더 극적으로.

11. Solid Drawing (입체적 표현): 3D처럼 느껴지는 평면.

12. Appeal (호감): 캐릭터에게 매력 부여.

이 원칙들이 UI에 도입된 건 2010년대 초입니다. 특히 iOS의 spring physics(2007부터 사용)와 Google Material Design의 모션 가이드(2014)가 이 12원칙을 명시적으로 차용했습니다.

지금 우리가 쓰는 방식

UI 모션에 가장 많이 쓰이는 5개입니다.

Slow In/Out (Easing): ease-in-out CSS. 자연스러움의 90%를 차지합니다.

Anticipation: 버튼을 누르기 전 살짝 줄어든 뒤 동작합니다.

Follow Through: 모달이 닫힐 때 부드럽게 흩어집니다.

Squash and Stretch: 클릭 시 살짝 눌리는 효과를 줍니다.

Secondary Action: 좋아요를 눌렀을 때 하트가 튀어오르며 작은 별도 함께 날립니다.

바이브 메이커가 챙길 한 가지

UI 애니메이션의 95%는 easing 곡선 한 줄로 결정됩니다. linear는 차갑게 느껴지고, ease-out은 자연스럽게 느껴집니다. 큰 라이브러리를 쓰기 전에, CSS transition-timing-function을 ease-out으로 바꾸는 것만으로도 UI 품질이 한 단계 올라갑니다.

관련

Easing curves · Spring physics · Microinteraction