고정 UI 요소를 디자인할 때 고려해야 할 사항

---

고정 요소는 무엇인가?

고정 요소는 페이지를 아래로 스크롤 할 때 브라우저 뷰포트 내에서 고정된 위치에 유지되는 모든 것이다.

 

일반적으로 고정 네비게이션에 사용되며, 상단에 고정되어 페이지를 탐색할 때 항상 표시된다. 화면 우측 하단에 고정되어있는 채팅 도움말을 본 적 있을 수도 있다.

 

이 웹사이트는 헤더와 쿠키 알림에 고정 요소를 사용한다.

 

이 웹사이트는 헤더와 쿠키 알림에 고정 요소를 사용할 뿐만 아니라, '새 리포트' 카드를 뷰포트에 고정한다.

 

 

 

---

어떤 문제를 일으킬 수 있을까?

어떤 한 요소를 지속적으로 표시하면, 주의가 산만해져서 유저가 찾고 있는 콘텐츠에 집중하기 더 어려워질 수 있다. 고정 요소도 마찬가지다. 화면에 클릭 유도 문구가 있어도, 고정된 채팅 아이콘이 화면 위에 있는 경우라면 그것을 놓칠 수도 있다. 이 문제는 키보드 네비게이션을 고려하거나, 고정 요소에 의해 집중되어야 하는 컨텐츠가 가려질 때 상황을 더욱 악화시킨다.

 

종종 간과되는 고정 요소의 문제는 사용가능한 뷰포트의 양을 줄이는 것이다. 이것은 일부 유저들에게 약간의 성가심을 유발할 수 있지만, 확대를 사용하기로 선택한 유저들에게는 완전히 경험을 파괴할 수 있다.

 

고정 머리글이 고정 바닥글과 함께 사용되는 예를 보았다. 두 요소 모두 400%로 확대하면, 기본적으로 뷰포트 내에 다른 콘텐츠를 볼 수 있는 공간이 남지 않는다.

다음은 주요 콘텐츠를 가로막는 고정 요소를 확대한 완벽한 예다.

 

 

---

누가 확대를 사용할까?

기본적으로 누구나 브라우저 확대를 사용할 수 있다. 읽기 쉽거나 집중할 수 있도록 콘텐츠를 더 크게 만들고 싶은 사람은 브라우저 확대를 선택한다.

 

장문의 글을 볼 때 자주 사용한다. 브라우저를 250%로 확대하여 많은 방해 요소를 제거하고 눈의 피로 없이 콘텐츠를 훨씬 더 쉽게 읽을 수 있도록 한다.

시각 장애가 있는 사람들은 페이지에서 특정 항목을 읽거나 찾을 수 있도록 확대를 사용할 수도 있다.

 

 

---

이를 해결하기 위해 무엇을 할 수 있을까?

고정 요소를 사용하기로 한 결정에 대해 진지하게 질문하기
고정 요소를 고려할 때 가장 먼저 해야 할 일은 고정 요소를 사용하지 않는 것에 대해 오랫동안 열심히 생각하는 것이다. 그것을 사용하는 것이 충분한 이점이 있을까? 사용자가 고정 요소를 통해 얻을 수 있는 이점은 무엇일까? 뷰포트에 요소를 고정할 필요가 없는 이점을 제공하는 다른 방법이 있을까?

 

 

고정 요소를 최대한 간결하고 눈에 잘 띄지 않게 유지하기

이것은 고정 요소를 디자인하는 이유에 직관적이지 않게 들릴 수 있지만, 가능한 한 최소한의 공간을 차지하는 방식으로 디자인해라. 기본 확대/축소 상태에서 뷰포트의 많은 부분을 차지하는 경우, 사람들이 확대할 때 최악의 경험을 겪는다.

또한 고정 요소에 부여된 배치와 시각적 가중치를 고려해라. 다른 콘텐츠를 가릴 가능성이 적은 위치에 배치할 수 있을까? 불투명한 콘텐츠를 더 쉽게 볼 수 있도록 투명도를 사용할 수 있을까?

 

 

사람들에게 고정 요소를 끌 수 있는 옵션 제공
유저가 계속해서 고정 요소를 보게 하지 않도록 해제하거나 고정 해제할 수 있는 옵션을 줄 수 있을까?

 

 

다양한 확대 수준에 대해 다양한 레이아웃 디자인
반응형 디자인을 사용하여 다양한 확대 수준에서 콘텐츠가 리플로우되도록 하자. 예를 들어 누군가 브라우저를 200%로 확대한 경우 디자인을 리플로우하여 모바일 친화적인 레이아웃을 표시할 수 있다. 이렇게 하면 콘텐츠를 단일 열로 단순화하고 고정 요소에 대해 더 타이트한 디자인을 표시할 수 있으므로, 실제 공간을 덜 차지하게 된다.

 

컨텍스트에서 요구하는 경우 한 단계 더 나아가 이 확대/축소 수준에서 고정 요소를 끄도록 결정할 수도 있다.

 

 

리서치, 리서치, 리서치
가장 좋은 것은 가능한 한 빨리 사람들에게 디자인을 알리는 것이다. 매일 브라우저를 확대하는 사람들을 찾아 당신의 디자인을 사용하도록 요청해라. 그것은 그들을 위해 작동할까? 방해가 되나? 그것은 그들에게 어떤 가치를 제공할까?

 

이 질문에 대한 답은 고정 요소를 사용해야 하는지 여부에 대한 가장 좋은 아이디어를 제공한다.

 

고정 요소: 기능 및 접근성 테스트 — 부정적인 요소가 긍정적인 요소보다 중요하여 고정 UI를 사용하지 않기로 결정한 Gov.uk의 기사

 

 

 

 

-

저자 : Aslan Fakhri
원문 링크: https://uxdesign.cc/things-to-consider-when-designing-sticky-ui-elements-10aef22dac3d