경영진을 위한 급여 대시보드를 개발할 때, 차트와 그래프의 비율을 맞추는 게 중요했다. 다양한 화면에서 보기 좋게 표시하려면 화면 비율 계산기로 적절한 비율을 찾아야 한다.
차트 비율의 중요성
막대 차트가 너무 좁으면 데이터 비교가 어렵고, 너무 넓으면 화면을 낭비한다. 일반적으로 16:9나 4:3 비율이 보기 좋다. 파이 차트는 1:1(정사각형)이 필수다.
youtuoe.kr/aspect-ratio에서 다양한 비율을 계산해볼 수 있다.
반응형 차트
화면 크기에 따라 차트 크기가 변하면서도 비율은 유지해야 한다. CSS의 aspect-ratio 속성이나 padding-top 트릭을 사용한다.
.chart-container { aspect-ratio: 16 / 9; width: 100%; }
급여 분포 시각화
전체 직원의 연봉 분포를 히스토그램으로 보여준다. X축은 연봉 구간, Y축은 인원수다. 경영진이 인건비 구조를 한눈에 파악할 수 있다.
시계열 차트
월별 인건비 추이, 이직률 변화 등을 선 그래프로 표시한다. 비율 계산으로 적절한 가로세로 비율을 정하면 트렌드가 잘 보인다.
D3.js vs Chart.js
간단한 차트는 Chart.js가 편하고, 복잡한 커스텀 시각화는 D3.js가 적합하다. 급여 대시보드는 보통 표준적인 차트면 충분해서 Chart.js를 많이 쓴다.
접근성
색각 이상자도 차트를 이해할 수 있도록 색상뿐 아니라 패턴이나 라벨을 함께 사용한다. 데이터 테이블도 함께 제공하면 스크린 리더 사용자도 정보를 얻을 수 있다.
인쇄 고려
대시보드를 인쇄할 때 차트가 깨지지 않도록 벡터 형식(SVG)을 사용하거나 고해상도 이미지로 렌더링한다.
마치며
데이터 시각화는 비율과 레이아웃이 중요하다. 비율 계산이 필요할 때 온라인 화면 비율 계산기를 활용해보자.