Adobe XD 6월 릴리스에 도입된 고정 위치 기능을 사용하면 디자인 오브젝트를 아트보드의 특정 위치에 고정시킬 수 있습니다. 이 기능은 고정된 머리글과 내비게이션을 만들 때 자주 사용됩니다.

디자이너와 개발자는 고정 위치 설정에 대한 상반된 의견을 갖습니다. 잘못 만들면 스크롤 오류와 불쾌한 사용자 경험으로 이어질 수 있기 때문입니다. 사용자 경험(UX) 제작 시 고정 위치를 사용하는 경우 고려해야 할 사항은 고정 위치 디자인 모범 사례를 살펴보십시오. 이 시간에는 좀 더 심도 있게 다루기 위해 UX, 유저 인터페이스(UI), 액세서빌러티 전문가 네 분을 모시고 고정 위치에 대한 이들의 의견을 직접 들어 보았습니다. 이들 전문가의 조언을 진지하게 고려한다면 고정 위치는 사용자 경험을 저해하는 것이 아니라 향상시켜줄 것입니다.

신중한 접근

고정 위치는 사용자의 관심을 끌게 됩니다. 고정 위치로 인한 시선 분산이 방문자의 목적에 도움이 될지 혹은 방해가 될지 파악해야 합니다.

사람들이 온라인상에서 주로 하는 두 가지 작업은 콘텐츠 탐색과 콘텐츠 소비입니다. 콘텐츠 소비에 해당하는 경우 사용자의 주의를 분산시키는 요소를 없애야 합니다.

몇 년 전 들었던 디자인 수업이 기억에 남는데, 당시 콘텐츠가 풍부한 웹 사이트에 세련된 IA(정보 아키텍처)를 구축하고 난 뒤 스스로 만족해하며 특정 위치에 고정된 머리글과 바닥글을 디자인했습니다. 대형 모니터에서는 이러한 고정 위치가 읽기 경험에 큰 영향을 주지 않았습니다. 하지만 사용자가 작은 노트북을 통해 콘텐츠를 읽을 수도 있다는 점을 이해하게 된 것은 웹 사이트를 런칭한 후였습니다. 내비게이션이 작은 화면의 1/3을 차지했고, 손가락으로 페이지를 넘기면서 보는 읽기 경험은 매우 열악했습니다.

고정 위치는 사용자의 시선을 지속적으로 유지시키며 정보를 보완해주는 유용한 역할을 할 수 있습니다. 잘 만들어진 고정 위치는 사용자가 필요로 할 때마다 더 많은 세부 정보를 제시하는 몰입형 경험을 제공할 수 있지만 사용자의 목적을 지원하는 용도가 아니라, 조직의 비즈니스 목표를 촉진하기 위한 필사적인 수단으로 사용되는 경우가 종종 있습니다. 최신 상품의 과대 홍보, 이메일 구독 종용, 지속적인 “지금 구매” 알림 등은 상품의 인지도를 높이기보다는 불필요한 노이즈만 증폭시킬 뿐입니다.

요소를 특정 위치에 고정시킬 수 있다고 해서 반드시 이 기능을 사용할 필요는 없습니다. 아무런 대책 없이 고정 요소를 사용하기에 앞서, 잘못된 디자인을 임시방편으로 수정하기 위한 해결책으로 사용하는 것은 아닌지 짚고 넘어가시기 바랍니다.

– 크리스 하우, 클리어레프트(Clearleft), 선임 UX 컨설턴트

충분한 여백의 중요성

제가 주로 컨설팅하는 웹 애플리케이션에서 고정 위치는 단순한 고정 머리글 또는 개인 정보 관련 팝업 창 그 이상의 의미를 가지고 있습니다. 고정 위치는 일반적으로 메뉴로서, 전체 인터페이스의 골격을 구성합니다.

단순한 제품의 경우 고정 위치는 왼쪽 측면의 패널 메뉴 또는 상단의 고정 내비게이션 메뉴에 사용하며, 두 개 이상 사용하지 않습니다. 그렇지만 페이지 빌더 또는 편집기처럼 복잡하게 구성되어 있는 경우 시선을 분산시키는 실수를 범하기 쉽습니다.

이 경우 중요한 규칙은 화면의 네 측면에 메뉴를 배치하지 않는 것입니다. 만일 그렇게 하면, 작은 화면의 사용자 경험은 더욱 형편없어지고, 숨 쉴 공간 없이 작은 상자 안에 갇힌 느낌이 들 수 있습니다. 네 측면을 모두 활용해야 하는 경우라면 아래쪽에 아주 얇고 간단한 정보가 담긴 막대(경로 정보 또는 상태 정보 배치)를 사용하는 것이 바람직합니다. 오른쪽 패널에는 보통 속성이 들어갑니다. 널리 사용되는 그래픽 편집기는 대부분 이러한 방식으로 되어 있습니다.

팁: 세로로 된 메뉴 영역에서는 상단과 하단에 너무 많은 항목을 배치하지 마십시오. 항목 사이에 충분한 여백을 두어야 하는데, 실제로 이러한 원칙이 잘 지켜지지 않습니다.

– 제인 포트먼, UI 블랙퍼스트(UI Breakfast) 및 Userlist.io 창립자

다양한 활용 사례 고려

다양한 크기와 비율의 화면을 장착한 디바이스가 많이 출시되고 있는 상황에서 고정 위치를 구현할 때에는 단계적 향상을 고려하는 것이 좋습니다.

어도비 XD와 같은 디자인 툴은 고정 위치가 주요 디바이스에 표시되는 방식을 최적화할 수 있는 훌륭한 제품이지만, 더 많은 요인을 고려해야 합니다. 예를 들어 노트북 사용자가 시력이 나빠 화면을 확대하면 화면이 가로로 표시되고 고정 머리글 또는 바닥글이 확장되어 화면의 대부분을 차지하게 됩니다.

위치를 고정시켜 오버레이가 표시될 때 스크롤되지 않도록 하려면 어떤 크기가 적합한지 파악하고, 적합한 크기에서만 활성화되도록 설정해야 합니다. 예를 들어 CSS를 사용하여 세로가 100픽셀인 고정 머리글을 만드는 경우 이를 적용하려면 화면 높이가 최소 400픽셀이 되어야 합니다. 머리글을 고정시키는 CSS를 미디어 쿼리에 코딩할 때 높이가 충분하지 않으면 고정되지 않도록 설정해야 합니다.

또한 키보드 사용자도 고려해야 합니다. 부동 요소(예: 맨 위로 버튼)를 배치하는 경우 키보드 중심의 환경에서 이를 어디에 배치하는 것이 좋을까요? 추측이 아닌 반드시 고려해야 할 사항에 두고 소스 순서에 올바로 배치해야 합니다.

– 앨러스테어 캠벨, 노멘사(Nomensa) 액세서빌러티 디렉터 겸 공동 창립자

사용자 시간 절약

고정 위치라고 하면 웹 사이트 상단에 있는 고정 내비게이션을 떠올립니다. 고정 위치는 뉴스 페이지 또는 대규모 서비스 및 포털과 같은 대량 콘텐츠를 제공하는 페이지의 경우 특히 유용합니다.

이러한 경우 저는 다른 섹션과 하위 페이지로 이동하기 위한 용도로 고정 내비게이션을 자주 사용하는 편입니다. 고정 내비게이션을 이용하면 매번 사이트 맨 위까지 스크롤하지 않고도 사이트를 수월하게 이동할 수 있어 시간이 절약됩니다.

고정 위치의 또 다른 예로는 소셜 미디어 버튼이 포함되어 있는 패널입니다. 모두 같은 곳에 있기 때문에 사용자는 더 이상 이 버튼을 찾기 위해 페이지 아래로 스크롤하지 않아도 되므로 시간을 절약할 수 있습니다.

하지만 고정 위치도 방해 요인이 될 수 있습니다. 따라서 해당 요소의 기능이 무엇이고 같은 곳에 항상 노출시킬 필요가 있는지 자문해야 합니다.

– 아가 나플로차, 어도비 코딩 디자이너 겸 어섬(The Awwwesomes) 공동 창립자

UX에 대한 유용한 정보를 이메일로 받아보려면 어도비의 경험 디자인 뉴스레터를 구독하십시오.

​출처 : 어도비블로그(https://blogs.adobe.com/creativedialogue/ko/design-ko/the-best-way-to-use-fixed-elements/)