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

차트 목록을 앞에 두고 무엇을 고를지 막막했던 적이 있습니다. 막대와 선처럼 익숙한 것부터 생키와 카토그램처럼 이름도 낯선 것까지 종류는 수십 가지인데, 지금 만드는 화면에 맞는 하나를 고르는 기준이 잘 안 보였거든요.

고르기 어려웠던 이유는 목적보다 차트를 먼저 보고 있었기 때문이었어요. 어제 결제가 몇 건이었는지 확인하는 화면과 결제가 반년 동안 어느 쪽으로 가고 있는지 보는 화면은, 데이터가 같아도 보는 사람이 하려는 일이 다릅니다. 그 일이 정해져야 맞는 표현도 따라 나오니, 이 핸드북은 차트 이름이 아니라 화면에서 하려는 일에서 출발합니다.

순서도 거기에 맞췄습니다. 바로 아래에는 하려는 일로 차트를 찾는 표를 두었습니다. 이어서 차트 종류보다 먼저 정해야 하는 일곱 가지 기준을 소개하고, 마흔 가지 차트 표현을 목적별 여섯 갈래로 나눈 도감을 실었어요. 도감의 차트는 전부 이 페이지에서 직접 렌더되니 눌러 보고 움직여 보면서 읽을 수 있습니다.

하려는 일에서 차트 찾기

왼쪽 열에는 차트 이름 대신 화면에서 하려는 일을 적었습니다. 그중 지금 만드는 화면에 가장 가까운 줄을 고르면 해당 목적에 맞는 차트들이 나옵니다.

하려는 일이 표에 없다면 Financial Times Visual Vocabulary에 더 넓은 분류가 있습니다. 보여주려는 관계를 아홉 가지로 나눠 차트를 정리해 둔 자료이니 원하는 차트를 찾는 데 도움이 될 거예요.

차트보다 먼저 정하는 일곱 가지

같은 막대 차트도 화면마다 다르게 그려집니다. 누가 보는지, 어디까지 비교가 성립하는지, 데이터가 얼마나 자주 바뀌는지에 따라 모양이 갈리거든요. 초기에 내린 결정이 결과물의 방향을 좌우한다는 점에서 데이터 시각화도 다른 UX 설계와 비슷합니다. 그래서 이 절에는 그 방향을 잡을 때 도움이 되는 일곱 가지 기준을 모았습니다.

기본 표현

도감은 축이 없는 표현들부터 시작합니다. 여기에는 표와 피벗 테이블, 구성비를 보여주는 파이 계열, 셀 하나에 들어가는 스파크라인까지 일곱 가지가 묶입니다. 모두 좌표를 읽지 않아도 값이 전달된다는 공통점이 있거든요. 축과 눈금은 다음 갈래부터 등장합니다.

표(Table)

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

위 표는 열마다 최댓값을 강조했습니다. 강조된 다섯 칸 중 셋이 2025년 행에 있고, 2주차는 2024년이, 4주차는 2023년이 가장 높습니다. 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 대시보드를 운영한 적이 있어요. 지표가 지난달보다 좋아졌는지 묻는 질문에는 답할 수 있었지만 언제부터 나빠지기 시작했는지는 아무도 묻지 않았는데, 지표 옆에 작은 추세선을 붙이자 "왜 여기서 꺾였지?"라는 질문이 들어오기 시작했습니다. 숫자로는 현재 상태만 보이고, 질문은 추세가 보여야 나온다는 걸 그때 알았습니다.

스파크라인은 Edward Tufte가 이름 붙인 초소형 차트입니다. 축도 눈금도 없이 모양만 남겨서 표의 셀 하나에 들어갑니다. 위 표에서 매출 선은 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배까지만 긋고 그 밖의 값은 이상치 점으로 따로 찍는데, 이 데이터에는 그런 값이 한 그룹에도 없어서 수염이 극값까지 닿고 이상치 점도 찍히지 않았습니다. 기억할 것은 다섯 숫자 요약이 봉우리를 감춘다는 점입니다. 위 히스토그램의 쌍봉 데이터도 박스로 접으면 평범한 상자 하나가 됩니다. 그래서 분포를 처음 보는 화면이라면 히스토그램으로 형태부터 확인하고 박스 플롯은 그다음입니다.

바이올린 플롯(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가 그다음인데, 리본 양 끝의 호 길이는 그 지역이 주고받는 전체 양이라 어느 지역이 교류의 중심인지도 함께 읽힙니다. 다만 다섯 개 지역이면 리본이 열 개인데, 항목이 열 개로 늘면 리본은 마흔다섯 개가 됩니다. 두 자리로 가기 전에 관심 있는 쌍만 남기거나 히트맵 행렬로 옮기는 게 보통입니다.

마치며

이렇게 정리해 놓고 보니 예전에 차트 목록 앞에서 막막했던 이유가 분명해졌어요. 목록에 적혀 있던 건 차트 이름이지 제가 하려던 일이 아니었거든요. 같은 시세를 캔들스틱과 OHLC로, 같은 조직도를 트리와 선버스트로 두 번씩 그려 본 것도 그래서였습니다. 두 그림은 데이터가 똑같아서 그림만 놓고는 어느 쪽이 나은지 답이 나오지 않고, 답은 그 화면이 무엇을 묻는 화면인지에서 나왔어요.

참고 자료

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