데이터 표 디자인, 숫자가 많은 표를 읽기 쉽게 정리하는 법

숫자가 많은 표는 숫자를 오른쪽으로 맞추고, 단위를 머리글에 한 번만 적고, 줄 구분선을 최소로 줄이면 훨씬 읽기 쉬워집니다. 표의 목적은 값을 비교하게 하는 것이므로, 같은 열의 숫자 자릿수가 위아래로 맞아떨어지는 것이 가장 중요합니다. 장식을 더하기보다 덜어 낼수록 정보가 또렷해지는 것이 표 디자인의 특징입니다.

데이터 표는 여러 항목의 값을 행과 열로 정리해 한눈에 비교할 수 있게 만든 정보 구조입니다. 대시보드, 보고서, 요금 비교처럼 숫자를 다루는 화면 대부분이 표를 씁니다.

숫자는 어떻게 정렬해야 하나요?

숫자는 오른쪽으로 맞추는 것이 기본입니다. 오른쪽으로 맞추면 일의 자리, 십의 자리가 위아래로 줄을 맞춰 크기를 바로 비교할 수 있습니다. 왼쪽으로 맞추면 자릿수가 다른 숫자의 끝이 들쭉날쭉해져 어느 쪽이 큰지 한눈에 알기 어렵습니다.

숫자 글꼴도 영향을 줍니다. 숫자마다 폭이 다른 글꼴은 정렬해도 자릿수가 어긋나 보일 수 있어, 모든 숫자의 폭이 같은 고정폭 숫자를 지원하는 글꼴이나 설정을 쓰면 좋습니다. 소수점 자릿수도 한 열 안에서는 통일합니다.

요소	정렬	이유
숫자	오른쪽	자릿수를 위아래로 맞춤
글자	왼쪽	읽는 방향과 같음
머리글	아래 값과 같은 쪽	열을 쉽게 연결
날짜	형식 통일 후 왼쪽 또는 가운데	형식이 섞이면 비교 어려움

선과 색은 얼마나 써야 하나요?

표에 모든 칸마다 테두리를 두르면 선이 숫자보다 먼저 눈에 들어옵니다. 세로 선은 대부분 빼도 열이 정렬만 잘 되어 있으면 충분히 구분됩니다. 가로 선은 아주 연하게 넣거나, 한 줄씩 번갈아 배경색을 아주 옅게 깔아 줄을 따라 읽기 쉽게 만듭니다.

색은 강조할 곳에만 씁니다. 전체 합계 행, 기준을 넘은 값처럼 꼭 봐야 할 곳에만 색을 넣으면 시선이 그쪽으로 모입니다. 증가와 감소를 색으로만 구분하면 색을 구별하기 어려운 사람은 알아보기 힘들므로, 화살표나 기호를 함께 쓰는 것이 좋습니다.

표가 너무 넓을 때는 어떻게 하나요?

열이 많은 표는 화면, 특히 모바일에서 다 보이지 않습니다. 가장 중요한 열을 왼쪽에 고정하고 나머지 열은 가로로 스크롤하게 하면, 무엇에 관한 값인지 잃지 않고 옆으로 넘겨 볼 수 있습니다. 머리글 행도 위에 고정하면 긴 표를 아래로 내려도 각 열이 무엇인지 알 수 있습니다.

모든 열이 늘 필요하지 않다면 사용자가 보고 싶은 열만 고르게 하는 방법도 있습니다. 단위는 칸마다 반복하지 말고 머리글에 한 번만 적으면 숫자가 더 또렷하게 보입니다. 대시보드처럼 숫자가 많은 화면의 다른 디자인 사례는 차량용 방향제 같은 곳의 자료와 함께 비교해 보면 우리 서비스에 맞는 방식을 찾기 쉽습니다.

자주 묻는 질문

숫자를 가운데 정렬하면 안 되나요?
가운데 정렬은 자릿수가 다른 숫자의 위치가 흩어져 비교가 어려워집니다. 숫자는 오른쪽 정렬이 기본입니다.

표에 줄무늬 배경을 넣는 것이 좋을까요?
줄이 많은 표에서는 줄을 따라 읽는 데 도움이 됩니다. 배경색은 아주 옅게 넣는 것이 좋습니다.

모바일에서 표 대신 카드로 바꿔야 하나요?
값을 비교하는 것이 목적이라면 표를 유지하고 가로 스크롤을 쓰는 편이 낫습니다. 항목 하나를 자세히 보는 화면이라면 카드도 좋습니다.