드롭다운과 스크롤 디자인
정보를 더 볼 수 있게 해주는 UX에 대해
웹과 모바일 환경은 '모니터의 크기'에 제약을 받습니다.
디자이너들은 이 제약을 극복하기 위해 카로셀이나 드롭다운, 스크롤 등 다양한 UI를 설계하고
유저들은 이를 통해 화면의 제약을 극복하며 수많은 정보들을 탐색하게 됩니다.
이번 글에서는 화면의 고정된 면적 안에서 정보를 더 보여주는 장치인 드롭다운과 스크롤의 디자인에 대해 이야기해보겠습니다.
_
드롭다운, 그리고 드롭다운의 화살표
드롭다운에는 선택된 값, 펼침 및 닫힘을 조작해서 정보를 더 확인하거나 닫을 수 있는 화살표 아이콘이 필요합니다.
이 화살표 아이콘은 숨겨져 있는 정보를 보여주는 중요한 역할을 하지요.
이제 우리가 드롭다운을 디자인해야 한다고 생각해봅시다.
주황색 박스 부분이 화살표 아이콘이 들어갈 자리인데요, 우리는 저 부분에 두 가지 모양의 화살표를 넣을 수 있습니다.
1. 드롭다운이 열려있으니 현재 상태를 알려주기 위해 '∨ 화살표'를 넣는 것과
2. 드롭다운을 다시 접을 수 있으니 미래에 할 수 있는 액션을 알려주기 위해 '∧ 화살표'를 넣는 것입니다.
현재 상태를 알려주는 '∨ 화살표(펼쳐져 있음)'와 미래 상태를 알려주는 '∧ 화살표(닫을 수 있음)'는 어떤 화살표가 사용되느냐에 따라 큰 의미 차이를 가집니다.
어떤 화살표가 들어가는 것이 맞을까요?
이를 알아보기 위해 구글링을 해봤지만 많은 서비스들의 드롭다운의 화살표 자리에는 '∨ 화살표'와 '∧ 화살표'가 혼용되고 있었습니다.
표준 따위는 없었다...구글링으로는 답을 알 수 없어서 이번엔 UX에 많은 노력을 기울이는 구글과 네이버, 애플 같은 메이저 서비스들의 드롭다운을 조사해 보았습니다.
대부분의 메이저 서비스들은 '∧ 화살표(닫을 수 있음)'를 주로 사용하고 있다는 것을 알 수 있었습니다.
사용자에게 현재 상태를 알려주는 것보다 '∧ 화살표(닫을 수 있음)'를 통해 드롭다운의 메뉴가 위로 말아 올라갈 수 있다는 메시지를 주는 것이죠.
어포던스로서의 드롭다운 화살표
UX를 잘하는 서비스들에서 드롭다운에 존재하는 화살표는 미래에 일어날 일을 알려주는 역할을 합니다.
이는 화살표 기호를 유심히 살펴보고 그 뜻을 이해해 보면 어쩌면 당연한 일인 것 같습니다.
화살표는 원래 시작점(현재의 위치)과 끝 점(미래의 방향)이 혼합된 기호입니다.
그렇기 때문에 화살표를 보면 현재 내가 어디 있고, 앞으로 어디로 가야 하는지 알 수 있지요.
하지만 요즘 온라인 환경에서는 시작점을 나타내는 꼬리 부분을 생략하고 끝점인 방향성만 남기는 방향으로 화살표 표기가 많이 간소해졌습니다.
이런 시작점의 탈락 현상 속에서 끝점(▲,▼,∧,∨)만 남은 화살표는 주로 드롭다운이 추후 이동하는 방향에 대한 어포던스에 대한 역할을 하게 되는 거지요.
드롭다운에서 사용되는 화살표 아이콘이 현재 위치가 아닌 미래의 액션을 알려줘야 하는 이유는 또 있습니다.
드롭다운이 사용되는 콘텍스트가 다양해지면서, 드롭다운을 통해 다른 콘텐츠로 연결되거나 정보를 더 전달하기 위한 정보성 메시지들을 담는 경우도 많아졌기 때문입니다.
만약 드롭다운의 화살표 자리에 이렇게 미래를 알려주는 어포던스로서의 장치가 아니라 현재 상황을 알려주는 '∨ 화살표(펼쳐져 있음)'만 쓰인다면 유저들은 펼쳐진 정보를 닫기 위해 기존 드롭다운과 같이 화살표를 누르면 될지, 아니면 뭘 눌러야 이 정보를 닫을 수 있는지 궁금해할 것입니다.
어포던스로서의 화살표와 현재 드롭다운이 열려있는 상태 함께 표현하기
위와 비슷한 맥락에서 드롭다운에 존재하는 화살표가 미래에 할 수 있는 액션을 알려줘야 한다는 것에는 또 다른 이유가 있습니다.
만약 화살표가 드롭다운이 펼쳐진 현재 상태(∨ 화살표)만을 알려준다면, 현재 상태와 미래의 상태(∧ 화살표, X 표시 등)를 동시에 표시하기는 어려울 것입니다.
하지만 현재 상태가 아닌 어포던스로서의 화살표(혹은 미래 액션)를 넣고 활성화(ON 된 상태)를 함께 표시해주면 드롭다운이 펼쳐져 있다는 메시지를 미래에 할 수 있는 액션과 함께 표현이 가능합니다.
이렇게 두 가지 표현을 한꺼번에 해주면 메시지를 전달하는데 확장성이 생기고 유저들도 상황을 더 여러 측면에서 이해할 수 있게 됩니다.
요즘의 드롭다운 디자인은?
하지만 요렇게, 저렇게 해도 헷갈리는지 요즘엔 드롭다운은 화살표를 아예 없애버리고 바로 선택 값을 보여주는 것이 트렌드로 자리 잡고 있습니다.
디자인 또한 쉐도우를 강화해 오히려 드롭다운이라기보다 모달에 가까운 느낌으로 설계되고 있습니다.
이렇게 드롭다운에서 화살표를 없애고 모달과 같은 디자인 톤으로 접근하면 유저들은 드롭다운의 닫을 수 있다는 화살표가 없어도 아무 데나 눌러서 끌 수 있다는 것을 유추할 수 있습니다
뿐만 아니라, 화살표를 없애는 것에는 여러 장점이 있습니다.
1. 드롭다운의 선택항목 출력 부분이 고정될 필요가 없다.
기존 드롭다운이 선택된 값을 보여주는 곳과 선택 항목들을 보여주는 곳으로 이루어져 있다면,
선택 항목들을 접을 수 있다는 어포던스는 항상 선택 항목들 위에 위치했기 때문에 선택항목들의 시작점은 항상 선택된 값을 보여주는 곳의 아래 위치해야 했습니다.
하지만 화살표를 없앰으로 인해 선택항목들이 굳이 화살표 아래로 올 필요가 없어지면서,
모달처럼 시작점이 자유로운 드롭다운 컴포넌트를 구성할 수 있게 되었습니다.
2. 드롭다운 항목을 확인하기 위해 스크롤할 필요가 없다.
시작점이 자유로워졌다는 것의 의미는 유저들의 사용성 또한 더 편해졌음을 의미합니다.
예전에는 드롭다운이 드롭다운 선택항목의 아래로 출력되었기 때문에 항목을 확인하기 위해 스크롤을 내려야 하는 일이 생겼다면, 지금은 스크롤을 하지 않아도 유저의 화면 위치 위주로 드롭다운이 출력됩니다.
3. 콘텍스트를 통한 정보 선택이 가능하다.
드롭다운의 목적은 일정 카테고리 안에서 서로 조금씩 차이가 나는 선택지를 고르는 것입니다.
드롭다운의 항목들이 이미 비슷한 정보로 이루어진 덩어리이기 때문에 콘텍스트 안에서 정보를 선택할 수 있게 한다면 유저의 실수를 줄일 수 있고, 어떤 값을 선택해야 하는지 더 쉽게 알 수 있습니다.
화살표를 제거하고 시작점을 자유롭게 한다면, 선택 값이 펼쳐질 때 내가 선택한 항목을 드롭다운 항목의 가운데로 고정한 뒤 드롭다운의 항목들 사이에서 바로 확인할 수 있게 하는 것 또한 가능합니다.
선택 값이 마킹된 드롭다운 _
스크롤, 그리고 스크롤의 화살표
이제 드롭다운 얘기에서 건너가 좀 더 넓은 영역에서의 이야기를 해보겠습니다.
드롭다운처럼 특정 부분을 더 볼 수 있게 하는 것이 아니라 화면 전체를 더 볼 수 있게 하는 스크롤에 대한 이야기입니다.
스크롤의 UX 대해서는 두 메이저 OS(Mac, Window)가 서로 다른 노선을 선택했는데요,
이렇게 스크롤 UX에 차이가 나타난 이유는 두 OS가 디바이스의 환경을 다르게 정의했기 때문입니다.
1. 모바일과 데스크톱의 스크롤 UX를 통일한 Mac
Mac의 경우 모바일 디바이스에서 사용되는 스크롤 UX을 데스크톱에서도 똑같이 지원합니다.
모바일에서는 콘텐츠를 더 보고 싶어서 스크롤을 해야 할 때,
실제로 접지면(디바이스 스크린)에 물리적인 힘을 가해 콘텐츠를 위로 올려야 합니다.
그리고 Mac의 데스크톱에서도 이와 동일하게 스크롤을 할 때는 마우스를 조작하는 손가락(혹은 터치패드)의 방향을 위로 올려야 합니다. 그래야 콘텐츠를 담은 판이 위로 올라가면서 콘텐츠를 더 볼 수 있습니다.
실제로 애플은 아이패드를 갈수록 데스크톱처럼 쓸 수 있게 하는 등, 모바일 디바이스와 데스크톱 사이 경계를 점차 허물고 있습니다.
원래는 아래로 휠을 내려야 콘텐츠를 더 볼 수 있던 데스크톱의 환경을 변경해 휠을 위로 올려야 콘텐츠를 더 볼 수 있게 만든 건 갈수록 복잡해져 가는 제품군 속에서 이들이 정의한 환경이 모바일 디바이스 위주였음을,
더 나아가 디바이스의 UX를 통일하는 작업을 미리 해두었음을 알 수 있습니다.
2. 관념적으로 '아래'에 있음을 그대로 행동에 옮기게 하는 Window
Window의 경우, 아래에 있는 콘텐츠를 보기 위해서는 실제로 손가락(혹은 터치패드)의 방향을 아래로 내려야 합니다.
말 그대로 아래에 있는 콘텐츠를 보기 위해 물리적으로 손가락을 아래로 내려야 하는 거죠.
이는 콘텐츠가 아래 있으니, 아래로 손이 움직이게 하는 것으로 물리적 방향성과 실제 콘텐츠의 방향을 일치시킨 것입니다.
이는 때로는 엄청 직관적인 UX를 형성하기도 합니다. 하지만 모바일과는 다른 UX를 가지고 있지요.
요즘의 스크롤 디자인은?
1. 텍스트로 이루어진 탑 스크롤 버튼
이처럼 '스크롤을 하는 행위'가 서로 다른 OS에서 다르게 표현됨에 따라(Mac에서는 손가락 올림, Window에서는 손가락 내림) scroll 'up' (위로 스크롤) 혹은 scroll 'down'(아래로 스크롤)의 직접적인 방향에 대한 표현은 금지되어야 합니다.
scroll up(위로 스크롤)이라고 적혀있을 때 손가락을 위로 굴려서 스크롤하라는 건지, 콘텐츠가 담긴 화면을 위로 올려서 아래에 있는 내용을 확인하라는 건지 알기 어렵기 때문입니다.
이런 혼란을 방지하기 위해 요즘엔 직접적인 유저의 행동을 지시하는 'scroll', 'up', 'down'등의 단어를 쓰는 걸 지양하고 있습니다.
대신 이에 대한 대안으로 버튼을 누르면 어디로 갈 수 있는지 목적지가 쓰인 텍스트형 버튼들이 자주 쓰입니다.
텍스트로 이뤄진 top버튼2. 화살표, 내비게이션 등을 같이 사용할 것
화살표를 넣어주는 것은 콘텐츠가 추가로 더 존재한다는 시각적인 단서가 되기 때문에 유저들이 더 적극적으로 정보를 소비하게 도와줍니다.
그뿐 아니라 화살표를 통해 정보를 움직이거나 조작할 수 있게 한다면 유저들은 정보를 쉽게 컨트롤할 수 있습니다.
긴 페이지의 스크롤에서의 큰 문제 중 하나는 방향을 잃어버리는 것입니다.
유저가 내가 어디 있는지를 알기 어렵다면 스크롤을 휙휙 돌려 내 위치를 찾게 되거나 이탈하게 됩니다.
이는 디자이너가 의도한 대로 정보를 받아들이지 못하게 만들 뿐 아니라, 불편함과 혼란을 줍니다.
스크롤이 일어나도 고정된 위치에 현재 유저가 어디 있는지를 알려 줄 수 있는 표시를 같이 보여주는 것도 긴페이 지를 효과적으로 스크롤하게 하는 좋은 방법입니다.
3. 재미있는 효과를 쓰는 것
스크롤은 콘텐츠를 순서대로 확인하게 만들기 때문에 그 기능 자체로 시간의 흐름 개념을 내포하고 있습니다.
그렇기에 시간의 흐름을 내포하고 있는 콘텐츠나 스토리 텔링을 해야 하는 콘텐츠가 있다면 스크롤 기능을 이용해 원하는 스토리를 전달할 수 있습니다.
이미지 참고 : https://uxplanet.org/best-practices-for-long-scrolling-256ffbd7aa12
이미지 참고 : https://uxplanet.org/best-practices-for-long-scrolling-256ffbd7aa12재미있는 효과를 이용해 유저들의 기대치를 끌어올려 스크롤을 더 하게 유도할 수도 있습니다.
다채로운 효과를 내포한 긴 스크롤을 통해 유저들은 완전히 몰입할 수 있습니다.
드롭다운과 스크롤은 이를 빼놓고 디자인을 한다는 것은 불가능할 정도로
유저들이 화면의 제약을 깨고 더 많은 정보를 소비하게 하는데 꼭 필요한 장치입니다.
이 둘을 이해하고 디자인하시는데 도움이 되는 글이 되었으면 좋겠습니다.
감사합니다.
