KB 부동산의 차트 디자인 개선: 시각적 잡음 줄이기
뉴욕타임스의 차트 제작과정과 비교하기
국내 부동산 관련 정보를 얻을 때 많이 이용하는 사이트 중 하나로 KB 부동산이 있습니다. 이 사이트에서는 매물, 시세, 실거래가, 분양 등 다양한 정보를 제공합니다. 이러한 정보는 사용자가 쉽게 파악할 수 있도록 차트로 데이터를 시각화해 보여주는데요. 그러나 일부 차트는 직관적으로 정보를 파악하기 어렵습니다. 그 이유는 무엇일까요?
KB 부동산 사이트의 차트를 함께 개선해 보며, 더 나은 차트 제작을 위한 방법을 알아보겠습니다.
왜 차트를 이해하기 어려울까
아래는 권역별 오피스의 매매가격지수와 변동률을 보여주는 KB 부동산 차트의 첫 화면입니다. 이 차트에서는 어떤 정보를 알 수 있을까요? 여러분은 이를 보고 서울 권역 매매가격지수의 시간에 따른 변화를 잘 파악할 수 있나요?
<출처: KB 부동산(KB 오피스 투자지수)>데이터 시각화의 목표는 정보를 명확하게 전달하여 사용자가 쉽게 이해하도록 돕는 것입니다. 하지만 위 차트로는 정보를 직관적으로 파악하기 어렵습니다. 사이트에 들어가 버튼을 눌러 권역 활성화를 꺼도 여전히 해석에 어려운 부분이 있습니다. 그 이유를 하나씩 살펴보겠습니다.
첫째, 색에 대한 정보가 차트 안에 없다
차트는 그 자체로 정보를 전달할 수 있어야 합니다. 하지만 이 차트에는 각각의 색이 의미하는 정보가 하단 테이블에만 표시되어 있습니다. 만약 녹색 라인이 어떤 권역의 데이터를 나타내는지 파악하려면 테이블을 따로 봐야 합니다. 차트에서 직관적으로 쉽게 정보를 파악하기 어렵다는 뜻이죠. 이러한 디자인은 사용자가 즉시 데이터를 해석하는 데 불편을 초래합니다.
둘째, 이중축의 사용으로 값의 비교가 어렵다
매매지수와 변동률 두 데이터가 한 차트 안에 들어 있습니다. 이로 인해 스케일과 단위가 다른 두 개의 Y축을 써야 했습니다. 그러다 보니 어떤 Y축을 기준으로 데이터를 읽어야 하는지 혼란스럽습니다. 예를 들어, 차트 오른쪽에서 2024년 1분기 매매지수 값을 읽고자 할 때, 바로 옆에 보이는 변동률의 Y축 눈금 때문에 직관적으로 값을 파악하기가 어렵습니다. 데이터를 정확하게 읽으려면 왼쪽 Y축을 찾아야 하는 번거로움이 있습니다.
셋째, 너무 많은 시각 요소가 한 차트에 담겨 혼란스럽다
시각 요소가 너무 많으면 중요한 정보의 전달이 방해됩니다. 현재 차트는 다섯 개의 권역을 각기 다른 색으로 표현했습니다. 또, 두 가지 데이터를 라인과 막대그래프로 동시에 시각화했습니다. 여러 그래프가 겹쳐 보이기 때문에 시각적 잡음이 발생합니다. 그뿐만 아니라 두 개의 Y축을 사용해 복잡함은 가중되었습니다.
이처럼 너무 많은 정보를 한 차트에 담으려다 보니 불필요한 시각적 요소가 많아졌습니다. 이로 인해 중요한 정보를 명확하게 전달하기도 어려웠습니다. 이러한 문제점으로 차트의 데이터를 빠르고 정확하게 이해하고자 하는 사용자는 불편함을 느낍니다. 그럼 이 차트의 디자인은 어떻게 개선할 수 있을까요?
차트의 가독성 개선하기
차트로 명확하게 정보를 전달하려면 매매가격지수와 변동률 데이터를 각각 다른 차트에 시각화해야 합니다. 직접 매매가격지수 차트를 개선해 보았습니다. KB 부동산 차트에서 매매가격지수는 권역별 데이터를 각기 다른 색으로 표현한 멀티 라인차트(Multi-line chart)로 시각화되었습니다. 이를 작은 라인 차트를 써 각각 권역을 표현한 스몰 멀티플(Small multiple)로 개선해 보았습니다.
<출처: KB 부동산 (Original), 작가(Updated)>우선 각각 이름이 붙은 권역의 데이터를 두꺼운 보라색 라인으로 시각화하여 눈에 띄게 했습니다. 다른 데이터는 상대적으로 색의 대비가 낮은 회색 라인으로 표현하여, 해당 권역 데이터의 상대적인 변화를 더 쉽게 파악할 수 있도록 했습니다.
차트의 색은 보라색과 회색의 두 가지로 줄였습니다. 또한, 동일한 X축과 Y축 눈금이 반복해 나타나지 않도록 왼쪽 차트를 제외한 다른 차트에서는 눈금값을 생략했습니다. 불필요한 시각 요소를 줄임으로써 사용자가 중요한 정보에만 집중하도록 했습니다.
마치며
이러한 차트 제작 과정은 시각적 잡음을 줄이고 중요한 정보를 시각적으로 강조하며, 독자가 차트 내 어떤 정보에 집중해야 하는지 쉽게 파악하도록 만듭니다. 만약 데이터 값을 직관적으로 이해하기 어려울 때는 추가 설명으로 더 쉽게 이해할 수 있도록 도와야 합니다.
KB 부동산의 예시처럼, 차트를 디자인할 때 우리는 더 많은 정보를 전달하고자 하는 욕심에 빠지기 쉽습니다. 그러나 이는 오히려 가장 중요한 정보를 가리는 결과를 초래합니다. 따라서 차트를 완성하는 마지막 단계에서는 불필요한 요소를 제거해야 합니다. 그리고 중요한 정보를 명확하고 직관적으로 전달하는 데에만 중점을 두어야 합니다.
자세한 아래의 내용은 요즘 IT 원문에서 무료로 확인할 수 있습니다.
왜 차트를 이해하기 어려울까
차트의 가독성 개선하기
시각적 잡음 줄이기 (뉴욕타임스의 차트 제작과정)
https://yozm.wishket.com/magazine/detail/2646/
