UI 디자인 : 데이터 테이블 설계하기 (번역본)
UI 디자이너를 위한 데이터 테이블 설계방법
이 게시물은 Medium, UX Collective 채널의 'Design Better data tables'라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있으며, 피드백을 주시면 최대한반영하도록 하겠습니다.
https://uxdesign.cc/design-better-data-tables-4ecc99d23356
더 나은 데이터 테이블 설계
잘 만들어진 데이터 테이블 UI, 그 구성요소에 대해 알아보자
데이터는 시각화되고 데이터를 응용할 수 있을때 비로소 의미가 있습니다. 앞으로의 미래 산업은 - 고급 데이터 수집과 더 나은 사용환경, 그리고 데이터 테이블이 주도한다해도 과언이 아니죠.
좋은 데이터 규격은 정보를 확인하고, 분석 및 비교, 필터링, 분류하여 보여주고, 이를 통해 더 나은 통찰력을 선사해줍니다. 또한 이 통찰력을 기반으로 데이터를 활용할 수 있게 도와주죠. 이 문서에서는 잘 만들어진 데이터 테이블을 설계하기 위해 설계 구조, 상호작용 패턴 및 기법의 목록을 이야기하려합니다.
고정된 헤더 (Fixed Header)
스크롤시에는, 정렬기준이 되는 상단 헤더를 고정하는것이 좋습니다. 사용자가 스스로 어떤 데이터 테이블을 보고있는지 헷갈릴 일이 없어지거든요.
가로축 스크롤 (Horizontal Scroll)
많은 양의 데이터를 표시할 때는 좌우 스크롤이 필요한 경우가 많습니다. 이런 경우에는 세로 기준으로 좌측 열에 정렬기준을 배치하고, 움직이지 않게 고정해놓는 것이 좋습니다.
크기변환이 가능한 세로 너비 (Resizable columns)
대부분의 경우, 데이터 테이블은 고정된 너비의 칸 안에 담겨있습니다. 이런 경우, 세로 너비를 조정할 수 있다면 사용자는 내용이 길어 잘려있는 데이터들을 확인하기 매우 쉬워질겁니다.
행 스타일
얼룩말 무늬 구분선 / 선을 통한 요소 구분 / 간격을 통한 요소구분
행 스타일은 여러 데이터를 구분하여 인식하는데 매우 큰 도움을 줍니다. 작은 UI 컴포넌트에서는 구분자가 없더라도, 간격을 적당히 벌려놓으면 인식에 크게 문제가 없습니다. 하지만 대량의 데이터를 동시에 바라볼 때에는 상황이 달라지죠. 구분선이 없는 대량의 데이터는 시각적으로 헷갈리거나. 스스로 어떤 위치를 보고있었는지를 놓쳐버리기 쉽습니다. 그래서 사용되는 것이 두가지 구분방식 ( 얼룩말 무늬 구분선 / 선을 통한 요소 구분 ) 입니다.
다만 얼룩말무늬의 경우, 줄이 현저히 적은 (예:2줄짜리 데이터) 경우. 색상이 들어가거나, 들어가지않은 쪽의 데이터를 '강조된'것으로 착각하여, 중요도에 대해 오해를 할 가능성도 있습니다.
시각적 밀집도 (Display Density)
개별 데이터들의 높이값이 작을수록, 더많은 데이터를 한번에 보여줄 수 있습니다. 그러나 충분한 간격을 확보하지 못한 경우, 가독성이나 구분에 많은 영향을 끼칩니다. 사람에게는 글씨나 시각물들을 인식할 수 있는 한계치가 있기 때문에, 이 부분을 배려하여 - 시각적 밀도를 조절해야합니다. 대부분의 데이터 테이블 UI 요소들이 시각적 밀도를 조절할 수 있는 컨트롤러를 제공하는건 이런 이유 때문이기도 합니다.
시각적 그래프 통계 (Visual Table Summary)
시각적 그래프 통계는 데이터를 시각화하여 - 데이터 테이블에 대한 직관적인 이해를 도와줍니다.
데이터 최대 표기값 (Pagination)
데이터의 양이 너무 많은 경우. 데이터 최대표기값을 사용자가 지정할 수 있도록 하면 더 좋습니다. 무한하게 스크롤이 늘어나서 사용자에게 혼란을 주거나, 스크롤시 발생하는 로딩시간문제는 생각보다 중요한 문제입니다. 이런 경우 최대 데이터표기값을 사용자가 지정하게 한 이후, 페이지별로 원하는 갯수의 데이터를 볼 수 있게 해두는 것이 좋습니다.
마우스 호버시 일어나는 호버 액션 (Hover Actions)
모든 데이터를 항상 보여주기보다, 마우스 호버시 추가기능을 표시해주면 더 간결한 구조를 만들 수 있습니다. 그러나 호버 액션의 경우 사용자가 해당 기능을 사용하기위해 항상 추가조작이 필요해집니다. 그렇기 때문에 중요한 기능의 경우 오히려 사용자에게 불편한 구조가 될수도 있다는걸 기억하세요.
사용자가 마우스를 이동할 때 추가 작업을 표시하면 시각적 혼잡을 줄일 수 있습니다. 그러나 사용자가 작업 표시를 노출하기 위해 테이블과 상호 작용해야 하므로 검색 가능성 문제가 발생할 수 있습니다.
인라인 에디팅 (Inline Editing)
인라인 편집을 사용하면 세부 정보 보기로 이동하지 않고도 데이터를 변경할 수 있습니다.
확장 가능한 행 (Expandable Rows)
확장 가능한 행 (펼쳐지는 데이터테이블)을 사용하면 복잡한 맥락의 정보도 손쉽게 확인할 수 있습니다.
퀵뷰 (Quick View)
확장 가능한 행(펼쳐지는 데이터 테이블)은 테이블 자체를 확장해 데이터를 보여주는 경우였습니다. 그에 반해 퀵뷰의 경우 추가적인 화면이 등장해 해당 데이터의 세부 내용을 보여주는 방식입니다. 기존화면을 찌그러뜨리면서 등장하거나, 아예 개별 팝업으로 등장하기도 합니다.
모달 (팝업)
모달 (팝업)창은 기존 페이지 내에 머물면서 상세한 내용을 바로 확인할 수 있다는 장점이 있습니다.
다중 모달 (팝업)
다중모달 팝업은 사용자가 사용하기에 따라 매우 편리한 기능이 될 수 있습니다. 한가지 데이터의 상세내용을 확인하는것 외에도, 여러 항목의 상세값을 동시에 비교하는 등의 활용이 가능합니다. 하지만 동시에 시각적 복잡도를 많이 올릴 수 있다는 점은 꼭 기억해두세요!
행 목록에서 상세정보로
데이터에 링크값을 주고, 세부 페이지로 이동할 수 있게 하는 경우. 복잡한 리스트에서 벗어나 한가지 내용에 집중할 수 있는 상세보기 화면을 사용할수 있습니다. 이 경우 화면이 아예 이동하는 구조일 수도 있고, 위의 시안처럼 전체 팝업을 사용할 수도 있으나, 상황에 따라서는 전체팝업도 좋은 선택이라고 봅니다.
정렬기준 변경이 가능한 기준점들 (Sortable Columns)
하나의 정렬기준만으로 모든 사용자를 만족시키기는 매우 어렵습니다. 그렇기 때문에 오름차순과 내림차순. ABC 순서와 그 역순. 큰 숫자와 작은 숫자별 기준등 , 다양한 정렬기준을 조작할 수 있도록 만드는 편이 좋습니다.
기본적인 필터링 (Basic Filtering)
날짜별 검색이나, 키워드 검색 등, 기본적인 필터링 조건을 넣으면 사용자의 사용성이 더 향상될 수 있습니다.
필터 기준점들 (열)
필터 기준이 복잡해지고, 여러 필터를 동시에 제공해야하는 경우가 생깁니다. 이런 경우 필터 기준점들을 다시 테이블 형태로 여러개를 쌓아놓는 형태로 제공할 수도 있습니다.
(위의 시안의 경우 필터 카테고리별 구분이 명확치 않아 오히려 알아보기 힘든 구조가 되어있네요. 이런 경우 차라리 chip이나 태그 형태로 여러개를 좌우로 묶어 나열하는 것도 한가지 방법이 될겁니다.)
검색 가능한 기준점 (열) 들
정렬기준점 자체에 검색기능을 넣을수도 있습니다. 위의 시안을 통해 보면 검색기준 역시 한가지가 아니라 다양한 검색값을 제공하는걸 확인할 수 있네요. (알파벳 기반 검색, 날짜별 검색, 숫자별 검색 등 - 검색 기준점이 추가되면 원하는 결과값을 바로바로 확인할 수 있다는 장점도 있겠지만, 사용자에게 많은 부분을 맡기게되는 부분이라, 호불호가 갈릴 수 있는 구조같습니다.)
기준점 (열) 추가하기
때로는 필수적인 제공정보 외에 추가적인 데이터 기준이 필요해지기도합니다. 이런 경우 사용자가 직접 데이터의 정렬기준점을 직접 추가하게할수도 있습니다. 다만 이런 경우 사용자에게 너무 많은 선택지를 주기보다, 일정한 선택지 내에서 제한된 선택을 하게 만드는 것이 좋겠죠.
커스텀 (개인, 개별화) 가능한 기준점들
사용자 지정 가능한 열 기능을 사용하면 보려는 열을 선택하고 그에 따라 정렬할 수 있습니다. 이 기능에는 나중에 사용하기 위해 사전 설정을 저장하는 기능이 포함될 수 있습니다.
데이터 테이블은 왜 중요할까?
데이터가 미래 산업을 좌우한다는 말이 있습니다. 실제로 에너지, 미디어, 제조, 물류, 의료, 소매, 금융 및 정부까지도 디지털 변혁을 통해 수많은 내용들을 디지털 데이터화 하고있죠. 그러나 데이터를 시각화하고 그 데이터를 응용할 수 있는 힘이 없다면, 수많은 데이터가 무슨 소용이 있을까요?
실제로 데이터에 의한 변화는 기업들에게도 여러 영향을 미치고있습니다. 앞으로 살아남는 기업들은 우수한 데이터 누적, 응용 뿐만 아니라 뛰어난 사용환경을 함께 제공하는 기업들일겁니다.
훌륭한 인터페이스 디자인 설계에는 항상 사용자가 중점이 됩니다. 사용자가 어떤 목표를 갖고있는지. 그리고 어떤 행동패턴을 보이는지에 맞춰져있죠. 좋은 인터페이스 디자인은 사용자가 더 나은 상호작용과 결과물을 낼 수 있도록, 사용자의 인식과 결정에 큰 영향을 끼칩니다. 심지어 누군가의 무의식적 레벨에서 더 나은 결과를 만들게 도와주기도하죠. 그런 원대한 결과를 위해 맨 처음 시작해야할 것이. 바로 데이터테이블 설계입니다.
해당 글의 원작자는 Flexport라는 회사의 디자인 디렉터입니다. 자기회사 소개를 하고 글을 끝마치네요.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
