1

7차시. 이즐리와 택시도를 활용한 인포그래픽 제작 1. 이즐리 사이트에 대해 알아보고 사용자 메뉴 익히기 01. 이즐리(www.easel.ly) 사이트 접속하기 인포그래픽 제작을 위한 이즐리 사이트는 무료로 제공되는 템플릿을 이용하여 간편하게 인포그래 픽을 만들 수 있는 사이트입니 이즐리는 유료, 무료 구분이 없는 장점이 있으며 다른 인포그래픽 제작 사이트보다 다양한 테마가 제공되는 특징을 가지고 있습니 이즐리 사이트에 접속하기 위해 인터넷 주소창에 http://www.easel.ly 를 입력합니 인터넷 주소 입력에 유의하도록 하며 원활한 사이트 접속을 위해서 인터넷 익스플로러보다 구글 크롬을 이용하시는 것을 권장드립니 - 1 -

02. 이즐리(www.easel.ly) 계정만들기 이즐리 사이트 접속이 끝났다면 이제 이즐리 사용자 계정을 생성해 보도록 하겠습니 먼저 사이트 메인 화면 우측 상단에 Register 를 클릭합니 다음으로 이즐리 사이트 계정 생성을 위해서 Email Adress에 개인 이메일 주소를 입력합니 그리고 Password에 사용할 비밀번호를 입력하고, Confirm password에 비밀번호를 다시 한 번 입력합니 마지막으로 Signup 버튼을 클릭하여 계정 생성을 완료합니 참고로 기존에 보유하고 계신 페이스북 아이디나 구글플러스 아이디로도 이즐리 사이트 계정을 생성할 수 있습니 이즐리 사이트 계정 생성이 완료되면 사이트 우측 상단에 입력했던 개인 이메일 주소가 보이 게 됩니 이제 이즐리 사이트를 활용하여 인포그래픽을 제작하기 위한 준비가 끝났습니 - 2 -

03. 이즐리 사이트 기본 메뉴 알아보기 인포그래픽 제작을 위한 이즐리 사이트의 원활한 이용을 위하여 기본 메뉴와 사용자 메뉴에 대해 간단히 알아보도록 하겠습니 먼저 화면 좌측에 있는 Start fresh를 클릭합니 Start fresh는 특정 템플릿을 지정하지 않은 경우 로 아무 내용이 없는 빈 캔버스와 같습니 Start fresh를 클릭하면 다음과 같은 화면이 등장 합니 이즐리 사이트 편집 화면에서 제일 상단은 이즐 리로 제작한 인포그래픽을 열거나, 저장 또는 다운로드 하기 위한 기본 메뉴입니 Home은 초기 화면으로 이동하는 경우에 쓰이며, Save는 작업 내용을 저장할 때 사용합니 Open은 이전에 작업했던 인포그래픽을 불러올 때 사용하며 Download는 제작한 인포그래픽을 JPG나 PDF 파일로 다운로드 하기 위해 사용합니 04. 이즐리 사이트 사용자 메뉴 알아보기 다음으로 이즐리 사이트에서 인포그래픽 제작을 위한 사용자 메뉴에 대해 알아보도록 하겠습니 사용자 메뉴에는 Vhemes, 객체(Objects), 배경 (backgrounds), 모양(shapes), 글(text), 차트 (charts), 사진올리기(upload), 줌(zoom), 보조선 (grid), 실행취소(undo) 메뉴들이 있습니 - 3 -

05. 이즐리 사이트 객체 편집 메뉴 알아보기 06. 이즐리 사이트 사용자 메뉴 실습하기 다음으로 이즐리 사이트에서 객체를 편집할 때 쓰이는 객체(Objects) 편집 메뉴들에 대해 간단히 알아보겠습니 1은 객체를 삭제할 때 사용합니 이즐리 사이 트에서는 키보드에 Delete키를 눌러도 삭제되지 않으므로 이미지나 텍스트, 객체 등을 삭제할 때 는 반드시 1번 메뉴를 클릭합니 2는 객체를 움직이지 못하게 고정할 때 사용합 니 화면상에서 편집될 필요가 없는 부분을 지정해 놓으면 불필요하게 선택되어 편집에 방해 되는 불편함을 줄일 수 있습니 3은 객체나 텍스트를 똑같이 복사할 때 쓰입니 4는 객체나 텍스트들의 순서를 지정할 때 사용 합니 파워포인트에서 맨 앞으로 보내기, 맨 뒤 로 보내기를 생각하시면 되겠습니 5는 객체의 투명도를 조절할 때 사용됩니 6은 객체나 텍스트의 색상을 정할 때 사용합니 7은 글꼴의 모양이나 크기를 정할 때 사용합니 지금부터는 이즐리 사이트 사용자 메뉴를 실습을 통해 익혀보도록 하겠습니 먼저 Vhemes 메뉴에 대해 알아보겠습니 Vhemes는 Visual과 themes라는 단어를 합성한 단어로 이즐리에 사용되는 템플릿의 테마입니 Vhemes 버튼을 클릭하면 아래에 여러 개의 템플 릿이 등장하며 필요에 의해 선택하여 템플릿의 테마를 변경할 수 있습니 실제로 이즐리의 템플릿을 변경해보도록 하겠습 니 원하는 템플릿을 클릭하여 편집하면으로 끌어다 놓으면 템플릿이 바로 변경되는 것을 확인하실 수 있습니 - 4 -

보시는 바와 같이 초기 화면과 달리 이즐리 사이 트 편집 화면이 지도기반형 인포그래픽에 어울리 는 템플릿으로 변경되시는 것을 확인할 수 있습 니 다음으로 객체(Objects) 메뉴에 대해 알아보겠습 니 객체(Objects) 메뉴는 인포그래픽 제작에 사용되는 여러 객체를 삽입할 때 사용되는 메뉴 입니 여러 객체는 아이콘, 배너, 지도, 일러스 트 등이 있습니 화면 좌측에서 보이는 것처럼 동물, 사람, 건물, 지도, 음식 등의 아이콘을 삽입할 수 있으며 지도 까지 삽입할 수 있도록 카테코리가 정리되어 있습니 이번에는 실제로 템플릿에 여러 아이콘을 직접 삽입해 보도록 하겠습니 먼저 객체 편집 메뉴를 이용하여 중앙에 배열된 원 안의 영어를 삭제합니 - 5 -

다음으로 VHMES를 더블 클릭하면 텍스트를 입력할 수 있는 창이 활성화됩니 이때 자동차 라고 텍스트를 입력합니 다음으로 자동차 밑에 있는 영어를 선택 후 객체 편집 메뉴의 삭제 아이콘을 클릭하여 화면 에서 지웁니 그 다음 객체(Objects)를 클릭한 후 카테고리에서 교통수단을 클릭한 후 나타나는 여러 아이콘 중 에서 자동차 모양을 선택합니 자동차 모양을 클릭한 후 편집 화면 중앙으로 끌어다 놓습니 자동차 아이콘이 삽입 된 것을 확인할 수 있습니 같은 방식으로 글(Text)을 입력할 경우 수정하고 자 하는 텍스트를 더블 클릭하여 선택한 후 입력 창을 활성화하여 내용을 입력합니 여기서는 자동차를 입력할 때와 같이 교통수단의 한 종류인 버스와 배를 입력했습니 그리고 다시 객체(Objecsts)를 클릭한 후 카테고 리에서 교통수단을 선택하여 줍니 이어서 버스와 배 아이콘을 선택하여 편집 화면 으로 끌어다 놓습니 이번에는 이즐리 사이트 편집 화면에서 템플릿의 배경을 변경해 보도록 하겠습니 먼저 배경(backgrounds)을 클릭합니 그러면 템플릿의 배경을 선택할 수 있도록 여러 개의 배경 이미지가 나타납니 이전에 객체를 삽입할 때와 마찬가지로 원하는 배경 이미지를 선택한 후 화면에 끌어다 놓으면 템플릿의 배경이 변경되는 것을 확인할 수 있습 니 - 6 -

이번에는 이즐리 사이트 편집 화면에 화살표, 말풍선 등의 모양(shapes)을 삽입해 보도록 하겠 습니 편집도구 메뉴에서 모양(shapes)를 클릭합니 shapes를 클릭하자 템플릿에 삽입 가능한 다양한 화살표와 말풍선 모양들이 화면에 나타납니 원하는 화살표나 말풍선을 선택한 후 화면에 끌어다 놓습니 배경에 어울리도록 객체 편집 메뉴를 이용하여 화살표의 크기나 색상이나 투명도를 조절합니 이제 글(text) 메뉴를 활용하여 편집 화면에 어울 리는 제목을 입력해 보도록 하겠습니 먼저 제목을 입력하기 위한 공간을 확보하기 위해 화면상의 객체들의 위치를 옮겨 보겠습니 이즐리 사이트도 파워포인트나 한글과 같은 프로 그램처럼 여러 객체를 선택할 때에는 Shift키와 함께 왼쪽 마우스 버튼을 클릭하면 여러 개의 객체가 한꺼번에 선택됩니 선택된 객체들을 원하는 위치에 옮깁니 다음으로 제목 입력을 위해 글(text) 메뉴를 클릭 합니 text 메뉴를 클릭하면, 입력할 수 있는 text 유형 을 선택할 수 있는 창이 활성화 됩니 'Title', 'header', 'body' 중 원하는 text 입력 유형 을 선택한 후 화면에 끌어다 놓습니 text 입력은 이전처럼 해당 부분을 마우스로 더블 클릭하여 선택한 후 내용을 수정합니 필요에 따라 객체 편집 메뉴를 이용하여 text의 투명도, 색상, 크기를 변경하면 되겠습니 여기서는 '대표적인 교통 수단'으로 입력한 후 어두운 배경색에 맞춰 노란색으로 글꼴의 색상을 변경하였습니 - 7 -

이번에는 현재까지 만든 인포그래픽과 어울리는 차트를 삽입해 보도록 하겠습니 차트를 삽입하기 이전에 차트 삽입을 위한 공간 을 확보해 보겠습니 화면상의 객체들을 Shift키를 누른 채 왼쪽 마우 스버튼으로 각각의 객체들을 클릭하여 선택하여 줍니 필요에 따라 객체들의 크기를 조절합니 왼쪽 마우스 버튼을 누른 채 원하는 만큼 드래그 하여 객체를 선택한 후 한꺼번에 객체들의 크기 를 조절할 수 도 있습니 다음으로 객체나 모양(shapes), 글(text)을 입력할 때처럼 차트(chart) 메뉴를 선택한 후 원하는 차트의 종류를 선택합니 가장 일반적인 원그래프를 선택하여 화면에 끌어 다 놓겠습니 삽입한 차트를 더블 클릭하면 원그래프의 색상, 내용, 비율들을 조절할 수 있는 입력창이 활성화 됩니 색상이나 내용, 비율들을 임의로 수정해 보겠습니 원그래프의 색상이 변경되는 것을 확인할 수 있습니 이번에는 인포그래픽의 주제에 어울리도록 지금 까지 입력한 내용들을 수정해보겠습니 먼저 제목에 배너를 삽입하여 꾸며보도록 하겠습 니 객체(Objects)를 클릭하여 화면에 어울리는 배너 를 클릭하여 끌어다 놓습니 배너를 클릭하여 선택한 후 위치를 조절합니 - 8 -

1 입력한 글(text)과 배너가 겹치게 되면 2 객체 편집 메뉴 중 position 메뉴를 이용하여 객체의 화면상의 순서를 조정하여 배너를 맨 뒤 로 보내도록 합니 그 다음 배너의 크기를 조절하거나 text의 크기를 객체 편집 메뉴를 이용하여 알맞게 조절합니 부족한 내용이 있다면 객체를 복사하여 붙여가며 내용을 수정하거나 추가 할 수 있습니 흔히 알고 있는 Ctrl+C와 Ctrl+V를 이용하여 자동차의 원모양의 테두리와 텍스트를 복사합니 그 다음 객체(Objects)를 클릭하여 비행기 아이콘 을 선택한 후 편집 화면으로 끌어와서 삽입합니 마지막으로 원그래프의 내용에 맞는 데이터를 Text를 입력하여 편집을 완료합니 - 9 -

2. 이즐리 사이트에서 인포그래픽 제작하기 지금까지 인포그래픽 제작을 위한 이즐리 사이트에 대해 알아보고 이즐리의 사용자 메뉴 및 객체 편집 메뉴에 대해 살펴보았습니 이제 이즐리를 활용하여 수업시간에 활용 가능한 형태의 인포그래픽 을 직접 제작해 보도록 하겠습니 이즐리를 활용하여 다양한 유형의 인포그래픽을 제작할 수 있으나 이번 강의에서는 지도기반형 인포그래픽을 제작해 보도록 하겠습니 01.인포그래픽 주제 정하기 및 자료 수집 이즐리 사이트를 이용하여 지도기반형 인포그래 픽으로 제작할 주제는 초등학교 6학년 사회에 나 오는 음식으로 세계 만나기 입니 먼저 인포그 래픽 주제와 관련된 이미지를 수집하도록 하겠습 니 여러 나라의 음식과 국기와 관련된 이미지 들을 인터넷 검색을 통해 수집합니 제작하고자 하는 인포그래픽의 주제에 맞게 해당 미지는 검색 포털 사이트에서 검색하시거나 위키 미디어 커먼스 등을 이용하시면 되겠습니 02. 템플릿 정하기 이즐리 사이트에서 제작하고자 하는 인포그래픽 의 유형에 따라 스크롤바를 내려 다양한 템플릿 을 확인하고 주제 표현에 적합한 인포그래픽을 선택합니 지금부터는 지도기반형 인포그래픽을 제작할 예정이므로 세계 지도 그림이 있는 Oil' 인포그래 픽을 선택하겠습니 1 'Oil' 인포그래픽에서 음식으로 세계 만나기 라 는 주제에 벗어나는 text 및 아이콘 등은 모두 클릭하여 삭제합니 2 객체(Objects)를 삭제할 때에는 객체 편집 메뉴 중에서 삭제하기 메뉴를 이용합니 03. 캔버스 크기 지정하기 다음으로 인포그래픽으로 표현하고자 하는 정보 의 양에 따라 캔버스 크기를 조절합니 캔버스 크기를 조절할 때에는 편집 화면 오른쪽 끝에 위치한 캔버스 화면 크기 조절 부분을 찾은 다음 화살표의 방향대로 왼쪽 마우스를 클릭한 채 상하좌우로 드래그하면 됩니 이때 화면에는 캔버스의 크기가 표시되며 확인 후 알맞게 수정 하도록 합니 - 10 -

04. 레이아웃 정하기 이제 제작하고자 하는 인포그래픽의 레이아웃을 정해보도록 하겠습니 1에는 인포그래픽의 제목을 입력할 예정입니 인포그래픽의 제목은 세계 여러 나라의 대표 음식 으로 하겠습니 2에는 세계 여러 나라의 음식 사진을 업로드 한 후 음식 사진을 각 나라 위치에 맞게 화살표 로 연결하도록 하겠습니 3에는 국기와 함께 음식명을 쓰도록 하겠습니 05. 제목 입력 레이아웃을 정하였으므로 인포그래픽의 제목을 직접 입력해 보도록 하겠습니 1 먼저 text 입력 메뉴를 클릭합니 2 다음으로 text 입력 종류 중 Title 을 선택합니 3 마지막으로 text 입력을 위해 편집 화면으로 끌어다 놓습니 제목을 입력하기 위해 'Title'을 더블 클릭한 후 '세계 여러 나라의 음식 이라고 입력합니 그 다음 객체 편집 메뉴를 이용하여 글꼴의 크기, 색상 및 투명도를 수정합니 제목 입력이 끝났으므로, 제목을 꾸며줄 수 있는 그림이나 아이콘을 편집 화면에 삽입해 보도록 하겠습니 1 먼저 객체(Objects) 메뉴를 클릭합니 2 다음으로 화면에 나타나는 카테고리에서 food 를 선택합니 3 그 다음 원하는 음식 이미지를 선택하여 제목 옆으로 끌어다 놓습니 - 11 -

이즐리 사이트에 내장된 이미지가 캔버스 크기보 다 큰 경우가 있습니 이때 캔버스의 크기에 맞게 이미지 크기를 알맞게 수정해야 합니 객체나 이미지를 클릭하면 크기 조절점이 나타나 는 것을 보실 수 있습니 이 크기 조절점을 마우스로 조정하여 이미지 크기를 수정합니 다음으로 제목 뒤에 제목을 꾸며줄 수 있는 배너 를 삽입해 보도록 하겠습니 1 먼저 Objects를 클릭한 후 2 카테고리에서 banners를 선택합니 3 그 다음 알맞은 배너를 선택하여 화면으로 끌어다 놓습니 배너를 삽입하면 경우에 따라 제목을 배너가 가리는 경우가 생깁니 이때 객체 편집 메뉴를 이용하여 1에서 텍스트 와 배너를 맨앞으로 보내기 또는 맨 뒤로 보내기 등을 이용하여 레이어의 순서를 조절합니 그리고 2에서 제목의 투명도를 조절합니 마지막으로 3에서 배너와 바탕과의 색상을 고려 하여 글꼴의 색상을 변경합니 여기에서는 흰색 으로 글꼴의 색상을 변경하였습니 06. 내용 입력하기 다음으로 각 나라의 위치에 맞게 음식과 국기 이미지를 삽입해 보도록 하겠습니 1 먼저 upload를 클릭합니 2 다음으로 Add files를 클릭합니 3 삽입하고자 하는 이미지를 선택한 후 4 열기를 클릭합니 참고로 인포그래픽에 사용되는 이미지는 인포그 래픽을 제작하기 전에 미리 수집한 자료입니 주제에 맞게 선생님들께서도 포털 검색 사이트나 위키미디어 커먼스, Pixabay와 같은 사이트에서 인포그래픽 제작을 위한 아이콘 및 이미지들을 인포그래픽 제작 전에 미리 수집해 놓으셔야 합니 - 12 -

이미지의 크기는 이미지를 클릭할 때 나타나는 조절점을 마우스로 조정하여 이미지의 크기를 조절하도록 합니 이미지 삽입이 끝났다면, 다음으로 사진과 각 나라를 연결하는 보조선을 삽입합니 1 shapes 메뉴를 클릭합니 2 원하는 연결선 모양을 클릭합니 3 선택한 연결선 화면으로 끌어다 놓습니 그 다음 객체 편집 메뉴를 이용하여 연결선의 색상이나 투명도를 조절하고, 마우스로 크기를 조절해 줍니 참고로 이즐리에서 삽입된 모든 객체들은 마우스 로 클릭하여 선택하면 1과 같은 회전 조절 점 2와 같은 크기 조절 점이 나타납니 이때 왼쪽 마우스 버튼을 클릭한 채로 객체를 회전시키거나 크기를 조절 할 수 있습니 연결선을 삽입 한 후에는 배경 이미지와 알맞게 색상을 변경시키고 회전시켜 줍니 여기에서는 연결선을 검은색으로 수정하였습니 그 다음 필요한 이미지들을 순서대로 업로드 합니 그리고 마찬가지로 객체 편집 메뉴를 이용하여 연결선을 여러 개 복사하거나 복사하여(Ctrl+C), 붙이기(Ctrl+V)하여 준 다음, 연결선과 이미지들을 각각 연결해 줍니 이제 사전에 수집해 놓은 각 나라의 국기를 삽입 해 보겠습니 1 upload를 클릭합니 2 Add files를 클릭합니 3 이미지를 선택합니 4 열기를 클릭합니 - 13 -

각 나라들의 국기를 순서대로 삽입한 후에 이전처럼 마우스를 이용하여 객체를 선택한 후 크기조절점 및 회전 조절점을 조절하여 국기의 크기 및 위치를 수정해 줍니 다음으로 이즐리 편집 화면에 각 나라의 음식 이름을 입력해 보겠습니 1 먼저 이즐리 사용자 메뉴에서 text를 클릭합니 2 다음으로 text 입력 유형 중 body를 클릭하여 화면에 끌어다 놓습니 사전에 조사한 내용을 바탕으로 text를 더블 클릭 하여 입력창을 활성화 한 후 알맞은 내용을 입력 합니 여기에서는 스위스 음식 퐁듀, 멕시코 음식 타코, 인도 음식 커리, 일본 음식 초밥, 터키 음식 케밥, 베트남 음식 쌀국수라고 입력하겠습니 내용을 입력할 때 객체 편집 메뉴의 객체 복사를 통해 객체를 여러 개 복사 한 후 내용을 수정하 면 편리합니 1 먼저 복사하고자 하는 객체를 선택한 후 2 다음으로 객체 편집 메뉴에서 객체 복사하기 를 클릭합니 3 마지막으로 원하는 위치에 객체를 옮긴 후 더블 클릭하여 text 내용을 수정합니 - 14 -

07. 내용 수정 및 편집하기 지금까지 작업한 내용에 추가하여 쌀, 밀, 옥수수, 감자 등의 세계 4대 주식을 소개하고 각각의 주식을 많이 섭취하는 나라나 대륙 목록을 정리 해보도록 하겠습니 먼저 소제목을 삽입하기 위한 배너를 삽입하겠습 니 1 객체(Objects)를 클릭합니 2 카테고리에서 banners를 선택합니 3 화면에 어울릴만한 banner를 선택하여 편집 화면에 끌어다 놓습니 다음으로 세계 4대 주식 이라는 소제목을 입력해 보겠습니 1 text 메뉴를 이용하여 text 입력창을 화면에 끌어다 놓습니 2 그 다음 text 입력창을 더블 클릭하여 세계 4 대 주식 이라고 입력합니 3 그리고 객체를 클릭한 후 객체 편집 메뉴에서 글꼴의 색상을 선택합니 4 글꼴의 색상을 흰색 으로 선택합니 이제 세계 4대 주식으로 만든 음식을 나라별로 내용을 입력해 보도록 하겠습니 먼저 내용 입력을 위한 틀을 편집 화면에 삽입하 겠습니 1 모양(shapes)을 클릭합니 2 화면에 나타난 shapes에서 둥근 모서리 상자 를 클릭합니 3 그리고 화면에 끌어다 놓습니 다음으로 객체 편집 메뉴에서 객체 복사하기를 이용하여 4개의 둥근 모서리 상자를 삽입해 보겠 습니 1 먼저 복사하고자 하는 객체를 선택합니 2 객체 편집 메뉴에서 객체 복사하기를 클릭합 니 3 복사된 객체를 클릭합니 4 객체 편집 메뉴를 이용하여 복사된 객체의 색상과 투명도를 조절합니 - 15 -

이제 삽입 된 4개의 둥근 모서리 상자에 쌀, 밀, 옥수수, 감자 등의 내용을 입력해 보겠습니 1 먼저 text 메뉴를 클릭하여 Title을 선택한 후 첫 번째 둥근 모서리 상자에 끌어다 놓습니 2 text 입력창을 더블 클릭하여 쌀 이라고 입력 합니 3 쌀 을 클릭한 후 나타난 객체 편집 메뉴에서 객체 복사하기를 클릭합니 4 복사된 객체의 내용을 더블 클릭하여 밀 로 수정합니 옥수수, 감자 등도 같은 방법으로 입력합니 다음으로 4대 주식을 많이 섭취하는 나라 목록 입력을 위한 text 입력 창을 삽입합니 이전처 럼 1 사용자 메뉴 중 text를 클릭합니 2 text 입력 유형 중 body를 클릭합니 3 조금 전에 삽입 한 동근 모서리 상자에 끌어 다 놓습니 text 입력창 에 사전에 조사해 놓은 내용을 입력 합니 - 16 -

이제 이즐리 사이트를 이용하여 간단한 지도기반 형 인포그래픽이 완성되었습니 08. 인포그래픽 출력하기 이즐리 사이트에서는 완성된 인포그래픽을 다른 문서에 입력할 수 있는 JPG 이미지 형태나 PDF 파일로 다운로드 할 수 있는 기능을 제공합니 여기에서는 완성된 인포그래픽을 JPG 이미지 파일로 다운로드 해보겠습니 1 이즐리 사이트 편집화면 제일 상단에 위치한 기본 메뉴 중 Download를 클릭합니 2 이미지의 퀄리티를 선택합니 여기에서는 Low Quality를 선택해 줍니 다운로드가 완성되면 화면 화단에 다운로드 된 파일 명이 뜨며, 더블 클릭하여 실행하면 사진 뷰어에 이미지 파일로 출력된 인포그래픽을 볼 수 있습니 09. 인포그래픽 제작시 유의점 이즐리 사이트가 해외 사이트이므로 종종 네트워 크 연결 오류로 인하여 작업이 중단되는 경우가 있습니 작업이 중단되게 되면 애써 만들어 놓은 인포그 래픽이 사라지는 경우가 발생합니 따라서 인포그래픽을 제작할 때마다 기본 메뉴 중 Save 메뉴에 들어가 중간 중간 작업 내용을 저장해 놓는 것이 좋습니 - 17 -

3. 택시도 사이트에 대해 알아보고 인터렉티브 그래프 만들기 학교 현장에서 사용되는 인포그래픽은 인포그래픽 전문가가 제작하는 하나의 완성된 인포그래픽의 유형도 있겠지만 아마도 파워포인트의 한 슬라이드만을 차지하는 정도의 간단한 인포그래픽 유형이 더 많이 활용될 것입니 그 예로 이번에는 택시도 사이트를 활용하여 하나의 글에서 데이터를 시각화 해주는 단어 구름과 같은 인터렉티브 그래프를 제작해 보겠습니 이러한 인터렉티브 그래프들은 특정 인포그래픽을 만드 는데 필요한 소스로서 활용될 수 있으며, 필요에 따라 수업의 도입이나 정리 부분에 정보 전달을 위한 간단한 인포그래픽으로도 활용 가능 할 것입니 01. 택시도 사이트(http://www.tagxedo.com) 접속하기 먼저 택시도 사이트(http://www.tagxedo.com)에 접속합니 택시도 사이트는 해외사이트이지만 사용이 크게 어렵지 않고 별도의 회원가입이 필요 없다는 장점이 있습니 택시도 사이트의 사용자 메뉴를 알아보기 위해 화면 좌측에 있는 'Create'나 중앙에 있는 Start now'를 클릭합니 02. 사용자 메뉴 알아보기 화면과 같이 택시도 크리에이터로 화면이 전환됩니 그럼 이제부터 택시도의 사용자 메뉴에 대해 알아보겠습니 택시도의 화면은 크게 4부분으로 나눌 수 있습니 먼저 1번 부분은 텍스트 입력을 위한 Load' 메뉴 와 작업한 내용을 저장하거나 출력할 수 있는 'Save 와 'Share' 메뉴가 있습니 다음으로 2번 부분은 제작할 단어 구름의 색상 (Color), 테마(Theme), 글꼴(Font), 방향(Orientation), 레이아웃(Layout) 등 을 변경할 수 있는 메뉴들이 있습니 다음 3번 부분은 단어 구름의 모양(Shape), 작업 기록(History), 단어와 레이아웃(Word & Layout Options)에 대한 옵션을 변경할 수 있는 옵션 메뉴 가 있습니 - 18 -

택시도 사용자 메뉴 중에서 가장 먼저 알아볼 메뉴 는 단어 구름을 만들기 위해 내용을 불러오거나 입력하는 Load 메뉴입니 먼저 화면에서 1번 Load 를 클릭합니 그러면 Load menu가 화면에 나타납니 Load menu는 텍스트를 입력할 수 있는 3가지 방법으로 구성되 어 있습니 첫 번째 방법은 2에서 단어 구름으로 만들고자 하는 텍스트를 문서 파일 형태로 불러오는 것입니 참고로 이 방법은 한글이 지원되지 경우가 있 으므로 권장하지 않습니 두 번째 방법은 3에서 단어 구름으로 만들고자 하 는 웹페이지 주소를 불러오는 경우입니 이 방법 은 특정 웹페이지에 사용된 텍스트를 활용하여 단어 구름으로 만들 경우에 활용할 수 있습니 세 번째 방법은 4에 단어 구름으로 만들고자 하는 텍스트를 직접 입력하는 경우입니 가장 일반적 이고 널리 쓰이는 방법입니 텍스트 내용을 불러오거나 입력이 끝나면 Submit' 버튼을 클릭하여 단어 구름을 만들어 주면 됩니 단어 구름을 만들기 위한 세 번째 방법인 직접 입력하는 방법으로 다음과 같이 인포그래픽 제작 과 활용, 데이터 기반 인포그래픽, 지도기반형 인포 그래픽, 타임라인형 인포그래픽, 모션 그래픽, 인터 렉티브 그래픽, 색상, 글꼴, 텍스트 레이아웃, 아이 콘, 픽토그램, 차트, 그래프 등 인포그래픽과 관련 된 단어들을 입력한 후 단어 구름을 완성한 모습입 니 직접 실습해 보시길 바랍니 다음으로 알아볼 메뉴는 택시도로 만든 단어 구름 을 저장하거나 출력하기 위한 메뉴입니 택시도로 만든 단어 구름은 이미지나 웹페이지 형태로 저장할 수 있으며 직접 출력할 수도 있습니 택시도로 만든 단어구름을 아미지로 저장하기 위해 먼저 1번과 같이 Save, Share를 클릭합니 그 후 저장이나 출력 방식을 선택합니 2는 이미지로 저장할 때 3은 웹페이지 형식으로 저장할 때 사용하는 메뉴 입니 4는 택시도로 만든 단어 구름을 프린터로 직접 출력하기 위한 메뉴입니 - 19 -

이번에는 택시도로 만든 단어 구름의 색상, 테마, 글꼴, 방향, 레이아웃을 변경하는 메뉴에 대해 알아 보도록 하겠습니 먼저 색상과 테마를 변경하는 방법에 대해 알아보도록 하겠습니 택시도에서 단어 구름의 색상을 변경하려면 1 Color를 클릭합니 Color를 클릭하면 택시도 의 단어 구름 색상이 자동으로 화면에서 변경됩니 다음으로 택시도의 테마를 변경하고자 할 때에 는 Theme를 클릭합니 Theme를 직접 선택하고 자 할 때에는 2 Theme 옆의 화살표를 클릭합니 3 화면과 같이 Theme의 메뉴가 확장된 후 원하는 테마를 직접 선택하면 해당 테마로 단어 구 름의 색상이나 글꼴 등이 변경됩니 다음으로 택시도로 만든 단어 구름의 방향, 레이아 웃, 글꼴을 변경하는 방법에 대해 알아보도록 하겠 습니 우선 택시도에서 단어 구름의 글꼴을 바꾸 고자 한다면 1 Font 메뉴를 클릭해줍니 Font 메뉴도 오른쪽 화살표 방향 버튼을 누르면 확장 메뉴가 나타납니 하지만 글꼴을 바꿔줄 수 있는 경우는 단어 구름으로 만들 텍스트 내용이 영어일 경우에만 유효합니 만약 단어 구름의 방향을 수정하려면 2 방향 Orientation 메뉴를 클릭합니 Orientation 메뉴 또한 오른쪽 화살표 방향 버튼을 누르면 확장 메뉴 가 나타납니 3 흩어진(Any), 가로(Horizontal), 세로(Vertical), 가로 세로 혼합(H/V) 4가지 방향 중 원하는 방향을 선택해 줍니 4 Layout 메뉴는 단어 구름 내에 단어들의 배열을 바꾸는 메뉴입니 클릭할 때 마다 단어구름에 있는 단어들이 자동으로 변경됩니 이제 택시도의 옵션 메뉴에 대해 학습해 보도록 하겠습니 택시도의 옵션 메뉴는 크게 단어 구름 의 모양을 정할 수 있는 Shape 메뉴와 작업 기록 을 저장해 놓은 History 메뉴, 그리고 단어와 레이 아웃의 옵션을 변경할 수 있는 Word & Layout Options 메뉴로 구성되어 있습니 1 그 중 Shape 메뉴를 통해 사용자는 다양한 형태의 단어 구름을 제작할 수 있습니 오른쪽 화살표 모양을 선택하면 2 Shape 메뉴가 확장되 며 그 중에서 원하는 모양을 선택해 보시기 바랍니 - 20 -

이번에는 단어와 레이아웃의 옵션을 변경하는 메뉴 인 Word & Layout Options 메뉴에 대해 알아보도 록 하겠습니 1 Word & Layout Options 메뉴를 클릭합니 Word메뉴, Layout 메뉴, Skip 메뉴 등이 나타납니 2 Word 메뉴에서는 단어 구름에 숫자를 포함시킬 지, 일반적인 단어를 제외시킬지, 관계있는 단어 등 을 병합할지 등을 정할 수 있습니 3 Layout 메뉴에서는 색상의 다양도, 최대 단어 숫자 등 레이아웃과 관련된 여러 옵션을 수정할 수 있습니 택시도의 사용자 메뉴 학습에 마지막으로 알아볼 내용은 Word & Layout Options 메뉴 중 Skip 메뉴입니 Skip 메뉴를 통해 택시도 사용자는 단어 구름에서 제외하거나 포함시킬 단어를 선택할 수 있습니 1 먼저 Word & Layout Options 메뉴를 클릭합니 그 다음 탭 메뉴 중 스킵 메뉴를 클릭합니 2 화면과 같이 단어 구름으로 제작할 단어들의 목록이 나타납니 단어 구름에서 제외할 단어를 선택하면 제외되는 단어는 노란색으로 표시되면서 Skip이라고 표시됩니 03. 인터렉티브 그래프 단어구름 만들기 지금까지 택시도의 사용자 메뉴에 대해 알아보았습 니 학습한 내용을 바탕으로 수업 중 활용 가능 한 인터렉티브 그래프 중 하나인 단어 구름을 제작 해 보도록 하겠습니 1 먼저 Load 를 클릭합니 2 단어 구름으로 제작할 텍스트 파일을 준비합니 텍스트 파일의 내용을 복사하여 택시도 화면에 붙여넣기 합니 참고로 입력한 내용은 초등학교 6학년 사회과 지리 학습에 나오는 아프리카에 대한 내용입니 - 21 -

입력한 내용으로 단어 구름이 완성된 모습입니 하지만 단어 구름이 방향이 일정하지 않고 흩어진 모양(Any)이므로 가로 방향(Horizontal)으로 바꾸어 보도록 하겠습니 1 방향(Orientation) 메뉴에서 오른쪽 화살표 모양 을 클릭하여 방향 메뉴를 확장합니 2 가로 방향(Horizontal)을 선택해 줍니 단어구름의 단어 들이 가로방향으로 정렬되었습니 이제 단어 구름에 어울리는 모양을 선택해 주겠습니 옵션 메뉴에서 'Shape'를 클릭합니 1 'Shape'의 확장 메뉴에서 아프리카 모양을 선택해 줍니 2 아프리카 모양으로 화면이 로딩 된 후 단어 구름이 완성되면 오른쪽 화면 모서리의 X를 눌러 셰이프 메뉴를 닫아줍니 단어 구름이 아프리카 모양으로 완성되었습니 이제 단어 구름의 테마를 변경해 보도록 하겠습니 1 'Theme'메뉴 선택하고 오른쪽 화살표 모양을 클릭하여 메뉴를 확장합니 2 화면에 나타나는 테마 리스트 중에서 마음에 드는 테마를 선택합니 본 강의에서는 200 Fruits of Passion'을 선택해 보았습니 이번에는 단어구름에서 중요하지 않는 단어를 Word & Layout Options 의 Skip 메뉴를 이용하 여 걸러내 보도록 하겠습니 1 화면 좌측 옵션 메뉴 중 Word & Layout Option 를 클릭합니 2 새롭게 화면에 나타나는 메뉴 중 Skip 메뉴를 선택해 줍니 - 22 -

화면이 전환되면서 처음에 입력한 텍스트의 단어 목록이 화면이 나타납니 1 각각의 단어 중 불필요한 단어나 있다, 크다 와 같이 아프리카와 관련성이 없는 서술어을 클릭 하여 줍니 단어 목록에 Skip 이라고 표시되며 이 단어는 단어 구름에서 제외됩니 2 단어 선정이 끝났으면 'Accept' 버튼을 클릭하 여 적용하여 줍니 'Accept' 버튼을 누르지 않은 채 메뉴 창을 닫으면 단어 구름에 적용이 되지 않으니 유의하시기 바랍니 단어를 걸러준 후 완성된 아프리카의 단어 구름입 니 화면 우측 하단에 FullScreen 을 클릭하면 전체화면으로도 보실 수 있습니 완성된 단어 구름은 Save 메뉴를 이용하여 JPG 이미지 파일로 저장해보겠습니 1 Save 메뉴 클릭합니 2 탭 메뉴 중 Image 를 선택합니 3 저장할 파일 형식을 JPG나 PNG 파일 중 선택 합니 4 저장할 위치를 선택하고 파일명을 입력합니 5 저장합니 마지막으로 파워포인트에 택시도로 만든 단어 구름 이미지를 불러와 보도록 하겠습니 파워포인트 학습정리 슬라이드에 파워포인트의 삽입-그림을 이용해 택시도 이미지를 추가한 모습입니 - 23 -

정리하기 1. 이즐리 사이트에 대해 알아보기 가. 이즐리 사이트는 무료로 제공되는 템플릿을 이용하여 간편하게 인포그래픽을 만들 수 있는 사이 트입니 나. 이즐리 사이트 사용자 메뉴에서는 아이콘, 배너와 같은 객체, 화살표와 말풍선과 같은 모양, 텍스 트를 삽입할 수 있으며 필요에 따라 이미지를 업로드 할 수 있습니 이즐리 사이트 객체 편집 메뉴에서는 객체를 지우거나, 복사할 수 있으며 색상, 크기, 투명도 등을 수정할 수 있습니 2. 이즐리 사이트에서 인포그래픽 제작하기 가. 이즐리 사이트에서 인포그래픽을 제작하기 위해 이미지 등의 다양한 자료를 사전에 수집합니 나. 이즐리 사이트에서 템플릿을 선택한 후 캔버스 크기를 조절합니 선택한 템플릿에서 불필요한 정보나 객체 등을 삭제합니 라. 인포그래픽의 레이아웃을 결정한 후 아이콘, 이미지 등을 삽입하고 내용을 입력합니 마. 필요에 의해 내용을 수정하거나 객체의 크기, 색상, 투명도 등을 수정합니 바. 제작한 인포그래픽을 이미지나 PDF 파일로 출력합니 3. 택시도 사이트에서 인터렉티브 그래프(단어 구름) 제작하기 가. 택시도 사이트는 별도의 회원가입 없이 웹상에서 인터렉티브 그래프인 단어 구름을 무료로 제작 할 수 있는 사이트입니 나. 택시도 사이트에서 단어 구름을 제작하기 위해서는 미리 준비해 놓은 텍스트를 복사하여 붙인 다음 알맞은 모양과 테마, 색상 등을 수정하여 줍니 옵션 메뉴인 Skip 메뉴를 통해 불필요한 단어나 서술어를 걸러내어 단어 구름을 완성합니 라 택시도로 완성한 단어 구름은 다른 인포그래픽 제작을 위한 소스로 활용하거나 파워포인트 등에 삽입하여 수업 중에 활용합니 (참고문헌) 곽승원(2013). 인포그래픽 프레젠테이션. 서울: 한빛미디어. 비주얼다이브(2014). 인포그래픽 완전정복. 서울: 정보문화사. 이현주 외(2013). 아하! 인포그래픽. 서울: 인터프레스. 이즐리 웹사이트 http://www.easel.ly 택시도 웹사이트 http://www.tagxedo.com - 24 -