Engineered Dark Deck

# Engineered Dark Deck — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 거의 검정에 가까운 차콜 배경에 미세한 라디얼 글로우 한 점, 헤어라인 1px 보더, 빠른 마이크로 모션으로 '엔지니어가 신뢰하는 정밀함'을 연출하는 다크 SaaS 덱.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 거의 검정 `#0E0E11` 배경에 슬라이드당 단 1개의 추상 라디얼 글로우(보라-청록)가 코너 한 곳에서 은은히 퍼진다, (2) 모든 카드·섹션은 1px 헤어라인 `#26262C` 보더로 나뉘고 면 채움은 거의 안 한다, (3) 콘텐츠는 중앙 정렬 축에 정연히 쌓이고, 본문은 눈부심을 낮춘 저채도 회색 `#9CA3AF`. 차트 데이터는 어둠 속에서 발광하듯 떠 보인다.

## 색
- 배경 `#0E0E11` (거의 검정 차콜, 고정)
- 표면/카드 채움 `#16161A` (배경보다 약간 밝은 차콜 — 면 채움은 KPI 카드 등 최소한만)
- 본문 텍스트 `#9CA3AF` (저채도 회색), 제목·강조 텍스트 `#F4F4F5` (거의 흰색), 캡션 `#6B7280`
- 헤어라인·보더 `#26262C` (1px)
- 강조색 **1개만**: `#8B7BF0` (소프트 바이올렛). 핵심 어절·CTA·차트 주계열·KPI 숫자에만.
- 라디얼 글로우: `#8B7BF0`에서 `#3FB8C4`(청록)로 흐르는 매우 옅은 라디얼(중심 불투명도 18% → 외곽 0%), 슬라이드당 1개, 코너 또는 가장자리에만.

## 타이포그래피
- 폰트: `Inter` (대체 `Helvetica Neue`, `Arial`). 한글 병기 시 `Pretendard`. 수치 라벨용 모노 `JetBrains Mono`(대체 `IBM Plex Mono`).
- 표지 디스플레이: 50pt / SemiBold(600) / 자간 -2% / 행간 1.1 / 최대 3줄 / 색 `#F4F4F5`
- 슬라이드 제목: 30pt / SemiBold / 자간 -1.5% / 행간 1.15 / 색 `#F4F4F5`
- 섹션 키커: 11pt / Medium(500) / 대문자 / 자간 +8% / 색 `#8B7BF0`
- 본문: 17pt / Regular / 행간 1.5 / 색 `#9CA3AF` / 슬라이드당 최대 6줄
- 카드 헤더: 14pt / SemiBold / 색 `#F4F4F5`
- KPI 대형 숫자: 44pt / SemiBold / 자간 -1.5% / 색 `#8B7BF0`
- 수치 라벨·코드 캡션: 12pt / `JetBrains Mono` / 색 `#9CA3AF`
- 캡션·출처: 10pt / Regular / 색 `#6B7280`

## 레이아웃 / 그리드
- **12열 그리드, 중앙 정렬 축.** 좌우 여백 각 0.8in, 상하 여백 각 0.65in. 거터 0.16in.
- 콘텐츠는 중앙 정렬 축에 쌓는다 — 제목·서브카피를 슬라이드 가로 중앙에, 그 아래 카드 행을 대칭으로. 본문 텍스트 줄은 좌측 정렬이되 블록 자체는 중앙 배치.
- 제목 영역: 상단 0.65~1.8in. 제목 위 키커 라벨.
- 카드: 1px `#26262C` 헤어라인 보더, 채움 없음 또는 `#16161A`. 내부 패딩 0.2in. 라운드 6px.
- 우하단 7.0~7.35in에 출처/페이지 캡션 10pt.

## 형태 / 질감
- 모서리 반경 6px. 그림자 금지(어둠 속에서 그림자는 안 보임) — 단차는 헤어라인 보더와 면 명도차로만.
- 아이콘은 1.5px 스트로크 라인 아이콘, 단색 `#9CA3AF` 또는 강조 `#8B7BF0`.
- 글로우 외에 텍스처·노이즈·패턴 금지. 글로우는 추상 라이팅이며 어떤 형태(구·로고)도 만들지 않는다.

## 차트 / 데이터 시각화 (다크 SaaS식 — 발광 라인 + 모노 수치)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩 차트의 핵심은 "어둠 속에서 데이터가 떠 보이는 발광 라인 + 모노스페이스 수치 라벨"이다.
- **차트 영역(절대값):** 플롯 영역 가로 약 6.2in × 세로 약 3.2in, 중앙 정렬. 좌측 값축 여유 0.25in, 하단 라벨 0.45in.
- **차트 타입 매칭:** 시계열 추세=얇은 라인 + 점 마커(기본), 항목 비교=세로 막대, 비중=도넛(조각 3개 이하, 중앙 핵심 수치 44pt), KPI=미니 카드(헤어라인 보더 카드에 큰 숫자 + 모노 라벨). 파이 5조각 이상·3D 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스·범례 박스 제거. 격자선은 y축 주요 눈금 1~2개만 0.5pt `#26262C`(점선 허용). y축 라벨 0·최댓값 2개.
- **축:** x축 기준선 0.75pt `#26262C`. y축선 생략. **막대·라인 기준선은 데이터 0에서 시작**(잘린 y축 금지).
- **직접 레이블링:** 범례 대신 계열명을 라인 끝에 12pt `JetBrains Mono` `#9CA3AF`로. 값 레이블은 13pt `JetBrains Mono` SemiBold, 강조 값 `#8B7BF0`·나머지 `#F4F4F5`, 자릿수·단위 일관.
- **데이터 색:** 주계열 발광 `#8B7BF0`, 보조 계열 `#3FB8C4`(청록), 3계열째 `#6B7280`(중립 회색). 무지개 금지.
- **발광 라인:** 라인 1.75pt 실선, 라인 아래에 동색 12~18% 면적 그라디언트 → 0%. 라인 자체에 가벼운 outer glow(blur 3px, 동색 35%) 1겹만. 마커는 끝점·강조점에만 지름 5px, 속 `#0E0E11`·테두리 `#8B7BF0` 1.5px.
- **세로 막대:** 막대 폭 : 간격 = 3 : 2, 모서리 반경 2px, 강조 막대 1개만 `#8B7BF0`·나머지 `#2E2E36`.
- **단위·출처:** 차트 하단에 단위 명기, 우하단 10pt 출처 캡션 의무.

## 다이어그램·컴포넌트 (다크 SaaS식 — 헤어라인 보더 노드 + 발광 커넥터)
색·차트만으로는 색 팔레트일 뿐이다. 이 팩은 아래 컴포넌트를 한 다이어그램 언어로 묶는다 — **모든 노드는 모서리 반경 6px, 채움 없음 또는 `#16161A`, 1px `#26262C` 헤어라인 보더, 커넥터는 1.25pt `#8B7BF0` 선(가벼운 outer glow blur 2px 1겹), 단계 번호는 모노스페이스 12pt `JetBrains Mono`, 강조 1요소만 보더를 `#8B7BF0` 1.5px로**. 모두 SVG로 정밀 렌더(div 블록 금지).
- **프로세스 플로우:** 가로 3~5단계. 각 노드 폭 2.0in × 높이 0.85in 사각형(반경 6px), 1px `#26262C` 보더·채움 없음, 좌상단에 모노 단계 번호("01"·"02") 12pt `#8B7BF0`, 제목 14pt SemiBold `#F4F4F5` + 캡션 12pt `#9CA3AF`. 커넥터 1.25pt `#8B7BF0` 직선 + 5px 화살촉 + outer glow 1겹. 활성 단계 1개만 보더 `#8B7BF0` 1.5px.
- **타임라인:** 수평 축 — 0.75pt `#26262C` 베이스라인, 마일스톤 마커는 한 변 6px 정사각형(속 `#0E0E11`·테두리 `#8B7BF0` 1.5px), 현재 시점만 채움 `#8B7BF0` + outer glow. 날짜 라벨 모노 12pt `#9CA3AF` 아래, 이벤트 제목 14pt SemiBold `#F4F4F5` 위. 마일스톤 4~6개.
- **비교 레이아웃:** 2~3열. 각 열은 1px `#26262C` 헤어라인 보더 카드(반경 6px, 패딩 0.2in, 채움 없음), 헤더 14pt SemiBold `#F4F4F5`, 항목 17pt `#9CA3AF`. 추천 열 1개만 보더 `#8B7BF0` 1.5px + 카드 코너에 라디얼 글로우 1점.
- **매트릭스 / 2×2:** 축선 0.75pt `#26262C`, 사분면 채움 없음, 축 라벨 모노 11pt `#8B7BF0` 대문자. 데이터 포인트는 지름 0.45in 원(채움 없음·1px `#26262C` 보더), 강조 1개만 `#8B7BF0` 채움 + outer glow.
- **계층 / 퍼널:** 3~4단 수평 띠, 각 높이 0.7in, 반경 6px, 1px `#26262C` 보더 채움 없음, 단계당 폭 18% 축소. 단계 라벨 14pt SemiBold `#F4F4F5` + 수치 모노 13pt. 핵심 단 1개만 보더 `#8B7BF0` 1.5px.
- **KPI·스탯 카드:** 1px `#26262C` 헤어라인 보더 카드(반경 6px, 채움 없음 또는 `#16161A`, 패딩 0.2in). 거대 수치 44pt SemiBold `#8B7BF0` + 라벨 모노 12pt `#9CA3AF` 대문자. 증감은 ▲/▼ + 모노 12pt(증가 `#8B7BF0`·감소 `#6B7280`). 카드 3~4개 가로 등간격 0.16in.

## 전환 (PPT)
짧고 빠른 마이크로 모션 — 페이드 0.12~0.18s 또는 위로 6px 슬라이드(0.15s ease-out). 모핑·날아오기·바운스 금지. 정밀함을 위해 모든 전환을 0.18s 이하로.

## 하지 말 것
- 강조색 2개 이상 쓰기(청록은 차트 보조 계열에만 허용, 텍스트엔 금지) — 강조는 `#8B7BF0` 하나.
- 라이트 모드로 회귀하기, 흰 배경 카드. 글로우를 2개 이상 깔거나 글로우로 형태(구·로고) 만들기.
- 그림자, 진한 네온 남발, 텍스처·노이즈 오버레이.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 무지개 계열색, 격자선 과다, 차트 테두리 박스, 범례 박스(계열 3개 미만), 잘린 y축, div 블록 막대, 라인 글로우 여러 겹.
- 모든 텍스트 줄을 중앙 정렬 — 블록은 중앙 배치하되 본문 줄 자체는 좌측 정렬.
- 이모지 불릿·클립아트·채움 아이콘.
- 슬라이드를 6줄 넘는 글로 채우기.

## 적용 예
- **표지:** `#0E0E11` 배경, 우상단 코너에 라디얼 글로우 1개. 가로 중앙에 키커 11pt + 50pt SemiBold 제목 3줄(`#F4F4F5`), 그 아래 17pt 서브카피 `#9CA3AF`. 하단 중앙에 날짜·작성처 10pt.
- **본문 슬라이드:** 중앙 키커 + 30pt 제목. 그 아래 헤어라인 보더 카드 3개를 가로로 대칭 배치, 각 카드 헤더 14pt `#F4F4F5` + 본문 17pt `#9CA3AF`. KPI는 44pt `#8B7BF0` + 모노 라벨. 우하단 캡션.
- **차트 슬라이드:** 중앙 키커 + 30pt 제목. 중앙에 약 6.2×3.2in SVG 발광 라인 차트 — 라인 1.75pt `#8B7BF0` + outer glow 1겹 + 12% 면적 채움, 끝점 마커, x축 0.75pt 헤어라인, y축 라벨 2개. 라인 끝 직접 레이블 12pt 모노. 차트 우측 또는 하단에 미니 KPI 카드 2개(헤어라인 보더 + 44pt 숫자). 차트 하단 단위, 우하단 10pt 출처.
- **프로세스 플로우 슬라이드:** 중앙 키커 + 30pt 제목. 중앙 정렬 축에 가로 4단계 노드 — 각 2.0×0.85in, 1px `#26262C` 보더 채움 없음, 모노 단계 번호 + 14pt 헤더, 사이는 1.25pt `#8B7BF0` 화살표 커넥터(glow 1겹). 활성 단계 1개만 보더 `#8B7BF0` 1.5px. 우하단 캡션.
- **KPI·타임라인 슬라이드:** 중앙 키커 + 30pt 제목. 상단에 헤어라인 보더 KPI 카드 3개 가로 등간격(44pt `#8B7BF0` 수치 + 모노 라벨 + ▲/▼ 모노), 하단에 수평 타임라인 — 0.75pt `#26262C` 축, 정사각 마일스톤 마커 4~6개, 현재 시점만 `#8B7BF0` 채움 + glow. 우하단 10pt 출처.