좋은 애니메이션과 훌륭한 애니메이션의 차이
(emilkowal.ski)- 애니메이션은 UI의 품질을 좌우하는 핵심 요소로, 단순히 보기 좋음을 넘어 자연스러운 느낌과 인터랙션의 직관성을 제공함
- 훌륭한 애니메이션을 만들기 위해서는 원점 인식, 적절한 Easing 선택, 스프링 효과 활용, 도구에 대한 깊은 이해가 필수임
- 기본 CSS Easing 함수보다 커스텀 Easing 곡선이 더 강한 몰입감과 에너지를 전달할 수 있음
-
프레이머 모션의
useSpring훅을 사용하면 마우스 위치 기반 인터랙션이 더 현실적이고 부드럽게 느껴짐 - CSS 속성에 대한 이해가 깊을수록 새로운 애니메이션을 창의적으로 구현하거나 기존 애니메이션을 개선할 수 있음
Origin-aware 애니메이션
- 버튼 클릭 시 열리는 드롭다운은 버튼 위치에서 시작하는 모션이 자연스럽게 느껴짐
- 기본값인
transform-origin: center대신bottom center로 설정해야 시각적으로 더 자연스러움 -
Radix 또는 shadcn/ui를 사용하면 자동 처리 가능임
.radix-dropdown { transform-origin: var(--radix-popover-content-transform-origin); }
적절한 Easing 사용
-
ease-in보다ease-in-out이 대부분의 경우 더 자연스러운 가속과 감속 곡선을 제공함 - 특히 화면에 이미 존재하는 요소가 움직이는 경우, 자동차처럼 출발하고 멈추는 현실적인 움직임이 중요함
- 기본값은
ease-out을 추천하며, 상세 내용은 별도 링크에서 확인 가능함
커스텀 Easing 곡선 사용
- CSS 기본 Easing(
ease-in,ease-out)은 표현력이 부족하여 실제 느낌이 약함 -
ease는 간단한 호버 효과 등에는 적합하지만, 대부분의 동작은 커스텀 Easing이 필요함 - 추천 리소스:
스프링 기반 인터랙션
- 마우스 위치에 따라 요소가 바로 반응하면 인위적으로 느껴질 수 있음
-
Framer Motion의useSpring을 활용하면, 값 변화가 스프링처럼 점진적으로 반영되어 더 현실적이고 부드러운 움직임을 제공함 - 단순히 장식적인 애니메이션에서 특히 효과적이며, 기능성 UI에서는 예외일 수 있음
도구에 대한 이해
- 예: 탭 전환 시 텍스트 색상과 하이라이트 바가 함께 자연스럽게 전환되어야 함
- 이를 위해
clip-path등을 적절히 활용해야 애니메이션이 어색하지 않음 - 프레임 단위 확인이나 슬로우 모션 재생으로 미묘한 차이를 식별할 수 있음
- CSS 3D 변환을 통해 오비트 효과, 3D 로딩 애니메이션 등의 창의적 구현도 가능함
왜 중요한가?
- 오늘날 대부분의 소프트웨어는 기능적으로 충분히 좋은 상태
- 차별화된 경험을 제공하기 위해선 느낌이 좋은 UI, 그 핵심인 애니메이션이 필수임
- 언제, 어떻게, 왜 애니메이션을 적용할지에 대한 이해가 제품의 품질을 크게 좌우함
- 더 깊이 있는 내용은 Animations on the Web 강좌에서 확인 가능함