요약
어지러운 막대그래프를 하나씩 지우며 터프티의 데이터-잉크 비율이 무엇을 재고 무엇을 놓치는지 보여 줍니다.
사이언스UX 랩스의 아디티아 마나발란, 마이클 라이, 마이크 모리슨이 만든 대화형 안내서입니다. 데이터-잉크 비율(차트 전체 잉크 가운데 데이터를 나타내는 잉크의 몫)을 픽셀 단위로 세어, 장식을 지울 때마다 숫자가 어떻게 바뀌는지 보여 줍니다.
왜 중요한가
- 비율은 남은 잉크만 비교하므로, 제목과 이름표를 지워 정보를 잃어도 오히려 올라갑니다.
- 그래서 비율을 차트의 절대 점수로 보지 말고, 같은 차트의 여러 버전을 비교하는 데 쓰자고 제안합니다.
핵심 내용
- 기본 장식을 모두 켠 차트는 3.6%에서 시작해, 정리를 마치면 9.5%로 2.7배가 됩니다.
- 막대는 길이로 값을 나타내므로, 폭은 같은 값을 되풀이하는 반복 데이터 잉크로 셉니다.
- 막대가 너무 가늘면 비교가 어려워, 자리의 절반에서 3분의 2를 채우는 폭을 권합니다.
- 바탕 종이의 색은 잉크가 아니지만, 그 위에 칠한 옅은 상자는 비율을 12%에서 2.8%로 떨어뜨립니다.
- 글자 크기처럼 비율로 정할 수 없는 부분은 읽기 쉬운 쪽을 따르라며 11개 점검 목록으로 마무리합니다.
HN 반응
- 막대를 가늘게 하거나 상자를 없애면 오히려 읽기 어려워진다며, 잉크 양보다 시각적 복잡도를 줄여야 한다는 반론이 많았습니다.
- 터프티의 책이 지각 연구 없이 미적 판단에 기댄다는 비판과 함께, 이 글이 반복적이고 LLM으로 쓴 것 같다는 지적도 나왔습니다.
막대 위치는 그대로 두고 폭만 좁히면 막대그래프가 대체로 좋아진다는 생각은 꽤 어리석다고 봅니다. 글에서도 지나치면 곤란하다고 말하긴 하지만, 그 틀 자체가 잘못됐다고 생각합니다. 문제는 잉크를 적게 쓰는 게 좋은 일인데 너무 멀리 가면 시각적 명료성과 충돌한다는 것이 아닙니다. 목표는 언제나 시각적 명료성입니다. 더 명료한 디자인이 데이터 아닌 잉크를 더 쓸 때도 있고 덜 쓸 때도 있습니다. 너무 번잡한 디자인이 많아서 "데이터 아닌 잉크를 줄이는 것"이 대체로 좋을 뿐, 항상 그런 것은 아닙니다.
터프티의 "데이터 잉크 비율(data-ink ratio)"은 꽤 괜찮은 어림법칙이지만, 세어야 할 대상을 "잉크의 양"이 아니라 잉크의 공간적 변화를 재는 무언가로 바꾸면 실제 시각적 명료성에 더 잘 들어맞을 겁니다. 한 가지 색으로 칠해진 면보다 색이 바뀌는 경계가 훨씬 더 잡음처럼 느껴지니까요. 다만 "데이터 잉크 비율"은 "색 기울기 노름(norm of gradient)의 적분 비율"보다 말하기도 쉽고 읽기도 쉽습니다.
또 이런 종류의 그래프는 격자선이 아예 없는 것보다 아주 옅은 격자선이 있는 편이 낫다고 생각합니다. 터프티는 동의하지 않겠지만요.
덧붙이면, 터프티의 책에서 "데이터 잉크"를 다루는 절 바로 앞에는 플레이페어가 그린 그래프가 실려 있습니다. 한 나라의 무역수지가 시간에 따라 어떻게 변했는지 보여주는 그래프이고, 터프티는 이것을 좋은 정보 그래픽의 사례로 제시합니다. 원하시면 https://en.wikipedia.org/wiki/William_Playfair#/media/File:Playfair_TimeSeries-2.png 에서 볼 수 있습니다. 이 그래프는 무역수지가 어느 쪽으로 기우는지 음영으로 표시하는데, 이 정보는 음영의 경계를 이루는 곡선과 완전히 중복됩니다. 그렇다고 이 "중복된" 잉크를 없앤다고 그래프가 나아지지는 전혀 않을 겁니다. 그런데 링크된 페이지가 해석한 터프티의 원칙대로라면 그렇게 하는 것이 데이터 잉크 비율을 크게 개선하는 일이 됩니다.
그 아이디어를 한쪽 방향으로만 밀어붙인다면 저도 꽤 어리석다고 생각합니다. 다만 이 시각화의 취지는 완벽한 값을 찾는 것이 아니라, 균형을 찾으면서 데이터 잉크 비율을 최적화하자는 것입니다. 링크를 따라가시면 이 문제를 다룬 제 글이 있습니다. https://scienceux.org/articles/data-ink-ideal-vs-minimal
말씀하신 요점은 모두 타당하고, 짚어 주셔서 다행입니다. 사람들이 스스로 생각해 보지 않고 이 원칙을 맹목적으로 따르는 건 저도 원치 않으니까요.
'색 기울기 노름의 적분 비율'은 아직 깊이 생각해 보지 못했습니다(단순하게 시작해서 쌓아 올리는 편이 쉬워서요). 괜찮으시다면 좀 더 자세히 설명해 주셨으면 합니다.
제 생각에 막대를 좁히는 건 데이터 아닌 잉크의 비율을 줄이는 일이 아니고, 취지에도 어긋납니다. 막대가 곧 데이터입니다. 그러니 최대한 잘 보여야 합니다. 강조하고 싶은 텍스트를 "메시지 아닌 잉크의 비율을 줄이겠다"고 가늘게 만드는 게 아니라 볼드체로(더 굵게) 쓰는 것과 같은 이치입니다.
막대 폭은 실제로는 절충점이 있습니다. 막대를 굵게 하되, 너무 굵거나 너무 붙어 있어서 가독성을 해치지는 않게 하는 것입니다.
맞아요. 이 경우에도 절충점이 답입니다. 텍스트도 마찬가지예요. 전부 굵은 대문자로 강조해 놓으면 결국 메시지에서 강조된 건 아무것도 없는 셈이 되니까요.
저는 데이터 잉크 비율이라는 지표를 늘 싫어했어요. 이건 완전히 틀린 지표예요.
증거는 The Visual Display of Quantitative Information의 예시 중 하나에 그대로 나와 있어요.
그는 산점도의 축을 각 방향의 데이터 범위까지만 남기고 줄인 예를 보여줘요. 데이터 잉크 면에서는 일석이조예요! 정보는 더 많아지고(데이터의 범위가 한눈에 보이니까요), 그 정보가 아무리 하찮아도 상관없어요. 어차피 잉크도 줄었으니까요.
그런데 실제로는 당연히 끔찍해 보여요. 그렇지 않다고 생각하려면 지표 생각에 너무 몰두한 나머지 자기 눈을 무시해야 해요. 축이 더는 모서리에서 만나지 않으니 전체가 하나로 응집된 무언가가 아니라 시각적 파편들의 수프처럼 보여요.
이런 그래프 여러 개가 한 페이지에 나란히 있다고 상상해 보세요. 잠깐이라도 하나에 시선을 모으기가 훨씬 힘들 거예요. 서로 다른 하위 그림들의 파편이 하나의 커다란 시각적 수프가 될 테니까요.
해법은 그래프마다 상자를 두르는 거예요(굵고 새까만 상자일 필요는 없고, 서로 다른 것들을 시각적으로 구분해 줄 무언가면 돼요). 하지만 물론 터프티는 상자를 끔찍이 싫어해요. 정보량 없이 잉크만 늘리니까요.
그냥 나쁜 과학이에요. 우리 뇌는 검은 픽셀을 하나씩 처리하면서 픽셀마다 정신적 에너지를 쓰지 않아요. 시신경 속 CNN이 미리 잔뜩 가공해 준 시각적 파편들을 전두엽에 닿기도 전에 파편 단위로 받아들여요. 실제로 최소화해야 하는 건 시각적 복잡도예요. 그걸 줄이는 데는 (정보와 상관없는) 잉크를 더하는 게 도움이 될 때가 많아요.
첫 번째 절의 문제는 정답을 알고 있었는데도, 문장이 하도 끔찍해서 완전히 헷갈렸어요.
"음영 배경을 지우면, 다섯 개의 숫자를 보여주는 잉크의 비중이 올라갈까요, 내려갈까요, 그대로일까요?"
이 프로젝트의 취지를 살려서 저한테는 이렇게 물어보세요.
"음영 배경을 없애면, 이제 차트에 남은 잉크의 양이 전보다 더 쓸모 있나요, 덜 쓸모 있나요, 똑같나요?"
아이고... 이 문장도 쓰기가 어려웠네요.
게다가 같은 질문에 4절에서는 정반대로 답해요. 색 배경을 넣어도 데이터/잉크 비율에는 영향이 없다고 하거든요.
... 어쩌고저쩌고 지표와 목표 얘기가 되겠네요. 데이터/잉크는 염두에 둘 만한 유용한 요소이긴 하지만, 데이터를 전달하는 디자인을 고를 때 보는 여러 요소 중 하나일 뿐이에요.
... 어쩌고저쩌고 LLM이 쓴 문서의 문제죠.
게다가 주제가 다른 사람에게 신중하고 명확하게 전달하는 것인데, 그 글이 이러니 더 답답하고 위선적이에요.
글에도 비슷한 지표가 있어야 해요, 정보 밀도 같은 거요. 이 글은 너무 반복적이라 계속 읽기가 힘들어요. 요점은 이미 첫 번째 절에 다 들어 있었거든요. 나머지는 같은 말을 계속 되풀이할 뿐이에요. 슬롭(slop) 밀도가 차트를 뚫고 나간 게 아쉽네요.
https://xkcd.com/688/ 이 떠오르네요.
이건 확대 버튼이 있었으면 멋졌겠네요 :-)
하하! 맞아요. 제가 제일 좋아하는 것 중 하나예요.
흥미롭네요. 다만 차트에서는 잉크의 양을 줄이면 가독성이 떨어지기도 합니다.
아주 좋은 지적이고, 링크된 글에서도 잘 다루고 있습니다.
저는 이 글을 쓰면서, 비판받을 만한 예시까지 들어 가며 몇몇 요점을 일일이 설명할 필요는 없겠다고 생각했습니다. 하지만 글을 읽은 분들이 그런 설명을 요청하셨고, 그래서 최선을 다해 몇 가지를 예시로 보여 드렸습니다. 다만 모든 사람을 만족시키기는 어렵습니다. 그래도 지금 마음에 들지 않는 자리를 맴돌기보다는, 명료함을 향해 나아가기 위해서라도 요점을 밝히는 쪽을 택하겠습니다.
그 페이지는 데이터는 거의 없는데 잉크만 많이 썼어요. 게다가 좀 틀리기도 했고요. 축 눈금과 라벨이 측정값을 직접 반영하지 않는다는 이유만으로 데이터 잉크가 전혀 아니라고 주장할 수는 없죠. 그것들도 차트를 읽는 데 아주 중요한 데이터거든요. 터프티가 다르게 말하더라도 마찬가지고요.
그나저나 터프티조차 조언은 그것들을 완전히 없애라는 게 아니라 회색으로 낮추라는 거였어요.
(터프티의 조언도 따져 볼 수 있어요. 이 페이지의 다른 댓글들에도 그가 미적 감각은 훌륭했지만 조언이 이성이나 실제 가독성 연구에 근거하지 않아서, 그가 고른 예시에만 들어맞는다는 얘기가 많네요.)
여기서는 데이터 아닌 잉크(non-data-ink)와 중복된 데이터 잉크(redundant data-ink)를 구분하고 있습니다. 데이터 아닌 잉크는 대개 알아보기 쉽지만, 중복된 데이터 잉크는 우리가 정보를 어떻게 보고 처리하느냐에 따라 다소 주관적입니다. 그래도 차트를 이해하고 해석하는 데 필요한 정보량이 그것을 없애도 변하지 않는다면 중복이라고 주장할 수 있습니다. 한편 사람마다 해석하는 방식이 다르니, 같은 정보를 여러 방식으로 전하는 것도 쓸모가 있다는 반론도 가능합니다.
불필요한 논쟁을 일으키려는 것이 아니라, 이 지표를 단순한 숫자로만 보지 않고 그 개념을 어떻게 적용할 수 있는지까지 이해하도록 돕는 것이 의도입니다.
더 중요한 점은, 존재하지도 않는 완벽한 값을 쫓는 것이 아니라 독자에 맞춰 특정한 맥락 안에서 최적화하는 것이 핵심이라는 것입니다.
이건 좋은 예시가 아니에요. 몇 개 안 되는 데이터 포인트를 보여주려고 차트를 쓰고 있으니까요. 데이터/잉크 비율의 핵심은 보여주는 데이터의 양을 촘촘하게 늘려서, 쓰는 잉크가 추가적인 차원이나 통계량을 보여주게 만드는 거예요. 예를 들어 2차원 플롯을 쓰거나, 축을 상자그림(box plot)에 해당하는 것으로 바꾸거나, 다른 관계를 담는 식으로요.
저는 개인적으로 10~12% 범위가 더 좋더라고요.
터프티의 데이터 잉크 비율 흐려 놓기(Mistifying)(슬롭 대포로 곱게 안개(mist)가 되도록 쏴서).
이 슬롭은 뭐죠?
"데이터 대 잉크 비율은 데이터와 잉크의 비율입니다. 데이터 대 잉크 비율은 잉크의 양을 줄이면 높일 수 있습니다. 데이터를 그대로 두고 잉크를 줄이면 데이터 대 잉크 비율이 올라갑니다. 여기서는 도표의 잉크 양을 줄였고, 데이터 대 잉크 비율이 올라간 것을 쉽게 확인할 수 있습니다. 데이터 대 잉크 비율은 높여야 합니다. 높이지 말아야 할 때만 빼고요."
저는 글 어디에서도 그 문장을 못 봤어요.
글을 패러디하신 것 같은데, 따옴표로 묶으면 오해를 낳아요.
글을 패러디한 거 맞아요. 서로 의견이 다르다는 걸로 하죠!
그런 패러디를 달리 어떻게 표기하나요?
지어낸 말이라고 알려 주는 말을 인용문 앞에 붙이거나, 아니면 따옴표를 쓰지 않으면 돼요. 예를 들어 "이 글은 기본적으로 데이터 대 잉크 비율이 데이터와 잉크의 비율이라는 말만 하고 있다"처럼요.
기울임꼴도 좋은 방법이에요. 읽기엔 짜증스럽지만, 그런 문체를 패러디할 때는 오히려 그게 도움이 된다고 생각해요.
연한 회색 가로선이 두 개 있는 예시가 틀린 거라고 하는데, 저는 막대 높이를 비교하기에 그게 단연 제일 쉬웠어요. 그게 이 차트의 존재 이유 전부잖아요, 안 그래요?
말씀하신 점은 데이터 시각화 디자인의 모범 사례를 따지다 보면 데이터 잉크 최적화가 데이터 잉크라는 개념의 어감만큼 단순하지 않다는 것을 보여준다고 생각합니다.
막대 높이를 비교하게 하려면 회색 가로선을 남겨 두어도 분명 괜찮습니다. 하지만 막대에 값을 직접 표시하면 세로축에서 개별 막대까지 시선을 훑어 가며 머릿속으로 처리할 필요가 없어집니다. 게다가 차트에 그려지는 값을 나타내지 않는 세로축 라벨을 없애고 범주를 값 순서로 정렬하면, 그 과정에서 한 단계를 더 줄일 수 있습니다.
요점은 데이터 잉크 비율을 어느 방향으로든 최적화해 볼 수는 있지만, 맹목적으로 높이거나 낮추는 것을 목표로 삼아서는 안 된다는 것입니다. 실제 비율 값(정보 밀도와 더 관련이 깊습니다)은 대개 거의 달라지지 않고, 명료성을 높이고 어수선함을 줄이려면 다른 디자인 기법이 필요합니다.
터프티의 책("The Visual Display of Quantitative Information")을 샀을 때 좋다는 얘기를 하도 많이 들어서 기대가 컸는데, 주장에 제대로 된 근거가 없어서 실망했던 기억이 납니다. "데이터 잉크"가 대표적인 예입니다. 너무 어수선한 그래프가 많다는 일반적인 개념은 받아들일 수 있습니다. 하지만 "데이터 잉크"의 비율을 수치로 따지고 그것을 최적화하는 게 이 문제를 다루는 최선의 방법이라고 볼 이유는 딱히 없습니다. 책의 상당 부분은 주관적인 미적 판단을 일종의 객관적 진리처럼 포장하려는 것에 불과합니다.
그래프 서식에 대해 믿을 만한 지침을 정말 원한다면, 예를 들어 어떤 방식이 특정 정보의 이해나 기억에 더 낫다는 것을 실제로 보여주는 심리학 연구에 근거해야 할 겁니다. 하지만 제가 보기에 터프티의 책은 그런 시도를 전혀 하지 않습니다. (그나 그의 연구를 이어받은 사람들이 나중에 했을 수도 있겠지만요?)
'최적화하려는 것'에 대해 하신 말씀이 정확히 맞다고 생각합니다. 너무 많은 사람이 지표를 기준으로 디자인했을 때의 영향을 제대로 이해하지 못한 채 지표를 '최대화'하거나 '최소화'하려고 합니다. 하지만 지표는 우리 디자인 결정이 어떤 영향을 주는지 파악하고 어떤 선택이 왜 타당한지 밝히는 데 쓸 수 있다고 생각합니다. 최고의 디자이너도 언제 규칙을 깨는 것이 맞는지 압니다(그렇게 할 만한 좋은 이유가 흔히 있으니까요).
데이터 잉크 비율을 디자인에 어떻게 적용할지에 관한 실증적 근거가 부족하다는 말씀도 맞습니다. 제가 제대로 검증하지도 않고 주장만 늘어놓은 기존 연구들을 하나하나 걸러 보고 있는 것도 그래서입니다. 더 나은 연구를 통해 이 문제를 더 잘 이해할 수 있기를 바랍니다.