구글 드라이브로 타임라인 만드는 방법 (Timeline.js)

회사에서 연혁을 만들어야 해서 Knight Lab Timeline.js를 활용하게 되었다.

 

큰 화면에 해당 연도에 대한 내용을 자세히 보여줄 수 있고,

테스트해본 결과 이미지, 동영상, 구글맵 등을 활용할 수 있는 점이 좋은 것 같음!

 

#예시

 

 

#만들기 시작

Timeline.js를 사용하기 위해 우선 사이트에 접속한다.

https://timeline.knightlab.com/

Timeline JS

 

버튼을 눌러 바로 아래로 내려가 보자.

Make a Timeline 버튼

 

#1. 스프레드시트 만들기

Get the Spreadsheet Template 버튼

스프레드시트 템플릿을 다운받아 구글 드라이브에 저장.

 

 

스프레드 시트 예시1

이러한 형태의 스프레드시트가 생성되어 있는 걸 볼 수 있다.

처음에 테스트용으로 어느 정도 데이터를 입력한 후(나중에 수정 가능)

바로 다음 단계 Go!

 

#2. URL 복사

사이트에서 처음 나오는 설명은 무시하세요

사이트에 나와있는 방법은 무시한다. 나도 첨에 이거 때문에 헷갈림ㅠㅠ

 

※중요(2017년 7월 18일부로 변경된 사항)

구글 드라이브 브라우저 주소창에 있는 url을 복사한 후 사이트로 다시 돌아온다.

 

#3. 타임라인 생성

Generate your timeline 단계

빈칸 안에 복사한 url을 붙여 넣는다.

가로 크기(Width)를 조절하고 옵션에서 언어, 폰트 등을 변경합니다.

 

 

#완성된 타임라인 공유

Preview 버튼

프리뷰를 통해 만들어진 타임라인을 미리 확인한다.

 

 

Share your timeline

Embed에 있는 <iframe>~</iframe> 부분을 복사하여 본인의 홈페이지 HTML 코드 내부에 붙여 넣는다.

예시, 결과를 보여주기 위해 블로그 HTML에 넣어 보았다.

 

#완성!

 

많은 데이터를 한꺼번에 타임라인에서 보여줄 때 좋은 것 같음