데이터 시각화 핸드북: 화면에 맞는 차트 고르기

아침에 확인한 날씨와 출근길 교통 상황, 스마트워치에 기록된 걸음 수까지. 우리는 하루에도 수많은 데이터를 만들고 활용해요. 그런데 단순히 정보가 많다고 해서 그 의미까지도 쉽게 전달되지 않습니다. 숫자 하나하나가 어떤 상황에서 만들어졌고 서로 어떻게 연결되는지 이해해야 비로소 의미 있는 정보가 되죠.

그래서 우리는 데이터를 눈에 보이는 형태로 바꿔서 세상을 이해해요. 미세먼지 지도는 외출 준비에 필요한 판단을 돕고, 전력 사용량 그래프는 생활 습관에서 무엇을 바꿔야 할지 보여주죠. 데이터 시각화는 정보를 보기 좋게 꾸미는 일이 아니라, 복잡한 기록 속에서 의미를 발견하고 다음 행동을 고를 수 있도록 설계하는 도구입니다.

이 가이드는 데이터를 더 명확하고 설득력 있게 보여 주기 위한 실전 안내서예요. Edward Tufte가 강조해 온 명료함과 절제의 원칙을 바탕으로, 단순한 숫자부터 복잡한 정보까지 이해하기 쉬운 하나의 이야기로 엮는 방법을 다룹니다.

먼저 프로젝트에 접근하는 일곱 가지 원칙을 정리하고, 마흔 가지 차트 표현을 목적별 여섯 갈래로 나눠 살펴볼 거예요. 차례로 읽어도 되고, 지금 필요한 갈래만 골라 읽어도 돼요.

데이터 시각화 프로젝트, 어떻게 접근할까

데이터 시각화도 다른 UX 설계와 마찬가지로, 초기에 내린 결정이 결과물의 방향을 크게 좌우해요. 그래서 어떤 차트를 쓸지, 어떤 도구로 구현할지 고민하기 전에 프로젝트의 목적과 기준부터 정리할 필요가 있어요.

하려는 일에서 차트 찾기

차트 이름은 몰라도 괜찮아요. 지금 만드는 화면에서 하려는 일과 가장 가까운 행을 찾으면 필요한 차트부터 볼 수 있어요.

하려는 일이 이 표에 없다면, 보여주려는 관계 아홉 가지로 다양한 차트를 분류해 둔 Financial Times Visual Vocabulary도 참고해 보세요.

기본 표현

차트를 고르기 전에 표부터 검토해 볼 가치가 있어요. Vessey는 인지 적합성 연구에서 표와 그래프의 우열은 표현 자체가 아니라 독자가 하려는 일이 결정한다고 정리했습니다. 값을 하나씩 정확하게 읽는 일이라면 표가 그래프를 이기고, 추세와 패턴을 훑는 일이라면 그래프가 표를 이긴다는 거죠. 그래서 도감의 첫 갈래는 가장 검소한 표현들입니다. 표 두 가지와 구성비를 보여주는 파이 가족, 표 안에 추세를 심는 스파크라인까지 일곱 가지를 다룹니다.

표(Table)

지난달 3주차 매출이 얼마였는지 묻는 화면에서 필요한 건 그래프가 아니라 정확한 숫자 하나예요. 표는 어떤 값도 왜곡 없이 그대로 전달하고, 텍스트와 숫자를 한 화면에 섞을 수 있는 유일한 기본 표현입니다.

위 표는 열마다 최댓값을 강조했어요. 다섯 주차의 최댓값이 전부 2025년 행에 모여 있어서 강조 표시가 아랫줄을 따라 일렬로 이어지고, 성장이라는 결론이 숫자를 다 읽기 전에 눈에 들어와요. 표가 밋밋하게 느껴진다면 차트로 바꾸기 전에 이런 조건부 강조부터 시도해 보세요. 값의 정확성을 그대로 유지하면서 패턴 하나를 얹는 가장 저렴한 방법이거든요.

피벗 테이블(Pivot Table)

원본 데이터를 그대로 나열하면 행이 수십 개로 늘어나는 화면이 있어요. 피벗 테이블은 데이터를 카테고리별로 접어 합계만 먼저 보여주고, 독자가 원하는 묶음만 펼쳐 세부를 확인하게 해요. 요약과 원본 사이를 오가는 비용을 표 하나가 감당하는 셈입니다.

처음에는 지역별 합계만 보여요. 서울 행을 펼치면 명동점 매출이 512만 원으로 가장 높다는 세부가 나오는데요. 같은 행의 객단가는 12,427원으로 일곱 지점 가운데 가장 낮아요. 매출 1위 지점이 사실은 낮은 단가를 거래량으로 메우고 있다는 이야기는 합계만 보면 알 수 없죠. 요약에서 시작하되 세부를 닫아 두지 않는 것, 그게 피벗 테이블이 하는 일입니다.

파이 차트(Pie Chart)

전체에서 각 항목이 차지하는 비중을 한눈에 보여주는 데는 파이 차트만큼 익숙한 표현이 없어요. 다만 익숙함과 정확함은 다른 문제입니다. Cleveland와 McGill은 지각 실험에서 사람의 눈이 위치와 길이는 정확하게, 각도와 면적은 부정확하게 읽는다는 순서를 제시했습니다. 파이는 그중 각도에 기대는 차트입니다.

제품 A가 35%로 가장 큰 조각이라는 건 바로 보여요. 반면 18%인 제품 C와 12%인 제품 D의 차이는 각도만으로 가늠하기 어려워서, 값 레이블이 그 빈틈을 메워요. 그래서 파이를 쓸 때는 조각을 대여섯 개 이하로 유지하고 작은 항목은 기타로 묶는 편이 안전합니다. 조각끼리 정밀하게 비교해야 하는 화면이라면 각도 대신 길이로 읽는 막대 차트가 맞는 선택입니다.

도넛 차트(Donut Chart)

가운데를 비우면 파이의 인상이 달라져요. 독자의 시선이 중심각 대신 고리의 길이를 따라가고, 비워 둔 중앙은 합계나 핵심 지표를 적는 자리로 쓸 수 있어요.

모바일이 45%로 절반에 가깝고 데스크톱까지 더하면 80%라는 구도가 고리 길이로 읽혀요. 조각 수 제한과 기타 묶기 같은 파이의 규칙은 도넛에도 그대로 적용됩니다.

와플 차트(Waffle Chart)

각도 대신 개수로 구성비를 전달하는 방법도 있어요. 와플 차트는 전체를 100개의 칸으로 깔고 항목마다 비율만큼 칸을 채웁니다. 한 칸이 1%라서 독자가 값을 어림하지 않고 셀 수 있죠.

완료가 68칸이라 3분의 2를 넘겼다는 판단이 바로 서요. 진행률이나 달성률처럼 항목이 두세 개뿐인 구성비에 특히 잘 맞아요. 항목이 많아져 색이 늘어나면 세는 이점이 사라지니, 그때는 다른 표현을 찾는 편이 낫습니다.

트리맵(Treemap)

트리맵은 구성비를 사각형의 면적에 싣습니다. 파이보다 많은 항목을 감당하고, 원래 계층 구조를 담기 위해 고안된 표현이라 부서 아래 팀, 팀 아래 파트처럼 단계가 있는 데이터로도 확장할 수 있어요.

마케팅이 35%로 가장 넓은 타일을 차지하고 개발 28%가 그 옆에 붙어요. 다만 면적은 각도보다 낫지만 길이보다는 부정확하다는 지각 순서를 기억해 두세요. 타일끼리 몇 퍼센트 차이인지가 중요한 화면이라면 값 레이블을 함께 적는 편이 안전합니다.

스파크라인(Sparkline)

숫자만 나열한 KPI 대시보드를 운영한 적이 있어요. 지표가 지난달보다 좋아졌는지 묻는 질문에는 답할 수 있었지만, 언제부터 나빠지기 시작했는지는 아무도 묻지 않았어요. 지표 옆에 작은 추세선을 붙이자 "왜 여기서 꺾였지?"라는 질문이 들어오기 시작했고요. 숫자는 현재를 말하고 선은 질문을 만든다는 걸 그때 알았습니다.

스파크라인은 터프티가 이름 붙인 초소형 차트입니다. 축도 눈금도 없이 모양만 남겨서 표의 셀 하나에 들어가요. 위 표에서 매출 선은 3월에 한 번 꺾였다가 회복했고, 반송률 선은 여섯 달 동안 한 번도 내려가지 않았어요. 색은 방향이 아니라 좋고 나쁨을 따라가요. 그래서 이탈률은 선이 내려가는데도 낮아지는 쪽이 개선이라 초록으로 칠해져 있죠. 정확한 값이 필요해지면 그때 큰 차트로 연결하면 됩니다.

비교와 추세

어느 쪽이 더 큰가, 언제부터 늘었는가. 대시보드에서 가장 자주 마주치는 두 질문이고, 막대와 선이라는 가장 오래된 차트들이 답하는 질문이기도 해요. 오래된 만큼 규칙도 분명합니다. 막대의 길이 비교는 축이 0에서 시작해야 성립하고, 축 범위나 종횡비를 조금만 비틀어도 같은 데이터가 다른 이야기를 합니다. 비교할 수 있는 대상을 정직하게 비교한다는 원칙이 이 갈래 전체의 바닥에 깔려 있어요.

막대 차트(Bar Chart)

막대는 값을 길이에 싣습니다. 길이는 사람의 눈이 가장 정확하게 읽는 시각 속성이라, 범주끼리 크기를 견주는 화면에서 막대가 기본값이 되는 데는 이유가 있습니다. 단일 계열이라면 그리기 전에 정렬부터 하세요. 순위가 축을 읽기 전에 눈에 들어오거든요.

영업이 91로 가장 높고 운영이 54로 가장 낮다는 순위가 레이블을 읽기 전에 정해져요. 범주 이름이 길다면 이 차트처럼 수평으로 눕히는 편이 좋아요. 이름이 잘리거나 기울어지지 않으니까요.

비교 대상이 두 시점이 되면 그룹 막대로 확장해요.

부서마다 작년과 올해 막대가 나란히 서고, 개발과 운영은 올해가 오히려 낮아졌다는 사실이 쌍의 높이 차이로 드러나요. 계열이 서너 개를 넘으면 막대가 가늘어져 읽기 어려워지니, 그때는 계열을 줄이거나 차트를 나누는 편이 낫습니다.

부분의 크기보다 전체의 합이 궁금하다면 나란히 세우는 대신 쌓아요.

누적 막대는 값을 그대로 쌓아 올리기 때문에 막대 전체의 높이가 곧 총량이에요. 분기 합계가 Q1 100에서 Q4 153까지 매 분기 커졌다는 사실과 그 성장을 Bravo와 Charlie가 이끌었다는 구성이 한 그림에 담겨요. 대신 바닥에 닿아 있지 않은 계열은 시작점이 들쑥날쑥해서 정확히 읽기 어려워요. 총량 정보를 포기하고 구성비만 남기면 100% 누적 막대가 됩니다.

모든 막대의 높이가 100으로 같아지는 대신, Alpha의 비중이 45%에서 30%로 줄어드는 변화가 드러나요. 총량과 구성비 중 화면의 질문이 무엇인지에 따라 두 변형을 고르면 됩니다.

발산형 막대(Diverging Bar Chart)

목표 대비 초과와 미달처럼 값에 방향이 있는 데이터는 0을 가운데 두고 양쪽으로 뻗는 편이 정직합니다.

영업이 +22로 가장 앞서고 운영이 -12로 가장 뒤처졌으며, 여섯 부서 중 셋이 목표에 못 미쳤다는 구도가 0의 좌우로 갈려요. 색이 방향을 겹쳐 표시하지만, 색만으로 구분하지 않도록 레이블이 값을 함께 적고 있고요.

폭포 차트(Waterfall Chart)

시작 값과 끝 값 사이에 무슨 일이 있었는지 묻는 화면이 있어요. 폭포 차트는 증감을 하나씩 쌓아 그 경로를 보여줍니다.

시작 83이 최종 29로 내려오는 동안 3월의 +32가 유일한 반등이고, 6월의 -28이 가장 큰 하락이에요. 두 스냅숏만 비교하면 54가 줄었다는 결론뿐이지만 폭포는 어느 달이 문제였는지까지 답해요. 재고 증감, 손익 분해, 인원 변동처럼 더하고 빼는 항목이 명확한 데이터에 잘 맞습니다.

파레토 차트(Pareto Chart)

개선할 일이 산더미일 때 순서를 정해 주는 차트입니다. 항목을 빈도 내림차순으로 세우고 누적 비율 선을 겹쳐서, 어디까지 해결하면 전체의 몇 퍼센트가 사라지는지 보여줘요.

서버 오류와 네트워크 두 항목만으로 전체 장애의 절반이 넘어가고, 누적 선은 네 번째 항목에서 80% 기준선을 넘어요. 일곱 가지 원인을 다 고치자는 계획과 두 가지부터 고치자는 계획은 설득력이 다르죠.

선 차트(Line Chart)

시간에 따른 변화를 따라가는 화면의 기본값입니다. 점을 선으로 이어 방향과 기울기를 만들고, 독자는 값보다 흐름을 먼저 읽어요. 막대와 달리 선은 0 기준선이 필수가 아닙니다. 길이가 아니라 위치와 기울기로 읽는 표현이라, 변화 폭이 작을 때는 축 범위를 데이터 근처로 좁혀 기울기를 살리는 편이 오히려 정확하거든요.

데스크톱과 모바일이 2월과 4월에 함께 꺾여요. 한 계열만 봤다면 그 계열의 문제로 읽었을 하락이, 두 선이 같이 움직이는 순간 연휴나 장애 같은 공통 원인을 가리키는 단서가 되죠. 계열이 늘어날수록 선이 엉키니, 강조할 한두 계열만 남기고 나머지는 흐리게 처리하는 것도 방법입니다.

영역 차트(Area Chart)

선 아래를 칠하면 양이라는 인상이 더해지고, 여러 계열을 쌓으면 총량과 구성이 함께 보여요. 다만 누적에는 대가가 있어요.

광고 계열 자체는 280에서 540까지 매달 늘기만 했어요. 그런데 SEO 위에 쌓인 탓에 광고의 상단 경계가 SEO의 등락을 따라 출렁여요. 2월에서 3월, 4월에서 5월로 넘어가는 구간에서는 경계선이 내려가 광고가 줄어든 것처럼 보이죠. 바닥에 닿은 계열만 자기 모양을 그대로 유지하니, 가장 안정적인 계열을 맨 아래에 깔고 개별 계열의 정확한 추세가 중요한 화면에서는 선 차트로 돌아가는 편이 안전합니다. 비율만 쌓는 영역 차트는 반드시 0에서 시작해야 한다는 점도 선 차트와 다릅니다.

레이더 차트(Radar Chart)

여러 축의 값을 하나의 다각형으로 접으면 개별 수치가 프로파일이라는 모양으로 바뀝니다. 기술 역량이나 제품 평가처럼 대여섯 개 축을 한 대상에 대해 훑는 화면에 맞습니다.

팀A의 다각형은 React 90과 Testing 88 쪽으로 뻗고 팀B는 AWS 90과 Node.js 85 쪽으로 뻗어서, 프론트에 강한 팀과 인프라에 강한 팀이라는 요약이 모양으로 남아요. 주의할 점은 면적이에요. 다각형의 면적은 축을 배치한 순서에 따라 달라지기 때문에, 면적이 넓은 쪽이 우세하다고 읽으면 안 됩니다. 어느 축이 강한가까지만 읽는 차트예요.

원형 누적 막대(Radial Bar Chart)

누적 막대를 원에 감으면 시선을 끄는 표현이 돼요. 대신 그 대가로 정확성을 지불합니다. 같은 값이라도 중심에서 먼 호가 더 길게 그려져서, 계열 사이의 정밀한 비교에는 맞지 않습니다.

월 합계가 1월 64에서 6월 138로 커지는 흐름 정도가 이 표현이 감당하는 해상도입니다. 요약 화면의 도입부처럼 분위기가 값보다 중요한 자리에 쓰고, 판단이 걸린 화면에서는 직선 막대로 돌아가세요.

불릿 그래프(Bullet Graph)

Stephen Few가 계기판의 게이지를 대체하려고 설계한 차트입니다. 게이지 하나가 차지할 자리에 실적 막대와 목표 표식, 구간 배경까지 겹쳐서 KPI 여러 개를 한 화면에 쌓을 수 있어요.

가로 막대가 실적, 세로 선이 목표, 배경의 명암이 나쁨에서 좋음까지의 구간이에요. Bravo는 92로 목표 표식 85를 넘겼고 Alfa는 35로 목표 80에 한참 못 미쳤다는 판정이 행마다 한 줄로 끝나요. 행 위 어디에 커서를 올려도 실제와 목표, 구간이 한 툴팁에 함께 나오고요.

관계와 군집

마케팅비를 늘리면 매출이 따라 늘까요? 이런 질문에 답하려면 값 하나가 아니라 두 변수가 함께 움직이는 모양을 봐야 해요. 그런데 이 갈래의 차트들은 상관을 드러내는 데 강한 만큼 독자를 속이는 데도 강합니다. 점들이 한 방향으로 늘어서 있다고 원인과 결과까지 증명되는 건 아니고, 아이스크림 판매량과 상어 출몰처럼 우연히 나란한 쌍은 Spurious Correlations 같은 사이트가 있을 정도로 흔하거든요. 숫자에 맥락을 더한다는 원칙이 여기서는 생존 규칙에 가깝습니다.

산점도(Scatter Plot)

두 변수를 x축과 y축에 하나씩 놓고 관측값을 점으로 찍습니다. 점들이 만드는 방향과 밀집, 그리고 무리에서 떨어진 점까지, 요약 통계가 뭉개 버리는 구조가 그대로 남는 것이 산점도의 힘입니다.

신규 그룹은 세션이 늘수록 전환율이 1.8%에서 4.8%까지 오르고, 재방문 그룹은 반대로 5.6%에서 3.5%까지 내려가요. 그런데 색을 지우고 스무 개의 점을 하나의 무리로 보면, 반대 방향의 추세가 서로를 지워서 상관이 없는 것처럼 보여요. 산점도를 그렸는데 관계가 안 보인다면 숨은 그룹 변수부터 의심해 보세요. 반대로 뚜렷한 관계가 보여도 그게 인과인지는 차트 밖에서 따져야 합니다.

버블 차트(Bubble Chart)

산점도에 세 번째 변수를 더하고 싶을 때는 점의 크기를 씁니다.

인구가 가장 많은 버블(크기 42)은 GDP가 가장 낮은 38 자리에 떠 있어요. 위치로는 구석인데 크기로는 주인공인 셈이라, 시선이 어디로 가는지에 따라 다른 이야기를 읽게 되죠. 크기 지각은 위치 지각보다 부정확하니 크기에는 대략의 규모까지만 싣고, 정확한 비교가 필요한 변수는 축에 배치하세요. 오른쪽 아래의 크기 기준자가 버블 지름을 값으로 되돌리는 범례 역할을 해요.

산점도 행렬(Pairplot)

변수가 넷이면 쌍이 여섯 개라, 산점도를 하나씩 그려서는 손이 늦어요. 산점도 행렬은 모든 쌍을 격자로 한 번에 깔고, 대각선에는 각 변수의 히스토그램을 놓아 분포까지 훑게 합니다.

Palmer Penguins 데이터셋의 변수 구성을 빌려 만든 예시 값이에요. 지느러미와 체중 쌍은 오른쪽 위로 뚜렷하게 늘어서고, 부리 깊이와 체중 쌍은 반대 방향으로 기울어요. 전체를 한 번 훑어 유망한 쌍을 고른 뒤 그 쌍만 큰 산점도로 다시 그리는 흐름이 산점도 행렬의 정석이에요. 격자 하나하나는 작아서 탐색용이지 발표용은 아니고요.

히트맵(Heatmap)

두 범주축이 만드는 행렬의 값을 색 농도로 칠해요. 요일과 시간대처럼 조합이 수십 개로 늘어나는 데이터에서, 패턴이 어디에 몰려 있는지 한눈에 잡는 표현입니다.

가장 진한 칸은 수요일 13시(68)이고, 어느 요일이든 13시가 그날의 봉우리예요. 주 단위로는 월요일부터 수요일까지 진해지다가 목요일부터 옅어지는 리듬도 보이고요. 색의 미세한 단계를 눈으로 구분하기는 어렵기 때문에 이 차트도 칸마다 숫자를 함께 적었어요. 정확한 값이 판단을 좌우하는 화면이라면 표로 보완하거나 행 하나를 선 차트로 뽑아내세요.

분포와 이상치

평균과 표준편차 같은 요약 통계가 전부 같은데 산점도를 그리면 공룡이 나타나는 Datasaurus 데이터셋이 있어요. 열세 개 데이터셋의 요약 통계가 소수점 둘째 자리까지 같지만, 하나는 공룡이고 하나는 별이고 하나는 동심원이에요. 요약은 분포의 모양을 지운다는 것, 그게 이 갈래가 다루는 문제입니다. 요소를 덜어낼수록 잘 읽힌다는 원칙에도 예외가 있는 셈이죠. 지워서는 안 되는 것까지 지우면 화면은 간결해지고 판단은 틀려집니다.

히스토그램(Histogram)

값의 범위를 같은 폭의 구간으로 자르고, 구간마다 관측 횟수를 세서 그립니다. 막대와 닮았지만 답하는 질문이 다릅니다. 막대가 범주끼리 크기를 견준다면, 히스토그램은 하나의 변수가 어떤 모양으로 퍼져 있는지 보여줍니다. 그래서 막대 사이가 붙어 있어요. 축이 연속이니까요.

240건의 상담 통화가 0-1분 구간(45건)과 6-7분 구간(42건)의 두 봉우리로 갈라져요. 잘못 걸려 바로 끊는 통화와 실제 상담이 섞여 있다는 신호죠. 이 데이터의 평균은 4.35분인데, 정작 4-5분 구간의 빈도는 15건뿐이에요. 평균이 아무도 없는 골짜기를 가리키는 셈이라, "평균 통화 시간 4분"이라는 요약은 어떤 통화도 대표하지 못해요. 다만 히스토그램은 구간 폭에 민감해서, 폭을 넓히면 두 봉우리가 하나로 합쳐져 보일 수 있습니다. 폭을 두어 가지로 바꿔 그려서 형태가 유지되는지 확인하세요.

박스 플롯(Box Plot)

여러 분포를 나란히 비교할 때 히스토그램을 여러 개 겹치면 화면이 금세 어지러워져요. 박스 플롯은 분포 하나를 최솟값, 1사분위수, 중앙값, 3사분위수, 최댓값의 다섯 숫자로 접어서 좁은 상자 하나에 담습니다.

상자가 가운데 절반을 담고 양쪽 수염이 바깥 값까지 뻗어요. 세 분기 모두 그룹 A의 상자가 그룹 B보다 위에 있어서, 여섯 개 분포의 우열이 한 화면에서 정리되죠. 관례적으로 수염은 IQR 1.5배까지만 긋고 그 밖의 값은 이상치 점으로 따로 찍는데요. 이 데이터에는 모든 그룹에서 IQR 1.5배 밖의 값이 없어서 수염이 극값까지 닿고 이상치 점도 없어요. 기억할 것은 다섯 숫자 요약이 봉우리를 감춘다는 점입니다. 위 히스토그램의 쌍봉 데이터도 박스로 접으면 평범한 상자 하나가 돼요. 분포를 처음 보는 화면에서는 히스토그램으로 형태를 확인한 뒤에 박스 플롯으로 넘어가는 순서가 안전합니다.

바이올린 플롯(Violin Plot)

박스가 감추는 모양을 살리면서 요약의 간결함도 유지하고 싶다면 두 표현을 겹치면 됩니다. 바이올린 플롯은 분포의 밀도 곡선을 좌우 대칭으로 세우고, 그 안에 사분위수 상자를 담습니다.

그룹 C의 바이올린이 62에서 80 사이 가장 높은 자리에, 그룹 B가 32에서 50 사이 가장 낮은 자리에 서요. 곡선의 폭이 값이 몰린 곳을 알려주니, 상자만으로는 안 보이던 밀집이 드러나죠. 다만 밀도 곡선은 표본에서 추정한 것이라 표본이 적을수록 실제보다 매끈해 보입니다. 그룹당 여덟 개짜리 이 데이터의 곡선도 그 한계를 감안하고 읽어야 합니다.

스웜 플롯(Swarm Plot)

표본이 이 정도로 적다면, 추정 곡선보다 점 전체를 보여주는 쪽이 독자에게 정직합니다. 스웜 플롯은 같은 데이터를 요약 없이 펼칩니다. 값이 겹치는 점은 옆으로 살짝 밀어내서 하나도 가려지지 않게 배치합니다.

바이올린과 같은 데이터예요. 스물네 개의 점이 전부 보이니, 그룹 C의 최저점 62가 그룹 A의 최고점 60보다 높아서 두 그룹이 아예 겹치지 않는다는 사실까지 읽혀요. 점의 크기는 거래량 같은 보조 변수를 싣는 자리고요. 수백 개가 넘어가면 점이 뭉개지니 그때는 바이올린이나 박스로 돌아가세요. 요약과 원본 사이에서 표본 크기가 선택 기준이 되는 셈입니다.

이변량 KDE(Bivariate KDE)

산점도의 점이 수천 개로 늘어나면 점끼리 겹쳐서 어디가 진짜 밀집인지 알 수 없게 돼요. 이변량 KDE는 점 대신 밀도를 추정해 등고선으로 그립니다. 지형도에서 등고선이 촘촘한 곳이 가파른 봉우리이듯, 선이 겹겹이 쌓인 곳이 관측이 몰린 자리예요.

Old Faithful 간헐천의 고전 데이터셋을 각색한 예시예요. 짧게 기다렸다 짧게 분출하는 무리는 대기 50분대에 분출 2분 안팎, 길게 기다렸다 길게 분출하는 무리는 대기 80분 언저리에 분출 4분대로 갈라지고, 두 봉우리 사이는 비어 있어요. 분출 2.6분에서 3.1분 사이의 관측은 하나도 없거든요. 평균을 내면 그 빈 골짜기가 나온다는 점에서, 히스토그램의 교훈이 2차원에서 반복되는 셈이죠.

전용 차트

시세, 일정, 지역, 계층. 어떤 데이터는 모양이 처음부터 정해져 있고, 그 모양을 위해 만들어진 전용 표현이 따로 있어요. 이 갈래에서는 같은 데이터를 두 가지 표현으로 나란히 그리는 쌍이 세 번 나오는데요. 시세 한 벌을 캔들스틱과 OHLC로, 지역 값 한 벌을 코로플레스와 카토그램으로, 조직 계층 한 벌을 트리와 선버스트로 다시 그려요. 데이터는 그대로 두고 인코딩만 바꿨을 때 무엇이 잘 보이게 되고 무엇을 잃는지, 그게 이 갈래의 관전 포인트입니다.

캔들스틱 차트(Candlestick Chart)

하루치 시세에는 시가, 고가, 저가, 종가라는 네 개의 값이 있어요. 캔들스틱은 이 네 값을 양초 하나에 담습니다. 몸통의 위아래가 시가와 종가, 심지가 고가와 저가, 색이 그 기간의 상승과 하락이에요.

1월 시가 20에서 12월 종가 36까지 올라오는 동안, 2월, 4월, 6월, 9월, 12월 다섯 달은 종가가 시가 아래에 있는 하락 캔들이에요. 상승장에도 하락 달이 규칙적으로 끼어 있다는 결이 색만으로 잡히죠. 함께 그려진 MA5 선은 최근 다섯 기간의 이동평균으로, 개별 캔들의 요동을 걷어낸 추세를 보여줘요. 가격 축은 0에서 시작하지 않는데요. 시세 화면에서는 등락 폭이 관심사라 축을 데이터 근처로 좁히는 것이 관례입니다. 드래그로 구간을 확대해 볼 수 있어요.

OHLC 차트(OHLC Chart)

같은 시세를 몸통 없이 그리는 오래된 표기법도 있어요. 세로선이 저가와 고가를 잇고, 왼쪽 눈금이 시가, 오른쪽 눈금이 종가입니다.

위 캔들스틱과 완전히 같은 데이터예요. 잉크가 줄어든 만큼 화면이 가벼워지고, 캔들이 수백 개로 늘어나도 겹침이 덜해요. 대신 몸통의 색과 부피가 주던 즉각적인 인상은 사라지죠. 빽빽한 장기 차트라면 OHLC, 개별 기간의 표정까지 읽는 화면이라면 캔들스틱 쪽이 맞습니다.

간트 차트(Gantt Chart)

일정 데이터의 모양은 기간입니다. 언제 시작해서 언제 끝나는지, 무엇이 무엇과 겹치는지. 간트 차트는 작업을 행으로 눕히고 기간을 가로 막대로 그립니다.

1월 3일 킥오프에서 4월 11일 릴리스까지 다섯 레인이 이어져요. 기획에서 디자인, 개발, QA로 넘어가는 직렬 구간 사이에서, 프론트엔드의 컴포넌트 개발과 백엔드의 API 개발이 2월 24일부터 3월 21일까지 나란히 달리는 병렬 구간이 눈에 들어오죠. 기간이 없는 사건은 다이아몬드 마일스톤으로 찍어요. 일정이 수십 행으로 늘어나면 전부 그리기보다, 이번 분기나 우리 팀처럼 화면의 질문에 맞는 범위로 잘라내는 편이 낫습니다.

코로플레스 지도(Choropleth Map)

지역별 값은 표로도 막대로도 그릴 수 있어요. 하지만 옆 동네와의 비교나 권역의 결처럼 공간이 만드는 맥락은 지도 위에서만 보여요. 코로플레스는 행정 구역을 값의 크기에 따라 칠하는 지도입니다.

미국 주별 투표율을 가정한 예시 값이에요. 미네소타가 79.5로 가장 진하고 테네시가 56.1로 가장 옅어요.

그런데 비율을 칠해도 문제가 하나 남는데요. 색이 지역의 넓이와 곱해져 읽힌다는 점이에요. 넓은 주는 옅어도 시선을 차지하고, 작은 주는 진해도 묻히죠.

격자형 카토그램(Tile Cartogram)

그 면적 편향을 지우는 표현이 카토그램입니다. 격자형 카토그램은 모든 지역을 같은 크기의 타일로 바꿔서 대략의 위치 관계만 남깁니다.

같은 투표율 데이터예요. 로드아일랜드(58.4)가 텍사스(69.8)와 같은 넓이를 차지해서, 작은 주의 값이 처음으로 큰 주와 대등하게 읽혀요. 대신 실제 지리 형태를 포기했으니 독자가 각 타일이 어디인지 알고 있어야 합니다. 지리에 익숙한 독자에게는 공정한 지도이고, 낯선 독자에게는 그냥 격자인 거죠. 두 표현을 위아래로 두고 보면, 지도의 익숙함과 타일의 공정함 중 무엇을 고를지가 화면의 질문에 달려 있다는 게 분명해져요.

트리 다이어그램(Tree Diagram)

조직도나 디렉터리 구조처럼 부모와 자식이 있는 데이터의 모양은 계층입니다. 트리 다이어그램은 그 계층을 가지로 펼쳐서 경로를 보여줍니다. 루트에서 어떤 마디를 거쳐 잎에 닿는지가 표현의 중심이에요.

회사가 네 팀으로, 팀이 열 개 파트로 갈라지고, 백엔드가 40으로 가장 큰 파트예요. 트리가 경로를 앞세운다면 기본 표현의 트리맵은 같은 계층에서 비중을 앞세워요. 구조를 설명하는 화면인지 크기를 비교하는 화면인지가 갈림길이에요.

선버스트 차트(Sunburst Chart)

같은 계층을 경로 대신 비례로 읽고 싶다면 동심원에 감습니다. 선버스트는 안쪽 고리가 상위 계층, 바깥 고리가 하위 계층이고, 호의 길이가 값에 비례합니다.

위 트리와 같은 데이터예요. 여기서도 백엔드 40이 가장 넓은 호를 차지하는데요. 트리에서는 레이블을 읽어야 알던 사실이 선버스트에서는 호의 길이로 먼저 보여요. 바깥 고리는 안쪽 가지의 색을 이어받아 옅어지니, 색의 계보로 소속을 추적할 수도 있고요. 계층이 서너 단계를 넘으면 바깥 호가 가늘어져 레이블이 사라지니 그때는 트리로 돌아가는 편이 낫습니다.

서클 패킹(Circle Packing)

계층을 포함 관계로 읽게 하는 세 번째 방법입니다. 부모 원 안에 자식 원을 채우고, 원의 면적을 값에 비례시켜요.

React가 120으로 가장 큰 원이에요. 어떤 기술이 어느 분야에 속하는지가 원이 원 안에 들어 있는 모양만으로 전달되고, 그 직관성이 서클 패킹의 값어치예요. 대신 원 사이의 빈틈 때문에 공간 효율이 낮고, 면적 비교의 정밀도도 떨어집니다. 정확한 비교가 필요하면 트리맵이, 발표 자료의 한 장면이라면 서클 패킹이 어울립니다.

흐름과 관계망

값이 얼마인가 대신, 무엇이 어디로 가는가를 묻는 화면이 있어요. 사용자가 어떤 경로로 이탈하는지, 서비스가 서로 어떻게 의존하는지 같은 질문에서는 개별 값보다 이동과 연결이 데이터의 본체입니다. 마지막 갈래는 그 흐름과 관계망을 그리는 네 가지 표현이에요.

플로 차트(Flow Chart)

이 갈래에서 유일하게 데이터가 아니라 절차를 그리는 표현입니다. 상자가 단계, 화살표가 방향, 마름모가 갈림길이라는 약속만으로 어떤 프로세스든 종이 한 장에 눌러 담아요. 이 핸드북의 차트 선택 기준을 플로 차트로 옮기면 이렇게 됩니다.

갈림길에서 많아야 다섯 번 답하면 어느 화면이든 여섯 갈래 중 한 곳에 도착해요. 갈림길의 답이 예와 아니오로 떨어지지 않는다면, 다이어그램이 아니라 절차 자체가 아직 정리되지 않았다는 신호일 때가 많아요.

생키 다이어그램(Sankey Diagram)

생키는 흐름의 양을 띠의 굵기로 그립니다. 원래 증기기관의 에너지 효율을 그리던 표현인데, 지금은 사용자 여정과 예산 배분처럼 무엇이 갈라지고 합쳐지는 데이터라면 어디든 쓰여요.

읽는 법의 핵심은 보존입니다. 흐름이 중간에 사라지지 않고, 각 노드에 들어온 양과 나간 양이 같습니다. 유입 100이 검색 40, 소셜 25, 직접 35로 갈라졌다가 끝에서 구매 45와 이탈 55로 정확히 다시 모여요. 홈페이지를 거친 55 중 30이 제품 페이지로 가고 25가 이탈한다는 중간 결도 띠의 굵기로 읽히고요. 그리기 전에 각 노드의 들어온 합과 나간 합부터 검산하세요. 합이 맞지 않으면 그림보다 데이터를 먼저 의심해야 합니다. 띠 위에 커서를 올리면 연결된 경로만 남고 나머지가 흐려져요.

네트워크 그래프(Network Graph)

방향과 양 대신 연결 그 자체가 질문일 때는 네트워크 그래프를 씁니다. 점이 개체, 선이 관계이고, 배치는 힘 시뮬레이션이 정합니다. 연결이 많은 점일수록 가운데로 끌려오기 때문에 배치 자체가 분석 결과인 셈이에요.

마이크로서비스 의존 관계를 이 그래프로 그려 본 적이 있어요. 서비스 목록만 봤을 때는 몰랐던 병목이 개별 서비스가 아니라 여러 서비스가 공유하는 DB라는 게 그제야 드러났어요. 위 그림에서도 가장 큰 노드가 auth-db고, 여섯 갈래가 여기로 모여요. 노드에 레이블이 없어 크기와 연결로만 읽게 되는데, 그 단순함이 오히려 병목을 도드라지게 하죠. 점과 선이 조금만 늘어도 전체가 실뭉치처럼 엉키는 헤어볼(hairball)이 되니, 질문과 무관한 노드는 그리기 전에 덜어내야 합니다. 점을 드래그해서 뭉친 곳을 풀어 볼 수 있어요.

코드 다이어그램(Chord Diagram)

지역 간 인구 이동처럼 모든 쌍이 서로 주고받는 데이터는 행렬입니다. 코드 다이어그램은 그 행렬을 원 위에 펴고, 쌍 사이의 양을 리본의 굵기로 그립니다.

서울과 경기 사이 리본이 45로 가장 굵고, 대구와 인천의 42가 그다음이에요. 리본 양 끝의 호 길이는 그 지역이 주고받는 전체 양이라, 어느 지역이 교류의 중심인지도 함께 읽혀요. 다만 다섯 개 지역이면 리본이 열 개지만, 항목이 열 개만 되어도 리본은 마흔다섯 개로 늘어나요. 항목 수가 두 자리로 가기 전에 관심 있는 쌍만 남기거나 히트맵 행렬로 바꾸는 편이 낫습니다.

참고 자료

• Financial Times Visual Vocabulary — 보여주려는 관계를 편차, 순위, 흐름 같은 아홉 가지로 나눠 차트를 분류한 선택 가이드
• The Data Visualisation Catalogue — 60여 종의 차트를 기능별로 검색할 수 있는 카탈로그. 이 도감에 없는 차트를 찾는 곳
• Edward Tufte — 정보 디자인과 정량 정보의 시각 표현을 개척한 고전적 작업
• Apache ECharts — 이 핸드북의 차트를 전부 그린 라이브러리
• USWDS Data visualizations — 접근성 관점에서 정리된 미국 정부 디자인 시스템의 시각화 지침