[인터랙션]인터랙티브 인포그래픽
2014. 2. 4. 00:25ㆍinspiration movie
지난 번 공유된 [모션 인포그래픽]에 이어 오늘은 인터랙티브 인포그래픽을 공유하려 합니다.
인포그래픽(Infographic)이란?
Information + Graphic
인포그래픽(혹은 인포메이션 그래픽) 이란 Information과 Graphic의 합성어로 많고 복잡한 정보(Text, Data, Statistics)를 수집, 분석, 가공하여 스토리텔링과 디자인을 통해 정보를 전달하는 시각적 표현입니다.
(인포그래픽코리아)
-그래픽 인포그래픽 : 정지된 이미지로 정보를 제공하는 인포그래픽
-모션 인포그래픽 : 정보를 영상화 하여 제공하는 인포그래픽
-인터랙티브 인포그래픽 : 인터랙션을 이용하여 정보를 제공하는 인포그래픽
1. Google - How search works
from : google
아래의 영상은 구글에서 검색이 이루어지는 과정을 설명하는 모션그래픽입니다.
Google "How Search Works" from Kinda Akash on Vimeo.
아래는 같은 주제를 인터랙티브 인포그래픽으로 풀어놓은 웹 사이트 입니다.
(웹 인포그래픽 시연 영상)
http://www.google.com/insidesearch/howsearchworks/thestory/
두 인포그래픽 모두 스토리텔링을 이용하여 딱딱한 정보를 재미있게 풀어나가고 있습니다.
모션그래픽의 스토리텔링은 일방향적이라면, 인터랙티브 인포그래픽의 스토리텔링은 쌍방향적이기 때문에 정보의 수용자가 읽고 있는 시점을 반영한 스토리텔링이 가능합니다. 뿐만 아니라 모션그래픽의 정보 우선순위는 생산자에 의해 결정되지만 인터랙티브 인포그래픽의 정보 우선순위는 수용자가 결정하기 때문에 스스로에게 의미있는 정보와 그렇지 않은 정보를 판단하여 더 머무르거나 건너뛸 수 있습니다. 구글의 웹 인터랙티브 인포그래픽은 마우스 롤 오버와 클릭을 잘 활용하여 각 요소들 안에 정보를 재미있게 녹여 놓았습니다.
2. Our choice
from : push pop press
아래의 영상은 지구 온난화에 대한 e book인 our choice 어플리케이션 홍보 영상입니다.
http://pushpoppress.com/ourchoice/
Our choice는 정보를 조작하는 방식이 직관적이고 효과적입니다.
예를 들어
(이미지 1) 태양의 위치를 옮김으로써 조도 정보를 즉각적으로 전달하는 인포그래픽
(이미지 2) 수평을 시간 축으로 두어 좌우 스크롤 시 입력된 정보가 적용 된 결과를 바로바로 확인할 수 있는 인포그래픽
(이미지 3) 풍력에 대한 정보를 전달하기 위해 직접 마이크에 바람을 불어넣는 방식 등이 재미있습니다. 특별히 풍력 에너지에 대한 인포그래픽은 전달하고자 하는 정보(풍력 에너지)와 입력 메타포(바람)를 잘 매치시킨 것 같습니다.
3. GI:K - Global Interactive Knowledge
product design : Olga Rau
interaction design : Adria Adele
'Out of Balance'를 주제로 한 아래의 작업은 '우리가 살고 있는 이 세계가 얼마나 불균형한가'란 메시지를 전달하는 인터랙티브 인포그래픽 입니다. 전 세계에 있는 각종 복잡한 정보들을 지구 형태의 디스플레이 조작을 통해 전달하는 점이 돋보입니다. 전달하는 주된 정보(전 세계에서 일어나는 사건)와 입력 메타포(지구)를 잘 매치시킨 또 다른 사례 입니다. 그러나 정보가 출력되는 방식과 입력 방식이 연결되지 않는 점은 아쉽습니다.
GI:K - Global Interactive Knowledge (The Making Of) from Ola Rau on Vimeo.
4. Water Pollution - Experiencing Abstract Information
from : tentactile - interactive space
아래의 영상은 각 국가별 수질 오염도를 보여주는 인터랙티브 인포그래픽 입니다.
국가를 상징하는 막대형 메타포를 물에 담그면 해당 국가로 인한 물 오염도 그래픽이 실제 물에 퍼지듯 나타납니다. 막대형 메타포를 조금씩 돌리면 화학산업 오염도, 식품산업 오염도 등 세부 항목의 정보도 함께 볼 수 있습니다. 수질 오염이라는 추상적인 정보를 의미있는 인터랙션 경험으로 가공하기 위해 촉각 메타포로 '물'을 사용했다는 점이 돋보입니다.
Experiencing Abstract Information from tentactile - interactive spaces on Vimeo.
5. IBM Think Exhibition
from : Sosolimited
아래 영상은 IBM이 창립 100주년을 맞아 링컨 센터에 설치한 독특한 전시물입니다. 이 설치작품은 과학과 기술을 통해 세상을 이해하고 개선하는 인간의 접근방식을 시각적으로 되짚어보는 것입니다. 전시장에 들어가면 다섯개의 섹션별 스크린-'Seeing', 'Mapping', 'Understanding', 'Believing', 'Acting'을 통해 인류가 진보해온 역사를 탐색할 수 있습니다.
이 과정에서 화면에 나타난 인포그래픽과 상호작용하면서 사용자 자신이 원하는 정보를 선택하고, 열람할 수 있는데요, 방대한 데이타와 콘텐츠를 한정된 공간과 이미지 안에 효율적으로 보여주는 것 같습니다. 또한 자신이 필요한 정보만을 선택적으로 보기 때문에 콘텐츠에 대한 집중도와 시간의 경제적인 측면에서도 효율적으로 보입니다.
IBM Think Exhibit from Sosolimited on Vimeo.
인터랙티브 인포그래픽의 장점
-모션 인포그래픽의 장점을 포함을 포함한다.
-수용자의 참여를 이끌어 내어 수동적인 정보 수용이 아닌 능동적인 정보 경험을 가능하게 한다.
-정보의 수용 시점을 사용자가 유연하게 설정할 수 있다.
글을 마치며
인터랙티브 인포그래픽은 정보를 보다 더 적극적으로 전달할 수 있기 때문에 이미 다양하게 사용이 되고있습니다. 다만 아쉬운 점이 있다면 의미있는 인터랙션이 사용된 사례가 적다는 점입니다. 사례를 조사하면서 모션, 메타포, in put 혹은 out put 인터랙션에 대한 선택이 단순히 '트랜드이기 때문에'라는 느낌을 많이 받았습니다. 인터랙션을 위한 인터랙션이 아닌, 타당한 이유를 갖는 인터랙션을 위해 고민이 필요한 것 같습니다.
[참고##영감 동영상##]
인포그래픽(Infographic)이란?
Information + Graphic
인포그래픽(혹은 인포메이션 그래픽) 이란 Information과 Graphic의 합성어로 많고 복잡한 정보(Text, Data, Statistics)를 수집, 분석, 가공하여 스토리텔링과 디자인을 통해 정보를 전달하는 시각적 표현입니다.
(인포그래픽코리아)
-그래픽 인포그래픽 : 정지된 이미지로 정보를 제공하는 인포그래픽
-모션 인포그래픽 : 정보를 영상화 하여 제공하는 인포그래픽
-인터랙티브 인포그래픽 : 인터랙션을 이용하여 정보를 제공하는 인포그래픽
지난 번 공유 된 모션 인포그래픽의 장점은 정보의 스토리화, 다양한 강조점 사용, 사운드 효과 등이 있었는데요. 인터랙티브 인포그래픽은 모션 인포그래픽의 장점을 포함하면서 동시에 수용자의 정보 수용을 능동적으로 이끌어 낼 수 있다는 점이 큰 특징입니다. 모션효과를 통해 흥미를 유발하여 수용자의 참여를 이끌어내고 이로써 정보를 쉽게 전달한다는 장점이 있지요. 뿐만 아니라 수용자가 직접 정보의 중요성을 판단하여 정보에 참여하고 습득한다는 면에서 모션 인포그래픽보다 적극적인 정보 전달이 가능합니다.
1. Google - How search works
from : google
아래의 영상은 구글에서 검색이 이루어지는 과정을 설명하는 모션그래픽입니다.
Google "How Search Works" from Kinda Akash on Vimeo.
아래는 같은 주제를 인터랙티브 인포그래픽으로 풀어놓은 웹 사이트 입니다.
(웹 인포그래픽 시연 영상)
http://www.google.com/insidesearch/howsearchworks/thestory/
두 인포그래픽 모두 스토리텔링을 이용하여 딱딱한 정보를 재미있게 풀어나가고 있습니다.
모션그래픽의 스토리텔링은 일방향적이라면, 인터랙티브 인포그래픽의 스토리텔링은 쌍방향적이기 때문에 정보의 수용자가 읽고 있는 시점을 반영한 스토리텔링이 가능합니다. 뿐만 아니라 모션그래픽의 정보 우선순위는 생산자에 의해 결정되지만 인터랙티브 인포그래픽의 정보 우선순위는 수용자가 결정하기 때문에 스스로에게 의미있는 정보와 그렇지 않은 정보를 판단하여 더 머무르거나 건너뛸 수 있습니다. 구글의 웹 인터랙티브 인포그래픽은 마우스 롤 오버와 클릭을 잘 활용하여 각 요소들 안에 정보를 재미있게 녹여 놓았습니다.
2. Our choice
from : push pop press
아래의 영상은 지구 온난화에 대한 e book인 our choice 어플리케이션 홍보 영상입니다.
http://pushpoppress.com/ourchoice/
Our choice는 정보를 조작하는 방식이 직관적이고 효과적입니다.
예를 들어
(이미지 1) 태양의 위치를 옮김으로써 조도 정보를 즉각적으로 전달하는 인포그래픽
(이미지 2) 수평을 시간 축으로 두어 좌우 스크롤 시 입력된 정보가 적용 된 결과를 바로바로 확인할 수 있는 인포그래픽
(이미지 3) 풍력에 대한 정보를 전달하기 위해 직접 마이크에 바람을 불어넣는 방식 등이 재미있습니다. 특별히 풍력 에너지에 대한 인포그래픽은 전달하고자 하는 정보(풍력 에너지)와 입력 메타포(바람)를 잘 매치시킨 것 같습니다.
3. GI:K - Global Interactive Knowledge
product design : Olga Rau
interaction design : Adria Adele
'Out of Balance'를 주제로 한 아래의 작업은 '우리가 살고 있는 이 세계가 얼마나 불균형한가'란 메시지를 전달하는 인터랙티브 인포그래픽 입니다. 전 세계에 있는 각종 복잡한 정보들을 지구 형태의 디스플레이 조작을 통해 전달하는 점이 돋보입니다. 전달하는 주된 정보(전 세계에서 일어나는 사건)와 입력 메타포(지구)를 잘 매치시킨 또 다른 사례 입니다. 그러나 정보가 출력되는 방식과 입력 방식이 연결되지 않는 점은 아쉽습니다.
GI:K - Global Interactive Knowledge (The Making Of) from Ola Rau on Vimeo.
4. Water Pollution - Experiencing Abstract Information
from : tentactile - interactive space
아래의 영상은 각 국가별 수질 오염도를 보여주는 인터랙티브 인포그래픽 입니다.
국가를 상징하는 막대형 메타포를 물에 담그면 해당 국가로 인한 물 오염도 그래픽이 실제 물에 퍼지듯 나타납니다. 막대형 메타포를 조금씩 돌리면 화학산업 오염도, 식품산업 오염도 등 세부 항목의 정보도 함께 볼 수 있습니다. 수질 오염이라는 추상적인 정보를 의미있는 인터랙션 경험으로 가공하기 위해 촉각 메타포로 '물'을 사용했다는 점이 돋보입니다.
Experiencing Abstract Information from tentactile - interactive spaces on Vimeo.
5. IBM Think Exhibition
from : Sosolimited
아래 영상은 IBM이 창립 100주년을 맞아 링컨 센터에 설치한 독특한 전시물입니다. 이 설치작품은 과학과 기술을 통해 세상을 이해하고 개선하는 인간의 접근방식을 시각적으로 되짚어보는 것입니다. 전시장에 들어가면 다섯개의 섹션별 스크린-'Seeing', 'Mapping', 'Understanding', 'Believing', 'Acting'을 통해 인류가 진보해온 역사를 탐색할 수 있습니다.
이 과정에서 화면에 나타난 인포그래픽과 상호작용하면서 사용자 자신이 원하는 정보를 선택하고, 열람할 수 있는데요, 방대한 데이타와 콘텐츠를 한정된 공간과 이미지 안에 효율적으로 보여주는 것 같습니다. 또한 자신이 필요한 정보만을 선택적으로 보기 때문에 콘텐츠에 대한 집중도와 시간의 경제적인 측면에서도 효율적으로 보입니다.
IBM Think Exhibit from Sosolimited on Vimeo.
인터랙티브 인포그래픽의 장점
-모션 인포그래픽의 장점을 포함을 포함한다.
-수용자의 참여를 이끌어 내어 수동적인 정보 수용이 아닌 능동적인 정보 경험을 가능하게 한다.
-정보의 수용 시점을 사용자가 유연하게 설정할 수 있다.
글을 마치며
인터랙티브 인포그래픽은 정보를 보다 더 적극적으로 전달할 수 있기 때문에 이미 다양하게 사용이 되고있습니다. 다만 아쉬운 점이 있다면 의미있는 인터랙션이 사용된 사례가 적다는 점입니다. 사례를 조사하면서 모션, 메타포, in put 혹은 out put 인터랙션에 대한 선택이 단순히 '트랜드이기 때문에'라는 느낌을 많이 받았습니다. 인터랙션을 위한 인터랙션이 아닌, 타당한 이유를 갖는 인터랙션을 위해 고민이 필요한 것 같습니다.
[참고##영감 동영상##]