Timeline JS

워드프레스 타임라인시간정보 Timeline JS ∙ 제작사: Northwestern University ∙ 웹페이지: http://timeline.knightlab.com/ ∙ 버전: ∙ 용도: 타임라인 제작 ∙ 설치환경: 크롬, 사파리 웹브라우저 왜 필요한가? 타임라임은 Timeline Maker Pro와 같은 소프트웨어 기반에서 작성하는 방법과 Dipity, StoryMapsJS,TimelineJS 등과 같이 웹기반에서 작성하는 방법으로 분류할 수 있습니다. 소프트웨어 기반 타임라인은 대부분 이미지 방식의 결과물을 제공하며, 웹앱 기반 타임라인은 웹페이지 서비스 방식의 결과물을 제공한다는 차별성이 있습니다. 웹앱 기반 타임라인은 Dipity, Student Interactive Timeline, Timerime, Tiki-Toki, Timeglider, MyHistro,StoryMap JS 등과 같이 독립적으로 작동되는 방식과 Timeline JS 등과 같이 Wordoress Plugin으로 작동되는방식으로 구분됩니다. Wordoress 기반의 경우 Postline와 같은 전문 테마방식과 Timeline Express, CoolTimeline, Timeline Pro, Timeline JS와 같은 플러그인 방식으로 다시 분류할 수 있습니다. Wordoress 테마나플러그인 방식은 사용자자 웹호스팅을 통해 웹페이지를 서비스하고 있는 동안 생성된 타임라인 데이터는 지속적으로 유지할 수 있는 반면 웹앱과 특정한 사이트 기반에서 생성되는 타임라인 데이터는 영향 하에 있기 때문에서비스 제공자의 상활에 따라 지속성이 훼손된 수 있는 가능성이 있습니다. 그러나 웹앱 방식은 간단한 조작으로타임라인을 생성할 수 있는 장점이 있으며 작성된 타임라인은 다양한 서비스 모듈로 웹기반에서 서비스할 수 있는 확장성도 있습니다. Knightlab의 TimelineJS에서 구글 스프레드시트를 이용하여 연도, 제목, 이벤트 텍스트, 미디어 절대주소 링크, 배경 이미지 링크 등을 작성하여 웹게시 링크를 생성하고, TimelineJS에서 타임라인 Embed 주소를 생성하거나 미리보기 링크를 취득합니다. 생성된 iFrame 코드를 워드프레스 플러그인 Knightlab Timeline에 삽입하며 해당 ‘페이지’ 위치에 타임라인이 생성됩니다. 또한 공간(지도) 정보는 플러그인 내에서 Google Maps 링크방식으로삽입할 수 있고, 타임라인 외부에 Map 전용 플러그인을 이용해서도 삽입할 수 있습니다. 전문적인 지도 플러그인은 핀(pin), 경로 등을 시각적으로 표현하는 지도를 삽입할 수 있게 지원합니다. [독립방식] • Dipity: http://www.dipity.com • Student Interactive Timeline: http://www.readwritethink.org/classroom-resources/student-interactives/timeline-30007.html • Timerime: http://www.timerime.com/en/ • Time Toast: http://www.timetoast.com/ • Tiki-Toki http://www.tiki-toki.com/ • Timeglider: http://Timeglider.com/ • MyHistro: http://www.myhistro.com/ • StoryMap JS: https://storymap.knightlab.com [워드프레스 플러그인 방식] • Timeline JS: http://timeline.knightlab.com/ 1

인문융합 큐레이팅 준비사항 1) Wordpress에서 Knight Lab TimelineJS 플러그인을 설치합니다. 2) 타임라인을 제작할 텍스트, 이미지, 장소를 준비합니다. 3) 구글 드라이브 계정을 준비합니다. 사용법 1) 크롬 브라우저에서 TimelineJS에 입장합니다. http://timeline.knightlab.com/ 2) 타임라인을 생성하기 위해 [Make a Timeline]를 클릭합니다. 타임라인 제작과정은 총 4단계로 분류됩니다. • 1단계: Google Spreadsheet 텍스트 작성 • 2단계: 웹 출판 • 3단계: 타임라인 생성 • 4단계: 사용자 웹페이지에 타임라인 Embed Code 삽입 3) Google Spreadsheet를 생성하기 위해 [Get the Spreadsheet Template]를 클릭합니다. 4) 구글 드라이브로 이동하는 창이 나타납니다. [Google 드라이브 이동] 버튼을 클릭합니다. 2

시간정보 워드프레스 타임라인: TimelineJS 5) 구글 드라이브에 로그인하기 위해 메일과 비밀번호를 입력합니다. 6) 구글 드라이브에 로그인된 상태에서 TimelineJS 1단계 [Get the Spreadsheet Template] 다시 클릭합니다. 가장 먼저 구글 드라이브에 로그인을 할 경우 [Get the Spreadsheet Template]을 클릭하면 직접 구글 드라이브로 연결됩니다. 제작사에서 제공하는 예제 Spreadsheet가 나타납니다. 7) 예제를 참고하기 위해 [이 템플릿 사용]을 클릭합니다. 8) 사용자의 계정 [스프리시트 홈]에 [Official TimelineJS3 Template의 사본] 이름으로 편집 가능한 스프레시트가 로딩됩니다. 사용자는 자신의 용도에 맞게 수정하여 사용할 수 있습니다. 3

인문융합 큐레이팅 9) 스프레시트는 타임라인을 생성하기 우한 시간, 제목, 본문, 미디어, 배경 등의 필드로 구성되며, 각각의 타 임라인에 개별적으로 적용할 수 있습니다. • Year, Month, Day, Time: 타인라인 시작 시간, 연도만 입력 가능 • End Year, End Month, End Day, End Time: 타임라인 종료 시간, 입력생략 가능 • Display Date: 표시 날자 • Headline: 개별 타임라인 이벤트 제목 • Text: 타임라인 이벤트 본문 • Media: 이벤트 삽입 이미지, 비디오, URL 방식 • Media Credit: 미디어 제공자 • Media Caption: 미디어 설명 • Media Thumbnail: 미디어 썸네일 • Type: 타임라인 유형 • Group : 타임라인 그룹 • Background: 타임라인 이벤트 배경, 이미지와 컬러로 설정 10) 스프레시트 제목을 클릭하여 사용자 용도에 맞게 수정합니다. 11) 스프레시트의 불필요한 데이터 열을 해당 열에 마우스 커서를 놓고 우클릭하여 [열삭제]나 [열 숨기기]를 클릭합니다. 필요한 필드만 보이게 하여 작업할 경우 작업 효율성이 높아집니다. 12) 가장 간단하게 아래와 같이 Year, Headline, Text, Media, Background 만으로 스프레시트를 구성할 수 있습니다. 연도, 제목, 본문을 각각 입력합니다. 4

시간정보 워드프레스 타임라인: TimelineJS 13) 미디어는 이미지, 비디오, 구글맵을 삽입할 수 있으며 로콜 업로드가 아닌 URL 방식으로 입력합니다. • 이미지: 인터넷상의 이미지 절대주소나 웹호스팅 공간에서 절대주소를 확보합니다. http://auraweon.cafe24.com/luxun_image/luxun(17).jpg • 비디오(Youtube): Youtube나 Vimeo에서 URL 주소를 확보합니다. https://youtu.be/WfGkTLNo5yE • 구글맵: 구글맵에서 지점을 검색하여 [지도 공유 또는 퍼가기]를 클릭하여 URL 주소를 확보합니다. https://goo.gl/maps/FW61QWgSyUq 14) 배경이미지는 특정한 컬러값이나 이미지 절대주소 URL을 삽입하여 설정합니다. 15) 기본 타임라인 데이터 입력이 완료되면 2단계로 웹출판을 합니다. [스프레시트] ⇨ [파일] ⇨ [웹에 게시]를 클릭합니다. 5

인문융합 큐레이팅 16) [웹에 게시] 창이 나타나며 [게시]를 클릭하고 다시 [확인]을 클릭합니다. 17) [웹에 게시] 창 [링크]에 스프레시트 링크가 생성됩니다. [Ctrl+C]를 눌러 주소를 복사합니다. 이 주소는 구글 스프레시트 기반 텍스트입니다. https://docs.google.com/spreadsheets/d/1oP4dcxm15lCcQcM4xZXDZM7YHpTg-QX4oIu-BWcdHB4/pubh tml 18) TimelineJS 웹에서 3단계를 진행하기 위해 [Google Speadsheet URL]에 복사한 주소를 붙입니다. 옆 [Width], [Height]에서 생성될 타임라인의 폭비율과 높이를 사용자의 용도에 맞게 설정할 수 있습니다. 6

시간정보 워드프레스 타임라인: TimelineJS 19) 스트프시트 데이터와 타임라인의 결합을 확인하기 위해 4단계 [Preview] 버튼을 클릭합니다. 하단 미리보기 창에 타임라인이 생성됩니다. 20) [Get link to Preview]를 클릭하면 웹브라우저 새창에 나타나면서 생성된 타임라인이 나타납니다. 이 타임라인은 고유한 주소가 생성됩니다. 이 주소를 웹브라우저 주소창에 입력하면 아무나 해당 타임라인을 볼 수 있습니다. 생성된 고유 URL 주소만으로도 타임라인을 활용할 수 있습니다. http://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1oP4dcxm15lCcQcM4xZXDZM7YHpTg-QX4oIu-BWcdHB4&font=Default&lang=en&initial_zoom=2&height=650 21) 4단계에서 생성한 타임라인을 웹페이지에 삽입하여 운영할 수 있는 Embed Code가 생성됩니다. 코드는iFrame 방식으로 생성되며 구글맵과 동일한 방식으로 삽입이 가능합니다. <iframesrc='//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1oP4dcxm15lCcQcM4xZXDZM7Y HpTg-QX4oIu-BWcdHB4&font=Default&lang=en&initial_zoom=2&height=650' width='100%' 7

인문융합 큐레이팅 height='650' frameborder='0'></iframe> 22) Embed Code를 복사한 후 웹페이지에 삽입하기 위해 사용자가 관리하고 있는 Wordpress로 로그인합니 다. TimelineJS에서 생성한 타임라인을 웹페이지에 삽입하기 위해 플러그인 [Knight Lab TimelineJS]을 무료설치 하고 활성화합니다. 23) 생성한 타인라인을 삽입할 새페이지를 생성하고 제목을 입력합니다. 설치한 플러그인 [Knight Lab TimelineJS]은 [미디어 추가] 옆에 [Add Timeline] 아이콘으로 추가됩니다. 24) 타임라인을 삽입하기 위해 [Add Timeline] 아이콘을 클릭합니다. [Insert Timeline] ⇨ [Data Source]에 iFrame Code를 붙입니다. 여기서도 타임라인의 폭과 높이를 설정할 수 있습니다. 하단의 [Insert Timeline] 아이 콘을 클릭하여 본문에 삽입합니다. 25) 본문에 타임라인이 삽입됩니다. [미리보기]를 클릭하여 타임라인의 작동여부를 확인합니다. 만약에 정상작 동이 되지 않는다면 회색 박스 상하에 있는 텍스트를 제거합니다. 회색박스 이외의 텍스트를 제거한다는 의미입니 다. 8

시간정보 워드프레스 타임라인: TimelineJS 26) 타임라인이 정상적으로 작동됩니다. Wordpress [외모] ⇨ [메뉴]에서 생성한 타임라인 페이지를 적당한위치에 메뉴로 설정합니다. 타임라인은 페이지 텍스트 속에 삽입할 수도 있습니다. 26) TimelineJS 기반에서 생성된 타임라인은 일반적인 텍스트 위주의 타임라인과는 차별성이 있기 때문에Postline와 같은 타임라인 전문 테마 내에서 하위 메뉴로 구성하여 활용할 수 있습니다. 9