[Youtube] Web Animation: Today and Tomorrow

출처 : Chrome for Developer

notebookLM을 이용해 작성되었습니다.

오늘과 내일의 웹 애니메이션

본 문서는 웹 애니메이션의 현재 상태와 미래 발전에 대한 최신 정보를 제공하는 "Web animations today and tomorrow" 영상 자료를 바탕으로 작성되었습니다. 이 문서는 영상의 주요 테마와 중요한 개념 및 사실들을 검토하며, 적절한 경우 원문 인용을 포함합니다.

1. 웹 애니메이션의 중요성 및 원칙

UI/UX 개선: 웹 애니메이션은 단순한 디자인 요소 그 이상입니다. 영상은 "UI 애니메이션이 미묘하고 눈에 거슬리지 않으며 짧을 때, 사용자 경험을 향상시키고 피드백 및 상태 변경을 전달하며 방향 상실을 방지하고 표시기를 강화할 수 있다."는 Nielsen Norman Group의 연구 결과를 인용하며 애니메이션이 사용자에게 가이드, 정보 제공, 즐거움을 선사할 수 있음을 강조합니다.

인터페이스의 동적 특성: 인터페이스는 정적이지 않으며, 페이지 전환이나 컴포넌트 조작과 같은 상태 변화 사이에 많은 일이 일어날 수 있습니다. 애니메이션과 트랜지션은 이러한 변화를 부드럽게 연결하는 역할을 합니다.

접근성 고려: 애니메이션 사용 시 가장 중요한 원칙 중 하나는 사용자의 선호를 존중하는 것입니다. prefers-reduced-motion 미디어 쿼리를 CSS와 JavaScript에서 확인하여 사용자가 과도한 모션을 선호하지 않는 경우 이를 감지하고 존중해야 합니다. "Reduced motion에 대한 선호가 no motion과 같지는 않다."는 점을 명심하고, 요소 이동 거리 축소, 애니메이션 지속 시간 조정, 크로스 페이드 사용 등 대안을 고려할 수 있습니다.

애니메이션 타이밍 및 이징: Nielsen Norman Group의 연구에 따르면 대부분의 애니메이션 지속 시간은 복잡성과 요소 이동 거리에 따라 100ms에서 500ms 사이여야 합니다. 100ms는 즉각적인 느낌을 주고, 400ms는 느리게 느껴지며, 200~300ms가 실질적인 화면 변화를 유발하는 애니메이션에 적합합니다. 작은 상호작용에는 100ms가 적합합니다. Material Design의 모션 섹션은 닫기, 해제, 축소 애니메이션에 더 짧은 지속 시간을 사용하도록 권장하며, 진입 효과에는 감속 이징(decelerated easing), 종료 효과에는 가속 이징(accelerated easing)을 사용하는 것이 좋습니다.

2. 새로운 웹 애니메이션 기능 및 API

CSS @starting-style: 요소가 처음 렌더링될 때 CSS 속성에 대한 초기 값을 정의할 수 있게 해주는 기능입니다. 이를 통해 요소가 나타날 때 지정된 시작 값에서 현재 값으로 부드럽게 트랜지션될 수 있습니다. Chrome 116 (2023)에 도입되었고, Safari 17.5에서 지원하며 Firefox에서도 구현 중입니다. display 속성의 트랜지션은 아직 모든 브라우저에서 완벽하게 지원되지 않을 수 있습니다.

interpolate-size 및 calc-size: 과거에는 auto, min-content, max-content, fit-content와 같은 내재적 크기 키워드로의 트랜지션이 불가능했습니다. interpolate-size: allow-keywords 속성을 통해 고정된 크기에서 내재적 크기 키워드로, 그리고 그 반대로 트랜지션할 수 있게 되었습니다. Chrome 129에 도입되었습니다. calc-size 함수는 내재적 크기와의 계산이 필요할 때와 같은 더 고급 사용을 위해 예약되어 있습니다.

details-content pseudo-element: details 요소의 내용을 감싸는 새로운 가상 요소입니다. Chrome 131 (2024) 및 Safari 18.4에서 지원하며, Interop 2025 노력의 일환으로 Firefox에서도 지원될 예정입니다. 이 가상 요소를 통해 details 요소의 애니메이션 제어가 용이해졌습니다. 또한 details 요소에 block 이외의 display 타입을 사용하여 수평 아코디언 등을 만들 수 있게 되었습니다.

스크롤 기반 애니메이션 (Scroll-driven animations): 기존 CSS 또는 Web Animations API 애니메이션의 진행 상황을 스크롤러에 연결할 수 있는 기능입니다. 스크롤 방향과 속도에 따라 애니메이션이 앞으로 또는 뒤로 스크럽됩니다. Chrome 115 (2023)에 도입되었고, Safari에서도 지원합니다. Firefox는 실험적 구현을 진행 중입니다. 스크롤 기반 애니메이션은 프로그레시브 인핸스먼트로 간주되므로 현재 지원하는 브라우저에서 사용해 볼 가치가 있습니다.

뷰 트랜지션 (View Transitions): 웹사이트의 두 상태 간에 부드러운 전환을 가능하게 하는 기능입니다. document.startViewTransition() 스크립트 호출 또는 CSS 옵트인을 통한 페이지 탐색 시 트리거될 수 있습니다. View Transition API는 많은 부분을 자동 처리하며, CSS 애니메이션 또는 Web Animations API를 사용하여 애니메이션을 커스터마이징할 수 있습니다. Chrome 123 (2024)에 같은 문서 뷰 트랜지션(same-document view transitions)이, Chrome 126 (2024)에 교차 문서 뷰 트랜지션(cross-document view transitions)이 도입되었습니다. Safari에서도 지원하며, 같은 문서 뷰 트랜지션은 Interop 2025의 일부가 되어 Firefox에서도 지원될 예정입니다. React는 내장 뷰 트랜지션 컴포넌트를 통해 프레임워크 통합을 지원합니다.

자동 생성 뷰 트랜지션 이름: view-transition-name: match-elements를 사용하면 각 스냅샷 요소에 고유한 뷰 트랜지션 이름을 수동으로 지정할 필요 없이 Chrome이 요소의 identity를 기반으로 내부 이름을 생성합니다. (같은 문서 뷰 트랜지션에 한정)

attr() 함수: view-transition-name 속성에서 마크업의 속성 값을 읽어 사용할 수 있습니다.

중첩 뷰 트랜지션 그룹 (Nested view transition groups) (예정): 뷰 트랜지션 그룹 가상 요소를 중첩하여 중첩된 요소의 스냅샷이 다른 스냅샷에 의해 클리핑될 수 있도록 합니다. view-transition-group 속성을 사용하여 부모 또는 자식 요소에 적용합니다.

스코프드 트랜지션 (Scoped transitions) (예정): document.startViewTransition() 대신 특정 요소에 startViewTransition()를 호출하여 해당 요소에만 뷰 트랜지션을 적용하고 페이지의 나머지 부분에 영향을 주지 않습니다. 여러 서브트리에서 동시에 뷰 트랜지션을 실행할 수 있게 됩니다.

3. 결론

웹 애니메이션은 사용자 경험을 개선하는 강력한 도구이며, @starting-style, interpolate-size, calc-size, 스크롤 기반 애니메이션, 뷰 트랜지션과 같은 새로운 웹 플랫폼 기능들은 개발자에게 더 많은 제어 권한을 제공합니다. 이러한 도구들을 통해 미묘한 토글 스위치 애니메이션부터 몰입형 다중 페이지 전환에 이르기까지 다양하고 매력적인 경험을 만들 수 있습니다. 웹은 개발자의 캔버스이며, 이러한 새로운 기능들을 활용하여 역동적이고 매력적인 웹을 구축할 수 있을 것입니다.

참고

본 브리핑 문서는 영상의 내용을 바탕으로 작성되었으며, 특정 코드 예제나 상세 구현 방법은 원본 영상을 참고하시기 바랍니다. @starting-style, interpolate-size, 스크롤 기반 애니메이션, 뷰 트랜지션 등에 대한 더 자세한 정보는 영상에서 언급된 관련 문서 및 웹사이트를 방문하시기 바랍니다.