시계열 차트의 Interval Preset

문제의 정의

시계열 차트에는 고민해야 할 요소가 많다. 그 중에서도 하나의 차트에 몇 개의 값을 보여주는게 적절한지 즉, X축에 몇개의 핀을 찍어야 할지를 결정하는 것이 어려운 문제였다. 고려해야 할 경우의 수가 많았기 때문인데, 특히 해상도, Range, Interval 3요소의 조합이 난감했다.

모바일을 위해 반응형 웹으로 만들었는데, 또 시계열 차트에서 변화의 흐름을 잘 볼 수 있도록 PC에서도 가로폭 제한 없는 풀사이즈 차트를 보여주고 있으니, 작게는 아이폰의 320픽셀부터 크게는 아이맥의 5120픽셀까지 차트의 가로 크기가 변한다.

이용자가 선택하는 Range의 범위도 중요하다. 조회 범위를 하루를 선택하면 값이 1개지만 1년치를 선택하면 값이 365개가 된다. 거기에 Interval을 얼마로 하느냐에 따라 x축에 찍을 핀의 갯수는 천차만별로 달라진다. 만약 1년치를 1시간 단위로 본다면?

문제는 이렇게 많은 값을 조회하면 서버도 터지고, 네트워크도 자원을 많이 쓰고, 차트를 그리는 브라우저도 버벅이고, 보는 사람도 알아보기 힘들게 된다는 점이다. 이 모든 문제를 해결하기 위해서는 적절한 제한이 필요했다.

가설과 기준

우선 몇가지 기준(=가정)을 세운 뒤, 엑셀시트를 만들고 X축의 갯수를 계산하면서 가정을 다듬어나갔다. 처음 세운 가정은 이렇다.

조건부서식으로 min값과 max값이 사이가 되면 셀이 초록색으로 변하게 한 뒤, Range가 적절하게 그룹을 만들도록 min과 max값을 변경했다. Interval도 10분이 있는데 15분을 또 줄 필요가 있을까? 와 같은 고민을 반복하면서 줄여나갔다.

interval-preset-excel-1

결론과 재구성

최종적으로 아래와 같은 결론을 도출했다. Range는 이용자가 선택한 날짜의 범위이고, Interval은 Range에 따라 제공할 선택가능한 옵션이다.

Type Range Interval
TYPE A 1 5분, 15분, 30분, 1시간
TYPE B 2,3,4,5 15분, 30분, 1시간
TYPE C 6,7,8,9,10 30분, 1시간, 6시간
TYPE D 11~21 1시간, 6시간, 12시간
TYPE E 22~130 6시간, 12시간, 1일
TYPE F 131~260 12시간, 1일
TYPE G 261~365 1일

이렇게 하면 아무리 많은 X축을 그리더라도 520개 이하가 되고, 또 반대로 아무리 적은 X축이 그리더라도 22개 이상이 되므로 언제든 적절한 수준의 시계열 차트를 그릴 수 있게 된다. 이렇게 모든 문제를 해결한 줄 알았지만 실제로 적용했을 때 가정에서 발견하지 못했던 새로운 문제를 찾게 되었다.

interval-preset-excel-2

그래서 max의 제한은 유지한 채 min의 제한은 없애는 방식으로 기준을 업데이트했다. 2017년 2월 2일 기준 현재 아임포트 서비스에 적용된 Range Interval Preset이 위와 같다.

여전히 해결되지 않은 문제

Interval에 1개월을 추가하는 것이 필요하다. 테스트하면서 Range로 1년을 선택하고 Interval을 월로 지정해 월별 변화과정을 보려고 했는데, 지금은 선택할 수 있는 가장 큰 Interval 단위가 1일이어서 조회가 불가능했다. 이 이슈는 릴리즈 일정을 고려해 다음 버전에 추가하기로 결정했다.