이런 것도 해야 해?! 백오피스 툴(Back office Tools) 또는 시각화 지표 개발 편

작은 하나의 기능을 만들더라도 개발자 또는 기획자의 감각과 경험이 드러난다.

오래도록 IT에 몸담았지만 내가 말하지 않아도 아래의 것들에 대해 고민하고 알맞게 적용했던 개발자나 기획자는 드물었던 것 같다.

엑셀, 구글 시트 등등 우리가 자주 사용하는 도구들에서 유용하게 사용하는 몇 가지 기능만 적용하면 되는 것인데, 개발의 난이도 문제라면 차라리 저 기능들을 가져와서 사용할 수 있는 방법을 제공하는 것이 현명한 것일 수도 있겠다.

• 콤보 박스
  • 기본 값을 표시한다. 기본 값을 표시할 수 없으면 선택이 필요함을 사용자 눈에 띄도록 표시할 수 있도록 한다.
  • 선택 값은 정렬한다. 중요도, 이름에 대해 오름차순/내림차순 등 값에 적절한 정렬 방법으로 표시한다.
  • 선택 값이 많아 스크롤이 발생할 경우 검색 기능을 지원한다.
  • 두 개 이상의 값을 선택할 수 있는 경우, 선택 후에는 선택된 값을 효과적으로 표시할 수 있는 방법을 고려한다.
  • 선택할 수 있는 값이 많고, 두 개 이상의 값을 선택할 수 있을 때는 검색 기능을 지원할 때, 콤보 박스가 닫힐 때까지 검색하여 선택한 값들을 유지하고, 전체 선택/해제를 할 수 있도록 한다.
• 리스트
  • 칼럼은 중요도 순으로 표시한다.
  • 2 페이지 이상의 내용을 가지는 리스트에 추가/삭제가 가능한 경우, 전체 선택/해제 기능을 지원한다.
  • 2 페이지 이상의 내용을 가지는 리스트에는 중요 칼럼에 대한 정렬 기능을 지원한다.
  • 값이 정해져 있는 타입들에 대한 칼럼이 많은 경우, 타입들에 대한 필터를 제공한다.
  • 값이 정해져 있지 않은 칼럼이 많은 경우, 해당 칼럼들을 대상으로 like 검색 기능을 제공한다.
  • 삭제, 온/오프, 전체 내용에 대한 변경 등 행 전체에 적용되는 동작되는 기능은 행 양 끝 배치를 우선적으로 고려하도록 한다.
• 그래프
  • 범례에서 무효한 항목은 비활성화하여 항목이 있다는 것만 표시한다.
  • 범례에서 활성화되어 있는 항목들은 중요도에 따라 정렬하여 볼 수 있는 항목들을 제대로 볼 수 있도록 한다.
  • 수치 등은 툴팁에서 중요도에 따라 정렬을 하여 보여준다. 

• •  툴팁에 항목이 많으면 스크롤 또는 페이징을 적용한다(그렇지 않으면 툴팁에서 표시해야 할 항목이 많을 경우 그래프 영역을 벗어나서 내용이 잘린다).
    • 참고: how to apply scroll on tooltip in highcharts.

Scatter plot - JSFiddle - Code Playground