127 lines
5.2 KiB
Markdown
127 lines
5.2 KiB
Markdown
# 08 · Ubisam 산출물 디자인 시스템
|
|
|
|
> 모든 프로젝트의 산출물 MD에 공통 적용하는 HTML 색상 템플릿.
|
|
> VS Code Markdown Preview / Typora / GitLab 렌더링 기준.
|
|
> 스캐폴딩·채움 어느 단계에서든 이 파일을 참조해 배너·뱃지·진행률을 적용한다.
|
|
|
|
---
|
|
|
|
## 색상 팔레트
|
|
|
|
| 구분 | 이름 | 색 코드 | 용도 |
|
|
|---|---|---|---|
|
|
| 배너 | 진네이비 | `#1F4E78` | 문서 최상단 제목 배너 |
|
|
| 헤더 | 파랑 | `#2E75B6` | 배너 하단 부제 바, 섹션 헤더 강조 |
|
|
| 상태·해야 할 일 | 회색 | `#757575` | 미착수 |
|
|
| 상태·분석 진행 | 청색 | `#1976D2` | 선택됨 |
|
|
| 상태·업무 진행중 | 파랑 | `#1565C0` | 진행 중 |
|
|
| 상태·진행 완료 | 연두 | `#689F38` | 완료 |
|
|
| 유형·오류수정 | 빨강 | `#D32F2F` | — |
|
|
| 유형·불합리 | 주황 | `#F57C00` | — |
|
|
| 유형·미팅 | 청록 | `#00796B` | 1.분석/협의 |
|
|
| 유형·설계 | 연두 | `#689F38` | 2.설계 |
|
|
| 유형·개발 | 파랑 | `#1976D2` | — |
|
|
| 유형·제작 | 남파랑 | `#283593` | 3.제작 |
|
|
| 유형·입고셋업 | 보라 | `#7B1FA2` | 4.셋업 |
|
|
| 유형·적용 및 모니터링 | 하늘 | `#0288D1` | 5.양산 |
|
|
| 유형·요청대응 | 남색 | `#1A237E` | 6.CS |
|
|
|
|
> xlsx 색상과 동일 계열: 배너=`FF1F4E78`(진네이비), 헤더=`FF2E75B6`(파랑), 데이터 홀수=`FFDDEBF7`(연파랑).
|
|
|
|
---
|
|
|
|
## 1. 문서 배너 (모든 산출물 MD 1번째 줄)
|
|
|
|
```html
|
|
<div style="background:#1F4E78;color:#fff;padding:8px 16px;border-radius:4px 4px 0 0">
|
|
<strong>문서 제목</strong> — 설비명
|
|
</div>
|
|
<div style="background:#2E75B6;color:#fff;padding:3px 16px;border-radius:0 0 4px 4px;font-size:.85em;margin-bottom:12px">
|
|
근거: 소스 파일 경로 · 플랫폼 정보
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 2. 상태 뱃지 (값에 맞춰 색 코드 교체)
|
|
|
|
```html
|
|
<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. 유형 뱃지
|
|
|
|
```html
|
|
<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:#1976D2;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:#D32F2F;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">오류수정</span>
|
|
<span style="background:#F57C00;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">불합리</span>
|
|
```
|
|
|
|
---
|
|
|
|
## 4. 진행률 바
|
|
|
|
```html
|
|
<progress value="0" max="100" style="width:160px;vertical-align:middle"></progress> **0%**
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 섹션 헤더 강조 (산출물 MD 내 시트 구분)
|
|
|
|
```markdown
|
|
## <span style="color:#2E75B6">시트① 제목</span>
|
|
```
|
|
|
|
---
|
|
|
|
## 6. 미확정 경고 (GitHub Alerts)
|
|
|
|
```markdown
|
|
> [!NOTE]
|
|
> 아래 값은 소스 분석 기반 `(제안)`. 현장 확인 후 확정.
|
|
```
|
|
|
|
---
|
|
|
|
## 7. _task.md 완성 템플릿 (디자인 포함)
|
|
|
|
단계명·프로젝트명·코드·유형·상태·진행률 토큰 교체 후 사용.
|
|
|
|
```markdown
|
|
<div style="background:#1F4E78;color:#fff;padding:8px 16px;border-radius:4px 4px 0 0">
|
|
<strong>{N}.{단계명}</strong> — {프로젝트명}
|
|
</div>
|
|
<div style="background:#2E75B6;color:#fff;padding:3px 16px;border-radius:0 0 4px 4px;font-size:.85em;margin-bottom:12px">
|
|
{프로젝트코드}-{일련번호}
|
|
</div>
|
|
|
|
| 필드 | 값 |
|
|
|---|---|
|
|
| 유형 | <span style="background:{유형색};color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">{유형명}</span> |
|
|
| 상태 | <span style="background:#757575;color:#fff;padding:1px 10px;border-radius:3px;font-size:.85em">해야 할 일</span> |
|
|
| 담당자 / 참조자 | {담당자} / {참조자} |
|
|
| 진행률 | <progress value="0" max="100" style="width:160px;vertical-align:middle"></progress> **0%** |
|
|
| Hashtag | {태그1} / {태그2} |
|
|
```
|
|
|
|
---
|
|
|
|
## 적용 규칙
|
|
- **항상 배너 먼저**: 산출물 MD 생성 시 본문 앞에 배너 블록을 삽입한다.
|
|
- **뱃지 > 텍스트**: 상태·유형은 텍스트가 아닌 뱃지 HTML로 표기한다.
|
|
- **진행률 bar 병기**: `<progress>` 태그 + bold 숫자를 함께 쓴다(텍스트 렌더러 폴백).
|
|
- **섹션 헤더**: 산출물 내 시트 구분 `##` 제목은 `<span style="color:#2E75B6">` 적용.
|
|
- **README·_meta enum**: 동일 색상 체계를 그대로 적용한다.
|