스플릿 뷰를 활용한 비교 탐색 UI
정보를 빠르게 스캔하고, 깊이 있게 확인하는 서비스 만들기
정보들이 나열된 리스트를 스캔하고 관심 있는 한 가지 콘텐츠를 선택해 깊이 있게 소비하는 것은 웹 상에서 흔히 일어나는 행동 패턴입니다.
[정보들을 스캔하고-> 깊이 있게 확인해야 하는 행동]패턴을 설계하면서 스플릿 뷰를 사용한 프로젝트가 있어서 회고 차 기록하게 되었습니다.
스플릿 뷰란 무엇인가?
아이메시지와 슬랙의 스플릿 뷰스플릿 뷰는 오른쪽과 왼쪽으로 분할된 레이아웃을 가진, 우리에겐 꽤 익숙한 화면입니다.
스플릿 뷰라는 이름만으로도 화면이 쪼개진 레이아웃이라는 것을 많은 분들이 유추하셨을 테지만, 스플릿 뷰는 단순히 화면이 분할된 레이아웃이 아닙니다.
스플릿 뷰는 왼쪽에 비교나 탐색이 필요한 상위 콘텐츠가 있는 프라이머리 패널이 있고,
오른쪽에는 왼쪽의 콘텐츠를 선택한 결과값이 출력되는 세컨더리 패널을 가지고 있습니다.
단순히 화면만 분할된 레이아웃과 다르게 프라이머리 패널에 세컨더리 패널의 정보가 종속되어 있으며 프라이머리 패널에서는 비교(스캔)가, 세컨더리 패널에서는 깊이 있는 정보의 탐색(확인)이 요구되는 특징을 가진 레이아웃입니다.
제가 몸담고 있는 위시켓에서는 클라이언트가 작업할 파트너 2명을 선택해서 미팅을 신청하는 기능이 있기 때문에 클라이언트가 지원자들의 비교(스캔)와 탐색(확인)을 좀 더 편하게 할 수 있도록 스플릿 뷰를 도입했습니다.
다른 레이아웃도 많은데 왜 스플릿 뷰를 사용했나?
비교(스캔)에서 탐색(확인)의 흐름을 가진 레이아웃은 스플릿 뷰 외에도 많기 때문에, 프로젝트 초기에 스플릿 뷰 외에도 다른 뷰들을 후보에 올려놓고 어떤 걸 선택할지 비교하는 과정을 가졌습니다.
이 과정에서 좋은 선택지가 많았기 때문에 몇 가지 자체적인 기준을 세워, 기준에 부합하는 레이아웃을 선택할 수 있도록 했습니다.
레이아웃의 선택 기준
1. 유저 편의성을 위해 비교(스캔)하는 액션과 탐색(확인)하는 액션 간, 전환 비용이 제일 조금 드는 것.
2. 유저 편의성을 위해 탐색(확인)하는 액션과 비교(스캔)하는 액션 간, 전환 비용이 제일 조금 드는 것.
3. 정보의 명확한 인지를 위해 비교(스캔)하는 영역과 탐색(확인)하는 영역이 명확하게 분리된 것.
위에서 세운 세 가지 기준에 따라 여러 가지 비교 탐색 레이아웃을 뜯어보고, 우리에게 맞는 레이아웃을 골라봤습니다.
후보 1. 인라인 폼
인라인 폼의 경우 항목들의 빠른 비교가 가능하지만 탐색으로 갔을 때, 선택한 영역이 늘어나면서 비교의 영역과 콘텐츠를 확인하는 탐색 영역이 섞이게 됩니다.
이는 간단한 내용들을 비교할 때는 좋겠지만, 현재 디자인하는 주제의 콘텐츠 영역이 a4용지 한 장 정도의 길이가 넘어가기 때문에 콘텐츠를 확인하는 영역이 늘어나면 후보들의 비교가 어려워져 반려했습니다.
후보 2. 슬라이드 아웃 폼
슬라이드 아웃 폼의 경우 스캔 → 확인 → 스캔 → 확인의 구조라 전환 비용이 좀 높습니다. 또한 스캔을 하며 동시에 내용을 확인할 수 없는 한계도 가지고 있지요.
해당 폼은 비교가 필요한 내용에 사용되는 것보다 팝업으로 해결하기엔 조금 긴 내용을 슬라이드 아웃 폼에 담는 용도로 사용하는 것이 좋습니다. (에어비앤비는 도움말을 슬라이드 아웃 폼으로 제공합니다.)
만약 스플릿 뷰의 프라이머리 패널에 들어갈 내용이 많아서 프라이머리 패널이 콘텐츠를 다 소화 못할 경우에는 이 폼이 스플릿 폼의 훌륭한 대체재가 될 수 있습니다.
후보 3번이었던 스플릿 뷰는 레이아웃의 선택 기준 3개에 모두 잘 부합해 스플릿 뷰를 선택하게 되었습니다.
이제 스플릿 뷰를 디자인해봅시다.
스플릿 뷰를 디자인할 때는 화면 영역의 비율을 정하는 것이 가장 우선됩니다.
애플에서 권장하는 스플릿 뷰의 비율은 프라이머리 패널에 3분의 1을 쓰고, 나머지 3분의 2는 세컨더리 패널에 사용하는 것입니다.
그렇지만 꼭 그 비율로 디자인할 필요는 없습니다. 여기서 중요한 것은 콘텐츠를 기반으로 두 패널을 적절히 분할하는 것과, 정보를 깊이 있게 소화해야 하는 세컨더리 패널이 프라이머리 패널보다 넓어야 한다는 점입니다.
그 다음으로는 스플릿 뷰는 프라이 패널의 결괏값이 세컨더리 패널에서 보이는 특징을 가지고 있기 때문에 프라이머리 패널을 디자인할 때와 세컨더리 패널을 디자인할 때의 접근법을 다르게 가져가야 합니다.
이 두 가지 사항만 알면 스플릿 뷰를 굉장히 쉽게 디자인할 수 있습니다.
스플릿 뷰의 프라이머리 패널 디자인
스플릿 뷰의 프라이머리 패널을 디자인할 때는, 비교와 탐색이 쉬워야 합니다. 쓱 훑어보고 좀 더 깊게 탐색할 수 있는 콘텐츠를 고를 수 있어야 하는데요, 훑어보기 쉽게 디자인이 되어야 하기 때문에 몇 가지 신경 써야 할 부분들이 있습니다.
1. 세로 폭의 고정
스플릿 뷰의 프라이머리 패널들은 탐색의 리듬을 깨지 않게 하기 위해 한 항목 당 같은 높이값과 내용을 넣어주는 것이 좋습니다.
빈 값으로 인해 출력이 어려운 항목이 있다면 과감히 포기하거나 빈 값을 넣어주어 균형을 맞춰주어야 모든 항목에 균등하게 시선이 가서 편향을 일으키지 않는 탐색 경험을 만들 수 있습니다.
만약 콘텐츠에 따라 영역이 들쭉날쭉 디자인된다면 특정 콘텐츠에 눈이 더 가거나 덜 가는 현상을 일으켜 균일한 탐색의 리듬을 잃게 됩니다.
2. 구분자가 되는 기능의 명확한 분리
스플릿 뷰에서 기능이나 정보의 성격이 다른 항목들은 서로 다른 비주얼 요소를 사용하면 좋습니다.
링크는 컬러를 줘서 다른 기능들과 차별화를 시키고, 부가적인 정보는 핵심 정보보다 연한 글자 컬러를 사용하는 등 서로 다른 비주얼 요소를 사용해 구분이 되게 디자인해야 유저가 정보를 스캔할 때 보고 싶은 요소만 빠르게 솎아낼 수 있습니다.
특히나 다른 종류의 정보들이 여러 개 섞여있을 때 아이콘 같은 그래픽 요소가 사용되면 스캔만으로도 정보를 구분할 수 있어서 좋습니다.
3. 스크롤 영역의 확보
요약본을 스캔해서 더 깊이 확인할 정보를 선택하는 것이 프라이 패널의 목적이기 때문에 프라이머리 패널에는 정보의 요약본이 쌓여있게 됩니다.
정보 요약본들의 원활한 탐색을 위해 스크롤 영역이 확보되어야 하고, 되도록이면 스크롤 영역이 정보영역을 침범하지 않도록 해야 정보가 잘 보이는 깔끔한 뷰를 만들 수 있습니다.
4. 무한 스크롤이 아니라면 페이지 네이션을
메시지와 같이 라이트 한 정보가 프라이머리 패널에 쌓였을 경우, 스캔할 항목들의 더보기는 무한 스크롤을 사용할 수 있습니다.
하지만 라이트 한 정보를 설계하는 게 아니라, 지원자 중에 같이 일할 몇 명을 선택하는 것처럼 깊이 있는 정보들을 솎아내야 하는 거라면 해당 사람 혹은 정보가 어디에 위치해있었는지 기억할 수 있도록 페이지 네이션을 넣어줍니다.
페이지 네이션을 넣어주면 관심 있는 정보가 몇 페이지에 위치했는지 알 수 있어 무한 스크롤보다 더 효과적인 탐색 경험을 제공할 수 있습니다.
5. 선택되었다는 강한 인지
세컨더리 패널의 값이 프라이머리 패널에 따라 달라지기 때문에 프라이머리 패널에서는 선택되었다는 정보인지가 명확할수록 좋습니다. 강한 인지를 통해 유저들은 두 패널 간의 사이를 인지할 수 있습니다.
6. 필터와 검색 등 부가기능도 사용 가능
다른 비교 탐색 뷰처럼 스플릿 뷰에서도 동일하게 프라이머리 패널의 상단에 검색과 필터, 정렬 기능을 넣어 더 효과적인 스캔 기능을 제공할 수 있습니다.
앞서 말했듯이 스플릿 뷰는 프라이머리 패널에서 간략히 보기를 제공해 스캔하게 하고, 깊이 있는 탐색이 필요한 정보들은 세컨더리 패널에서 보여주기 때문에 스캔과 깊이 있는 탐색 두 액션 간의 비중이 거의 동일합니다.
만약 스캔이 더 강조되는 콘텐츠를 담기 위한 화면을 기획하고 계시다면(필터 기능이 더 중요하다면) 스플릿 뷰 대신 인라인 폼이나 테이블 폼을 사용하시길 권장합니다.
7. 기타 액션을 넣는 것도 가능
프라이머리 패널을 탐색하다가 프라이머리 패널에서 확인하고 싶지 않은 정보를 바로 지우거나, 몇몇 정보를 비교해서 보기가 가능하도록 프라이머리 패널에 몇몇 액션을 넣어주면 더 풍부한 유저 경험을 유도하는 프라이머리 패널을 만들 수 있습니다.
또한 메시지 앱처럼 채팅 기능을 넣어 안 읽은 메시지 표시나, 세컨더리 패널의 변경사항이 있을 경우 역으로 프라이머리 패널에 표시를 할 수 있습니다.
저희 위시켓에서는 클라이언트가 지원자들과 대화하는 채팅 기능을 추가할 가능성을 열어둔 상태로 기획을 진행했기 때문에 세컨더리 패널의 변경사항을 프라이머리 패널에서 반영할 수 있다는 점이 큰 플러스 요소가 되었습니다.
스플릿 뷰의 세컨더리 패널 디자인
스플릿 뷰의 세컨더리 패널에서는 깊이 있는 정보의 소비가 가능해야 합니다.
따라서 콘텐츠에만 집중할 수 있도록 UI가 구성되는 것이 바람직합니다.
1. 머리글 영역의 사용
시선의 흐름이 정보 선택 → 선택된 정보가 맞는지 확인 → 선택된 정보의 소비 흐름을 이어갈 수 있도록 본문 상단에서는 머리글 혹은 구분자를 한번 더 확인시켜주는 것이 좋습니다.
머리글에서는 프라이머리 패널에 있는 중요한 정보들을 써머리 해서 본문의 내용을 요약해서 보여주는 것도 가능합니다.
2. 머리글 영역을 펑션으로 응용
머리글 영역은 이미 확보된 공간이므로 유저들에게 필요한 액션들을 추가해 다양한 기능들을 사용하게 할 수 있습니다.
특정 정보를 마킹할 수도 있고, 조금 더 깊이 있는 정보의 소비를 위해 다른 곳으로 가는 링크를 제공할 수도 있습니다. 또한 이 페이지의 넥스트 스텝으로 가는 액션 버튼을 이곳에 추가할 수 있습니다.
3. 본문 영역의 디자인
본문 영역은 최대한 유저 콘텍스트가 잘 드러나게 디자인되게 합니다.
글을 쓰거나 파일 추가 등 추가적인 액션이 필요할 경우 기능을 세컨더리 패널의 하단에 추가해 콘텐츠를 모두 확인한 뒤, 글의 하단에서 액션을 하게 하여 자연스럽게 정보를 소비할 수 있는 동선을 설계합니다.
패널 밖 영역 디자인
스플릿 뷰를 응용하면 프라이머리 패널과 세컨더리 패널 외에 다른 영역도 활용 할 수 있습니다.
1. 스플릿 뷰의 우측 측면 사용하기
스플릿 뷰의 우측 측면에 플로팅 UI를 사용하면 플랫폼 이용에 도움이 되는 가이드나 도움말을 띄울 수 있고 버튼이나 추가적인 기능을 배치하는 것도 가능합니다.
대다수의 유저가 웹 사이트를 왼쪽에서 오른쪽으로 훑어보기 때문에, 중요도가 약간 떨어지는 우측 영역이 가지는 특성을 잘 활용해 중요하지는 않지만 도움이 되는 정보들을 배치하면 유저들에게 도움이 될 수 있습니다.
2. 스플릿 뷰의 상단을 활용하기
스플릿 뷰는 레고처럼 위아래 다른 UI 컴포넌트를 붙일 수 있습니다.
이번 개편에서는 스플릿 뷰의 상단에 탭을 넣어서 같은 프로세스의 서로 다른 액션들을 탭으로 구분해주었고, 다른 탭을 클릭하면 스플릿 뷰 대신 리스트 뷰를 사용해서 각 탭에 들어가는 정보들에 최적화된 레이아웃을 적용하였습니다.
스플릿 뷰 상단에 탭을 넣게 되면 이미 확보된 공간에 다른 여러 레이아웃을 손쉽게 붙일 수 있어 복잡한 정보를 담아야 할 때, 효율적인 레이아웃 구성을 할 수 있습니다.
3. 빈 페이지 디자인
추가적으로, 빈 페이지를 활용해 서비스에서 밀고 있는 기능이나 해당 플로우에서 유저 액션을 풍성하게 만들어주는 기능을 넣어주면 더 많은 유저 참여를 이끌어 낼 수 있습니다.
스플릿 뷰는 웹 사이트에서 흔하진 않지만 잘 쓰면 유용하고 응용할 여지가 많은 레이아웃입니다.
또한 모바일로도 구현하기 좋아 활용도가 높습니다. (아이메시지는 맥에서는 스플릿 뷰를 사용하고, 모바일에서는 리스트 뷰를 사용합니다. 웹과 모바일에서 레이아웃의 전환이 이미 공식처럼 잡혀있기 때문에 스플릿 뷰로 구현된 웹을 모바일로 옮기는게 어렵지 않습니다.)
[정보들을 스캔하고-> 깊이 있게 확인해야 하는 행동]을 이끌어 내야 하는 UX설계가 필요하신 분들에게 많은 도움이 되었으면 좋겠습니다.
관련된 화면은 List of applicants : Functional Improvements에서도 확인하실 수 있습니다.
읽어주셔서 감사합니다.
