랜딩페이지에 인터랙티브 인포그래픽을 활용한 최고의 사례입니다. 대화형 인포그래픽을 만드는 방법: 데이터 시각화를 위한 초보자 가이드

아마도 온라인 세계가 텍스트 기반 콘텐츠에서 시각적 콘텐츠로 크게 변화하고 있다는 것을 눈치채셨을 것입니다.

인터넷과 일상생활에서 영상이 갖는 힘은 부인할 수 없습니다. YouTube와 Instagram은 시각적 콘텐츠가 지배적입니다. YouTube는 웹에서 세 번째로 가장 많이 방문하는 사이트이며 Instagram에는 매일 8천만 개가 넘는 사진이 게시됩니다.

블로그 게시물과 기사에 컬러 이미지, 헤드라인, 썸네일이 포함되어 있으면 소비될 가능성이 80% 더 높으며, 사람들의 관심을 즉시 끌지 못하는 사이트에서는 사람들이 사이트에 15초 이상 머물지 않습니다.

인포그래픽은 청중과 소매업체 사이에서 인기가 높으며 2012년보다 오늘날 사람들에게 800% 더 흥미로워졌습니다.

게다가 콘텐츠는 놀라운 속도로 생성되고 있습니다. 마케팅 담당자의 60%가 매일 최소한 소량의 새로운 콘텐츠를 생성합니다! 리뷰 기사를 통해 자세히 알아볼 수 있습니다.

점점 더 많은 사람들이 콘텐츠를 만들기 시작하면서 한 가지 분명해지는 것은 눈에 띄기 위해서는 눈에 띄어야 한다는 것입니다.

당연히 콘텐츠 마케터들은 이미 시각적 콘텐츠의 미래에 대해 생각하고 있으며, 현재 무엇을 할 수 있는지, 무엇을 구현할 수 있는지, 어떤 새로운 기술이 곧 나올지 고민하고 있습니다. 이러한 유형의 미래 지향적 사고가 콘텐츠 마케팅 노력을 성사시키거나 망칠 수 있습니다. 적응해야 합니다. 그렇지 않으면 익사할 것입니다.

인포그래픽과 같은 시각적 콘텐츠를 통해 마케팅 담당자는 다가오는 미래를 볼 수 있는 독특한 기회를 갖게 됩니다. 회사, 그래픽 디자이너 및 마케팅 담당자는 모두 인포그래픽을 사용하고 업데이트하여 청중에게 더욱 매력적으로 보이기 시작했습니다. 이미 정기적으로 인포그래픽을 "게시"하고 있더라도 이제 막 발전하기 시작한 트렌드를 알아보는 것이 너무 이르지 않은 것처럼, 이를 콘텐츠 마케팅 전략에 구현하는 방법을 배우는 것도 너무 이르지 않습니다.

미래를 내다보고 싶고, 다른 사람들보다 먼저 몇 가지 요령을 배우고 싶다면 지금이 바로 그때입니다!

가까운 미래에 가장 보편화될 세 가지 유형의 인포그래픽은 다음과 같습니다.

멋진 인포그래픽 제작 도구를 찾고 있다면 Visme을 확인해 보시기 바랍니다. 우선, 그들은 디자이너가 아닌 사람들을 위한 무료 계정과 뛰어난 사용자 친화적인 기능을 제공합니다. 지금 무료 계정을 얻을 수 있습니다.

1. 인터랙티브 인포그래픽

우리는 대화형 웹사이트와 사용하기 쉬운 게임의 아름다움을 보아왔지만, 대화형 인포그래픽은 해당 분야에서 여전히 상당히 새로운 것입니다. 인포그래픽과 마찬가지로 일부 정보가 분명히 포함되어 있으며 일반적으로 동적입니다. 그러나 대화형 요소를 사용하면 사용자는 정보에 연결하고 자신만의 정보를 만들 수 있는 기회를 얻을 수 있습니다.

귀하의 비즈니스, 제품, 서비스 또는 메시지에 관계없이 사람들이 스스로 평가할 수 있는 대화형 인포그래픽을 만들 수 있습니다(예: "여기서 BMI를 계산하세요"). 또한 사용자는 관련 정보를 클릭하여 더 심층적인 리소스로 보내거나 랜딩 페이지로 돌아가 트래픽을 생성할 수 있습니다. 청중의 참여를 유도하는 매우 적응력이 뛰어나고 재미있는 방법입니다.

많은 마케팅 담당자는 이미 이러한 유형의 인포그래픽에 적응했으며 빠르게 전달됩니다. 그러나 동시에 많은 사람들이 여전히 기초로 삼고 있습니다. 간단한 인포그래픽:

....대화형 인포그래픽으로 또 무엇을 할 수 있는지 상상해 보세요.

당신은 시도 할 수 있습니다:

• 이미지나 모양을 배경에서 돋보이게 만드는 스크롤 기술 사용
• 텍스트 영역을 확장하는 "팝업 창" 구축
• 클릭하면 이미지나 통계가 팝업됩니다.
• 인포그래픽을 사용자가 볼 수 있는 여러 페이지로 전환하세요.

대화형 인포그래픽의 더 자세한 예를 보려면 다음을 살펴보세요.

인포그래픽을 고도의 대화형(스크롤링, 팝업 등 포함)으로 만들려면 HTML5 또는 CSS에 대해 조금 배우거나 이를 알아낼 다른 사람을 고용해야 합니다.

추가적인 노력에도 불구하고 독특하고 매력적이며 효과적인 콘텐츠로 보상을 받게 될 것입니다.

가까운 시일 내에 인포그래픽을 구현하려고 노력해야 하는 이유는 무엇입니까?

• 이는 청중이 귀하의 콘텐츠에 참여하고 공유하도록 장려합니다.
• (링크를 통해) 트래픽이 발생합니다.
• 이는 귀하가 혁신적이고 수완이 풍부하며 시기적절하고 흥미로운 콘텐츠를 제공하려는 의도가 있다는 것을 청중에게 증명합니다.
• 개발을 관리하기 쉽게 만드는 대화형 인포그래픽 레이어가 있습니다.

2. 삽입된 비디오 및 GIF

이것은 오늘날 우리가 점점 더 자주 보는 다른 유형의 인포그래픽입니다. 짧은 비디오 또는 GIF(Graphics Interchange Format)를 제공하는 인포그래픽은 관심을 끌고 인포그래픽을 돋보이게 만드는 좋은 방법입니다. 이는 플랫폼에 따라 제한되지만 인포그래픽을 현재 시제로 공유할 수 있습니다.

Easel.ly와 같은 많은 간단한 인포그래픽 도구는 "포함된 YouTube 비디오" 옵션을 제공하거나 비디오 레이어를 사용하여 Photoshop에서 만든 인포그래픽에 비디오를 추가할 수 있습니다. PowerPoint 슬라이드에 비디오를 추가하여 인포그래픽으로 만들 수도 있습니다.

게다가 온라인에서 수백만 개의 GIF를 찾아 같은 방식으로 삽입할 수도 있습니다. 여기서 중요한 점은 인포그래픽이 사이트에 제대로 삽입되었는지 확인하기 위해 인포그래픽을 URL로 배포해야 한다는 것입니다. 그러한 인포그래픽을 .jpeg 또는 PDF 형식으로 배포하거나 저장할 수 없습니다. 의심할 바 없이 이것이 대중화되면서 프로세스를 더욱 쉽게 만들어주는 다른 비디오 및 GIF 삽입 도구가 있을 것입니다.

하지만 주변의 모든 사람, 심지어 개까지 배우기 전에 이러한 유형의 인포그래픽을 사용하려면 지금 온라인에서 찾은 도구를 사용하여 시작하십시오.

다음 단계로 나아가고 싶다면 이미 가지고 있는 인포그래픽으로 비디오를 만들 수 있습니다. 이는 YouTube, Instagram은 물론 Vimeo, Snapchat 등과 같은 비디오 플랫폼에서도 볼 수 있는 좋은 기회입니다. 아래 영상은 인포그래픽을 영상으로 바꾸는 방법을 보여주는 좋은 예입니다.

인포그래픽에 비디오나 GIF를 삽입하는 이유는 무엇입니까?

• 이는 놀라운 요소를 제공합니다. 사람들은 그림이 움직일 것이라고 기대하지 않습니다!
• 매우 재미 있고 독창적이므로 사람들이 상호 작용하고 인포그래픽을 공유할 가능성이 높아집니다.
• 이는 모든 사람에게 브랜드의 독창성을 보여줄 수 있는 좋은 방법입니다.

3. 애니메이션 인포그래픽

애니메이션 인포그래픽은 수많은 시각적 패턴을 갖고 있어 많은 주의가 필요합니다. 사용자는 페이지를 볼 때 일반적으로 어떤 것도 이동할 것이라고 기대하지 않으므로 다른 사람보다 먼저 이러한 기술을 모두 익히는 것이 좋습니다.

많은 애니메이션 인포그래픽은 매우 복잡하고 일종의 그래픽 디자인, 코딩 및/또는 소프트웨어 지식이 필요할 수 있으므로 매우 높이 평가됩니다.

제가 말하는 내용의 예는 다음과 같습니다.

애니메이션 인포그래픽을 만드는 방법에 대해 자세히 알아보려면 Tabletop Whale의 인포그래픽을 확인하세요. 이런 종류의 인포그래픽을 만드는 데 도움이 되는 다양한 서비스도 찾을 수 있습니다. 어쨌든 이것은 인포그래픽의 진화에서 가장 어려운 과정 중 하나입니다.

애니메이션 인포그래픽을 만드는 데 시간, 에너지 및/또는 돈을 투자해야 하는 이유는 무엇입니까?

• 모든 사람이 이러한 종류의 소프트웨어나 콘텐츠에 액세스할 수 있는 것은 아니기 때문에 이는 실제로 귀하를 군중 속에서 돋보이게 만들 것입니다.
• 불과 몇 년만 지나면 이런 일은 흔한 일이 될 것입니다. 여러분은 이 일을 하는 첫 번째 사람이 될 것입니다!
• 애니메이션은 인포그래픽 내부의 정보를 더욱 기억에 남게 만듭니다.
• 이는 사용자가 귀하와 협력하도록 영감을 줄 것입니다.

이것은 공상 과학 소설이 아닙니다.

지금 당장은 너무 기술적이고 귀하의 능력을 넘어서는 것처럼 들릴 수도 있지만 이러한 유형의 인포그래픽은 2~3년 안에 매우 보편화될 가능성이 높습니다. 특히 GIF의 인기가 지속적으로 증가함에 따라 애니메이션 인포그래픽과 GIF에서 이미 강력한 혁신을 볼 수 있습니다. 인포그래픽은 인터넷에서 가장 많이 소비되고 가장 자주 생성되는 콘텐츠 유형 중 하나가 되고 있습니다. 왜? 그렇습니다. 뇌가 상징의 의미를 받아들이고 처리하는 데 250밀리초만 필요하기 때문입니다.

평균적인 사람이 사이트에서 약 15초를 보낸 후 지루해지기 시작하면 자연스럽게 화면에 방해가 되는 모든 항목을 표시하거나 최소한 15초 이내에 메시지를 받고 싶을 것입니다. 일부 연구에 따르면 사람들은 8초 이상 집중할 수 없으며 이 수치는 매년 감소하고 있습니다.

이것이 바로 정보를 받아야 하는 우리의 끊임없는 욕구의 이유이자 부산물일 수도 있습니다. 우리는 정보화 시대에 살고 있으며 모든 정보를 이용할 수 있습니다. 그러나 이는 또한 더 많은 사람들이 메시지를 공유하고 가능한 모든 질문에 답하려고 노력할수록 더 많은 콘텐츠가 배경 소음이 된다는 것을 의미합니다.

오늘날 인포그래픽이 이용 가능하다는 사실을 알면 머지않아 모든 곳에서 인포그래픽이 활용될 것입니다. 이는 작업에 새로운 변화가 있음을 의미합니다. 역사상 어떤 마케팅 캠페인도 같은 일을 반복해서 성공하지 못했습니다.

여기서의 아이디어는 인포그래픽을 단순한 jpeg 이미지 이상으로 보는 것입니다. 인포그래픽은 다양한 매체에 적용할 수 있으며 매우 다양한 플랫폼에서 사용될 수 있습니다. 기업가와 마케팅 담당자는 이미 이에 대한 잠재력을 확인했습니다. 당신은요?

인터랙티브 인포그래픽이란 무엇입니까? 이것은 고객이 점점 더 많이 묻는 질문입니다. 최근까지 소수의 에이전시와 스튜디오에서는 일반적으로 우리가 말하는 내용을 이해했지만, 오늘날 시대에 발맞추는 통신 회사는 이 서비스를 가격표에 포함시킬 뿐만 아니라 효율적으로 수행할 의무도 있습니다. 불행히도 아직 모든 사람이 이것을 할 수 있는 것은 아닙니다.

대화형 인포그래픽에는 여러 유형과 정의가 있습니다.

첫째: 대화형 인포그래픽은 표시되는 데이터를 제어하는 ​​데 독자가 참여하는 인포그래픽입니다. 상호 작용은 Flash 또는 JavaScript, HTML 5 기술을 사용하여 생성됩니다.

둘째: 온라인에서 그래픽 형식으로 표시된 데이터를 변경할 수 있는 인포그래픽입니다.

대화형 인포그래픽을 만드는 프로젝트는 높은 복잡성과 비용으로 인해 추진력을 얻고 있습니다. 인터랙티브 인포그래픽의 놀라운 사례 중 하나는 2011년 "루카셴코의 대통령 취임을 축하한 사람" 프로젝트였습니다.

대화형으로 업데이트된 인포그래픽을 통해 어느 국가 원수가 A.G. 2010년 선거에서 루카셴코. 인포그래픽에 표시되는 데이터는 대통령 사진, 국기, 테이블 또는 지구본 중에서 선택할 수 있습니다. 따라서 사용자는 자신이 관심 있는 데이터와 표시할 데이터를 직접 선택했습니다. 표에서는 축하 당시 국가 원수가 집권한 기간, 권리와 자유, 삶의 질, 언론의 자유, 사실상의 민주적 선거에 따라 국가를 정렬하는 것도 가능했습니다. 그리고 독재자의 평가. 축하 여부는 대통령 공식 웹 사이트에서 확인하고 수동으로 변경했습니다.

이 프로젝트가 시작된 이후 꽤 많은 시간이 지났으며 오늘날 많은 전문가들은 인터랙티브 인포그래픽이 정보를 자동으로 변경하도록 노력하고 있습니다. 그러나 이는 프로젝트 예산에 심각한 영향을 미칩니다.

서구의 대형 기업들은 평판을 구축하거나 사용자 충성도를 높이는 수단으로 대화형 인포그래픽을 최초로 사용한 기업 중 하나였으며, 이는 압축된 정보를 역학적으로 표시하는 것의 가치와 사용자 참여 가능성을 이해했습니다.

일부 유형의 인포그래픽을 사용하면 일부 매개변수를 대화형으로 조정하고 흥미로운 데이터를 얻을 수 있습니다. 예를 들어, 사용자는 특정 숫자를 입력하라는 질문을 받은 후 그래프나 다이어그램이 눈앞에서 변경됩니다. 완전히 새로운 정보 자료가 얻어지며 그 생성에 직접 참여하게 됩니다.

예를 들어, Chrome 브라우저 출시 3주년을 맞아 Google은 웹 페이지를 보기 위한 기술 및 프로그램 개발의 역사를 시각화했습니다. 링크를 따라가며 최고의 전통에서 대화형 인포그래픽의 다채로운 광경을 즐길 것을 적극 권장합니다. 서쪽.

위에서 언급한 예에서 주요 브라우저인 Internet Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ 사용자는 http 프로토콜에서 오프라인에 이르기까지 브라우저에 사용되는 기술의 20년 간의 발전을 볼 수 있습니다. AppCache 애플리케이션.

오늘날 간단한 인포그래픽조차도 모든 사람이 좋은 품질로 사용할 수 없기 때문에 러시아 기업은 아직 대화형 인포그래픽을 마스터하지 못했습니다. 대화형 인포그래픽을 제작하는 서비스가 러시아 시장에서는 다소 새로운 서비스임에도 불구하고 이 형식에 대한 수요가 점점 증가하고 있기 때문에 우리 에이전시는 오늘날 이러한 작업을 수행할 준비가 되어 있습니다. 이러한 기술은 드물고 항상 엄격하게 개별적이므로 각 작업에 대해 "0"에서 소프트웨어 제품을 생성해야 하기 때문에 이 서비스의 비용은 높습니다.

가상 현실의 비결은 당신이 다른 사람들에게 바보처럼 보일 것이라는 것입니다.

Google의 Cardboard Design Lab은 초보 가상 현실 디자이너를 위한 좋은 '튜토리얼'입니다.

인포그래픽 - 어드벤처 게임과 같습니다.

Unity의 문제점은 웹에 좋은 것을 만들기가 쉽지 않다는 것입니다.

가상 현실은 눈을 위한 헤드폰과 같습니다.

가상 현실에는 안전한 환경이 필요합니다. "이동 중에" 들어갈 수는 없습니다. 이는 VR이 할 수 있는 일을 제한합니다.

상반기 세션을 마감했습니다. 아치 체 The New York Times에서 "NYT가 대화형 작업을 덜 수행하는 이유"라는 도발적인 주제를 다루었습니다.

NYT의 작업은 시각적 스토리텔링의 세 가지 규칙을 기반으로 합니다.

1. 독자가 스크롤하는 대신 클릭해야 한다면 평범하지 않은 일이 발생해야 합니다.
2. 도구 설명 및 기타 호버 효과는 누구에게도 표시되지 않는다고 가정합니다. 내용이 중요하다면 독자가 바로 볼 수 있도록 하세요.
3. 대화형 무언가를 만들고 싶다면 모든 플랫폼에서 작동하도록 만드는 데 비용이 많이 든다는 점을 기억하세요.

데스크톱과 모바일 모두에서 작동하려면 그래픽을 2~3번 다시 그려야 합니다.

이러한 규칙이 NYT의 접근 방식을 어떻게 변경했는지:

1. 대부분의 시각화는 이제 정적입니다.
2. 더 많은 글이 있습니다
3. 그림의 움직임이 필요한 경우 스크롤 중에 나타납니다.

(네 번째 요점은 그들이 여전히 대화형 작업을 수행한다는 것입니다. 그러나 이제 그 이유는 매우 의미가 있을 것입니다.)

우리는 "다단계"를 수행했습니다. 사용자는 3단계에서 멈췄습니다. 독자는 클릭이 아닌 스크롤만 원합니다.

Archie Tse: 스크롤링과 비교. 클릭

지난 18주 동안 매주 일요일 저녁 Andy Kriebel은 VizWiz를 기반으로 한 인포그래픽과 데이터를 게시해 왔습니다. 임무는 월요일에 약 한 시간의 시간을 따로 확보하고 신속하게 시각화를 분석하여 자신만의 버전을 만드는 것입니다.

아래에는 지난 주의 21세기 노예 제도에 대한 결과가 나와 있습니다.

#MakeoverMonday by 앤디 크리벨. 자세한 설명 및 대화형 - Andy의 블로그:

#MakeoverMonday by 앤디 코트그리브. 자세한 설명 및 대화형 - Andy의 블로그:

또한 전 세계 인구의 51%가 나보다 젊고, 러시아에서는 63%가 노인이고, 내가 지금 당장 죽을 확률은 그리 높지 않다는 것도 배웠다. 그 숫자는 갑자기 "통계"가 아니게 되었고 나에게 깊은 인상을 남겼습니다.

데이터 시각화 - 수동 설계 작업을 줄이고 대규모 데이터 세트를 사용합니다. 알고리즘을 기반으로 합니다. 예를 들어 New York Times의 대화형 작업이 있습니다.

시각 예술 - 단방향 코딩. Kunal Anand의 컴퓨터 기술과 같은 시각화는 아름답지만 해독하기 어렵습니다.

문제는 무엇입니까?

결과적으로 많은 작품이 정교한 사용자만을 끌어들이지만 초보 독자가 문제의 본질을 이해하는 것을 허용하지 않아 대중에게 알리려는 시각화의 목적을 상실합니다. 이것이 바로 시각화의 맥락에서 시각적 문해력의 문제를 인식하고 이해하는 것이 매우 중요한 이유입니다.

저널리즘의 새로운 '시각적 문법'

인터랙티브 저널리즘을 표현하는 방법을 실험하는 세 작품은 다음과 같습니다. 인상적으로 보이지만 해석은 많은 사람들에게 어려운 작업이 될 수 있습니다.

미국의 주별 동성애자 권리

오늘날 사용할 수 있는 데이터 소스와 이를 처리하기 위한 도구의 수는 이전에는 그렇게 많은 사람들이 데이터 시각화의 세계에 익숙해지려고 노력한 적이 없었다는 것을 분명히 보여줍니다. 그리고 연구에 사용할 수 있는 자료가 이렇게 많을 때 질문은 하나뿐입니다. "어디서부터 시작해야 할까요?"모든 초보자에게 위협이 될 수 있습니다. 그렇다면 어떤 라이브러리가 가장 좋고 전문가는 무엇을 권장합니까? 이 기사에서는 이에 대해 논의할 것입니다.

데이터 시각화에 대해 이야기하고 이를 언급하지 않는 것은 개인용 컴퓨터의 역사에 대해 이야기하고 스티브 잡스에 대해서는 한마디도 하지 않는 것과 같습니다. D3(Data Driven Documents)는 과장하지 않고 SVG 그래픽 생성에 일반적으로 사용되는 가장 중요하고 시장을 지배하는 오픈 소스 JavaScript 라이브러리입니다. SVG(English Scalable Vector Graphics)는 웹 브라우저에서 지원되는 벡터 이미지 형식이지만 이전에는 거의 사용되지 않았습니다.

D3 라이브러리의 인기는 웹 디자이너들 사이에서 SVG에 대한 갑작스런 관심에 기인합니다. 이는 벡터 그래픽이 고해상도 화면(특히 Apple 장치에 사용되는 Retina 디스플레이)에서 얼마나 잘 보이는지에 주로 기인합니다. 흔한.

독립적인 데이터 시각화 전문가이자 회사 소유주인 Moritz Stefaner는 "솔직히 말해서 문제가 SVG 기반 데이터 시각화라면 다른 모든 라이브러리로는 이 문제를 해결할 수조차 없습니다."라고 말합니다. 진실과 아름다움. “표준 그래픽 구성 요소를 제공하는 NVD3와 같이 D3를 기반으로 만들어진 흥미로운 프로젝트도 많이 있습니다. 바로 사용할 수 있지만 사용자 정의가 가능합니다. 아니면 Crossfilter가 단순히 뛰어난 데이터 필터링 도구라고 가정해 보겠습니다.”

Scott Murray, 프로그래머 디자이너이자 책 작가 웹용 대화형 데이터 시각화, 이전 의견에 동의합니다. “D3는 브라우저가 제공하는 모든 기능을 활용하기 때문에 매우 강력합니다. 여기에는 단점이 있지만, 브라우저가 WebGL(영어 웹 그래픽 라이브러리) 기반의 3D 이미지 등을 지원하지 않으면 D3도 이를 지원하지 않습니다.”

이 라이브러리는 정말 보편적이지만 여전히 모든 작업에 이상적인 솔루션은 아닙니다. Scott Murray는 “D3 라이브러리의 가장 큰 단점은 시각화에 대한 특정 접근 방식을 규정하거나 제안하지 않는다는 것입니다.”라고 덧붙입니다. "그러므로 이는 실제로 데이터를 브라우저에 로드한 다음 해당 데이터를 기반으로 DOM 구성 요소를 생성하는 도구입니다."

D3는 사용자 정의 이미지를 위한 훌륭한 도구이지만 시각적 측면에 대한 많은 작업 없이 표준 그래프를 생성하려는 경우 다음과 같은 도구를 찾을 수 있습니다. 베가. Vega는 D3를 기반으로 개발된 프레임워크로서 그래픽 구성 요소를 표시하기 위한 대안을 제공합니다. Vega를 사용하면 유럽저널리즘센터(European Journalism Center)와 데이터 중심 저널리즘(Data Driven Journalism) 프로젝트의 데이터를 JSON 형식으로 시각화할 수 있습니다. 강좌의 정확한 날짜는 아직 알려지지 않았지만 지금 등록하실 수 있습니다.

5일 동안 과정 참가자들은 데이터 저널리즘이 무엇인지, 어떻게 작동하는지, 이 분야의 전문가가 되기 위해 마스터해야 하는 핵심 기술은 무엇인지 배울 수 있습니다. 스토리를 뒷받침할 데이터를 어디서 찾을 수 있는지, 기존 데이터에서 새로운 아이디어를 찾는 방법을 알아보세요. 지루한 데이터를 매력적인 스토리, 인포그래픽 또는 대화형 시각화로 바꾸는 기술을 알아보세요. 저널리스트가 알아야 할 그래픽 디자인의 기본 원칙을 알아보세요.

강좌 강사는 데이터 저널리즘 및 시각화 분야의 세계 최고의 전문가 5명입니다.

대화형 인포그래픽과 지도를 만드는 방법을 배우고 싶은 모든 사람을 위한 데이터 시각화 초보자 가이드입니다.

인포그래픽과 대화형 지도는 활동가, 언론인, 사회 운동이 수행하는 많은 프로젝트의 일부가 되었습니다. 하지만 전담 디자이너가 없는 조직은 어떻게 될까요? 이 경우에도 고품질의 시각 자료를 만들 수 있습니다 - 수호자어떻게 해야 하는지 알려줬어요.

데이터

가장 먼저 해야 할 일은 시각화하려는 데이터가 무엇인지 이해하는 것입니다.

당신이 전 세계적으로 위생 개선을 요구하는 캠페인을 진행하고 있다고 가정해 봅시다. 이것이 얼마나 중요한지 보여주기 위해서는 얼마나 많은 국가에서 여전히 깨끗한 화장실에 대한 접근이 제한되어 있는지, 그리고 지난 10년 동안 이것이 얼마나 거의 변하지 않았는지 강조할 필요가 있습니다. 이 튜토리얼에서는 World Bank의 데이터 세트를 사용합니다.

이제 10년간의 데이터가 있지만 2000년과 2012년 숫자만 필요합니다. 따라서 데이터를 로드한 후 불필요한 행과 열을 삭제합니다(팁: 원본 데이터 파일을 저장하세요).

이제 데이터를 정리했으므로 시각화할 준비가 되었습니다. 우리의 경우 시각화 전에 또 다른 열(2000년과 2012년 간의 백분율 차이)이 추가되었습니다.

대화형 차트를 만드는 방법

데이터를 그래프로 표시하는 것은 정보를 시각화하는 가장 빠르고 쉬운 방법입니다. Datawrapper, Infogr.am 및 PiktoChart와 같은 사이트는 다양한 그래프와 차트를 만들고 이를 모든 웹사이트에 삽입할 수 있는 가볍고 사용하기 쉬운 도구입니다.

Datawrapper는 아마도 가장 직관적이며 무료이기도 합니다. 이 도구의 약점은 대규모 데이터 세트를 잘 표시하지 않는다는 점입니다. 따라서 지난 10년 동안 가장 많은 변화가 있었던 10개 국가만 시각화하겠습니다.

Datawrapper를 사용하여 그래프를 만드는 방법:

1. Datawrapper 웹사이트에 등록하고 새 차트를 만듭니다.
2. 제공된 필드에 정보를 복사하여 붙여넣으세요.
3. 세부정보를 확인하세요.
4. 이제 재미있는 부분입니다. 차트 템플릿을 선택하세요. 이 시각화를 위해 간단한 대화형 그래프가 선택되었지만 사이트에 제시된 다양한 옵션 중에서 선택할 수 있습니다.
5. 마지막 단계는 일정을 최종 편집하는 것입니다. 색상을 변경하고 제목, 설명 등을 추가할 수 있습니다.

대화형 지도를 만드는 방법

다양한 국가와 관련된 데이터를 표시하려면 지도를 사용하는 것이 가장 좋습니다. 다음은 초보자를 위한 세 가지 무료 도구에 대한 개요입니다.

데이터 래퍼

이제 이 도구에는 데이터를 기반으로 그라디언트를 생성하는 등치 맵 옵션이 있습니다. Datawrapper는 그래프와 동일한 방식으로 맵을 생성합니다.

뒤에:가장 빠르고 간단한 도구 중 하나입니다. Datawrapper는 국가 이름을 잘못 입력한 경우 알려줍니다. 이 도구의 또 다른 좋은 점은 범례에서 특정 색상 위로 마우스를 가져가면 해당 색상이 있는 국가만 지도에서 강조 표시된다는 것입니다.

에 맞서:개별 국가나 도시에 대한 템플릿은 없습니다.

뒤에:무료이며 사용하기 쉽습니다(특히 지도에 포인트를 생성하는 데).

에 맞서:색 구성표 변경과 같은 추가 기능은 초보자에게 어렵게 보일 수 있습니다. 그러나 KML 파일을 기존 데이터에 연결하는 방법을 알고 있다면 이러한 지도를 만들 수 있습니다. 지도에 범례를 추가하는 것은 어렵습니다.

처음에는 겁이 날 수도 있지만, 이 도구를 사용하면 다양한 지도를 만들고 지도에서 보고 싶은 내용에 따라 맞춤 설정할 수 있습니다.

뒤에:많은 조정을 수행하고 추가 레이어를 추가할 수 있습니다. 모바일 장치에서 작동합니다.

에 맞서: 5개 이상의 지도를 만들 계획이고 매월 10,000회 이상의 조회수를 얻을 것으로 예상되는 경우 이 도구를 사용하려면 비용을 지불해야 합니다.

전통적인 인포그래픽을 만드는 방법

전통적인 인포그래픽은 정보가 숫자와 아이콘으로 표시되는 정적인 컬러 이미지입니다. 앞서 이미 언급한 도구인 Infogr.am 및 PiktoChart는 이러한 이미지를 만드는 데 도움이 됩니다. 사용하기 쉽습니다. 필요한 정보를 끌어다 놓고 데이터에 붙여넣기만 하면 그래프를 만들 수 있습니다. 무료 버전의 도구에서 사용할 수 있는 템플릿 수는 제한되어 있습니다.

Infogr.am을 사용한 데이터 세트의 빠른 시각화 예:

이 가이드에 제시된 도구를 사용하면 기술 수준에 관계없이 누구나 아름다운 대화형 인포그래픽 또는 지도를 만들고 메시지를 폭넓은 청중에게 전달할 수 있습니다.

데이터 시각화의 미래는 대화형입니다.

하지만 정말 놀라운 대화형 인포그래픽을 어떻게 만들 수 있을까요?

인포그래픽은 어디에나 있으며 최근에는 점점 더 상호작용적으로 변하고 있습니다.

오늘 기사에서는 대화형 인포그래픽을 만드는 비결과 유용한 리소스에 대한 링크를 공유하겠습니다.

1. 심리학을 이해한다

인포그래픽을 대화형으로 만들기 전에 왜 인포그래픽을 대화형으로 만들고 싶은지 이해하는 것이 중요합니다.

이 인포그래픽에 자세히 설명되어 있듯이 사람들은 시각적 정보를 더 잘 인식합니다. 프레젠테이션에 매력적인 시각적 요소가 있으면 우리는 프레젠테이션을 읽고, 이해하고, 기억할 가능성이 훨씬 더 높습니다. 효과적인 학습 도구이지만 더욱 향상될 수 있습니다.

운동 학습은 사람들이 신체 활동을 통해 더 잘 배우기 때문에 훌륭한 대안입니다.

그렇기 때문에 유망한 시각화 분야에 대화형 기능을 추가하면 훨씬 더 기억에 남고 효과적인 인포그래픽을 만드는 데 도움이 될 수 있습니다.

이러한 시각적 접근 방식과 동적인 접근 방식의 조합은 애니메이션 인포그래픽을 미래의 콘텐츠로 만듭니다. 물론 일부 테마의 경우 대화형 요소를 사용하지 않는 것이 좋지만 대부분의 경우 콘텐츠만 향상됩니다.

움직임은 정보에 의미를 더하고, 사용자가 경험을 제어할 수 있게 하며, 정적인 인포그래픽이 할 수 없는 방식으로 상상력을 불러일으킵니다.

2. 스크롤 효과 추가