데이터 테이블을 앱에서 어떻게 디자인해야하지? Material design Data tables

 

 

 

 

 

웹 -> 앱으로 넘어갈 때 데이터 테이블의 디자인을 고민한 적이 있다. UI디자이너라면 앱 디자인 작업시 한번 쯤 겪는 고민이지 않을까 싶다.이번에 NFT플랫폼 외주를 진행하면서 모바일 화면에 들어가지 못하는 데이터를 한 눈에 보기 쉽게 간결하게 보여 줄 수 있을까 하여 데이터 테이블을 대체 할 수 있는 다양한 UI를 찾아보았다.

 

 

 

 

 

 

 

 

 

상단 왼쪽부터 어니스트펀드, 오늘의 투자, 다방

 

 

 

 

 

부동산/금융/암호화폐 등 다양한 금융관련 플랫폼에서는 데이터 테이블을 자주쓰는데 어떻게 하면 최대한 간결하고 직관적이게 보일 수 있는지 다양한 방법을 생각하고 디자인하는것 같다. 나는 UI 작업시 주로 구글의 material design을 차용하여 작업을 하기 때문에 오늘은 내가 주로 실무에서 사용하는 유형을 소개하려한다.

 

 

 

 

 

 

 

 

 

https://material.io/

Material Design

google이 2014년에 처음 발표한 Material design은 2018년에 업데이트를 한번 더 거쳤고 지금까지 구글의 모든 웹/앱 서비스에서 사용되고 있는 디자인 시스템이다.

 

 

구글에서 서비스하고있는 어플들인 구글, 유튜브, 구글캘린더, 구글태스크 등등을 보면 전부 디자인이 비슷~한 느낌이 드는데 Material design을 사용하고 있기 때문

 

 

 

 

 

 

 

 

 

 

 

그 중에서 디자인 컴포넌트 중 하나인 데이터 테이블을 오늘 다뤄볼 예정인데, 데이터 테이블에는 3가지 원칙과 4가지 요소가 들어간다.

3가지 원칙중 첫번째인 Organized는 모든 데이터가 순서대로 정리되어 있어야하는 조직화를 말하며 두번째 interactive는 사용자가 데이터와 원활한 인터랙션이 되어야하고 Intuitive는 사용하기 쉽게 논리적인 구조로 직관적으로 볼 수 있어야 한다는 3가지 원칙으로 정의하였다.

 

 

 

 

 

출처 Material design

 

 

 

 

 

 

그리고 데이터 테이블에 들어가는 4가지 요소는 아래가 있다. 하지만 디자인 작업시 아래 4가지 요소는 꼭 지킬필요(?)는 없는것 같다.

 

• 체크박스
• 정렬
• 알림 아이콘
• 페이지 쪽수

 

 

 

 

출처 Material design

 

 

 

 

 

 

 

 

두줄 리스트

왼쪽은 두줄리스트, 오른쪽은 여러줄 리스트 출처 Material design

 

모바일/앱에서는 화면이 작기때문에 같은 내용끼리 묶어 두줄로 한번에 보여준다. 예시로 가져온 머티리얼 디자인의 모바일 웹 화면에서는 테이블을 두줄로 보여주고있다. 하지만 4줄 이상 넘어가는 데이터 테이블은 직관적인 원칙에 조금 벗어난것 같은 느낌.. 두줄리스트 디자인의 경우 데이터 테이블 디자인을 유지하면서 간결하게 줄이는 간단한 방법이며 2행으로 나누는것 뿐만 아니라 2열로도 나눌 수 있기 때문에 잘 이용한다면 가장 좋은 방법

 

 

 

 

 

 

카드

 

 

 

 

출처 Material design 

 

 

 

그리고 나열 방식의 카드형 디자인이 있다, material design 카드에도 3가지 원칙이 존재하는데 카드는 단일 단위로 식별 해야하고 단독으로 사용 할 수 있으며 다른 카드와 합치거나 나눌수 없는 원칙으로 디자인을 해야한다.

 

 

 

 

첫번째(코인원) 두번째(다방) 세번째(스카이스캐너)

 

 

 

현재 활발히 서비스중인 사례를 보면 코인원, 다방, 스카이스캐너 등 다양한 분야에서 카드형 디자인을 활용하는것을 볼 수 있다. 이미지(사진 또는 그래프)를 넣거나 카드안에서 자유로운 배치로 사용자가 한눈에 직관적으로 알 수 있도록 하였다. 카드를 각각 다르게 디자인한다면 사용자가 헷갈릴 수 있으니 모든 카드들은 한 페이지안에서 다 같은 구조를 가져야한다. 하지만 부작용으로 카드안에 데이터들이 너무 많게되면 오히려 더 복잡해질 수 있기 때문에 데이터가 얼마나 담길것인가를 예상하고 사용해야한다.

 

 

 

 

 

 

 

퀵뷰

 

 

backdrop 컴포넌트 출처 Material design

Navigation transition 출처 Material design

Navigation transition 출처 Material design

 

 

 

backdrop은 상위 계층에서 새로운 페이지가 나타나 상세한 정보를 보여주는 컴포넌트이며 데이터 테이블에서 상세 데이터를 보여주는 것말고도 다양한 UI로 활용 가능하기 때문에 선택할것이 많은 옵션 페이지 등 사용자가 보고있는 페이지를 떠나지 않는 선에서 잠깐 등장해 상세한 정보를 보여줄 때 주로 사용한다.

 

지칭하는 용어가 딱히 없어 퀵뷰라고 정의하였는데 백드롭이라고 해야할지 전환 페이지라고 해야할지 몰라 일단 퀵뷰라고 정의해둠

 

 

 

 

 

첫번째(유튜브 haha ha) 두번째(구글 task) 세번째(지그재그)

 

 

유튜브 쇼츠에서 댓글을 볼때 밑에서 위로 올라오는 댓글, 구글 태스크와 지그재그에서도 사용자가 위치한 페이지내에서 자세한 정보를 보여줄수 있도록 backdrop 컴포넌트를 사용한다. 댓글, 필터 등 다양한 곳에서 사용이 가능하다.

 

 

 

 

 

 

 

 

아코디언

 

 

출처 materializecss

 

 

 

Collapsible UI라고 불리기도 하는 아코디언 UI은 악기 아코디언과 닮았다고 하여 불리는것 같다. 리스트를 클릭하면 확장되어 상세한 내용을 볼 수 있으며 다시 클릭하면 축소되어 내가 보고싶은 상세한 정보를 볼 수 있는 UI다. 

 

 

 

첫번째(코인원) 두번째(카카오지하철) 세번째(카카오버스)

 

 

 

 

 

 

코인원의 경우 자주 묻는 질문을, 카카오 버스와 카카오 지하철에서는 공지사항으로 간단한 정보들을 보여주고 있는데, 페이지 전환이 필요한 많은 데이터 보다는 간단하게 짧게 보여 줄 수 있는 데이터들을 페이지 전환 없이 보여주고 싶을 때 주로 사용한다. 주요 데이터들이 많지 않고 간단할 때 사용하면 좋을것 같다.

 

 

 

 

 

 

이렇게 해서 총 4가지의 대표적인 유형을 살펴보았다.

 

 

 

 

 

두줄 리스트 UI

카드 UI

퀵뷰 UI

아코디언 UI

 

 

 

 

 

 

UI를 적용 할 땐 실제로 어떠한 데이터가 들어가고, 데이터의 양이 많은지 적은지를 계산해서 적절한 UI를 골라 사용하는것이 가장 베스트인것 같다. 하지만 좀 더 다양한 UI를 사용한다면 툴팁, 다이얼로그(팝업)를 추가하여 디자인하는 방법도 있다.

 

 

왼쪽(다이얼 로그) 오른쪽(툴팁) 출처 Material design

 

 

 

팝업인 다이얼로그는 뭔가에 대한 경고창을 띄우거나 사용자에게 어떤것을 선택하게 만드는 UI이기 때문에 데이터 테이블의 상세한 정보를 보고싶은 사용자의 경험을 생각한다면 알맞지 않은 UI일수도 있다.

 

 

툴팁은 웹에서는 마우스를 가져다대면 나오는 도움말이니 모바일에서는 물음표 아이콘을 선택해서 툴팁 UI를 구현할 수 있지만.. 정말 간단한 한줄짜리의 정보에 알맞은 UI이기 때문에 데이터 테이블에 나타난 용어가 궁금한 경우 사용 할 수 있지만 상세한 정보를 나타내기엔 무리인듯 하다.

 

 

 

 

 

 

 

 

 

 

이 외에도 데이터 테이블을 확실하게 처리하는 방법인 데이터 시각화도 있지만 데이터 시각화는 인포그래피부터 시작해서 간단하게 다룰 주제가 아니라 판단되어 다음에 각종 연구 논문들과 함께 포스팅할 예정..