380 lines
12 KiB
HTML
380 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=device-width, initial-scale=1.0">
|
|
<title>PC 사양 대시보드 시각화 개선 기획서</title>
|
|
<!-- Google Fonts: Pretendard 대체용 Outfit & Noto Sans KR -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #4F46E5;
|
|
--primary-light: #EEF2FF;
|
|
--secondary: #10B981;
|
|
--secondary-light: #D1FAE5;
|
|
--text-dark: #0F172A;
|
|
--text-muted: #64748B;
|
|
--border-color: #E2E8F0;
|
|
--bg-light: #F8FAFC;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
color: var(--text-dark);
|
|
background-color: #FFFFFF;
|
|
line-height: 1.6;
|
|
letter-spacing: -0.02em;
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header Styling */
|
|
header {
|
|
border-bottom: 2px solid var(--text-dark);
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.doc-category {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.25rem;
|
|
font-weight: 900;
|
|
color: var(--text-dark);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.meta-info {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-top: 1rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.meta-info span strong {
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
/* Section Styling */
|
|
section {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: var(--text-dark);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
h2::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 18px;
|
|
background-color: var(--primary);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
color: #334155;
|
|
margin-bottom: 1rem;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* List & Card Styling */
|
|
ul {
|
|
list-style-position: inside;
|
|
margin-left: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
color: #334155;
|
|
}
|
|
|
|
.spec-card {
|
|
background-color: var(--bg-light);
|
|
border-left: 4px solid var(--primary);
|
|
border-radius: 4px;
|
|
padding: 1.25rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.spec-card h3 {
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
/* Table Styling */
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
margin: 1.5rem 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: var(--bg-light);
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
td {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: #334155;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.badge-primary {
|
|
color: var(--primary);
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.badge-secondary {
|
|
color: var(--secondary);
|
|
background-color: var(--secondary-light);
|
|
}
|
|
|
|
/* Highlight box */
|
|
.note-box {
|
|
background-color: #FFFBEB;
|
|
border: 1px solid #FCD34D;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-size: 0.95rem;
|
|
color: #92400E;
|
|
}
|
|
|
|
.note-box strong {
|
|
color: #78350F;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 1.5rem;
|
|
margin-top: 4rem;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div class="doc-category">기획 명세서 / Product Specification</div>
|
|
<h1>PC 사양 대시보드 시각화 개선 기획서</h1>
|
|
<div class="meta-info">
|
|
<span>기획부서: <strong>IT자산관리 태스크포스(TF)</strong></span>
|
|
<span>최종 수정일: <strong>2026. 05. 28</strong></span>
|
|
<span>문서 버전: <strong>v1.1 (실제 엑셀 데이터 반영)</strong></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 1. 개요 및 목적 -->
|
|
<section>
|
|
<h2>기획 개요 및 목적</h2>
|
|
<p>본 기획은 법인별/직무별 PC 자산 사양 현황의 시각적 피로도를 낮추고 데이터 전달력을 고도화하기 위한 개선 작업을 목적으로 합니다. 기존 대시보드 레이아웃의 비정형 비율을 재정립하고, 평균 점수와 권장 점수의 비교 방식을 '다중 막대' 형태에서 <strong>'혼합형(막대 + 꺾은선) 차트'</strong>로 변경하여 대조 직관성을 극대화합니다.</p>
|
|
</section>
|
|
|
|
<!-- 2. 주요 개선 사항 -->
|
|
<section>
|
|
<h2>주요 개선 내역</h2>
|
|
|
|
<div class="spec-card">
|
|
<h3>① 가족사별 PC 사양 현황 레이아웃 고도화</h3>
|
|
<ul>
|
|
<li><strong>가로 비율 정밀 제어 (1:2)</strong>: 평균 점수 리스트와 막대그래프의 가로 폭 비율을 <code>1 : 2</code>로 엄격하게 고정하여 반응형 레이아웃 환경에서도 깨짐 없는 균형미를 제공합니다.</li>
|
|
<li><strong>가독성 개선</strong>: 가족사 텍스트 크기를 <code>0.95rem</code>, 평균 사양 점수 텍스트 크기를 <code>1.05rem</code>으로 키우고 세로 행간 여백을 확보해 가시성을 향상시켰습니다.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="spec-card">
|
|
<h3>② 직무별 PC 사양 평균 및 권장 점수 혼합 시각화</h3>
|
|
<ul>
|
|
<li><strong>혼합형 차트(Mixed Chart) 구성</strong>: 직무별 PC 사양 평균 점수는 <span class="badge badge-primary">막대(Bar)</span> 그래프로, 권장 PC 사양 점수는 그 위를 관통하는 <span class="badge badge-secondary">선(Line)</span> 그래프로 표현합니다.</li>
|
|
<li><strong>레이어 정렬 우선순위 적용</strong>: 차트 정의 시 권장 점수선(Line)이 평균 점수막대(Bar) 뒤에 가리지 않고 항상 맨 앞에 위치하도록 렌더링 우선순위(<code>order</code> 속성)를 명확히 지정합니다.</li>
|
|
<li><strong>정렬 원복</strong>: 수동 정렬을 지양하고, 직무별 실제 평균 PC 사양 점수가 높은 순으로 자동 내림차순 정렬되도록 하여 가장 자연스러운 시각화를 구축합니다.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 데이터 정의 -->
|
|
<section>
|
|
<h2>직무별 평균 및 권장 사양 점수 스펙</h2>
|
|
<p>실제 PC 자산 데이터(CPU 및 RAM 점수 연산 결과)와 관리자의 권장 기준선이 아래 명시된 대소 조건 관계를 완벽히 만족하도록 더미 데이터 및 초기 권장 스펙 기준을 재정의했습니다.</p>
|
|
|
|
<div class="note-box">
|
|
<strong>대소 관계 정렬 순서 (실제 평균 점수 기준):</strong><br>
|
|
AI 개발자 ➔ 편집 디자이너 ➔ 3D 디자이너 ➔ UXUI 디자이너 ➔ 3D 개발자 ➔ 프로그램 개발자 ➔ BIM모델러 ➔ 엔지니어 ➔ 웹 개발자 ➔ 기획자 순서로 실제 평균 점수 순위가 자동 정렬되어 시각화됩니다. (감리원은 실제 자산 데이터 부재로 비교군에서 제외)
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>정렬 순위</th>
|
|
<th>직무명</th>
|
|
<th>실제 평균 사양 점수 (Bar)</th>
|
|
<th>기본 권장 사양 점수 (기준)</th>
|
|
<th>대소 관계 평가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td><strong>AI 개발자</strong></td>
|
|
<td>88.0 점</td>
|
|
<td>95 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td><strong>편집 디자이너</strong></td>
|
|
<td>80.2 점</td>
|
|
<td>75 점</td>
|
|
<td><span class="badge badge-secondary">권장 스펙 충족</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td><strong>3D 디자이너</strong></td>
|
|
<td>78.4 점</td>
|
|
<td>90 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td><strong>UXUI 디자이너</strong></td>
|
|
<td>72.7 점</td>
|
|
<td>70 점</td>
|
|
<td><span class="badge badge-secondary">권장 스펙 충족</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td><strong>3D 개발자</strong></td>
|
|
<td>67.8 점</td>
|
|
<td>90 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>6</td>
|
|
<td><strong>프로그램 개발자</strong></td>
|
|
<td>67.3 점</td>
|
|
<td>80 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td><strong>BIM모델러</strong></td>
|
|
<td>62.1 점</td>
|
|
<td>75 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>8</td>
|
|
<td><strong>엔지니어</strong></td>
|
|
<td>42.9 점</td>
|
|
<td>60 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>9</td>
|
|
<td><strong>웹 개발자</strong></td>
|
|
<td>39.2 점</td>
|
|
<td>75 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>10</td>
|
|
<td><strong>기획자</strong></td>
|
|
<td>38.6 점</td>
|
|
<td>50 점</td>
|
|
<td><span class="badge badge-secondary">미달 (교체 요망)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>11</td>
|
|
<td><strong>감리원</strong></td>
|
|
<td>-</td>
|
|
<td>40.0 점</td>
|
|
<td><span class="badge badge-secondary">데이터 없음</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. 기술 구현 세부사항 -->
|
|
<section>
|
|
<h2>기술 구현 세부 사양</h2>
|
|
<div class="spec-card" style="border-left-color: var(--secondary);">
|
|
<h3>차트 렌더링 옵션 (Chart.js v4.x+)</h3>
|
|
<p>평균 PC 사양 점수를 보여주는 데이터셋과 권장 PC 사양 점수를 보여주는 데이터셋을 하나의 Canvas 엘리먼트에 그리되, 레이어 겹침과 시인성을 확보하기 위해 다음 세부 옵션을 바인딩합니다.</p>
|
|
<ul>
|
|
<li><strong>Average Dataset</strong>: <code>type: 'bar', order: 2, backgroundColor: '#6366F1'</code></li>
|
|
<li><strong>Recommended Dataset</strong>: <code>type: 'line', order: 1, borderColor: '#10B981', borderWidth: 3, pointRadius: 4, fill: false</code></li>
|
|
<li><strong>정렬 로직</strong>: <code>Object.keys(jobScores).sort((a, b) => jobScores[b].avg - jobScores[a].avg)</code></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2026 HM ITAM Systems. All rights reserved.</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|