데이터를 한눈에 이해시키는 방법. 월스트리트저널 인포그래픽 가이드.
인포그래픽은 언론인에게나 필요한 것처럼 느껴질지도 모르겠다. 신문이나 잡지, 뉴스 등의 매체에서 자주 보게 되니 말이다. 그러나 큰 맥락에서 보면 인포그래픽은 어디에나 있다.
IT 분야도 예외는 아니다. 어떤 서비스를 만든다고 가정해보자. 서비스를 만든다는 것은 데이터를 수집하고 그것을 가공해서 효율적으로 사용한다는 말과 다름없다.
사용자가 입력한 컨텐츠 데이터를 모아 성격에 맞게 정돈하여 보여주는 SNS는 물론, 상품 데이터를 모아 정리해서 판매하는 상거래 서비스나 웨어러블 디바이스를 통해 운동 정보를 받아 건강 정보를 알려주는 피트니스 서비스도 마찬가지다.
어떤 데이터를 수집할 것인지 뿐 아니라, 그 데이터로 어떤 의미를 만들어 낼 것이며 만들어진 데이터를 한눈에 알아보도록 표현하는 것도 중요하다.
이 책은 데이터를 잘 가공하고 표현하는 방법을 다룬다.
개발자의 입장에서 월스트리트저널 인포그래픽 가이드를 읽고, 좋은 UI/UX는 무엇인가에 대해 한 번 더 생각하게 되었다.
월스트리트저널 인포그래픽 가이드 - 정리
기본
사람들은 비교 판단을 위해 참조점을 필요로 한다. 그 참조점을 제시하는 사람이 메시지를 통제한다.
차트의 메시지를 뒷받침하는 모든 사실과 근거가 일관성을 갖춰야 한다. 예를 들어 이익과 손실에 관한 차트를 그릴 때, 성과가 저조한 이전 분기들을 생략하면 사실을 왜곡하는 게 된다.
나쁜 데이터 + 훌륭한 시각화 = 나쁜 차트
숫자의 끝 처리는 가장 나중에 하라.
핵심
- 간결하라.
- 숫자에 맥락을 부여하라.
- 독자를 대신하여 계산 할 것. 변화율과 절대 수치 중 무엇이 더 진실한 표현인지 결정하라.
- 가능한 한 글꼴의 종류는 적게 사용하라. 볼드체나 이탤릭체는 다른 것들과 구분할 목적으로 사용하되, 두 종류를 한꺼번에 사용하지 말라.
- 장식 목적이 아닌 정보 전달을 위해 색을 사용하라.
- Y축 척도의 증가분은 자연스러운 단위를 사용하라.
- 모든 막대 차트의 기준선은 0으로 하라.
- 파이차트에서 가장 넓은 영역은 파이의 꼭대기인 12시 방향에 배치한다.
글꼴
포인트 point : 포인트는 글꼴 크기를 측정하는 단위다. 12포인트가 1파이카pica다. 1파이카는 1/6인치 크기에 해당된다.
레딩Leading: 한 행의 베이스라인과 다음 행의 베이스라인 간의 수직 거리를 뜻한다.
차트의 글꼴 가독성을 위한 기본 규칙
* 레딩은 글꼴 크기보다 약 2포인트 이상 클 때 읽기 편하다.
* 너무 작은 글꼴이나 폭이 좁은 글꼴은 선택하지 않는다.
* 볼드체 또는 이텔릭체는 요점을 강조할 때만 사용한다. 볼드체와 이탤릭체를 동시에 적용하지 말 것.
* 알파벳의 경우, 알파벳 전체를 대문자로 쓰지 않는다.
* 검정색 혹은 다른 색상의 바탕에 흰색 글씨는 피한다.
* 하이픈 연결은 피한다.
* 지나치게 화려한 서체는 사용하지 않는다.
* 글꼴을 기울여 배치하지 않는다.
* 글꼴 사이를 벌리지 않는다.
타이포그래피가 제대로 되었다면 해당 글꼴은 크기가 작아져도 여전히 읽힐 것이다.
색상
따뜻한 색상은 차가운 색상에 비해 더 크게 보이기 때문에 같은 면적이라도 빨간색이 시각적으로 파란색을 압도할 수 있다.
따뜻한 색상은 점점 더 가까이 오는 느낌을 주는 반면 파란색은 시각적으로 후퇴하는 것처럼 보인다.
CMYK 이론상으로 청록,마젠타,노랑을 한꺼번에 덧칠하면 검은색이 나와야 하지만, 실제로는 탁한 갈색이 된다.
차트의 색상
같은 변수를 표현할 때는 동일한 색상을 사용
한가지 색상에서 밝기가 다른 색상을 쓰거나 색상환에서 같은 쪽에 위치한 색상을 사용한다면 다중 막대 차트가 좋다.
컬러 스케일은 색상과 관계 없이 가장 밝은 색에서 가장 어두운 색으로 가거나, 그 반대로 설정해야 한다.
색상은 분위기를 반영한다. 짙은 파랑은 보수적. 밝은 색상은 쾌활한 분위기.
어떤 테마를 연상시키는 색상은 피한다.
긍정적인 숫자에 빨간색은 쓰지 않는다. 손실에는 빨간색 막대가 효과적이다.
빨강/녹색 또는 파랑/노랑과 같은 색상 조합은 색상환에서 각각 반대편에 위치한 색상과의 조합이다. 색조는 아주 다르지만, 색의 명도나 밝기는 비슷하다.
효과적은 색상 선택을 위한 전략
글꼴 색은 검정으로 설정하라
차트 항목은 해당 차트 요소에 직접 작성하라
반드시 명도 대비를 높여라
그레이 스케일로 변환하라.
흑백 상태에서도 알아볼 수 있다면 색상 선택이 잘 된 것이다.
똑똑하게 차트 그리기
선
적절한 높이는 차트의 2/3 영역을 차지한다.
자연스러운 증가분을 사용한다.
차트 하나에 선은 네 개 이하로 한다.
선 바로 옆에 항목을 단다. 범례는 공간이 넉넉지 않고 선들이 많이 교차하는 경우에만 사용한다. 범례의 순서는 최근의 데이터를 가리키는, 끝지점 데이터의 순위에 맞춰야 한다.
두 개 이상의 데이터 집합을 대조할 때 비교 가능한 척도를 사용하라. 상대적인 성과가 선의 기울기를 통해 분명하게 드러나야 한다. 양쪽 차트에 있는 Y축 척도의 범위는 같은 증감률로 나타내야 한다.
수직 막대
막대 너비는 막대와 막대 사이 간격의 두 배 정도 크기로 한다. 한 차트에 있는 막대는 모두 같은 색과 음영으로 통일한다.
다른 막대보다 옅은 색상의 막대를 써서 예상값고 추정값을 실제 값과 구분할 수 있다.
0 기준선에서 시작하라. 예외는 없다! 0 기준선을 다른 그리드 선보다 두껍고 진하게 그려라.
비교하기 쉽도록 다중 막대의 음영은 가장 연한 색에서 짙은 색으로 옮겨간다.
범례에서 항목 순서는 막대의 순서와 같게 하여 쉽게 참조할 수 있어야 한다.
끊어진 막대는 수직 막대 차트에서 메시지의 핵심이 아닌 특이값을 보여줄 때 사용하기도 한다. 항상 끊어진 막대의 데이터 포인트에 직접 항목값을 적는다.
수평 막대
수평 막대 차트는 동일한 특성에 따른 순위를 매길 때 가장 유용하다. 이를테면 특정 제품 매출액에 따른 국가 순위를 매기는 경우다. 크기 순서로 배열하는 게 규칙이지만 예외가 허용되는 경우가 알파벳 순서처럼 특정 순서로 배열했을 때 가독성이 높아지는 경우다.
수평 막대를 시간 순으로 표현할 때는 가장 최근 데이터 포인트부터 위에서 아래로 배열한다.
수평 막대를 아래 위로 길게 나열할 때는 데이터 포인트에 대한 항목값을 오른쪽 정렬하고, 막대를 3개에서 5개의 그룹으로 나눈 다음 가는 선으로 구분해주면 독자가 가로질러 읽을 때 도움이 된다.
항상 0 기준선을 중심으로 음수는 왼쪽에 둔다. 기준선의 오른쪽에는 양수만 오도록 한다.
파이 차트
가장 큰 파이 조각을 12시 정각 방향을 기준으로 오른쪽에 배치하여 중요성을 강조한다. 나머지 조각을 배열하는 가장 좋은 방법은 두 번째로 큰 조각을 12시 정각을 기준으로 왼쪽에 놓는 것이다. 그리고 나머지는 시계 반대 방향으로 배치한다.
파이 조각의 크기가 비슷한 경우엔 12시 정각을 기준으로 오른쪽에서 시작해서 시계 방향으로 가장 큰 것부터 작은 순서로 배치한다.
파이 조각의 명암은 단순하게 하되 중요한 파이 조각은 강조한다. 그렇다고 해서 파이 조각의 순서를 재정렬하지는 말 것.
분할 막대 차트는 보통 전체 대비 일부를 보여줄 때 파이 차트보다 효과적이다.
파이 크기를 비교할 때는 언제나 표면적(πr^2)을 기준으로 계산되어야 한다.
표
가는 선을 3개에서 5개의 행마다 그어주면 표 안의 숫자를 따라가는 데 도움이 된다.
한 개의 차트가 숫자로 빼곡한 표보다 더 기억에 남는다.
정수는 오른쪽 정렬한다.
항상 소수는 소수점을 기준으로 정렬한다.
항목들은 알파벳 순서나 데이터 크기 순서 등 논리에 따라 배열한다.
픽토그램
픽토그램에서 아이콘 일부만 잘라서 사용하는 것은 피하라.(정사각형 제외)
픽토그램에서 사용하는 아이콘은 단순해야 한다.
가변적인 상황을 표현할 때는 동일한 모양의 심볼에 밝기를 달리해서 사용한다.
잘 만든 픽토그램은 시선을 끌면서도, 신속하게 변수들을 비교할 수 있도록 해준다.
좋은 아이콘인지 판별하는 방법
- 단순한가
- 대칭적인가
- 아주 작은 사이즈로 줄이더라도 분명하고 명쾌한가
- 대략 정사각형에 들어맞는 모양인가
지도
서로 다른 상태를 비교하거나, 시간 흐름에 따른 변화를 보여줄 때 아주 효과적일 수 있다.
계산하기
평균값 : 단순한 평균값
중앙값 : 데이터를 순서대로 나열했을 때 한가운데 위치한 값
최빈값 : 가장 자주 나오는 값
표준 편차 : 루트{합계(각각의 데이터값-평균값)^2/데이터 포인트의 갯수}. 전체 데이터가 아닌 샘플 데이터일 때는 (데이터 포인트의 갯수 - 1 )로 나눈다.
평균값 위주로 데이터가 얼마나 촘촘하게 분포되어 있는지 보여준다. 변동성이 높은 주식은 표준편차가 크다.
일일 변동성 : 일일 표준편차 * 루트{연간 거래일수}
가중 평균 : 중요한 데이터 포인트에 대해서는 가중치를 주어 단순한 산술평균의 한계를 극복할 수 있다.
이동평균 : 데이터 변동성이 큰 경우 이동평균은 실제 추세를 파악하는데 도움이 될 수 있다.
로그 스케일은 자릿수가 아주 긴 값들까지도 포함할 수 있다.
X축 로그 스케일 : X축상의 시간흐름에 따른 로그 스케일을 사용하면 차트의 짧은 기간 안에 더 상세한 변화를 담을 수 있다.
Y축 로그 스케일 : Y축을 로그 스케일로 설정하면, Y축 상의 그리드 성도 같이 조정되어 Y축 상의 값의 크기에 따른 차이가 그리드 선에 반영된다. 이로써 변화폭의 상대적 중요도를 보여준다.
독자는 완만한 경사는 소폭 상승, 가파른 경사는 대폭 상승을 의미할 거라고 예상한다.
증감률 : 신규값 - 기존값 / 기존값 * 100%
증감률을 직관적으로 파악하려면 기준점이 0 또는 100인 것이 좋다.
기준점을 100으로 재설정 : (현재 값 /초기 값) * 100
기준점을 0으로 재설정 : [(현재 값/ 초기 값) * 100] - 100
1 퍼센트 포인트 = 100 베이시스 포인트
증감률에 따라 작성한 차트는 기준값을 중심으로 어떤 변화가 있었는지를 강조한다.
규모 면에서 비교가 불가능한 두 개체의 증감률은 비교하지 말라.
A%의 B% = A/100 * B%
평균을 구할 때만큼은 백분율을 일반 숫자처럼 취급해서는 안 된다.
A%= c/e, B% = d/f 일 때 새로 산출한 백분율 = c+d/ e+f * 100%
기하평균수익률 = 산술평균수익률 - 조정계수(연평균수익률의 표준편차)^2/2
확률
- 대칭적인 확률 분포
주사위, 시험성적등은 종 모양의 곡선
첨도(fat-tails)는 극단적인 이익이나 손실이 종 모양의 정규분포도를 통해 예측할 수 있는 것보다 더 자주 발생한다는 사실을 알려준다. - 비대칭 확률분포
고르지 않은 소득 분배
위험감수형인 사람은 복권이 당첨될 백만 분의 일의 확률을 믿는다. 위험회피형인 사람은 아주 낮은 확률인 벼락 맞을 가능성도 염려한다. 이들 두 유형의 사람들은 모두 특이값이 나올 확률에 따라 행동한다. 이들은 분포도의 꼬리에 ‘살고 있는’ 사람들이다.
돈
재고나 대출 같은 자산과 부채를 표시할 때, 해당 기간의 마지막 날짜(예: 12월 31일)환율을 적용하여 현재까지의 누적값을 보여준다.
이익과 손실을 표시할 때는 각 기간의 평균 환율을 사용하여 해당기간 환율이 끼친 영향을 나타낸다.
독자들은 통화가 강세를 나타내면 상향 추세선, 약세를 보이면 하향 추세선이 나타날 거라 생각한다.
관례적인 통화 표기법을 고수하다보면 통화 약세임에도 불구하고 차트는 상향 추세로 표현될 때가 있다. 반대로 통화 강세인데 하향 추세로 표시될 때도 있다. 이때 인버스 스케일을 사용하면 선의 방향을 바꾸어 직관적으로 이해하기 쉽다.
계획 세우기
조직도 : 어떤 조직도를 그리든, 가능한 그래픽 요소는 단순하게 가져가라. 의미없는 테두리 치지 말라.
경쟁사 추적 : 차트에 회사별 타임라인을 나란히 배치할 때는 해당 시기에 특별한 사항이 없어도 같은 연도는 모두 같은 위치에 오도록 정렬해야 한다.
진척 보고 : 색을 사용하여 지연되고 있는 업무를 강조할 수 있다. (색을 통해) 패턴이 드러나면 의사결정자들이 문제의 원인이 자원 부족 때문인지 아니면 비현실적인 목표 수립 때문인지를 판단하는 데 도움을 줄 수 있다. 그리드 선은 가능한 적게 사용하라.
파급효과가 큰 문제 찾기 : 관리자들이 순조롭게 진행중인 사안이나 중요도가 떨어지는 사안에 관심을 쏟지 않고, 중요하지만 효과를 발휘하지 못하는 프로젝트에 관심을 기울이도록 강조한다.
스파이더 차트 : 한 데이터 집합에서 반복되는 패턴을 설명할 때 가장 유용하다.
by 月風
