본문으로 바로가기

이력, 연혁등 시간의 흐름을 표시하는 페이지가 필요할때 이를 좀 더 역동적으로 표현할 수 있는 도구들 중에 하나인 TimelineJS에 대해 소개합니다. 기존 버전에서 버전 3으로 업데이트 되었습니다.

TimelineJS 3 소개

TimelineJS 3는 기존 버전에서 작성자와 개발자들에게 좀 더 유연함을 제공할 수 있도록 전체 재작성 되었다. 많은 부분을 비틀었는데, 유명한 도구이다보니 기존 사용자들을 위해 기존 버전을 지속적으로 제공하고 있다.

TimelineJS 3 새로운 점

  • 유연한 행(row) 레이아웃 : 더 이상 3/6 행의 제한이 없다.
  • 캡슐화 : 페이지당 하나 이상의 타임라인이 가능하다.
  • 매우 거대한 시간간격을 지원 : 공룡! 빅뱅!(매우 거대함을 지칭)
  • 새로운 미디어 유형 : 드랍박스 이미지, DocumentCloud
  • Pagepeeker(웹사이트의 스크린샷)에 대한 지원 중단
  • 개발자 기능 : 아키텍쳐 클리너, 유닛 테스트, 이벤트들

타임라인 만들기

TimelineJS는 어떤 사이트나 블로그에서도 작동하며, 아래에서 네 단계에 걸쳐 작성하는 방법을 알아본다.

1. 스프레드시트를 생성

제공되는 템플릿을 이용하여 새로운 구글 스프레드시트를 작성한다. 기존에 입력되어 있는 정보를 참고하여 적당히 날짜, 텍스트와 링크를 삭제하고 정보를 대체한다. 템플릿을 이용한 작업에 대한 자세한 내용은 이 문서 를 참고하자(아래 참고).



열(column) 헤더를 변경하지 말아야 하며, 어떤 열도 제거하면 안된다. 또한, 스프레드시트에 빈 행을 두지 말아라.

만일, 기존의 TimelineJS 버전을 사용하고 있다면 바로 3단계로 진행하도록 하자.

2. 웹에 게시하기

스프레드 시트의 파일 > 웹에 게시 를 선택한다. 팝업 창이 뜨면 "게시" 버튼을 클릭하고 재차 확인을 물으면 이를 승낙한다. 팝업창 가운데의 URL을 복사한다.

3.복사한 URL을 붙여넣기

TimelineJS의 홈페이지로 이동한 후 Make Timline 3번 항목에 복사한 URL을 붙여넣고 크기를 설정한다. 옵션 버튼을 선택하고 언어설정 및 기타 설정등을 마무리한다.

4.생성된 코드를 웹사이트에 붙여넣기

하단에 생성된 코드를 원하는 페이지에 붙여넣는다.

간단히 사용방법을 알아보았는데, 이를 스프레드시트가 아닌 간단한 입력폼으로 만들 수 있다면 아주 쓸만한 플러그인이 하나 될 것 같습니다. 이미 비슷한 플러그인이 있을 듯 싶군요.