기획 명세서 / Product Specification

PC 사양 대시보드 시각화 개선 기획서

기획부서: IT자산관리 태스크포스(TF) 최종 수정일: 2026. 05. 28 문서 버전: v1.1 (실제 엑셀 데이터 반영)

기획 개요 및 목적

본 기획은 법인별/직무별 PC 자산 사양 현황의 시각적 피로도를 낮추고 데이터 전달력을 고도화하기 위한 개선 작업을 목적으로 합니다. 기존 대시보드 레이아웃의 비정형 비율을 재정립하고, 평균 점수와 권장 점수의 비교 방식을 '다중 막대' 형태에서 '혼합형(막대 + 꺾은선) 차트'로 변경하여 대조 직관성을 극대화합니다.

주요 개선 내역

① 가족사별 PC 사양 현황 레이아웃 고도화

  • 가로 비율 정밀 제어 (1:2): 평균 점수 리스트와 막대그래프의 가로 폭 비율을 1 : 2로 엄격하게 고정하여 반응형 레이아웃 환경에서도 깨짐 없는 균형미를 제공합니다.
  • 가독성 개선: 가족사 텍스트 크기를 0.95rem, 평균 사양 점수 텍스트 크기를 1.05rem으로 키우고 세로 행간 여백을 확보해 가시성을 향상시켰습니다.

② 직무별 PC 사양 평균 및 권장 점수 혼합 시각화

  • 혼합형 차트(Mixed Chart) 구성: 직무별 PC 사양 평균 점수는 막대(Bar) 그래프로, 권장 PC 사양 점수는 그 위를 관통하는 선(Line) 그래프로 표현합니다.
  • 레이어 정렬 우선순위 적용: 차트 정의 시 권장 점수선(Line)이 평균 점수막대(Bar) 뒤에 가리지 않고 항상 맨 앞에 위치하도록 렌더링 우선순위(order 속성)를 명확히 지정합니다.
  • 정렬 원복: 수동 정렬을 지양하고, 직무별 실제 평균 PC 사양 점수가 높은 순으로 자동 내림차순 정렬되도록 하여 가장 자연스러운 시각화를 구축합니다.

직무별 평균 및 권장 사양 점수 스펙

실제 PC 자산 데이터(CPU 및 RAM 점수 연산 결과)와 관리자의 권장 기준선이 아래 명시된 대소 조건 관계를 완벽히 만족하도록 더미 데이터 및 초기 권장 스펙 기준을 재정의했습니다.

대소 관계 정렬 순서 (실제 평균 점수 기준):
AI 개발자 ➔ 편집 디자이너 ➔ 3D 디자이너 ➔ UXUI 디자이너 ➔ 3D 개발자 ➔ 프로그램 개발자 ➔ BIM모델러 ➔ 엔지니어 ➔ 웹 개발자 ➔ 기획자 순서로 실제 평균 점수 순위가 자동 정렬되어 시각화됩니다. (감리원은 실제 자산 데이터 부재로 비교군에서 제외)
정렬 순위 직무명 실제 평균 사양 점수 (Bar) 기본 권장 사양 점수 (기준) 대소 관계 평가
1 AI 개발자 88.0 점 95 점 미달 (교체 요망)
2 편집 디자이너 80.2 점 75 점 권장 스펙 충족
3 3D 디자이너 78.4 점 90 점 미달 (교체 요망)
4 UXUI 디자이너 72.7 점 70 점 권장 스펙 충족
5 3D 개발자 67.8 점 90 점 미달 (교체 요망)
6 프로그램 개발자 67.3 점 80 점 미달 (교체 요망)
7 BIM모델러 62.1 점 75 점 미달 (교체 요망)
8 엔지니어 42.9 점 60 점 미달 (교체 요망)
9 웹 개발자 39.2 점 75 점 미달 (교체 요망)
10 기획자 38.6 점 50 점 미달 (교체 요망)
11 감리원 - 40.0 점 데이터 없음

기술 구현 세부 사양

차트 렌더링 옵션 (Chart.js v4.x+)

평균 PC 사양 점수를 보여주는 데이터셋과 권장 PC 사양 점수를 보여주는 데이터셋을 하나의 Canvas 엘리먼트에 그리되, 레이어 겹침과 시인성을 확보하기 위해 다음 세부 옵션을 바인딩합니다.

  • Average Dataset: type: 'bar', order: 2, backgroundColor: '#6366F1'
  • Recommended Dataset: type: 'line', order: 1, borderColor: '#10B981', borderWidth: 3, pointRadius: 4, fill: false
  • 정렬 로직: Object.keys(jobScores).sort((a, b) => jobScores[b].avg - jobScores[a].avg)