차트는 어떻게 정직하게 거짓말하는가: 지각 인코딩의 위계

대시보드 리뷰 회의를 떠올려보자. 디자이너가 밤새 다듬은 화면이 스크린에 뜬다. 매출 구성비를 보여주는 도넛 차트가 곱게 자리 잡았고, 색은 브랜드 팔레트에 딱 맞게 떨어진다. 그런데 누가 묻는다.

PM: “이 두 조각, 어느 쪽이 더 커?” 디자이너: “어… 왼쪽이요. 아마.” PM: “몇 퍼센트 차이인데?” 디자이너: “…라벨을 봐야 알겠네요.”

숫자는 하나도 틀리지 않았다. 23%는 정확히 23%로, 27%는 정확히 27%로 그려졌다. 데이터도 옳고 합계도 100%다. 그런데 그림은 그 4%포인트 차이를 눈에 전달하지 못했다. 라벨을 지우면 그 두 조각은 사실상 같은 크기로 보인다. 이게 이 글이 말하려는 정직한 거짓말이다. 값은 정확한데, 그 값을 시각으로 옮기는 방식이 독자의 눈을 속인다.

인코딩은 매핑이고, 매핑에는 선택이 있다

차트를 만든다는 건 결국 숫자를 시각 요소로 바꾸는 일이다. 이 변환을 인코딩(encoding)이라고 부른다. 23이라는 값을 막대의 길이로 옮길 수도 있고, 원의 각도로 옮길 수도 있고, 점의 위치로 옮길 수도 있고, 동그라미의 넓이나 색의 진하기로 옮길 수도 있다. 같은 값, 다른 채널이다.

여기서 흔한 오해가 하나 있다. 어떤 채널을 고르든 값만 정확하면 정직한 차트라는 생각이다. 23%를 각도 82.8도로 그리든 막대 길이 23으로 그리든, 원본 숫자가 맞으니 문제없다는 논리다. 이 논리의 구멍은 독자가 그 그림을 눈으로 되읽는다는 데 있다. 각도 82.8도를 사람은 82.8도로 되읽지 못한다. 막대 길이 23은 꽤 정확히 되읽는다. 인코딩은 값을 넣는 쪽만 있는 게 아니라, 그 값을 다시 꺼내 읽는 쪽이 있다. 꺼내 읽기가 부정확한 채널을 고르면, 값을 정확히 넣고도 부정확하게 전달된다.

그래서 인코딩 선택은 미학의 문제이기 전에 지각의 문제다. 어떤 채널은 사람이 잘 읽고, 어떤 채널은 잘 못 읽는다. 그리고 이 잘 읽음과 못 읽음에는 순서가 있다.

Cleveland–McGill의 위계

이 순서를 처음으로 실험해 정리한 게 윌리엄 클리블랜드(William Cleveland)와 로버트 맥길(Robert McGill)의 1984년 논문이다. 미국통계학회지에 실린 “Graphical Perception"이라는 글에서, 두 사람은 사람이 그래프에서 값을 읽어낼 때 쓰는 기초 지각 과제(elementary perceptual tasks)를 정확도 순으로 늘어놓았다. 순서는 이렇다.

1. 공통 척도 위의 위치 (position along a common scale)
2. 정렬되지 않은 척도 위의 위치 (nonaligned scales)
3. 길이, 방향, 각도 (length, direction, angle)
4. 넓이 (area)
5. 부피, 곡률 (volume, curvature)
6. 명암, 색농도 (shading, color saturation)

위로 갈수록 사람이 정확히 읽고, 아래로 갈수록 부정확하게 읽는다. 여기서 한 가지 정직하게 짚을 게 있다. 원래 1984년 논문은 길이와 각도를 3번 같은 칸에 묶어뒀다. 길이가 각도보다 낫다는 분리는 그 뒤 잭 맥킨레이(Jack Mackinlay)가 1986년에 정량 데이터용 인코딩을 위치 > 길이 > 각도 > 기울기 > 넓이 > 색농도 순으로 이론적으로 확장하면서 굳어진 정리다. 그러니 위치가 최상위, 넓이·색농도가 최하위라는 큰 틀은 클리블랜드–맥길에서 왔고, 길이를 각도 위에 세우는 세밀한 순서는 맥킨레이의 확장에 기댄 것으로 보는 게 정확하다.

이 위계가 실무에 주는 함의는 단순하다. 비교가 목적이라면 위쪽 채널을 써야 한다. 값 하나하나를 정확히 읽고 서로 견줘야 하는데 아래쪽 채널을 고르면, 독자는 어림짐작으로 그래프를 읽게 된다.

파이차트가 지는 이유

이제 도입부의 도넛으로 돌아가자. 파이차트와 도넛차트는 값을 각도로 인코딩한다. 조각이 벌어진 각이 곧 값이다. 위계에서 각도는 3번, 그것도 넓이까지 섞여 들어가는 하위 채널이다. 반면 막대차트는 값을 길이로, 그것도 같은 바닥선에서 시작하는 공통 척도 위의 길이로 인코딩한다. 위계 최상위에 가깝다.

숫자로 대보자. 파이에서 23%는 전체 360도의 23%, 곧 약 82.8도를 차지한다. 27%는 약 97.2도다. 두 조각의 각도 차이는 14.4도다.

23% → 360 × 0.23 = 82.8도
27% → 360 × 0.27 = 97.2도
차이 = 14.4도

14.4도짜리 각도 차이를, 그것도 두 조각이 서로 다른 방향으로 기울어 붙어 있는 상태에서 눈으로 잡아내는 건 사람에게 어려운 과제다. 하물며 조각이 세 개, 네 개로 늘어 각자 다른 시작 각도에서 벌어지면, 어느 게 더 큰지조차 헷갈린다. 같은 값을 막대로 옮기면 이야기가 달라진다. 23짜리 막대와 27짜리 막대는 같은 바닥에서 위로 뻗고, 그 끝의 높이 차이를 공통 척도 위의 위치로 곧장 비교할 수 있다. 4의 차이가 눈에 바로 들어온다.

말로만 하면 안 와닿으니 같은 두 값을 두 방식으로 그려보자. 먼저 파이다.

같은 값을 막대로 옮기면 이렇게 된다.

두 그림은 완전히 같은 숫자를 담았다. 다른 건 인코딩 채널뿐이다. 그래서 여러 항목을 서로 비교하는 게 목적이라면 파이는 거의 항상 막대보다 불리하다. 파이가 그나마 버티는 자리는 부분과 전체의 관계를 대충 보여줄 때, 그것도 조각이 두세 개로 적을 때다. 절반을 넘겼는지 아닌지 같은 굵은 판단에는 각도도 충분히 쓸 만하다. 다만 이건 실증 상수라기보다 지각 위계에서 끌어낸 실무 감각에 가깝다. 조각이 몇 개를 넘으면 무조건 안 된다는 마법의 경계선은 없다. 다섯 조각짜리 파이가 라벨과 함께 잘 작동하는 경우도 있다. 요점은 비교 정확도가 목적의 핵심이 되는 순간, 각도라는 채널은 팔아넘기기 아까운 정확도를 이미 깎아먹고 시작한다는 것이다.

정직하게 거짓말하는 세 가지 방법

인코딩 위계를 알면, 흔한 차트 왜곡들이 왜 왜곡인지가 한 겹 더 선명해진다. 세 가지를 보자. 셋 다 값 자체는 조작하지 않는다. 값을 시각으로 옮기는 규칙만 살짝 비틀 뿐이다.

잘린 축

첫째는 y축을 0에서 시작하지 않고 잘라내는 것이다. 매출이 100에서 104로 올랐다고 하자. 실제 증가는 4%다. 그런데 y축을 98부터 시작해 그리면, 100짜리 막대는 아주 짧고 104짜리 막대는 그 두 배가 넘게 길어 보인다. 4% 증가가 100% 넘는 성장처럼 그려진다.

이게 특히 막대차트에서 치명적인 이유는, 막대가 값을 길이로 인코딩하기 때문이다. 길이 인코딩의 약속은 막대 길이가 값에 비례한다는 것이다. 그 약속이 성립하려면 길이 0이 값 0에 대응해야 한다. 바닥을 98로 잘라내는 순간 이 비례가 깨지고, 독자의 눈은 길이 비율을 값 비율로 읽는데 그 두 비율이 어긋나버린다. 그래서 막대차트는 0에서 시작해야 한다. 이건 취향이 아니라 인코딩 자체의 전제 조건이다.

같은 100과 104를 두 축으로 그려보면 차이가 분명하다. 먼저 바닥을 98로 잘라낸 쪽이다.

같은 값을 0에서 시작하는 축에 그리면 이렇게 된다.

여기서 흔히 빠지는 반대 함정이 있다. 그럼 모든 차트를 0에서 시작하면 되지 않느냐는 것이다. 아니다. 라인차트는 값을 길이가 아니라 위치로, 그리고 그 위치의 오르내림으로 인코딩한다. 라인차트의 관심사는 막대의 절대 길이가 아니라 점들이 이루는 추세다. 체온을 생각해보자. 36도에서 39도로 오른 하루치 체온 그래프를, 굳이 0도부터 그리면 3도짜리 위험한 변화가 바닥에 눌린 밋밋한 직선이 된다. 여기선 0을 강제하는 게 오히려 왜곡이다. 그러니 규칙은 채널에 따라 갈린다. 길이를 쓰는 막대는 0에서, 위치와 추세를 쓰는 라인은 맥락이 요구하는 범위에서. 무엇을 인코딩했는지가 어디서 시작해야 하는지를 정한다.

이중 축

둘째는 하나의 그래프에 y축을 둘 놓는 것이다. 왼쪽 축엔 매출, 오른쪽 축엔 CS 문의 건수를 걸고 두 선을 겹쳐 그린다. 그런데 두 축의 스케일은 만드는 사람이 마음대로 정한다. 오른쪽 축의 최솟값과 최댓값을 어떻게 잡느냐에 따라, 두 선을 딱 붙여 나란히 움직이게 만들 수도 있고 정반대로 엇갈리게 만들 수도 있다.

문제는 이게 위치 인코딩의 신뢰를 악용한다는 데 있다. 라인차트에서 우리는 두 선이 같이 오르내리면 둘이 연관됐다고 읽는다. 그 읽기는 두 선이 같은 척도 위에 있을 때만 정당하다. 이중 축은 서로 다른 척도의 두 선을 한 평면에 겹쳐놓고, 겉보기의 나란함을 상관관계처럼 보이게 한다. 축 스케일이라는 임의의 손잡이 하나로 있지도 않은 상관을 만들어내는 것이다.

디자이너: “매출이랑 문의량이 완전히 같이 움직이네요. 문의가 늘면 매출도 느는 건가?” 데이터 담당: “오른쪽 축을 3천에서 5천으로 잡아서 그래. 2천에서 8천으로 바꾸면 두 선이 반대로 벌어져.”

두 계열을 정말 비교하고 싶다면, 각 계열을 자기 기준선 대비 변화율로 바꿔 같은 척도에 올리거나, 아예 위아래로 나란한 두 개의 차트로 쪼개는 편이 정직하다.

버블차트의 제곱 함정

셋째는 값을 동그라미의 크기로 인코딩할 때 벌어진다. 여기서 사람이 자주 저지르는 실수는, 값에 지름을 비례시키는 것이다. 값이 두 배면 지름을 두 배로 키운다. 언뜻 자연스러워 보인다.

그런데 사람 눈이 원에서 읽는 크기는 지름이 아니라 넓이다. 넓이는 반지름의 제곱에 비례한다. 지름을 두 배로 키우면 넓이는 네 배가 된다. 값은 두 배인데 그림은 네 배로 커 보인다는 뜻이다.

값이 2배 → 지름 2배로 키움
넓이 = π r² → 반지름 2배면 넓이는 4배
결과: 2배짜리 값이 4배로 부풀어 보임

눈으로 보면 이렇다. 왼쪽이 값 10, 오른쪽이 값 20인데 지름만 두 배로 키운 원이다.

그래서 넓이로 크기를 인코딩할 때는 넓이를 값에 비례시켜야 하고, 그러려면 지름은 값의 제곱근에 비례시켜야 한다. 이걸 놓친 버블차트는 큰 값을 실제보다 훨씬 크게 과장한다. 게다가 넓이 자체가 이미 위계 4번, 사람이 부정확하게 읽는 채널이다. 지름·넓이를 헷갈리는 실수까지 얹히면 두 겹으로 틀린다. 정직하게 제곱근을 취해 그려도 독자는 두 원의 넓이 비를 정확히 못 읽는다는 사실은 그대로 남는다.

차트도 UI다

여기까지 오면 이 블로그의 관점이 드러난다. 차트는 통계의 산출물이기 전에 화면 위의 UI다. 그리고 UI를 만드는 사람은 디자이너다. 대시보드를 예쁘게 만들라는 요구를 받은 디자이너가 파이와 도넛과 3D 입체 그래프를 집어 드는 순간, 그는 미학을 위해 지각 정확도를 팔아넘기고 있는 것이다.

이건 진짜 트레이드오프다. 원과 곡선은 직사각형 막대보다 부드럽고, 도넛 가운데 뚫린 구멍엔 큰 숫자를 넣기 좋고, 3D는 화려하다. 심미적으로 이길 때가 있다. 문제는 그 심미가 정확히 위계의 아래쪽 채널에서 나온다는 점이다. 각도, 넓이, 부피, 원근. 예뻐 보이게 만드는 바로 그 요소들이 사람이 못 읽는 요소들이다. 3D 막대차트는 원근 때문에 뒤쪽 막대가 실제보다 작아 보이고, 입체 파이는 앞쪽 조각이 두툼해 보이는 착시까지 얹는다. 화려함의 대가로 값을 왜곡한다.

디자이너: “밋밋한 막대만 늘어놓으니까 대시보드가 심심해 보여요.” 데이터 담당: “그 심심함이 정확함이야. 화려하게 만들면 읽는 사람이 값을 틀리게 가져가.”

그래서 나는 대시보드에서 파이·도넛·3D를 고르는 결정을, 색이나 여백을 고르는 결정과 같은 급으로 두면 안 된다고 본다. 후자는 취향의 영역이지만, 전자는 독자가 값을 얼마나 정확히 가져갈지를 정하는 결정이다. 예쁨과 정직이 부딪칠 때, 데이터를 보여주는 화면에서는 정직이 이겨야 한다.

실무 처방

정리하면 처방은 위계에서 그대로 떨어진다.

비교가 목적이면 위쪽 채널을 쓴다. 항목별 값을 서로 견줘야 하면 막대(길이)나 점(위치)을 먼저 고른다. 순위를 보여주려면 정렬된 막대 하나면 충분하다. 파이는 부분과 전체를 굵게 보여줄 때, 조각이 두세 개일 때로 아껴 쓴다. 이건 표준이라기보다 위계에서 끌어낸 이 블로그의 기본값이다.

축은 채널에 맞춰 정한다. 길이를 쓰는 막대는 반드시 0에서 시작한다. 위치와 추세를 쓰는 라인은 데이터가 사는 범위에서 시작하되, 잘라낸 축이 변화를 과장하지 않는지 확인한다. 이중 축은 되도록 피하고, 두 계열을 비교하려면 같은 척도로 정규화하거나 차트를 쪼갠다.

크기로 값을 인코딩할 땐 넓이를 값에 비례시킨다. 곧 지름은 값의 제곱근으로. 그리고 애초에 넓이는 부정확한 채널이라는 걸 기억하고, 정밀한 비교가 필요하면 크기 인코딩 자체를 버리고 위치나 길이로 옮긴다.

색은 순서 데이터에 함부로 쓰지 않는다. 색농도, 곧 색의 진하기는 위계 최하위 채널이다. 낮음·중간·높음 같은 순서 있는 값을 색의 진하기 단계로만 구분하면, 독자는 어느 칸이 더 진한지조차 확신하지 못한다. 순서가 중요하면 위치로 옮기거나, 색을 쓰더라도 명도 단계를 크게 벌려 눈이 구분할 여지를 준다. 히트맵처럼 색농도가 불가피한 자리에서도, 정확한 값 비교까지 색에 맡기지는 않는다.

마지막으로, 값이 정확한지와 그림이 정직한지는 다른 질문이라는 걸 매번 떠올린다. 데이터가 맞다고 차트가 정직한 게 아니다. 정직한 차트는 독자가 눈으로 되읽었을 때 원래 값에 가장 가깝게 도착하는 차트다. 그 도착의 정확도를 정하는 게 인코딩 채널의 선택이고, 그 선택에는 40년 묵은 지각 실험이 매겨놓은 순서가 있다.

수학적으로 완벽한 값이 눈에는 어긋나 보이는 현상, 그리고 디자이너가 그 간극을 손으로 보정하는 이야기는 시각보정: 디자인이 숫자를 배신할 때에서 반대 방향으로 다뤘다. 거기선 눈을 속이지 않으려고 값을 일부러 어긋나게 그렸다면, 여기선 눈을 속이지 않으려고 채널을 골랐다. 둘 다 결국 같은 질문이다. 사람 눈은 무엇을 정확히 읽는가.