지금까지 내가 살아온 삶의 궤적을 웹 페이지에서 시각적으로 보여주고 싶은 욕구가 생겼다.
그래서 깃헙을 이리저리 둘러보다 우연히 흥미가 가는 저장소(life)를 발견했다.
현재 Viki에서 근무하는 cheeaun이라는 분이 개발한 타임라인 라이브러리이다.
데모 페이지에 들어가보면 이 분이 언제 태어났는지, 유년기부터 지금까지 살면서 어떤 일들이 있었는지를 타임라인 형식으로 보여준다.
‘타임라인’을 잘 모르는 분들을 위해 소개하자면,
이벤트 리스트들을 시간 순서대로 보여주는 방식의 하나이다. 주로 가로로 긴 막대바를 배치하고 각 이벤트들에 관한 설명문 및 이미지를 바에서 왼쪽부터 시간 순서대로 나열하는 디자인형식이다.
위 이미지는 ‘아이폰 타임라인’이다.
시각적으로 이러한 타임라인을 만들기 위해서는 여러 툴들을 사용해서 이미지를 편집하는 방식을 써야 하는데, 웹 페이지에서 타임라인을 보여주면서도 뭔가 보는 사람이 즐길만한 꺼리를 같이 제공해주고 싶은 나로서는 이미지를 사용하고 싶지는 않았다. 그래서 웹 페이지에서 자바스크립트와 CSS, HTML을 사용하여 타임라인을 구현하기 쉽도록 구축된 라이브러리를 찾다가 위에서 설명한 life라는 저장소를 발견한 것이다.
본 포스팅에서는
1. life라는 라이브러리를 사용하여 나만의 타임라인을 만드는 법과
2. 이를 github의 서비스 중 하나인 github pages로 publish하는 법을 소개한다.
먼저 life 라이브러리를 사용하기 위해서는 두 가지 방법이 존재하는데 life 저장소로 이동한 후 파일을 내려받아 개발하는 것과 github 계정으로 로그인 하여 fork 받은 후 개발하는 것이다.
개인적으로 github 계정으로 로그인 하여 fork 하는 방식을 추천하는데, 이럴 경우 좀 더 체계적으로 코드를 관리할 수 있을뿐만 아니라 publish를 손쉽게 할 수 있는 이점이 있다.
파일을 내려받아 개발하는 것은 어차피 github에서 fork 한 후에 개발하는 것과 동일하기 때문에 github fork 기준으로 설명을 진행한다.
1) 먼저 github 계정으로 로그인한다(github 또는 git 이라는 소스 코드 관리 시스템을 처음 접하는 분들은 해당 사용법을 익힌 후 포스팅을 읽을 것을 권한다.)
2) life 저장소로 이동한 후 우측 상단의 fork 버튼을 누른다. 저장소를 fork 할 경우, fork 시점에서 저장소를 그대로 내 계정으로 가져온다. 나만의 타임라인을 만들어야 하기 때문에 저장소를 fork 한다고 생각하면 쉽다.
3) 본인 계정에 life 저장소가 생성된 것을 확인한 후 로컬 컴퓨터에서 방금 fork 한 저장소를 clone 한다. git에서 clone 하는 방법은 다음과 같다.
git clone https://github.com/{본인아이디}/life.git
4) clone 한 후에 branch를 master에서 gh-pages로 변경해줘야 한다. github에서 제공해주는 github pages 라는 서비스를 사용하기 위하기 위해서는 branch를 gh-pages로 한 후에 commit 해야 하기 때문이다.
git checkout -b gh-pages
5) 브랜치를 변경한 후에는 life.md 라는 파일을 생성해야 한다. 타임라인을 서술하는 파일인데 index.html에서 life.md 라는 파일을 읽어다가 타임라인을 그리기 때문에 life.md는 꼭 생성해야 하는 파일이다. 라이브러리 개발자가 미리 예제 형식으로 만들어놓은 life.example.md를 복사한다.
6) 나만의 타임라인을 작성하기 전에 먼저 commit을 한다. 생성한 life.md를 add 하고 커밋 후 push 하면 된다.
git add life.md git commit -m "add life.md" git push origin gh-pages -f
7) gh-pages 브랜치로 commit을 하게 되면 대략 10분 정도 지나서 본인만의 url로 github pages를 확인할 수 있다.
{본인아이디}.github.io/life 로 접속하면 된다.
8) 이제 나만의 타임라인을 본격적으로 작성하는 시간이다. life.md 파일을 열어서 편집을 하면 되는데, 약간의 규칙이 있다.
일단 날짜 설정을 해줘야 하는데 총 세 가지 방법이 있다.
①날짜를 하나만 적는데 일 단위, 월 단위, 연 단위로 적을 수 있다. 만약 2013/12로 설정할 경우 2013/12/01 에서부터 2013/12/31까지 설정한 것과 동일하게 적용된다. 설정 방법은 기간을 포함하는 날짜
②시작 날짜와 종료 날짜를 설정한다. 설정 방법은 시작날짜 – 종료날짜 ex) 2013/12/23-2013/12/25
③시작 날짜에서부터 현재 날짜까지 설정한다. 설정 방법은 시작날짜 -~ 2013/01/01-~
날짜 설정하고 나면 날짜 설정 바로 오른쪽에 공백을 사이로 놓고 해당 타임라인에 대한 설명문을 적는다.
이상이 나만의 타임라인을 만드는 방법이다. life.md를 수정했기 때문에 다시 해당 파일을 add 한 후 commit, push 하면 된다.
Jinyoung's Blog 