4.4 KiB
4.4 KiB
PTOP 산출물 — Ubisam 디자인 시스템
MD 산출물에 적용하는 HTML 색상 템플릿 모음. VS Code Markdown Preview / Typora / GitLab 렌더링 기준.
색상 팔레트
| 구분 | 이름 | 색 코드 | 용도 |
|---|---|---|---|
| 배너 | 진네이비 | #1F4E78 |
문서 최상단 제목 배너 |
| 헤더 | 파랑 | #2E75B6 |
배너 하단 부제 바, 섹션 강조 |
| 연파랑 | — | #DDEBF7 |
테이블 홀수 행 참조 (xlsx 전용, MD 생략 가능) |
| 상태·해야 할 일 | 회색 | #757575 |
미착수 |
| 상태·분석 진행 | 청색 | #1976D2 |
선택됨 |
| 상태·업무 진행중 | 파랑 | #1565C0 |
진행 중 |
| 상태·진행 완료 | 연두 | #689F38 |
완료 |
| 유형·오류수정 | 빨강 | #D32F2F |
— |
| 유형·불합리 | 주황 | #F57C00 |
— |
| 유형·미팅 | 청록 | #00796B |
1.분석/협의 |
| 유형·설계 | 연두 | #689F38 |
2.설계 |
| 유형·개발 | 파랑 | #1976D2 |
— |
| 유형·제작 | 남파랑 | #283593 |
3.제작 |
| 유형·입고셋업 | 보라 | #7B1FA2 |
4.셋업 |
| 유형·적용 및 모니터링 | 하늘 | #0288D1 |
5.양산 |
| 유형·요청대응 | 남색 | #1A237E |
6.CS |
1. 문서 배너 (최상단)
산출물 MD 파일 1번째 줄부터 적용.
<div style="background:#1F4E78;color:#fff;padding:8px 16px;border-radius:4px 4px 0 0;margin-bottom:0">
<strong style="font-size:1.1em">문서 제목</strong>
</div>
<div style="background:#2E75B6;color:#fff;padding:4px 16px;border-radius:0 0 4px 4px;font-size:.85em;margin-bottom:12px">
근거: 소스 경로 · Aurora 2.0 / .NET 4.8.1 / WPF
</div>
2. 상태 뱃지
_task.md 상태 필드에 사용. 값에 맞춰 색 코드 교체.
<!-- 해야 할 일 -->
<span style="background:#757575;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">해야 할 일</span>
<!-- 분석 진행 -->
<span style="background:#1976D2;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">분석 진행</span>
<!-- 업무 진행중 -->
<span style="background:#1565C0;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">업무 진행중</span>
<!-- 진행 완료 -->
<span style="background:#689F38;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">진행 완료</span>
3. 유형 뱃지
<span style="background:#00796B;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">미팅</span>
<span style="background:#689F38;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">설계</span>
<span style="background:#283593;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">제작</span>
<span style="background:#7B1FA2;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">입고셋업</span>
<span style="background:#0288D1;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">적용 및 모니터링</span>
<span style="background:#1A237E;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">요청대응</span>
<span style="background:#1976D2;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">개발</span>
4. 진행률 바
<progress> 태그 + 텍스트 병기 (렌더러 호환).
<progress value="85" max="100" style="width:160px;vertical-align:middle"></progress> <strong>85%</strong>
5. _task.md 전체 템플릿
<div style="background:#1F4E78;color:#fff;padding:8px 16px;border-radius:4px 4px 0 0">
<strong>N.단계명</strong> — LGES OC5 PtoP Welder
</div>
<div style="background:#2E75B6;color:#fff;padding:3px 16px;border-radius:0 0 4px 4px;font-size:.85em;margin-bottom:12px">
LGES_PTOP_01_20260605-XXXX
</div>
| 필드 | 값 |
|---|---|
| 유형 | <span style="background:COLOR;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">유형명</span> |
| 상태 | <span style="background:COLOR;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">상태명</span> |
| 담당자 / 참조자 | {미정} / {미정} |
| 진행률 | <progress value="N" max="100" style="width:160px;vertical-align:middle"></progress> **N%** |
| Hashtag | 태그1 / 태그2 |
6. 산출물 섹션 헤더
산출물 MD 내 시트 구분 헤더.
## <span style="color:#2E75B6">시트① 제목</span>
7. 미확정·제안 강조
> [!NOTE]
> 아래 값은 소스 enum offset 기반 `(제안)`. PLC 맵 CSV 입수 후 확정.