topic★★★★★난이도 · 약 10분
이징 선택 가이드
상황별 최적 이징 매칭 — UI 등장은 ease-out, 퇴장은 ease-in, 강조는 spring.
#이징 가이드#선택#실전#매칭
왜 배우는가
이징의 종류를 아는 것과 상황에 맞게 선택하는 것은 다른 차원의 역량이다. 이 가이드를 머릿속에 장착하면, 모션을 설계할 때 '어떤 이징을 쓸까?' 고민하는 시간이 크게 줄어든다.
이징 선택의 핵심 원칙은 간단하다: 관객의 시선을 어디에 두고 싶은가? 등장할 때는 안착 순간을 부드럽게(ease-out), 퇴장할 때는 출발을 부드럽게(ease-in), 이동할 때는 양끝을 부드럽게(ease-in-out).
| 상황 | 추천 이징 | 이유 |
|---|---|---|
| 요소 등장 (Enter) | ease-out | 빠르게 나타나 부드럽게 안착 → 안착 위치에 시선 고정 |
| 요소 퇴장 (Exit) | ease-in | 천천히 떠나다 빠르게 사라짐 → 깔끔한 마무리 |
| 화면 내 이동 | ease-in-out | 출발·도착 모두 부드러움 → 자연스러운 위치 전환 |
| 버튼 피드백 | spring (짧은) | 탄성 있는 반응 → 촉감 피드백 |
| 모달 등장 | ease-out 또는 spring | 빠르게 나타나 안착 → 주목 |
| 알림 배지 | bounce | 통통 튀며 주의 끌기 |
| 프로그레스 바 | linear | 일정한 속도 → 정확한 진행률 표시 |
| 배경 전환 | ease-in-out (느리게) | 눈에 띄지 않는 부드러운 변화 |
3초 규칙: 이징을 고를 때 3초 이상 고민하면 ease-out을 쓰자. 대부분의 UI 모션에서 ease-out이 가장 범용적이고 안전한 선택이다. 특별한 이유가 있을 때만 다른 이징으로 바꾸면 된다.
Duration(지속 시간) 가이드: 이징만큼 중요한 것이 시간이다. ① Enter: 200~300ms ② Exit: 150~250ms (Enter보다 짧게) ③ 화면 전환: 300~500ms ④ 색상/투명도 변화: 150~200ms ⑤ 배경 전환: 500~1000ms. 원칙: 작은 변화는 빠르게, 큰 변화는 느리게.
실기 드릴 1문항
edit실기 드릴 · 단답형
모달 창이 화면에 등장할 때, exit보다 enter의 duration이 더 긴 것이 일반적이다. enter와 exit 각각의 권장 이징은?