Monochrome Infrastructure Deck

# Monochrome Infrastructure Deck — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 순백과 순흑만으로 이뤄진 극단적 환원 미감 — '하지 않은 것 때문에 비싸 보이는' 개발자 인프라 덱.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 색은 순백 `#FFFFFF`와 순흑 `#000000`, 그리고 회색 2단계뿐 — 어디에도 컬러가 없다, (2) 산세리프 + 모노스페이스 혼합 — 본문·제목은 산세리프, 라벨·캡션·수치는 전부 모노스페이스, (3) 1px 순흑 헤어라인이 모든 카드·표·차트를 도면처럼 가른다. 강조는 색이 아니라 굵기와 보더 두께 대비로만 만든다.

## 색
- 배경 `#FFFFFF` (순백 고정, 그라디언트·텍스처 절대 금지)
- 본문·제목 텍스트 `#000000` (순흑)
- 보조 텍스트·캡션 `#666666` (중간 회색)
- 비활성·플레이스홀더 `#999999` (옅은 회색)
- 헤어라인·보더 `#000000` (1px 순흑) — 면 채움이 아니라 선으로 구획
- 표면 채움(드물게) `#F2F2F2` (아주 옅은 회색, 표 헤더 줄 등 최소한만)
- **강조색 없음.** 강조는 텍스트 굵기(Regular↔Bold)와 보더 두께(1px↔3px) 대비로만. 어떤 컬러도 쓰지 않는다.

## 타이포그래피
- 산세리프: `Geist` (대체 `Inter`, `Helvetica`). 한글 병기 시 `Pretendard`.
- 모노스페이스: `Geist Mono` (대체 `IBM Plex Mono`, `JetBrains Mono`).
- 표지 디스플레이: 48pt / 산세리프 Bold(700) / 자간 -2% / 행간 1.1 / 최대 3줄
- 슬라이드 제목: 30pt / 산세리프 SemiBold(600) / 자간 -1% / 행간 1.2 / 최대 2줄
- 섹션 키커·라벨: 11pt / **모노스페이스** Regular / 대문자 / 자간 +4% / 색 `#666666`
- 본문: 17pt / 산세리프 Regular(400) / 행간 1.45 / 슬라이드당 최대 7줄
- 카드 헤더: 14pt / 산세리프 SemiBold
- KPI 대형 숫자: 44pt / **모노스페이스** Medium(500) / 색 `#000000`
- 수치·데이터 라벨: 13pt / **모노스페이스** Regular
- 캡션·출처: 10pt / **모노스페이스** Regular / 색 `#666666`

## 레이아웃 / 그리드
- **12열 엄격 모듈러 그리드.** 좌우 여백 각 0.7in, 상하 여백 각 0.55in. 거터 0.16in. 모든 요소는 그리드 라인에 픽셀 단위로 정렬 — 도면처럼.
- 카드·모듈은 1px 순흑 헤어라인 보더로 구획, 면 채움 없음. 내부 패딩 0.2in.
- 모듈 사이 간격을 균형 있게 비운다(dense하지도 airy하지도 않은 balanced) — 모듈 간 거터 0.16in 일정 유지.
- 제목 영역: 상단 0.55~1.6in. 제목 아래 1px 순흑 헤어라인 전폭.
- 우하단 7.0~7.25in에 출처/페이지 캡션 10pt 모노. 좌하단에 페이지 번호 모노.

## 형태 / 질감
- 모서리 반경 0px (직각, 도면 느낌). 그림자 절대 금지. 그라디언트·텍스처·노이즈 금지.
- 보더 두께 2단계만 — 기본 1px, 강조 3px(둘 다 순흑). 강조 모듈은 3px 보더로.
- 아이콘은 1px 스트로크 라인 아이콘, 단색 `#000000`, 직각 코너. 채움 아이콘·둥근 아이콘 금지.
- 이미지를 쓰면 1px 순흑 보더로 감싸고, 그레이스케일 변환.

## 차트 / 데이터 시각화 (인프라식 — 채움 없는 라인/스텝 + 검정 단색)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩 차트의 핵심은 "채움 없는 라인·계단식 스텝 차트, 검정 단색, 강조는 굵기로만"이다.
- **차트 영역(절대값):** 플롯 영역 가로 약 6.0in × 세로 약 3.3in. 좌측 값축 여유 0.25in, 하단 라벨 0.45in. 1px 순흑 헤어라인 보더로 플롯 영역을 감싸는 것은 허용(도면 박스).
- **차트 타입 매칭:** 시계열 추세=채움 없는 라인 또는 계단식 스텝 차트(기본), 항목 비교=채움 없는 또는 검정 단색 막대, 비중=도넛(채움 없는 링 또는 검정 단색, 조각 3개 이하). 파이 5조각 이상·3D 금지.
- **데이터 잉크 최소화:** 배경 채움 제거, 범례 박스 제거. 격자선은 y축 주요 눈금에만 0.5pt `#999999` 점선 1~2개. y축 라벨 0·최댓값 2개, 모노스페이스 13pt.
- **축:** x축·y축선 0.75pt `#000000` 헤어라인(도면처럼 두 축 모두 그려도 됨). **막대·라인 기준선은 데이터 0에서 시작**(잘린 y축 금지).
- **직접 레이블링:** 범례 대신 계열명을 라인 끝·막대 위에 13pt 모노 `#000000`로. 값 레이블 13pt 모노 Medium, 전부 `#000000`(컬러 없음), 자릿수·단위 일관, 모노라 자연히 탭형 정렬.
- **데이터 색:** 라인·막대 모두 `#000000` 단색. 다중 계열이면 굵기·선종(실선 1.75pt / 점선 1.25pt / 가는 실선 1pt)으로 구분, 색은 안 바꾼다. 강조 계열은 2.5pt 굵은 실선.
- **라인/스텝:** 라인 1.75pt 순흑 실선, 계단식 스텝은 직각 세그먼트. 면적 채움 없음. 마커는 끝점·강조점에만 한 변 6px 정사각형(속 흰색·테두리 1px 순흑).
- **막대:** 막대 폭 : 간격 = 3 : 2, 직각 모서리. 강조 막대는 검정 단색 채움, 나머지는 채움 없이 1px 순흑 보더만(아웃라인 막대). 또는 전부 검정 + 강조 막대만 위에 라벨 굵게.
- **단위·출처:** 차트 하단에 단위 명기(모노 13pt), 우하단 10pt 모노 출처 캡션 의무.

## 다이어그램·컴포넌트 (인프라식 — 직각 헤어라인 모듈 + 검정 도면 커넥터)
색·차트만으로는 색 팔레트일 뿐이다. 이 팩은 아래 컴포넌트를 한 다이어그램 언어로 묶는다 — **모든 노드는 모서리 반경 0px(직각), 채움 없음, 1px 순흑 헤어라인 보더, 커넥터는 1px 순흑 직각 선(대각선 금지 — 도면처럼 ㄱ자 꺾임), 단계 번호는 모노스페이스 13pt `Geist Mono`("01"·"02"), 강조는 색이 아니라 보더 3px·텍스트 Bold 대비로만**. 모두 SVG로 정밀 렌더(div 블록 금지).
- **프로세스 플로우:** 가로 3~5단계. 각 노드 폭 2.0in × 높이 0.85in 직각 모듈, 1px 순흑 보더·채움 없음, 좌상단 모노 단계 번호 13pt `#000000`, 제목 14pt SemiBold + 캡션 13pt 모노 `#666666`. 커넥터는 1px 순흑 직선 + 끝에 6px 빈 삼각(아웃라인) 화살촉, 꺾일 땐 직각으로만. 강조 단계 1개만 보더 3px.
- **타임라인:** 수평 축 — 0.75pt 순흑 베이스라인, 마일스톤 마커는 한 변 7px 직각 정사각형(속 흰색·1px 순흑 보더), 현재 시점만 순흑 채움. 날짜 라벨 모노 13pt `#666666` 아래, 이벤트 제목 14pt SemiBold 위. 눈금은 축 위 1px 짧은 틱. 마일스톤 4~6개 그리드 정렬.
- **비교 레이아웃:** 2~3열 — 표(table) 형식. 각 열은 1px 순흑 보더 셀, 헤더 행만 `#F2F2F2` 면 채움, 셀 사이 1px 순흑 구분선(도면 표). 헤더 14pt SemiBold + 항목 17pt. 강조 열 1개만 외곽 보더 3px.
- **매트릭스 / 2×2:** 축선 0.75pt 순흑(x·y 모두 그림), 사분면은 1px 순흑 헤어라인으로 4칸 분할·채움 없음. 축 라벨 모노 11pt `#666666` 대문자. 데이터 포인트는 한 변 9px 직각 정사각형(속 흰색·1px 순흑), 강조 1개만 순흑 채움.
- **계층 / 퍼널:** 3~4단 수평 직각 띠, 각 높이 0.7in, 1px 순흑 보더 채움 없음, 단계당 폭 18% 축소(직각 유지·중앙 정렬). 단계 라벨 14pt SemiBold + 수치 모노 13pt. 핵심 단 1개만 보더 3px.
- **KPI·스탯 카드:** 1px 순흑 헤어라인 보더 모듈(반경 0px, 채움 없음, 패딩 0.2in). 거대 수치 44pt 모노 Medium `#000000` + 라벨 11pt 모노 `#666666` 대문자. 증감은 ▲/▼ 빈 삼각(아웃라인) + 모노 13pt(전부 `#000000` — 색 없음). 카드 3~4개 그리드 등간격 0.16in.

## 전환 (PPT)
페이드 없는 즉각적 컷에 가까운 미세 전환 — 컷 또는 0.1s 페이드만. 슬라이드 내 요소는 위로 4px 미세 슬라이드(0.12s, linear). 모핑·날아오기·바운스 절대 금지.

## 하지 말 것
- **어떤 컬러도 쓰지 않는다.** 강조색·브랜드색·차트 데이터색 전부 금지 — 강조는 굵기·보더 두께 대비로만.
- 둥근 모서리, 그림자, 그라디언트, 텍스처, 노이즈.
- 라벨·캡션·수치를 산세리프로 쓰기 — 라벨·캡션·수치는 전부 모노스페이스.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 면적 채움(이 팩 라인은 채움 없음), 무지개·계열별 색칠, 격자선 과다, 범례 박스, 잘린 y축, div 블록 막대, 둥근 막대.
- 모든 요소 중앙 정렬 — 본문은 좌측 정렬, 그리드 라인에 픽셀 정렬.
- 이모지 불릿·클립아트·스톡 아이콘·장식 도형.
- 슬라이드를 7줄 넘는 글로 채우기.

## 적용 예
- **표지:** 순백 배경. 좌측 정렬 — 모노 키커 라벨 11pt + 48pt Bold 제목 3줄(자간 -2%), 제목 아래 1px 순흑 헤어라인 전폭, 그 아래 17pt 산세리프 서브카피. 하단 좌측에 날짜·작성처 10pt 모노.
- **본문 슬라이드:** 30pt 제목 + 아래 1px 헤어라인. 1px 순흑 보더 모듈 2~3개를 12열 그리드에 정렬, 각 모듈 헤더 14pt SemiBold + 본문 17pt. 강조할 모듈만 3px 보더. KPI는 44pt 모노 Medium. 우하단 모노 캡션.
- **차트 슬라이드:** 30pt 제목 + 헤어라인. 좌측에 약 6.0×3.3in SVG 계단식 스텝 차트 — 1px 순흑 플롯 박스, 라인 1.75pt 순흑 채움 없음, x·y축 0.75pt 헤어라인, y축 라벨 2개 모노 13pt, 끝점 정사각 마커, 라인 끝 직접 레이블 13pt 모노. 우측에 해석 텍스트 3줄(굵기 대비로 강조). 차트 하단 단위 모노 명기, 우하단 10pt 모노 출처.
- **프로세스 플로우 슬라이드:** 30pt 제목 + 헤어라인. 본문 영역에 가로 4단계 직각 모듈 — 각 2.0×0.85in, 1px 순흑 보더 채움 없음, 모노 단계 번호 + 14pt 헤더, 사이는 1px 순흑 직각 커넥터 + 빈 삼각 화살촉. 강조 단계 1개만 보더 3px. 우하단 모노 캡션.
- **KPI·매트릭스 슬라이드:** 30pt 제목 + 헤어라인. 상단에 1px 순흑 보더 KPI 모듈 3개 그리드 등간격(44pt 모노 Medium 수치 + 11pt 모노 라벨 + ▲/▼ 빈 삼각), 하단에 2×2 매트릭스 — 0.75pt 순흑 x·y축 + 헤어라인 4칸 분할, 데이터 정사각 마커 4~6개, 강조 1개만 순흑 채움. 우하단 10pt 모노 출처.