Web Guide웹 애니메이션모션인터랙션
모션과 애니메이션: 어디까지가 적절한가
움직임이 많은 사이트가 좋은 사이트는 아닙니다.
모션은 정보 전달을 돕기 위한 것입니다. 그 역할을 하지 않는 움직임은 방해입니다.
01모션이 해야 할 일
좋은 모션은 무언가를 알려줍니다. 지금 무슨 일이 일어나고 있는지, 이것을 누르면 되는지, 어디에서 어디로 이동했는지 같은 것들입니다.
화면을 화려하게 만드는 것은 모션의 목적이 아닙니다.
01
상태 변화 알림
버튼에 마우스를 올리면 색이 바뀝니다. 누를 수 있음을 알려줍니다.
02
진행 표시
로딩 중임을 보여줍니다. 기다림이 덜 답답해집니다.
03
관계 설명
메뉴가 어디서 펼쳐지는지 보여줘 구조를 이해시킵니다.
04
주의 유도
새 알림이나 오류를 알립니다. 자주 쓰면 효과가 사라집니다.
05
맥락 유지
화면이 바뀔 때 갑자기 튀지 않게 합니다.
02과한 모션의 문제
스크롤할 때마다 요소가 하나씩 나타나는 효과가 유행한 적이 있습니다. 처음에는 인상적이지만 몇 번 보면 답답합니다. 내용을 보려고 기다려야 하기 때문입니다.
또 움직임에 민감한 사람에게는 어지러움을 유발할 수 있습니다.
과한 모션
스크롤마다 나타남 · 긴 전환 시간 · 여러 요소가 동시에 움직임 · 내용을 기다려야 함 · 어지러움 유발 · 성능 부담
절제된 모션
짧고 빠름 · 필요한 곳에만 · 한 번에 하나 · 내용이 즉시 보임 · 인지 부담 없음
03속도와 타이밍
모션이 느리면 답답하고, 너무 빠르면 무슨 일이 일어났는지 인지하지 못합니다. 적정 속도가 있습니다.
대부분의 인터페이스 모션은 0.2~0.3초 정도가 적절합니다. 이보다 길면 기다리는 느낌이 듭니다.
마우스 올림 반응
매우 짧게. 즉각적으로 느껴져야 합니다.
메뉴 펼침
짧게. 0.2초 내외.
화면 전환
조금 길게 해도 되지만 0.4초를 넘기지 않습니다.
스크롤 등장
쓴다면 매우 짧게. 또는 아예 쓰지 않습니다.
로딩 표시
반복되는 애니메이션. 부드럽고 단순하게.
04움직임을 줄이는 설정을 존중한다
운영체제에 '움직임 줄이기' 설정이 있습니다. 어지러움을 느끼는 사용자가 켜 두는 기능입니다.
이 설정이 켜져 있으면 애니메이션을 줄이거나 없애도록 대응하는 것이 접근성 측면에서 필요합니다.
시스템 설정 감지'움직임 줄이기'가 켜져 있으면 애니메이션을 최소화합니다.
자동 재생 영상소리 없이, 그리고 멈출 수 있게 합니다.
반복 애니메이션계속 움직이는 요소는 멈출 수단을 제공합니다.
번쩍임 주의빠르게 깜빡이는 효과는 피합니다.
성능 확인저사양 기기에서 버벅이지 않는지 확인합니다.
CHECK POINT
□ 각 모션이 무엇을 알려주는지 설명할 수 있는가
□ 스크롤 등장 효과가 과하지 않은가
□ 모션 지속 시간이 0.3초 내외인가
□ 여러 요소가 동시에 움직이지 않는가
□ '움직임 줄이기' 설정에 대응하는가
□ 자동 재생 영상을 멈출 수 있는가
□ 저사양 기기에서 버벅이지 않는가
#웹 애니메이션#모션#인터랙션#스크롤 효과#접근성#성능#사용성#홈페이지 디자인#웹비스타#홈페이지 제작