GIF 로더와 벡터 애니메이션: 팀이 UI에서 애니메이션 GIF를 교체하는 이유
애니메이션 GIF가 UI 로더 및 아이콘에 적합하지 않은 이유, 대신 사용할 대상(CSS, SVG, Lottie, 비디오, 상태 기반 런타임) 및 선택 방법.
핵심 포인트
애니메이션 GIF는 최대 256개 색상의 팔레트로 제한되며 투명도를 켜거나 끌 수 있고 크기를 조정하면 흐려지며 앱 상태에 반응할 수 없습니다. UI 로더 및 아이콘의 경우 CSS 또는 SVG 애니메이션은 일반적으로 더 가볍고 선명합니다. Lottie는 더욱 풍부한 일러스트레이션을 위해 작동합니다. ExodeUI 또는 Rive와 같은 상태 기반 런타임은 애니메이션이 로드, 성공 및 오류에 따라 변경되어야 할 때 가장 좋습니다.
GIF가 할 수 있는 것과 할 수 없는 것
MDN의 이미지 형식 가이드에서는 각 GIF 픽셀이 최대 256개 색상 팔레트의 인덱스라고 설명하고 GIF와 같은 이전 형식은 WebP 및 AVIF와 같은 최신 형식에 비해 성능이 좋지 않다는 점을 지적합니다. UI의 경우 실질적인 문제는 그라데이션의 밴딩, 투명한 배경의 들쭉날쭉한 가장자리, 고밀도 화면의 흐릿한 크기 조정, 앱이 수행하는 작업에 응답할 수 있는 방법이 없다는 것입니다.
대신 무엇을 사용해야 할까요?
애니메이션이 수행해야 하는 작업을 선택하세요.
- 단순 스피너 또는 펄스: CSS 애니메이션 또는 인라인 SVG. 작고 날카로우며 움직임을 줄이기 위해 일시 정지하기 쉽습니다.
- 그림으로 표시된 루프 또는 아이콘: Lottie 또는 애니메이션 SVG. 벡터, 확장 가능, 간단한 아트웍용으로 작음.
- 사진 또는 복잡한 영상: 비디오(WebM 또는 MP4) 또는 애니메이션 WebP/AVIF(GIF 아님).
- 성공 또는 오류로 전환되는 로더: 앱 상태에 따라 구동되는 ExodeUI 또는 Rive와 같은 상태 기반 런타임입니다.
로더는 무슨 일이 일어나고 있는지 알아야 합니다.
GIF는 요청에 1초가 걸리든 1분이 걸리든 동일한 방식으로 반복되며 작업이 완료되면 체크 표시가 될 수 없습니다. 상태 기반 로더는 로딩에서 성공 또는 오류로 이동할 수 있으며 진행 상황을 표시하여 사람들에게 회전하는 이미지보다 훨씬 더 많은 것을 알려줍니다.
접근성
루핑 GIF는 자체적으로 모션 감소 설정을 존중할 수 없습니다. CSS, SVG 및 런타임 애니메이션은 사용자가 더 적은 모션을 요청할 때 일시 중지되거나 단순화될 수 있습니다. 또한 로더에 "결과 로드 중"과 같은 액세스 가능한 라벨을 제공하여 스크린 리더 사용자가 무슨 일이 일어나고 있는지 알 수 있도록 합니다.
기억할 핵심 원칙
- GIF 팔레트는 최대 256개의 색상을 보유하고 크기 조절이 제대로 이루어지지 않습니다.
- 간단한 로더에는 CSS 또는 SVG를 사용하세요.
- 그림이 있는 루프에는 Lottie를 사용하고 영상에는 비디오를 사용하세요.
- 로드가 성공 또는 오류로 전환되어야 하는 경우 상태 기반 런타임을 사용합니다.
- 움직임 감소 지원 및 접근 가능한 라벨 추가
자주 묻는 질문
출처
- Image file type and format guide — MDN 웹 문서
- lottie-web — GitHub(에어비앤비)
- prefers-reduced-motion — MDN 웹 문서