Invisible Safety,

Proven by Intelligence

보이지 않는 안전을 인텔리전스로 증명하다.

기술 노트
IT 산업의 변화를 이끄는 MDS인텔리전스의
기술 인사이트를 만나보세요.
DX·AI
IoT 데이터 시각화 ⑷ – 시각화 방법
2026년 02월 12일

[ 연재 포스팅 ]

Rapid-IoT 데이터 시각화에 기반이 되는 이론 부분을 아래에 순서로 연재할 예정입니다.

실제 업무에서는 어떻게 활용이 되었는지를 파악하면서 진행하겠습니다.


1. IoT 데이터 시각화 ⑴ – 정의와 프로세스

2. IoT 데이터 시각화 ⑵ – 정보의 구조화

3. IoT 데이터 시각화 ⑶ – 정보의 시각화

4. IoT 데이터 시각화 ⑷ – 시각화 방법


지난 3편 포스팅에서는 데이터 시각화 단계 중 시각화를 알아보았습니다.

이번 시간에는 마지막 단계로 데이터에 시각화 방법에 대해 설명 드리겠습니다.


[그림 1]  정보 시각화 방법에 단계
(이지선, 빅데이터를 위한 데이터 시각화 분석: 3장 시각화 방법, p.2 재인용)

정보 시각 표현은 가장 마지막 단계로 앞서 3편에 포스팅에서 알아보았던 내용을 기반으로 마지막 단계인 그래픽적으로 디자인을 완성 시키는 단계라고 할 수 있습니다.

정보 시각 표현에 사용되는 정보 디자인의 그래픽 요소는 정보의 내용을 시각적 형식으로 전환해 전달 과정에서 사용자에 감각을 자극하여 정보를 쉽게 이해되도록 시각적 안내 역할을 하게 됩니다. 

─ 정보 시각 표현을 위한 그래픽 7요소

시각 정보를 보기 위해 뇌는 패턴을 감지하고 이를 해석한 뒤에 학습을 하게 됩니다.

예를 들어서 설명을 하면 뇌는 먼저 비슷한 물체, 즉 크기와 색깔이 똑같은 사각형들과 조금 달라 보이는 사각형 하나를 구분한 다음에야 나머지를 자세히 탐색합니다.

프랑스에 지도 제작인 자크베트탱(Jacwues Bertin, 1967)은 데이터의 관계적 구조를 기반으로 그래픽 요소들을 분석하였습니다. 이를 통하여 정보 시각화 방법을 제시하였고, 그래픽 요소에 관해서 ‘수치적(양적), 질적 데이터 간에 차이, 순서, 비율의 관계를 시각적으로 전화할 수 있는 가장 효율적인 수단이며, 사용자가 이를 통해 정보를 시각적으로 지각하고 이해하게 하는 절대적인 역할을 한다’고 하였습니다.

자크베르탱은 명도, 색상, 질감, 형태, 위치, 방향, 크기 7가지 그래픽 요소를 시각화의 원리로 제안하였습니다. 해당 그래픽 요소 7가지를 하나씩 알아보도록 하겠습니다.

1. 위치 (Position)

- 위치에 변화를 줌으로써 하나의 요소를 강조할 수 있습니다. 

아래에서는 같은 요소를 나열하면서 Y좌표 값에 변화를 줌으로써 강조를 했습니다. 특정 요소의 상대적인 위치를 확인합니다. 주변에 여타 요소와 관계를 비교할 수 있습니다. 크기와 마찬가지로 수치로 표현할 수 있습니다. 정보의 상하 구조를 효과적으로 전달할 수 있습니다. 가장 중요한 정보나 자주 쓰이는 기능은 좌측 상단에 배치합니다.


위치

2. 크기 (Size)

- 같은 크기를 갖고 있는 요소들이라면 하나만 작게 만들면 상대적으로 작은 요소가 강조되어 보이게 됩니다. 따라서 크기가 크고 적은 가의 문제가 아니라 같이 있는 것들 간에 관계에 따라 결정 되게 됩니다. 클수록 사람들에 시선을 끌게 되며, 크기는 수치로 표현할 수 있고, 순서로 구분할 수도 있습니다. 따라서 양과 중요도를 인지할 수 있습니다.


크기

3. 모양 (Shape)

- 같은 모양 중에 하나만 다른 모양을 취한다면 이것이 도드라지게 됩니다. 중요한 것은 비슷한 형태가 아닌 전혀 다른 형태로 바꾸어야만 강조돼 보이게 됩니다. 사람들은 외각선을 보고 대상을 인지하게 됩니다. 하지만 형태를 구분하는 능력은 색상이나 크기를 인지하는 능력보다 고도의 기술입니다. 형태만으로는 큰 대비 효과를 기대할 수 없습니다.



모양

4. 색 (Color)

- 같은 색이라면 다른 색을 쓴 것이 잘 보이게 됩니다. 대개의 경우 강조를 위해 보색을 쓰는 경우가 많습니다. 인쇄물의 보색과 스크린 상의 보색이 다름을 인지하고 선정하는 것이 중요합니다. 문화적 환경에 따라 다른 의미를 가지게 됩니다. 크기나 명암과 달리 수치로 표현하기 힘듭니다. 본질적으로 정량적인 속성이 아니기 때문입니다. 순서를 매기기에는 적합하지 않으며, 정보를 전달할 때 색상에만 의존해서는 안됩니다.


색

5. 명도 (Value)

- 하나만 명도가 유난히 높거나 낮다면 이것 또한 비교돼 잘 보일 수 있습니다. 명도가 높고 낮음은 색상보다 더 명시성에 영향을 주게 됩니다.


명도

6. 기울기 (Orientation)

- 같은 것들 중 하나의 기울기에 변화를 주어 시선을 유도할 수 있습니다. 시선은 반복에서 벗어나 변화를 감지해 강조한다고 느끼게 됩니다.


기울기

7. 질감 (Texture)

- 같은 색상과 형태일지라도 질감을 틀리게 주면 강조하게 만들 수 있습니다. 질감을 지나치게 많이 쓰면 좋지 않은 결과를 가져올 수 있기 때문에 신중하게 선택해야 합니다.


질감


─ 정보 시각 표현을 위한 그래픽 디자인 기본 원리

전체적인 시각화에 질적 향상을 위해서는 그래픽 디자인에 기본 원리를 바탕으로 완성을 해야 합니다. 이는 타이포그래피, 색상, 그리드, 아이소타이프는 시각화에 결과물에 질적인 부분을 크게 좌우하게 됩니다. 이러한 그래픽 디자인에 기본 원리 부분들을 설명하도록 하겠습니다.

1. 타이포그래피 (Typography)

​타이포그래피는 활자의 서체나 글자 배치 등을 구성하고 표현해 언어의 가 독성을 높이고 복잡한 데이터나 통계 수치 등을 일러스트레이션이나 사진, 차트, 다이어그램 등을 활용하여 한눈에 알아보기 쉽게 표현하는 방법입니다. 

​타이포그래피를 이해할 수 있도록 그래픽 시각화 사진을 한 장 보도록 하겠습니다. 먼터번드(munterbund)는 책에 있는 에세이들에서 텍스트 유사성을 그래픽 시각화의 결과로 하단에 사진을 기고 하였습니다. 에세이의 매력과 정보를 나타내는 그래픽과 타이포그래픽의 표현을 형태에 찾는데 초점을 맞춘 사진이라고 할 수 있겠습니다.

미리 정의 된 규칙에 따라서 그래픽을 자동으로 생성하는 시스템을 개발하여 적용하였고, 한가지 서체 만을 이용하였고, 크기의 변화를 주었으며, 범계를 같은 크기로 하고, 콘텐츠는 가중치에 따라서 크기를 변화해 표현한 그래픽 시각화에 결과물이라고 할 수 있겠습니다.


[그림 2]  munterbund, Graphical visualization of text similarities in essays in a book
(이지선, 빅데이터를 위한 데이터 시각화 분석: 3장 시각화 방법, p.71)

그럼 이제 타이포그래피에서 어떤 점이 중점이 되는지를 6가지 항목으로 나누어서 설명하도록 하겠습니다.

 1)  서체

정보 디자인에 있어서는 3가지 보다는 2가지의 서체 또는 1가지의 서체에 크기나 스타일의 변화를 주어 쓰는 것이 중요합니다. 가급적이면 영문과 한글 각각 한가지 서체를 쓰거나 한글 서체를 한가지 정하고 이를 변화해 쓰는 것이 효과적이며, 한글 서체와 영문 서체를 비슷한 느낌으로 주는 것이 더 좋은 표현이라고 할 수 있습니다. 하단은 영문과 한글 서체가 비슷한 느낌으로 표기했을 때 어떤 느낌이 드는지를 보기 위해서 표기한 사진입니다. 



한글 서체와 영문 서체에 비슷한 느낌 표현

서체 같은 경우 저작권 문제가 민감하기 때문에 웹이나 인쇄용으로 퍼블리싱 하는 경우 공개 폰트를 쓰는 것이 바람직하다고 할 수 있습니다.

  2)  무게

글자의 무게는 글자를 구성하는 획의 두께를 의미하게 됩니다. 시각적 정보표현에서는 심리적 무게 감에 따라 정보의 위계 표현이 가능합니다. 굵은 서체는 무게가 무거워 보이기 때문에 가는 서체와 함께 사용하면 위계 표현이 가능하게 됩니다.

다음은 글씨체에서 무게를 변경 했을 때 어떤 변화로 어떻게 시각화 되는지를 표현한 사진입니다.


글자에 무게 변화

  3)  크기

글자의 크기는 실제 글자의 크기가 아니라 글자의 배치되는 금속 활자판의 높이를 의미합니다. 따라서 같은 크기라 해도 서체에 따라 실제 글자의 크기가 달라지게 됩니다.

글자의 크기는 정보의 중요성 및 위계 관계를 보여줄 수 있으므로 글자 크기는 요소를 강조하거나 그 반대의 경우에도 사용하게 됩니다. 다음은 각 글자에 크기 변화로 어떻게 시각화 되는지를 표기한 사진입니다.

글자에 크기 변화

  4)  스타일

서체는 가로 세로의 비율, 각도에 따라 그 스타일 달라지게 됩니다. 이탤릭 체와 같이 기울이거나 장체, 평체처럼 글자의 폭을 좁히거나 넓히는 방법들도 존재합니다. 이러한 스타일을 통해서 정보의 차별화나 강조 등을 위해서 선택적으로 사용하게 됩니다. 다음은 각 글자에 스타일에 변화로 어떻게 시각화 되는지를 표기한 사진입니다.

글자에 스타일 변화

  5)  색

명도, 채도, 색상의 색채 속성을 활용해 정보를 분류할 수 있으며, 정보의 중요도나 종속의 관계 표현이 가능합니다. 글자가 놓이는 바탕색에 크게 영향을 받으며, 빛으로 글자를 표현하는 경우 청색은 후퇴 되어 보이기 때문에 자제해야 합니다. 다음은 글자에 색체에 따라 어떻게 시각화가 되는지를 표기한 사진입니다.


글자에 색채 변화

  5)  간격 (글자 사이, 낱말 사이, 글줄 사이)

가독성에 가장 큰 영향을 주는 부분이라고 할 수 있습니다. 읽어야할 다음 글자가 다른 글자보다 근접해 있어야 하며 이 때문에 글자 사이보다 낱말 사이가, 낱말 사이보다는 글 줄 사이가 넓어야 합니다. 다음은 간격에 따라서 어떠한 시각화 변화가 있는지 확인할 수 있는 사진입니다.

글자에 간격 변화

2.  색상

​흔히 많이 저지르는 실수 중 하나가 여러 색상을 함께 쓸 때 채도를 달리하면서 균형을 깨는 것일 수 있습니다. 색상을 쓸 때, 두 가지 색을 쓰는 경우 보색을 이용하고 명도와 채도를 같게 하면 됩니다. 시각화 결과물을 컴퓨터 모니터에서 제공한다면 가산 혼합 보색을 이용해야 합니다. 데이비드 맥캔들레스(David Mccandless)의 비타민과 같은 의학 보충제를 시각화한 스네이크 오일(Snake Oil) 프로젝트를 보면, 색상을 효과적으로 사용하는 모습을 볼 수 있습니다.


David Mccandless – Snake Oil 
(출처: https://www.informationisbeautiful.net/visualizations/snake-oil-scientific-evidence-for-nutritional-supplements-vizsweet/)

풍선 경주라 불리는 이 버블차트에서는 위쪽으로 갈수록 보충제에 대한 효과가 입증 된 것으로 볼 수 있습니다.

증명된 의학적 근거가 있는 상단 버블은 파란색을 그렇지 않은 것은 초록색에서 노란색까지의 그라데이션으로 표현하였습니다. 풍선의 크기는 구글 검색어 기준으로 인기도에 비례하도록 하였으며, 색상과 크기를 통해 즉각적으로 효과와 선호하는 보충제의 인기를 동시에 파악이 가능한 것입니다.

 1) 구분 표현

색상은 정보를 구분하고 묶는데 이용되게 됩니다. 시각적 대상물 구별에 색을 이용하는 것이 편리한 방법이고 쉽게 인지될 수 있기 때문에 많이 이용합니다. 색은 인간의 인지를 고려할 때 사용 숫자를 제한할 필요가 있습니다. 인간의 단기 기억력은 장기 기억력과 달리 시간이 조금만 흘러도 올바로 기억하지 못하기 때문입니다. 보통 사람이 분명하게 구분할 수 있는 색상은 대략 8가지라고 생각하면 됩니다.

 2) 순서 표현

순서나 위계가 필요한 정보는 색의 단계로 표현이 가능합니다. 검은색에서 하얀색으로 이어지는 명암 단계나, 스펙트럼에서 빨간색으로부터 녹색으로 이어지는 단계, 노란색에서 파란색으로의 단계를 이용해 분명하게 구분하면 위계를 명확히 할 수 있습니다.

순서와 위계는 색의 채도 단계로도 표현이 가능합니다. 섬세한 순서와 상태를 표현하는 데는 무채색의 단계가 정보를 더 명확하게 전달할 수 있습니다. 명도와 채도의 복합 개념이라 할 수 있는 톤은 선형적 단계를 표현하므로 정보의 순서와 위계를 표현하는데 활용이 가능합니다.

 3) 비율 표현

비율을 색으로 표현할 수는 없지만, 시각적으로 구별할 정도로 표현이 가능합니다. 비율의 연속은 0을 중심으로 0을 중립적인 명도로 표시하고 위, 아래의 수치들은 상반되는 두 가지 색을 사용하는 것입니다. 예를 들어 회색을 기준으로 0이라 했을 때, 빨간색이 늘어나면 부정적 수치가 증가하는 것이고, 녹색이 늘어나면 긍정적 수치가 늘어나는 식에 표현이 가능한 것입니다.


색상을 비율적으로 표현하는 열지도화

 4) 색채 사용과 인지

색을 통해 정보를 이해할 때 인간의 지각과 인지 작용이 관여를 하게 됩니다. 지각된 색채 정보들이 서로 충돌 없이 인지될 때 정보의 해석이 빠르고 수행 결과도 최적화하여 시각화 할 수 있습니다. 

색을 잘못된 사용으로 혼란을 야기할 수 있는 경우

색이 잘못된 사용으로 사람이 인지할 때 혼란을 야기할 수 있는 경우를 표현한 사진입니다. 금지를 상징하는 붉은색과 허용을 상징하는 녹색이 반대의 의미로 사용되어 기존의 지식이나 관습과 충돌하게 됩니다. 색을 사용 할 때는 이러한 관습 및 기존에 지식에 맞춰서 사용해야 합니다.

3. 그리드

현대 디자인에서는 가장 중요한 원리 중에 하나가 그리드를 이용하는 것이라고 할 수 있습니다. 단지 데이터만 제시하는 등의 단순한 시각화를 할 때는 적게 적용하지만, 디자인 안에 여러 요소를 복합적으로 배치할 때는 반드시 그리드를 계획하고 지켜야 시각적으로 우수한 디자인을 완성할 수 있습니다.
인쇄 디자인 뿐 아니라, 모션 인포그래픽과 인터랙션 정보 디자인에서도 그리드는 중요한 요소라고 할 수 있습니다. 그리드를 이용해 블록 레이아웃을 잡고 그 위에 요소를 효율적으로 올려 놓아 전체적인 조화 추구가 중요하게 됩니다.

​니콜라스 펠톤은 자신의 데이터를 이용해 2005년 첫번째 개인 연차 보고서를 발표한 이래 매년 발표해 오고 있습니다. 펠톤의 연감을 보면 타이포그래피와 그리드를 이용해 정보 디자인의 완성도를 끌어올린 사진을 하단에 표기하였습니다.

​좌측 페이지와 우측 페이지에 각각 4단 그리드를 구성하고 좌에서 우로 가로지르는 숫자들의 위치도 그리드에 맞추어 같은 위치에 구성한 화면을 볼 수 있습니다.

니콜라스 펠톤의 2012 연차 보고서

1) 하나의 화면을 읽는 방식

디자인 요소를 레이아웃 안에 배치할 때 사람의 눈이 움직이는 방향을 생각해야 합니다. 사람의 눈은 이미지나 본문을 훑어볼 때 하나의 화면의 특정 영역에서 다른 부분보다 더 뜨겁고 활발한 움직임이 드러나게 됩니다.

인간의 눈은 습관적으로 상단 왼쪽의 입구를 본 다음 하단 오른쪽 귀퉁이로 훑어 내려가게 됩니다. 아래 예제에서 색의 농도는 가장 강하게 주목되는 초점이 어디인지를 보여주게 됩니다. 이러한 원리를 이용하여 주요 디자인 요소를 더 두드러지거나 아니면 눈에 덜 띄게 배치가 가능하게 됩니다.

화면을 읽는 방식

2) 정보의 역피라미드

가장 중요하고 강력한 정보가 맨 위로 가고 이차 정보가 뒤에 따르며 더 일반적인 정보는 마지막에 오도록 표기하는게 좋습니다. 보는 사람이 화면의 모든 텍스트를 읽지 않을 것이므로 가장 중요한 정보가 앞장서고 그 다음 중요한 것이 뒤따라서 합니다.
디자인 구조는 그리드 상단을 효과적으로 이용하고 극대화할 필요가 있습니다.

정보의 역 피라미드

3) 망 그리드

개략적인 그리드를 갖고 작업하면 배치할 때 선택 안이 줄어들겠지만 일관성이 생기고 실험의 여지도 남겨 놓기 때문에 역설적으로 디자인이 쉬워지게 됩니다. 망 그리드는 수평선과 수직선의 연속이 개체를 배치하는 지침이 되어 일관성 있고 정확하게 개체를 배치가 가능하게 됩니다.


망 그리드

4)  3등분의 법칙

이 법칙은 이미지 구도와 레이아웃의 지침으로 한 개의 화면에 3x3 그리드를 포개 그리드 선이 교차하는 곳을 적극적 핫스팟으로 삼아 역동적인 결과를 배치하게 됩니다.
하단에 보이는 점들이 핫스팟으로, 한 핫스팟에 항목들이 규칙적으로 떨어지지 않아도 핵심요소를 그 가까이에 배치하면 구성에 역동성을 더할 수 있습니다.


3등분의 법칙

4. 아이소타입 

아이소타입(ISOTYPE, International System of Typographic Picture Education)은 많은 양의 데이터를 쉽게 지각할 수 있도록 도와주는 시각 표현 방법이라고 할 수 있습니다.

1930년대에서 40년대 사회학자이자 철학자 오토 노이라트(O. Neurath), 교육학자 마리 라이데마이스터 (M. Reidemeister) 와 미술가 게르트 아른츠(G. Arntz)를 중심으로 개발된 시각 언어 체계를 의미한다.
국제적인 그림 언어 체계로 갖가지 지식을 조직적으로 시각화 하였습니다.
정보, 자료, 개념 , 의미 등을 나타내기 위해 문자와 숫자 대신 상징적 도형이나 정해진 기호를 조합해 시각적이고 직접적으로 나타내는 방식을 뜻합니다.

​교육을 목적으로 특정 단어나 문장을 간략화 한 도형으로 제작해 국제적으로 통용할 수 있는 소통수단으로 삼으려고 하였습니다. 하나의 기호가 일정 수량을 대표한다는 것이 중요한 포인트라고 할 수 있습니다. 각종 시각적 수단을 통해 정보를 소통해온 인류의 전통에 기대고 있어, 아이소타이프 도표의 기호들은 시공간을 초월해 읽혀야 한다고 합니다. 1960년부터 활동한 미국 디자이너 리처드 솔 워먼은 “이해를 결정하는 것은 사물 그 자체가 아니라 우리가 사물과 함께 연상하는 의미나 패턴” 이라 말하였으며, 이미지를 활용해 정보를 명확하게 전달하는 방식으로써 아이소타입을 이용해서 그래프를 표현하는 수단을 자주 활용하였습니다. 이러한 아이소타입을 이용한 그래프 중 유명한 그래프인 동물은 얼마나 오래 사는가? 를 표현한 그래프는 하단과 같습니다. 각 동물이 얼마나 사는지를 라인에 동물에 아이소타입을 이용해서 표기하여 그 내용을 한눈에 파악할 수 있도록 한 그래프입니다. 

최근 들어서는 이러한 아이소타입이 아이콘 등으로 발전했다고 보시면 됩니다.

동물은 얼마나 오래 사는가? By Downy Design
https://cargocollective.com/jdowny/How-Long-Do-Animals-Live

─ 정보 시각 표현을 위한 인터랙션

대량의 데이터를 정보로서 의미 있고(meaningful) 이해할 수 있으며(understandable) 유용한(usable) 기술과 방법으로서 인터랙션이 많이 사용되게 된다. 시각화 툴 자체가 인터랙션 형태로 이뤄진 경우가 많으며 이러한 시각화에서의 인터랙션은 사용자 스스로 정보를 필터링 하고 탐색하는 과정에서 인사이트를 얻어갈 수 있는 기회를 제공할 수 있습니다. 

디지털 미디어의 정보 디자인은 인터페이스와 인터랙션의 문제와 연계되며, 이러한 분리할 수 없는 관계가 설정되게 됩니다. 특히 정보 디자인에서 디지털 미디어의 인터페이스와 인터랙션은 상호 의존적이라고 할 수 있습니다. 대부분의 인터랙션 위에 구현된 정보 디자인은 비선형적 구조로, 정보 제시 순서가 고정되어 있지 않고 사용자가 정보에 임의로 접근하고 선택적으로 탐색을 할 수 있습니다.

이는 정보 전달과정에서 시간 제약이 없기 때문에 사용자의 정보 이용이 능동적이며, 비교적 자세하게 탐색하기 때문에 정보의 전달 효과 또한 높습니다. 정보 메시지도 다양하게 조직화 할 수 있으며, 디지털 미디어의 상호 작용 특성으로 정보의 폭과 깊이를 사용자가 통제할 수 있게 됩니다.

디지털 환경에서 정보 전달을 위한 인터랙션은 사용자에게 데이터와 정보를 단순히 전달하는 것이 아니라, 정보 사용자의 행동이나 조작에 따른 반응, 감각의 확장, 정보 시각화의 변화 등으로 정보와 정보 사용자간의 관계를 확장하고 심화하는 것입니다.

정보를 둘러싸고 생성된 인터랙션은 정보 사용자에게 인상에 남는 다른 모습을 보여주는 것이며, 정보에 대한 흥미를 높이고 궁극적으로 정보에 대한 새로운 경험을 제공하게 됩니다. 인터랙션은 사용자의 참여를 유도해 적극적으로 정보에 접근하게 하며, 흥미를 유발해 정보에 대한 관여도를 높이는 역할을 하게 됩니다.

인터랙션에 효과

1. 강조하고 디테일을 보여주는 방식

웹의 진화 (Evolution of the Web) 라는 시각화 프로젝트는 하이라이트 방식의 강조를 이용해 사용자의 적극적 개입을 유도합니다. 색상이 들어간 곡선들은 다른 브라우저에서 적용되는 기능과 마찬가지로 사용자의 마우스 움직임에 반응하여 강조되게 됩니다.


웹의 진화 시각화
http://www.evolutionoftheweb.com/

2. 사용자가 콘텐츠를 선택하는 방식

인터랙티브 시각화의 장점 중 하나는 콘텐츠 보는 방식을 사용자가 결정할 수 있다는 점입니다. 사용자는 데이터 변환 컨트롤을 이용해서 다른 구조의 비슷한 데이터 세트를 불러오는 템플릿 위에 자신이 필요한 데이터만을 취사 선택해서 볼 수 있습니다.

이러한 방식의 인터랙티브 시각화는 비교 가능한 통계 그래프보다 더 많은 데이터 세트를 관찰 할 수 있도록 해야 합니다.

그 예로 당신과 같은 가구는 얼마나 있는가? 에서 사용자는 가족구성원을 더하거나 빼면서 기본 가구 타입을 선택할 수 있다. 변경의 경우에, 즉각적으로 반영되는 시각화 정보가 보여진다. 이러한 인터랙션은 수많은 가구 타입을 데이터를 한꺼번에 보지 않아도 많은 다른 종류의 가구 타입의 데이터를 보는 것이 가능하게 됩니다.

당신과 같은 가구는 얼마나 있는가?
https://archive.nytimes.com/www.nytimes.com/interactive/2011/06/19/nyregion/how-many-households-are-like-yours.html?_r=0

3. 여러가지 방법으로 데이터 보여주기

단일 그래픽 표현은 전형적으로 한 번에 특정 방법으로 몇 차원 만을 보여줄 수 있습니다. 예를 들면, 지도는 지리적 위치와 시간 흐름의 타임라인을 강조하게 됩니다. 지도에서의 축소/확대 기능인 팬앤줌(Pan and zoom)과 같은 인터랙션은 잘 알려진 표현 방법입니다. 다중 기준 부분을 복합하고 조정하여 사용자는 같은 시간에 데이터세트의 다른 면을 볼 수 있게 됩니다.​

가디언지가 선보인 트위터에서 소문이 어떻게 퍼지나(The how riot rumours spread on twitter) 시각화는 버블차트의 콘텐츠를 조정하기 위해 선 그래프를 이용합니다. 선 그래프는 소문과 관계된 시간당 트위터들과 중요한 이벤트들을 강조해 보여주게 됩니다. 버블 차트는 다른 트위트들도 보여주는데, 이 트위트와 관련된 정보입니다. 사용자는 애니메이션으로 시각화를 실행할 수 있으며, 직접 인터랙션을 해 볼 수도 있습니다.


트위터에서 소문이 어떻게 퍼지나 시각화
https://www.theguardian.com/uk/interactive/2011/dec/07/london-riots-twitter

4. 사용자에 의해서 시각 맵핑 변화

멀티 조정 시각화(Multiple coordinated visualizations)는 각각의 시각화가 있는 작은 화면 공간이라는 제약을 벗어나 동일 시간대에 데이터를 다양한 관점을 보여주는 것을 의미합니다. 사용자가 시각화 유형을 지정할 수 있도록 시각 데이터 재매핑을 지원해야하며, 시각화크기를 극대화 하도록 해야 합니다.

‘뉴욕타임즈’ 의 허리케인 아이린에 따른 홍수, 정전, 폭우와 피해라는 인터랙티브 시각화는 사용자가 설정할 수 있는 4개의 다른 맵을 제공합니다. 사용자가 다른 설정을 선택 할 때, 데이터 가 맵 위에 시각 레이어를 프로젝션 하는 방식으로 나타내게 됩니다. 허리케인의 경로를 포함한 지도와 그 이후의 스토리는 일정한 프레임에 참고자료로 이용되고 있습니다.

허리케인 아이린에 따른 홍수, 정전, 폭우와 피해 시각화
https://archive.nytimes.com/www.nytimes.com/interactive/2011/08/27/us/preparations-for-hurricane-irene-and-reports-of-damage.html

5. 사용자의 관점과 의견이 반영되는 형태

인터랙션 시각화의 가장 매력적인 부분은 사용자의 관점과 의견이 반영될 수 있도록 한다는데 있습니다. 사용자의 주관적 관심과 데이터 표현을 혼합하는 시각화는 주제를 표현하는 사용자 반응 프로세스의 가장 중요한 부분이라고 할 수 있습니다.

OECD의 더 나은 삶 지수 시각화는 국제협력개발기구(OECD)가 개발한 것으로 각 국가를 나타내는 꽃 은 11개의 꽃잎으로 구성되어 있습니다. 각 꽃잎은 주거환경, 보시, 가구별 소득 같은 OECD에서 수집한 개별 항목을 나타내게 됩니다. 

나라의 꽃이 높게 있으면 해당 국가의 웰빙 예측치가 높은 것을 의미합니다. 또한 이 시각화는 인터랙티브 버전으로 거주, 삶의 만족도, 교육 등의 다른 주제의 중요 비율을 사용자가 설정하도록 한다. 각 주체 측정은 사용자가 생각하는 주관적인 지표에 의해 결정하게 됩니다. 개인적으로 중요하게 생각하는 것은 다른 통계 그룹과 비교돼 결과치를 소셜 미디어를 통해 공유할 수 있게 되어 있습니다.


OECD 더 나은 삶 지수 시각화
http://www.oecdbetterlifeindex.org/#/11111111111

─ 정보 시각 디자인 7원칙


정보 구조화, 정보 시각화, 정보 시각 표현을 거쳐 최종적으로 시각화가 완성된다고 할 수 있습니다. 에드워드 터프티(Edward Tofte)는 다음과 같은 시각정보 디자인 7원칙을 제시하였습니다.

1. 시각적 비교를 강화하라

연관된 변수와 트렌드를 비교할 수 있는 도구를 제공해야 한다. 정보는 비교를 통해 사용자에게 더욱 가치가 올라간다.

2. 인과 관계를 보여라

정보를 디자인할 때 원인과 결과를 명쾌하게 제시하라

3. 다중 변수를 표시하라

여러개의 연관된 변수를 활용해 정보를 표현하는 데이터도 있다

4. 텍스트, 그래픽, 데이터를 조화롭게 배치하라

라벨과 범례가 도표에 녹아 있는 다이어그램이 더욱 효과적이다

5. 콘텐츠의 질과 연관성, 진실성을 분명히 하라

보여주려는 정보가 과연 사용자가 특정 목적을 달성하는데 도움이 되는지를 고민하라

6. 시간순이 아닌 공간순으로 나열하라

시간보다는 공간에 따라 나열할 때 사용자의 이해가 쉬워진다

7. 정량적 자료의 정량성을 제거하지 마라

트렌드를 나타내기 위해 정량적 자료를 그래프나 도표로 표현할 수 있다. 정량적인 정보를 한 눈에 파악할 수 있기 때문이다



에드워드 터프트(Edward Tofte)는 ‘훌륭한 시각 디자인은 시각적으로 표현된 명쾌한 생각’ 이라고 말했다고 합니다. 보는 이의 인지적인 과업과 디자인 원칙을 깊이 이해해야 훌륭한 시각화 작업을 할 수 있다고 생각합니다.

데이터 시각화에 대한 많은 부분들을 소개 드렸습니다. 자 마지막으로 정리를 하자면,앞서 설명 드렸던 내용처럼 세상에 많은 존재하는 것들에게서 데이터로 수집 가능한 것들을 IoT 디바이스를 통해서 수집을 한 후 이를 분류하고 배열해보고 다시 재배열을 한 후 데이터들이 정보화 되었을 때 이를 바탕으로 각 시각화 방법들 중 정보에 맞는 시각화 방법을 찾아보고, 이를 그래픽 요소들을 도입 하고 기본원리에 맞춰서 사용자에 인터랙션에 따라 정보를 통해 다양한 경험을 가져갈 수 있는 시각화를 저희 Rapid-IoT를 이용하시라는 말씀을 드리고 싶습니다.

다른 글을 보시면 아시겠지만 이미 많은 프로젝트에 경험을 기반으로 앞서 설명 드렸던 탄탄한 시각화 방법을 통해서 고객님에 모니터링과 디바이스 관리, FOTA까지 IoT 매니지먼트에 있어서 Rapid-IoT는 큰 성과를 드릴 수 있습니다. 

​긴 글을 읽어주셔서 감사합니다.