01장 데이터 시각화란?

1.1 데이터 시각화, 왜 중요할까?1.2 데이터 시각화의 긍정적인 사례 1.2.1 첫 번째 사례: 뉴욕 타임즈 ‘How the Virus Got Out’ 기사 1.2.2 두 번째 사례: FiveThirtyEight의 선거 예측 1.2.3 세 번째 사례: Flightradar24 1.3 FE 개발자에게 데이터 시각화 지식이 필요한 이유 1.4 데이터 시각화에서 FE 개발자가 고려해야 할 점 1.4.1 반응형 1.4.2 접근성 1.4.3 직관성 1.5 이 책의 목적과 구성

1.1 데이터 시각화, 왜 중요할까?

인터넷을 사용하는 사람이라면 데이터 시각화로 표현된 데이터를 한번쯤 보았을 것이다. 인터넷으로 장을 볼 때 리뷰 별점을 참고하여 구매를 결정하고, 뉴스 기사나 포스팅에서는 그래프를 통해 해당 기사의 신뢰성을 평가한다.

즉, 데이터 시각화는 사용자에게 데이터의 패턴과 트렌드를 쉽게 인식할 수 있도록 도와주는 역할을 한다. 데이터 시각화를 어떻게 표현하는가에 따라 사용자의 반응이 달라질 수 있다는 것이다. 데이터를 단순히 텍스트로만 보는 것보다, 시각적으로 표현된 데이터를 보면 더욱 직관적으로 이해할 수 있기 때문에 데이터를 통한 전달 의도(목적)을 더 효과적으로 보여줄 수 있다.

“데이터 시각화는 복잡한 건강 데이터를 시각적으로 표현하여 공중 보건 전문가와 대중이 데이터를 더 쉽게 이해하고 활용할 수 있도록 한다.” -미국 질병통제예방센터(Centers for Disease Control and Prevention, CDC)-

1.2 데이터 시각화의 긍정적인 사례

복잡한 데이터를 사용자 친화적이고 직관적인 방식으로 시각화 하여 정보 전달의 효과를 극대화하고 있는 사례들이 많이 있다. 이러한 시각화 사례는 다양한 웹사이트와 서비스에서 쉽게 찾아볼 수 있다. 다음은 몇 가지 대표적인 예시들이다. 이 홈페이지들을 방문하여 직접 확인해보는 것을 추천한다.

1.2.1 첫 번째 사례: 뉴욕 타임즈 ‘How the Virus Got Out’ 기사

뉴욕 타임즈의 "How the Virus Got Out" 기사는 COVID-19의 초기 확산 과정을 효과적으로 전달하기 위해 인터랙티브 애니메이션을 활용했다. 데이터 시각화의 다양한 기술을 통해 독자들에게 정보를 직관적으로 전달하고, 복잡한 데이터를 쉽게 이해할 수 있도록 돕는다.

출처: The New York Times, 'How the Virus Got Out', 2020년 3월 22일

다음 링크(https://www.nytimes.com/interactive/2020/03/22/world/coronavirus-spread.html)에서 해당 기사를 볼 수 있다.

1.2.2 두 번째 사례: FiveThirtyEight의 선거 예측

데이터 저널리즘 사이트인 FiveThirtyEight는 각 주별 선거 결과 예측, 후보자 지지율 변화, 그리고 잠재적인 선거 시나리오를 인터랙티브 차트와 그래프로 시각화 하여 보여준다.

출처: FiveThirtyEight, '2020 Election Forecast’

위 그래프는 시간에 따른 후보자 지지율 변화를 선 그래프로 나타내는데 이를 통해 사용자는 선거 운동 기간 동안 지지율이 어떻게 변동했는지를 한눈에 이해할 수 있다.

다양한 가정 하에서의 선거 결과를 시뮬레이션 하여 보여주기도 하고 특정 가정을 변경하여 결과가 어떻게 달라지는지 실시간으로 확인할 수 있다.

결과적으로, 데이터 시각화를 통해 선거 데이터 안에 내포되어 있는 의미를 명확하게 전달하고, 사용자의 이해를 돕고 있다. 다음 링크(https://projects.fivethirtyeight.com/2020-election-forecast/)에서 해당 사이트에 방문할 수 있다.

1.2.3 세 번째 사례: Flightradar24

Flightradar24는 전 세계 항공기의 실시간 위치를 시각화 하는 서비스이다. 이 사이트는 항공기의 실시간 위치 데이터를 활용하여 사용자가 특정 항공기의 경로를 추적하고, 항공 교통 상황을 한눈에 파악할 수 있게 한다.

실시간 시각화는 사용자가 현재의 상황을 신속하게 이해하고 대응할 수 있도록 돕는다. 예를 들어, 항공사 운영자는 실시간 데이터를 통해 항공기 지연을 관리하고, 승객들은 자신이 탈 항공기의 상태를 실시간으로 확인할 수 있다. 다음 링크(https://www.flightradar24.com/51.47,0.46/6)에서 해당 사이트에 방문할 수 있다.

1.3 FE 개발자에게 데이터 시각화 지식이 필요한 이유

프론트엔드 개발자가 데이터 시각화를 이해하면 데이터 특성에 맞는 적절한 시각화 방법을 선택할 수 있다. 이는 다양한 유형의 데이터에 효과적인 시각화 기법을 적용하는 능력을 의미한다. 이러한 능력은 단순한 기술적 구현을 넘어서, 데이터의 본질을 파악하고 이를 가장 효과적으로 표현하는 방법을 고민하는 과정을 포함한다.

프론트엔드 개발자에게 데이터 시각화 능력은 매우 유용한 스킬이다. 데이터 시각화에 대한 지식을 쌓고 새로운 기술과 트렌드를 습득한다면, 경쟁력 있는 프론트엔드 개발자로 성장할 수 있을 것이다.

1.4 데이터 시각화에서 FE 개발자가 고려해야 할 점

데이터 시각화를 사용해야 하는 이유를 알았으니 이제 데이터 시각화에서 개발자가 고려해야 할 점을 살펴보자.

1.4.1 반응형

반응형 웹 디자인의 중요성이 커지면서, 다양한 디바이스와 화면 크기에서도 일관된 데이터 시각화를 제공하는 것이 중요해 졌다. 데스크톱부터 모바일까지, 사용자가 어떤 환경에서 접근하더라도 데이터를 명확하게 이해할 수 있도록 해야 한다. 예를 들어, 모바일 화면에서는 복잡한 그래프를 간소화하거나 중요 데이터를 강조하는 방식으로 디자인할 수 있다. 반응형 디자인을 통해 사용자 경험을 향상하고, 다양한 환경에서 일관된 정보를 제공할 수 있다.

1.4.2 접근성

데이터 시각화를 구현할 때 접근성을 고려하는 것도 매우 중요하다. 시각적으로 제한이 있는 사용자들, 예를 들어 색맹이나 시각 장애가 있는 사람들도 데이터를 쉽게 이해할 수 있도록 돕는 것이 중요하다. 이를 위해서는 대체 텍스트, 적절한 색상 대비, 그리고 키보드 내비게이션을 효과적으로 구현해야 한다.

예를 들어, 색맹 사용자를 위해 단순히 색상으로만 데이터를 구분하는 대신 패턴이나 텍스처를 사용하여 데이터 간 차이를 명확히 나타낼 수 있도록 해야 한다. 이는 색상만으로 데이터를 구분할 때 발생하는 문제를 해결하는 데 큰 도움이 된다.

또한 스크린 리더를 사용하는 사용자를 위한 배려도 필요하다. 차트나 그래프는 시각적인 요소가 강한 도구이기 때문에, 이를 이용하는 사용자가 충분히 그 정보를 이해할 수 있도록 대체 텍스트를 제공해야 한다. 이때 대체 텍스트는 단순한 설명에 그치는 것이 아니라, 그래프의 핵심적인 정보와 내용을 충실하게 전달할 수 있도록 구체적이어야 한다.

예를 들어, "이 그래프는 시간에 따른 매출 변화를 나타냅니다"와 같은 대체 텍스트보다는 "이 그래프는 2020년부터 2023년까지의 매출 변화 추이를 보여주며, 2021년에 매출이 급격히 증가한 것을 확인할 수 있습니다"처럼 상세한 설명을 제공하는 것이 바람직하다.

접근성을 무시한 데이터 시각화는 많은 사용자들에게 불편함을 줄 수 있으며 이는 사이트의 사용자 경험에 부정적인 영향을 미칠 수 있다. 실제로 접근성 문제는 사이트 신뢰도 하락과 직결될 수 있기 때문에 개발자는 이를 충분히 고려해야 한다. 다양한 사용자 환경과 요구에 대응하기 위해서는 상황에 맞게 접근성 요소를 철저히 반영하는 것이 좋다. 이를 통해 더 많은 사용자가 불편함 없이 데이터를 이해하고 활용할 수 있을 것이다.

1.4.3 직관성

직관성은 사용자가 데이터를 쉽게 이해하고 탐색할 수 있는 능력을 의미하며, 데이터 시각화에서 상호작용성을 제공하는 것은 직관성을 크게 향상시킨다.

예를 들어, 코로나 확산 데이터를 단순한 표로 나열하는 것보다, 지도 시각화를 통해 각 지역별 확산 상황을 시각적으로 보여주면 사용자가 확산 패턴을 더 직관적으로 이해할 수 있고, 지도를 클릭하거나 특정 날짜 범위로 필터링하는 기능을 제공하면 사용자는 데이터를 실시간으로 조작하며 필요한 정보를 더 쉽게 탐색할 수 있다.

Leaflet과 같은 상호작용 지도 라이브러리를 사용하여 이런 방식으로 데이터를 직관적으로 표현할 수 있다.