이징함수 (Easing Function)
쉽게 풀면
움직임이 처음엔 천천히, 중간엔 빠르게, 끝엔 다시 느려지는 것처럼 자연스럽게 만들어주는 계산 방식이다. 물체가 처음에는 천천히 움직이다가 점점 빨라지거나, 반대로 빠르게 움직이다가 서서히 멈추는 것처럼 속도 변화를 표현하는 수학적 곡선이다.
왜 중요한가
이징 함수는 애니메이션의 시간에 따른 속도 변화를 정하는 수식으로, 등속으로 움직이는 요소가 기계적이고 부자연스럽게 보이는 반면 가속 후 감속(ease-in-out)하는 움직임은 물리 세계의 관성과 닮아 자연스럽게 느껴지게 합니다. UI 모션 디자인에서 화면 전환, 메뉴 열림, 스크롤 되돌림의 느낌을 결정하는 가장 기본적인 변수입니다.
논문에서는 이렇게 쓰입니다
속도 곡선의 차이가 사용자의 움직임 인식 만족도에 미친 영향을 검증한 연구이다.
이 문장은 이징함수의 정의를 다시 확인하는 것으로, 앞서 쉽게 풀어 설명한 내용과 같은 맥락에서 이 개념이 논문에서 분석 기준으로 쓰임을 보여준다.
조금 더 깊게 보면
이징 선택은 취향 문제가 아니라 의미 전달 문제입니다. 화면에 등장하는 요소는 감속(ease-out)으로 빠르게 나타나 자리잡고, 사라지는 요소는 가속(ease-in)으로 떠나는 것이 '들어옴'과 '나감'을 읽히게 한다는 것이 머티리얼 디자인 등의 지침입니다. CSS의 큐빅 베지어 곡선으로 대부분 표현되지만 스프링 물리 기반 이징은 중단·재개 시 자연스러워 iOS 등에서 선호됩니다. 이징이 좋아도 지속 시간이 길면 지연으로 느껴지므로 곡선과 시간을 함께 조정해야 합니다. 이징 함수는 시작과 끝에서 느리고 중간에 빠른 이즈인아웃, 시작만 느린 이즈인, 끝만 느린 이즈아웃 등으로 나뉘며, 화면에 들어오는 요소에는 감속하며 멈추는 이즈아웃을, 화면 밖으로 나가는 요소에는 가속하며 사라지는 이즈인을 쓰는 것이 머티리얼 디자인 등의 일반적 관례다. 등속 리니어 이징은 위치 이동에서는 기계적인 인상을 주어 불투명도·색상 변화나 진행 표시줄 등에 주로 한정되며, 대신 자연계의 물체가 움직이는 방식에 가까운 곡선을 표준 라이브러리로 제공해 개발자가 매번 새로 만들지 않도록 한다.
주의할 점
이징함수를 일정한 속도(linear)로만 적용하면 기계적이고 부자연스러운 움직임으로 인지될 수 있다.