5.10 데이터 시각화 디자인
개요와 동기
차트는 잉크로 만든 논증입니다. 데이터를 그릴 때 여러분은 독자가 가장 먼저 알아챌 것, 비교할 것, 다음으로 넘어가기 전 2초 동안 도달할 결론을 고르고 있습니다. 잘하면 어려운 질문이 저절로 답해집니다. 추세가 분명하고, 이상치가 튀어나오고, 두 집단이 확연히 다릅니다. 못하면 같은 데이터가 오도하거나, 혼란스럽게 하거나, 그저 지루하게 만들고, 그것이 알려 주어야 했던 결정은 느낌으로 내려집니다. 데이터 시각화는 숫자를 그림으로 바꿔 사람들이 숫자의 의미를 볼 수 있게 하는 디자인 기예입니다.
이 장은 그 기예에 관한 것입니다. 올바른 차트를 고르고, 데이터를 정직하게 인코딩하고, 눈이 가야 할 곳에 닿도록 색과 레이아웃을 쓰고, 전체를 접근 가능하게 유지하는 것입니다. 차트는 인터페이스이고 5부의 나머지에서 모든 것을 물려받으므로 이 장은 5부 안에 있습니다. 5.1장의 사용자 경험(UX) 기초 위에 서고, 5.2장의 디자인 시스템에서 토큰과 컴포넌트를 빌려 오며, 5.3장의 접근성 의무를 충족해야 하고, 5.4장의 콘텐츠 디자인의 평이하고 목적 있는 목소리로 말합니다. 의도적으로 배관은 다루지 않습니다. 분석과 비즈니스 인텔리전스(7.3장)의 데이터 파이프라인, 웨어하우스, 보고 도구는 다른 주제이고, 7.5장의 더 넓은 의사결정 과학과 데이터 문화도 마찬가지입니다. 여기서는 데이터가 어디서 오든 그림을 좋게 만드는 법을 배웁니다.
큰 팀에게 판돈은 조율과 신뢰입니다. 모든 스쿼드가 자기 차트를 스타일링하면 회사에는 축, 색, 반올림이 각기 다른 “시간에 따른 매출”의 방언이 쉰 가지가 생기고, 경영진은 모두를 불신하게 됩니다. 기업 환경에서 오도하는 대시보드는 실제 예산을 잘못된 방향으로 움직입니다. 정부에서 공개 차트는 시민과의 소통 행위이며 10.16장의 이해관계자 커뮤니케이션의 문제입니다. 공중 보건 그래픽에서 잘린 축은 수백만 명을 공황에 빠뜨리거나 거짓으로 안심시킬 수 있고, 접근성은 선호가 아니라 법적 의무입니다. 좋은 시각화 디자인은 데이터가 신뢰받을 자격을 얻는 방법입니다.
핵심 원칙
- 독자가 가진 질문에서 시작한 다음 그에 답하는 차트를 고르십시오.
- 시각적 인코딩을 데이터 유형에 맞추십시오. 정밀한 비교에는 위치, 범주에는 색상(hue)입니다.
- 데이터를 나르는 잉크의 비율을 극대화하십시오. 아무것도 나르지 않는 장식은 지우십시오.
- 눈이 먼저 요점에 닿도록 전주의 속성을 의도적으로 쓰십시오.
- 데이터의 역할(순차, 발산, 범주)에 따라 팔레트를 고르고 색맹에도 안전하게 하십시오.
- 색에만 의존하지 마십시오. 텍스트, 구조, 표 대체 수단을 제공하십시오.
- 척도에 대해 진실을 말하십시오. 잘린 축, 오도하는 면적, 불필요한 이중 축은 안 됩니다.
- 통찰에 주석을 다십시오. 독자가 찾아 헤매게 하지 마십시오.
권장 사항
질문에서 시작한 다음 차트를 고른다
모든 좋은 차트는 데이터셋이 아니라 질문에서 시작합니다. 차트 유형에 손을 뻗기 전에 독자의 질문을 한 문장으로 이름 붙이고 과업에 맞추십시오. 비교(“어느 쪽이 더 큰가?“)에는 길이가 공통 기준선에 놓여 눈이 힘들이지 않고 순위를 매기는 막대 차트가 맞습니다. 시간에 따른 추세(“어디로 가고 있는가?“)에는 이어진 선이 연속적 변화로 읽히므로 선 차트가 맞습니다. 분포(“어떻게 퍼져 있는가?“)에는 모양, 중심, 이상치를 보여 주는 히스토그램이나 상자 그림이 맞습니다. 부분 대 전체(“각 조각이 차지하는 비중은?“)는 사람이 각도보다 길이를 훨씬 정확하게 비교하므로 대개 원 차트보다 누적 막대가 더 잘 맞고, 원 차트는 분할이 이야기의 전부인 두세 조각에 남겨 두십시오. 관계(“이 둘이 함께 움직이는가?“)에는 상관과 군집을 한눈에 드러내는 유일한 차트인 산점도가 맞습니다.
규율은 질문이 차트를 고르게 하고 절대 그 반대는 아니라는 것입니다. 인상적으로 보여서 고른 차트 유형(3D 분리 원 차트, 레이더 차트, 구멍에 숫자가 든 도넛)은 독자가 아니라 디자이너의 이익을 위한 결정입니다. 표가 질문에 더 빨리 답할 때(네 줄의 정확한 수치가 필요한 독자는 차트가 전혀 필요 없습니다) 표를 쓰십시오. 차트가 정당화되는 것은 그림이 격자 위의 숫자가 감출 패턴을 드러낼 때뿐입니다.
시각적 인코딩을 데이터에 맞춘다
차트는 데이터를 시각적 속성에 대응시켜 동작하는데, 그 속성들은 동등하지 않습니다. 수십 년의 지각 연구가 순위를 매겼습니다. 공통 척도 위의 위치는 인간이 가진 가장 정확한 채널이며, 그래서 공유 축 위의 막대와 점이 비교에서 다른 모든 것을 이깁니다. 길이가 그다음이고, 각도와 기울기, 면적, 색 강도가 이어지며, 마지막이 색상(hue)으로, 양을 판단하는 데는 거의 쓸모없지만 범주를 라벨링하는 데는 훌륭합니다. 가장 정밀한 채널을 가장 중요한 양에 쓰십시오.
채널을 데이터 유형에도 맞추십시오. 정량 데이터(횟수, 금액, 기간)는 위치, 길이, 또는 순차 색 램프에 속합니다. 순서형 데이터(작음, 중간, 큼)는 순서가 있는 크기나 밝음에서 어두움으로의 램프를 쓸 수 있습니다. 범주형 데이터(지역, 제품군, 정당)는 색상이나 모양에 속하며, 한 범주가 다른 범주보다 “많다”고 암시하는 크기에는 절대 쓰지 마십시오. 전형적인 오류는 범주를 무지개로 인코딩해 독자의 눈이 데이터에 없는 순서를 지어내게 하는 것입니다. 눈이 양을 읽는 곳에 양을 인코딩하고, 눈이 정체성을 읽는 곳에 정체성을 인코딩하십시오.
그래픽의 탁월함을 추구한다: 데이터 잉크를 극대화한다
에드워드 터프티는 시각화에 가장 분명한 디자인 윤리를 주었고 내면화할 가치가 있습니다. 그의 핵심 척도는 데이터 잉크 비율입니다. 페이지의 모든 잉크(또는 픽셀) 중 실제로 데이터를 인코딩하는 비율은 얼마인가? 나머지 모두(굵은 격자선, 테두리 상자, 그림자, 배경 채움, 중복된 범례, 장식용 3D)는 독자의 주의에 부과되는 세금입니다. 터프티는 이 장식을 차트 쓰레기(chartjunk)라 부르며 지시는 직설적입니다. 지우라는 것입니다. 격자선이 속삭일 때까지 흐리게 하고, 차트 테두리를 없애고, 범례까지 가게 하는 대신 데이터에 직접 라벨을 달고, 데이터가 거의 홀로 서게 하십시오. 차트는 더할 것이 없을 때가 아니라 의미를 잃지 않고는 더 뺄 것이 없을 때 완성됩니다.
터프티의 한 가지 생각은 팀에게 특별히 언급할 만합니다. 작은 다중 차트(small multiples)입니다. 여덟 개의 계열을 하나의 얽힌 선 차트에 욱여넣는 대신, 계열마다 하나씩 같은 축과 척도의 작은 차트 여덟 개를 격자로 그리십시오. 모든 패널이 직접 비교 가능하므로 눈이 격자를 훑다가 튀는 하나를 즉시 찾습니다. 작은 다중 차트는 “읽기에는 선이 너무 많다”를 “훑어볼 수 있는 한 페이지”로 바꾸며, 과부하된 하나의 그림에 색과 범례 항목을 더 쌓는 것보다 훨씬 잘 확장됩니다.
전주의 속성과 시각적 위계를 쓴다
어떤 시각적 차이는 독자가 “찾지” 않아도 의식적 주의 이전에 0.1초 안에 인지됩니다. 이 전주의 속성(회색 점들 사이의 빨간 점 하나, 더 긴 막대 하나, 공간에서 떨어져 놓인 항목 하나)은 눈을 이끄는 가장 강력한 도구입니다. 의도적으로 쓰십시오. 차트의 요점이 한 지역이 뒤처지고 있다는 것이라면, 그 지역에 색을 입히고 나머지는 회색으로 하십시오. 독자는 제목을 읽기 전에 메시지를 봅니다. 모든 것이 밝고 굵으면 아무것도 그렇지 않습니다. 대비는 상대적이고 강조로 가득한 페이지는 소음으로 가득한 페이지이기 때문입니다.
이것이 데이터에 적용된 시각적 위계입니다. 독자가 가장 먼저 알아채야 할 한 가지를 정하고 가장 강한 신호를 거기에 쓰십시오. 제목과 주석은 요점을 말로 진술합니다. 색과 굵기는 증거를 가리킵니다. 뒷받침하는 모든 것(축, 격자선, 부차적 계열)은 전경이 말할 수 있도록 회색으로 물러납니다. 위계 없는 차트는 독자에게 무엇이 중요한지 알아내는 디자이너의 일을 시킵니다.
역할에 따라 색을 고르고 색맹에도 안전하게 한다
색은 가장 자주 오용되는 채널이므로 세 가지 계열이 있는 체계로 다루십시오. 순차 팔레트는 한 색상에서 밝음에서 어두움으로 이어지며 낮음에서 높음으로 가는 양(인구 밀도, 매출)을 인코딩합니다. 발산 팔레트는 중립 중간점에서 만나는 두 색상을 지니며 중심으로부터의 편차(기온 이상, 0 주위의 손익, 중립 주위의 설문 동의)를 인코딩합니다. 범주 팔레트는 순서 없는 집단을 라벨링하는 서로 구별되는 색상의 집합이며, 그 이상에서는 독자가 구별할 수 없으므로 대략 일곱 색으로 제한하십시오. 잘못된 계열을 고르는 것(양에 범주형 무지개, 순서 없는 범주에 순차 램프)은 독자의 지각과 싸우는 일입니다.
그다음 접근 가능하게 만드십시오. 남성의 약 열두 명 중 한 명이 어떤 형태의 색맹이기 때문입니다. 빨강과 초록이 전형적인 함정입니다. 빨강은 나쁨, 초록은 좋음인 차트는 가장 흔한 결함을 가진 사람에게는 보이지 않습니다. 색맹에도 안전한 팔레트를 고르고(파랑에서 주황으로의 발산 체계와 ColorBrewer 같은 도구의 잘 검증된 범주 집합이 안전한 출발점입니다), 출하 전에 흔한 결함을 시뮬레이션해 확인하십시오. 텍스트와 표식이 5.3장의 접근성 표준이 요구하는 비율을 충족하도록 대비도 확인하십시오. 색은 이미 색 없이도 살아남는 메시지를 강화해야 합니다.
색에만 의존하지 말고 대안을 제공한다
데이터 시각화의 접근성은 팔레트 선택을 넘어갑니다. 웹 콘텐츠 접근성 지침(WCAG)의 핵심 규칙은 색이 정보를 전달하는 유일한 방법이어서는 안 된다는 것입니다. 그러므로 색을 두 번째 단서와 짝지으십시오. 직접 라벨, 산점도의 구별되는 모양이나 표식, 선 차트의 서로 다른 선 스타일(실선, 점선), 중요한 막대의 텍스트 라벨입니다. 색상을 구별할 수 없는 독자도 중복된 인코딩에서 전체 메시지를 얻어야 합니다.
진짜 텍스트 대안과 대체 수단을 제공하십시오. 차트 이미지에는 “매출 차트”가 아니라 요점을 진술하는 대체 텍스트가 필요하고, 추세의 이름을 붙이는 더 긴 설명이나 캡션이 필요합니다. 실용적인 곳이면 어디든 기저 데이터를 접근 가능한 표로 제공해, 스크린 리더 사용자와 스프레드시트 지향 분석가 모두 숫자를 직접 얻게 하십시오. 이는 5.2장의 “컴포넌트에서 한 번 해결한다”는 규율을 반영합니다. 적절한 역할, 상호작용 요소의 키보드 포커스, 내장된 표 보기를 갖춘 접근 가능한 차트 컴포넌트를 만들어, 모든 팀이 대시보드마다 다시 발명하는 대신 접근성을 물려받게 하십시오.
탐색, 설명, 모니터링 중 무엇을 하는지 안다
차트는 세 가지 다른 일을 하며, 이를 혼동하면 나쁜 결과물이 나옵니다. 탐색적 시각화는 데이터에서 흥미로운 것을 찾는 분석가인 여러분을 위한 것입니다. 청중이 반복할 전문가 한 명이므로 빠르고, 빽빽하고, 못생겨도 됩니다. 설명적 시각화는 이미 이해한 특정 발견을 전달하는 청중을 위한 것입니다. 의도적이고, 주석이 달리고, 하나의 메시지로 벗겨내며, 10.16장의 스토리텔링에 속합니다. 대시보드는 세 번째입니다. 한 번의 논증이 아니라 “지금 잘못된 것이 있는가?”에 최적화된, 알려진 지표를 시간에 따라 모니터링하는 지속적이고 한눈에 보는 디스플레이입니다.
디자인을 일에 맞추십시오. 헤드라인과 강조된 하나의 계열이 있는 설명적 차트는, 독자가 여러 지표를 한눈에 봐야 하고 눈이 레이아웃을 익히도록 일관된 배치가 필요한 모니터링 대시보드에는 맞지 않습니다. 서술적 주석으로 꽉 찬 대시보드는 매일 아침 확인하기에 지칩니다. 원시 그림으로 가득한 탐색 노트북을 설명인 것처럼 경영진에게 넘겨서는 안 됩니다. 일을 먼저 정하십시오. 디자인은 따라옵니다.
절대 오도하지 않는다: 정직한 척도, 정직한 면적
신뢰를 파괴하는 가장 빠른 방법은 진실해 보이면서 거짓말하는 차트입니다. 가장 흔한 거짓말은 잘린 축입니다. 막대 차트의 y축을 0이 아닌 90에서 시작하면 막대 길이가 더 이상 값에 대응하지 않기 때문에 2퍼센트의 차이가 절벽이 됩니다. 막대는 항상 0에서 시작해야 합니다. 크기가 아니라 변화를 인코딩하는 선 차트는 분명히 라벨을 단다면 0이 아닌 기준선을 써도 됩니다. 두 번째 함정은 이중 축입니다. 한 차트의 두 y 척도는 척도를 미끄러뜨려 원하는 어떤 상관이든 만들어 내게 하는데 독자는 거의 알아채지 못합니다. 대신 정렬된 두 차트나 지수화된 보기를 선호하십시오. 세 번째는 오도하는 면적입니다. 값을 나타내려고 아이콘이나 버블을 너비와 높이 모두로 확대하면 면적이 제곱으로 커져 차이를 크게 과장합니다. 변의 길이가 아니라 면적으로 척도를 정하십시오.
이를 스타일 선호가 아니라 무결성 규칙으로 다루십시오. 차트는 독자에게 신뢰해 달라고 요청하는 주장이며, 이 왜곡 하나하나는 지각이 동작하는 방식을 이용해 작은 것을 크게 보이거나 무관한 것을 연결된 것처럼 보이게 합니다. 아래의 정부와 기업 사례는 청중이 대중이나 이사회일 때 그 배신이 얼마나 비싸지는지를 보여 줍니다.
통찰에 주석을 달고 상호작용은 절제해서 더한다
독자가 요점을 찾게 만드는 차트는 반만 끝난 것입니다. 주석을 다십시오. 주제(“시간에 따른 가입”)가 아니라 발견을 진술하는 제목(“3월 출시 후 가입이 두 배가 되었다”), 핵심 사건에 대한 설명선, 목표나 평균을 위한 기준선입니다. 주석은 5.4장의 디자인이 그림과 만나는 곳입니다. 말이 논증을 나르고 표식이 증거를 제공합니다.
상호작용은 실제 후속 질문에 답할 때만 자리를 얻습니다. 정확한 값을 위한 툴팁, 한 세그먼트로의 필터링, 세부로의 드릴다운은 정적 차트가 담을 수 없는 다음 질문이 독자에게 있을 때 도움이 됩니다. 그러나 상호작용은 비용입니다. 호버 뒤에 정보를 숨기고, 터치와 키보드 사용자에게 실패하며, 성능을 바닥으로 끌어내릴 수 있습니다. 웹에서는 5.6장의 렌더 예산을 지켜보십시오. 수만 개의 점은 수만 개의 개별 문서 요소가 아니라 캔버스나 집계된 보기를 원합니다. 기본의 정적 보기가 핵심 이야기 전체를 전하게 하고, 상호작용이 그 아래의 깊이를 드러내게 하십시오.
장단점
| 결정 | 장점 | 단점 |
|---|---|---|
| 제품 안에 시각화를 구축 | 디자인, 접근성, 상호작용의 완전한 통제 | 엔지니어링 시간이 듦. 성능과 유지보수를 직접 책임짐 |
| BI 도구의 차트 사용 | 빠르고 싸며 웨어하우스에 연결됨 | 평범한 모양. 제한적인 접근성과 주석 통제 |
| 상호작용 차트 | 후속 질문에 답함. 그 자리에서 탐색 | 더 느리고 접근성 확보가 어려우며 인쇄와 터치에서 실패 |
| 정적 차트 | 빠르고 접근 가능하며 인쇄 준비가 되어 있고 모호하지 않음 | 독자의 다음 질문에 답할 수 없음 |
| 대시보드 | 알려진 많은 지표를 한눈에 모니터링 | 일회성 논증에는 부실. 지표 난립을 유혹 |
| 설명적 차트 | 하나의 메시지를 힘 있게 전달 | 모니터링이나 열린 탐색에는 맞지 않음 |
| 풍부한 색과 효과 | 눈길을 끎. 세련되게 느껴짐 | 차트 쓰레기. 데이터 잉크 비율과 접근성을 해침 |
되풀이되는 긴장은 표현력 대 정직과 명료함입니다. 차트를 더 풍부하게 하는 모든 기능(두 번째 축, 색 그러데이션, 3D 원근, 애니메이션)은 오도하거나 요점을 묻어 버리는 방법도 더합니다. 기본을 덜하는 쪽으로 두어 해결하십시오. 질문에 답하는 가장 단순한 차트, 가장 적은 색, 진실을 말하는 척도입니다. 특정 독자 질문이 요구할 때만 표현력을 더하고, 접근성과 성능 비용을 알고 치르십시오. 다른 상시적 트레이드오프는 구축 대 구매입니다. BI 도구는 몇 분 만에 화면에 차트를 올려 주며 내부 모니터링에는 맞는 선택이고, 고객 대면 제품에 내장된 시각화는 보통 목적에 맞게 만든 컴포넌트만 줄 수 있는 디자인, 접근성, 성능 통제가 필요합니다.
팀과 논의할 질문
우리 차트는 하나의 시각 언어를 공유합니까, 아니면 모든 팀이 자기 것을 발명합니까? 각 스쿼드가 자기 색, 축 관례, 반올림, 차트 유형을 고르면, 조직은 신뢰를 조용히 갉아먹는 방언을 쌓습니다. 다른 척도와 다른 초록으로 “활성 사용자”를 보여 주는 두 대시보드는 경영진에게 데이터를 믿을 수 없다고 가르칩니다. 세 팀의 같은 지표 차트 세 개를 가져와 나란히 놓으십시오. 찾은 간극(여기는 잘린 축, 저기는 범주 무지개, 하나는 천 단위 매출이고 다른 하나는 백만 단위)이 합의된 팔레트, 기본 축 규칙, 내장된 접근성을 갖추고 5.2장의 디자인 시스템처럼 거버넌스가 적용되는 공유 차트 컴포넌트 라이브러리의 논거입니다. 목표는 문법이 공유되어 있으므로 회사의 어떤 차트든 보는 즉시 올바르게 읽히는 것입니다.
가장 중요한 차트가 색맹 독자와 스크린 리더를 견딥니까? 데이터 시각화의 접근성은 만든 사람에게는 차트가 여전히 괜찮아 보이기 때문에 건너뛰기 쉽고, 그것이 바로 함정입니다. 리더십이 가장 자주 보는 차트 세 개를 색맹 시뮬레이터에 돌린 뒤, 화면을 끄고 대체 텍스트와 표 대체 수단만으로 이해해 보십시오. 빨강-초록 상태 차트가 밋밋해지거나, 대체 텍스트가 “차트”라고만 하거나, 마우스 없이는 기저 숫자에 닿을 방법이 없다면, 지금 배제하고 있는 독자 집단을 찾은 것이며, 공공 부문 작업에서는 5.3장의 표준에 따른 법적 노출입니다. 누가 고칠 책임을 지는지, 그리고 한 번에 해결되도록 수정이 공유 컴포넌트에 속하는지 결정하십시오.
결정을 이끄는 각 차트에 대해, 그것이 답하는 질문을 가리킬 수 있고 오도하지 않음을 확인할 수 있습니까? 많은 차트가 살아 있는 질문에 답해서가 아니라 누군가 한 번 만들었기 때문에 존재하며, 가장 많이 보는 일부는 아무도 모르게 척도를 왜곡합니다. 주요 대시보드의 차트를 훑으며 각각에 대해 그것이 알려 주는 결정의 이름을 대고 무결성을 점검하십시오. 막대는 0에서 시작하는가, 불필요한 이중 축은 없는가, 면적이 정직하게 척도화되었는가, 제목이 주제가 아니라 발견을 진술하는가. 현재 질문에 답하지 않는 차트는 삭제 후보이고, 오도하는 차트는 긴급 수리 후보입니다. 차이를 조용히 과장하는 차트는 차트가 없는 것보다 나쁘기 때문입니다. 이는 7.5장의 의사결정 문화와 직접 닿습니다. 차트를 신뢰하는 팀이 더 빠르고 더 탄탄한 판단을 내립니다.
팀에 차트가 필요할 때 BI 도구의 내장 차트와 거버넌스가 적용되는 컴포넌트 라이브러리 중 먼저 어느 쪽에 손을 뻗으며, 누가 그것을 결정합니까? BI 도구로 쏠리는 힘은 실제입니다. 빠르고, 싸고, 이미 웨어하우스에 연결되어 있어서 대부분의 모니터링 대시보드는 거기에 속합니다. 그러나 그 평범한 기본값이 방언과 차트 쓰레기가 스며드는 곳이고, 접근성과 주석 통제는 보통 약하며, 이는 평판을 짊어지는 고객 대면 및 공개 차트에서 가장 중요합니다. 큰 조직의 위험은 기본값이 결코 정해지지 않아 각 팀이 가장 쉬운 쪽으로 흘러가고 영역이 파편화된다는 것입니다. 오늘 차트가 실제로 만들어지는 곳의 목록, BI 도구와 목적에 맞게 만든 컴포넌트의 나란한 예 몇 개, 각각의 접근성 간극을 가져오십시오. 기업과 정부 환경에서는 조달의 현실을 접어 넣으십시오. 여러 해 동안 하나의 BI 플랫폼에 묶이는 경우가 많으므로, 계약 후가 아니라 전에 어떤 차트를 정직하고 접근 가능하게 렌더링할 수 있고 어떤 것이 거버넌스가 적용되는 컴포넌트를 필요로 하는지 정확히 알아 두십시오.
누가 외부나 경영진 청중에게 차트를 게시할 수 있으며, 먼저 어떤 리뷰를 거칩니까? 셀프서비스 분석은 진짜 선이지만, 오도하는 차트가 두 번째 눈 없이 이사회나 대중에게 닿을 수 있다는 뜻이기도 하며, 공개 그래픽의 잘린 축이나 라벨 없는 급등은 막는 것보다 되돌리기가 훨씬 어렵습니다. 긴장은 속도와 자율 대 무결성과 신뢰입니다. 너무 세게 관문을 두면 사람들이 우회하고, 너무 적게 두면 시장이나 유권자를 공황에 빠뜨리는 차트를 출하하게 됩니다. 가장 눈에 띄는 차트의 현재 게시 경로, 리뷰 없이 외부 청중에게 닿은 예, 방법과 불확실성이 차트 자체에 주석으로 달려 있는지의 증거를 가져오십시오. 공공 부문과 규제 업무에서는 이것이 절박합니다. 공식 통계는 시민과의 소통이며 10.16장의 이해관계자 신뢰의 문제이므로, 누가 승인하는지, 어떤 무결성 및 접근성 체크리스트를 적용하는지, 차트가 오도할 때 책임이 어디에 있는지 이름을 정하십시오.
어디에 상호작용을 더했으며, 기본의 정적 보기가 마우스 없이도 여전히 이야기 전체를 전합니까? 상호작용은 유혹적이고 비쌉니다. 호버 뒤에 값을 숨기고, 터치와 키보드 사용자에게 깨지며, 5.6장이 경고하듯 큰 데이터셋에서 렌더 예산을 바닥으로 끌어내릴 수 있습니다. 경쟁하는 고려는 실제 후속 질문(정확한 값, 드릴다운, 필터링된 세그먼트)이 때로 비용만큼 값하므로 목표가 금지가 아니라 절제라는 것입니다. 출하하는 상호작용 차트의 목록, 마우스를 치우고 휴대폰에서 각각을 써 본 결과, 데이터가 수만 개의 점으로 커질 때의 성능 수치를 가져오십시오. 기업과 정부 청중에게 접근성은 5.3장의 표준에 따른 법적 의무이고, 차트는 키오스크, 출력물, 보조 기술에서 읽히므로, 주석이 달린 정적 기본값이 핵심 메시지를 나르고 상호작용은 그 아래에 깊이를 더할 수 있을 뿐입니다.
분야별 관점
스타트업. 속도가 이기므로, 인력을 댈 수 없는 시각화 컴포넌트 영역을 구축하는 대신 BI 도구 안에 이미 있는 차트나 가벼운 차트 라이브러리에 기대십시오. 나중에 보답하는 싼 결정 하나는 첫날 색맹에도 안전한 팔레트 하나와 막대는 0에서 시작하는 습관을 고르는 것입니다. 고객이 열 명이 되기도 전에 같은 지표의 방언 열두 개가 쌓이지 않게 하기 위해서입니다. 접근성을 확보할 시간이 없을 상호작용 차트보다 발견을 진술하는 주석 달린 정적 차트를 선호하십시오.
소기업. 데이터 전문가도 빠듯한 예산도 없으니, 시각화를 이미 값을 치르는 도구, 곧 스프레드시트, 분석 SaaS, CRM의 대시보드에서 얻는 것으로 다루십시오. 중요한 소수의 무결성 규칙(막대는 0에서 시작, 양에 무지개 금지, 아홉 조각 원 차트 금지)을 배우고, 맞춤 제작을 의뢰하는 대신 이미 만들어진 색맹에도 안전한 팔레트를 적용하십시오. 차트는 사되 만들지 말고, 그것을 올바르게 읽는 데 주의를 아끼십시오.
대기업. 문제는 많은 팀에 걸친 일관성이므로, 시각화를 디자인 시스템처럼 다스리십시오. 합의된 순차, 발산, 범주 팔레트, 정직한 축 기본값, 표준 숫자 서식, 내장된 접근성을 갖춘 공유 차트 컴포넌트 라이브러리입니다. 축을 자르거나 대비에 실패하는 차트가 출하 전에 막히도록 8.1장의 전달 파이프라인에서 시각적 회귀와 무결성 검사로 시행하십시오. 보답은 어느 팀의 차트든 보는 즉시 올바르게 읽히고 리더십이 어느 버전의 숫자를 믿어야 하는지 묻지 않게 되는 것입니다.
정부. 모든 공개 차트는 소통 행위이고 공적 책임의 대상이므로, 정직한 척도와 WCAG 접근성은 선호가 아니라 의무입니다. 0에서 시작하는 막대, 면적으로 인코딩된 면적, 색맹에도 안전한 팔레트, 발견을 진술하는 평이한 언어의 제목, 모든 차트 옆의 내려받을 수 있는 접근 가능한 표를 의무화하십시오. 논쟁적인 수치가 오도하는 헤드라인으로 축약되지 못하도록 방법과 불확실성을 차트 자체에 주석으로 다십시오. 조달하는 어떤 BI 도구든 이 표준을 충족할 수 있는지 확인하십시오. 의무는 벤더와 무관하게 여러분의 것이기 때문입니다.
사례
스타트업. 열 명의 분석 스타트업이 고객 대면 사용량 대시보드를 출하합니다. 첫 버전은 BI 도구의 기본 테마를 씁니다. 범주 색의 무지개, 사방의 격자선, 아무도 읽을 수 없는 아홉 조각 원 차트입니다. 사용자들은 숫자를 신뢰할 수 없게 느껴진다고 불평합니다. 팀은 작은 색맹에도 안전한 팔레트로 내장 컴포넌트로 다시 만들고, 원 차트를 정렬된 막대 차트로 바꾸고, 격자선을 흐리게 하고, 범례가 사라지도록 직접 라벨을 답니다. 발견을 진술하는 제목을 정하고 모든 차트에 대체 텍스트와 표 전환을 더합니다. 고객이 마침내 한눈에 읽을 수 있게 되어 대시보드 참여가 오르고, 더 깔끔한 디자인은 시연에서 셀링 포인트가 됩니다.
기업. 한 다국적 은행에는 수십 개 팀이 만든 수백 개의 내부 대시보드가 있고, 각각 자기 색과 축 습관이 있어 같은 지표가 발표 자료마다 달라 보이기 때문에 경영진은 으레 불신합니다. 회사는 BI 플랫폼 위에 거버넌스가 적용되는 차트 라이브러리를 도입합니다. 합의된 순차, 발산, 범주 팔레트, 막대 축은 0에서 시작한다는 확고한 규칙, 표준 숫자 서식, 모든 컴포넌트에 내장된 접근성입니다. 8.1장의 전달 파이프라인의 시각적 회귀 검사가 표준을 어기는 차트를 막습니다. 1년 안에 어느 팀의 차트든 보는 즉시 올바르게 읽히고, 리더십은 “이 숫자의 어느 버전을 믿어야 하나?”라고 묻지 않게 됩니다.
정부. 한 국가 통계 기관이 경제, 건강, 인구에 대한 공개 데이터를 게시하며, 그 차트는 기저 수치를 검증할 수 없는 기자, 정책 결정자, 시민이 읽습니다. 기관은 모든 차트를 대중과의 소통이자 10.16장의 이해관계자 신뢰의 문제로 다룹니다. 정직한 척도(0에서 시작하는 막대, 오도하는 이중 축 없음, 면적으로 인코딩된 면적), 지역 비교를 위한 색맹에도 안전한 발산 팔레트, 발견을 진술하는 평이한 언어의 제목, WCAG를 충족하도록 모든 차트 옆의 내려받을 수 있는 접근 가능한 표를 의무화합니다. 논쟁적인 수치가 게시될 때 주석이 방법과 불확실성을 차트 자체에 설명하므로, 잘린 축이나 라벨 없는 급등이 대중의 신뢰를 갉아먹는 오도하는 헤드라인이 될 수 없습니다.
비즈니스 사례: 동기, ROI, TCO
좋은 시각화 디자인의 수익은 더 빠르고 더 나은 결정과 더 적은 비싼 실수입니다. 한눈에 문제를 드러내는 대시보드는 신호에서 행동까지의 시간을 줄이고, 진실을 말하는 차트는 잘린 축이 만들어 낸 환상을 예산이 쫓는 것을 막습니다. 이 이득은 청구서에 올리기 어렵지만 실제입니다. 어느 차트를 믿을지 논쟁하며 보낸 모든 리더십 회의, 잘못 읽은 추세 위에 세운 모든 전략, 제품의 분석이 읽을 수 없어서 이탈한 모든 고객은 명료한 디자인이 제거하는 비용입니다. 은행 사례처럼 차트가 실제 돈을 이끄는 곳에서는, 신뢰받는 숫자의 가치가 그것을 잘 만드는 비용을 압도합니다.
도입 비용은 대부분 일회성이고 공유됩니다. 합의된 팔레트, 축과 서식 규칙, 접근성 기본값을 정의한 뒤 차트 컴포넌트 라이브러리에 인코딩해 팀이 대시보드마다 다시 결정하는 대신 물려받게 합니다. 지속적인 소유 비용은 실제이지만 소박합니다. 라이브러리를 유지하고, 표준이 진화함에 따라 접근 가능하게 유지하고, 일회성 맞춤 차트의 난립에 저항하는 것입니다. 방치의 비용은 조용히 누적됩니다. 일관성 없고, 오도하고, 접근 불가능한 차트는 모든 데이터에 대한 신뢰를 갉아먹고, 규제 및 공공 부문 환경에서 법적 위험을 부르며, 사람들을 원시 스프레드시트로 되돌려 7.3장의 분석 스택에 대한 투자 전체를 낭비합니다. 리더십을 설득하려면 시각화 품질을 이미 추적하는 성과, 곧 결정 속도, 보고에 대한 신뢰, 공공 부문에서는 접근성 준수에 연결하십시오.
안티패턴과 함정
- 잘린 막대 축: 작은 차이가 심연처럼 보이도록 막대를 0 위에서 시작. 가장 흔한 단일 차트 거짓말.
- 불필요한 이중 축: 한 차트의 두 y 척도로, 작성자가 보이고 싶은 어떤 상관이든 만들어 내도록 미끄러짐.
- 오도하는 면적: 아이콘이나 버블을 변의 길이로 척도화해 면적과 체감 값이 제곱으로 커짐.
- 양에 무지개: 순서 있는 양을 순서 없는 범주 색상으로 인코딩해 눈이 크기를 읽을 수 없음.
- 조각이 많은 원 차트: 세 조각 초과로, 독자가 판단할 수 없는 각도를 비교하도록 강요. 정렬된 막대를 쓰십시오.
- 차트 쓰레기: 데이터 잉크 비율을 낮추고 신호를 묻는 굵은 격자선, 테두리, 3D, 그림자.
- 색만이 유일한 단서: 라벨이나 모양 없는 빨강-초록 상태로, 색맹 독자와 스크린 리더에는 보이지 않음.
- 범례 찾기: 선이나 막대의 직접 라벨로 충분할 곳에서 먼 범례까지 가게 강요.
- 모든 것을 강조: 모든 계열이 굵고 밝아 대비가 무너지고 아무것도 두드러지지 않음.
- 표가 이기는 곳의 차트: 독자가 정확히 읽어야 하는 네 개의 정확한 숫자에 대한 그림.
성숙도 모델
- 1단계, 시작: 차트가 손에 잡히는 도구로 즉흥적으로 만들어집니다. 색, 축, 서식이 작성자마다 다르고, 잘린 축과 범주 무지개가 흔하며, 접근성은 고려되지 않고, 독자는 결과를 불신합니다.
- 2단계, 발전: 일부 팀이 기본 실천을 채택하지만 조직 전반에서 일관되지 않습니다. 막대가 곳에 따라 0에서 시작하고, 명백한 차트 쓰레기는 리뷰에서 만류되며, 몇몇 팀에는 사내 팔레트가 있지만, 복도 끝의 다른 팀은 여전히 아홉 조각 원 차트와 빨강-초록 상태 차트를 출하합니다.
- 3단계, 표준화: 공유 차트 컴포넌트 라이브러리가 합의된 순차, 발산, 범주 팔레트, 정직한 축 규칙, 표준 서식, 접근성(색맹에도 안전, 대체 텍스트, 표 대체 수단)을 인코딩합니다. 표준은 문서화되어 조직 전체에서 시행되고, 설명적, 탐색적, 대시보드 용도가 디자인으로 구별됩니다.
- 4단계, 관리: 시각화 품질이 기준선에 대해 측정되고 통제됩니다. 접근성과 차트 무결성 검사가 전달 파이프라인에서 돌며 통과율을 보고하고, 0에서 시작하는 막대, 대비를 준수하는 색, 표 대체 수단을 갖춘 차트의 비율이 지표로 추적되며, 이해도가 기준선에 대해 실제 독자와 테스트되고, 각 핵심 지표의 갈라진 방언 수가 하나를 향해 가는 추세로 지켜집니다. 표준을 어기는 차트는 릴리스 전에 잡히고, 의견이 아니라 숫자가 라이브러리의 어디에 작업이 필요한지를 이끕니다.
- 5단계, 오케스트레이션: 시각화가 조직 전체에서 지속적으로 개선되고 통합됩니다. 접근성 요건과 독자의 필요가 바뀜에 따라 표준이 적응하고, 팔레트, 컴포넌트, 관례가 측정된 증거로 다듬어지며, 주석과 서술이 규범이고, 실천이 분석과 의사결정 문화에 엮여 있어 어느 팀의 차트든 보는 즉시 올바르게 읽히고 조직이 배움에 따라 시각 언어가 진화합니다.
논의를 위한 아이디어
- 주요 대시보드의 어느 차트가 축이 0에서 시작하면 달라 보이며, 그것이 이야기를 바꿉니까?
- 가장 중요한 차트를 고르십시오. 그 메시지가 그레이스케일에서도 살아남습니까? 그렇지 않다면 어떤 중복 단서가 고치겠습니까?
- 주석이 달린 정적 차트가 이야기 전체를 더 빨리 전할 때 상호작용 차트를 쓰고 있는 곳은 어디입니까?
- 차트 제목이 주제가 아니라 발견을 진술합니까? 헤드라인 숫자가 조용히 뒤집힌다면 누가 알아챌까요?
- 어느 차트가 현재 어떤 결정에도 답하지 않으며, 아무도 아쉬워하지 않게 삭제하려면 무엇이 필요합니까?
- 팀은 언제 제품 안에 시각화를 구축하고 언제 BI 도구를 써야 하며, 고르는 서면 규칙이 있습니까?
핵심 요점
- 독자의 질문에서 시작한 다음 차트를 고르십시오. 비교에는 막대, 추세에는 선, 관계에는 산점도, 분포에는 히스토그램, 부분 대 전체에는 원 차트 대신 정렬된 막대입니다.
- 인코딩을 데이터에 맞추십시오. 가장 중요한 양에 위치와 길이를 쓰고, 색상은 범주에 쓰되 크기에는 절대 쓰지 마십시오.
- 그래픽의 탁월함을 추구하십시오. 데이터 잉크 비율을 극대화하고, 차트 쓰레기를 지우고, 작은 다중 차트를 쓰고, 전주의 대비와 분명한 위계로 눈을 이끄십시오.
- 색을 체계(순차, 발산, 범주)로 다루고, 색맹에도 안전하게 유지하며, 색에만 의존하지 마십시오. 라벨, 대체 텍스트, 표 대체 수단을 제공하십시오.
- 척도에 대해 진실을 말하고(0에서 시작하는 막대, 정직한 면적, 불필요한 이중 축 없음), 통찰에 주석을 달고, 실제 후속 질문이 요구할 때만 상호작용을 더하십시오.
참고 문헌과 더 읽을거리
- Edward R. Tufte, The Visual Display of Quantitative Information
- Edward R. Tufte, Envisioning Information
- Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten
- Stephen Few, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring
- Cole Nussbaumer Knaflic, Storytelling with Data: A Data Visualisation Guide for Business Professionals
- Alberto Cairo, The Truthful Art: Data, Charts, and Maps for Communication
- Alberto Cairo, How Charts Lie: Getting Smarter about Visual Information
- William S. Cleveland, The Elements of Graphing Data
- Jacques Bertin, Semiology of Graphics: Diagrams, Networks, Maps
- Tamara Munzner, Visualisation Analysis and Design
- Cynthia A. Brewer, ColorBrewer: Colour Advice for Cartography (colorbrewer2.org)
- World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) 2.2