PPTppt-consulting-precision-grid

컨설팅 정밀그리드

12열 모듈러 그리드 위 무채색 본문과 단일 강조색의 헤어라인 보더 데이터 박스, 액션 타이틀 헤더의 컨설팅 보고서 정형.

미리보기

컨설팅 정밀그리드 샘플 렌더

색 토큰

bg
#FFFFFF
surface
#F4F5F7
text
#1A1A1A
text_muted
#6B7280
accent
#0B5FFF
border
#D1D5DB

타이포 · 간격 토큰

display · {"family":"Arial","fallback":"Helvetica, Liberation Sans, Pretendard","size":"24pt","weight":700,"tracking":"-0.01em","leading":1.15}
kicker · {"family":"Arial","size":"11pt","weight":700,"tracking":"0.08em","case":"uppercase"}
body · {"family":"Arial","size":"16pt","weight":400,"leading":1.3}
kpi · {"family":"Arial","size":"40pt","weight":700,"color":"#0B5FFF"}
caption · {"family":"Arial","size":"9pt","weight":400,"color":"#6B7280"}
spacing.unit · 8
spacing.margin_x · 0.6in
spacing.margin_y · 0.5in
spacing.gutter · 0.15in

스타일 축

색채mono
타이포minimal-sans
레이아웃strict-grid
여백dense
모션none
familyconsulting-grid

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 컨설팅 정밀그리드 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 맥킨지·BCG식 전략 보고서 미감 — 12열 모듈러 그리드 위에 무채색 본문과 단일 강조색을 헤어라인 보더로 구획한다.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 모든 슬라이드 상단에 액션 타이틀(완결된 문장형 메시지) + 그 아래 헤어라인 룰 1px, (2) 본문은 회색 계열만, 강조는 단 1개 색을 데이터 박스 보더·KPI 숫자에만, (3) 우하단에 항상 출처 캡션. 장식은 없고 정렬 정밀도가 전부다.

## 색
- 배경 `#FFFFFF` (순백 고정, 그라디언트·텍스처 금지)
- 표면/데이터 박스 채움 `#F4F5F7` (아주 옅은 회색)
- 본문 텍스트 `#1A1A1A`, 보조 텍스트·캡션 `#6B7280`
- 헤어라인·구분선 `#D1D5DB` (1px)
- 강조색 **1개만**: `#0B5FFF` (코발트 블루) — KPI 숫자, 차트 핵심 계열, 액션 타이틀 강조 어절, 데이터 박스 좌측 보더 4px에만. 그 외 어디에도 컬러 금지.

## 타이포그래피
- 폰트: `Arial` (대체 `Helvetica`, `Liberation Sans`). 한글 병기 시 `Pretendard`.
- 액션 타이틀: 24pt / Bold / 자간 -1% / 행간 1.15 / 최대 2줄
- 섹션 키커(타이틀 위 라벨): 11pt / Bold / 대문자 / 자간 +8% / 색 `#6B7280`
- 본문: 16pt / Regular / 행간 1.3 / 슬라이드당 최대 6줄
- 데이터 박스 헤더: 13pt / Bold
- KPI 대형 숫자: 40pt / Bold / 색 `#0B5FFF`
- 출처 캡션: 9pt / Regular / 색 `#6B7280`

## 레이아웃 / 그리드
- **12열 모듈러 그리드.** 좌우 여백 각 0.6in, 상하 여백 각 0.5in. 열 간격(거터) 0.15in.
- 액션 타이틀 영역: 상단 0.5~1.4in, 그 아래 헤어라인 룰 1px 전폭.
- 본문 콘텐츠: 1.6in부터 6.7in까지. 2열·3열·4열 모듈로 분할, 모듈 경계는 헤어라인.
- 데이터 박스: 1px `#D1D5DB` 보더 + 좌측 4px `#0B5FFF` 보더. 내부 패딩 0.15in.
- 우하단 6.9~7.2in에 출처 캡션 고정. 좌하단에 슬라이드 번호 9pt.

## 형태 / 질감
- 모서리 반경 0px (직각). 그림자 전면 금지. 아이콘은 1.5px 스트로크 라인 아이콘만, 단색 `#1A1A1A`.

## 차트 / 데이터 시각화 (맥킨지식 — 무채색 + 강조 1막대)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 컨설팅 차트의 핵심은 "회색 막대들 사이에서 단 하나만 강조색"이다.
- **차트 영역(절대값):** 차트 플롯 영역은 가로 약 6.0in × 세로 약 3.6in 안에 그린다(12열 중 좌측 6열). 좌측에 값축 여유 0.2in, 하단에 카테고리 라벨 0.5in 확보. 모든 막대·축·레이블은 픽셀 단위로 정확히 정렬.
- **차트 타입 매칭:** 항목 비교=세로 막대(기본), 시계열 추세=라인, 비중=도넛(조각 3개 이하, 중앙 핵심 수치) 또는 100% 누적 막대 1줄, 구성 변화 비교=기울기(slope) 그래프. 파이차트 조각 5개 이상 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스 제거, 배경 채움 제거, 범례 박스 제거. 격자선은 그리지 않거나 y축 주요 눈금에만 0.5pt `#E5E7EB` 헤어라인 1~2개. y축 눈금 라벨은 0과 최댓값 2개만.
- **축:** x축 기준선만 0.75pt `#D1D5DB` 헤어라인. y축선은 생략. **막대 기준선은 반드시 데이터 0에서 시작**(잘린 y축·확대 축척 절대 금지 — 막대 길이가 값에 정비례해야 한다).
- **직접 레이블링:** 범례 대신 카테고리 이름을 각 막대 바로 아래 11pt `#6B7280`로. 값 레이블은 막대 끝 위 0.06in에 **14pt Bold**, 강조 막대 값은 `#0B5FFF`·나머지는 `#1A1A1A`, 자릿수·단위·소수 자리 일관(예 "32%" "₩1.2조"), 숫자는 탭형(tabular figures) 정렬로 자릿수가 세로로 맞게.
- **데이터 색:** 강조할 막대 단 1개만 `#0B5FFF`, 나머지 막대는 전부 `#C9CDD3`(중립 회색). 무지개·계열별 다른색 금지. 계열이 둘이면 `#0B5FFF` + `#9CA3AF` 두 톤만.
- **세로 막대:** 막대 폭 : 간격 = 3 : 2. 모든 막대 폭·정렬 동일, 픽셀 일치. 모서리 각지게(반경 0). 막대 외곽선 없음(채움만).
- **라인 차트:** 1.75pt 실선, 주계열 `#0B5FFF`·보조 `#9CA3AF`, 마커는 끝점·강조점에만 지름 6px 원. 면적 채움 없음. 곡선 보간 금지(직선 세그먼트).
- **액션 타이틀 + 출처:** 차트 슬라이드도 상단 24pt 액션 타이틀 의무. 차트 하단에 단위 명기("단위: %, 2025"), 우하단 9pt 출처 캡션 의무.

## 다이어그램·컴포넌트 (정밀그리드 다이어그램 언어 — 헤어라인 직각, 강조 1색)

모든 다이어그램은 SVG로 정밀 렌더한다(div 블록 금지). 컨설팅 정밀그리드의 다이어그램 언어는 한 세트로 묶인다 — **노드는 직각 사각형(반경 0), 보더는 1px `#D1D5DB` 헤어라인, 커넥터는 0.75pt 직선 + 4px 삼각 화살촉, 번호 배지는 지름 0.28in 원형(1px `#0B5FFF` 보더 + 흰 채움 + `#0B5FFF` 12pt Bold 숫자), 강조는 `#0B5FFF` 하나만** 활성 요소에. 곡선·둥근 모서리·그림자 금지.

- **프로세스 플로우:** 수평 4~5단계. 각 노드는 직각 사각형 폭 2.1in × 높이 0.9in, 1px `#D1D5DB` 보더 + `#F4F5F7` 채움. 노드 좌상단에 번호 배지(원형, 위 규격). 노드 사이 커넥터는 0.75pt `#1A1A1A` 직선 + 4px 삼각 화살촉, 노드 우변 중앙 → 다음 노드 좌변 중앙. 노드 내 13pt Bold 단계명 + 12pt Regular 한 줄 설명. 활성/핵심 단계 1개만 좌측 4px `#0B5FFF` 보더.
- **타임라인:** 수평 축 0.75pt `#D1D5DB` 헤어라인, 좌→우. 마일스톤 마커는 한 변 0.12in 직각 사각형(`#1A1A1A` 채움), 축 위에 정확히 정렬. 각 마커 위 11pt `#6B7280` 날짜 라벨 + 아래 13pt `#1A1A1A` 이벤트명. 현재 시점만 마커를 `#0B5FFF` 채움 + 그 위로 0.4in 수직 헤어라인 + "현재" 9pt 라벨.
- **비교 레이아웃:** 2~3열 직각 박스, 열 사이 1px `#D1D5DB` 구분선. 각 열 상단에 13pt Bold 헤더(헤어라인 룰 1px 아래로). 행은 좌측 16pt 항목 라벨 + 각 열 값, 행 사이 0.5pt `#E5E7EB` 헤어라인. 우월 열 1개만 헤더에 좌측 4px `#0B5FFF` 보더로 표시.
- **매트릭스 2×2:** 한 변 약 4.0in 정사각, 십자 축은 0.75pt `#D1D5DB`. 축 라벨은 11pt 대문자 키커 `#6B7280`(가로축 양 끝·세로축 양 끝). 사분면은 채움 없음(흰 바탕), 데이터 포인트는 지름 0.16in 원 — 중립은 `#C9CDD3` 채움, 핵심 1개만 `#0B5FFF` 채움 + 옆에 13pt `#1A1A1A` 라벨. 우상단 사분면만 `#F4F5F7` 옅은 채움 허용.
- **계층 / 퍼널:** 수직 3~5단. 각 단은 직각 사각형(반경 0), 폭이 위→아래로 단계별 1.0in씩 감소(퍼널) 또는 동일 폭 수직 적층(계층). 1px `#D1D5DB` 보더 + `#F4F5F7` 채움, 단 사이 간격 0.1in. 각 단 좌측에 번호 배지, 내부 13pt Bold 레벨명 + 우측에 16pt 수치. 최하단/핵심 단 1개만 좌측 4px `#0B5FFF` 보더.
- **KPI 스탯 카드:** 직각 사각형 폭 약 2.6in × 높이 1.7in, 1px `#D1D5DB` 보더 + 좌측 4px `#0B5FFF` 보더 + 흰 채움. 내부: 상단 11pt 대문자 키커 라벨 `#6B7280`, 중앙 40pt Bold `#0B5FFF` 수치(탭형), 하단 12pt 증감 표시 — 증가 "▲ 0.0%p", 감소 "▼ 0.0%p"(둘 다 `#6B7280` 무채색, 화살표만 작게). 카드 3~4개를 12열 그리드에 균등 배치.

## 전환 (PPT)

모핑·날아오기 금지. 슬라이드 전환은 즉시 컷 또는 0.2s 페이드만.

## 하지 말 것
- 강조색 2개 이상 쓰기, 텍스트에 컬러 입히기 — 강조는 `#0B5FFF` 하나, 데이터/KPI에만.
- 둥근 모서리 박스, 그림자, 그라디언트.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 원근·기울임, 막대/조각 그림자·광택·베벨, 무지개·계열별 색칠, 격자선 과다, 차트 테두리 박스, 배경 채움, 범례 박스(계열 4개 미만일 때), 잘린 y축·확대 축척(0에서 시작 안 함), 둥근 막대, div 블록 막대. 막대는 전부 회색 + 강조 1개만 `#0B5FFF`.
- 모든 요소 중앙 정렬 — 본문은 전부 좌측 정렬.
- 이모지 불릿·클립아트·스톡 아이콘·장식 도형.
- 출처 캡션 누락. 데이터를 쓰면 출처는 의무.
- 슬라이드를 6줄 넘는 글로 채우기.

## 적용 예
- **표지:** 좌측 정렬 — 상단 키커 라벨, 24pt 보고서 제목 2줄, 헤어라인 룰, 하단에 날짜·작성처 9pt. 배경 순백.
- **본문 슬라이드:** 액션 타이틀 1줄 + 그 아래 3열 데이터 박스, 각 박스 헤더 13pt + 본문 16pt. 우하단 출처.
- **차트 슬라이드:** 상단 24pt 액션 타이틀 + 헤어라인 룰. 좌측 6열에 약 6.0×3.6in SVG 세로 막대 차트 — 막대 폭:간격 3:2, 강조 막대 1개만 `#0B5FFF`·나머지 `#C9CDD3`, 막대 끝 위 14pt Bold 탭형 값 레이블(강조값만 `#0B5FFF`), 막대 아래 11pt `#6B7280` 카테고리명, x축 0.75pt 헤어라인 1줄·격자선 0~1개, 막대는 데이터 0 기준선. 우측 6열에 해석 텍스트 3줄. 차트 하단 단위 명기, 우하단 9pt 출처.
- **프로세스 슬라이드:** 액션 타이틀 + 헤어라인 룰 아래, 수평 4단계 프로세스 — 직각 사각형 노드 2.1×0.9in, 좌상단 원형 번호 배지(1~4), 노드 사이 0.75pt 직선 + 4px 삼각 화살촉, 핵심 단계 1개만 좌측 4px `#0B5FFF` 보더. 우하단 출처 캡션.
- **매트릭스 슬라이드:** 액션 타이틀 아래 약 4.0in 정사각 2×2 매트릭스 — 0.75pt 십자 축, 양 끝 11pt 대문자 키커 축 라벨, 데이터 포인트는 지름 0.16in 원(중립 `#C9CDD3`·핵심 1개 `#0B5FFF`) + 13pt 라벨, 우상단 사분면만 `#F4F5F7` 옅은 채움. 우측 여백에 해석 텍스트, 우하단 9pt 출처.
- **KPI 슬라이드:** 액션 타이틀 아래 KPI 스탯 카드 4개를 12열 그리드 균등 배치 — 카드 2.6×1.7in, 1px 보더 + 좌측 4px `#0B5FFF` 보더, 키커 라벨 + 40pt Bold `#0B5FFF` 수치 + 12pt 증감(▲/▼ 무채색). 우하단 9pt 출처.

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