5.2 KiB
5.2 KiB
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번째 줄)
<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. 상태 뱃지 (값에 맞춰 색 코드 교체)
<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:#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. 진행률 바
<progress value="0" max="100" style="width:160px;vertical-align:middle"></progress> **0%**
5. 섹션 헤더 강조 (산출물 MD 내 시트 구분)
## <span style="color:#2E75B6">시트① 제목</span>
6. 미확정 경고 (GitHub Alerts)
> [!NOTE]
> 아래 값은 소스 분석 기반 `(제안)`. 현장 확인 후 확정.
7. _task.md 완성 템플릿 (디자인 포함)
단계명·프로젝트명·코드·유형·상태·진행률 토큰 교체 후 사용.
<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: 동일 색상 체계를 그대로 적용한다.