[디자인] 비교가 쉬운 테이블(Table UI) 디자인하기

 
다양한 데이터를 다루는 웹 서비스를 설계할 때 자주 사용하는 UI 요소 중 하나가 테이블(table)입니다.

저는 작년까지만 해도 모바일 경험을 주로 다루면서 테이블을 디자인할 일이 거의 없었는데요...그런데 올 초, 지금의 회사로 이직하면서 테이블을 자주 디자인하게 되었어요. 처음엔 엑셀 시트 같은 테이블UI를 다루는 게 낯설었습니다. 어색함 속.. 단순히 데이터를 테이블 안에 나열하는 방식으로만 디자인했던 것 같네요.

그러나 시간이 지나면서 테이블을 효과적으로 활용하는 방법을 점차 찾아가고 있는데요, 이번 글에서는 그중 일부를 정리해 보고자 합니다.
 

---

 
먼저, 테이블(table)이 무엇이며 어떤 목적을 가지고 있는지 살펴보겠습니다.

좌측 상단부터 - 앰플리튜드, 구글애즈의 테이블

 
테이블은 단순히 데이터를 나열하는 것 이상의 역할을 합니다. 데이터를 체계적으로 제공해, 정보를 이해하고 필요한 조치를 취할 수 있게 돕는 중요한 UI 요소입니다.

방대한 데이터를 구조적으로 정리한 데이터 테이블(data table)

 
대개 테이블은 방대한 데이터를 다루는데요. 사용자는 테이블 안에 있는 핵심 정보를 파악하고, 의사결정을 내려야 합니다. 그래서 디자이너는 사용자가 데이터를 쉽게 이해하고 비교할 수 있도록, 그리고 통찰력을 얻어 바로 조치를 취할 수 있도록 노력해야 해요. 정렬, 필터링 같은 기능으로 사용성을 높일 수도 있지만, UI 측면에서의 고민도 중요합니다.

테이블 데이터를 요약하고 쉽게 읽을 수 있도록 하기위해 데이터 시각화를 더하면 테이블의 사용성을 크게 향상할 수 있습니다. 복잡한 수치보다는 명확하고 시각적인 피드백이 사용자에게 더 효과적이기 때문입니다.
 

데이터 시각화를 더하면, 더 쉽게 비교할 수 있다.

 
 

---

 

색상, 아이콘, 그래프 

 

색상

색(Color)은 가장 빠르게 인지할 수 있는 시각적 요소로, 데이터를 스캔할 때 중요한 정보를 바로 인식할 수 있게 도와줍니다. 테이블 UI에서 색은 상태나 데이터의 크기를 빠르게 전달할 수 있는 강력한 시각적 도구가 될 수 있어요.
성공, 경고, 오류와 같은 상태를 색상으로 구분하면 직관적이고 즉각적으로 정보 전달이 가능해요. 빨간색은 오류, 주황색은 위험이나 경고, 녹색은 성공의 상태로 정보를 전달할 수 있습니다. 성과나 중요도가 높은 항목을 색상으로 구분하여 집중시킬 수 있어요.

성공, 경고, 오류 상태를 색상으로 구분

 
색상을 활용해 높은 값과 낮은 값을 비교하여 표현할 수도 있습니다. 수치를 색상 그라데이션으로 표현하는 것인데요, 낮은 성과는 연한 색(파란색), 높은 성과는 진한 색(진한 파란색)으로 구분하여 수치의 크기를 시각적으로 강조할 수 있습니다. 셀 배경 색상을 변경해서 데이터를 강조할 수도 있고, 태그나 수치, 텍스트에 컬러를 표현할 수도 있습니다.

높은 값과 낮은 값을 비교하여 표현

---

 

아이콘

두 번째는 아이콘을 활용해 표현할 수 있어요. 아이콘은 텍스트보다 적은 공간을 차지하면서도 많은 정보를 담을 수 있기에 작은 테이블에서의 정보 전달력이 뛰어납니다. 변동 트렌드, 상태를 전달할 때 효과적으로 아이콘을 사용할 수 있어요.
 
대표적으로 상승과 하락 트렌드를 보여주는 화살표를 통해 전일 대비 변동 트렌드를 보여줄 수 있어요. 색상도 함께 적용하여 초록/파란 화살표는 상승, 빨간색 화살표는 하락을 나타내면 즉각적인 이해를 도울 수 있습니다. (플랫폼에 따라 상승을 레드, 하락을 블루로 표현하는 경우도 있음! - 예를 들어, 주식거래 플랫폼처럼) 수치 데이터를 보지 않고도 변동 방향을 빠르게 이해할 수 있습니다. 시각적 피드백을 즉시 제공하여 데이터를 해석하는 시간을 줄여줍니다.

상승과 하락 트렌드를 보여주는 화살표

 
현재 상태를 한눈에 파악할 수 있도록 아이콘을 사용할 수 있습니다. 예를 들어, 완료된 작업은 체크(✔), 경고가 필요한 데이터는 느낌표(!)로 표시해 줍니다. 복잡한 테이블에서 아이콘은 중요한 상태 정보를 쉽게 전달할 수 있어요. 숫자나 텍스트보다 직관적이어서 테이블을 스캔하는 속도를 높여줍니다. 상태를 표시할 때도 색상과 결합하면 더욱 강력한 시각적 신호가 됩니다.

아이콘과 함께 주목도 높이기

 

---

 

그래프

마지막으로, 그래프로 데이터 비교를 효과적으로 도울 수 있어요. 크기와 변화를 한눈에 볼 수 있도록 스파크라인(작은 선 그래프), 작은 바 차트 등을 테이블 셀 내에 추가하는 것인데요, 매출, 성과, 수익률 등 정량적 데이터를 표시할 때 유용해요.
 

앱에서도 효과적으로 비교하기 위해 그래프를 사용한다 (좌측부터 - 스파크 라인, 작은 바 차트, 파이 차트)

 
이러한 시각적 요소는 복잡한 수치나 텍스트 정보를 간단하고 명료하게 전달하는 데 매우 유용합니다. 또, 숫자만 나열된 테이블보다 데이터의 상대적 크기를 한눈에 파악할 수 있어요. 각 항목 간의 차이를 시각적으로 강조하기 때문에 빠른 비교가 가능하며, 데이터를 직관적으로 이해할 수 있습니다.
 

스파크라인(Sparklines)은 테이블의 각 행에 작은 선 그래프로 사용하여 시간에 따른 변화나 트렌드를 시각적으로 보여줍니다. 예를 들어, 판매량의 일별 변동, 주간 트래픽 변화 등을 간단한 선 그래프로 보여줘서 데이터 트렌드를 한눈에 파악할 수 있습니다. 작은 크기이지만 중요한 데이터를 빠르게 전달하고, 전체적인 경향을 한눈에 확인할 수 있습니다.

스파크라인(Sparklines)으로 데이터 트렌드 보여주기

 
 
작은 바 차트(Mini Bar Chart)는 각 행의 수치 데이터의 상대적인 크기를 막대로 표현하여 빠르게 비교할 수 있게 합니다. 예를 들어, 매출이나 성과를 바 차트로 나타낼 수 있어요. 작은 막대가 데이터의 크기 차이를 더 명확히 보여주기 때문에 사용자가 수치를 읽지 않고도 쉽게 데이터를 비교할 수 있습니다. 

작은 바 차트(Mini Bar Chart)로 매출 크기 비교해서 보여주기

 
바 그래프를 통해 진행률 역시 표시할 수도 있는데요, 각 항목의 수치를 바로 시각적으로 비교할 수 있어, 테이블을 읽는 속도가 월등히 높아집니다.

작은 바 차트(Mini Bar Chart)로 진척률 비교해서 보여주기

 
그 외에도 파이/도넛 차트 등 을 사용하여 각 항목이 전체에서 차지하는 비중을 시각적으로 표현할 수 있어요. 이러한 그래프 활용을 통해 테이블은 단순한 데이터 나열 이상의 의미를 가지게 되어요. 데이터의 복잡성을 줄이고, 테이블을 더욱 시각적이고 사용하기 쉽게 만들어줍니다.

---

 
테이블 안에서 데이터 시각화는 단순한 디자인 선택이 아니라 사용자 경험을 크게 개선할 수 있는 중요한 전략입니다. 색상, 아이콘, 그래프는 이를 위한 단순하지만 강력한 도구예요. 어느 항목에 문제가 있는지, 어떤 부분에 집중해야 하는지, 그리고 하루 동안 데이터가 어떻게 변화했는지를 직관적으로 전달할 수 있어요. 이때 상황에 맞는 올바른 시각화와 일관된 표현은 정보 전달의 핵심입니다.
 

 

최근 디자인 중 깨달은 배움을 바탕으로 간단히 아티클을 작성해 보았습니다. 부족한 글 읽어주셔서 감사합니다. (꾸벅)

---