UI,UX,접근성,기본개념 등23 접근성 좋은 웹 애니메이션 만들기(WCAG) WCAG(웹 콘텐츠 접근성 지침)에 의한 이야기를 해볼까 합니다. Web Content Accessibility Guidelines(WCAG)에 따르면 애니메이션에 있어서 일시중지 및 재생제어 기능을 제공해야하는 시기와 화면 깜빡임 또는 깜빡임에 대한 제한 등 움직임에 민감한 사용자를 위한 애니메이션을 줄이는 등 다양한 지침들이 포함됩니다. Pause, Stop, Hide 특히, 애니메이션에 적용되는 WCAG 권장 사항 중 첫 번째는 Pause, Stop, Hide 입니다. For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is pres.. 2022. 1. 20. 애플 제품사이트와 같은 멋진 스크롤 UX를 가진 사이트 이해하기 https://www.apple.com/kr/airpods-pro/ AirPods Pro 새롭게 선보이는 AirPods Pro. 액티브 노이즈 캔슬링, 투명성 모드, 맞춤형 핏까지. 이 모든 걸 갖춘 놀랍도록 가벼운 인 이어 헤드폰. www.apple.com 위와 같은 애플 에어팟 프로 사이트와 같이 스크롤에 따른 동영상 애니메이션과 가속도를 활용한 유려한 애니메이션들을 보면 어떤 생각들이 드시나요? 제품을 조금 더 구매하고싶은 욕구를 강력하게 만들어주는 이러한 사용자 경험(UX)에 대해서 어떻게 생각하시나요? 미적이고 유려한 것들이 제품의 사업적 가치를 더욱 더 올려주고 브랜드의 가치를 더욱 더 뛰어나게 해주고 그러한 랜딩페이지는 사용자로 하게끔 해당 제품을 구매할 수 있도록 유도하기에 충분합니다. 기.. 2021. 7. 4. 웹 UX를 구성할 때 애니메이션 효과는 어떻게 사용하는 것이 좋은가? 요소의 움직임을 구성할 때 액티브되는 요소가 기존 요소들의 아래로 이동되는 것보다 사용자의 시선을 분산시키지 않도록 가장 상위로 구성하고 자연스러운 움직임으로 따라갈수 있도록 유도해야 한다. 요소의 움직이는 애니메이션 거리에 비례하는 시간은 제한사항이 분명히 있어야하고 멀어질 수록 빠르게 움직여야 한다. 사용자의 기다리는 시간은 최대한 짧도록, 그리고 크기와 거리의 비례에 따라서 동작하도록 구성한다. 하단 요소가 움직이는 것이 시선에 따라서 보이도록 약간의 딜레이를 주어서 사용자가 아래에서 컨텐츠가 올라오는 것을 볼 수 있도록 한다. 리스트를 뿌릴 때 사용자의 시선이 끊기도록 뿌리지 않고 자연스럽게 모든 컨텐츠를 눈의 속도로 이어지게 볼 수 있도록 구성한다. 리스트에서 하나의 포커스로 면이 확대될 때는 .. 2021. 7. 4. 스크롤을 더 할 수 있다? 스크롤 영역에 관한 인디케이터 스크롤 영역 자체를 보여주는 것이 디자인을 침해하는 상황이 잦습니다. 그래서 요즘 디자인에서 스크롤 영역을 가리는 부분들이 많은데요. 이를 대체하기 위한 방법들에 대해서 소개합니다. 특히 macOS같은 경우는 스크롤 시에만 스크롤을 노출 시켜줍니다. 아래의 코드들을 보시면 예시1은 스크롤에 대한 대책이 없어서 문제인 상황이고 2부터는 문제해결 상황입니다. 예시 2같은 경우는 스크립트가 별도로 필요없고, 3,4,5 같은 경우는 스크립트가 일부 필요합니다. 유용한 정보이길 바랍니다. 감사합니다. See the Pen Indicating Scrollable Content by YoungMinKim (@oinochoe) on CodePen. 출처 : https://css-tricks.com/thats-just-.. 2021. 6. 28. 이전 1 2 3 4 5 6 다음
