기계적인 움직임에 속도감 주기 · Easing

애니메이션 시간에 따른 속도 변화. ease-out은 빠르게 시작해 끝으로 갈수록 감속

조회 0추천 0

직접 만든 예시

[패널] 등장 모션을 500ms ease-out으로 만들어줘. 같은 거리·시간의 linear 버전과 나란히 비교해줘. 모션 감소 시 이동 없이 최종 위치에 표시해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 패널이 자연스럽게 움직이게 해줘.

위: 일정한 속도 / 아래: 빠르게 출발하고 마지막에 감속

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

기간이 같아도 속도 곡선에 따라 인상이 달라집니다. “자연스럽게”를 멈추는 방식에 대한 구체적인 지시로 바꿉니다.

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Easing · Ease-out은 애니메이션 시간에 따른 속도 변화. ease-out은 빠르게 시작해 끝으로 갈수록 감속입니다.

막연한 요청을 구체적인 문구로

기존 요청: 패널이 자연스럽게 움직이게 해줘.

[패널] 등장 모션을 500ms ease-out으로 만들어줘. 같은 거리·시간의 linear 버전과 나란히 비교해줘. 모션 감소 시 이동 없이 최종 위치에 표시해줘.

위: 일정한 속도 / 아래: 빠르게 출발하고 마지막에 감속

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

기간이 같아도 속도 곡선에 따라 인상이 달라집니다. “자연스럽게”를 멈추는 방식에 대한 구체적인 지시로 바꿉니다.