topic★★★★★난이도 · 약 12분
Squash & Stretch
물체의 질량감과 탄성을 표현하는 가장 기본적인 애니메이션 원칙.
#디즈니#12원칙#squash#stretch#부피 보존
왜 배우는가
디즈니 12원칙 중 가장 먼저 등장하는 원칙이다. 공이 바닥에 닿으면 찌그러지고(squash), 튀어오를 때 늘어난다(stretch). 이 단순한 변형 하나만으로도 물체에 생명력이 부여된다. 영상편집에서 텍스트 등장, 로고 바운스, 버튼 피드백에 직접 적용된다.
Squash & Stretch는 물체가 힘을 받았을 때의 변형을 과장하여 질량감과 탄성을 표현하는 원칙이다. 바닥에 부딪힌 공은 납작해지고(squash), 튀어오를 때는 세로로 늘어난다(stretch). 이 단순한 변형이 없으면 물체는 딱딱한 돌덩이처럼 보인다.
핵심: 부피 보존 법칙. squash로 세로가 줄면 가로가 늘어나야 하고, stretch로 세로가 늘면 가로가 줄어야 한다. 전체 면적(부피)이 일정해야 자연스럽다. 부피가 변하면 물체가 팽창/수축하는 것처럼 보여 어색해진다.
| 재질 | squash/stretch 정도 | 예시 |
|---|---|---|
| 고무공 | 크게 변형 | 바운싱 볼, 탄성 로고 |
| 볼링공 | 거의 변형 없음 | 무거운 타이틀 등장 |
| 젤리 | 매우 크게 + 여운 | 말랑한 캐릭터, 스티커 |
| 금속 | 미세하게만 | 기계적 UI 요소 |
AE/CSS 적용법 — AE: Scale 속성에서 X/Y를 반대로 키프레임한다 (예: squash = scaleX 120%, scaleY 80%). CSS: `transform: scaleX(1.2) scaleY(0.8)` → `transform: scaleX(0.9) scaleY(1.1)` 으로 전환. 반드시 `transform-origin: bottom`을 설정해야 바닥에 붙은 채로 변형된다.
실기 드릴 1문항
check_circle실기 드릴 · OX
Squash & Stretch를 적용할 때, squash 상태에서 가로가 줄고 세로도 줄면 자연스러운 애니메이션이 된다.