사용자경험3 웹 UX를 구성할 때 애니메이션 효과는 어떻게 사용하는 것이 좋은가? 요소의 움직임을 구성할 때 액티브되는 요소가 기존 요소들의 아래로 이동되는 것보다 사용자의 시선을 분산시키지 않도록 가장 상위로 구성하고 자연스러운 움직임으로 따라갈수 있도록 유도해야 한다. 요소의 움직이는 애니메이션 거리에 비례하는 시간은 제한사항이 분명히 있어야하고 멀어질 수록 빠르게 움직여야 한다. 사용자의 기다리는 시간은 최대한 짧도록, 그리고 크기와 거리의 비례에 따라서 동작하도록 구성한다. 하단 요소가 움직이는 것이 시선에 따라서 보이도록 약간의 딜레이를 주어서 사용자가 아래에서 컨텐츠가 올라오는 것을 볼 수 있도록 한다. 리스트를 뿌릴 때 사용자의 시선이 끊기도록 뿌리지 않고 자연스럽게 모든 컨텐츠를 눈의 속도로 이어지게 볼 수 있도록 구성한다. 리스트에서 하나의 포커스로 면이 확대될 때는 .. 2021. 7. 4. Web Vital (사용자 경험 품질 측정 / 최적화) 사용자 경험의 품질을 최적화하는 것은 웹 사이트의 장기적인 성공의 핵심입니다. 비즈니스 소유자, 마케팅 담당자 또는 개발자에 관계없이 Web Vitals은 사이트 경험을 수량화하고 개선할 기회를 식별하는 데 도움을 줄 수 있습니다. Web Vitals은 웹에서 훌륭한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공하기위한 Google의 측정 기준입니다. Google은 성능을 측정하고 보고하기 위해 수년 동안 다양한 도구를 제공했습니다. 일부 개발자는 이러한 도구를 사용하는데 전문가인 반면 다른 개발자는 도구와 측정 항목이 풍부하여 따라 잡기 어렵다는 사실을 발견했습니다. 사이트 소유자가 사용자에게 제공하는 경험의 품질을 이해하기 위해 성능 전문가일 필요는 없습니다. Web Vita.. 2020. 9. 20. [CSS 방법론] 웹 사이트 적정 수정 수준에 따른 미디어 쿼리 (feat. prefers-reduced-motion) 웹 개발을 하면서 적정 수정 수준이란 것이 있습니다. 웹에서 사람들을 위해 일을 해결하는 일을 할 기회가 있습니다. 이러한 수정의 범위가 얼마나 다른지에 대해 매우 흥미롭습니다. 사용자를 위한 미디어쿼리들이 많이 제공되고 있습니다. 그 중 하나는 prefers-reduced-motion라는 미디어쿼리 속성일 것입니다. 이 미디어 쿼리는 웹에서 사람들의 경험을 개선하기 위해 독점적으로 사용됩니다. 모션 감소를 명시적으로 요청한 사용자의 모션을 감소시키는 코드를 작성할 수 있습니다. @media (prefers-reduced-motion: reduce), (update: slow) { *, ::before, ::after { animation-delay: -1ms !important; animation-du.. 2020. 7. 26. 이전 1 다음
