타임라인은 유저들이 연대순으로 정리된 이벤트를 이해하면서 네비게이트 할 수 있는 아주 유용한 시각 툴입니다. 이 포스팅에서는 CSS와 자바스크립트 (JavaScript)를 이용하여 인터랙티브한 타임라인을 만드는 방법을 알아보겠습니다.
Timeline 구조 생성하기
먼저 index.html에 다음과 같은 두가지 기본 예제 이벤트를 넣습니다.
위의 코드는 다음과 같이 보이게 됩니다:
타임라인 디자인의 레이아웃 (layout)을 결정: 수직형과 수평형
타임라인은 수직형 (vertical)과 수평형 (horizontal)이 있습니다. 수직형은 상하 스크롤이므로 모바일 폰에서 편리하게 사용됩니다. 이벤트가 많은 경우에는 수직형이 좋습니다.
수평형은 와이드 스크린에 유용하고 중요한 몇가지 이벤트만 보여주면서 스크롤을 안해도 되는 편리함을 가지고 있습니다.
각 레이아웃은 UX의 장단점이 있으므로 필요한 용도에 맞게 사용을 권장합니다.
CSS로 스타일하기
스타일 하려는 엘리먼트는 세가지 타입이 있습니다 - 라인, 노드와 날짜 마커.
라인: 중앙 메인의 세로 라인이고 .Timeline__content::after 의 psuedo-element입니다. width와 color로 스타일이 되어있고 absolute position을 이용하여 중앙에 배치되어 있습니다.
노드: circle을 이용한 동그라미 들을 가리킵니다. background color를 이용하여 각각 다른 이벤트를 보여줍니다.
날짜 마커: 날짜를 보여주는 엘리먼트이고 Timeline__date 클래스를 이용하여 스타일링이 되었습니다. 중앙에서 좌우 위치를 번갈아가면서 설정이 되어 있습니다.
스타일링을 거치면 다음과 같이 보이게 됩니다:
자바스크립트로 애니메이션 넣기
Intersection Observer API를 이용하여 타임라인 아이템들을 스크롤시에 애니메이션 효과를 넣어 보겠습니다. 다음의 코드를 script.js에 넣습니다.
1. 첫 셋업
Timeline__item이라는 클래스가 있는 엘리먼트를 모두 셀렉트 합니다.
2. 기본 스타일링
각 아이템의 initial opacity를 0으로 맞추어 처음에는 안보이게 합니다. 그리고 CSS transition을 이용하여 smooth fading을 구현합니다.
TIP: style sheet을 사용하여 스타일을 지정할 수 있지만 위험합니다 왜냐하면 자바스크립트에서 오류가 나거나 발동을 하지않으면 모든 타임라인은 아예 보이지 않게되기 때문이죠.
3. Intersection Observer 콜백함수
fadeInOnScroll이라는 함수를 만들어서 opacity를 1로 하여 viewport와 상호작용이 생기면 아이템이 보이게 합니다.
4. Intersection Observer 옵션
옵저버의 threshold를 0.1로하여 아이템의 10%가 보일때 애니메이션을 트리거합니다
5. Intersection Observer 마무리하기
다음의 코드를 넣어 모든 아이템에 옵저버를 지정하고 마무리 합니다.
마지막 완성된 화면은 다음의 동영상과 같습니다.
타임라인 모범사례
타임라인을 개발시에는 다음과 같은 점들을 유념해야 합니다.
스크린 사이즈에 따라 타임라인의 디자인을 최적화 합니다. 반응형 디자인을 사용하여 UX가 모든 기기에 일관성 있게 합니다.
효율적인 코딩 방법을 이용하여 애니메이션이 부드럽게 합니다.
시맨틱 (semantic) HTML을 사용하여 효율적인 명암비나 ARIA label을 사용하여 접근성을 높입니다
참고:
