17 KiB
17 KiB
킨텍스 자동전시시스템 구축 — 제안서 디자인 시스템 (Design System)
작성: proposal-visual-designer · 작성일: 2026-07-11 · 버전 v1.0 짝 문서:
visual_concepts.md(도식 12종·표지·간지 시각 컨셉) ·assets/icons/*.svg(선 아이콘 20종) ·proposal_outline.md(63슬라이드) ·tech_advisory.md§1-4(도식 사양) 목적: 디자인 템플릿 PPTX 부재 → KINTEX 브랜드 기반 디자인 시스템을 직접 정의. deck-designer(proposal_deck.pptxpython-pptx)가 이 스펙을 벗어나지 않는다. 스타일 정합: 같은 사업 산출물 패밀리(docs/deliverables/_gen/gen_dev_plan_pptx.py개발계획서)와 동일 팔레트·폰트·16:9·도형 직접 작도 톤 유지. 제안서는 개발계획서보다 표지·간지 시각 임팩트를 1단계 상향(수주 문서 특성). 원칙: 시크릿(키·비번·내부IP) 미기재. 과도한 장식 금지 — 평가위원 가독성 우선. 명료성·위계·일관성 > 장식.
0. 아트디렉션 한 줄
"도면이 아니라 사진으로 컨펌한다" — 전시장의 공간감(블루)과 AI 생성의 지능감(퍼플)을 대비시키되, 본문은 흰 여백과 카드로 읽기 쉬운 공공 제안서를 유지한다. 표지·간지·핵심 도식(3중 해자·나노바나나 파이프라인)에만 시각 에너지를 집중하고, 나머지는 절제한다.
1. 컬러 팔레트
1-1. 주조·강조색 (Brand)
| 토큰 | HEX | RGB | 역할 | WCAG(흰 배경 대비) |
|---|---|---|---|---|
BLUE (KINTEX Blue) |
#0066B3 | 0,102,179 | 주조색 — 헤더 액센트바·섹션칩·주요 강조·표 헤더 | 5.3:1 (AA 본문/AAA 대형) |
BLUE_DK (Deep) |
#00447A | 0,68,122 | 표지/간지 배경·최심층 데이터존·강조 대비 | 8.9:1 (AAA) |
BLUE_LT (Tint) |
#E1EFF9 | 225,239,249 | 블루 계열 카드 배경·밴드 배경·연한 강조 | 배경 전용 |
PURPLE (AI Purple) |
#6D4AFF | 109,74,255 | 강조색 — AI/나노바나나/지능 요소 전용·간지 포인트·2차 액센트 | 5.0:1 (AA) |
PURPLE_DK |
#4A2FCC | 74,47,204 | 퍼플 위 텍스트 대비 보강·AI 심층 | 7.4:1 (AAA) |
PURPLE_LT (Tint) |
#ECE8FF | 236,232,255 | AI 카드 배경·퍼플 밴드 배경 | 배경 전용 |
색 규율(불변): 퍼플은 AI·나노바나나·지능·예측 맥락에만 쓴다(남발 금지). 블루=구조/공간/시스템/신뢰. 이 이원 대비가 "결정적 알고리즘(블루) + AI 보조(퍼플)" 3층 신뢰 프레이밍을 색으로 각인한다.
1-2. 중립 그레이 스케일 (Neutral)
| 토큰 | HEX | 명도 단계 | 역할 |
|---|---|---|---|
INK |
#101828 | 950 | 본문 기본 텍스트·제목 |
MUTED |
#667085 | 500 | 보조 텍스트·캡션·부제 |
SLATE |
#98A2B3 | 400 | 비활성·예정 상태·눈금·화살표 |
LINE |
#E4E7EC | 200 | 카드 테두리·구분선 |
BG |
#F9FAFB | 50 | 본문 슬라이드 페이지 배경 |
HALL_BG |
#F2F4F7 | 100 | 데이터/평면도 영역 배경·표 zebra 짝수행 |
WHITE |
#FFFFFF | 0 | 카드·본문 배경·다크 배경 위 텍스트 |
1-3. 상태색 (Status / Semantic)
| 토큰 | HEX | 의미 | 사용처 |
|---|---|---|---|
GREEN |
#129E63 | 완료·라이브·검증됨·통과 | 간트 완료바·"이미 돈다" 배지·QA 통과·라이브 실적 |
AMBER |
#E08A00 | 진행·주의·중간 리스크 | 간트 진행바·리스크 매트릭스 중위험·확인필요 |
RED |
#D92D20 | 차단·위험·실격 리스크·전기배선 | 등록 게이트 403·고위험·S6 전기 배선 범례(적) |
CYAN |
#0BA5EC | 정보·네트워크 배선 | S6 네트워크 배선 범례(청)·정보 배지 |
TEAL |
#0E9384 | 급배수·부가 | S6 급배수 배선 범례(녹) — GREEN과 구분 위해 청록 |
배선 3색 규약(도식 ⑥ PostGIS 오버레이·④ Before/After 배선 범례 고정): 전기=
RED #D92D20, 네트워크=CYAN #0BA5EC, 급배수=TEAL #0E9384. tech_advisory §1-4 ⑥의 "적/청/녹"을 색맹 안전(적-청-청록 조합, 명도차 확보)으로 확정. 상태 GREEN(완료)과 배선 TEAL(급배수)을 분리해 혼동 방지.
1-4. 접근성·색맹 안전
- 본문 텍스트(INK/MUTED)는 모두 흰/연한 배경에서 WCAG AA 이상.
- 다크 배경(BLUE_DK/BLUE) 위 텍스트는 WHITE 또는
#C7DDF2(표지 부제, 대비 확보) 사용. - 상태·배선은 색 단독 의존 금지 — 항상 텍스트 라벨/아이콘/패턴 병기(완료=✓·진행=●·차단=✕, 배선=색+실선/파선/점선 스타일 병기).
- 색맹(적록) 안전: 완료/위험을 GREEN/RED만으로 구분하지 않고 아이콘·위치로 이중 인코딩.
2. 타이포그래피
2-1. 폰트 패밀리
| 용도 | 폰트 | 대체(fallback) |
|---|---|---|
| 국문 기본 | 맑은 고딕 (Malgun Gothic) | Pretendard, 본고딕(Noto Sans KR) |
| 영문·숫자 | 맑은 고딕(동일 지정) | Segoe UI, Arial |
deck-designer는 개발계획서와 동일하게
FONT = "맑은 고딕"을 전 run에 지정하고,<a:ea typeface="맑은 고딕"/>(East Asian) 명시로 한글 렌더 일관성 확보. 외부 폰트 임베드 없이 시스템 폰트로 결정론적 생성.
2-2. 타입 위계 (16:9 · pt 기준)
| 위계 | 크기(pt) | 굵기 | 색 | 자간·행간 | 사용처 |
|---|---|---|---|---|---|
| 표지 대제목 (Display) | 44 | Bold | WHITE | line 1.02 | 표지 사업명 2줄 |
| 간지 넘버 (Section No.) | 150 | Bold | BLUE_DK(음영) | — | 간지 배경 대형 숫자 |
| 간지 제목 (Divider Title) | 34 | Bold | WHITE | — | 간지 섹션 국문명 |
| 본문 슬라이드 제목 (H1) | 22 | Bold | INK | line 1.0 | content_header 타이틀 |
| 소제목 (H2) | 13~14 | Bold | BLUE/PURPLE | — | 카드 헤더·블록 제목 |
| 강조 배너 (Lead) | 16~18 | Bold | WHITE/INK | line 1.0 | 비전 배너·핵심 문장 |
| 본문 (Body) | 10.5~11 | Regular | INK | line 1.0 | 불릿·설명 |
| 표 셀 (Table) | 8.5~10 | Regular/Bold | INK/MUTED | line 0.92 | 표 내용 |
| 캡션·부제 (Caption) | 8~9.5 | Regular | MUTED | — | 도표 캡션·부가설명 |
| 킥커 (Kicker) | 11 | Bold | PURPLE | — | 헤더 상단 섹션 라벨(대문자 영문 병기) |
| 배지·칩 (Chip) | 8~10 | Bold | WHITE | — | 배점 배지·상태칩·우선순위 |
| 지표 수치 (Metric) | 26~46 | Bold | WHITE/BLUE | — | 기대효과·통계 대형 숫자 |
| 푸터 (Footer) | 8.5 | Regular | MUTED | — | 슬라이드 하단 |
본문 최소 크기 10pt 하한(투사 가독성). 표 셀만 예외적으로 8.5pt까지 허용하되 정보 밀도 높은 표에 한정. 캡션 8pt 하한.
3. 그리드·여백 (16:9)
3-1. 캔버스
- 슬라이드: 13.333 in × 7.5 in (12192000 × 6858000 EMU), 와이드 16:9.
- deck-designer 좌표계는 개발계획서와 동일
inch(v)=v*914400헬퍼 사용.
3-2. 안전 마진·그리드
| 항목 | 값(in) | 비고 |
|---|---|---|
| 좌우 마진 | 0.55 | 콘텐츠 좌측단=0.55, 우측단=12.78 (폭 12.23) |
| 상단 (본문) | 헤더 하단 구분선 1.28, 콘텐츠 시작 1.45~1.5 | content_header 아래 |
| 하단 | 푸터 7.06, 콘텐츠 하한 6.9 | |
| 상단 액센트바 | y=0, 높이 0.12, BLUE | 전 본문 공통 |
| 컬럼 그리드 | 12 컬럼 개념 (실전: 2·3·4·5·6분할) | 카드 폭=(12.23 - gap×(n-1))/n |
| 표준 gutter | 0.16~0.35 | 카드 간격 |
3-3. 정렬·화이트스페이스 원칙
- 좌측 정렬 기본. 중앙 정렬은 칩·배지·지표 수치·간지 한정.
- 카드는 항상
LINE테두리 1pt + 라운드(ROUNDED_RECTANGLE) + 옅은 그림자(alpha 18%). 그림자는 카드·주요 노드에만(남발 금지). - 한 슬라이드 1 메시지 — 도식 1개 또는 카드 2~4개 + 하단 캡션 1줄. 밀도 상한 준수(P3 나노바나나 슬라이드도 도식+캡션+방어배지까지).
- 여백은 위계 신호 — 섹션 간 0.3in 이상 공백 확보. 꽉 채우지 않는다.
4. 슬라이드 4종 레이아웃 규격
4-1. 표지 (Cover) — S01
- 배경:
BLUE_DK풀블리드 + 우측 겹침 평행사변형 2매(BLUE큰 것,PURPLE작은 것)로 대각 에너지. 여기에 나노바나나 시공 예측 히어로 이미지(워터마크)를 우측 평행사변형 영역에 반투명 합성(개발계획서 대비 상향 포인트,visual_concepts.md§표지 참조). - 좌상: 원형 브랜드 마크(WHITE 원+PURPLE 코어) + "KINTEX · WISE AI" 15pt WHITE Bold.
- 문서종류 배지 2개: "기술제안서"(PURPLE) + "Technical Proposal"(딥블루).
- 대제목: 사업명 2줄 44pt WHITE Bold. 그 아래 슬로건 배너 강조.
- 하단 메타바: 사업명·기술스택·작성일 (라인 구분).
- 슬로건 각인: "신청서를 내는 순간, 시공 후 사진을 먼저 본다." — 부제로 대형 배치.
4-2. 간지 (Section Divider) — 각 P1~P9 앞
- 배경:
BLUE_DK풀블리드 + 우측 평행사변형 2매(BLUE/PURPLE). - 좌측: 대형 섹션 넘버 150pt(BLUE_DK보다 살짝 밝은
#2C4E82음영톤) + PURPLE 언더바 + 국문 제목 34pt + 영문 13pt. - 우측: 해당 섹션 핵심 포인트 3개(PURPLE 원 불릿 + WHITE 12.5pt).
- 배점 배지: 간지 우상단에 해당 섹션 평가배점 배지(예 "P3 · 기술제안 35점")를 추가 — 배점 규율 시각화(개발계획서엔 없던 제안서 전용 요소).
4-3. 본문 (Content) — 표준
content_header(kicker, title, idx): 상단 액센트바(BLUE 0.12) + 섹션번호 칩(라운드, BLUE) + 킥커(PURPLE 11pt) + 제목(INK 22pt) + 구분선(1.28) + 푸터.- 콘텐츠 영역: y 1.45~6.9. 카드/표/도식 배치.
- 하단 캡션 1줄 필수(도식 슬라이드) — MUTED 9pt, tech_advisory 각 도식 "캡션" 텍스트 그대로.
- REQ 배지(선택): 우상단에 해당 슬라이드 대응 REQ-ID 소형 배지(회색) — RTM 정합 가시화.
4-4. 도식 (Diagram) — 핵심 12종
- 본문 헤더 동일 + 콘텐츠 전체를 단일 도식에 할애.
- 도형은 python-pptx 직접 작도(외부 이미지 금지, 개발계획서 원칙 계승). 노드=ROUNDED_RECTANGLE, 연결=화살표 텍스트("→"/"›") 또는 얇은 라인 rect, 아이콘=본 시스템 SVG(단색 stroke, 슬라이드에선 도형 근사 또는 SVG를 EMF/PNG 없이 도형으로 재현).
- 각 도식 상세는
visual_concepts.md에 좌표·색·라벨 수준으로 명세.
5. 컴포넌트 스타일
| 컴포넌트 | 규칙 |
|---|---|
| 카드 (Card) | ROUNDED_RECTANGLE, fill WHITE, line LINE 1pt, 그림자(alpha 18%, blur 90k, dist 38k). 헤더 있으면 상단 컬러 바(0.07~0.5) 또는 좌측 컬러 스트립(0.08~0.09). |
| 섹션 넘버 칩 | 0.62×0.62 라운드, BLUE(또는 PURPLE), WHITE 20pt Bold 중앙. |
| 배점 배지 | 라운드칩, fill=섹션색, WHITE 8~10pt Bold. "20점"/"35점" 등. 배점 큰 P3는 PURPLE 강조. |
| 상태 칩 | 라운드, 완료=GREEN·진행=AMBER·예정=SLATE·차단=RED. 텍스트+색 이중. |
| 불릿 | 작은 OVAL(0.09~0.11) 컬러 점 + 텍스트. 컬러=맥락색(블루/퍼플/상태). 이모지 불릿 금지 — 선 아이콘 또는 도형 점만. |
| 콜아웃/배너 | 풀폭 라운드 rect, fill=BLUE(비전)/INK(권한구조)/PURPLE(AI강조), WHITE Bold 중앙. |
| 번호 배지 | 작은 OVAL, fill=색, WHITE 8pt Bold 숫자. 프로세스 스텝. |
| 프로세스 스텝 | 카드 나열 + 사이 화살표("›" 16pt SLATE). 좌→우 흐름. |
| 표 (Table) | 헤더=BLUE 풀폭 라운드바 WHITE Bold, 본문 zebra(짝수행 #FCFCFD/HALL_BG), 행 구분 LINE 0.01, 셀 8.5~10pt. 강조행(낙찰 등)=BLUE_LT + Bold. |
| 아이콘 | 본 시스템 assets/icons/*.svg — 선(stroke) 스타일, 24×24, stroke-width 1.75, currentColor. 슬라이드 내 색=맥락색. |
6. 차트 스타일 (BI 도식 · S38·S39·S61)
- 라이브러리 톤: Recharts 목업 재현(막대·라인·도넛·KPI 카드).
- 시퀀셜(단일 계열): BLUE 계열 명도 그라데이션(#00447A→#0066B3→#4A90D9→#9CC3E8).
- 카테고리(다계열): BLUE / PURPLE / TEAL / AMBER / SLATE 순환(최대 5, 색맹 안전 순서). 6번째부터 명도 변주.
- 비교(Before/After·As-Is/To-Be): As-Is=SLATE(회색, 과거), To-Be=BLUE(현재/개선). 개선 화살표=PURPLE.
- 강조 수치: 대형 Metric(26~46pt) + 단위 소형. KPI 카드는 BLUE/PURPLE 교차 fill + WHITE 수치.
- 축·그리드: SLATE 얇은 선, 라벨 8pt MUTED. 범례는 색+텍스트+마커 형태 병기.
- 도넛/파이: 최대 5조각, 나머지 "기타" 회색 통합. 중앙에 총계 수치.
7. 아이콘 시스템 (선 스타일 SVG — 직접 제작)
7-1. 공통 제작 규격 (전 20종 통일)
- viewBox:
0 0 24 24 - fill:
none(면 채움 절대 금지) - stroke:
currentColor(슬라이드에서 맥락색 상속) - stroke-width:
1.75(전 아이콘 동일 시각 무게) - stroke-linecap:
round, stroke-linejoin:round - 그리드 정렬: 24 그리드, 여백 2(콘텐츠 영역 2~22), 코너 반경 통일감.
- 외부 라이브러리·폰트아이콘·온라인 생성 금지 — 전량 직접 패스 작도.
- 한 세트 통일 메타포: 기하 단순·동일 디테일 밀도(오버피팅 금지).
7-2. 아이콘 20종 (최소 16종 요구 → 20종 제작)
| # | 파일명 | 의미 | 주 사용 슬라이드 |
|---|---|---|---|
| 1 | ai-sparkle.svg |
AI/스파클/지능 | 나노바나나·AI 전 슬라이드·간지 |
| 2 | booth-layout.svg |
부스/레이아웃/배치 | M2 플로어플랜·모듈맵 |
| 3 | wiring-power.svg |
배선/전기/유틸리티 | M4 배선·아키텍처 |
| 4 | camera-render.svg |
카메라/렌더링/시각화 | 나노바나나 샷세트·표지 |
| 5 | auction-gavel.svg |
옥션/경매 망치 | M15 옥션 폐루프 |
| 6 | visitor-badge.svg |
관람객/배지 | M10 관람·등록 |
| 7 | shield-security.svg |
보안/방패 | P5 보안·불변원칙 |
| 8 | watermark.svg |
워터마크 | AI 이미지 보안·워터마크 |
| 9 | tenant-building.svg |
테넌트/전시관/빌딩 | 멀티테넌시·확장 |
| 10 | schedule-gantt.svg |
일정/간트 | P8 일정·마일스톤 |
| 11 | org-people.svg |
조직/사람 | 추진체계도·페르소나 |
| 12 | check-verify.svg |
체크/검증/규정 | 규정검증·QA·커버리지 |
| 13 | dashboard-chart.svg |
대시보드/차트/BI | M16 경영분석·기대효과 |
| 14 | mobile.svg |
모바일/반응형 | 현장·모바일·접근성 |
| 15 | document-rtm.svg |
문서/서류/RTM | M6 서류·RTM·커버리지 |
| 16 | risk-warning.svg |
리스크/경고 | 리스크 매트릭스·확인필요 |
| 17 | postgis-spatial.svg |
공간데이터/PostGIS/폴리곤 | 단일 공간원천·배선 |
| 18 | pipeline-flow.svg |
파이프라인/큐/비동기 | 나노바나나 파이프라인·아키텍처 |
| 19 | network-zone.svg |
망분리/보안영역 | 보안영역 분리도 |
| 20 | closed-loop.svg |
폐루프/순환 | 생애주기 폐루프·옥션 |
16종 요구 대비 20종 제작(공간데이터·파이프라인·망분리·폐루프 4종 추가 — 킨텍스 도식 핵심 메타포 보강).
7-3. deck-designer 아이콘 사용 지침
- python-pptx는 SVG 직접 임베드가 어려우므로, 각 아이콘은 (a) 슬라이드 헤더/칩 옆 시각 앵커로 쓸 때는 대응 도형(원+선) 근사 작도, (b) 아이콘 자체가 콘텐츠일 때는 SVG를 사전 PNG 변환(cairosvg/inkscape) 후 삽입 가능. 변환 시 stroke 색=맥락색으로 렌더.
- 색 상속: 아이콘 stroke는 배치 맥락색(블루=구조, 퍼플=AI, 상태색=상태)으로 지정.
8. deck-designer 전달 요약 (준수 계약)
- 팔레트 상수를 §1 표 그대로 코드 상단에 정의(개발계획서
gen_dev_plan_pptx.py와 동일 변수명 재사용 + PURPLE_DK·RED·CYAN·TEAL 추가). - 폰트 맑은 고딕 전 run + East Asian 지정.
- 레이아웃 4종(§4) 헬퍼 함수화:
cover(),divider(no,kr,en,points,score),content_header(), 도식별 함수. - 12종 도식 + 표준 3종(추진체계·리스크·기대효과)은
visual_concepts.md좌표·라벨대로 작도. 재해석 금지. - 색 규율: 퍼플=AI 전용, 배선 3색 고정(적/청/청록), 상태색 의미 고정.
- 가독성 우선: 본문 10pt 하한, 한 슬라이드 1메시지, 캡션 1줄, 여백 확보.
- 보안: 시크릿·내부IP 도식/라벨에 미기재. 외부 API는 "승인 예외"로만 표기.