PPTppt-strategy-navy-deck

Strategy Navy Deck

다층 블루 2색 시스템과 세리프 헤딩+산세리프 본문, 12열 그리드 위 액션 타이틀과 근거 모듈의 전략 컨설팅 덱.

미리보기

Strategy Navy Deck 샘플 렌더

색 토큰

bg
#FFFFFF
surface
#F1F4F9
text
#14213D
text_muted
#5B6472
accent
#2563EB
navy
#14213D
border
#C7D0DD

타이포 · 간격 토큰

display · {"family":"PT Serif","fallback":"Georgia, Source Serif 4, Noto Serif KR","size":"26pt","weight":700,"tracking":"-0.01em","leading":1.18}
kicker · {"family":"Inter","size":"11pt","weight":600,"tracking":"0.08em","case":"uppercase","color":"#5B6472"}
module_header · {"family":"Inter","size":"14pt","weight":600,"color":"#14213D"}
body · {"family":"Inter","fallback":"Arial, Pretendard","size":"15pt","weight":400,"leading":1.35}
kpi · {"family":"PT Serif","size":"42pt","weight":700,"color":"#2563EB"}
caption · {"family":"Inter","size":"9pt","weight":400,"color":"#5B6472"}
spacing.unit · 8
spacing.margin_x · 0.6in
spacing.margin_y · 0.5in
spacing.gutter · 0.14in

스타일 축

색채vivid-primary
타이포mixed
레이아웃strict-grid
여백dense
모션none
familystrategy-navy

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 업계 공통 시각 규범(액션 타이틀·12열 그리드·데이터잉크 최소화 차트) 명세이며 McKinsey/BCG의 로고·고유 색 코드·독점 PowerPoint 템플릿 자산 사본이 아니다. 폰트는 오픈 라이선스 대체(PT Serif / Inter)를 지정한다.

이 팩 적용하기 — design-pick 스킬

Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.

PPT 만들기
design-pick 스킬로 "ppt-strategy-navy-deck" 팩을
적용해서 [내 주제] 발표자료를 만들어줘

스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick .claude/skills/에 복사하면 됩니다.

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 스트래티지 네이비 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 흰 바탕에 다층 블루 2색 시스템으로 위계를 만드는 전략 컨설팅 덱 — 액션 타이틀 + 근거 모듈, 맥킨지·BCG식 차트의 정석.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 모든 슬라이드 상단에 "액션 타이틀"(완결된 문장형 핵심 메시지) — 단순 라벨이 아니라 그 슬라이드가 증명할 결론. (2) 다크 네이비와 비비드 블루 두 가지 블루 + 회색만으로 위계를 만든다(다른 색 없음). (3) 헤딩은 세리프, 본문·라벨·차트 텍스트는 산세리프 — 혼합 타이포로 '스마트 심플리시티'를 시각화. 12열 그리드에 근거 모듈이 정연하게 정렬된다.

## 색
- 배경 `#FFFFFF` (순백 고정, 그라디언트·텍스처 금지)
- 표면/근거 모듈 면 `#F1F4F9` (아주 옅은 청회색)
- 다크 네이비(1차 텍스트·구조색) `#14213D`
- 비비드 블루(강조·핵심 데이터) `#2563EB`
- 보조 텍스트·캡션 `#5B6472` (청회색)
- 헤어라인·구분선 `#C7D0DD` (1px)
- 색 규칙: 위계는 네이비 + 비비드 블루 + 회색 **3톤만**. 강조가 필요하면 비비드 블루, 구조·본문은 네이비, 보조는 회색. 그 외 색 전면 금지.

## 타이포그래피
- 헤딩 폰트(세리프): `PT Serif` (대체 `Georgia`, `Source Serif 4`). 한글 병기 시 `Noto Serif KR`.
- 본문·라벨 폰트(산세리프): `Inter` (대체 `Arial`, `Pretendard`).
- 액션 타이틀: 26pt / PT Serif / Bold(700) / 자간 -1% / 행간 1.18 / 최대 2줄 (강조 어절만 `#2563EB`)
- 섹션 키커(타이틀 위): 11pt / Inter / Semibold(600) / 대문자 / 자간 +8% / 색 `#5B6472`
- 근거 모듈 헤더: 14pt / Inter / Semibold(600) / 색 `#14213D`
- 본문: 15pt / Inter / Regular(400) / 행간 1.35 / 슬라이드당 최대 6줄
- KPI 대형 숫자: 42pt / PT Serif / Bold(700) / 색 `#2563EB`
- 출처·각주: 9pt / Inter / Regular(400) / 색 `#5B6472`

## 레이아웃 / 그리드
- **12열 모듈러 그리드.** 좌우 여백 각 0.6in, 상하 각 0.5in. 거터 0.14in.
- 액션 타이틀 영역: 상단 0.5~1.45in. 그 위 키커, 타이틀 아래 1pt `#14213D` 전폭 룰 라인.
- 본문 콘텐츠: 1.65in부터 6.75in까지. 2열·3열·4열 근거 모듈로 분할. 모든 모듈은 그리드 열에 정확히 스냅.
- 근거 모듈: `#F1F4F9` 면 + 상단 3px `#2563EB` 보더(또는 좌측 3px). 내부 패딩 0.16in.
- 우하단 6.95~7.2in에 출처 캡션 9pt 고정. 좌하단 슬라이드 번호 9pt.

## 형태 / 질감
- 모서리 반경 0px(직각). 그림자 전면 금지. 그라디언트·글로우 금지.
- 아이콘은 1.5px 스트로크 라인 아이콘만, 단색 `#14213D`, 채움 금지. 슬라이드당 아이콘 5개 이하.
- 다이어그램(프로세스·매트릭스)은 직각 박스 + 1px `#C7D0DD` 보더 + 1.5px 화살표, 강조 노드만 `#2563EB` 채움.

## 차트 / 데이터 시각화 (맥킨지·BCG식 — 이 팩의 핵심, 컨설팅 차트의 정석)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩은 컨설팅 차트의 정석을 보여주는 팩이다 — 차트가 곧 논증이다. 모든 차트 슬라이드는 아래 규범을 빠짐없이 지킨다.
- **차트 영역(절대값):** 플롯 영역 가로 약 6.0in × 세로 약 3.6in(12열 중 좌측 6~7열). 좌측 값축 여유 0.25in, 하단 카테고리 라벨 0.5in. 우측 5~6열은 차트가 증명하는 시사점(테이크어웨이) 텍스트. 모든 막대·점·축·레이블은 픽셀 단위 정렬.
- **액션 타이틀 의무:** 차트 슬라이드도 상단 26pt 세리프 액션 타이틀 — 차트가 증명하는 결론을 문장으로(예: "디지털 채널이 3년 내 매출의 절반을 차지한다"). 차트 자체에 별도 제목 금지(액션 타이틀이 제목).
- **차트 타입 매칭:** 항목 비교=세로 막대, 시계열 추세=라인 또는 컬럼, 비중=도넛(조각 3개 이하, 중앙 핵심 수치) 또는 100% 누적 막대, 구성 변화 비교=기울기(slope) 그래프, 누적 구성=스택 막대(세그먼트 4개 이하), 두 축 관계=버블/산점도. 파이 5조각 이상·3D·이중축 혼합 금지.
- **데이터 잉크 최소화(Tufte):** 차트 테두리 박스·배경 채움·범례 박스 제거. 격자선은 그리지 않거나 y축 주요 눈금에만 0.5pt `#E3E8F0` 헤어라인 2개 이하. y축 눈금 라벨은 0과 최댓값 2개만(또는 직접 레이블 시 생략).
- **축:** x축 기준선만 0.75pt `#C7D0DD` 헤어라인. y축선 생략. **막대·라인 기준선은 반드시 데이터 0에서 시작**(잘린 y축·확대 축척 절대 금지 — 막대 길이가 값에 정비례).
- **직접 레이블링:** 범례 대신 계열 이름을 막대·라인 끝에 직접 13pt Inter `#14213D`. 카테고리 이름은 각 막대 아래 11pt Inter `#5B6472`. 값 레이블은 막대 끝 위/세그먼트 안 0.06in에 14pt Inter Semibold, 강조 데이터 값만 `#2563EB`·나머지 `#14213D`, 자릿수·단위·소수 자리 일관(예 "48%" "₩1.2조"), 탭형(tabular figures) 정렬로 자릿수 세로 일치.
- **데이터 색(컨설팅의 핵심 기법):** 강조할 막대/세그먼트 단 1개만 `#2563EB`(비비드 블루), 나머지 막대는 전부 `#A8B4C6`(중립 청회색). 무지개·계열별 다른색 절대 금지. 계열이 둘이면 `#2563EB`(주) + `#14213D`(보조) 두 톤만. 스택 막대 세그먼트는 `#14213D`→`#2563EB`→`#7CA0F0`→`#A8B4C6` 같은 한 블루의 명도 단계.
- **세로 막대:** 막대 폭 : 간격 = 3 : 2. 모든 막대 폭·정렬 픽셀 일치. 모서리 반경 0px. 외곽선 없음(채움만).
- **스택/100% 누적 막대:** 세그먼트 4개 이하, 세그먼트 안에 값 레이블 직접(어두운 세그먼트엔 흰 글자, 옅은 세그먼트엔 네이비). 세그먼트 사이 0.75px 흰 분리선.
- **라인 차트:** 1.75pt 실선, 주계열 `#2563EB`·보조 `#14213D`, 마커는 끝점·강조점에만 지름 6px 원. 면적 채움 없음. 곡선 보간 금지(직선 세그먼트). 라인 끝에 계열명 직접 라벨.
- **도넛:** 조각 3개 이하, 강조 조각만 `#2563EB`·나머지 명도 단계 회청색, 중앙에 42pt PT Serif 핵심 수치. 다중 링·3D 금지.
- **기울기 그래프:** 좌·우 두 시점, 각 끝점에 값+계열명 직접 라벨, 강조 계열만 `#2563EB` 2pt·나머지 `#A8B4C6` 1.25pt.
- **출처·단위 의무:** 차트 하단에 단위·연도 명기("단위: %, 2025년"), 우하단 9pt 출처 캡션 의무. 데이터를 쓰면 출처는 필수.

## 다이어그램·컴포넌트 (컨설팅 다이어그램의 정석 — 차트와 한 언어)
다이어그램은 전부 SVG로 정밀 렌더한다(div 블록 금지). 이 팩의 다이어그램 언어는 차트와 동일하다 — **직각 박스(반경 0px), 1px `#C7D0DD` 보더, 1.5px 화살표, 활성/핵심 노드 단 1개만 `#2563EB` 채움·나머지 무채색**. 화살촉은 가는 채움 삼각(폭 0.1in). 단계 번호는 동일 배지로: 한 변 0.32in 정사각형, 1px `#C7D0DD` 보더, `#FFFFFF` 채움, 안에 `Inter` Semibold 13pt `#14213D` — 활성 단계만 `#2563EB` 채움 + `#FFFFFF` 숫자. 다이어그램 텍스트는 전부 산세리프 `Inter`. 모든 노드·축은 12열 그리드에 픽셀 단위 스냅, 좌측 정렬.
- **프로세스 플로우:** 수평 단계 노드, 노드 = `#F1F4F9` 면 + 1px `#C7D0DD` 보더 + 상단 3px `#2563EB` 보더(활성만; 비활성은 상단 보더 `#C7D0DD`), 폭 1.9in × 높이 0.9in, 0px 반경, 내부 패딩 0.16in. 노드 위 좌측 0.32in 번호 배지, 노드 안 14pt `Inter` Semibold `#14213D` 헤더 + 12pt 보조 1줄. 커넥터 = 1.5px `#14213D` 실선 + 가는 채움 삼각 화살촉. 노드 간격 0.3in. 최대 5단계. 활성 단계 1개만 `#2563EB`.
- **타임라인:** 수평 1px `#C7D0DD` 축선 1줄. 마일스톤 마커 = 지름 8px 원, `#FFFFFF` 채움 + 1.5px `#A8B4C6` 테두리(현재/핵심 시점만 `#2563EB` 채움). 마커 위 11pt `Inter` Semibold 대문자 날짜, 마커 아래 14pt `Inter` `#14213D` 이벤트명 + 12pt `#5B6472` 보조. 마커 6개 이하, 등간격. 현재 시점은 0.75pt `#2563EB` 수직 점선으로도 표시.
- **비교 레이아웃:** 2~3열 대조 표. 각 열 상단 14pt `Inter` Semibold `#14213D` 헤더 + 그 아래 1px `#C7D0DD` 룰. 열 사이 1px `#C7D0DD` 수직 구분선. 행 = `#F1F4F9`/`#FFFFFF` 교차 또는 행 사이 0.75px `#C7D0DD` 헤어라인. 우열/추천 열 1개만 상단 3px `#2563EB` 보더로 표시. ✓/✗는 1.5px 스트로크 글리프(✓ `#2563EB` / ✗ `#A8B4C6`).
- **매트릭스 / 2×2:** 가로·세로 축선 각 0.75pt `#C7D0DD` 십자, 좌측 6~7열. 사분면 채움 없음(또는 권장 사분면 1개만 `#F1F4F9` 옅은 채움). 축 라벨 11pt `Inter` Semibold 대문자, 사분면명 14pt `Inter` Semibold `#14213D`. 데이터 포인트 = 지름 0.18~0.5in 버블, `#A8B4C6` 채움, 강조 1개만 `#2563EB` 채움. 버블 옆 11pt 라벨. 우측 5~6열에 시사점 텍스트.
- **계층 / 피라미드 / 퍼널:** 3~4레벨, 위→아래 폭이 변하는 직각 막대 스택 또는 사다리꼴. 레벨 채움은 한 블루의 명도 단계(`#14213D`→`#2563EB`→`#7CA0F0`→`#A8B4C6`) 또는 전부 `#F1F4F9`+1px 보더에 핵심 1레벨만 `#2563EB`. 레벨 사이 0.75px 흰 분리선. 레벨 라벨 도형 안 14pt `Inter` Semibold(어두운 레벨엔 흰 글자), 우측에 12pt `#5B6472` 설명.
- **KPI·스탯 카드:** `#F1F4F9` 면 + 상단 3px `#2563EB` 보더(근거 모듈과 동일), 0px 반경, 내부 패딩 0.16in. 구성 = 11pt `Inter` Semibold 대문자 키커 → 42pt `PT Serif` Bold 수치(`#2563EB`) → 14pt `Inter` 설명. 증감은 수치 옆 13pt `Inter` Semibold + 가는 ▲/▼ 글리프(▲ `#2563EB` / ▼ `#5B6472`). 카드 2~4열, 사이 간격 거터 0.14in.

## 전환 (PPT)
모핑·날아오기·줌 금지. 슬라이드 전환은 즉시 컷 또는 0.2s 페이드만. 빌드(점진 등장)는 차트 막대를 한 번에 또는 좌→우 0.3s까지만.

## 하지 말 것
- 강조색 2개 이상, 블루/회색 외 색 사용 — 위계는 네이비 + 비비드 블루 + 회색 3톤뿐.
- 액션 타이틀을 단순 라벨("매출 현황")로 — 반드시 결론 문장.
- 헤딩에 산세리프, 본문에 세리프 — 헤딩=세리프, 본문/차트 텍스트=산세리프 고정.
- 둥근 모서리 박스, 그림자, 그라디언트.
- **아마추어 차트 회귀 절대 금지:** 3D·입체 막대, 원근·기울임, 막대/조각 그림자·광택·베벨, 무지개·계열별 색칠, 격자선 과다, 차트 테두리 박스, 배경 채움, 범례 박스(계열 4개 미만일 때), 잘린 y축·확대 축척(0에서 시작 안 함), 둥근 막대, div 블록 막대, 이중축 혼합, 파이 5조각 이상. 막대는 전부 회청색 + 강조 1개만 `#2563EB`.
- 모든 요소 중앙 정렬 — 본문·모듈 전부 좌측 정렬, 12열 그리드 스냅.
- 출처 캡션 누락. 이모지 불릿·클립아트·스톡 아이콘.
- 슬라이드를 6줄 넘는 글로 채우기.

## 적용 예
- **표지:** 흰 배경 좌측 정렬 — 상단 11pt 키커, 26pt 세리프 보고서 제목 2줄(핵심 어절 `#2563EB`), 1pt 네이비 룰 라인, 하단에 날짜·작성처 9pt 산세리프. 우측에 옅은 `#F1F4F9` 면 한 칸으로 비대칭 균형.
- **본문 슬라이드:** 키커 + 26pt 세리프 액션 타이틀(결론 문장) + 룰. 아래 3열 근거 모듈, 각 모듈 상단 3px `#2563EB` 보더 + 14pt 헤더 + 15pt 본문 4줄. 우하단 출처.
- **차트 슬라이드:** 키커 + 26pt 세리프 액션 타이틀(차트가 증명하는 결론). 좌측 6~7열에 약 6.0×3.6in SVG 세로 막대 — 막대 폭:간격 3:2, 강조 막대 1개만 `#2563EB`·나머지 `#A8B4C6`, 막대 끝 위 14pt Semibold 탭형 값(강조값만 비비드 블루), 막대 아래 11pt 카테고리, x축 0.75pt 헤어라인, 격자선 0~2개, 막대는 데이터 0 기준선. 우측 5~6열에 차트가 증명하는 테이크어웨이 15pt 텍스트 3줄. 차트 하단 단위·연도, 우하단 9pt 출처.
- **프로세스 다이어그램 슬라이드:** 키커 + 26pt 세리프 액션 타이틀 + 룰. 3~5단계 수평 프로세스 — 각 노드 1.9×0.9in 직각 `#F1F4F9` 박스 + 1px `#C7D0DD` 보더, 노드 위 0.32in 정사각 번호 배지, 1.5px `#14213D` 커넥터 + 가는 채움 삼각 화살촉, 활성 단계 1개만 상단 3px·번호 배지 `#2563EB`. 하단에 단계별 15pt 보조 설명.
- **매트릭스 슬라이드:** 키커 + 26pt 세리프 액션 타이틀 + 룰. 좌측 6~7열에 0.75pt `#C7D0DD` 2×2 십자 축 — 권장 사분면만 `#F1F4F9` 옅은 채움, 11pt 대문자 축 라벨 + 14pt 사분면명, 데이터 포인트는 `#A8B4C6` 버블 + 강조 1개만 `#2563EB`. 우측 5~6열에 15pt 시사점 텍스트 3줄. 또는 3~4열 KPI 스탯 카드 행 — 상단 3px `#2563EB` 보더 + 42pt 세리프 블루 수치 + ▲/▼ 증감.

복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.