더 나은 트랜지션을 위한 10가지 TIP

CSS 트랜지션은 웹 페이지에서 요소들이 변화하는 것을 조금 더 부드럽게 만들어주는 기능입니다. 이러한 부드러운 움직임을 통해 유저들은 불편함 없이 변화를 감지할 수 있습니다. 따라서 적절한 CSS 트랜지션의 사용은 유저의 경험(UX)을 개선하고 애플리케이션의 완성도를 높일 수 있습니다. 유저는 애니메이션의 움직임을 설명할 수는 없더라도 이러한 움직임이 적절한 움직임 인지, 세련된 움직임인지를 예리하고 직관적으로 알아챌 수 있기 때문입니다. 그렇다면 적절한 트랜지션 및 애니메이션을 주기 위해서는 어떻게 해야 할까요? 1. 생각하는 것보다 더 짧게 유저들은 우리 생각보다 인내심이 없습니다. 아무리 멋진 애니메이션이더라도, 필요 이상으로 오래 기다리고 싶지 않다고 합니다. 따라서 생각보다 아주 짧게 만들었다가 조금씩 늘려나가는 방법을 추천하고 있습니다. 단일 트랜지션은 0.15 ~ 0.4초가 적절하다고 합니다. 2. 적절한 가속과 감속 애니메이션이 부자연스럽다면 갑자기 시작하거나 끝나기 때문이라고 합니다. 아주 미미한 차이일지라도, 실제 세계의 움직임처럼 cubic-bezier(CSS 곡선 모델) 커브에 적절한 easing-in/out을 추가하여 완급 조절을 하는 게 좋다고 합니다. cubic-bezier에 어떤 곡선 값을 추가해야 할지 모르겠다고요? VS Code 에디터에서는 자동 완성 기능이 있어서 cubic-bezier를 입력하면 자동으로 옵션 값이 드롭 다운으로 표시됩니다. 3. 적을수록 좋다(?) 너무 많은 움직임은 득보다 실이 많을 수 있습니다. 가령 opacity는 0에서 1보다는 0.4에서 1과 같이 더 작은 범위를 사용하는 게 더 자연스럽게 느껴질 수 있습니다. 동작이 많이 바뀔수록 전환이 과도하게 보일 수 있습니다. 너무 많은 것을 하는 것은 오히려 아무것도 하지 않는 것보다 나쁠 수 있습니다. 이 외에도 하드웨어 가속에 의존하는 CSS 속성들의 사용 및 필요시 will-change 사용 등 더 나은 트랜지션을 위한 10가지의 팁을 안내하고 있으니 관심 있으신 분들은 방문하여 보시기를 추천드립니다.

Ten tips for better CSS transitions and animations

Josh Collinsworth

Ten tips for better CSS transitions and animations

다음 내용이 궁금하다면?

지금 간편 가입하고 다음 내용을 확인해 보세요!

또는

이미 회원이신가요?

2023년 3월 20일 오전 3:34

 • 

저장 34조회 2,596

댓글 0