정보 시각화와 지각 심리

 

보고서나 대시보드를 만들 때, 같은 숫자인데도 어떤 화면은 한눈에 읽히고 어떤 화면은 한참 들여다봐야 하는 경우가 있습니다.
그 차이는 데이터가 아니라 사람의 눈과 뇌가 정보를 받아들이는 방식에서 나온다고 해요.
그래서 정보 시각화를 공부하다 보면 지각 심리 이야기가 자연스럽게 따라옵니다.
오늘은 기획자 입장에서 알아 두면 쓸모 있는 개념을 게슈탈트 원리, 색, 위치, 차트 선택 순서로 정리해 봤습니다.
전문가가 아니라 공부하며 정리하는 입장이라, 틀린 부분이 있으면 계속 고쳐 가겠습니다.

 

게슈탈트 심리학은 사람이 낱낱의 점을 보기보다 전체의 모양과 묶음으로 먼저 인식한다고 설명합니다.
화면 설계에 바로 쓸 수 있는 원리를 몇 가지만 골라 볼게요.

근접성은 가까이 있는 것들을 한 묶음으로 본다는 원리입니다.
항목 사이의 간격을 다르게 두면 선이나 상자 없이도 그룹이 만들어져요.
유사성은 모양이나 색이 비슷한 것들을 같은 부류로 본다는 원리입니다.
연속성은 선이나 배열이 이어지는 방향을 따라 눈이 움직이는 현상이고, 폐쇄성은 조금 빈 모양도 닫힌 형태로 채워서 본다는 원리입니다.

가정 예시를 들어 보겠습니다.
설정 화면에 항목 열두 개가 같은 간격으로 늘어서 있다고 해 보죠.
계정, 알림, 개인정보 관련 항목 사이에 간격만 조금 넓혀 주면, 사용자는 세 묶음으로 나뉘어 있다고 느낍니다.
구분선을 추가하지 않아도 화면이 훨씬 가벼워지는 효과가 있어요.

전경과 배경의 구분도 자주 쓰입니다.
사람은 화면에서 무엇이 주인공이고 무엇이 바탕인지를 먼저 가르는데, 팝업을 띄울 때 뒤 화면을 어둡게 처리하는 것이 대표적인 적용이에요.
뒤가 밝고 선명한 채로 팝업이 떠 있으면 어디에 집중해야 할지 흐려집니다.

 

색은 가장 빠르게 눈에 들어오는 신호입니다.
그런 만큼 많이 쓸수록 힘이 떨어지는 도구이기도 해요.
한 화면에 강조색이 다섯 개가 되면 어디를 봐야 할지 알 수 없게 됩니다.

저는 색을 쓸 때 세 가지를 기준으로 삼습니다.
먼저 의미를 일관되게 쓴다는 것입니다.
빨강은 경고나 감소, 파랑은 기본이나 정보처럼 한 번 정한 의미를 화면마다 바꾸지 않습니다.
다음으로 순서가 있는 데이터에는 밝기 단계로 변화를 주고, 서로 다른 범주에는 구별되는 색을 씁니다.
마지막으로 색만으로 의미를 전달하지 않습니다.
색을 구별하기 어려운 사용자도 있기 때문에 모양, 글자, 패턴을 함께 쓰는 편이 안전합니다.

가정 예시로, 월별 매출 막대 열두 개 중 이번 달만 강조하고 싶다고 해 보죠.
열두 개를 모두 다른 색으로 칠하면 아무것도 강조되지 않습니다.
열한 개는 옅은 회색으로 두고 이번 달만 진한 색으로 칠하면, 설명 없이도 눈이 그곳으로 갑니다.
강조는 대비에서 나오고, 대비를 만들려면 나머지를 조용하게 만들어야 해요.

 

사람은 화면을 위에서 아래로, 왼쪽에서 오른쪽으로 훑는 경향이 있다고 알려져 있습니다.
문화권과 언어에 따라 달라질 수 있어서 절대적인 규칙은 아니지만, 중요한 정보를 왼쪽 위에 두는 방식은 흔히 쓰입니다.

크기도 비슷하게 중요도를 말해 줍니다.
가장 중요한 숫자는 크게, 보조 설명은 작게 두면 읽는 순서를 설계할 수 있어요.
대시보드라면 "오늘 가장 먼저 봐야 할 숫자 하나"를 정하고 그것을 가장 눈에 띄게 만드는 것에서 출발합니다.
모든 숫자를 같은 크기로 늘어놓으면 공정해 보이지만, 사실은 읽는 사람에게 해석의 일을 떠넘기는 셈이에요.

 

어떤 차트를 쓸지는 보여 주려는 질문이 정합니다.
대략 이렇게 구분하면 실수가 줄었습니다.
시간에 따른 변화를 보려면 선 그래프를 씁니다.
항목끼리 크기를 비교하려면 막대 그래프를 씁니다.
전체에서 차지하는 비율을 보려면 항목이 적을 때 원이나 누적 막대를 씁니다.
두 값의 관계를 보려면 점으로 찍는 산점도를 씁니다.

예를 들어 가상의 서비스에서 월별 가입자 수와 채널별 비중을 함께 보고 싶다고 해 보죠.
월별 변화는 선 그래프로, 채널별 비중은 막대 그래프로 나누어 두 장에 보여 주는 것이 한 장에 욱여넣는 것보다 읽기 쉽습니다.
원 그래프는 조각이 많아지면 비교가 어려워지니 다섯 조각 안팎으로 제한하는 편이 낫고요.
입체 효과나 불필요한 장식은 값을 왜곡해 보이게 만들 수 있어서 가능하면 쓰지 않습니다.

축도 조심해야 합니다.
막대 그래프의 세로축이 0이 아니라 중간에서 시작하면 작은 차이가 엄청난 차이처럼 보입니다.
의도하지 않았더라도 보는 사람은 오해할 수 있으니, 막대 그래프는 0에서 시작하는 것을 기본으로 삼고 있어요.
선 그래프는 변화의 모양이 중요해서 범위를 조절하는 경우가 있지만, 그럴 때는 축 범위를 눈에 띄게 표시합니다.

 

시각화는 예쁘게 꾸미는 일보다 읽는 사람의 부담을 덜어 주는 일에 가깝다고 느꼈습니다.
게슈탈트로 묶고, 색으로 구분하고, 위치와 크기로 순서를 주고, 질문에 맞는 차트를 고르는 것만으로도 보고서가 달라집니다.

남은 질문도 있습니다.
같은 차트를 보고도 사람마다 다르게 읽는 경우가 있는데, 그 차이를 어떻게 미리 점검할 수 있을까요.
초안을 다른 사람에게 보여 주고 "첫눈에 뭐가 보여요"라고 물어보는 방법을 앞으로 더 자주 써 보려고 합니다.