topic★★★★★난이도 · 약 10분

Ease-in / out / in-out 비교

3가지 기본 이징의 체감 차이 — 언제 어떤 이징을 선택해야 하는가.

#ease-in#ease-out#ease-in-out#이징 비교

왜 배우는가

이징의 종류는 수십 가지지만, 기본은 3가지다. 이 3가지의 체감 차이를 정확히 구분하면, 나머지는 모두 이 변주로 이해할 수 있다. 등장에는 ease-out, 퇴장에는 ease-in — 이 간단한 규칙만 지켜도 아마추어를 벗어난다.

3가지 이징은 '어디에서 느린가'로 구분된다. Ease-in: 시작이 느림(가속). Ease-out: 끝이 느림(감속). Ease-in-out: 시작과 끝 모두 느림(가속 → 감속). Graph Editor에서 각각의 곡선 형태가 다르다.

세 트랙의 공이 동시에 출발 — ease-in/out/in-out 체감 차이를 비교하세요

이징	곡선 형태	체감	대표 사용처
Ease-in	시작 평탄 → 끝 가파름	느리게 출발 → 빠르게 사라짐	퇴장(exit), 화면 밖으로 사라질 때
Ease-out	시작 가파름 → 끝 평탄	빠르게 등장 → 부드럽게 안착	등장(enter), 요소가 제자리에 도착할 때
Ease-in-out	양끝 평탄 → 중간 가파름	부드럽게 출발 → 빠르게 이동 → 부드럽게 도착	화면 내 이동, 위치 전환

암기법: 이름에서 'in'은 동작의 시작, 'out'은 동작의 끝을 의미한다. ease-in = 시작이 부드러움(천천히 가속). ease-out = 끝이 부드러움(천천히 감속). ease-in-out = 양쪽 다 부드러움.

많은 사람이 혼동하는 포인트: 'ease-in'이라고 해서 '화면에 들어올 때(enter)' 쓰는 것이 아니다. ease-in은 '느리게 시작'이므로 오히려 퇴장에 적합하다. 화면에 들어올 때는 빠르게 나타나서 천천히 안착하는 ease-out이 자연스럽다.

실기 드릴 2문항

edit실기 드릴 · 단답형

UI 요소가 화면 밖으로 퇴장(exit)할 때 적합한 이징은?

check_circle실기 드릴 · OX

ease-in이라는 이름 때문에 요소가 화면에 들어올 때(enter) 사용하는 것이 맞다.